From 4ee12a9ff5e2115ccfd929676165ea53c0867090 Mon Sep 17 00:00:00 2001
From: Nutthapat Pongtanyavichai <contact@leomotors.me>
Date: Tue, 24 Dec 2024 22:12:48 +0700
Subject: [PATCH] refactor!: move ui component to atom/molecule folder

---
 apps/web/src/routes/+page.svelte                 | 16 ++++++++--------
 apps/web/src/routes/dbdemo/+page.svelte          |  6 +++++-
 .../accordion/accordion-content.svelte           |  2 +-
 .../{ => atom}/accordion/accordion-item.svelte   |  2 +-
 .../accordion/accordion-trigger.svelte           |  2 +-
 .../accordion/accordion.stories.svelte           |  0
 .../src/components/{ => atom}/accordion/index.ts |  0
 .../{ => atom}/button/button.stories.svelte      |  0
 .../components/{ => atom}/button/button.svelte   |  2 +-
 .../ui/src/components/{ => atom}/button/index.ts |  0
 .../{ => atom}/checkbox/checkbox.stories.svelte  |  0
 .../{ => atom}/checkbox/checkbox.svelte          |  2 +-
 .../src/components/{ => atom}/checkbox/index.ts  |  0
 .../{ => atom}/chip/chip.stories.svelte          |  0
 .../src/components/{ => atom}/chip/chip.svelte   |  2 +-
 .../ui/src/components/{ => atom}/chip/index.ts   |  0
 .../{ => atom}/day-chip/day-chip.stories.svelte  |  0
 .../{ => atom}/day-chip/day-chip.svelte          |  4 ++--
 .../src/components/{ => atom}/day-chip/index.ts  |  0
 .../gened-chip/gened-chip.stories.svelte         |  0
 .../{ => atom}/gened-chip/gened-chip.svelte      |  4 ++--
 .../components/{ => atom}/gened-chip/index.ts    |  0
 .../{ => atom}/icon-button/icon-button.svelte    |  2 +-
 .../components/{ => atom}/icon-button/index.ts   |  0
 .../ui/src/components/{ => atom}/input/index.ts  |  0
 .../src/components/{ => atom}/input/input.svelte |  4 ++--
 .../components/{ => atom}/radio-group/index.ts   |  0
 .../radio-group/radio-group-item.svelte          |  2 +-
 .../radio-group/radio-group.stories.svelte       |  0
 .../{ => atom}/radio-group/radio-group.svelte    |  2 +-
 .../{ => atom}/recommended-tag/index.ts          |  0
 .../recommended-tag.stories.svelte               |  0
 .../recommended-tag/recommended-tag.svelte       |  2 +-
 .../subject-details/description.svelte           |  0
 .../{ => atom}/subject-details/index.ts          |  0
 .../{ => atom}/subject-details/label.svelte      |  0
 .../subject-details/subject-details.svelte       |  0
 .../ui/src/components/{ => atom}/switch/index.ts |  0
 .../{ => atom}/switch/switch.stories.svelte      |  0
 .../components/{ => atom}/switch/switch.svelte   |  2 +-
 .../ui/src/components/{ => atom}/table/index.ts  |  0
 .../{ => atom}/table/table-body.svelte           |  2 +-
 .../{ => atom}/table/table-caption.svelte        |  2 +-
 .../{ => atom}/table/table-cell.svelte           |  2 +-
 .../{ => atom}/table/table-footer.svelte         |  2 +-
 .../{ => atom}/table/table-head.svelte           |  2 +-
 .../{ => atom}/table/table-header.svelte         |  2 +-
 .../components/{ => atom}/table/table-row.svelte |  2 +-
 .../{ => atom}/table/table.stories.svelte        |  0
 .../src/components/{ => atom}/table/table.svelte |  2 +-
 .../course-card/course-card.stories.svelte       |  0
 .../course-card/course-card.svelte               | 10 +++++-----
 .../{ => molecule}/course-card/index.ts          |  0
 53 files changed, 43 insertions(+), 39 deletions(-)
 rename packages/ui/src/components/{ => atom}/accordion/accordion-content.svelte (95%)
 rename packages/ui/src/components/{ => atom}/accordion/accordion-item.svelte (92%)
 rename packages/ui/src/components/{ => atom}/accordion/accordion-trigger.svelte (95%)
 rename packages/ui/src/components/{ => atom}/accordion/accordion.stories.svelte (100%)
 rename packages/ui/src/components/{ => atom}/accordion/index.ts (100%)
 rename packages/ui/src/components/{ => atom}/button/button.stories.svelte (100%)
 rename packages/ui/src/components/{ => atom}/button/button.svelte (95%)
 rename packages/ui/src/components/{ => atom}/button/index.ts (100%)
 rename packages/ui/src/components/{ => atom}/checkbox/checkbox.stories.svelte (100%)
 rename packages/ui/src/components/{ => atom}/checkbox/checkbox.svelte (97%)
 rename packages/ui/src/components/{ => atom}/checkbox/index.ts (100%)
 rename packages/ui/src/components/{ => atom}/chip/chip.stories.svelte (100%)
 rename packages/ui/src/components/{ => atom}/chip/chip.svelte (94%)
 rename packages/ui/src/components/{ => atom}/chip/index.ts (100%)
 rename packages/ui/src/components/{ => atom}/day-chip/day-chip.stories.svelte (100%)
 rename packages/ui/src/components/{ => atom}/day-chip/day-chip.svelte (89%)
 rename packages/ui/src/components/{ => atom}/day-chip/index.ts (100%)
 rename packages/ui/src/components/{ => atom}/gened-chip/gened-chip.stories.svelte (100%)
 rename packages/ui/src/components/{ => atom}/gened-chip/gened-chip.svelte (88%)
 rename packages/ui/src/components/{ => atom}/gened-chip/index.ts (100%)
 rename packages/ui/src/components/{ => atom}/icon-button/icon-button.svelte (95%)
 rename packages/ui/src/components/{ => atom}/icon-button/index.ts (100%)
 rename packages/ui/src/components/{ => atom}/input/index.ts (100%)
 rename packages/ui/src/components/{ => atom}/input/input.svelte (94%)
 rename packages/ui/src/components/{ => atom}/radio-group/index.ts (100%)
 rename packages/ui/src/components/{ => atom}/radio-group/radio-group-item.svelte (97%)
 rename packages/ui/src/components/{ => atom}/radio-group/radio-group.stories.svelte (100%)
 rename packages/ui/src/components/{ => atom}/radio-group/radio-group.svelte (93%)
 rename packages/ui/src/components/{ => atom}/recommended-tag/index.ts (100%)
 rename packages/ui/src/components/{ => atom}/recommended-tag/recommended-tag.stories.svelte (100%)
 rename packages/ui/src/components/{ => atom}/recommended-tag/recommended-tag.svelte (94%)
 rename packages/ui/src/components/{ => atom}/subject-details/description.svelte (100%)
 rename packages/ui/src/components/{ => atom}/subject-details/index.ts (100%)
 rename packages/ui/src/components/{ => atom}/subject-details/label.svelte (100%)
 rename packages/ui/src/components/{ => atom}/subject-details/subject-details.svelte (100%)
 rename packages/ui/src/components/{ => atom}/switch/index.ts (100%)
 rename packages/ui/src/components/{ => atom}/switch/switch.stories.svelte (100%)
 rename packages/ui/src/components/{ => atom}/switch/switch.svelte (97%)
 rename packages/ui/src/components/{ => atom}/table/index.ts (100%)
 rename packages/ui/src/components/{ => atom}/table/table-body.svelte (91%)
 rename packages/ui/src/components/{ => atom}/table/table-caption.svelte (92%)
 rename packages/ui/src/components/{ => atom}/table/table-cell.svelte (94%)
 rename packages/ui/src/components/{ => atom}/table/table-footer.svelte (92%)
 rename packages/ui/src/components/{ => atom}/table/table-head.svelte (93%)
 rename packages/ui/src/components/{ => atom}/table/table-header.svelte (94%)
 rename packages/ui/src/components/{ => atom}/table/table-row.svelte (94%)
 rename packages/ui/src/components/{ => atom}/table/table.stories.svelte (100%)
 rename packages/ui/src/components/{ => atom}/table/table.svelte (92%)
 rename packages/ui/src/components/{ => molecule}/course-card/course-card.stories.svelte (100%)
 rename packages/ui/src/components/{ => molecule}/course-card/course-card.svelte (90%)
 rename packages/ui/src/components/{ => molecule}/course-card/index.ts (100%)

