diff --git a/.plop-templates/component/index.stories.tsx.hbs b/.plop-templates/component/index.stories.tsx.hbs index bf35aa0..404050b 100644 --- a/.plop-templates/component/index.stories.tsx.hbs +++ b/.plop-templates/component/index.stories.tsx.hbs @@ -2,12 +2,37 @@ import type { Meta, StoryObj } from '@storybook/react'; import { {{pascalCase name}} } from '.'; +/** + * Meta information for the component. + * This object configures how the component will be displayed in the Storybook interface. + * + * @see https://storybook.js.org/docs/writing-stories#default-export + */ +type {{pascalCase name}}Meta = Meta; + +/** + * This meta description below will be visible on the documentation page for the component. + */ const meta = { - title: '{{pascalCase type}}/{{pascalCase subType}}/{{pascalCase name}}', - component: {{pascalCase name}} -} satisfies Meta; + component: {{pascalCase name}}, + tags: ['autodocs'], + title: '{{titleCase type}}/{{titleCase subFolder}}/{{pascalCase name}}', +} satisfies ; export default meta; -type Story = StoryObj; +/** + * Type definition for the stories. + * This type defines the expected structure for individual stories. + * + * @see https://storybook.js.org/docs/writing-stories#defining-stories + */ +type {{pascalCase name}}Story = StoryObj; + +/* Stories */ + +/** + * This story description below will be visible on the documentation page for the component. + */ +export const Default = {} satisfies {{pascalCase name}}Story; -export const Default = {} satisfies Story; +// Write more stories here diff --git a/.plop-templates/component/index.tsx.hbs b/.plop-templates/component/index.tsx.hbs index a74a1b4..a2a0612 100644 --- a/.plop-templates/component/index.tsx.hbs +++ b/.plop-templates/component/index.tsx.hbs @@ -1,6 +1,21 @@ -import * as React from 'react'; import { cn } from '~/lib/utils'; type Props = { className?: string; }; export function -{{pascalCase name}}({ className, ...props }: Props) { return ( -
- Hello, world! -
-); } \ No newline at end of file +import { cn } from '~/lib/utils'; + +/** + * Props for the {{pascalCase name}} component. + */ +type {{pascalCase name}}Props = { + /** Optional additional class names for custom styling. */ + className?: string; +}; + +export function {{pascalCase name}}({ className }: {{pascalCase name}}Props) { + // Add more section comments here, e.g. "Constants", "State", "Hooks", "Derived State", "Utils", "Render", etc. + + /* JSX */ + + return ( +
+ Hello, {{pascalCase name}}! +
+ ); +} \ No newline at end of file diff --git a/.storybook/main.ts b/.storybook/main.ts index 6498ed4..1bd34e0 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -15,7 +15,8 @@ const config: StorybookConfig = { options: {} }, docs: { - autodocs: 'tag' + autodocs: 'tag', + defaultName: 'Documentation' }, staticDirs: ['../public'] }; diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 2d7b33e..346f977 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -11,6 +11,9 @@ const preview: Preview = { date: /Date$/i } }, + docs: { + toc: true + }, viewport: { viewports: TAILWIND_VIEWPORTS } diff --git a/plopfile.mjs b/plopfile.mjs index 665611e..9eb1fb4 100644 --- a/plopfile.mjs +++ b/plopfile.mjs @@ -1,5 +1,5 @@ /** - * @param {import('plop').NodePlopAPI} plop - Plop provides the API methods for plop actions + * @param {import('plop').NodePlopAPI} plop */ export default function (plop) { plop.setGenerator('component', { @@ -18,8 +18,19 @@ export default function (plop) { }, { type: 'input', - name: 'subType', - message: `What is your component sub-type? (e.g. 'typography' for atoms, 'cards' for molecules or 'sections' for organisms)` + name: 'subFolder', + message: (answers) => { + switch (answers.type) { + case 'atoms': + return 'Name your subfolder (e.g. interactive, typography, etc.)'; + case 'molecules': + return 'Name your subfolder (e.g. forms, cards, etc.)'; + case 'organisms': + return 'Name your subfolder (e.g. headers, footers, sections etc.)'; + default: + return 'Name your subfolder'; + } + } }, { type: 'confirm', @@ -32,20 +43,16 @@ export default function (plop) { // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access .replace(/[-_\s]+/g, ''); - return `Are you sure you want to create '~/components/${answers.type}/${answers.subType}/${pascalCaseName}'?`; + return `Are you sure you want to create '~/components/${answers.type}/${answers.subFolder}/${pascalCaseName}'?`; } } ], actions: [ { - type: 'add', - path: 'src/components/{{type}}/{{subType}}/{{pascalCase name}}/index.stories.tsx', - templateFile: '.plop-templates/component/index.stories.tsx.hbs' - }, - { - type: 'add', - path: 'src/components/{{type}}/{{subType}}/{{pascalCase name}}/index.tsx', - templateFile: '.plop-templates/component/index.tsx.hbs' + type: 'addMany', + destination: 'src/components/{{type}}/{{subFolder}}/{{pascalCase name}}', + base: '.plop-templates/component', + templateFiles: '.plop-templates/component/*.hbs' } ] }); diff --git a/src/components/atoms/icons/ArrowIcon/index.stories.tsx b/src/components/atoms/icons/ArrowIcon/index.stories.tsx index a0eb440..242628f 100644 --- a/src/components/atoms/icons/ArrowIcon/index.stories.tsx +++ b/src/components/atoms/icons/ArrowIcon/index.stories.tsx @@ -2,22 +2,48 @@ import type { Meta, StoryObj } from '@storybook/react'; import { ArrowIcon } from '.'; +/** + * Meta information for the component. + * This object configures how the component will be displayed in the Storybook interface. + * + * @see https://storybook.js.org/docs/writing-stories#default-export + */ +type ArrowIconMeta = Meta; + +/** + * Arrow icon that can point to the left or right. + */ const meta = { - title: 'Atoms/Icons/ArrowIcon', - component: ArrowIcon -} satisfies Meta; + component: ArrowIcon, + tags: ['autodocs'], + title: 'Atoms/Icons/ArrowIcon' +} satisfies ArrowIconMeta; export default meta; -type Story = StoryObj; +/** + * Type definition for the stories. + * This type defines the expected structure for individual stories. + * + * @see https://storybook.js.org/docs/writing-stories#defining-stories + */ +type ArrowIconStory = StoryObj; + +/* Stories */ +/** + * Arrow icon that points to the left. + */ export const LeftDirection = { args: { direction: 'left' } -} satisfies Story; +} satisfies ArrowIconStory; +/** + * Arrow icon that points to the right. + */ export const RightDirection = { args: { direction: 'right' } -} satisfies Story; +} satisfies ArrowIconStory; diff --git a/src/components/atoms/icons/ArrowIcon/index.tsx b/src/components/atoms/icons/ArrowIcon/index.tsx index bed7321..18c997e 100644 --- a/src/components/atoms/icons/ArrowIcon/index.tsx +++ b/src/components/atoms/icons/ArrowIcon/index.tsx @@ -1,15 +1,22 @@ -import * as React from 'react'; - import { cn } from '~/lib/utils'; type Direction = 'left' | 'right'; -type Props = React.HTMLAttributes & { + +/** + * Props for the ArrowIcon component. + */ +type ArrowIconProps = React.HTMLAttributes & { + /** Direction of which the arrow should point to. */ direction: Direction; }; -export function ArrowIcon({ direction, className, ...props }: Props) { +export function ArrowIcon({ direction, className, ...props }: ArrowIconProps) { + /* Constants */ + const arrow = direction === 'left' ? '<-' : '->'; + /* JSX */ + return ( {arrow} diff --git a/src/components/atoms/logos/NextJSLogo/index.stories.tsx b/src/components/atoms/logos/NextJSLogo/index.stories.tsx index 7efc02a..0331e43 100644 --- a/src/components/atoms/logos/NextJSLogo/index.stories.tsx +++ b/src/components/atoms/logos/NextJSLogo/index.stories.tsx @@ -2,17 +2,38 @@ import type { Meta, StoryObj } from '@storybook/react'; import { NextJSLogo } from '.'; +/** + * Meta information for the component. + * This object configures how the component will be displayed in the Storybook interface. + * + * @see https://storybook.js.org/docs/writing-stories#default-export + */ +type NextJSLogoMeta = Meta; + +/** + * The Next.js logo + */ const meta = { - title: 'Atoms/Logos/NextJSLogo', - component: NextJSLogo -} satisfies Meta; + component: NextJSLogo, + tags: ['autodocs'], + title: 'Atoms/Logos/NextJSLogo' +} satisfies NextJSLogoMeta; export default meta; -type Story = StoryObj; +/** + * Type definition for the stories. + * This type defines the expected structure for individual stories. + * + * @see https://storybook.js.org/docs/writing-stories#defining-stories + */ +type NextJSLogoStory = StoryObj; +/** + * The default Next.js logo. + */ export const Default = { args: { width: 180, height: 37 } -} satisfies Story; +} satisfies NextJSLogoStory; diff --git a/src/components/atoms/logos/NextJSLogo/index.tsx b/src/components/atoms/logos/NextJSLogo/index.tsx index 34d22e1..c62778e 100644 --- a/src/components/atoms/logos/NextJSLogo/index.tsx +++ b/src/components/atoms/logos/NextJSLogo/index.tsx @@ -2,13 +2,17 @@ import Image, { type ImageProps } from 'next/image'; import { cn } from '~/lib/utils'; -// We use Omit to create a new type that has all the properties of ImageProps -// except for 'src' and 'alt'. This is because we're setting 'src' and 'alt' -// directly in the NextJSLogo component, so we don't want TypeScript to require -// them when we use the NextJSLogo component. -type Props = Omit; +/** + * Props for the NextJSLogo component. + * + * We use Omit to create a new type that has all the properties of ImageProps + * except for 'src' and 'alt'. This is because we're setting 'src' and 'alt' + * directly in the NextJSLogo component, so we don't want TypeScript to require + * them when we use the NextJSLogo component. + */ +type NextJSLogoProps = Omit; -export function NextJSLogo({ className, ...props }: Props) { +export function NextJSLogo({ className, ...props }: NextJSLogoProps) { return ( ; + +/** + * The Vercel logo + */ const meta = { - title: 'Atoms/Logos/VercelLogo', - component: VercelLogo -} satisfies Meta; + component: VercelLogo, + tags: ['autodocs'], + title: 'Atoms/Logos/VercelLogo' +} satisfies VercelLogoMeta; export default meta; -type Story = StoryObj; +/** + * Type definition for the stories. + * This type defines the expected structure for individual stories. + * + * @see https://storybook.js.org/docs/writing-stories#defining-stories + */ +type VercelLogoStory = StoryObj; + +/* Stories */ +/** + * The default Vercel logo. + */ export const Default = { args: { width: 100, height: 24 } -} satisfies Story; +} satisfies VercelLogoStory; diff --git a/src/components/atoms/logos/VercelLogo/index.tsx b/src/components/atoms/logos/VercelLogo/index.tsx index 6f87953..50065b2 100644 --- a/src/components/atoms/logos/VercelLogo/index.tsx +++ b/src/components/atoms/logos/VercelLogo/index.tsx @@ -2,12 +2,18 @@ import Image, { type ImageProps } from 'next/image'; import { cn } from '~/lib/utils'; -// We use Omit to create a new type that has all the properties of ImageProps -// except for 'src' and 'alt'. This is because we're setting 'src' and 'alt' -// directly in the VercelLogo component, so we don't want TypeScript to require -// them when we use the VercelLogo component. -type Props = Omit; +/** + * Props for the VercelLogo component. + * + * We use Omit to create a new type that has all the properties of ImageProps + * except for 'src' and 'alt'. This is because we're setting 'src' and 'alt' + * directly in the VercelLogo component, so we don't want TypeScript to require + * them when we use the VercelLogo component. + */ +type VercelLogoProps = Omit; + +export function VercelLogo({ className, ...props }: VercelLogoProps) { + /* JSX */ -export function VercelLogo({ className, ...props }: Props) { return Vercel Logo; } diff --git a/src/components/atoms/typography/Code/index.stories.tsx b/src/components/atoms/typography/Code/index.stories.tsx index 68fb247..37cd0da 100644 --- a/src/components/atoms/typography/Code/index.stories.tsx +++ b/src/components/atoms/typography/Code/index.stories.tsx @@ -2,16 +2,39 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Code } from '.'; +/** + * Meta information for the component. + * This object configures how the component will be displayed in the Storybook interface. + * + * @see https://storybook.js.org/docs/writing-stories#default-export + */ +type CodeMeta = Meta; + +/** + * Code block for displaying code snippets. + */ const meta = { - title: 'Atoms/Typography/Code', - component: Code -} satisfies Meta; + component: Code, + tags: ['autodocs'], + title: 'Atoms/Typography/Code' +} satisfies CodeMeta; export default meta; -type Story = StoryObj; +/** + * Type definition for the stories. + * This type defines the expected structure for individual stories. + * + * @see https://storybook.js.org/docs/writing-stories#defining-stories + */ +type CodeStory = StoryObj; + +/* Stories */ +/** + * Default code block. + */ export const Default = { args: { children: 'src/app/page.tsx' } -} satisfies Story; +} satisfies CodeStory; diff --git a/src/components/atoms/typography/Code/index.tsx b/src/components/atoms/typography/Code/index.tsx index 380f8a2..312681b 100644 --- a/src/components/atoms/typography/Code/index.tsx +++ b/src/components/atoms/typography/Code/index.tsx @@ -1,11 +1,15 @@ -import * as React from 'react'; +import { forwardRef } from 'react'; import { cn } from '~/lib/utils'; -type Props = React.HTMLAttributes; +/** + * Props for the ArrowIcon component. + */ +type CodeProps = React.HTMLAttributes; + +export const Code = forwardRef(({ className, ...props }, ref) => { + /* JSX */ -export const Code = React.forwardRef(({ className, ...props }, ref) => { return ; }); - Code.displayName = 'Code'; diff --git a/src/components/atoms/typography/Heading/index.stories.tsx b/src/components/atoms/typography/Heading/index.stories.tsx index 36b1eda..bf92aae 100644 --- a/src/components/atoms/typography/Heading/index.stories.tsx +++ b/src/components/atoms/typography/Heading/index.stories.tsx @@ -2,52 +2,90 @@ import type { Meta, StoryObj } from '@storybook/react'; import { Heading } from '.'; +/** + * Meta information for the component. + * This object configures how the component will be displayed in the Storybook interface. + * + * @see https://storybook.js.org/docs/writing-stories#default-export + */ +type HeadingMeta = Meta; + +/** + * Heading 1 (h1) to heading 6 (h6) elements. + */ const meta = { - title: 'Atoms/Typography/Heading', - component: Heading -} satisfies Meta; + component: Heading, + tags: ['autodocs'], + title: 'Atoms/Typography/Heading' +} satisfies HeadingMeta; export default meta; -type Story = StoryObj; +/** + * Type definition for the stories. + * This type defines the expected structure for individual stories. + * + * @see https://storybook.js.org/docs/writing-stories#defining-stories + */ +type HeadingStory = StoryObj; + +/* Stories */ +/** + * Heading 1 (h1) element. + */ export const H1 = { args: { children: 'Heading 1', level: 1 } -} satisfies Story; +} satisfies HeadingStory; +/** + * Heading 2 (h2) element. + */ export const H2 = { args: { children: 'Heading 2', level: 2 } -} satisfies Story; +} satisfies HeadingStory; +/** + * Heading 3 (h3) element. + */ export const H3 = { args: { children: 'Heading 3', level: 3 } -} satisfies Story; +} satisfies HeadingStory; +/** + * Heading 4 (h4) element. + */ export const H4 = { args: { children: 'Heading 4', level: 4 } -} satisfies Story; +} satisfies HeadingStory; +/** + * Heading 5 (h5) element. + */ export const H5 = { args: { children: 'Heading 5', level: 5 } -} satisfies Story; +} satisfies HeadingStory; +/** + * Heading 6 (h6) element. + */ export const H6 = { args: { children: 'Heading 6', level: 6 } -} satisfies Story; +} satisfies HeadingStory; diff --git a/src/components/atoms/typography/Heading/index.tsx b/src/components/atoms/typography/Heading/index.tsx index 8c9fa62..9189b00 100644 --- a/src/components/atoms/typography/Heading/index.tsx +++ b/src/components/atoms/typography/Heading/index.tsx @@ -1,5 +1,5 @@ import { cva, type VariantProps } from 'class-variance-authority'; -import * as React from 'react'; +import { forwardRef } from 'react'; import { cn } from '~/lib/utils'; @@ -16,9 +16,14 @@ const headingVariants = cva('font-semibold', { } }); -type Props = React.HTMLAttributes & VariantProps; +/** + * Props for the Heading component. + */ +type HeadingProps = React.HTMLAttributes & VariantProps; + +export const Heading = forwardRef(({ className, level = 1, ...props }, ref) => { + /* JSX */ -export const Heading = React.forwardRef(({ className, level = 1, ...props }, ref) => { switch (level) { case 1: return

; diff --git a/src/components/atoms/utils/ScreenSize/index.stories.ts b/src/components/atoms/utils/ScreenSize/index.stories.ts deleted file mode 100644 index 6b95542..0000000 --- a/src/components/atoms/utils/ScreenSize/index.stories.ts +++ /dev/null @@ -1,46 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { ScreenSize } from '.'; - -const meta: Meta = { - title: 'Atoms/Utils/ScreenSize', - component: ScreenSize -}; -export default meta; - -type Story = StoryObj; - -export const Responsive: Story = { - parameters: { - viewport: { defaultViewport: 'responsive' } - } -}; - -export const SM: Story = { - parameters: { - viewport: { defaultViewport: 'sm' } - } -}; - -export const MD: Story = { - parameters: { - viewport: { defaultViewport: 'md' } - } -}; - -export const LG: Story = { - parameters: { - viewport: { defaultViewport: 'lg' } - } -}; - -export const XL: Story = { - parameters: { - viewport: { defaultViewport: 'xl' } - } -}; - -export const XXL: Story = { - parameters: { - viewport: { defaultViewport: '2xl' } - } -}; diff --git a/src/components/atoms/utils/ScreenSize/index.stories.tsx b/src/components/atoms/utils/ScreenSize/index.stories.tsx new file mode 100644 index 0000000..813c7b9 --- /dev/null +++ b/src/components/atoms/utils/ScreenSize/index.stories.tsx @@ -0,0 +1,86 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { ScreenSize } from '.'; + +/** + * Meta information for the component. + * This object configures how the component will be displayed in the Storybook interface. + * + * @see https://storybook.js.org/docs/react/writing-stories/introduction#default-export + */ +type ScreenSizeMeta = Meta; + +/** + * Screen size utility component for the development environment. + * This components displays the current screen size with its corresponding Tailwind CSS breakpoint. + */ +const meta = { + component: ScreenSize, + tags: ['autodocs'], + title: 'Atoms/Utils/ScreenSize' +} satisfies ScreenSizeMeta; +export default meta; + +/** + * Type definition for the stories. + * This type defines the expected structure for individual stories. + * + * @see https://storybook.js.org/docs/writing-stories#defining-stories + */ +type ScreenSizeStory = StoryObj; + +/* Stories */ + +/** + * Responsive screen size. + */ +export const Responsive: ScreenSizeStory = { + parameters: { + viewport: { defaultViewport: 'responsive' } + } +}; + +/** + * Small screen size. Minimum width: 640px + */ +export const SM: ScreenSizeStory = { + parameters: { + viewport: { defaultViewport: 'sm' } + } +}; + +/** + * Medium screen size. Minimum width: 768px + */ +export const MD: ScreenSizeStory = { + parameters: { + viewport: { defaultViewport: 'md' } + } +}; + +/** + * Large screen size. Minimum width: 1024px + */ +export const LG: ScreenSizeStory = { + parameters: { + viewport: { defaultViewport: 'lg' } + } +}; + +/** + * Extra large screen size. Minimum width: 1280px + */ +export const XL: ScreenSizeStory = { + parameters: { + viewport: { defaultViewport: 'xl' } + } +}; + +/** + * Extra extra large screen size. Minimum width: 1536px + */ +export const XXL: ScreenSizeStory = { + parameters: { + viewport: { defaultViewport: '2xl' } + } +}; diff --git a/src/components/atoms/utils/ScreenSize/index.tsx b/src/components/atoms/utils/ScreenSize/index.tsx index c2a0d8f..d98c216 100644 --- a/src/components/atoms/utils/ScreenSize/index.tsx +++ b/src/components/atoms/utils/ScreenSize/index.tsx @@ -1,15 +1,19 @@ 'use client'; -import * as React from 'react'; +import { useEffect, useState } from 'react'; -/** - * A fixed component displaying the current viewport width and corresponding Tailwind breakpoint, as a helper for responsive design. - * Should only be rendered in development mode. - */ export function ScreenSize() { - const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 }); + /* State */ - React.useEffect(() => { + const [dimensions, setDimensions] = useState({ width: 0, height: 0 }); + + /* Derived State */ + + const { width, height } = dimensions; + + /* Render */ + + useEffect(() => { function updateDimensions() { setDimensions({ width: window.innerWidth, @@ -25,7 +29,7 @@ export function ScreenSize() { }; }, []); - const { width, height } = dimensions; + /* JSX */ return (
diff --git a/src/components/molecules/blocks/CreatorCredit/index.stories.tsx b/src/components/molecules/blocks/CreatorCredit/index.stories.tsx index 96303f9..7472f08 100644 --- a/src/components/molecules/blocks/CreatorCredit/index.stories.tsx +++ b/src/components/molecules/blocks/CreatorCredit/index.stories.tsx @@ -2,12 +2,35 @@ import type { Meta, StoryObj } from '@storybook/react'; import { CreatorCredit } from '.'; +/** + * Meta information for the component. + * This object configures how the component will be displayed in the Storybook interface. + * + * @see https://storybook.js.org/docs/writing-stories#default-export + */ +type CreatorCreditMeta = Meta; + +/** + * Displays the creator credit for the content. + */ const meta = { - title: 'Molecules/Blocks/CreatorCredit', - component: CreatorCredit -} satisfies Meta; + component: CreatorCredit, + tags: ['autodocs'], + title: 'Molecules/Blocks/CreatorCredit' +} satisfies CreatorCreditMeta; export default meta; -type Story = StoryObj; +/** + * Type definition for the stories. + * This type defines the expected structure for individual stories. + * + * @see https://storybook.js.org/docs/writing-stories#defining-stories + */ +type CreatorCreditStory = StoryObj; + +/* Stories */ -export const Default = {} satisfies Story; +/** + * Default creator credit. + */ +export const Default = {} satisfies CreatorCreditStory; diff --git a/src/components/molecules/blocks/CreatorCredit/index.tsx b/src/components/molecules/blocks/CreatorCredit/index.tsx index 20ac1c8..423d622 100644 --- a/src/components/molecules/blocks/CreatorCredit/index.tsx +++ b/src/components/molecules/blocks/CreatorCredit/index.tsx @@ -1,6 +1,8 @@ import { VercelLogo } from '~/components/atoms/logos/VercelLogo'; export function CreatorCredit() { + /* JSX */ + return ( ; + +/** + * Get started block for the development environment. + * This component displays a call-to-action block to help users get started with the application. + */ const meta = { - title: 'Molecules/Blocks/GetStarted', - component: GetStarted -} satisfies Meta; + component: GetStarted, + tags: ['autodocs'], + title: 'Molecules/Blocks/GetStarted' +} satisfies GetStartedMeta; export default meta; -type Story = StoryObj; +/** + * Type definition for the stories. + * This type defines the expected structure for individual stories. + * + * @see https://storybook.js.org/docs/writing-stories#defining-stories + */ +type GetStartedStory = StoryObj; + +/* Stories */ -export const Default = {} satisfies Story; +/** + * Default get started block. + */ +export const Default = {} satisfies GetStartedStory; diff --git a/src/components/molecules/blocks/GetStarted/index.tsx b/src/components/molecules/blocks/GetStarted/index.tsx index e71ce39..7345689 100644 --- a/src/components/molecules/blocks/GetStarted/index.tsx +++ b/src/components/molecules/blocks/GetStarted/index.tsx @@ -1,6 +1,8 @@ import { Code } from '~/components/atoms/typography/Code'; export function GetStarted() { + /* JSX */ + return (

Get started by editing  diff --git a/src/components/molecules/cards/ResourceCard/index.stories.tsx b/src/components/molecules/cards/ResourceCard/index.stories.tsx index 049217e..b673d64 100644 --- a/src/components/molecules/cards/ResourceCard/index.stories.tsx +++ b/src/components/molecules/cards/ResourceCard/index.stories.tsx @@ -2,22 +2,48 @@ import type { Meta, StoryObj } from '@storybook/react'; import { ResourceCard } from '.'; +/** + * Meta information for the component. + * This object configures how the component will be displayed in the Storybook interface. + * + * @see https://storybook.js.org/docs/writing-stories#default-export + */ +type ResourceCardMeta = Meta; + +/** + * Displays a resource card with a title, description, and link. + */ const meta = { - title: 'Molecules/Cards/ResourceCard', - component: ResourceCard -} satisfies Meta; + component: ResourceCard, + tags: ['autodocs'], + title: 'Molecules/Cards/ResourceCard' +} satisfies ResourceCardMeta; export default meta; -type Story = StoryObj; +/** + * Type definition for the stories. + * This type defines the expected structure for individual stories. + * + * @see https://storybook.js.org/docs/writing-stories#defining-stories + */ +type ResourceCardStory = StoryObj; + +/* Stories */ +/** + * Default resource card. + */ export const Default = { args: { title: 'Docs', description: 'Find in-depth information about Next.js features and API.', link: 'https://nextjs.org/docs' } -} satisfies Story; +} satisfies ResourceCardStory; +/** + * Resource card with hover state. + */ export const Hover = { args: { title: 'Docs', @@ -29,4 +55,4 @@ export const Hover = { hover: true } } -} satisfies Story; +} satisfies ResourceCardStory; diff --git a/src/components/molecules/cards/ResourceCard/index.tsx b/src/components/molecules/cards/ResourceCard/index.tsx index c887aba..b52a5b4 100644 --- a/src/components/molecules/cards/ResourceCard/index.tsx +++ b/src/components/molecules/cards/ResourceCard/index.tsx @@ -1,13 +1,23 @@ import { ArrowIcon } from '~/components/atoms/icons/ArrowIcon'; import { Heading } from '~/components/atoms/typography/Heading'; -type Props = { +/** + * Props for the ArrowIcon component. + */ +type ResourceCardProps = { + /** Title of the card */ title: string; + + /** Description of the card */ description: string; + + /** Link to the resource */ link: string; }; -export function ResourceCard({ title, description, link }: Props) { +export function ResourceCard({ title, description, link }: ResourceCardProps) { + /* JSX */ + return ( ; + +/** + * Header section with a get started block and a creator credit block. + */ const meta = { - title: 'Organisms/Sections/HeaderSection', - component: HeaderSection -} satisfies Meta; + component: HeaderSection, + tags: ['autodocs'], + title: 'Organisms/Sections/HeaderSection' +} satisfies HeaderSectionMeta; export default meta; -type Story = StoryObj; +/** + * Type definition for the stories. + * This type defines the expected structure for individual stories. + * + * @see https://storybook.js.org/docs/writing-stories#defining-stories + */ +type HeaderSectionStory = StoryObj; + +/* Stories */ -export const Default = {} satisfies Story; +/** + * Default header section. + */ +export const Default = {} satisfies HeaderSectionStory; diff --git a/src/components/organisms/sections/HeaderSection/index.tsx b/src/components/organisms/sections/HeaderSection/index.tsx index e97f0e2..63d247d 100644 --- a/src/components/organisms/sections/HeaderSection/index.tsx +++ b/src/components/organisms/sections/HeaderSection/index.tsx @@ -2,6 +2,8 @@ import { CreatorCredit } from '~/components/molecules/blocks/CreatorCredit'; import { GetStarted } from '~/components/molecules/blocks/GetStarted'; export function HeaderSection() { + /* JSX */ + return (

diff --git a/src/components/organisms/sections/LogoSection/index.stories.tsx b/src/components/organisms/sections/LogoSection/index.stories.tsx index 42cd2db..b99ee25 100644 --- a/src/components/organisms/sections/LogoSection/index.stories.tsx +++ b/src/components/organisms/sections/LogoSection/index.stories.tsx @@ -2,12 +2,35 @@ import type { Meta, StoryObj } from '@storybook/react'; import { LogoSection } from '.'; +/** + * Meta information for the component. + * This object configures how the component will be displayed in the Storybook interface. + * + * @see https://storybook.js.org/docs/writing-stories#default-export + */ +type LogoSectionMeta = Meta; + +/** + * Section with a centered Next.js logo. + */ const meta = { - title: 'Organisms/Sections/LogoSection', - component: LogoSection -} satisfies Meta; + component: LogoSection, + tags: ['autodocs'], + title: 'Organisms/Sections/LogoSection' +} satisfies LogoSectionMeta; export default meta; -type Story = StoryObj; +/** + * Type definition for the stories. + * This type defines the expected structure for individual stories. + * + * @see https://storybook.js.org/docs/writing-stories#defining-stories + */ +type LogoSectionStory = StoryObj; + +/* Stories */ -export const Default = {} satisfies Story; +/** + * Default logo section. + */ +export const Default = {} satisfies LogoSectionStory; diff --git a/src/components/organisms/sections/LogoSection/index.tsx b/src/components/organisms/sections/LogoSection/index.tsx index e02f16f..2a35dd8 100644 --- a/src/components/organisms/sections/LogoSection/index.tsx +++ b/src/components/organisms/sections/LogoSection/index.tsx @@ -1,6 +1,8 @@ import { NextJSLogo } from '~/components/atoms/logos/NextJSLogo'; export function LogoSection() { + /* JSX */ + return (
diff --git a/src/components/organisms/sections/ResourceSection/index.stories.tsx b/src/components/organisms/sections/ResourceSection/index.stories.tsx index 51fd2f5..157ed28 100644 --- a/src/components/organisms/sections/ResourceSection/index.stories.tsx +++ b/src/components/organisms/sections/ResourceSection/index.stories.tsx @@ -2,12 +2,35 @@ import type { Meta, StoryObj } from '@storybook/react'; import { ResourceSection } from '.'; +/** + * Meta information for the component. + * This object configures how the component will be displayed in the Storybook interface. + * + * @see https://storybook.js.org/docs/writing-stories#default-export + */ +type ResourceSectionMeta = Meta; + +/** + * Section with a list of resources. + */ const meta = { - title: 'Organisms/Sections/ResourceSection', - component: ResourceSection -} satisfies Meta; + component: ResourceSection, + tags: ['autodocs'], + title: 'Organisms/Sections/ResourceSection' +} satisfies ResourceSectionMeta; export default meta; -type Story = StoryObj; +/** + * Type definition for the stories. + * This type defines the expected structure for individual stories. + * + * @see https://storybook.js.org/docs/writing-stories#defining-stories + */ +type ResourceSectionStory = StoryObj; + +/* Stories */ -export const Default = {} satisfies Story; +/** + * Default resource section. + */ +export const Default = {} satisfies ResourceSectionStory; diff --git a/src/components/organisms/sections/ResourceSection/index.tsx b/src/components/organisms/sections/ResourceSection/index.tsx index 2a74368..ea08e45 100644 --- a/src/components/organisms/sections/ResourceSection/index.tsx +++ b/src/components/organisms/sections/ResourceSection/index.tsx @@ -1,6 +1,8 @@ import { ResourceCard } from '../../../molecules/cards/ResourceCard'; export function ResourceSection() { + /* JSX */ + return (