From 5341e6a8d4c4e10cee4f3b56c9c7b111500e389e Mon Sep 17 00:00:00 2001 From: Ishaan28malik Date: Sat, 6 Apr 2024 18:12:52 +0530 Subject: [PATCH 1/6] feat: added storybook components --- packages/ui/src/components/molecules/index.ts | 1 + .../ui/src/stories/atoms/Chip.stories.tsx | 19 +++++++++ .../src/stories/atoms/Container.stories.tsx | 39 ++++++++++++++++++ .../ui/src/stories/atoms/Divider.stories.tsx | 2 + .../stories/atoms/InformationBox.stories.tsx | 21 ++++++++++ .../atoms/LeanBoxContainer.stories.tsx | 6 ++- .../stories/atoms/NoSearchResult.stories.tsx | 20 +++++++++ .../ui/src/stories/atoms/Select.stories.tsx | 6 ++- .../ui/src/stories/atoms/ShowMore.stories.tsx | 18 ++++++++ .../atoms/SummaryContainer.stories.tsx | 20 +++++++++ packages/ui/src/stories/atoms/Tag.stories.tsx | 6 ++- .../ui/src/stories/atoms/Tooltip.stories.tsx | 35 ++++++++++++++++ .../stories/atoms/VerticalLine.stories.tsx | 19 +++++++++ .../ui/src/stories/atoms/Video.stories.tsx | 22 ++++++++++ .../stories/molecules/Breadcrumb.stories.tsx | 31 ++++++++++++++ .../stories/molecules/ButtonGroup.stories.tsx | 35 ++++++++++++++++ .../stories/molecules/Calendar.stories.tsx | 16 ++++++++ .../stories/molecules/Dropdown.stories.tsx | 1 + .../src/stories/molecules/Filter.stories.tsx | 33 +++++++++++++++ .../molecules/FloatContainer.stories.tsx | 20 +++++++++ .../molecules/JoystickInteraction.stories.tsx | 16 ++++++++ .../stories/molecules/LineGraph.stories.tsx | 41 +++++++++++++++++++ .../stories/molecules/Markdown.stories.tsx | 18 ++++++++ .../NotificationGroupHeader.stories.tsx | 18 ++++++++ .../Notification/NotificationItem.stories.tsx | 20 +++++++++ .../molecules/OnboardingLayout.stories.tsx | 20 +++++++++ .../molecules/Prefabs/BackButton.stories.tsx | 18 ++++++++ .../Prefabs/EmailDisplay.stories.tsx | 18 ++++++++ .../molecules/Prefabs/HelpButton.stories.tsx | 18 ++++++++ .../Prefabs/QuestionMarkButton.stories.tsx | 16 ++++++++ .../molecules/ProgressLine.stories.tsx | 16 ++++++++ .../stories/molecules/SideBarItem.stories.tsx | 19 +++++++++ .../molecules/SkeletonLoader.stories.tsx | 22 ++++++++++ .../src/stories/molecules/Slider.stories.tsx | 30 ++++++++++++++ .../stories/molecules/SnackBar.stories.tsx | 20 +++++++++ .../stories/molecules/SummaryBox.stories.tsx | 34 +++++++++++++++ .../molecules/Tables/Accordion.stories.tsx | 40 ++++++++++++++++++ .../Tables/AllocationShare.stories.tsx | 19 +++++++++ .../molecules/Tables/Table.stories.tsx | 16 ++++++++ .../Tables/TableMutedTextBox.stories.tsx | 18 ++++++++ .../molecules/Tables/TableNoData.stories.tsx | 20 +++++++++ .../molecules/Tables/TableSearch.stories.tsx | 18 ++++++++ .../Tables/TableSearchFilter.stories.tsx | 18 ++++++++ .../ui/src/stories/molecules/Tabs.stories.tsx | 32 +++++++++++++++ .../src/stories/molecules/Topbar.stories.tsx | 12 ++++++ .../molecules/send/FeesInput.stories.tsx | 16 ++++++++ .../molecules/send/FeesSlider.stories.tsx | 21 ++++++++++ .../send/RecipientAddress.stories.tsx | 16 ++++++++ .../molecules/send/ToggleSection.stories.tsx | 19 +++++++++ 49 files changed, 976 insertions(+), 3 deletions(-) create mode 100644 packages/ui/src/stories/atoms/Chip.stories.tsx create mode 100644 packages/ui/src/stories/atoms/Container.stories.tsx create mode 100644 packages/ui/src/stories/atoms/InformationBox.stories.tsx create mode 100644 packages/ui/src/stories/atoms/NoSearchResult.stories.tsx create mode 100644 packages/ui/src/stories/atoms/ShowMore.stories.tsx create mode 100644 packages/ui/src/stories/atoms/SummaryContainer.stories.tsx create mode 100644 packages/ui/src/stories/atoms/Tooltip.stories.tsx create mode 100644 packages/ui/src/stories/atoms/VerticalLine.stories.tsx create mode 100644 packages/ui/src/stories/atoms/Video.stories.tsx create mode 100644 packages/ui/src/stories/molecules/Breadcrumb.stories.tsx create mode 100644 packages/ui/src/stories/molecules/ButtonGroup.stories.tsx create mode 100644 packages/ui/src/stories/molecules/Calendar.stories.tsx create mode 100644 packages/ui/src/stories/molecules/Filter.stories.tsx create mode 100644 packages/ui/src/stories/molecules/FloatContainer.stories.tsx create mode 100644 packages/ui/src/stories/molecules/JoystickInteraction.stories.tsx create mode 100644 packages/ui/src/stories/molecules/LineGraph.stories.tsx create mode 100644 packages/ui/src/stories/molecules/Markdown.stories.tsx create mode 100644 packages/ui/src/stories/molecules/Notification/NotificationGroupHeader.stories.tsx create mode 100644 packages/ui/src/stories/molecules/Notification/NotificationItem.stories.tsx create mode 100644 packages/ui/src/stories/molecules/OnboardingLayout.stories.tsx create mode 100644 packages/ui/src/stories/molecules/Prefabs/BackButton.stories.tsx create mode 100644 packages/ui/src/stories/molecules/Prefabs/EmailDisplay.stories.tsx create mode 100644 packages/ui/src/stories/molecules/Prefabs/HelpButton.stories.tsx create mode 100644 packages/ui/src/stories/molecules/Prefabs/QuestionMarkButton.stories.tsx create mode 100644 packages/ui/src/stories/molecules/ProgressLine.stories.tsx create mode 100644 packages/ui/src/stories/molecules/SideBarItem.stories.tsx create mode 100644 packages/ui/src/stories/molecules/SkeletonLoader.stories.tsx create mode 100644 packages/ui/src/stories/molecules/Slider.stories.tsx create mode 100644 packages/ui/src/stories/molecules/SnackBar.stories.tsx create mode 100644 packages/ui/src/stories/molecules/SummaryBox.stories.tsx create mode 100644 packages/ui/src/stories/molecules/Tables/Accordion.stories.tsx create mode 100644 packages/ui/src/stories/molecules/Tables/AllocationShare.stories.tsx create mode 100644 packages/ui/src/stories/molecules/Tables/Table.stories.tsx create mode 100644 packages/ui/src/stories/molecules/Tables/TableMutedTextBox.stories.tsx create mode 100644 packages/ui/src/stories/molecules/Tables/TableNoData.stories.tsx create mode 100644 packages/ui/src/stories/molecules/Tables/TableSearch.stories.tsx create mode 100644 packages/ui/src/stories/molecules/Tables/TableSearchFilter.stories.tsx create mode 100644 packages/ui/src/stories/molecules/Tabs.stories.tsx create mode 100644 packages/ui/src/stories/molecules/send/FeesInput.stories.tsx create mode 100644 packages/ui/src/stories/molecules/send/FeesSlider.stories.tsx create mode 100644 packages/ui/src/stories/molecules/send/RecipientAddress.stories.tsx create mode 100644 packages/ui/src/stories/molecules/send/ToggleSection.stories.tsx diff --git a/packages/ui/src/components/molecules/index.ts b/packages/ui/src/components/molecules/index.ts index 242f21b15..afc51b5fd 100644 --- a/packages/ui/src/components/molecules/index.ts +++ b/packages/ui/src/components/molecules/index.ts @@ -27,6 +27,7 @@ export * from './Milestone'; export * from './Notification'; export * from './Prefabs'; export * from './ProgressBar'; +export * from './ProgressLine'; export * from './Send'; export * from './SideBar'; export * from './SkeletonLoader'; diff --git a/packages/ui/src/stories/atoms/Chip.stories.tsx b/packages/ui/src/stories/atoms/Chip.stories.tsx new file mode 100644 index 000000000..5dd21b9f3 --- /dev/null +++ b/packages/ui/src/stories/atoms/Chip.stories.tsx @@ -0,0 +1,19 @@ +import type { StoryObj, Meta } from '@storybook/react'; + +import { Chip } from '../../components'; // Assuming your Chip component is in a file named Chip.tsx + +const meta: Meta = { + component: Chip, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + children: 'Chip Box', + p: 2, + }, +}; diff --git a/packages/ui/src/stories/atoms/Container.stories.tsx b/packages/ui/src/stories/atoms/Container.stories.tsx new file mode 100644 index 000000000..9decd8762 --- /dev/null +++ b/packages/ui/src/stories/atoms/Container.stories.tsx @@ -0,0 +1,39 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { Container } from '../../components/atoms'; + +const meta: Meta = { + component: Container, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + $noFlex: false, + size: 'lg', + $bgColor: 'white', + p: '10', + children: 'This is the container ', + }, +}; + +export const FlexGapContainer: Story = { + args: { + ...Default.args, + $noFlex: false, + gap: 32, + }, +}; + +export const BatchContainer: Story = { + args: { + ...Default.args, + p: '16', + $borderRadius: 8, + $width: '100%', + }, +}; diff --git a/packages/ui/src/stories/atoms/Divider.stories.tsx b/packages/ui/src/stories/atoms/Divider.stories.tsx index 31407e3c5..4b2db4cb2 100644 --- a/packages/ui/src/stories/atoms/Divider.stories.tsx +++ b/packages/ui/src/stories/atoms/Divider.stories.tsx @@ -14,10 +14,12 @@ type Story = StoryObj; export const Vertical: Story = { args: { variant: 'vertical', + $bgColor: 'white', }, }; export const Horizontal: Story = { args: { + ...Vertical, variant: 'horizontal', }, }; diff --git a/packages/ui/src/stories/atoms/InformationBox.stories.tsx b/packages/ui/src/stories/atoms/InformationBox.stories.tsx new file mode 100644 index 000000000..acc880413 --- /dev/null +++ b/packages/ui/src/stories/atoms/InformationBox.stories.tsx @@ -0,0 +1,21 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { InformationBox } from '../../components/atoms'; + +const meta: Meta = { + component: InformationBox, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + $backgroundColor: undefined, + $borderColor: undefined, + rightImage: undefined, + text: 'This is the info box', + }, +}; diff --git a/packages/ui/src/stories/atoms/LeanBoxContainer.stories.tsx b/packages/ui/src/stories/atoms/LeanBoxContainer.stories.tsx index e515dcb46..b5bd948ed 100644 --- a/packages/ui/src/stories/atoms/LeanBoxContainer.stories.tsx +++ b/packages/ui/src/stories/atoms/LeanBoxContainer.stories.tsx @@ -11,4 +11,8 @@ export default meta; type Story = StoryObj; -export const Default: Story = {}; +export const Default: Story = { + args: { + children: 'Hello world', + }, +}; diff --git a/packages/ui/src/stories/atoms/NoSearchResult.stories.tsx b/packages/ui/src/stories/atoms/NoSearchResult.stories.tsx new file mode 100644 index 000000000..ef266bb7a --- /dev/null +++ b/packages/ui/src/stories/atoms/NoSearchResult.stories.tsx @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { NoSearchResult } from '../../components/atoms'; + +const meta: Meta = { + component: NoSearchResult, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + subText: 'Go to Home', + searchText: 'Result not found', + text: 'text', + }, +}; diff --git a/packages/ui/src/stories/atoms/Select.stories.tsx b/packages/ui/src/stories/atoms/Select.stories.tsx index 4ae31ea2f..a98ddff3b 100644 --- a/packages/ui/src/stories/atoms/Select.stories.tsx +++ b/packages/ui/src/stories/atoms/Select.stories.tsx @@ -11,4 +11,8 @@ export default meta; type Story = StoryObj; -export const Default: Story = {}; +export const Default: Story = { + args: { + children: 'Select Component', + }, +}; diff --git a/packages/ui/src/stories/atoms/ShowMore.stories.tsx b/packages/ui/src/stories/atoms/ShowMore.stories.tsx new file mode 100644 index 000000000..19c489f50 --- /dev/null +++ b/packages/ui/src/stories/atoms/ShowMore.stories.tsx @@ -0,0 +1,18 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { ShowMore } from '../../components/atoms'; + +const meta: Meta = { + component: ShowMore, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + text: 'Show More', + }, +}; diff --git a/packages/ui/src/stories/atoms/SummaryContainer.stories.tsx b/packages/ui/src/stories/atoms/SummaryContainer.stories.tsx new file mode 100644 index 000000000..2bc345107 --- /dev/null +++ b/packages/ui/src/stories/atoms/SummaryContainer.stories.tsx @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { SummaryContainer } from '../../components/atoms'; + +const meta: Meta = { + component: SummaryContainer, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + margin: undefined, + leftComponent: undefined, + rightComponent: undefined, + }, +}; diff --git a/packages/ui/src/stories/atoms/Tag.stories.tsx b/packages/ui/src/stories/atoms/Tag.stories.tsx index 84c10b4de..4511bd248 100644 --- a/packages/ui/src/stories/atoms/Tag.stories.tsx +++ b/packages/ui/src/stories/atoms/Tag.stories.tsx @@ -11,4 +11,8 @@ export default meta; type Story = StoryObj; -export const Default: Story = {}; +export const Default: Story = { + args: { + children: 'tag 1', + }, +}; diff --git a/packages/ui/src/stories/atoms/Tooltip.stories.tsx b/packages/ui/src/stories/atoms/Tooltip.stories.tsx new file mode 100644 index 000000000..aaa9f1c28 --- /dev/null +++ b/packages/ui/src/stories/atoms/Tooltip.stories.tsx @@ -0,0 +1,35 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; + +import { Tooltip } from '../../components/atoms/Tooltip'; + +const meta: Meta = { + component: Tooltip, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + isActive: true, + text: undefined, + children: Base Comp, + }, +}; + +export const TopTooltip: Story = { + args: { + ...Default.args, + tooltipPlacement: 'top', + }, +}; + +export const BottomTooltip: Story = { + args: { + ...Default.args, + tooltipPlacement: 'bottom', + }, +}; diff --git a/packages/ui/src/stories/atoms/VerticalLine.stories.tsx b/packages/ui/src/stories/atoms/VerticalLine.stories.tsx new file mode 100644 index 000000000..f4547f247 --- /dev/null +++ b/packages/ui/src/stories/atoms/VerticalLine.stories.tsx @@ -0,0 +1,19 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { VerticalLine } from '../../components/atoms'; + +const meta: Meta = { + component: VerticalLine, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + $borderStyle: 'dotted', + height: 40, + }, +}; diff --git a/packages/ui/src/stories/atoms/Video.stories.tsx b/packages/ui/src/stories/atoms/Video.stories.tsx new file mode 100644 index 000000000..8691a88c6 --- /dev/null +++ b/packages/ui/src/stories/atoms/Video.stories.tsx @@ -0,0 +1,22 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { Video } from '../../components/atoms'; + +const meta: Meta = { + component: Video, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + autoPlay: true, + loop: true, + controls: true, + $aspectRatio: 'auto', + src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4', + }, +}; diff --git a/packages/ui/src/stories/molecules/Breadcrumb.stories.tsx b/packages/ui/src/stories/molecules/Breadcrumb.stories.tsx new file mode 100644 index 000000000..c2079133c --- /dev/null +++ b/packages/ui/src/stories/molecules/Breadcrumb.stories.tsx @@ -0,0 +1,31 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { Breadcrumb } from '../../components'; + +const meta: Meta = { + component: Breadcrumb, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + items: [ + { + id: '1', + text: 'First', + }, + { + id: '2', + text: 'Second', + }, + { + id: '3', + text: 'Third', + }, + ], + }, +}; diff --git a/packages/ui/src/stories/molecules/ButtonGroup.stories.tsx b/packages/ui/src/stories/molecules/ButtonGroup.stories.tsx new file mode 100644 index 000000000..7ece474d4 --- /dev/null +++ b/packages/ui/src/stories/molecules/ButtonGroup.stories.tsx @@ -0,0 +1,35 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { PillButtonToggle } from '../../components'; + +const meta: Meta = { + component: PillButtonToggle, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Info: Story = { + args: { + type: 'info', + buttons: [ + { + id: 1, + label: 'first', + type: 'info', + }, + { + id: 2, + label: 'second', + type: 'primary', + }, + { + id: 3, + label: 'third', + type: 'info', + }, + ], + }, +}; diff --git a/packages/ui/src/stories/molecules/Calendar.stories.tsx b/packages/ui/src/stories/molecules/Calendar.stories.tsx new file mode 100644 index 000000000..498e2707b --- /dev/null +++ b/packages/ui/src/stories/molecules/Calendar.stories.tsx @@ -0,0 +1,16 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { Calendar } from '../../components'; + +const meta: Meta = { + component: Calendar, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Info: Story = { + args: {}, +}; diff --git a/packages/ui/src/stories/molecules/Dropdown.stories.tsx b/packages/ui/src/stories/molecules/Dropdown.stories.tsx index 6605de0db..7d4f66c58 100644 --- a/packages/ui/src/stories/molecules/Dropdown.stories.tsx +++ b/packages/ui/src/stories/molecules/Dropdown.stories.tsx @@ -13,6 +13,7 @@ type Story = StoryObj; export const Default: Story = { args: { + placeholderText: 'Placeholder', items: [ { text: 'This is item 1', diff --git a/packages/ui/src/stories/molecules/Filter.stories.tsx b/packages/ui/src/stories/molecules/Filter.stories.tsx new file mode 100644 index 000000000..5ee07a55d --- /dev/null +++ b/packages/ui/src/stories/molecules/Filter.stories.tsx @@ -0,0 +1,33 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { Filter } from '../../components'; + +const meta: Meta = { + component: Filter, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Info: Story = { + args: { + menu: 'Menu', + isToggled: true, + checkboxStates: [true, false], + selectedCount: 0, + subMenu: [ + { + checkType: 'first', + icon: '', + name: 'First', + }, + { + checkType: 'Second', + icon: '', + name: 'Second', + }, + ], + }, +}; diff --git a/packages/ui/src/stories/molecules/FloatContainer.stories.tsx b/packages/ui/src/stories/molecules/FloatContainer.stories.tsx new file mode 100644 index 000000000..ff4c0fc77 --- /dev/null +++ b/packages/ui/src/stories/molecules/FloatContainer.stories.tsx @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; + +import { FloatContainer } from '../../components'; + +const meta: Meta = { + component: FloatContainer, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Info: Story = { + args: { + children: This is base component, + $floatDirection: 'left', + }, +}; diff --git a/packages/ui/src/stories/molecules/JoystickInteraction.stories.tsx b/packages/ui/src/stories/molecules/JoystickInteraction.stories.tsx new file mode 100644 index 000000000..d7afc3b3c --- /dev/null +++ b/packages/ui/src/stories/molecules/JoystickInteraction.stories.tsx @@ -0,0 +1,16 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { JoystickInteraction } from '../../components'; + +const meta: Meta = { + component: JoystickInteraction, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/packages/ui/src/stories/molecules/LineGraph.stories.tsx b/packages/ui/src/stories/molecules/LineGraph.stories.tsx new file mode 100644 index 000000000..21e81fe34 --- /dev/null +++ b/packages/ui/src/stories/molecules/LineGraph.stories.tsx @@ -0,0 +1,41 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { DisplayGraph } from '../../components'; + +const meta: Meta = { + component: DisplayGraph, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Info: Story = { + args: { + title: 'Title', + color: '##351d1d', + data: [ + { + timestamp: 1, + value: 10, + }, + { + timestamp: 2, + value: 15, + }, + { + timestamp: 3, + value: 5, + }, + { + timestamp: 4, + value: 20, + }, + { + timestamp: 5, + value: 3, + }, + ], + }, +}; diff --git a/packages/ui/src/stories/molecules/Markdown.stories.tsx b/packages/ui/src/stories/molecules/Markdown.stories.tsx new file mode 100644 index 000000000..83d22c522 --- /dev/null +++ b/packages/ui/src/stories/molecules/Markdown.stories.tsx @@ -0,0 +1,18 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { Markdown } from '../../components'; + +const meta: Meta = { + component: Markdown, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Info: Story = { + args: { + children: 'Test string', + }, +}; diff --git a/packages/ui/src/stories/molecules/Notification/NotificationGroupHeader.stories.tsx b/packages/ui/src/stories/molecules/Notification/NotificationGroupHeader.stories.tsx new file mode 100644 index 000000000..61ab13d2c --- /dev/null +++ b/packages/ui/src/stories/molecules/Notification/NotificationGroupHeader.stories.tsx @@ -0,0 +1,18 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { NotificationGroupHeader } from '../../../components'; + +const meta: Meta = { + component: NotificationGroupHeader, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + text: 'Placeholder Notification text', + }, +}; diff --git a/packages/ui/src/stories/molecules/Notification/NotificationItem.stories.tsx b/packages/ui/src/stories/molecules/Notification/NotificationItem.stories.tsx new file mode 100644 index 000000000..bbd77de6a --- /dev/null +++ b/packages/ui/src/stories/molecules/Notification/NotificationItem.stories.tsx @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { NotificationContainer } from '../../../components'; + +const meta: Meta = { + component: NotificationContainer, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + title: 'Title', + count: 2, + top: 0, + }, +}; diff --git a/packages/ui/src/stories/molecules/OnboardingLayout.stories.tsx b/packages/ui/src/stories/molecules/OnboardingLayout.stories.tsx new file mode 100644 index 000000000..6385d26ea --- /dev/null +++ b/packages/ui/src/stories/molecules/OnboardingLayout.stories.tsx @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { OnboardingLayout } from '../../components'; + +const meta: Meta = { + component: OnboardingLayout, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + text: 'Placeholder', + title: 'title', + subTitle: 'subtitle', + }, +}; diff --git a/packages/ui/src/stories/molecules/Prefabs/BackButton.stories.tsx b/packages/ui/src/stories/molecules/Prefabs/BackButton.stories.tsx new file mode 100644 index 000000000..f75bc97f1 --- /dev/null +++ b/packages/ui/src/stories/molecules/Prefabs/BackButton.stories.tsx @@ -0,0 +1,18 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { BackButton } from '../../../components'; + +const meta: Meta = { + component: BackButton, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + text: 'Go back', + }, +}; diff --git a/packages/ui/src/stories/molecules/Prefabs/EmailDisplay.stories.tsx b/packages/ui/src/stories/molecules/Prefabs/EmailDisplay.stories.tsx new file mode 100644 index 000000000..83e0cf7b6 --- /dev/null +++ b/packages/ui/src/stories/molecules/Prefabs/EmailDisplay.stories.tsx @@ -0,0 +1,18 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { EmailDisplay } from '../../../components'; + +const meta: Meta = { + component: EmailDisplay, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + email: 'test@gmail.com', + }, +}; diff --git a/packages/ui/src/stories/molecules/Prefabs/HelpButton.stories.tsx b/packages/ui/src/stories/molecules/Prefabs/HelpButton.stories.tsx new file mode 100644 index 000000000..a75728b1a --- /dev/null +++ b/packages/ui/src/stories/molecules/Prefabs/HelpButton.stories.tsx @@ -0,0 +1,18 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { HelpButton } from '../../../components'; + +const meta: Meta = { + component: HelpButton, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + text: 'Help', + }, +}; diff --git a/packages/ui/src/stories/molecules/Prefabs/QuestionMarkButton.stories.tsx b/packages/ui/src/stories/molecules/Prefabs/QuestionMarkButton.stories.tsx new file mode 100644 index 000000000..69f965175 --- /dev/null +++ b/packages/ui/src/stories/molecules/Prefabs/QuestionMarkButton.stories.tsx @@ -0,0 +1,16 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { QuestionMarkButton } from '../../../components'; + +const meta: Meta = { + component: QuestionMarkButton, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/packages/ui/src/stories/molecules/ProgressLine.stories.tsx b/packages/ui/src/stories/molecules/ProgressLine.stories.tsx new file mode 100644 index 000000000..5eb5b00f9 --- /dev/null +++ b/packages/ui/src/stories/molecules/ProgressLine.stories.tsx @@ -0,0 +1,16 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { ProgressLine } from '../../components'; + +const meta: Meta = { + component: ProgressLine, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Info: Story = { + args: {}, +}; diff --git a/packages/ui/src/stories/molecules/SideBarItem.stories.tsx b/packages/ui/src/stories/molecules/SideBarItem.stories.tsx new file mode 100644 index 000000000..467ea1169 --- /dev/null +++ b/packages/ui/src/stories/molecules/SideBarItem.stories.tsx @@ -0,0 +1,19 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { SideBarItem } from '../../components'; + +const meta: Meta = { + component: SideBarItem, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Info: Story = { + args: { + text: 'Placeholder', + state: 4, + }, +}; diff --git a/packages/ui/src/stories/molecules/SkeletonLoader.stories.tsx b/packages/ui/src/stories/molecules/SkeletonLoader.stories.tsx new file mode 100644 index 000000000..2a9220d19 --- /dev/null +++ b/packages/ui/src/stories/molecules/SkeletonLoader.stories.tsx @@ -0,0 +1,22 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { SkeletonLoader } from '../../components'; + +const meta: Meta = { + component: SkeletonLoader, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Info: Story = { + args: { + text: 'Placeholder', + subText: 'SubText', + subText2: 'SubText 2', + $buttonOne: 'First', + $buttonTwo: 'Second', + }, +}; diff --git a/packages/ui/src/stories/molecules/Slider.stories.tsx b/packages/ui/src/stories/molecules/Slider.stories.tsx new file mode 100644 index 000000000..30552a6d9 --- /dev/null +++ b/packages/ui/src/stories/molecules/Slider.stories.tsx @@ -0,0 +1,30 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { Slider } from '../../components'; + +const meta: Meta = { + component: Slider, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Info: Story = { + args: { + captions: [ + { + id: 1, + name: 'First ', + }, + { + id: 2, + name: ' Second', + }, + ], + min: 0, + max: 100, + decimal: 0, + }, +}; diff --git a/packages/ui/src/stories/molecules/SnackBar.stories.tsx b/packages/ui/src/stories/molecules/SnackBar.stories.tsx new file mode 100644 index 000000000..b18337c46 --- /dev/null +++ b/packages/ui/src/stories/molecules/SnackBar.stories.tsx @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { SnackBar } from '../../components/molecules'; + +const meta: Meta = { + component: SnackBar, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Info: Story = { + args: { + icon: 'check', + buttonText: 'Placeholder Text', + text: 'String', + }, +}; diff --git a/packages/ui/src/stories/molecules/SummaryBox.stories.tsx b/packages/ui/src/stories/molecules/SummaryBox.stories.tsx new file mode 100644 index 000000000..f33abdbc4 --- /dev/null +++ b/packages/ui/src/stories/molecules/SummaryBox.stories.tsx @@ -0,0 +1,34 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { SummaryBox } from '../../components/molecules'; + +const meta: Meta = { + component: SummaryBox, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Info: Story = { + args: { + items: [ + { + id: '1', + isDivider: false, + leftText: 'First Summary', + }, + { + id: '2', + isDivider: true, + leftText: 'Second Summary', + }, + { + id: '3', + isDivider: true, + leftText: 'Third Summary', + }, + ], + }, +}; diff --git a/packages/ui/src/stories/molecules/Tables/Accordion.stories.tsx b/packages/ui/src/stories/molecules/Tables/Accordion.stories.tsx new file mode 100644 index 000000000..7d960eafc --- /dev/null +++ b/packages/ui/src/stories/molecules/Tables/Accordion.stories.tsx @@ -0,0 +1,40 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; + +import { AccordionContent } from '../../../components'; + +const meta: Meta = { + component: AccordionContent, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Info: Story = { + args: { + id: 'Accordion', + items: [ + { + component: First, + width: 50, + padding: 8, + paddingLeft: '20', + }, + { + component: Second, + width: 50, + padding: 8, + paddingLeft: '20', + }, + { + component: Third, + width: 50, + padding: 8, + paddingLeft: '20', + }, + ], + headers: ['Head1', 'Head2', 'Head3'], + }, +}; diff --git a/packages/ui/src/stories/molecules/Tables/AllocationShare.stories.tsx b/packages/ui/src/stories/molecules/Tables/AllocationShare.stories.tsx new file mode 100644 index 000000000..852f6ffd5 --- /dev/null +++ b/packages/ui/src/stories/molecules/Tables/AllocationShare.stories.tsx @@ -0,0 +1,19 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { AllocationShare } from '../../../components'; + +const meta: Meta = { + component: AllocationShare, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Info: Story = { + args: { + percentage: 30, + color: 'white', + }, +}; diff --git a/packages/ui/src/stories/molecules/Tables/Table.stories.tsx b/packages/ui/src/stories/molecules/Tables/Table.stories.tsx new file mode 100644 index 000000000..46a9030e9 --- /dev/null +++ b/packages/ui/src/stories/molecules/Tables/Table.stories.tsx @@ -0,0 +1,16 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { Table } from '../../../components'; + +const meta: Meta = { + component: Table, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/packages/ui/src/stories/molecules/Tables/TableMutedTextBox.stories.tsx b/packages/ui/src/stories/molecules/Tables/TableMutedTextBox.stories.tsx new file mode 100644 index 000000000..fd9ab832c --- /dev/null +++ b/packages/ui/src/stories/molecules/Tables/TableMutedTextBox.stories.tsx @@ -0,0 +1,18 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { TableMutedTextBox } from '../../../components'; + +const meta: Meta = { + component: TableMutedTextBox, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Info: Story = { + args: { + text: 'Placeholder', + }, +}; diff --git a/packages/ui/src/stories/molecules/Tables/TableNoData.stories.tsx b/packages/ui/src/stories/molecules/Tables/TableNoData.stories.tsx new file mode 100644 index 000000000..affb1b114 --- /dev/null +++ b/packages/ui/src/stories/molecules/Tables/TableNoData.stories.tsx @@ -0,0 +1,20 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { TableNoData } from '../../../components'; + +const meta: Meta = { + component: TableNoData, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Info: Story = { + args: { + text: 'No Data', + subText: 'Placeholder', + buttonText: 'Button', + }, +}; diff --git a/packages/ui/src/stories/molecules/Tables/TableSearch.stories.tsx b/packages/ui/src/stories/molecules/Tables/TableSearch.stories.tsx new file mode 100644 index 000000000..be606b772 --- /dev/null +++ b/packages/ui/src/stories/molecules/Tables/TableSearch.stories.tsx @@ -0,0 +1,18 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { TableSearch } from '../../../components'; + +const meta: Meta = { + component: TableSearch, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Info: Story = { + args: { + value: 'Placeholder Value', + }, +}; diff --git a/packages/ui/src/stories/molecules/Tables/TableSearchFilter.stories.tsx b/packages/ui/src/stories/molecules/Tables/TableSearchFilter.stories.tsx new file mode 100644 index 000000000..10de63b08 --- /dev/null +++ b/packages/ui/src/stories/molecules/Tables/TableSearchFilter.stories.tsx @@ -0,0 +1,18 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { TableSearchFilter } from '../../../components'; + +const meta: Meta = { + component: TableSearchFilter, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Info: Story = { + args: { + placeholder: 'Placeholder', + }, +}; diff --git a/packages/ui/src/stories/molecules/Tabs.stories.tsx b/packages/ui/src/stories/molecules/Tabs.stories.tsx new file mode 100644 index 000000000..79aff880e --- /dev/null +++ b/packages/ui/src/stories/molecules/Tabs.stories.tsx @@ -0,0 +1,32 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { Tabs } from '../../components'; + +const meta: Meta = { + component: Tabs, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Info: Story = { + args: { + tabs: [ + { + label: 'First', + content: 'First Content', + }, + { + label: 'Second', + content: 'Second Content', + }, + + { + label: 'Third', + content: 'Third Content', + }, + ], + }, +}; diff --git a/packages/ui/src/stories/molecules/Topbar.stories.tsx b/packages/ui/src/stories/molecules/Topbar.stories.tsx index 71a524111..ca61da3e7 100644 --- a/packages/ui/src/stories/molecules/Topbar.stories.tsx +++ b/packages/ui/src/stories/molecules/Topbar.stories.tsx @@ -33,6 +33,18 @@ export const Default: Story = { isLocked: false, isLockscreenLoading: false, isPasswordSet: true, + lock: () => { + console.log('Lock action'); + }, + toggleDiscreetMode: () => { + console.log('Toggling discreet mode'); + }, + onNotificationClick: () => { + console.log('Notification clicked'); + }, + onSyncClick: () => { + console.log('Sync clicked'); + }, }, }; diff --git a/packages/ui/src/stories/molecules/send/FeesInput.stories.tsx b/packages/ui/src/stories/molecules/send/FeesInput.stories.tsx new file mode 100644 index 000000000..d68ffb56f --- /dev/null +++ b/packages/ui/src/stories/molecules/send/FeesInput.stories.tsx @@ -0,0 +1,16 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { FeesInput } from '../../../components'; + +const meta: Meta = { + component: FeesInput, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/packages/ui/src/stories/molecules/send/FeesSlider.stories.tsx b/packages/ui/src/stories/molecules/send/FeesSlider.stories.tsx new file mode 100644 index 000000000..0a7802c08 --- /dev/null +++ b/packages/ui/src/stories/molecules/send/FeesSlider.stories.tsx @@ -0,0 +1,21 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { FeesSlider } from '../../../components'; + +const meta: Meta = { + component: FeesSlider, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + overrideDecimal: undefined, + error: undefined, + value: 2, + captions: [], + }, +}; diff --git a/packages/ui/src/stories/molecules/send/RecipientAddress.stories.tsx b/packages/ui/src/stories/molecules/send/RecipientAddress.stories.tsx new file mode 100644 index 000000000..cea27e3f3 --- /dev/null +++ b/packages/ui/src/stories/molecules/send/RecipientAddress.stories.tsx @@ -0,0 +1,16 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { RecipientAddress } from '../../../components'; + +const meta: Meta = { + component: RecipientAddress, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/packages/ui/src/stories/molecules/send/ToggleSection.stories.tsx b/packages/ui/src/stories/molecules/send/ToggleSection.stories.tsx new file mode 100644 index 000000000..90ea3aac0 --- /dev/null +++ b/packages/ui/src/stories/molecules/send/ToggleSection.stories.tsx @@ -0,0 +1,19 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { ToggleSection } from '../../../components'; + +const meta: Meta = { + component: ToggleSection, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + text: 'Placeholder', + value: true, + }, +}; From ba2a8d783e0cb687758ea634d7e268d80f79c731 Mon Sep 17 00:00:00 2001 From: Ishaan28malik Date: Sat, 6 Apr 2024 18:16:19 +0530 Subject: [PATCH 2/6] feat: added changeset --- .changeset/curly-clocks-warn.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/curly-clocks-warn.md diff --git a/.changeset/curly-clocks-warn.md b/.changeset/curly-clocks-warn.md new file mode 100644 index 000000000..bb1f9d923 --- /dev/null +++ b/.changeset/curly-clocks-warn.md @@ -0,0 +1,6 @@ +--- +'@cypherock/cysync-ui': patch +'@cypherock/cysync-desktop': patch +--- + +added and updated storybook ui components From 5e8611348f8837de80b51a2167fe6c251b604be0 Mon Sep 17 00:00:00 2001 From: Ishaan28malik Date: Tue, 16 Apr 2024 12:14:12 +0530 Subject: [PATCH 3/6] feat: fixes --- packages/cysync-core/src/dialogs/HistoryDialog.tsx | 1 + .../src/dialogs/Password/ChangePassword/context/index.tsx | 2 +- .../src/dialogs/Password/RemovePassword/context/index.tsx | 2 +- .../src/dialogs/Password/SetPassword/context/index.tsx | 2 +- packages/cysync-core/src/dialogs/Send/Dialogs/Recipient.tsx | 5 +++-- .../ui/src/stories/molecules/JoystickInteraction.stories.tsx | 1 + .../stories/molecules/Layouts/OnboardingLayout.stories.tsx | 1 + 7 files changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/cysync-core/src/dialogs/HistoryDialog.tsx b/packages/cysync-core/src/dialogs/HistoryDialog.tsx index 64a754dce..f0c3e86cd 100644 --- a/packages/cysync-core/src/dialogs/HistoryDialog.tsx +++ b/packages/cysync-core/src/dialogs/HistoryDialog.tsx @@ -40,6 +40,7 @@ import { useAppDispatch, useAppSelector, } from '~/store'; + import { LoaderDialog } from '../components'; export interface IHistoryDialogProps { diff --git a/packages/cysync-core/src/dialogs/Password/ChangePassword/context/index.tsx b/packages/cysync-core/src/dialogs/Password/ChangePassword/context/index.tsx index 156413c6f..a5cad5db0 100644 --- a/packages/cysync-core/src/dialogs/Password/ChangePassword/context/index.tsx +++ b/packages/cysync-core/src/dialogs/Password/ChangePassword/context/index.tsx @@ -18,8 +18,8 @@ import { useAppSelector, } from '~/store'; import { validatePassword } from '~/utils'; - import logger from '~/utils/logger'; + import { ChangePasswordSuccess, CreateNewPassword } from '../Dialogs'; export interface ChangePasswordDialogContextInterface { diff --git a/packages/cysync-core/src/dialogs/Password/RemovePassword/context/index.tsx b/packages/cysync-core/src/dialogs/Password/RemovePassword/context/index.tsx index 8d8bdac6c..ce237301d 100644 --- a/packages/cysync-core/src/dialogs/Password/RemovePassword/context/index.tsx +++ b/packages/cysync-core/src/dialogs/Password/RemovePassword/context/index.tsx @@ -17,8 +17,8 @@ import { useAppDispatch, useAppSelector, } from '~/store'; - import logger from '~/utils/logger'; + import { ConfirmPassword, RemovePasswordSuccess } from '../Dialogs'; export interface RemovePasswordDialogContextInterface { diff --git a/packages/cysync-core/src/dialogs/Password/SetPassword/context/index.tsx b/packages/cysync-core/src/dialogs/Password/SetPassword/context/index.tsx index 4270ebc0d..04e6d0ab6 100644 --- a/packages/cysync-core/src/dialogs/Password/SetPassword/context/index.tsx +++ b/packages/cysync-core/src/dialogs/Password/SetPassword/context/index.tsx @@ -18,8 +18,8 @@ import { useAppSelector, } from '~/store'; import { validatePassword } from '~/utils'; - import logger from '~/utils/logger'; + import { AddPassword, SetPasswordSuccess } from '../Dialogs'; export interface SetPasswordDialogContextInterface { diff --git a/packages/cysync-core/src/dialogs/Send/Dialogs/Recipient.tsx b/packages/cysync-core/src/dialogs/Send/Dialogs/Recipient.tsx index 4aa2935c4..8d7c10c40 100644 --- a/packages/cysync-core/src/dialogs/Send/Dialogs/Recipient.tsx +++ b/packages/cysync-core/src/dialogs/Send/Dialogs/Recipient.tsx @@ -19,11 +19,12 @@ import React, { useCallback, useEffect, useState } from 'react'; import { LoaderDialog } from '~/components'; import { selectLanguage, useAppSelector } from '~/store'; - import logger from '~/utils/logger'; -import { useSendDialog } from '../context'; + import { AddressAndAmountSection, FeeSection } from './Components'; +import { useSendDialog } from '../context'; + export const Recipient: React.FC = () => { const { onNext, diff --git a/packages/ui/src/stories/molecules/JoystickInteraction.stories.tsx b/packages/ui/src/stories/molecules/JoystickInteraction.stories.tsx index 313be4740..5bf552cc6 100644 --- a/packages/ui/src/stories/molecules/JoystickInteraction.stories.tsx +++ b/packages/ui/src/stories/molecules/JoystickInteraction.stories.tsx @@ -36,3 +36,4 @@ export const AllDirectionsCompleted: Story = { down: 'completed', left: 'completed', }, +}; diff --git a/packages/ui/src/stories/molecules/Layouts/OnboardingLayout.stories.tsx b/packages/ui/src/stories/molecules/Layouts/OnboardingLayout.stories.tsx index 785d6e1b9..5f8944c07 100644 --- a/packages/ui/src/stories/molecules/Layouts/OnboardingLayout.stories.tsx +++ b/packages/ui/src/stories/molecules/Layouts/OnboardingLayout.stories.tsx @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; + import { LogoOutlinedAsideImage } from '../../../assets'; import { OnboardingLayout } from '../../../components'; From ab3adc67af1ea22723aae46fd3fa8a35bca7e903 Mon Sep 17 00:00:00 2001 From: Ishaan28malik Date: Thu, 25 Apr 2024 18:38:09 +0530 Subject: [PATCH 4/6] feat: pr review changes --- packages/ui/src/components/atoms/Divider.tsx | 2 +- packages/ui/src/components/atoms/Select.tsx | 2 +- .../ui/src/stories/atoms/Chip.stories.tsx | 5 ++- .../src/stories/atoms/Container.stories.tsx | 12 ++++-- .../ui/src/stories/atoms/Divider.stories.tsx | 5 ++- .../molecules/AccordionContent.stories.tsx | 40 +++++++++++++++++++ .../src/stories/molecules/Topbar.stories.tsx | 16 ++------ .../molecules/send/FeesInput.stories.tsx | 4 +- .../molecules/send/FeesSlider.stories.tsx | 19 +++++++-- .../send/RecipientAddress.stories.tsx | 9 ++++- .../molecules/send/ToggleSection.stories.tsx | 7 +++- 11 files changed, 93 insertions(+), 28 deletions(-) create mode 100644 packages/ui/src/stories/molecules/AccordionContent.stories.tsx diff --git a/packages/ui/src/components/atoms/Divider.tsx b/packages/ui/src/components/atoms/Divider.tsx index 8290236bd..7858bc517 100644 --- a/packages/ui/src/components/atoms/Divider.tsx +++ b/packages/ui/src/components/atoms/Divider.tsx @@ -11,7 +11,7 @@ interface DividerProps extends UtilsProps { const DividerStyle = styled.div` width: ${({ variant, stroke }) => - variant === 'vertical' ? `${stroke}px` : '100%'}; + variant === 'vertical' ? `${stroke}px` : '24px'}; height: ${({ variant, stroke }) => variant === 'vertical' ? '24px' : `${stroke}px`}; background: ${({ theme, background }) => diff --git a/packages/ui/src/components/atoms/Select.tsx b/packages/ui/src/components/atoms/Select.tsx index a0a1cd2b0..ef4eb706f 100644 --- a/packages/ui/src/components/atoms/Select.tsx +++ b/packages/ui/src/components/atoms/Select.tsx @@ -36,5 +36,5 @@ export const SelectContainer: FC = ({ children }) => ( ); SelectContainer.defaultProps = { - children: null, + children: undefined, }; diff --git a/packages/ui/src/stories/atoms/Chip.stories.tsx b/packages/ui/src/stories/atoms/Chip.stories.tsx index 5dd21b9f3..df75750b4 100644 --- a/packages/ui/src/stories/atoms/Chip.stories.tsx +++ b/packages/ui/src/stories/atoms/Chip.stories.tsx @@ -1,6 +1,7 @@ import type { StoryObj, Meta } from '@storybook/react'; +import React from 'react'; -import { Chip } from '../../components'; // Assuming your Chip component is in a file named Chip.tsx +import { Chip } from '../../components'; const meta: Meta = { component: Chip, @@ -13,7 +14,7 @@ type Story = StoryObj; export const Default: Story = { args: { - children: 'Chip Box', + children: Chip Box, p: 2, }, }; diff --git a/packages/ui/src/stories/atoms/Container.stories.tsx b/packages/ui/src/stories/atoms/Container.stories.tsx index 9decd8762..d8c43d93d 100644 --- a/packages/ui/src/stories/atoms/Container.stories.tsx +++ b/packages/ui/src/stories/atoms/Container.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; import { Container } from '../../components/atoms'; @@ -13,11 +14,16 @@ type Story = StoryObj; export const Default: Story = { args: { - $noFlex: false, + $noFlex: true, size: 'lg', $bgColor: 'white', p: '10', - children: 'This is the container ', + children: ( + <> +
This is the first container
+
This is the second container
+ + ), }, }; @@ -29,7 +35,7 @@ export const FlexGapContainer: Story = { }, }; -export const BatchContainer: Story = { +export const RoundedContainer: Story = { args: { ...Default.args, p: '16', diff --git a/packages/ui/src/stories/atoms/Divider.stories.tsx b/packages/ui/src/stories/atoms/Divider.stories.tsx index 4b2db4cb2..02f055e3b 100644 --- a/packages/ui/src/stories/atoms/Divider.stories.tsx +++ b/packages/ui/src/stories/atoms/Divider.stories.tsx @@ -14,12 +14,15 @@ type Story = StoryObj; export const Vertical: Story = { args: { variant: 'vertical', - $bgColor: 'white', + $bgColor: 'golden', + stroke: 8, }, }; export const Horizontal: Story = { args: { ...Vertical, variant: 'horizontal', + $bgColor: 'golden', + stroke: 8, }, }; diff --git a/packages/ui/src/stories/molecules/AccordionContent.stories.tsx b/packages/ui/src/stories/molecules/AccordionContent.stories.tsx new file mode 100644 index 000000000..ecd1abbf6 --- /dev/null +++ b/packages/ui/src/stories/molecules/AccordionContent.stories.tsx @@ -0,0 +1,40 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import React from 'react'; + +import { AccordionContent } from '../../components'; + +const meta: Meta = { + component: AccordionContent, + tags: ['autodocs'], +}; + +export default meta; + +type Story = StoryObj; + +export const Info: Story = { + args: { + id: 'Accordion', + items: [ + { + component: First, + width: 50, + padding: 8, + paddingLeft: '20', + }, + { + component: Second, + width: 50, + padding: 8, + paddingLeft: '20', + }, + { + component: Third, + width: 50, + padding: 8, + paddingLeft: '20', + }, + ], + headers: ['Head1', 'Head2', 'Head3'], + }, +}; diff --git a/packages/ui/src/stories/molecules/Topbar.stories.tsx b/packages/ui/src/stories/molecules/Topbar.stories.tsx index ca61da3e7..b383926e7 100644 --- a/packages/ui/src/stories/molecules/Topbar.stories.tsx +++ b/packages/ui/src/stories/molecules/Topbar.stories.tsx @@ -33,18 +33,10 @@ export const Default: Story = { isLocked: false, isLockscreenLoading: false, isPasswordSet: true, - lock: () => { - console.log('Lock action'); - }, - toggleDiscreetMode: () => { - console.log('Toggling discreet mode'); - }, - onNotificationClick: () => { - console.log('Notification clicked'); - }, - onSyncClick: () => { - console.log('Sync clicked'); - }, + // lock: () => {}, + toggleDiscreetMode: () => '', + onNotificationClick: () => '', + onSyncClick: () => '', }, }; diff --git a/packages/ui/src/stories/molecules/send/FeesInput.stories.tsx b/packages/ui/src/stories/molecules/send/FeesInput.stories.tsx index d68ffb56f..b32f5f388 100644 --- a/packages/ui/src/stories/molecules/send/FeesInput.stories.tsx +++ b/packages/ui/src/stories/molecules/send/FeesInput.stories.tsx @@ -12,5 +12,7 @@ export default meta; type Story = StoryObj; export const Default: Story = { - args: {}, + args: { + value: '10', + }, }; diff --git a/packages/ui/src/stories/molecules/send/FeesSlider.stories.tsx b/packages/ui/src/stories/molecules/send/FeesSlider.stories.tsx index 0a7802c08..bf4a6f3d9 100644 --- a/packages/ui/src/stories/molecules/send/FeesSlider.stories.tsx +++ b/packages/ui/src/stories/molecules/send/FeesSlider.stories.tsx @@ -10,12 +10,25 @@ const meta: Meta = { export default meta; type Story = StoryObj; - +let value = 2; export const Default: Story = { args: { overrideDecimal: undefined, error: undefined, - value: 2, - captions: [], + value, + captions: [ + { + id: 1, + name: 'first', + }, + { + id: 2, + name: 'second', + }, + ], + average: value, + onChange: newValue => { + value = newValue; + }, }, }; diff --git a/packages/ui/src/stories/molecules/send/RecipientAddress.stories.tsx b/packages/ui/src/stories/molecules/send/RecipientAddress.stories.tsx index cea27e3f3..9a45417ec 100644 --- a/packages/ui/src/stories/molecules/send/RecipientAddress.stories.tsx +++ b/packages/ui/src/stories/molecules/send/RecipientAddress.stories.tsx @@ -10,7 +10,12 @@ const meta: Meta = { export default meta; type Story = StoryObj; - +let address = 'Noida, Delhi'; export const Default: Story = { - args: {}, + args: { + value: address, + onChange: newAddress => { + address = newAddress; + }, + }, }; diff --git a/packages/ui/src/stories/molecules/send/ToggleSection.stories.tsx b/packages/ui/src/stories/molecules/send/ToggleSection.stories.tsx index 90ea3aac0..fb45e9874 100644 --- a/packages/ui/src/stories/molecules/send/ToggleSection.stories.tsx +++ b/packages/ui/src/stories/molecules/send/ToggleSection.stories.tsx @@ -10,10 +10,13 @@ const meta: Meta = { export default meta; type Story = StoryObj; - +let toggleValue = true; export const Default: Story = { args: { text: 'Placeholder', - value: true, + value: toggleValue, + onChange: newToggleValue => { + toggleValue = newToggleValue; + }, }, }; From 2bdbfcdecbe317db19289c0f4faaddb4470f38da Mon Sep 17 00:00:00 2001 From: Ishaan28malik Date: Wed, 29 May 2024 10:39:24 +0530 Subject: [PATCH 5/6] feat: topbar storybook component fix --- .../ui/src/stories/molecules/Topbar.stories.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/stories/molecules/Topbar.stories.tsx b/packages/ui/src/stories/molecules/Topbar.stories.tsx index b383926e7..f9e594e82 100644 --- a/packages/ui/src/stories/molecules/Topbar.stories.tsx +++ b/packages/ui/src/stories/molecules/Topbar.stories.tsx @@ -1,4 +1,5 @@ -import type { Meta, StoryObj } from '@storybook/react'; +import type { Meta, StoryObj, Decorator } from '@storybook/react'; +import React from 'react'; import { Topbar } from '../../components'; @@ -11,6 +12,12 @@ export default meta; type Story = StoryObj; +const withWidthDecorator: Decorator = Story => ( +
+ +
+); + export const Default: Story = { args: { title: 'Title', @@ -33,11 +40,11 @@ export const Default: Story = { isLocked: false, isLockscreenLoading: false, isPasswordSet: true, - // lock: () => {}, toggleDiscreetMode: () => '', onNotificationClick: () => '', onSyncClick: () => '', }, + decorators: [withWidthDecorator], }; export const InProcess: Story = { @@ -46,6 +53,7 @@ export const InProcess: Story = { connectionStatus: 'disconnected', syncStatus: 'synchronizing', }, + decorators: [withWidthDecorator], }; export const Failed: Story = { @@ -54,4 +62,5 @@ export const Failed: Story = { connectionStatus: 'error', syncStatus: 'error', }, + decorators: [withWidthDecorator], }; From 10b7e3bb48299770ae48da596a64f5af9fb2486d Mon Sep 17 00:00:00 2001 From: Ishaan28malik Date: Sat, 1 Jun 2024 20:29:08 +0530 Subject: [PATCH 6/6] feat: pr review changes fixed --- .../src/stories/molecules/Slider.stories.tsx | 37 ++++++++++------ .../src/stories/molecules/Topbar.stories.tsx | 2 +- .../molecules/send/FeesInput.stories.tsx | 1 + .../molecules/send/FeesSlider.stories.tsx | 43 +++++++++++-------- .../send/RecipientAddress.stories.tsx | 13 +++--- .../molecules/send/ToggleSection.stories.tsx | 19 +++++--- 6 files changed, 68 insertions(+), 47 deletions(-) diff --git a/packages/ui/src/stories/molecules/Slider.stories.tsx b/packages/ui/src/stories/molecules/Slider.stories.tsx index 30552a6d9..7362209e3 100644 --- a/packages/ui/src/stories/molecules/Slider.stories.tsx +++ b/packages/ui/src/stories/molecules/Slider.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; +import React, { useState } from 'react'; import { Slider } from '../../components'; @@ -12,19 +13,27 @@ export default meta; type Story = StoryObj; export const Info: Story = { - args: { - captions: [ - { - id: 1, - name: 'First ', - }, - { - id: 2, - name: ' Second', - }, - ], - min: 0, - max: 100, - decimal: 0, + render: () => { + const [value, setValue] = useState(50); + + return ( + + ); }, }; diff --git a/packages/ui/src/stories/molecules/Topbar.stories.tsx b/packages/ui/src/stories/molecules/Topbar.stories.tsx index f9e594e82..f4b5d6f88 100644 --- a/packages/ui/src/stories/molecules/Topbar.stories.tsx +++ b/packages/ui/src/stories/molecules/Topbar.stories.tsx @@ -13,7 +13,7 @@ export default meta; type Story = StoryObj; const withWidthDecorator: Decorator = Story => ( -
+
); diff --git a/packages/ui/src/stories/molecules/send/FeesInput.stories.tsx b/packages/ui/src/stories/molecules/send/FeesInput.stories.tsx index b32f5f388..79337ef72 100644 --- a/packages/ui/src/stories/molecules/send/FeesInput.stories.tsx +++ b/packages/ui/src/stories/molecules/send/FeesInput.stories.tsx @@ -14,5 +14,6 @@ type Story = StoryObj; export const Default: Story = { args: { value: '10', + postfixText: 'USD', }, }; diff --git a/packages/ui/src/stories/molecules/send/FeesSlider.stories.tsx b/packages/ui/src/stories/molecules/send/FeesSlider.stories.tsx index bf4a6f3d9..495499bf4 100644 --- a/packages/ui/src/stories/molecules/send/FeesSlider.stories.tsx +++ b/packages/ui/src/stories/molecules/send/FeesSlider.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; +import React, { useState } from 'react'; import { FeesSlider } from '../../../components'; @@ -10,25 +11,29 @@ const meta: Meta = { export default meta; type Story = StoryObj; -let value = 2; + export const Default: Story = { - args: { - overrideDecimal: undefined, - error: undefined, - value, - captions: [ - { - id: 1, - name: 'first', - }, - { - id: 2, - name: 'second', - }, - ], - average: value, - onChange: newValue => { - value = newValue; - }, + render: () => { + const [value, setValue] = useState(0); + + return ( + + ); }, }; diff --git a/packages/ui/src/stories/molecules/send/RecipientAddress.stories.tsx b/packages/ui/src/stories/molecules/send/RecipientAddress.stories.tsx index 9a45417ec..93e0e19c6 100644 --- a/packages/ui/src/stories/molecules/send/RecipientAddress.stories.tsx +++ b/packages/ui/src/stories/molecules/send/RecipientAddress.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; +import React, { useState } from 'react'; import { RecipientAddress } from '../../../components'; @@ -10,12 +11,12 @@ const meta: Meta = { export default meta; type Story = StoryObj; -let address = 'Noida, Delhi'; + export const Default: Story = { - args: { - value: address, - onChange: newAddress => { - address = newAddress; - }, + render: () => { + const [address, setAddress] = useState('Bangalore, Karnataka'); + return ( + + ); }, }; diff --git a/packages/ui/src/stories/molecules/send/ToggleSection.stories.tsx b/packages/ui/src/stories/molecules/send/ToggleSection.stories.tsx index fb45e9874..cc16f77a1 100644 --- a/packages/ui/src/stories/molecules/send/ToggleSection.stories.tsx +++ b/packages/ui/src/stories/molecules/send/ToggleSection.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react'; +import React, { useState } from 'react'; import { ToggleSection } from '../../../components'; @@ -10,13 +11,17 @@ const meta: Meta = { export default meta; type Story = StoryObj; -let toggleValue = true; + export const Default: Story = { - args: { - text: 'Placeholder', - value: toggleValue, - onChange: newToggleValue => { - toggleValue = newToggleValue; - }, + render: () => { + const [toggleValue, setToggleValue] = useState(true); + + return ( + + ); }, };