diff --git a/apps/web/src/routes/+page.svelte b/apps/web/src/routes/+page.svelte
index b812f89db..6d2083eec 100644
--- a/apps/web/src/routes/+page.svelte
+++ b/apps/web/src/routes/+page.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-  import * as Accordion from '@repo/ui/accordion'
-  import { Button } from '@repo/ui/button'
-  import { Chip } from '@repo/ui/chip'
-  import { CourseCard } from '@repo/ui/course-card'
-  import { DayChip } from '@repo/ui/day-chip'
-  import { GenedChip } from '@repo/ui/gened-chip'
-  import { Input } from '@repo/ui/input'
-  import { RecommendedTag } from '@repo/ui/recommended-tag'
+  import * as Accordion from '@repo/ui/atom/accordion'
+  import { Button } from '@repo/ui/atom/button'
+  import { Chip } from '@repo/ui/atom/chip'
+  import { DayChip } from '@repo/ui/atom/day-chip'
+  import { GenedChip } from '@repo/ui/atom/gened-chip'
+  import { Input } from '@repo/ui/atom/input'
+  import { RecommendedTag } from '@repo/ui/atom/recommended-tag'
+  import { CourseCard } from '@repo/ui/molecule/course-card'
 
   let counter = $state(0)
 
diff --git a/apps/web/src/routes/dbdemo/+page.svelte b/apps/web/src/routes/dbdemo/+page.svelte
index 237ab3574..4872c03a0 100644
--- a/apps/web/src/routes/dbdemo/+page.svelte
+++ b/apps/web/src/routes/dbdemo/+page.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
   import type { PageData } from './$types'
 
