From 756cc52e1cfc03bc7d9c48edb685b0041e00cb05 Mon Sep 17 00:00:00 2001 From: Vivian Phung Date: Fri, 10 May 2024 16:52:26 -0400 Subject: [PATCH] [1/n] storybook components start --- packages/frontend/.storybook/main.ts | 1 + .../src/components/shared/CustomIcon/index.ts | 4 + .../src/components/shared/Select/index.ts | 1 + .../src/components/shared/Tooltip/index.ts | 1 + .../src/stories/Components/Avatar.stories.tsx | 1 + .../stories/Components/Calendar.stories.tsx | 44 +++++++ .../stories/Components/Checkbox.stories.tsx | 41 ++++++ .../stories/Components/DatePicker.stories.tsx | 25 ++++ .../stories/Components/DotBorder.stories.tsx | 15 +++ .../stories/Components/Heading.stories.tsx | 15 +++ .../Components/IconWithFrame.stories.tsx | 32 +++++ .../Components/Icons/AppleIcon.stories.tsx | 29 +++++ .../ArrowLeftCircleFilledIcon.stories.tsx | 31 +++++ .../ArrowRightCircleFilledIcon.stories.tsx | 31 +++++ .../Icons/ArrowRightCircleIcon.stories.tsx | 29 +++++ .../Components/Icons/BranchIcon.stories.tsx | 29 +++++ .../Icons/BranchStrokeIcon.stories.tsx | 29 +++++ .../Components/Icons/BuildingIcon.stories.tsx | 29 +++++ .../Icons/CalendarDaysIcon.stories.tsx | 29 +++++ .../Components/Icons/CalendarIcon.stories.tsx | 29 +++++ .../Components/Icons/CheckIcon.stories.tsx | 29 +++++ .../Icons/CheckRadioIcon.stories.tsx | 29 +++++ .../Icons/CheckRadioOutlineIcon.stories.tsx | 29 +++++ .../Icons/CheckRoundFilledIcon.stories.tsx | 29 +++++ .../Icons/ChevronDoubleDownIcon.stories.tsx | 29 +++++ .../Icons/ChevronDownIcon.stories.tsx | 29 +++++ .../ChevronGrabberHorizontal.stories.tsx | 31 +++++ .../Components/Icons/ChevronLeft.stories.tsx | 29 +++++ .../Components/Icons/ChevronRight.stories.tsx | 25 ++++ .../Icons/ChevronUpDown.stories.tsx | 25 ++++ .../Icons/CirclePlaceholderOnIcon.stories.tsx | 31 +++++ .../Components/Icons/ClockIcon.stories.tsx | 29 +++++ .../Icons/ClockOutlineIcon.stories.tsx | 29 +++++ .../Components/Icons/CommitIcon.stories.tsx | 29 +++++ .../Components/Icons/CopyIcon.stories.tsx | 29 +++++ .../Icons/CrossCircleIcon.stories.tsx | 29 +++++ .../Components/Icons/CrossIcon.stories.tsx | 29 +++++ .../Icons/CursorBoxIcon.stories.tsx | 29 +++++ .../Components/Icons/EllipseIcon.stories.tsx | 29 +++++ .../Components/Icons/EllipsesIcon.stories.tsx | 29 +++++ .../Components/Icons/FolderIcon.stories.tsx | 29 +++++ .../Components/Icons/GearIcon.stories.tsx | 29 +++++ .../Components/Icons/GitHubLogo.stories.tsx | 29 +++++ .../Components/Icons/GitIcon.stories.tsx | 29 +++++ .../Components/Icons/GitTeaIcon.stories.tsx | 29 +++++ .../Components/Icons/GithubIcon.stories.tsx | 29 +++++ .../Icons/GithubStrokeIcon.stories.tsx | 29 +++++ .../Components/Icons/GlobeIcon.stories.tsx | 29 +++++ .../Components/Icons/GoogleIcon.stories.tsx | 29 +++++ .../Icons/HorizontalDotIcon.stories.tsx | 29 +++++ .../Icons/InfoRoundFilledIcon.stories.tsx | 29 +++++ .../Icons/InfoSquareIcon.stories.tsx | 29 +++++ .../Components/Icons/KeyIcon.stories.tsx | 29 +++++ .../Components/Icons/LifeBuoyIcon.stories.tsx | 29 +++++ .../Icons/LinkChainIcon.stories.tsx | 29 +++++ .../Components/Icons/LinkIcon.stories.tsx | 29 +++++ .../Components/Icons/LoaderIcon.stories.tsx | 29 +++++ .../Components/Icons/LoadingIcon.stories.tsx | 29 +++++ .../Components/Icons/LockIcon.stories.tsx | 29 +++++ .../Components/Icons/LogoutIcon.stories.tsx | 29 +++++ .../Components/Icons/MenuIcon.stories.tsx | 29 +++++ .../Icons/MinusCircleIcon.stories.tsx | 29 +++++ .../Icons/NotificationBellIcon.stories.tsx | 29 +++++ .../Components/Icons/PencilIcon.stories.tsx | 29 +++++ .../Components/Icons/PlusIcon.stories.tsx | 29 +++++ .../QuestionMarkRoundFilledIcon.stories.tsx | 31 +++++ .../Icons/QuestionMarkRoundIcon.stories.tsx | 29 +++++ .../Components/Icons/RefreshIcon.stories.tsx | 29 +++++ .../Components/Icons/RocketIcon.stories.tsx | 29 +++++ .../Components/Icons/SearchIcon.stories.tsx | 29 +++++ .../Icons/SettingsSlidersIcon.stories.tsx | 29 +++++ .../Components/Icons/SnowballIcon.stories.tsx | 29 +++++ .../Components/Icons/StorageIcon.stories.tsx | 29 +++++ .../Components/Icons/TrendingIcon.stories.tsx | 29 +++++ .../Components/Icons/UndoIcon.stories.tsx | 29 +++++ .../Icons/WarningDiamondIcon.stories.tsx | 29 +++++ .../Components/Icons/WarningIcon.stories.tsx | 29 +++++ .../Icons/WarningTriangleIcon.stories.tsx | 29 +++++ .../Components/InlineNotification.stories.tsx | 89 +++++++++++++ .../src/stories/Components/Input.stories.tsx | 123 ++++++++++++++++++ .../src/stories/Components/Modal.stories.tsx | 36 +++++ .../Components/OverflownText.stories.tsx | 33 +++++ .../Components/SegmentedControls.stories.tsx | 38 ++++++ .../src/stories/Components/Select.stories.tsx | 105 +++++++++++++++ .../src/stories/Components/Steps.stories.tsx | 74 +++++++++++ .../src/stories/Components/Switch.stories.tsx | 51 ++++++++ .../src/stories/Components/Tabs.stories.tsx | 85 ++++++++++++ .../src/stories/Components/Tag.stories.tsx | 77 +++++++++++ .../src/stories/Components/Toast.stories.tsx | 101 ++++++++++++++ .../stories/Components/Tooltip.stories.tsx | 71 ++++++++++ .../stories/Components/WavyBorder.stories.tsx | 20 +++ yarn.lock | 88 ++++--------- 92 files changed, 3053 insertions(+), 63 deletions(-) create mode 100644 packages/frontend/src/stories/Components/Calendar.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Checkbox.stories.tsx create mode 100644 packages/frontend/src/stories/Components/DatePicker.stories.tsx create mode 100644 packages/frontend/src/stories/Components/DotBorder.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Heading.stories.tsx create mode 100644 packages/frontend/src/stories/Components/IconWithFrame.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/AppleIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/ArrowLeftCircleFilledIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/ArrowRightCircleFilledIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/ArrowRightCircleIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/BranchIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/BranchStrokeIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/BuildingIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/CalendarDaysIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/CalendarIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/CheckIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/CheckRadioIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/CheckRadioOutlineIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/CheckRoundFilledIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/ChevronDoubleDownIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/ChevronDownIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/ChevronGrabberHorizontal.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/ChevronLeft.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/ChevronRight.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/ChevronUpDown.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/CirclePlaceholderOnIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/ClockIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/ClockOutlineIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/CommitIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/CopyIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/CrossCircleIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/CrossIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/CursorBoxIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/EllipseIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/EllipsesIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/FolderIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/GearIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/GitHubLogo.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/GitIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/GitTeaIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/GithubIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/GithubStrokeIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/GlobeIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/GoogleIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/HorizontalDotIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/InfoRoundFilledIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/InfoSquareIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/KeyIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/LifeBuoyIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/LinkChainIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/LinkIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/LoaderIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/LoadingIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/LockIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/LogoutIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/MenuIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/MinusCircleIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/NotificationBellIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/PencilIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/PlusIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/QuestionMarkRoundFilledIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/QuestionMarkRoundIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/RefreshIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/RocketIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/SearchIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/SettingsSlidersIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/SnowballIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/StorageIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/TrendingIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/UndoIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/WarningDiamondIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/WarningIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Icons/WarningTriangleIcon.stories.tsx create mode 100644 packages/frontend/src/stories/Components/InlineNotification.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Input.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Modal.stories.tsx create mode 100644 packages/frontend/src/stories/Components/OverflownText.stories.tsx create mode 100644 packages/frontend/src/stories/Components/SegmentedControls.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Select.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Steps.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Switch.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Tabs.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Tag.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Toast.stories.tsx create mode 100644 packages/frontend/src/stories/Components/Tooltip.stories.tsx create mode 100644 packages/frontend/src/stories/Components/WavyBorder.stories.tsx diff --git a/packages/frontend/.storybook/main.ts b/packages/frontend/.storybook/main.ts index 36ed544..1035220 100644 --- a/packages/frontend/.storybook/main.ts +++ b/packages/frontend/.storybook/main.ts @@ -26,4 +26,5 @@ const config: StorybookConfig = { autodocs: 'tag', }, }; + export default config; diff --git a/packages/frontend/src/components/shared/CustomIcon/index.ts b/packages/frontend/src/components/shared/CustomIcon/index.ts index 805e70a..02c372d 100644 --- a/packages/frontend/src/components/shared/CustomIcon/index.ts +++ b/packages/frontend/src/components/shared/CustomIcon/index.ts @@ -63,6 +63,10 @@ export * from './CheckRadioOutlineIcon'; export * from './TrendingIcon'; export * from './ChevronDoubleDownIcon'; export * from './GearIcon'; +export * from './AppleIcon'; +export * from './CalendarDaysIcon'; +export * from './GoogleIcon'; +export * from './KeyIcon'; // Templates export * from './templates'; diff --git a/packages/frontend/src/components/shared/Select/index.ts b/packages/frontend/src/components/shared/Select/index.ts index 7868ecb..7669724 100644 --- a/packages/frontend/src/components/shared/Select/index.ts +++ b/packages/frontend/src/components/shared/Select/index.ts @@ -1 +1,2 @@ export * from './Select'; +export * from './SelectItem'; diff --git a/packages/frontend/src/components/shared/Tooltip/index.ts b/packages/frontend/src/components/shared/Tooltip/index.ts index a51f2a3..77078f8 100644 --- a/packages/frontend/src/components/shared/Tooltip/index.ts +++ b/packages/frontend/src/components/shared/Tooltip/index.ts @@ -1,2 +1,3 @@ export * from './Tooltip'; export * from './TooltipBase'; +export * from './TooltipContent'; diff --git a/packages/frontend/src/stories/Components/Avatar.stories.tsx b/packages/frontend/src/stories/Components/Avatar.stories.tsx index 5d48298..d9bfdfd 100644 --- a/packages/frontend/src/stories/Components/Avatar.stories.tsx +++ b/packages/frontend/src/stories/Components/Avatar.stories.tsx @@ -27,6 +27,7 @@ const meta: Meta = { }, }, }; + export default meta; type Story = StoryObj; diff --git a/packages/frontend/src/stories/Components/Calendar.stories.tsx b/packages/frontend/src/stories/Components/Calendar.stories.tsx new file mode 100644 index 0000000..9e214b0 --- /dev/null +++ b/packages/frontend/src/stories/Components/Calendar.stories.tsx @@ -0,0 +1,44 @@ +import { StoryObj, Meta } from '@storybook/react'; + +import { Calendar } from 'components/shared/Calendar'; + +const meta: Meta = { + title: 'Components/Calendar', + component: Calendar, + tags: ['autodocs'], + args: { + wrapperProps: 'any' as unknown as any, + calendarWrapperProps: 'any' as unknown as any, + footerProps: 'any' as unknown as any, + actions: 'any' as unknown as any, + onSelect: () => {}, + onCancel: () => {}, + onReset: () => {}, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ + wrapperProps, + calendarWrapperProps, + footerProps, + actions, + onSelect, + onCancel, + onReset, + }) => ( + + ), +}; diff --git a/packages/frontend/src/stories/Components/Checkbox.stories.tsx b/packages/frontend/src/stories/Components/Checkbox.stories.tsx new file mode 100644 index 0000000..7579457 --- /dev/null +++ b/packages/frontend/src/stories/Components/Checkbox.stories.tsx @@ -0,0 +1,41 @@ +import { StoryObj, Meta } from '@storybook/react'; + +import { Checkbox } from 'components/shared/Checkbox'; + +const meta: Meta = { + title: 'Components/Checkbox', + component: Checkbox, + tags: ['autodocs'], + args: { + label: 'string', + description: 'string', + checked: 'CheckedState' as unknown as any, + defaultChecked: 'CheckedState' as unknown as any, + required: 'boolean' as unknown as any, + onCheckedChange: '(checked: CheckedState) => void' as unknown as any, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ + label, + description, + checked, + defaultChecked, + required, + onCheckedChange, + }) => ( + + ), +}; diff --git a/packages/frontend/src/stories/Components/DatePicker.stories.tsx b/packages/frontend/src/stories/Components/DatePicker.stories.tsx new file mode 100644 index 0000000..f05e1d2 --- /dev/null +++ b/packages/frontend/src/stories/Components/DatePicker.stories.tsx @@ -0,0 +1,25 @@ +import { StoryObj, Meta } from '@storybook/react'; + +import { DatePicker } from 'components/shared/DatePicker'; + +const meta: Meta = { + title: 'Components/DatePicker', + component: DatePicker, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ calendarProps, onChange, value, selectRange, onReset }) => ( + + ), +}; diff --git a/packages/frontend/src/stories/Components/DotBorder.stories.tsx b/packages/frontend/src/stories/Components/DotBorder.stories.tsx new file mode 100644 index 0000000..6d8f17b --- /dev/null +++ b/packages/frontend/src/stories/Components/DotBorder.stories.tsx @@ -0,0 +1,15 @@ +import { StoryObj, Meta } from '@storybook/react'; + +import { DotBorder } from 'components/shared/DotBorder'; + +const meta: Meta = { + title: 'Components/DotBorder', + component: DotBorder, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/packages/frontend/src/stories/Components/Heading.stories.tsx b/packages/frontend/src/stories/Components/Heading.stories.tsx new file mode 100644 index 0000000..1218725 --- /dev/null +++ b/packages/frontend/src/stories/Components/Heading.stories.tsx @@ -0,0 +1,15 @@ +import { StoryObj, Meta } from '@storybook/react'; + +import { Heading } from 'components/shared/Heading'; + +const meta: Meta = { + title: 'Components/Heading', + component: Heading, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/packages/frontend/src/stories/Components/IconWithFrame.stories.tsx b/packages/frontend/src/stories/Components/IconWithFrame.stories.tsx new file mode 100644 index 0000000..7c4a5ff --- /dev/null +++ b/packages/frontend/src/stories/Components/IconWithFrame.stories.tsx @@ -0,0 +1,32 @@ +import { StoryObj, Meta } from '@storybook/react'; +import { PlusIcon } from 'components/shared/CustomIcon'; + +import { IconWithFrame } from 'components/shared/IconWithFrame'; + +const meta: Meta = { + title: 'Components/IconWithFrame', + component: IconWithFrame, + tags: ['autodocs'], + argTypes: { + icon: { + control: 'object', + }, + hasHighlight: { + control: 'boolean', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ icon, hasHighlight }) => ( + + ), + args: { + hasHighlight: true, + icon: , + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/AppleIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/AppleIcon.stories.tsx new file mode 100644 index 0000000..a84c618 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/AppleIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { AppleIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/AppleIcon', + component: AppleIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/ArrowLeftCircleFilledIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/ArrowLeftCircleFilledIcon.stories.tsx new file mode 100644 index 0000000..e0eab68 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/ArrowLeftCircleFilledIcon.stories.tsx @@ -0,0 +1,31 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { ArrowLeftCircleFilledIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/ArrowLeftCircleFilledIcon', + component: ArrowLeftCircleFilledIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => ( + + ), + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/ArrowRightCircleFilledIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/ArrowRightCircleFilledIcon.stories.tsx new file mode 100644 index 0000000..ed6cf92 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/ArrowRightCircleFilledIcon.stories.tsx @@ -0,0 +1,31 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { ArrowRightCircleFilledIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/ArrowRightCircleFilledIcon', + component: ArrowRightCircleFilledIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => ( + + ), + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/ArrowRightCircleIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/ArrowRightCircleIcon.stories.tsx new file mode 100644 index 0000000..6f3741e --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/ArrowRightCircleIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { ArrowRightCircleIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/ArrowRightCircleIcon', + component: ArrowRightCircleIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/BranchIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/BranchIcon.stories.tsx new file mode 100644 index 0000000..35c8dc1 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/BranchIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { BranchIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/BranchIcon', + component: BranchIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/BranchStrokeIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/BranchStrokeIcon.stories.tsx new file mode 100644 index 0000000..1bf5af0 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/BranchStrokeIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { BranchStrokeIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/BranchStrokeIcon', + component: BranchStrokeIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/BuildingIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/BuildingIcon.stories.tsx new file mode 100644 index 0000000..0870ac0 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/BuildingIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { BuildingIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/BuildingIcon', + component: BuildingIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/CalendarDaysIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/CalendarDaysIcon.stories.tsx new file mode 100644 index 0000000..dc21788 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/CalendarDaysIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { CalendarDaysIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/CalendarDaysIcon', + component: CalendarDaysIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/CalendarIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/CalendarIcon.stories.tsx new file mode 100644 index 0000000..9346fad --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/CalendarIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { CalendarIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/CalendarIcon', + component: CalendarIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/CheckIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/CheckIcon.stories.tsx new file mode 100644 index 0000000..7aba4e4 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/CheckIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { CheckIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/CheckIcon', + component: CheckIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/CheckRadioIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/CheckRadioIcon.stories.tsx new file mode 100644 index 0000000..987f4d7 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/CheckRadioIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { CheckRadioIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/CheckRadioIcon', + component: CheckRadioIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/CheckRadioOutlineIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/CheckRadioOutlineIcon.stories.tsx new file mode 100644 index 0000000..8355ce6 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/CheckRadioOutlineIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { CheckRadioOutlineIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/CheckRadioOutlineIcon', + component: CheckRadioOutlineIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/CheckRoundFilledIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/CheckRoundFilledIcon.stories.tsx new file mode 100644 index 0000000..7f5d083 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/CheckRoundFilledIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { CheckRoundFilledIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/CheckRoundFilledIcon', + component: CheckRoundFilledIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/ChevronDoubleDownIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/ChevronDoubleDownIcon.stories.tsx new file mode 100644 index 0000000..95106e7 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/ChevronDoubleDownIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { ChevronDoubleDownIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/ChevronDoubleDownIcon', + component: ChevronDoubleDownIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/ChevronDownIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/ChevronDownIcon.stories.tsx new file mode 100644 index 0000000..9f65f9c --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/ChevronDownIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { ChevronDownIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/ChevronDownIcon', + component: ChevronDownIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/ChevronGrabberHorizontal.stories.tsx b/packages/frontend/src/stories/Components/Icons/ChevronGrabberHorizontal.stories.tsx new file mode 100644 index 0000000..239b975 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/ChevronGrabberHorizontal.stories.tsx @@ -0,0 +1,31 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { ChevronGrabberHorizontal } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/ChevronGrabberHorizontal', + component: ChevronGrabberHorizontal, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => ( + + ), + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/ChevronLeft.stories.tsx b/packages/frontend/src/stories/Components/Icons/ChevronLeft.stories.tsx new file mode 100644 index 0000000..0cd4dec --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/ChevronLeft.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { ChevronLeft } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/ChevronLeft', + component: ChevronLeft, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/ChevronRight.stories.tsx b/packages/frontend/src/stories/Components/Icons/ChevronRight.stories.tsx new file mode 100644 index 0000000..c73cb39 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/ChevronRight.stories.tsx @@ -0,0 +1,25 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { ChevronRight } from '../../../components/shared/CustomIcon/ChevronRight'; + +const meta: Meta = { + title: 'Icons/ChevronRight', + component: ChevronRight, + tags: ['autodocs'], + args: { + size: 'string | number' as unknown as any, + name: 'string', + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/ChevronUpDown.stories.tsx b/packages/frontend/src/stories/Components/Icons/ChevronUpDown.stories.tsx new file mode 100644 index 0000000..2b7a692 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/ChevronUpDown.stories.tsx @@ -0,0 +1,25 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { ChevronUpDown } from 'components/shared/CustomIcon/ChevronUpDown'; + +const meta: Meta = { + title: 'Icons/ChevronUpDown', + component: ChevronUpDown, + tags: ['autodocs'], + args: { + size: 'string | number' as unknown as any, + name: 'string', + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/CirclePlaceholderOnIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/CirclePlaceholderOnIcon.stories.tsx new file mode 100644 index 0000000..4d08db6 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/CirclePlaceholderOnIcon.stories.tsx @@ -0,0 +1,31 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { CirclePlaceholderOnIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/CirclePlaceholderOnIcon', + component: CirclePlaceholderOnIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => ( + + ), + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/ClockIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/ClockIcon.stories.tsx new file mode 100644 index 0000000..9850d00 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/ClockIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { ClockIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/ClockIcon', + component: ClockIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/ClockOutlineIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/ClockOutlineIcon.stories.tsx new file mode 100644 index 0000000..d9dc223 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/ClockOutlineIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { ClockOutlineIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/ClockOutlineIcon', + component: ClockOutlineIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/CommitIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/CommitIcon.stories.tsx new file mode 100644 index 0000000..e5a69c0 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/CommitIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { CommitIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/CommitIcon', + component: CommitIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/CopyIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/CopyIcon.stories.tsx new file mode 100644 index 0000000..5b0a2af --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/CopyIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { CopyIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/CopyIcon', + component: CopyIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/CrossCircleIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/CrossCircleIcon.stories.tsx new file mode 100644 index 0000000..3cfa9b8 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/CrossCircleIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { CrossCircleIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/CrossCircleIcon', + component: CrossCircleIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/CrossIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/CrossIcon.stories.tsx new file mode 100644 index 0000000..073f8b3 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/CrossIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { CrossIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/CrossIcon', + component: CrossIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/CursorBoxIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/CursorBoxIcon.stories.tsx new file mode 100644 index 0000000..eb321b9 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/CursorBoxIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { CursorBoxIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/CursorBoxIcon', + component: CursorBoxIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/EllipseIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/EllipseIcon.stories.tsx new file mode 100644 index 0000000..8755382 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/EllipseIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { EllipseIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/EclipseIcon', + component: EllipseIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/EllipsesIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/EllipsesIcon.stories.tsx new file mode 100644 index 0000000..71de09b --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/EllipsesIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { EllipsesIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/EllipsesIcon', + component: EllipsesIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/FolderIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/FolderIcon.stories.tsx new file mode 100644 index 0000000..83a53af --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/FolderIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { FolderIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/FolderIcon', + component: FolderIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/GearIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/GearIcon.stories.tsx new file mode 100644 index 0000000..8451df5 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/GearIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { GearIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/GearIcon', + component: GearIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/GitHubLogo.stories.tsx b/packages/frontend/src/stories/Components/Icons/GitHubLogo.stories.tsx new file mode 100644 index 0000000..2768d67 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/GitHubLogo.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { GitHubLogo } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/GitHubLogo', + component: GitHubLogo, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/GitIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/GitIcon.stories.tsx new file mode 100644 index 0000000..6393083 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/GitIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { GitIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/GitIcon', + component: GitIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/GitTeaIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/GitTeaIcon.stories.tsx new file mode 100644 index 0000000..27ba59f --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/GitTeaIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { GitTeaIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/GitTeaIcon', + component: GitTeaIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/GithubIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/GithubIcon.stories.tsx new file mode 100644 index 0000000..cc0b0f8 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/GithubIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { GithubIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/GithubIcon', + component: GithubIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/GithubStrokeIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/GithubStrokeIcon.stories.tsx new file mode 100644 index 0000000..acbec55 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/GithubStrokeIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { GithubStrokeIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/GithubStrokeLogo', + component: GithubStrokeIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/GlobeIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/GlobeIcon.stories.tsx new file mode 100644 index 0000000..454ed3d --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/GlobeIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { GlobeIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/GlobeIcon', + component: GlobeIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/GoogleIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/GoogleIcon.stories.tsx new file mode 100644 index 0000000..baea62b --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/GoogleIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { GoogleIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/GoogleIcon', + component: GoogleIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/HorizontalDotIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/HorizontalDotIcon.stories.tsx new file mode 100644 index 0000000..63d4b01 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/HorizontalDotIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { HorizontalDotIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/HorizontalDotIcon', + component: HorizontalDotIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/InfoRoundFilledIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/InfoRoundFilledIcon.stories.tsx new file mode 100644 index 0000000..2a743f4 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/InfoRoundFilledIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { InfoRoundFilledIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/InfoRoundFilledIcon', + component: InfoRoundFilledIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/InfoSquareIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/InfoSquareIcon.stories.tsx new file mode 100644 index 0000000..e6b4914 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/InfoSquareIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { InfoSquareIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/InfoSquareIcon', + component: InfoSquareIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/KeyIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/KeyIcon.stories.tsx new file mode 100644 index 0000000..de89ac9 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/KeyIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { KeyIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/KeyIcon', + component: KeyIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/LifeBuoyIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/LifeBuoyIcon.stories.tsx new file mode 100644 index 0000000..882985e --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/LifeBuoyIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { LifeBuoyIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/LifeBuoyIcon', + component: LifeBuoyIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/LinkChainIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/LinkChainIcon.stories.tsx new file mode 100644 index 0000000..bc799eb --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/LinkChainIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { LinkChainIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/LinkChainIcon', + component: LinkChainIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/LinkIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/LinkIcon.stories.tsx new file mode 100644 index 0000000..3710efa --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/LinkIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { LinkIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/LinkIcon', + component: LinkIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/LoaderIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/LoaderIcon.stories.tsx new file mode 100644 index 0000000..85d3a58 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/LoaderIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { LoaderIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/LoaderIcon', + component: LoaderIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/LoadingIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/LoadingIcon.stories.tsx new file mode 100644 index 0000000..59a0cd0 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/LoadingIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { LoadingIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/LoadingIcon', + component: LoadingIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/LockIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/LockIcon.stories.tsx new file mode 100644 index 0000000..262bdf5 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/LockIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { LockIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/LockIcon', + component: LockIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/LogoutIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/LogoutIcon.stories.tsx new file mode 100644 index 0000000..50e4cac --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/LogoutIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { LogoutIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/LogoutIcon', + component: LogoutIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/MenuIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/MenuIcon.stories.tsx new file mode 100644 index 0000000..65f2c9c --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/MenuIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { MenuIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/MenuIcon', + component: MenuIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/MinusCircleIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/MinusCircleIcon.stories.tsx new file mode 100644 index 0000000..ec05322 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/MinusCircleIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { MinusCircleIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/MinusCircleIcon', + component: MinusCircleIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/NotificationBellIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/NotificationBellIcon.stories.tsx new file mode 100644 index 0000000..697c3ae --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/NotificationBellIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { NotificationBellIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/NotificationBellIcon', + component: NotificationBellIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/PencilIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/PencilIcon.stories.tsx new file mode 100644 index 0000000..333ebaa --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/PencilIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { PencilIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/PencilIcon', + component: PencilIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/PlusIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/PlusIcon.stories.tsx new file mode 100644 index 0000000..9a4260c --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/PlusIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { PlusIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/PlusIcon', + component: PlusIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/QuestionMarkRoundFilledIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/QuestionMarkRoundFilledIcon.stories.tsx new file mode 100644 index 0000000..f834e96 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/QuestionMarkRoundFilledIcon.stories.tsx @@ -0,0 +1,31 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { QuestionMarkRoundFilledIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/QuestionMarkRoundFilledIcon', + component: QuestionMarkRoundFilledIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => ( + + ), + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/QuestionMarkRoundIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/QuestionMarkRoundIcon.stories.tsx new file mode 100644 index 0000000..3ce8a42 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/QuestionMarkRoundIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { QuestionMarkRoundIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/QuestionMarkRoundIcon', + component: QuestionMarkRoundIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/RefreshIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/RefreshIcon.stories.tsx new file mode 100644 index 0000000..38a8006 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/RefreshIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { RefreshIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/RefreshIcon', + component: RefreshIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/RocketIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/RocketIcon.stories.tsx new file mode 100644 index 0000000..13dc988 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/RocketIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { RocketIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/RocketIcon', + component: RocketIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/SearchIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/SearchIcon.stories.tsx new file mode 100644 index 0000000..8c6eb82 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/SearchIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { SearchIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/SearchIcon', + component: SearchIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/SettingsSlidersIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/SettingsSlidersIcon.stories.tsx new file mode 100644 index 0000000..ed9c745 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/SettingsSlidersIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { SettingsSlidersIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/SettingsSlidersIcon', + component: SettingsSlidersIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/SnowballIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/SnowballIcon.stories.tsx new file mode 100644 index 0000000..ce42ded --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/SnowballIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { SnowballIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/SnowballIcon', + component: SnowballIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/StorageIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/StorageIcon.stories.tsx new file mode 100644 index 0000000..0dc8e35 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/StorageIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { StorageIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/StorageIcon', + component: StorageIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/TrendingIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/TrendingIcon.stories.tsx new file mode 100644 index 0000000..25406e5 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/TrendingIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { TrendingIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/TrendingIcon', + component: TrendingIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/UndoIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/UndoIcon.stories.tsx new file mode 100644 index 0000000..6512048 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/UndoIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { UndoIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/UndoIcon', + component: UndoIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/WarningDiamondIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/WarningDiamondIcon.stories.tsx new file mode 100644 index 0000000..a4b336a --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/WarningDiamondIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { WarningDiamondIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/WarningDiamondIcon', + component: WarningDiamondIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/WarningIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/WarningIcon.stories.tsx new file mode 100644 index 0000000..ef0c381 --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/WarningIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { WarningIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/WarningIcon', + component: WarningIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/Icons/WarningTriangleIcon.stories.tsx b/packages/frontend/src/stories/Components/Icons/WarningTriangleIcon.stories.tsx new file mode 100644 index 0000000..41d1c4d --- /dev/null +++ b/packages/frontend/src/stories/Components/Icons/WarningTriangleIcon.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { WarningTriangleIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Icons/WarningTriangleIcon', + component: WarningTriangleIcon, + tags: ['autodocs'], + argTypes: { + size: { + control: 'text', + }, + name: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ size, name }) => , + args: { + size: '24px', + name: 'plus', + }, +}; diff --git a/packages/frontend/src/stories/Components/InlineNotification.stories.tsx b/packages/frontend/src/stories/Components/InlineNotification.stories.tsx new file mode 100644 index 0000000..a96b8f7 --- /dev/null +++ b/packages/frontend/src/stories/Components/InlineNotification.stories.tsx @@ -0,0 +1,89 @@ +import { StoryObj, Meta } from '@storybook/react'; +import { PlusIcon } from 'components/shared/CustomIcon'; + +import { InlineNotification } from 'components/shared/InlineNotification'; + +const inlineNotificationVariants = [ + 'info', + 'danger', + 'warning', + 'success', + 'generic', +]; +const inlineNotificationSizes = ['md', 'sm']; + +const meta: Meta = { + title: 'Components/InlineNotification', + component: InlineNotification, + tags: ['autodocs'], + argTypes: { + title: { + control: 'text', + }, + description: { + control: 'text', + }, + icon: { + control: 'object', + }, + variant: { + control: 'select', + options: inlineNotificationVariants, + }, + size: { + control: 'select', + options: inlineNotificationSizes, + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ title, description, icon, variant, ...args }) => ( + + ), + args: { + title: 'title is required', + variant: 'generic', + size: 'md', + }, +}; + +export const WithDescription: Story = { + render: ({ title, description, icon, ...args }) => ( + + ), + args: { + ...Default.args, + description: 'string', + }, +}; + +export const WithIcon: Story = { + render: ({ title, description, icon, ...args }) => ( + + ), + args: { + ...Default.args, + icon: , + }, +}; diff --git a/packages/frontend/src/stories/Components/Input.stories.tsx b/packages/frontend/src/stories/Components/Input.stories.tsx new file mode 100644 index 0000000..907042d --- /dev/null +++ b/packages/frontend/src/stories/Components/Input.stories.tsx @@ -0,0 +1,123 @@ +import { StoryObj, Meta } from '@storybook/react'; + +import { Input } from 'components/shared/Input'; +import { PlusIcon } from 'components/shared/CustomIcon'; + +const meta: Meta = { + title: 'Components/Input', + component: Input, + tags: ['autodocs'], + argTypes: { + label: { + control: 'text', + }, + description: { + control: 'text', + }, + helperText: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ label, description, leftIcon, rightIcon, helperText }) => ( + + ), +}; + +export const WithLeftIcon: Story = { + render: ({ label, description, leftIcon }) => ( + + ), + args: { + ...Default.args, + leftIcon: , + }, +}; + +export const WithRightIcon: Story = { + render: ({ label, description, rightIcon }) => ( + + ), + args: { + ...Default.args, + rightIcon: , + }, +}; + +export const WithLeftAndRightIcon: Story = { + render: ({ label, description, leftIcon, rightIcon }) => ( + + ), + args: { + ...Default.args, + leftIcon: , + rightIcon: , + }, +}; + +export const WithDescription: Story = { + render: ({ label, description }) => ( + + ), + args: { + ...Default.args, + description: 'description', + }, +}; + +export const WithHelperText: Story = { + render: ({ helperText }) => , + args: { + ...Default.args, + helperText: 'helper text', + }, +}; + +export const WithLabel: Story = { + render: ({ label }) => , + args: { + ...Default.args, + label: 'label', + }, +}; + +export const WithPlaceholder: Story = { + render: ({ placeholder }) => , + args: { + ...Default.args, + placeholder: 'placeholder', + }, +}; + +export const WithValue: Story = { + render: ({ value }) => , + args: { + ...Default.args, + value: 'Value', + }, +}; + +export const WithDisabled: Story = { + render: ({ disabled }) => , + args: { + ...Default.args, + disabled: true, + }, +}; diff --git a/packages/frontend/src/stories/Components/Modal.stories.tsx b/packages/frontend/src/stories/Components/Modal.stories.tsx new file mode 100644 index 0000000..3d3d4ed --- /dev/null +++ b/packages/frontend/src/stories/Components/Modal.stories.tsx @@ -0,0 +1,36 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { Modal } from 'components/shared/Modal'; +import { Button } from 'components/shared/Button'; + +const meta: Meta = { + component: Modal, + title: 'Components/Modal', + tags: ['autodocs'], + argTypes: {}, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: () => { + return ( + + + + + + Modal title + +

