feat: added storybook ui components

.changeset/curly-clocks-warn.md

@@ -0,0 +1,6 @@
+---
+'@cypherock/cysync-ui': patch
+'@cypherock/cysync-desktop': patch
+---
+
+added and updated storybook ui components

packages/cysync-core/src/dialogs/HistoryDialog.tsx

@@ -40,6 +40,7 @@ import {
   useAppDispatch,
   useAppSelector,
 } from '~/store';
+
 import { LoaderDialog } from '../components';
 
 export interface IHistoryDialogProps {

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 {

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 {

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 {

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,

packages/ui/src/components/atoms/Divider.tsx

@@ -11,7 +11,7 @@ interface DividerProps extends UtilsProps {
 
 const DividerStyle = styled.div<DividerProps>`
   width: ${({ variant, stroke }) =>
-    variant === 'vertical' ? `${stroke}px` : '100%'};
+    variant === 'vertical' ? `${stroke}px` : '24px'};
   height: ${({ variant, stroke }) =>
     variant === 'vertical' ? '24px' : `${stroke}px`};
   background: ${({ theme, background }) =>

packages/ui/src/components/atoms/Select.tsx

@@ -36,5 +36,5 @@ export const SelectContainer: FC<SelectProps> = ({ children }) => (
 );
 
 SelectContainer.defaultProps = {
-  children: null,
+  children: undefined,
 };

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';

packages/ui/src/stories/atoms/Chip.stories.tsx

@@ -0,0 +1,20 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import React from 'react';
+
+import { Chip } from '../../components';
+
+const meta: Meta<typeof Chip> = {
+  component: Chip,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: <span style={{ color: 'white' }}>Chip Box</span>,
+    p: 2,
+  },
+};

packages/ui/src/stories/atoms/Container.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { Container } from '../../components/atoms';
+
+const meta: Meta<typeof Container> = {
+  component: Container,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    $noFlex: true,
+    size: 'lg',
+    $bgColor: 'white',
+    p: '10',
+    children: (
+      <>
+        <div>This is the first container</div>
+        <div>This is the second container</div>
+      </>
+    ),
+  },
+};
+
+export const FlexGapContainer: Story = {
+  args: {
+    ...Default.args,
+    $noFlex: false,
+    gap: 32,
+  },
+};
+
+export const RoundedContainer: Story = {
+  args: {
+    ...Default.args,
+    p: '16',
+    $borderRadius: 8,
+    $width: '100%',
+  },
+};

packages/ui/src/stories/atoms/Divider.stories.tsx

@@ -14,10 +14,15 @@ type Story = StoryObj<typeof meta>;
 export const Vertical: Story = {
   args: {
     variant: 'vertical',
+    $bgColor: 'golden',
+    stroke: 8,
   },
 };
 export const Horizontal: Story = {
   args: {
+    ...Vertical,
     variant: 'horizontal',
+    $bgColor: 'golden',
+    stroke: 8,
   },
 };

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<typeof InformationBox> = {
+  component: InformationBox,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    $backgroundColor: undefined,
+    $borderColor: undefined,
+    rightImage: undefined,
+    text: 'This is the info box',
+  },
+};

packages/ui/src/stories/atoms/LeanBoxContainer.stories.tsx

@@ -11,4 +11,8 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  args: {
+    children: 'Hello world',
+  },
+};

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<typeof NoSearchResult> = {
+  component: NoSearchResult,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    subText: 'Go to Home',
+    searchText: 'Result not found',
+    text: 'text',
+  },
+};

packages/ui/src/stories/atoms/Select.stories.tsx

@@ -11,4 +11,8 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  args: {
+    children: 'Select Component',
+  },
+};

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<typeof ShowMore> = {
+  component: ShowMore,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    text: 'Show More',
+  },
+};

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<typeof SummaryContainer> = {
+  component: SummaryContainer,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    margin: undefined,
+    leftComponent: undefined,
+    rightComponent: undefined,
+  },
+};

packages/ui/src/stories/atoms/Tag.stories.tsx

@@ -11,4 +11,8 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  args: {
+    children: 'tag 1',
+  },
+};

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<typeof Tooltip> = {
+  component: Tooltip,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    isActive: true,
+    text: undefined,
+    children: <span>Base Comp</span>,
+  },
+};
+
+export const TopTooltip: Story = {
+  args: {
+    ...Default.args,
+    tooltipPlacement: 'top',
+  },
+};
+
+export const BottomTooltip: Story = {
+  args: {
+    ...Default.args,
+    tooltipPlacement: 'bottom',
+  },
+};

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<typeof VerticalLine> = {
+  component: VerticalLine,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    $borderStyle: 'dotted',
+    height: 40,
+  },
+};

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<typeof Video> = {
+  component: Video,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    autoPlay: true,
+    loop: true,
+    controls: true,
+    $aspectRatio: 'auto',
+    src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+  },
+};

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<typeof AccordionContent> = {
+  component: AccordionContent,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Info: Story = {
+  args: {
+    id: 'Accordion',
+    items: [
+      {
+        component: <span>First</span>,
+        width: 50,
+        padding: 8,
+        paddingLeft: '20',
+      },
+      {
+        component: <span>Second</span>,
+        width: 50,
+        padding: 8,
+        paddingLeft: '20',
+      },
+      {
+        component: <span>Third</span>,
+        width: 50,
+        padding: 8,
+        paddingLeft: '20',
+      },
+    ],
+    headers: ['Head1', 'Head2', 'Head3'],
+  },
+};