chore: stories (#107)

Co-authored-by: Gabriel Tibúrcio <v-gtiburcio@mparticle.com>

src/components/data-display/Avatar/Avatar.stories.tsx

@@ -1,12 +1,14 @@
 import { type Meta } from '@storybook/react'
 import { type StoryObj } from '@storybook/react'
-import MpLogo from 'src/assets/svg/mpLogo.svg?react'
 import { Avatar } from 'src/components/data-display/Avatar/Avatar'
 import { ExampleStory } from 'src/utils/ExampleStory'
 import { Space } from 'src/components'
 import { Badge } from 'src/components'
 import { Button } from 'src/components'
 import { useState } from 'react'
+import { AlicornIcon } from 'src/components'
+import { UsersIcon } from 'src/components'
+import { SparklesIcon } from 'src/components'
 
 const meta: Meta<typeof Avatar> = {
   title: 'Aquarium/Data Display/Avatar',
@@ -15,11 +17,12 @@ const meta: Meta<typeof Avatar> = {
   args: {
     alt: 'User Avatar',
     gap: 4,
-    icon: <MpLogo/>,
+    icon: <AlicornIcon />,
     shape: 'circle',
     size: 'default',
     src: '',
     srcSet: '',
+    style: { color: 'white' },
     draggable: true,
     crossOrigin: '',
     onError: () => true,
@@ -37,12 +40,12 @@ const meta: Meta<typeof Avatar> = {
       control: 'select',
       options: [true, false, 'true', 'false'],
     },
-     icon: {
+    icon: {
       control: 'select',
-      options: ['User', 'Gamepad'],
+      options: ['Users', 'Sparkles'],
       mapping: {
-        User: <MpLogo/>,
-        Gamepad: <MpLogo/>,
+        Users: <UsersIcon />,
+        Sparkles: <SparklesIcon />,
       },
     },
   },
@@ -84,7 +87,7 @@ export const CustomSizes: Story = {
 
 export const CustomIcon: Story = {
   args: {
-    icon: <MpLogo/>,
+    icon: 'Sparkles',
   },
 }
 
@@ -94,16 +97,16 @@ export const ExampleBasic: Story = {
       <ExampleStory title="Four sizes and two shapes are available.">
         <Space direction="vertical" size={16}>
           <Space wrap size={16}>
-            <Avatar size={64} icon={<MpLogo/>} />
-            <Avatar size="large" icon={<MpLogo/>} />
-            <Avatar icon={<MpLogo/>} />
-            <Avatar size="small" icon={<MpLogo/>} />
+            <Avatar size={64} icon={<AlicornIcon />} />
+            <Avatar size="large" icon={<AlicornIcon />} />
+            <Avatar icon={<AlicornIcon />} />
+            <Avatar size="small" icon={<AlicornIcon />} />
           </Space>
           <Space wrap size={16}>
-            <Avatar shape="square" size={64} icon={<MpLogo/>} />
-            <Avatar shape="square" size="large" icon={<MpLogo/>} />
-            <Avatar shape="square" icon={<MpLogo/>} />
-            <Avatar shape="square" size="small" icon={<MpLogo/>} />
+            <Avatar shape="square" size={64} icon={<AlicornIcon />} />
+            <Avatar shape="square" size="large" icon={<AlicornIcon />} />
+            <Avatar shape="square" icon={<AlicornIcon />} />
+            <Avatar shape="square" size="small" icon={<AlicornIcon />} />
           </Space>
         </Space>
       </ExampleStory>
@@ -117,13 +120,13 @@ export const ExampleTypes: Story = {
     return (
       <ExampleStory title="Image, Icon and letter are supported, and the latter two kinds of avatar can have custom colors and background colors.">
         <Space size={16} wrap>
-          <Avatar icon={<MpLogo/>} />
+          <Avatar icon={<AlicornIcon />} />
           <Avatar>U</Avatar>
           <Avatar size={40}>USER</Avatar>
           <Avatar src={url} />
           <Avatar src={<img src={url} alt="avatar" />} />
           <Avatar style={{ backgroundColor: '#fde3cf', color: '#f56a00' }}>U</Avatar>
-          <Avatar style={{ backgroundColor: '#87d068' }} icon={<MpLogo/>} />
+          <Avatar style={{ backgroundColor: '#87d068' }} icon={<AlicornIcon />} />
         </Space>
       </ExampleStory>
     )
@@ -136,10 +139,10 @@ export const ExampleWithBadge: Story = {
       <ExampleStory title="Usually used for reminders and notifications.">
         <Space size={24}>
           <Badge count={1}>
-            <Avatar shape="square" icon={<MpLogo/>} />
+            <Avatar shape="square" icon={<AlicornIcon />} />
           </Badge>
           <Badge dot>
-            <Avatar shape="square" icon={<MpLogo/>} />
+            <Avatar shape="square" icon={<AlicornIcon />} />
           </Badge>
         </Space>
       </ExampleStory>
@@ -151,7 +154,7 @@ export const ExampleResponsive: Story = {
   render: () => {
     return (
       <ExampleStory title="Avatar size can be automatically adjusted based on the screen size.">
-        <Avatar size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }} icon={<MpLogo/>} />
+        <Avatar size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }} icon={<AlicornIcon />} />
       </ExampleStory>
     )
   },

src/components/data-display/Empty/Empty.stories.tsx

@@ -1,5 +1,17 @@
 import { type Meta, type StoryObj } from '@storybook/react'
+import { Switch } from 'src/components'
 import { Empty } from 'src/components/data-display/Empty/Empty'
+import { ExampleStory } from 'src/utils/ExampleStory'
+import { Divider } from 'src/components'
+import { ConfigProvider } from 'src/components'
+import { Space } from 'src/components'
+import { Select } from 'src/components'
+import { TreeSelect } from 'src/components'
+import { Cascader } from 'src/components'
+import { Transfer } from 'src/components'
+import { Table } from 'src/components'
+import { List } from 'src/components'
+import { useState } from 'react'
 
 const meta: Meta<typeof Empty> = {
   title: 'Aquarium/Data Display/Empty',
@@ -81,4 +93,49 @@ export const NoImageAndNoDescription: Story = {
     description: null,
     image: null,
   },
+}
+
+export const ExampleGlobalEmpty: Story = {
+  render: () => {
+    const customizeRenderEmpty = () => (
+      <div style={{ textAlign: 'center' }}>
+        {'{Icon}'}
+        <p>Data Not Found</p>
+      </div>
+    )
+
+    const style: React.CSSProperties = { width: 200 }
+    const [customize, setCustomize] = useState(true)
+
+    return (
+      <ExampleStory title="Set global Empty style.">
+        <>
+          <Switch unCheckedChildren="default" checkedChildren="customize" checked={customize} onChange={setCustomize} />
+          <Divider />
+          <ConfigProvider renderEmpty={customize ? customizeRenderEmpty : undefined}>
+            <Space direction="vertical" style={{ width: '100%' }}>
+              <h4>Select</h4>
+              <Select style={style} />
+              <h4>TreeSelect</h4>
+              <TreeSelect style={style} treeData={[]} />
+              <h4>Cascader</h4>
+              <Cascader style={style} options={[]} showSearch />
+              <h4>Transfer</h4>
+              <Transfer />
+              <h4>Table</h4>
+              <Table
+                style={{ marginTop: 8 }}
+                columns={[
+                  { title: 'Name', dataIndex: 'name', key: 'name' },
+                  { title: 'Age', dataIndex: 'age', key: 'age' },
+                ]}
+              />
+              <h4>List</h4>
+              <List />
+            </Space>
+          </ConfigProvider>
+        </>
+      </ExampleStory>
+    )
+  },
 }