Modal content

+ + + + + + + ); + }, +}; diff --git a/packages/frontend/src/stories/Components/OverflownText.stories.tsx b/packages/frontend/src/stories/Components/OverflownText.stories.tsx new file mode 100644 index 0000000..63a3163 --- /dev/null +++ b/packages/frontend/src/stories/Components/OverflownText.stories.tsx @@ -0,0 +1,33 @@ +import { StoryObj, Meta } from '@storybook/react'; + +import { OverflownText } from 'components/shared/OverflownText'; + +const meta: Meta = { + title: 'Components/OverflownText', + component: OverflownText, + tags: ['autodocs'], + argTypes: { + content: { + control: 'text', + }, + children: { + control: 'text', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ children, content }) => ( + {children} + ), + args: { + children: + 'This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. ', + content: + 'This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. This is an overflown text. ', + }, +}; diff --git a/packages/frontend/src/stories/Components/SegmentedControls.stories.tsx b/packages/frontend/src/stories/Components/SegmentedControls.stories.tsx new file mode 100644 index 0000000..4deb044 --- /dev/null +++ b/packages/frontend/src/stories/Components/SegmentedControls.stories.tsx @@ -0,0 +1,38 @@ +import { StoryObj, Meta } from '@storybook/react'; + +import { SegmentedControls } from 'components/shared/SegmentedControls'; + +const meta: Meta = { + title: 'Components/SegmentedControls', + component: SegmentedControls, + tags: ['autodocs'], + argTypes: { + options: { + control: 'object', + }, + value: { + control: 'text', + }, + onChange: { + action: 'onChange', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ options, value, onChange }) => ( + + ), + args: { + options: [ + { label: 'Option 1', value: '1' }, + { label: 'Option 2', value: '2' }, + { label: 'Option 3', value: '3' }, + ], + value: '1', + }, +}; diff --git a/packages/frontend/src/stories/Components/Select.stories.tsx b/packages/frontend/src/stories/Components/Select.stories.tsx new file mode 100644 index 0000000..488f671 --- /dev/null +++ b/packages/frontend/src/stories/Components/Select.stories.tsx @@ -0,0 +1,105 @@ +import { StoryObj, Meta } from '@storybook/react'; + +import { Select } from 'components/shared/Select'; + +const meta: Meta = { + title: 'Components/Select', + component: Select, + tags: ['autodocs'], + argTypes: { + options: { + control: 'object', + }, + label: { + control: 'text', + }, + description: { + control: 'text', + }, + multiple: { + control: 'boolean', + }, + searchable: { + control: 'boolean', + }, + clearable: { + control: 'boolean', + }, + leftIcon: { + control: 'text', + }, + rightIcon: { + control: 'text', + }, + helperText: { + control: 'text', + }, + hideValues: { + control: 'boolean', + }, + value: { + control: 'object', + }, + onClear: { + action: 'clear', + }, + onChange: { + action: 'change', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: ({ + options, + label, + description, + multiple, + searchable, + clearable, + leftIcon, + rightIcon, + helperText, + hideValues, + value, + onClear, + onChange, + }) => ( +