-  export let data: PageData
+  interface Props {
+    data: PageData
+  }
+
+  let { data }: Props = $props()
 </script>
 
 <h1 class="text-h1">DB Demo</h1>
diff --git a/packages/ui/src/components/accordion/accordion-content.svelte b/packages/ui/src/components/atom/accordion/accordion-content.svelte
similarity index 95%
rename from packages/ui/src/components/accordion/accordion-content.svelte
rename to packages/ui/src/components/atom/accordion/accordion-content.svelte
index ee54b2c3c..1ed2392ce 100644
--- a/packages/ui/src/components/accordion/accordion-content.svelte
+++ b/packages/ui/src/components/atom/accordion/accordion-content.svelte
@@ -3,7 +3,7 @@
   import type { Snippet } from 'svelte'
   import { slide } from 'svelte/transition'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   type $$Props = AccordionPrimitive.ContentProps
 
diff --git a/packages/ui/src/components/accordion/accordion-item.svelte b/packages/ui/src/components/atom/accordion/accordion-item.svelte
similarity index 92%
rename from packages/ui/src/components/accordion/accordion-item.svelte
rename to packages/ui/src/components/atom/accordion/accordion-item.svelte
index 07131739e..57c10f5d6 100644
--- a/packages/ui/src/components/accordion/accordion-item.svelte
+++ b/packages/ui/src/components/atom/accordion/accordion-item.svelte
@@ -2,7 +2,7 @@
   import { Accordion as AccordionPrimitive } from 'bits-ui'
   import type { Snippet } from 'svelte'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   type $$Props = AccordionPrimitive.ItemProps
 
diff --git a/packages/ui/src/components/accordion/accordion-trigger.svelte b/packages/ui/src/components/atom/accordion/accordion-trigger.svelte
similarity index 95%
rename from packages/ui/src/components/accordion/accordion-trigger.svelte
rename to packages/ui/src/components/atom/accordion/accordion-trigger.svelte
index 8d5cec5e6..7705c3437 100644
--- a/packages/ui/src/components/accordion/accordion-trigger.svelte
+++ b/packages/ui/src/components/atom/accordion/accordion-trigger.svelte
@@ -3,7 +3,7 @@
   import { ChevronDown } from 'lucide-svelte'
   import type { Snippet } from 'svelte'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   type $$Props = AccordionPrimitive.TriggerProps
   type $$Events = AccordionPrimitive.TriggerEvents
