feat: svg primitive story (#1029)

Author: jpvsalvador

frontend/.storybook/preview.js

@@ -1,9 +1,20 @@
+import Sprite from '@/components/icons/Sprite';
+
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
-}
+};
+
+export const decorators = [
+  (Story) => (
+    <>
+      <Sprite />
+      <Story />
+    </>
+  ),
+];

frontend/src/components/Primitives/Shape.tsx

@@ -8,7 +8,6 @@ import {
   AlertDialogAction,
   AlertDialogCancel,
 } from '@/components/Primitives/AlertDialog';
-import Sprite from '@/components/icons/Sprite';
 import Flex from '@/components/Primitives/Flex';
 import Button from '@/components/Primitives/Button';
 
@@ -21,11 +20,6 @@ export default {
       exclude: ['ref', 'as', 'css'],
       sort: 'requiredFirst',
     },
-    docs: {
-      description: {
-        component: '', // Change main component description in docs page
-      },
-    },
   },
   args: {
     title: 'Alert Dialog Title',
@@ -36,7 +30,6 @@ export default {
 
 const Template: ComponentStory<typeof AlertDialog> = ({ children, ...args }) => (
   <AlertDialog>
-    <Sprite />
     {/* Button to Open the Dialog */}
     <AlertDialogTrigger asChild>
       <Button>Open Alert Dialog</Button>

frontend/src/stories/AlertDialog.stories.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { ComponentStory } from '@storybook/react';
 
 import Button from '@/components/Primitives/Button';
-import Sprite from '@/components/icons/Sprite';
 import Icon from '@/components/icons/Icon';
 import Flex from '@/components/Primitives/Flex';
 import Text from '@/components/Primitives/Text';
@@ -44,11 +43,6 @@ export default {
       exclude: ['ref', 'as', 'css'],
       sort: 'requiredFirst',
     },
-    docs: {
-      description: {
-        component: '', // Change main component description in docs page
-      },
-    },
   },
   args: {
     children: 'Lorem',
@@ -127,7 +121,6 @@ export const Variants: ComponentStory<typeof Button> = ({ children, disabled })
 
 export const IconButton: ComponentStory<typeof Button> = ({ children, disabled }) => (
   <Flex justify="evenly" wrap="wrap">
-    <Sprite />
     {VARIANT_OPTIONS.map((variant) => (
       <Flex direction="column" justify="center" align="center" gap={20} key={variant}>
         <Text heading="5">Variant {variant}</Text>
@@ -144,7 +137,6 @@ export const IconButton: ComponentStory<typeof Button> = ({ children, disabled }
 
 export const Icons: ComponentStory<typeof Button> = ({ disabled }) => (
   <Flex justify="evenly" wrap="wrap">
-    <Sprite />
     {SIZE_OPTIONS.map((size) => (
       <Flex direction="column" justify="center" align="center" gap={20} key={size}>
         <Text heading="5">Size {size}</Text>

frontend/src/stories/Button.stories.tsx

@@ -10,7 +10,6 @@ import {
 } from '@/components/Primitives/Popover';
 import Icon from '@/components/icons/Icon';
 import Text from '@/components/Primitives/Text';
-import Sprite from '@/components/icons/Sprite';
 import { PopoverVariantType, PopoverSizeType } from './types/PrimitiveTypes';
 
 const VARIANT_OPTIONS: PopoverVariantType[] = ['dark', 'light'];
@@ -71,7 +70,6 @@ export default {
 
 const Template: ComponentStory<typeof Popover> = ({ variant, size, disabled, active }: any) => (
   <>
-    <Sprite />
     <Popover>
       <PopoverTrigger variant={variant} size={size} disabled={disabled}>
         <Icon name="menu-dots" />

frontend/src/stories/Popover.stories.tsx

@@ -8,7 +8,6 @@ import {
   SelectIcon,
   SelectContent,
 } from '@/components/Primitives/Select';
-import Sprite from '@/components/icons/Sprite';
 import Flex from '@/components/Primitives/Flex';
 import Text from '@/components/Primitives/Text';
 import Icon from '@/components/icons/Icon';
@@ -57,7 +56,6 @@ export default {
 
 const Template: ComponentStory<typeof Select> = ({ disabled, hasError }) => (
   <Flex>
-    <Sprite />
     <Select disabled={disabled} hasError={hasError} css={{ width: '$300' }}>
       <SelectTrigger css={{ padding: '$16' }}>
         <Flex direction="column">
@@ -80,7 +78,6 @@ export const WithLabel: ComponentStory<typeof Select> = ({ disabled, hasError })
 
   return (
     <Flex>
-      <Sprite />
       <Select
         disabled={disabled}
         hasError={hasError}

frontend/src/stories/Select.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { ComponentStory } from '@storybook/react';
+
+import Svg from '@/components/Primitives/Svg';
+import Flex from '@/components/Primitives/Flex';
+import { SvgSizeType } from './types/PrimitiveTypes';
+
+const SIZE_OPTIONS: SvgSizeType[] = [12, 16, 18, 20, 24, 32];
+
+export default {
+  title: 'Primitives/Svg',
+  component: Svg,
+  parameters: {
+    controls: {
+      expanded: true,
+      exclude: ['ref', 'as', 'css'],
+      sort: 'requiredFirst',
+    },
+  },
+  args: {
+    size: 32,
+  },
+  argTypes: {
+    size: {
+      options: SIZE_OPTIONS,
+      control: { type: 'select' },
+      description: 'The component size.',
+      table: {
+        type: { summary: SIZE_OPTIONS.join('|') },
+      },
+    },
+  },
+};
+
+const Template: ComponentStory<typeof Svg> = ({ size, ...args }) => (
+  <Flex>
+    <Svg size={size} {...args}>
+      <use href="#user" />
+    </Svg>
+  </Flex>
+);
+
+export const Default = Template.bind({});
+Default.storyName = 'Basic Usage';

frontend/src/stories/Svg.stories.tsx

@@ -47,3 +47,6 @@ export type RadioGroupFontWeightType = 'regular' | 'medium' | 'bold';
 // Primitive/Separator
 export type SeparatorOrientationType = 'horizontal' | 'vertical';
 export type SeparatorSizeType = 'sm' | 'md' | 'lg' | 'full';
+
+// Primitive/Svg
+export type SvgSizeType = 12 | 16 | 18 | 20 | 24 | 32;