From 9c81312c5e53c2e6fbb7788a0a517a1578804fd8 Mon Sep 17 00:00:00 2001 From: Vrunda Kansara Date: Fri, 6 Sep 2024 14:50:18 +0530 Subject: [PATCH] Alert and inout field --- src/components/alert/alert.jsx | 2 +- src/components/alert/alert.stories.js | 149 ++++++++++++++++++ src/components/badge/badge.stories.js | 2 +- src/components/button/button.stories.js | 39 ++++- src/components/container/container.jsx | 2 +- src/components/toaster/toaster.jsx | 2 +- src/components/toaster/utils.jsx | 4 +- .../input-field/input-field.stories.js | 118 ++++++++++++++ 8 files changed, 311 insertions(+), 7 deletions(-) create mode 100644 src/components/alert/alert.stories.js create mode 100644 src/molecules/input-field/input-field.stories.js diff --git a/src/components/alert/alert.jsx b/src/components/alert/alert.jsx index a02a7459..84cab658 100644 --- a/src/components/alert/alert.jsx +++ b/src/components/alert/alert.jsx @@ -1,4 +1,4 @@ -import { cn } from '@/utilities/functions'; +import { cn } from '../../utilities/functions'; import { getIcon, getAction, getContent, getTitle } from '../toaster/utils'; import { X } from 'lucide-react'; diff --git a/src/components/alert/alert.stories.js b/src/components/alert/alert.stories.js new file mode 100644 index 00000000..22ee82a1 --- /dev/null +++ b/src/components/alert/alert.stories.js @@ -0,0 +1,149 @@ +import Alert from './alert.jsx'; +import { fn } from '@storybook/test'; + +// Alert component story configuration +export default { + title: 'Components/Alert', + component: Alert, + parameters: { + layout: 'centered', + }, + tags: [ 'autodocs' ], + argTypes: { + variant: { + name: 'Variant', + description: 'Defines the style variant of the badge.', + control: 'select', + options: [ 'neutral', 'red', 'yellow', 'green', 'blue', 'inverse' ], + table: { + type: { summary: 'string' }, + defaultValue: { summary: 'neutral' }, + }, + }, + size: { + name: 'Size', + description: 'Defines the size of the badge.', + control: 'select', + options: [ 'xs', 'sm', 'md', 'lg' ], + table: { + type: { summary: 'string' }, + defaultValue: { summary: 'md' }, + }, + }, + type: { + name: 'Type', + description: 'Defines the type of the badge.', + control: 'select', + options: [ 'pill', 'rounded' ], + table: { + type: { summary: 'string' }, + defaultValue: { summary: 'pill' }, + }, + }, + disabled: { + name: 'Disabled', + description: 'Defines if the badge is disabled.', + control: 'boolean', + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: 'false' }, + }, + }, + closable: { + name: 'Clasable', + description: 'Defines if the badge is closable.', + control: 'boolean', + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: 'true' }, + }, + }, + label: { control: 'text', defaultValue: 'Badge' }, + }, +}; + +// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args +export const Neutral = { + args: { + variant: 'neutral', + children: 'Badge', + type: 'pill', + size: 'sm', + label: 'Badge', + onClose: fn(), + onMouseDown: fn(), + }, +}; + +export const Disabled = { + args: { + variant: 'neutral', + children: 'Badge', + type: 'pill', + size: 'sm', + label: 'Badge', + onClose: fn(), + onMouseDown: fn(), + disabled: true, + }, +}; + +export const Red = { + args: { + variant: 'red', + children: 'Badge', + type: 'rounded', + size: 'sm', + label: 'Badge', + onClose: fn(), + onMouseDown: fn(), + }, +}; + +export const Yellow = { + args: { + variant: 'yellow', + children: 'Badge', + type: 'rounded', + size: 'sm', + label: 'Badge', + onClose: fn(), + onMouseDown: fn(), + }, +}; + +export const Green = { + args: { + variant: 'green', + children: 'Badge', + type: 'rounded', + size: 'sm', + label: 'Badge', + onClose: fn(), + onMouseDown: fn(), + }, +}; + +export const Blue = { + args: { + variant: 'blue', + children: 'Badge', + type: 'rounded', + size: 'sm', + label: 'Badge', + onClose: fn(), + onMouseDown: fn(), + }, +}; + +export const Inverse = { + args: { + variant: 'inverse', + children: 'Badge', + type: 'rounded', + size: 'sm', + label: 'Badge', + onClose: fn(), + onMouseDown: fn(), + }, +}; diff --git a/src/components/badge/badge.stories.js b/src/components/badge/badge.stories.js index 96a14360..22f55077 100644 --- a/src/components/badge/badge.stories.js +++ b/src/components/badge/badge.stories.js @@ -3,7 +3,7 @@ import { fn } from '@storybook/test'; // Badge component story configuration export default { - title: 'Components/Badge', + title: 'Atoms/Badge', component: Badge, parameters: { layout: 'centered', diff --git a/src/components/button/button.stories.js b/src/components/button/button.stories.js index f7cfd7d3..0c8f75f8 100644 --- a/src/components/button/button.stories.js +++ b/src/components/button/button.stories.js @@ -1,8 +1,9 @@ import Button from './button.jsx'; +import { Plus } from 'lucide-react'; // Button component story configuration export default { - title: 'Components/Button', + title: 'Atoms/Button', component: Button, parameters: { layout: 'centered', @@ -87,6 +88,42 @@ export const Primary = { args: { variant: 'primary', children: 'Button', + icon: , + iconPosition: 'left', }, }; +export const Disabled = { + args: { + ...Primary.args, + disabled: true, + }, +}; + +export const Secondary = { + args: { + ...Primary.args, + variant: 'secondary', + }, +}; + +export const Ghost = { + args: { + ...Primary.args, + variant: 'ghost', + }, +}; + +export const Outline = { + args: { + ...Primary.args, + variant: 'outline', + }, +}; + +export const Link = { + args: { + ...Primary.args, + variant: 'link', + }, +}; diff --git a/src/components/container/container.jsx b/src/components/container/container.jsx index 5ed1d730..4b01a874 100644 --- a/src/components/container/container.jsx +++ b/src/components/container/container.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { cn } from '@/utilities/functions'; +import { cn } from '../../utilities/functions'; const Container = ( props ) => { const { diff --git a/src/components/toaster/toaster.jsx b/src/components/toaster/toaster.jsx index 49db31f5..18f05eb1 100644 --- a/src/components/toaster/toaster.jsx +++ b/src/components/toaster/toaster.jsx @@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react'; import { X } from 'lucide-react'; import { ToastState } from './controller'; import { withSingleton } from '@/hoc'; -import { cn } from '@/utilities/functions'; +import { cn } from '../../utilities/functions'; import { getIcon, getAction, getContent, getTitle } from './utils'; import { closeIconClassNames, diff --git a/src/components/toaster/utils.jsx b/src/components/toaster/utils.jsx index e1515c04..525ea00e 100644 --- a/src/components/toaster/utils.jsx +++ b/src/components/toaster/utils.jsx @@ -1,7 +1,7 @@ import { cloneElement, isValidElement } from 'react'; import { Check, Info, AlertTriangle, Trash2 } from 'lucide-react'; -import { cn } from '@/utilities/functions'; -import Button from '@/components/button'; +import { cn } from '../../utilities/functions'; +import Button from '../button/button.jsx'; const DEFAULT_THEME = 'light'; const DEFAULT_VARIANT = 'neutral'; diff --git a/src/molecules/input-field/input-field.stories.js b/src/molecules/input-field/input-field.stories.js new file mode 100644 index 00000000..1292cbbf --- /dev/null +++ b/src/molecules/input-field/input-field.stories.js @@ -0,0 +1,118 @@ +import Label from '../../components/label/label.jsx'; +import Input from '../../components/input/input.jsx'; +import TextArea from '../../components/textarea/textarea.jsx'; +import Container from '../../components/container/container.jsx'; +import { Info } from 'lucide-react'; + +export const InputField = { + render: () => ( +
+ + + + + +
+ ) +}; + +export const TextAreaField = { + render: () => ( +
+ + +