diff --git a/packages/ui/src/components/accordion/accordion.stories.svelte b/packages/ui/src/components/atom/accordion/accordion.stories.svelte
similarity index 100%
rename from packages/ui/src/components/accordion/accordion.stories.svelte
rename to packages/ui/src/components/atom/accordion/accordion.stories.svelte
diff --git a/packages/ui/src/components/accordion/index.ts b/packages/ui/src/components/atom/accordion/index.ts
similarity index 100%
rename from packages/ui/src/components/accordion/index.ts
rename to packages/ui/src/components/atom/accordion/index.ts
diff --git a/packages/ui/src/components/button/button.stories.svelte b/packages/ui/src/components/atom/button/button.stories.svelte
similarity index 100%
rename from packages/ui/src/components/button/button.stories.svelte
rename to packages/ui/src/components/atom/button/button.stories.svelte
diff --git a/packages/ui/src/components/button/button.svelte b/packages/ui/src/components/atom/button/button.svelte
similarity index 95%
rename from packages/ui/src/components/button/button.svelte
rename to packages/ui/src/components/atom/button/button.svelte
index 06a8afe2d..cb0f1a994 100644
--- a/packages/ui/src/components/button/button.svelte
+++ b/packages/ui/src/components/atom/button/button.svelte
@@ -2,7 +2,7 @@
   import { Button as ButtonPrimitive } from 'bits-ui'
   import type { Snippet } from 'svelte'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
   import { buttonVariants, type Events, type Props } from './index.js'
 
   type $$Props = Props
