refactor: organize structure

src/lib/components/atoms/icon/Icon.svelte → src/lib/components/Icon.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getIconClass } from '../../../assets/index.js'
+	import { getIconClass } from '$lib/assets/index.js'
 
 	export let icon: string
 	export let size = 24

src/lib/components/atoms/icon/IconProvider.svelte → src/lib/components/IconProvider.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" context="module">
-	import { generateIconStyles } from '../../../assets/index.js'
+	import { generateIconStyles } from '$lib/assets/index.js'
 
 	const css = generateIconStyles()
 </script>

src/lib/components/organisms/Nav.svelte → src/lib/components/nav/Nav.svelte

@@ -1,8 +1,5 @@
 <script lang="ts">
-	import { NavPopup, NavSignArea, type User } from '$lib/index.js'
-	import Logo from '../atoms/Logo.svelte'
-	import TextButton from '../atoms/button/TextButton.svelte'
-	import Icon from '../atoms/icon/Icon.svelte'
+	import { Icon, Logo, NavPopup, NavSignArea, TextButton, type User } from '$lib/index.js'
 
 	export let user: User | null
 </script>

src/lib/components/molecules/nav/NavLanguageSelector.svelte → src/lib/components/nav/NavLanguageSelector.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import NavPopupItem from '$lib/components/atoms/nav/NavPopupItem.svelte'
+	import NavPopupItem from '$lib/components/nav/NavPopupItem.svelte'
 	import { getGlobalContext } from '$lib/index.js'
-	import langs from '../../../localization/langs.json'
+	import langs from '../../localization/langs.json'
 
 	const ctx = getGlobalContext()
 

src/lib/components/molecules/nav/NavPopup.svelte → src/lib/components/nav/NavPopup.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
-	import NavPopupItem from '$lib/components/atoms/nav/NavPopupItem.svelte'
-	import NavPopupLink from '$lib/components/atoms/nav/NavPopupLink.svelte'
+	import {
+		Icon,
+		NavLanguageSelector,
+		NavPopupItem,
+		NavPopupLink,
+		NavPopupSection,
+		Popover,
+		TextButton
+	} from '$lib/index.js'
 	import Translation from '$lib/utils/Translation.svelte'
 	import { fly } from 'svelte/transition'
