wip

src/common/ui/components/accordion.tsx → src/common/ui/components/atoms/accordion.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 // import { ChevronDown } from "lucide-react";
 
-import { cn } from "../utils";
+import { cn } from "../../utils";
 
 const Accordion = AccordionPrimitive.Root;
 

src/common/ui/components/alert.tsx → src/common/ui/components/atoms/alert.tsx

@@ -2,7 +2,7 @@ import { forwardRef } from "react";
 
 import { type VariantProps, cva } from "class-variance-authority";
 
-import { cn } from "../utils";
+import { cn } from "../../utils";
 
 const alertVariants = cva(
   cn(

src/common/ui/components/avatar.tsx → src/common/ui/components/atoms/avatar.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 
-import { cn } from "../utils";
+import { cn } from "../../utils";
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,

src/common/ui/components/button.tsx → src/common/ui/components/atoms/button.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { type VariantProps, cva } from "class-variance-authority";
 
-import { cn } from "../utils";
+import { cn } from "../../utils";
 
 // TODO: add correct hover effects
 const buttonVariants = cva(

src/common/ui/components/calendar.tsx → src/common/ui/components/atoms/calendar.tsx

@@ -2,7 +2,7 @@ import { ChevronLeft, ChevronRight } from "lucide-react";
 import { DayPicker } from "react-day-picker";
 
 import { buttonVariants } from "./button";
-import { cn } from "../utils";
+import { cn } from "../../utils";
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 

src/common/ui/components/atoms/card.tsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+
+import { cn } from "../../utils";
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className,
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

src/common/ui/components/checkbox.tsx → src/common/ui/components/atoms/checkbox.tsx

@@ -3,7 +3,7 @@ import { forwardRef } from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { Check } from "lucide-react";
 
-import { cn } from "../utils";
+import { cn } from "../../utils";
 
 export const Checkbox = forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,

src/common/ui/components/select.tsx → src/common/ui/components/atoms/select.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
 
-import { cn } from "../utils";
+import { cn } from "../../utils";
 
 const Select = SelectPrimitive.Root;
 

src/common/ui/components/switch.tsx → src/common/ui/components/atoms/switch.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 
-import { cn } from "../utils";
+import { cn } from "../../utils";
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,

src/common/ui/components/index.ts

@@ -1,13 +1,9 @@
-export * from "./accordion";
-export * from "./alert";
-export * from "./avatar";
-export * from "./button";
-export * from "./calendar";
-export * from "./checkbox";
-export * from "./clipboard-copy-button";
-export * from "./dialog";
+/**
+ * Yet to be sorted in accordance to the Atomic Design principles
+ *
+ * See https://atomicdesign.bradfrost.com/chapter-2/
+ */
 export * from "./dropdown-menu";
-export * from "./Filter";
 export * from "./form";
 export * from "./InfiniteScroll";
 export * from "./input";
@@ -16,23 +12,39 @@ export * from "./popover";
 export * from "./radio-group";
 export * from "./scroll-area";
 export * from "./SearchBar";
-export * from "./select";
 export * from "./skeleton";
-export * from "./SortSelect";
 export * from "./Spinner";
-export * from "./switch";
 export * from "./textarea";
 export * from "./toggle";
 export * from "./toggle-group";
 export * from "./typography";
-export * from "./custom-avatar";
+
+/**
+ * Atoms
+ *
+ * See https://atomicdesign.bradfrost.com/chapter-2/#atoms
+ */
+export * from "./atoms/accordion";
+export * from "./atoms/alert";
+export * from "./atoms/avatar";
+export * from "./atoms/badge";
+export * from "./atoms/button";
+export * from "./atoms/calendar";
+export * from "./atoms/card";
+export * from "./atoms/checkbox";
+export * from "./atoms/select";
+export * from "./atoms/switch";
 
 /**
  * Molecules
  *
  * See https://atomicdesign.bradfrost.com/chapter-2/#molecules
  */
+export * from "./molecules/clipboard-copy-button";
 export * from "./molecules/data-loading-placeholder";
+export * from "./molecules/dialog";
+export * from "./molecules/filter";
+export * from "./molecules/sort-select";
 
 /**
  * Organisms

src/common/ui/components/command.tsx → src/common/ui/components/molecules/command.tsx

@@ -4,9 +4,8 @@ import { type DialogProps } from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
 
-import { cn } from "@/common/ui/utils";
-
 import { Dialog, DialogContent } from "./dialog";
+import { cn } from "../../utils";
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,

src/common/ui/components/dialog.tsx → src/common/ui/components/molecules/dialog.tsx

@@ -3,8 +3,8 @@ import { forwardRef } from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { ArrowLeft, X } from "lucide-react";
 
-import { Button } from "./button";
-import { cn } from "../utils";
+import { cn } from "../../utils";
+import { Button } from "../atoms/button";
 
 const Dialog = DialogPrimitive.Root;
 

src/common/ui/components/Filter.tsx → src/common/ui/components/molecules/filter.tsx

@@ -2,10 +2,10 @@ import { PopoverProps } from "@radix-ui/react-popover";
 import { ToggleGroupMultipleProps } from "@radix-ui/react-toggle-group";
 import Image from "next/image";
 
-import { Button } from "./button";
-import { Label } from "./label";
-import { Popover, PopoverContent, PopoverTrigger } from "./popover";
-import { ToggleGroup, ToggleGroupItem } from "./toggle-group";
+import { Button } from "../atoms/button";
+import { Label } from "../label";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+import { ToggleGroup, ToggleGroupItem } from "../toggle-group";
 
 // Define the item type
 type Item = {

src/common/ui/components/multi-select.tsx → src/common/ui/components/molecules/multi-select.tsx

@@ -10,10 +10,10 @@ import React, {
 import { Command as CommandPrimitive } from "cmdk";
 import { Check, X as RemoveIcon } from "lucide-react";
 
-import { Badge } from "./badge";
-// import { Command, CommandEmpty, CommandItem, CommandList } from "./command";
 import { Command, CommandList } from "./command";
-import { cn } from "../utils";
+import { cn } from "../../utils";
+import { Badge } from "../atoms/badge";
+// import { Command, CommandEmpty, CommandItem, CommandList } from "./command";
 
 type MultiSelectorProps = {
   values: string[];

src/common/ui/components/SortSelect.tsx → src/common/ui/components/molecules/sort-select.tsx

@@ -1,8 +1,8 @@
 import { SelectProps, Trigger } from "@radix-ui/react-select";
 import Image from "next/image";
 
-import { Button } from "./button";
-import { Select, SelectContent, SelectItem } from "./select";
+import { Button } from "../atoms/button";
+import { Select, SelectContent, SelectItem } from "../atoms/select";
 
 export const SortSelect = ({
   options,

src/modules/pot/components/FundMatchingPoolModal.tsx

@@ -5,20 +5,20 @@ import { Form } from "react-hook-form";
 import { Pot } from "@/common/api/potlock";
 import { yoctoNearToFloat } from "@/common/lib";
 import {
+  Badge,
   Button,
   Checkbox,
-  CustomAvatar,
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   FormField,
   Input,
+  Spinner,
   Textarea,
 } from "@/common/ui/components";
-import { Badge } from "@/common/ui/components/badge";
-import Spinner from "@/common/ui/components/Spinner";
 import routesPath from "@/modules/core/routes";
+import { CustomAvatar } from "@/modules/profile";
 import { useTypedSelector } from "@/store";
 
 import { useFundMatchingPoolForm, useProtocolConfig } from "../hooks";

src/modules/pot/components/PayoutsChallenges/PayoutsChallenges.tsx

@@ -7,8 +7,8 @@ import AdminIcon from "@/common/assets/svgs/AdminIcon";
 import { Challenge as ChallengeType } from "@/common/contracts/potlock/interfaces/pot.interfaces";
 import * as potContract from "@/common/contracts/potlock/pot";
 import getTimePassed from "@/common/lib/getTimePassed";
-import { CustomAvatar } from "@/common/ui/components";
 import routesPath from "@/modules/core/routes";
+import { CustomAvatar } from "@/modules/profile";
 import { useTypedSelector } from "@/store";
 
 import { Challenge, Container, Line, Table, Title } from "./styles";

src/modules/pot/components/PoolAllocationTable/Table/index.tsx

@@ -4,10 +4,10 @@ import Link from "next/link";
 
 import { Toggle } from "@/common/assets/svgs";
 import { truncate } from "@/common/lib";
-import { CustomAvatar } from "@/common/ui/components";
 import { oneNearUsdPrice } from "@/modules/core";
 import routesPath from "@/modules/core/routes";
 import { JoinDonation } from "@/modules/pot/hooks";
+import { CustomAvatar } from "@/modules/profile";
 import useProfileData from "@/modules/profile/hooks/useProfileData";
 
 import { Container, Row } from "./styles";

src/modules/pot/components/SponsorsBoard/SponsorsBoard.tsx

@@ -1,8 +1,8 @@
 import Link from "next/link";
 
 import { truncate } from "@/common/lib";
-import { CustomAvatar } from "@/common/ui/components";
 import routesPath from "@/modules/core/routes";
+import { CustomAvatar } from "@/modules/profile";
 import useProfileData from "@/modules/profile/hooks/useProfileData";
 
 import { Container } from "./styles";

src/modules/pot/components/SponsorsTable/SponsorsTable.tsx

@@ -3,7 +3,6 @@ import { useEffect, useState } from "react";
 import Link from "next/link";
 
 import { truncate } from "@/common/lib";
-import { CustomAvatar } from "@/common/ui/components";
 import {
   Tooltip,
   TooltipContent,
@@ -12,6 +11,7 @@ import {
 } from "@/common/ui/components/tooltip";
 import Pagination from "@/modules/core/components/Pagination";
 import routesPath from "@/modules/core/routes";
+import { CustomAvatar } from "@/modules/profile";
 
 import { Container, NoResult, Percentage, TrRow } from "./styles";
 import { CustomDonationType } from "../../models/types";

src/modules/profile/components/FollowButton.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 
 import { getSocialData, setSocialData } from "@/common/contracts/social";
-import { Button } from "@/common/ui/components/button";
+import { Button } from "@/common/ui/components";
 import useWallet from "@/modules/auth/hooks/useWallet";
 
 type Props = {

src/modules/profile/components/Info.tsx

@@ -7,8 +7,7 @@ import CheckIcon from "@/common/assets/svgs/CheckIcon";
 import ReferrerIcon from "@/common/assets/svgs/ReferrerIcon";
 import { DEFAULT_URL } from "@/common/constants";
 import truncate from "@/common/lib/truncate";
-import { ClipboardCopyButton } from "@/common/ui/components";
-import { Button } from "@/common/ui/components/button";
+import { Button, ClipboardCopyButton } from "@/common/ui/components";
 import { useAuth } from "@/modules/auth/hooks/useAuth";
 import useWallet from "@/modules/auth/hooks/useWallet";
 import routesPath from "@/modules/core/routes";

src/common/ui/components/custom-avatar.tsx → src/modules/profile/components/custom-avatar.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 
-import useProfileData from "@/modules/profile/hooks/useProfileData";
+import useProfileData from "../hooks/useProfileData";
 
 const NO_IMAGE =
   "https://ipfs.near.social/ipfs/bafkreiccpup6f2kihv7bhlkfi4omttbjpawnsns667gti7jbhqvdnj4vsm";

src/modules/profile/index.ts

@@ -1,3 +1,4 @@
+export * from "./components/custom-avatar";
 export { ProfileLink } from "./components/ProfileLink";
 export { ProfileLayout } from "./components/ProfileLayout";
 export { profilesModel, navModel } from "./models";

src/modules/project-editor/components/CreateForm/components.tsx

@@ -10,7 +10,7 @@ import {
   MultiSelectorItem,
   MultiSelectorList,
   MultiSelectorTrigger,
-} from "@/common/ui/components/multi-select";
+} from "@/common/ui/components/molecules/multi-select";
 import useProfileData from "@/modules/profile/hooks/useProfileData";
 import { useTypedSelector } from "@/store";