diff --git a/packages/ui/src/components/button/index.ts b/packages/ui/src/components/atom/button/index.ts
similarity index 100%
rename from packages/ui/src/components/button/index.ts
rename to packages/ui/src/components/atom/button/index.ts
diff --git a/packages/ui/src/components/checkbox/checkbox.stories.svelte b/packages/ui/src/components/atom/checkbox/checkbox.stories.svelte
similarity index 100%
rename from packages/ui/src/components/checkbox/checkbox.stories.svelte
rename to packages/ui/src/components/atom/checkbox/checkbox.stories.svelte
diff --git a/packages/ui/src/components/checkbox/checkbox.svelte b/packages/ui/src/components/atom/checkbox/checkbox.svelte
similarity index 97%
rename from packages/ui/src/components/checkbox/checkbox.svelte
rename to packages/ui/src/components/atom/checkbox/checkbox.svelte
index 5cdb2d1fb..407dea688 100644
--- a/packages/ui/src/components/checkbox/checkbox.svelte
+++ b/packages/ui/src/components/atom/checkbox/checkbox.svelte
@@ -2,7 +2,7 @@
   import { Checkbox as CheckboxPrimitive, Label } from 'bits-ui'
   import { Check } from 'lucide-svelte'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   type $$Props = CheckboxPrimitive.Props & {
     label?: string | undefined | null
diff --git a/packages/ui/src/components/checkbox/index.ts b/packages/ui/src/components/atom/checkbox/index.ts
similarity index 100%
rename from packages/ui/src/components/checkbox/index.ts
rename to packages/ui/src/components/atom/checkbox/index.ts
diff --git a/packages/ui/src/components/chip/chip.stories.svelte b/packages/ui/src/components/atom/chip/chip.stories.svelte
similarity index 100%
rename from packages/ui/src/components/chip/chip.stories.svelte
rename to packages/ui/src/components/atom/chip/chip.stories.svelte
diff --git a/packages/ui/src/components/chip/chip.svelte b/packages/ui/src/components/atom/chip/chip.svelte
similarity index 94%
rename from packages/ui/src/components/chip/chip.svelte
rename to packages/ui/src/components/atom/chip/chip.svelte
index 58b5f98c7..4bf6ce8a3 100644
--- a/packages/ui/src/components/chip/chip.svelte
+++ b/packages/ui/src/components/atom/chip/chip.svelte
@@ -2,7 +2,7 @@
   import { X } from 'lucide-svelte'
   import type { Snippet } from 'svelte'
 
-  import { cn } from '../../utils.js'
+  import { cn } from '../../../utils.js'
   import { chipVariants } from './index.js'
 
   interface Props {
diff --git a/packages/ui/src/components/chip/index.ts b/packages/ui/src/components/atom/chip/index.ts
similarity index 100%
rename from packages/ui/src/components/chip/index.ts
rename to packages/ui/src/components/atom/chip/index.ts
diff --git a/packages/ui/src/components/day-chip/day-chip.stories.svelte b/packages/ui/src/components/atom/day-chip/day-chip.stories.svelte
similarity index 100%
rename from packages/ui/src/components/day-chip/day-chip.stories.svelte
rename to packages/ui/src/components/atom/day-chip/day-chip.stories.svelte
diff --git a/packages/ui/src/components/day-chip/day-chip.svelte b/packages/ui/src/components/atom/day-chip/day-chip.svelte
similarity index 89%
rename from packages/ui/src/components/day-chip/day-chip.svelte
rename to packages/ui/src/components/atom/day-chip/day-chip.svelte
index 8e7c257fb..12ba346ab 100644
--- a/packages/ui/src/components/day-chip/day-chip.svelte
+++ b/packages/ui/src/components/atom/day-chip/day-chip.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { cn } from '../../utils'
-  import { Chip } from '../chip'
+  import { cn } from '../../../utils.js'
+  import { Chip } from '../chip/index.js'
   import { chipVariants, type Day } from './index.js'
 
   interface Props {
diff --git a/packages/ui/src/components/day-chip/index.ts b/packages/ui/src/components/atom/day-chip/index.ts
similarity index 100%
rename from packages/ui/src/components/day-chip/index.ts
rename to packages/ui/src/components/atom/day-chip/index.ts
diff --git a/packages/ui/src/components/gened-chip/gened-chip.stories.svelte b/packages/ui/src/components/atom/gened-chip/gened-chip.stories.svelte
similarity index 100%
rename from packages/ui/src/components/gened-chip/gened-chip.stories.svelte
rename to packages/ui/src/components/atom/gened-chip/gened-chip.stories.svelte
diff --git a/packages/ui/src/components/gened-chip/gened-chip.svelte b/packages/ui/src/components/atom/gened-chip/gened-chip.svelte
similarity index 88%
rename from packages/ui/src/components/gened-chip/gened-chip.svelte
rename to packages/ui/src/components/atom/gened-chip/gened-chip.svelte
index f82ac3ef9..c335c9b0b 100644
--- a/packages/ui/src/components/gened-chip/gened-chip.svelte
+++ b/packages/ui/src/components/atom/gened-chip/gened-chip.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { cn } from '../../utils'
-  import { Chip } from '../chip'
+  import { cn } from '../../../utils.js'
+  import { Chip } from '../chip/index.js'
   import { chipVariants, type Type } from './index.js'
 
   interface Props {
diff --git a/packages/ui/src/components/gened-chip/index.ts b/packages/ui/src/components/atom/gened-chip/index.ts
similarity index 100%
rename from packages/ui/src/components/gened-chip/index.ts
rename to packages/ui/src/components/atom/gened-chip/index.ts
diff --git a/packages/ui/src/components/icon-button/icon-button.svelte b/packages/ui/src/components/atom/icon-button/icon-button.svelte
similarity index 95%
rename from packages/ui/src/components/icon-button/icon-button.svelte
rename to packages/ui/src/components/atom/icon-button/icon-button.svelte
index e941e84d1..58f291a82 100644
--- a/packages/ui/src/components/icon-button/icon-button.svelte
+++ b/packages/ui/src/components/atom/icon-button/icon-button.svelte
@@ -2,7 +2,7 @@
   import { Button as ButtonPrimitive } from 'bits-ui'
   import type { Snippet } from 'svelte'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
   import { buttonVariants, type Events, type Props } from './index.js'
   type $$Props = Props
   type $$Events = Events
diff --git a/packages/ui/src/components/icon-button/index.ts b/packages/ui/src/components/atom/icon-button/index.ts
similarity index 100%
rename from packages/ui/src/components/icon-button/index.ts
rename to packages/ui/src/components/atom/icon-button/index.ts
diff --git a/packages/ui/src/components/input/index.ts b/packages/ui/src/components/atom/input/index.ts
similarity index 100%
rename from packages/ui/src/components/input/index.ts
rename to packages/ui/src/components/atom/input/index.ts
diff --git a/packages/ui/src/components/input/input.svelte b/packages/ui/src/components/atom/input/input.svelte
similarity index 94%
rename from packages/ui/src/components/input/input.svelte
rename to packages/ui/src/components/atom/input/input.svelte
index 9ec571c23..ad455e5c8 100644
--- a/packages/ui/src/components/input/input.svelte
+++ b/packages/ui/src/components/atom/input/input.svelte
@@ -4,8 +4,8 @@
   const bubble = createBubbler()
   import type { HTMLInputAttributes } from 'svelte/elements'
 
-  import { cn } from '../../utils'
-  import type { InputEvents } from '.'
+  import { cn } from '../../../utils.js'
+  import type { InputEvents } from './index.js'
 
   type $$Props = HTMLInputAttributes
   type $$Events = InputEvents
diff --git a/packages/ui/src/components/radio-group/index.ts b/packages/ui/src/components/atom/radio-group/index.ts
similarity index 100%
rename from packages/ui/src/components/radio-group/index.ts
rename to packages/ui/src/components/atom/radio-group/index.ts
diff --git a/packages/ui/src/components/radio-group/radio-group-item.svelte b/packages/ui/src/components/atom/radio-group/radio-group-item.svelte
similarity index 97%
rename from packages/ui/src/components/radio-group/radio-group-item.svelte
rename to packages/ui/src/components/atom/radio-group/radio-group-item.svelte
index 50b0fd6b6..0121b081d 100644
--- a/packages/ui/src/components/radio-group/radio-group-item.svelte
+++ b/packages/ui/src/components/atom/radio-group/radio-group-item.svelte
@@ -2,7 +2,7 @@
   import { Label, RadioGroup as RadioGroupPrimitive } from 'bits-ui'
   import { Circle } from 'lucide-svelte'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   type $$Props = RadioGroupPrimitive.ItemProps & {
     id: string
diff --git a/packages/ui/src/components/radio-group/radio-group.stories.svelte b/packages/ui/src/components/atom/radio-group/radio-group.stories.svelte
similarity index 100%
rename from packages/ui/src/components/radio-group/radio-group.stories.svelte
rename to packages/ui/src/components/atom/radio-group/radio-group.stories.svelte
diff --git a/packages/ui/src/components/radio-group/radio-group.svelte b/packages/ui/src/components/atom/radio-group/radio-group.svelte
similarity index 93%
rename from packages/ui/src/components/radio-group/radio-group.svelte
rename to packages/ui/src/components/atom/radio-group/radio-group.svelte
index 7a46f169d..4490a63d5 100644
--- a/packages/ui/src/components/radio-group/radio-group.svelte
+++ b/packages/ui/src/components/atom/radio-group/radio-group.svelte
@@ -2,7 +2,7 @@
   import { RadioGroup as RadioGroupPrimitive } from 'bits-ui'
   import type { Snippet } from 'svelte'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   type $$Props = RadioGroupPrimitive.Props
 
diff --git a/packages/ui/src/components/recommended-tag/index.ts b/packages/ui/src/components/atom/recommended-tag/index.ts
similarity index 100%
rename from packages/ui/src/components/recommended-tag/index.ts
rename to packages/ui/src/components/atom/recommended-tag/index.ts
diff --git a/packages/ui/src/components/recommended-tag/recommended-tag.stories.svelte b/packages/ui/src/components/atom/recommended-tag/recommended-tag.stories.svelte
similarity index 100%
rename from packages/ui/src/components/recommended-tag/recommended-tag.stories.svelte
rename to packages/ui/src/components/atom/recommended-tag/recommended-tag.stories.svelte
diff --git a/packages/ui/src/components/recommended-tag/recommended-tag.svelte b/packages/ui/src/components/atom/recommended-tag/recommended-tag.svelte
similarity index 94%
rename from packages/ui/src/components/recommended-tag/recommended-tag.svelte
rename to packages/ui/src/components/atom/recommended-tag/recommended-tag.svelte
index 75b892204..aaa5d9915 100644
--- a/packages/ui/src/components/recommended-tag/recommended-tag.svelte
+++ b/packages/ui/src/components/atom/recommended-tag/recommended-tag.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Sparkles } from 'lucide-svelte'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   interface Props {
     class?: string | undefined | null
diff --git a/packages/ui/src/components/subject-details/description.svelte b/packages/ui/src/components/atom/subject-details/description.svelte
similarity index 100%
rename from packages/ui/src/components/subject-details/description.svelte
rename to packages/ui/src/components/atom/subject-details/description.svelte
diff --git a/packages/ui/src/components/subject-details/index.ts b/packages/ui/src/components/atom/subject-details/index.ts
similarity index 100%
rename from packages/ui/src/components/subject-details/index.ts
rename to packages/ui/src/components/atom/subject-details/index.ts
diff --git a/packages/ui/src/components/subject-details/label.svelte b/packages/ui/src/components/atom/subject-details/label.svelte
similarity index 100%
rename from packages/ui/src/components/subject-details/label.svelte
rename to packages/ui/src/components/atom/subject-details/label.svelte
diff --git a/packages/ui/src/components/subject-details/subject-details.svelte b/packages/ui/src/components/atom/subject-details/subject-details.svelte
similarity index 100%
rename from packages/ui/src/components/subject-details/subject-details.svelte
rename to packages/ui/src/components/atom/subject-details/subject-details.svelte
diff --git a/packages/ui/src/components/switch/index.ts b/packages/ui/src/components/atom/switch/index.ts
similarity index 100%
rename from packages/ui/src/components/switch/index.ts
rename to packages/ui/src/components/atom/switch/index.ts
diff --git a/packages/ui/src/components/switch/switch.stories.svelte b/packages/ui/src/components/atom/switch/switch.stories.svelte
similarity index 100%
rename from packages/ui/src/components/switch/switch.stories.svelte
rename to packages/ui/src/components/atom/switch/switch.stories.svelte
diff --git a/packages/ui/src/components/switch/switch.svelte b/packages/ui/src/components/atom/switch/switch.svelte
similarity index 97%
rename from packages/ui/src/components/switch/switch.svelte
rename to packages/ui/src/components/atom/switch/switch.svelte
index 1f59509e6..6994d252c 100644
--- a/packages/ui/src/components/switch/switch.svelte
+++ b/packages/ui/src/components/atom/switch/switch.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Label, Switch as SwitchPrimitive } from 'bits-ui'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   type $$Props = SwitchPrimitive.Props & {
     label?: string | undefined | null
diff --git a/packages/ui/src/components/table/index.ts b/packages/ui/src/components/atom/table/index.ts
similarity index 100%
rename from packages/ui/src/components/table/index.ts
rename to packages/ui/src/components/atom/table/index.ts
diff --git a/packages/ui/src/components/table/table-body.svelte b/packages/ui/src/components/atom/table/table-body.svelte
similarity index 91%
rename from packages/ui/src/components/table/table-body.svelte
rename to packages/ui/src/components/atom/table/table-body.svelte
index 8010074f2..47cf87320 100644
--- a/packages/ui/src/components/table/table-body.svelte
+++ b/packages/ui/src/components/atom/table/table-body.svelte
@@ -2,7 +2,7 @@
   import type { Snippet } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   type $$Props = HTMLAttributes<HTMLTableSectionElement>
 
diff --git a/packages/ui/src/components/table/table-caption.svelte b/packages/ui/src/components/atom/table/table-caption.svelte
similarity index 92%
rename from packages/ui/src/components/table/table-caption.svelte
rename to packages/ui/src/components/atom/table/table-caption.svelte
index 0e783f06d..d7d3b25c0 100644
--- a/packages/ui/src/components/table/table-caption.svelte
+++ b/packages/ui/src/components/atom/table/table-caption.svelte
@@ -2,7 +2,7 @@
   import type { Snippet } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   type $$Props = HTMLAttributes<HTMLTableCaptionElement>
 
diff --git a/packages/ui/src/components/table/table-cell.svelte b/packages/ui/src/components/atom/table/table-cell.svelte
similarity index 94%
rename from packages/ui/src/components/table/table-cell.svelte
rename to packages/ui/src/components/atom/table/table-cell.svelte
index cf5bd8ffa..e899b8382 100644
--- a/packages/ui/src/components/table/table-cell.svelte
+++ b/packages/ui/src/components/atom/table/table-cell.svelte
@@ -5,7 +5,7 @@
   const bubble = createBubbler()
   import type { HTMLTdAttributes } from 'svelte/elements'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   type $$Props = HTMLTdAttributes
 
diff --git a/packages/ui/src/components/table/table-footer.svelte b/packages/ui/src/components/atom/table/table-footer.svelte
similarity index 92%
rename from packages/ui/src/components/table/table-footer.svelte
rename to packages/ui/src/components/atom/table/table-footer.svelte
index 40ded0a6f..0f07372f1 100644
--- a/packages/ui/src/components/table/table-footer.svelte
+++ b/packages/ui/src/components/atom/table/table-footer.svelte
@@ -2,7 +2,7 @@
   import type { Snippet } from 'svelte'
   import type { HTMLAttributes } from 'svelte/elements'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   type $$Props = HTMLAttributes<HTMLTableSectionElement>
 
diff --git a/packages/ui/src/components/table/table-head.svelte b/packages/ui/src/components/atom/table/table-head.svelte
similarity index 93%
rename from packages/ui/src/components/table/table-head.svelte
rename to packages/ui/src/components/atom/table/table-head.svelte
index cb39310a2..bee5bf99b 100644
--- a/packages/ui/src/components/table/table-head.svelte
+++ b/packages/ui/src/components/atom/table/table-head.svelte
@@ -2,7 +2,7 @@
   import type { Snippet } from 'svelte'
   import type { HTMLThAttributes } from 'svelte/elements'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   type $$Props = HTMLThAttributes
 
diff --git a/packages/ui/src/components/table/table-header.svelte b/packages/ui/src/components/atom/table/table-header.svelte
similarity index 94%
rename from packages/ui/src/components/table/table-header.svelte
rename to packages/ui/src/components/atom/table/table-header.svelte
index 9c7de42f8..008cf3cce 100644
--- a/packages/ui/src/components/table/table-header.svelte
+++ b/packages/ui/src/components/atom/table/table-header.svelte
@@ -5,7 +5,7 @@
   const bubble = createBubbler()
   import type { HTMLAttributes } from 'svelte/elements'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   type $$Props = HTMLAttributes<HTMLTableSectionElement>
 
diff --git a/packages/ui/src/components/table/table-row.svelte b/packages/ui/src/components/atom/table/table-row.svelte
similarity index 94%
rename from packages/ui/src/components/table/table-row.svelte
rename to packages/ui/src/components/atom/table/table-row.svelte
index a3c222d35..7b8f5233d 100644
--- a/packages/ui/src/components/table/table-row.svelte
+++ b/packages/ui/src/components/atom/table/table-row.svelte
@@ -5,7 +5,7 @@
   const bubble = createBubbler()
   import type { HTMLAttributes } from 'svelte/elements'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   type $$Props = HTMLAttributes<HTMLTableRowElement> & {
     'data-state'?: unknown
diff --git a/packages/ui/src/components/table/table.stories.svelte b/packages/ui/src/components/atom/table/table.stories.svelte
similarity index 100%
rename from packages/ui/src/components/table/table.stories.svelte
rename to packages/ui/src/components/atom/table/table.stories.svelte
diff --git a/packages/ui/src/components/table/table.svelte b/packages/ui/src/components/atom/table/table.svelte
similarity index 92%
rename from packages/ui/src/components/table/table.svelte
rename to packages/ui/src/components/atom/table/table.svelte
index ec687bcb3..c6e8fd90b 100644
--- a/packages/ui/src/components/table/table.svelte
+++ b/packages/ui/src/components/atom/table/table.svelte
@@ -2,7 +2,7 @@
   import type { Snippet } from 'svelte'
   import type { HTMLTableAttributes } from 'svelte/elements'
 
-  import { cn } from '../../utils'
+  import { cn } from '../../../utils.js'
 
   type $$Props = HTMLTableAttributes
 
diff --git a/packages/ui/src/components/course-card/course-card.stories.svelte b/packages/ui/src/components/molecule/course-card/course-card.stories.svelte
similarity index 100%
rename from packages/ui/src/components/course-card/course-card.stories.svelte
rename to packages/ui/src/components/molecule/course-card/course-card.stories.svelte
diff --git a/packages/ui/src/components/course-card/course-card.svelte b/packages/ui/src/components/molecule/course-card/course-card.svelte
similarity index 90%
rename from packages/ui/src/components/course-card/course-card.svelte
rename to packages/ui/src/components/molecule/course-card/course-card.svelte
index 9d1deee47..be345930e 100644
--- a/packages/ui/src/components/course-card/course-card.svelte
+++ b/packages/ui/src/components/molecule/course-card/course-card.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import { Check, Dot, Plus } from 'lucide-svelte'
 
-  import { cn } from '../../utils'
-  import { Button } from '../button'
-  import { DayChip } from '../day-chip'
-  import { GenedChip } from '../gened-chip'
-  import { RecommendedTag } from '../recommended-tag'
+  import { cn } from '../../../utils.js'
+  import { Button } from '../../atom/button/index.js'
+  import { DayChip } from '../../atom/day-chip/index.js'
+  import { GenedChip } from '../../atom/gened-chip/index.js'
+  import { RecommendedTag } from '../../atom/recommended-tag/index.js'
 
   interface Props {
     class?: string | undefined | null
diff --git a/packages/ui/src/components/course-card/index.ts b/packages/ui/src/components/molecule/course-card/index.ts
similarity index 100%
rename from packages/ui/src/components/course-card/index.ts
rename to packages/ui/src/components/molecule/course-card/index.ts