-	import NavLanguageSelector from './NavLanguageSelector.svelte'
-	import TextButton from '$lib/components/atoms/button/TextButton.svelte'
-	import Popover from '$lib/components/atoms/popover/Popover.svelte'
-	import NavPopupSection from '$lib/components/atoms/nav/NavPopupSection.svelte'
-	import Icon from '$lib/components/atoms/icon/Icon.svelte'
 
 	enum TabType {
 		Main,

src/lib/components/molecules/nav/NavSignArea.svelte → src/lib/components/nav/NavSignArea.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { RoundedOutlineButton, TextButton, type User } from '$lib/index.js'
-	import Avatar from '../../atoms/Avatar.svelte'
+	import { Avatar, RoundedOutlinedButton, TextButton, type User } from '$lib/index.js'
 
 	export let user: User | null
 </script>
@@ -13,7 +12,7 @@
 {:else}
 	<div class="nav-sign-area">
 		<TextButton>Sign Up</TextButton>
-		<RoundedOutlineButton>Sign In</RoundedOutlineButton>
+		<RoundedOutlinedButton>Sign In</RoundedOutlinedButton>
 	</div>
 {/if}
 

src/lib/index.ts

@@ -1,36 +1,35 @@
 // Reexport your entry components here
 
-// System
+// System / Utils
 export * from './system/context.js'
-
-// Atoms
-export { default as Logo } from './components/atoms/Logo.svelte'
-export { default as Icon } from './components/atoms/icon/Icon.svelte'
-export { default as IconProvider } from './components/atoms/icon/IconProvider.svelte'
-export { default as Avatar } from './components/atoms/Avatar.svelte'
-
-export { default as RoundedOutlineButton } from './components/atoms/button/RoundedOutlineButton.svelte'
-export { default as TextButton } from './components/atoms/button/TextButton.svelte'
-
-export { default as FooterLink } from './components/atoms/footer/FooterLink.svelte'
-
-export { default as Popover } from './components/atoms/popover/Popover.svelte'
-
-export { default as NavPopupSection } from './components/atoms/nav/NavPopupSection.svelte'
-
-export { default as NavPopupItem } from './components/atoms/nav/NavPopupItem.svelte'
-export { default as NavPopupLink } from './components/atoms/nav/NavPopupLink.svelte'
-
-// Molecules
-export { default as FooterSection } from './components/molecules/footer/FooterSection.svelte'
-
-export { default as NavSignArea } from './components/molecules/nav/NavSignArea.svelte'
-export { default as NavPopup } from './components/molecules/nav/NavPopup.svelte'
-
-// Organisms
-export { default as Nav } from './components/organisms/Nav.svelte'
-export { default as Footer } from './components/organisms/Footer.svelte'
+export * from './assets/index.js'
 
 // Types
 export * from './types.js'
-export * from './assets/index.js'
+
+// ------ Components -------
+
+// Not categorized
+export { default as Avatar } from './components/Avatar.svelte'
+export { default as Icon } from './components/Icon.svelte'
+export { default as IconProvider } from './components/IconProvider.svelte'
+export { default as Logo } from './components/Logo.svelte'
+export { default as Popover } from './components/Popover.svelte'
+
+// Buttons
+export { default as RoundedOutlinedButton } from './components/button/RoundedOutlinedButton.svelte'
+export { default as TextButton } from './components/button/TextButton.svelte'
+
+// Nav
+export { default as Nav } from './components/nav/Nav.svelte'
+export { default as NavPopup } from './components/nav/NavPopup.svelte'
+export { default as NavPopupItem } from './components/nav/NavPopupItem.svelte'
+export { default as NavPopupLink } from './components/nav/NavPopupLink.svelte'
+export { default as NavPopupSection } from './components/nav/NavPopupSection.svelte'
+export { default as NavSignArea } from './components/nav/NavSignArea.svelte'
+export { default as NavLanguageSelector } from './components/nav/NavLanguageSelector.svelte'
+
+// Footer
+export { default as Footer } from './components/footer/Footer.svelte'
+export { default as FooterLink } from './components/footer/FooterLink.svelte'
+export { default as FooterSection } from './components/footer/FooterSection.svelte'

src/stories/atoms/Avatar.stories.svelte → src/stories/Avatar.stories.svelte

@@ -1,9 +1,9 @@
 <script lang="ts" context="module">
 	import { Avatar } from '$lib/index.js'
-	import GanjangFactory from '../assets/ganjangfactory.png'
+	import GanjangFactory from './assets/ganjangfactory.png'
 
 	export const meta = {
-		title: 'Atoms/Avatar',
+		title: 'Components/Avatar',
 		component: Avatar
 	}
 </script>

src/stories/atoms/Button.stories.svelte → src/stories/Button.stories.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" context="module">
-	import { RoundedOutlineButton } from '$lib/index.js'
+	import { RoundedOutlinedButton } from '$lib/index.js'
 
 	export const meta = {
-		title: 'Atoms/Button'
+		title: 'Components/Button'
 	}
 </script>
 
@@ -11,8 +11,8 @@
 	import { Story } from '@storybook/addon-svelte-csf'
 </script>
 
-<Story name="Rounded Outline">
-	<RoundedOutlineButton>Button</RoundedOutlineButton>
+<Story name="Rounded Outlined">
+	<RoundedOutlinedButton>Button</RoundedOutlinedButton>
 </Story>
 
 <Story name="Text">

src/stories/atoms/Icon.stories.svelte → src/stories/Icon.stories.svelte

@@ -2,7 +2,7 @@
 	import { Avatar, Icon, iconNames } from '$lib/index.js'
 
 	export const meta = {
-		title: 'Atoms/Icon',
+		title: 'Components/Icon',
 		component: Icon
 	}
 </script>

src/stories/atoms/Logo.stories.ts → src/stories/Logo.stories.ts

@@ -4,7 +4,7 @@ import { Logo } from '$lib/index.js'
 const meta = {
 	// @ts-expect-error type issue
 	component: Logo,
-	title: 'Atoms/Logo'
+	title: 'Components/Logo'
 } satisfies Meta<typeof Logo>
 
 export default meta

src/stories/atoms/Popover.stories.svelte → src/stories/Popover.stories.svelte

@@ -2,21 +2,21 @@
 	import { Popover } from '$lib/index.js'
 
 	export const meta = {
-		title: 'Atoms/Popover',
+		title: 'Components/Popover',
 		components: Popover
 	}
 </script>
 
 <script lang="ts">
-	import { RoundedOutlineButton } from '$lib/index.js'
+	import { RoundedOutlinedButton } from '$lib/index.js'
 	import { Story } from '@storybook/addon-svelte-csf'
 </script>
 
 <Story name="Default">
 	<Popover placement="bottom-start">
-		<RoundedOutlineButton slot="button" let:buttonRef use={[buttonRef]}>
+		<RoundedOutlinedButton slot="button" let:buttonRef use={[buttonRef]}>
 			Click me!
-		</RoundedOutlineButton>
+		</RoundedOutlinedButton>
 		Content
 	</Popover>
 </Story>

src/stories/organisms/Footer.stories.svelte → src/stories/footer/Footer.stories.svelte

@@ -4,7 +4,7 @@
 
 	export const meta = {
 		component: Footer,
-		title: 'Organisms/Footer'
+		title: 'Components/Footer'
 	}
 </script>
 

src/stories/footer/FooterLink.stories.svelte

@@ -0,0 +1,17 @@
+<script lang="ts" context="module">
+	import FooterLink from '$lib/components/footer/FooterLink.svelte'
+	import { Story, Template } from '@storybook/addon-svelte-csf'
+
+	export const meta = {
+		component: FooterLink,
+		title: 'Components/Footer/Footer Link'
+	}
+</script>
+
+<Template let:args>
+	<FooterLink href="/" {...args}>Link</FooterLink>
+</Template>
+
+<Story name="Default" args={{}} />
+
+<Story name="Minimal" args={{ minimal: true }} />

src/stories/organisms/Nav.stories.ts → src/stories/nav/Nav.stories.ts

@@ -5,7 +5,7 @@ import { dummyAdminUser, dummyUser } from '../dummyData.js'
 const meta = {
 	// @ts-expect-error type issue
 	component: Nav,
-	title: 'Organisms/Nav'
+	title: 'Components/Nav'
 } satisfies Meta<typeof Nav>
 
 export default meta

src/stories/molecules/nav/NavSignArea.stories.svelte → src/stories/nav/NavSignArea.stories.svelte

@@ -2,14 +2,14 @@
 	import { NavSignArea } from '$lib/index.js'
 
 	export const meta = {
-		title: 'Molecules/Nav/Nav Sign Area',
+		title: 'Components/Nav/Nav Sign Area',
 		component: NavSignArea
 	}
 </script>
 
 <script lang="ts">
 	import { Story, Template } from '@storybook/addon-svelte-csf'
-	import { dummyUser } from '../../dummyData.js'
+	import { dummyUser } from '../dummyData.js'
 </script>
 
 <Template let:args>

src/stories/molecules/nav/NavPopup.stories.svelte → src/stories/nav/popup/NavPopup.stories.svelte

@@ -2,7 +2,7 @@
 	import { NavPopup } from '$lib/index.js'
 
 	export const meta = {
-		title: 'Molecules/Nav/Nav Popup',
+		title: 'Components/Nav/Popup/Nav Popup',
 		component: NavPopup
 	}
 </script>

src/stories/nav/popup/NavPopupItem.stories.svelte

@@ -0,0 +1,19 @@
+<script lang="ts" context="module">
+	import { NavPopupItem } from '$lib/index.js'
+
+	export const meta = {
+		title: 'Components/Nav/Popup/Nav Popup Item',
+		component: NavPopupItem
+	}
+</script>
+
+<script lang="ts">
+	import { Story, Template } from '@storybook/addon-svelte-csf'
+</script>
+
+<Template let:args>
+	<NavPopupItem {...args}>Item</NavPopupItem>
+</Template>
+
+<Story name="Default" args={{}} />
+<Story name="Selected" args={{ selected: true }} />

src/stories/nav/popup/NavPopupLink.stories.svelte

@@ -0,0 +1,18 @@
+<script lang="ts" context="module">
+	import { NavPopupLink } from '$lib/index.js'
+
+	export const meta = {
+		title: 'Components/Nav/Popup/Nav Popup Link',
+		component: NavPopupLink
+	}
+</script>
+
+<script lang="ts">
+	import { Story, Template } from '@storybook/addon-svelte-csf'
+</script>
+
+<Template let:args>
+	<NavPopupLink href="/" {...args}>Link</NavPopupLink>
+</Template>
+
+<Story name="Default" args={{}} />

src/stories/nav/popup/NavPopupSection.stories.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" context="module">
+	import { NavPopupSection } from '$lib/index.js'
+
+	export const meta = {
+		title: 'Components/Nav/Popup/Nav Popup Section',
+		component: NavPopupSection
+	}
+</script>
+
+<script lang="ts">
+	import { Story, Template } from '@storybook/addon-svelte-csf'
+</script>
+
+<Template let:args>
+	<NavPopupSection {...args} title="wow:example">section content</NavPopupSection>
+</Template>
+
+<Story name="Default" args={{}} />
+
+<Story name="With back button" args={{ back: true }} />