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 36ed544c..1035220a 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 805e70aa..02c372df 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 7868ecba..7669724a 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 a51f2a31..77078f8f 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 5d48298e..d9bfdfd2 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 00000000..9e214b0d --- /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 00000000..75794575 --- /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 00000000..f05e1d24 --- /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 00000000..6d8f17b4 --- /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 00000000..1218725c --- /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 00000000..7c4a5ff9 --- /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 00000000..a84c618d --- /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 00000000..e0eab680 --- /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 00000000..ed6cf924 --- /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 00000000..6f3741ee --- /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 00000000..35c8dc14 --- /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 00000000..1bf5af0a --- /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 00000000..0870ac04 --- /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 00000000..dc217884 --- /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 00000000..9346fad1 --- /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 00000000..7aba4e46 --- /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 00000000..987f4d7f --- /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 00000000..8355ce62 --- /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 00000000..7f5d083d --- /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 00000000..95106e7d --- /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 00000000..9f65f9c4 --- /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 00000000..239b975d --- /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 00000000..0cd4dec8 --- /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 00000000..c73cb39e --- /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 00000000..2b7a692c --- /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 00000000..4d08db6e --- /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 00000000..9850d00b --- /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 00000000..d9dc2231 --- /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 00000000..e5a69c0e --- /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 00000000..5b0a2af0 --- /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 00000000..3cfa9b87 --- /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 00000000..073f8b37 --- /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 00000000..eb321b9b --- /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 00000000..87553828 --- /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 00000000..71de09b5 --- /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 00000000..83a53afc --- /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 00000000..8451df52 --- /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 00000000..2768d670 --- /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 00000000..63930831 --- /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 00000000..27ba59ff --- /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 00000000..cc0b0f8b --- /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 00000000..acbec55e --- /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 00000000..454ed3d5 --- /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 00000000..baea62bc --- /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 00000000..63d4b016 --- /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 00000000..2a743f44 --- /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 00000000..e6b49140 --- /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 00000000..de89ac93 --- /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 00000000..882985ea --- /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 00000000..bc799ebe --- /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 00000000..3710efac --- /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 00000000..85d3a587 --- /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 00000000..59a0cd0f --- /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 00000000..262bdf53 --- /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 00000000..50e4cac1 --- /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 00000000..65f2c9c8 --- /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 00000000..ec05322f --- /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 00000000..697c3ae7 --- /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 00000000..333ebaa2 --- /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 00000000..9a4260ca --- /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 00000000..f834e962 --- /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 00000000..3ce8a42e --- /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 00000000..38a80063 --- /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 00000000..13dc9888 --- /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 00000000..8c6eb826 --- /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 00000000..ed9c7455 --- /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 00000000..ce42ded4 --- /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 00000000..0dc8e35b --- /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 00000000..25406e51 --- /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 00000000..65120489 --- /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 00000000..a4b336aa --- /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 00000000..ef0c3816 --- /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 00000000..41d1c4da --- /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 00000000..a96b8f7d --- /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 00000000..907042d9 --- /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 00000000..3d3d4edc --- /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 00000000..63a31639 --- /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 00000000..4deb0447 --- /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 00000000..488f6717 --- /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, + }) => ( +