feat: migrate icons to storybook (#2446)

src/components/Button/ButtonAction.stories.tsx → src/components/Button/stories/ButtonAction.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 import { X } from 'react-feather'
 import { Flex } from 'rebass'
 
-import { ButtonAction } from './index'
+import { ButtonAction } from '../index'
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof ButtonAction> = {

src/components/Button/ButtonApprove.stories.tsx → src/components/Button/stories/ButtonApprove.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'
 
 import { ApprovalState } from 'hooks/useApproveCallback'
 
-import { ButtonApprove } from './index'
+import { ButtonApprove } from '../index'
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof ButtonApprove> = {

src/components/Button/ButtonConfirmed.stories.tsx → src/components/Button/stories/ButtonConfirmed.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { ButtonConfirmed } from './index'
+import { ButtonConfirmed } from '../index'
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof ButtonConfirmed> = {

src/components/Button/ButtonDropdownLight.stories.tsx → src/components/Button/stories/ButtonDropdownLight.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { ButtonDropdownLight } from './index'
+import { ButtonDropdownLight } from '../index'
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof ButtonDropdownLight> = {

src/components/Button/ButtonEmpty.stories.tsx → src/components/Button/stories/ButtonEmpty.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { ButtonEmpty } from './index'
+import { ButtonEmpty } from '../index'
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof ButtonEmpty> = {

src/components/Button/ButtonError.stories.tsx → src/components/Button/stories/ButtonError.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { ButtonError } from './index'
+import { ButtonError } from '../index'
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof ButtonError> = {

src/components/Button/ButtonGray.stories.tsx → src/components/Button/stories/ButtonGray.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { ButtonGray } from './index'
+import { ButtonGray } from '../index'
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof ButtonGray> = {

src/components/Button/ButtonLight.stories.tsx → src/components/Button/stories/ButtonLight.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { ButtonLight } from './index'
+import { ButtonLight } from '../index'
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof ButtonLight> = {

src/components/Button/ButtonOutlined.stories.tsx → src/components/Button/stories/ButtonOutlined.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { ButtonOutlined } from './index'
+import { ButtonOutlined } from '../index'
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof ButtonOutlined> = {

src/components/Button/ButtonPrimary.stories.tsx → src/components/Button/stories/ButtonPrimary.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { ButtonPrimary } from './index'
+import { ButtonPrimary } from '../index'
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof ButtonPrimary> = {

src/components/Button/ButtonSecondary.stories.tsx → src/components/Button/stories/ButtonSecondary.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { ButtonSecondary } from './index'
+import { ButtonSecondary } from '../index'
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof ButtonSecondary> = {

src/components/Button/ButtonWarning.stories.tsx → src/components/Button/stories/ButtonWarning.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { ButtonWarning } from './index'
+import { ButtonWarning } from '../index'
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof ButtonWarning> = {

src/components/Button/ButtonWithInfoHelper.stories.tsx → src/components/Button/stories/ButtonWithInfoHelper.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { ButtonWithInfoHelper } from './index'
+import { ButtonWithInfoHelper } from '../index'
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta: Meta<typeof ButtonWithInfoHelper> = {

src/components/Icons/stories/SvgSprite.stories.tsx

@@ -0,0 +1,230 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import React, { useEffect, useState } from 'react'
+import * as AllIcons from 'react-feather'
+import { Flex, Text } from 'rebass'
+
+import sprite from 'assets/svg/sprite.svg'
+import CopyHelper from 'components/Copy'
+import Divider from 'components/Divider'
+import { ICON_IDS } from 'constants/index'
+
+const SpriteIcon = () => {
+  return (
+    <Flex flexWrap="wrap" sx={{ gap: '8px' }}>
+      {ICON_IDS.map((id: string) => (
+        <Flex
+          sx={{ padding: '1rem', gap: '1rem', alignItems: 'center', border: '1px solid #000000', borderRadius: '8px' }}
+          flexDirection="column"
+          key={id}
+        >
+          <svg style={{ display: 'block', width: '24px', height: '24px' }}>
+            <use href={`${sprite}#${id}`} width="24" height="24" />
+          </svg>
+          <Flex sx={{ gap: '4px' }} alignItems="center">
+            {id}
+            <CopyHelper toCopy={`<Icon id="${id}" size={16} />`} />
+          </Flex>
+        </Flex>
+      ))}
+    </Flex>
+  )
+}
+
+const ReactFeather = () => {
+  return (
+    <Flex flexWrap="wrap" sx={{ gap: '8px' }}>
+      {Object.keys(AllIcons).map(key => {
+        const Icon = AllIcons[key]
+        return (
+          <Flex
+            sx={{
+              padding: '1rem',
+              gap: '1rem',
+              alignItems: 'center',
+              border: '1px solid #000000',
+              borderRadius: '8px',
+            }}
+            flexDirection="column"
+            key={key}
+          >
+            <Icon />
+
+            <Flex sx={{ gap: '4px' }} alignItems="center">
+              {key}
+              <CopyHelper toCopy={`<${key} size={24} />`} />
+            </Flex>
+          </Flex>
+        )
+      })}
+    </Flex>
+  )
+}
+
+const allSvgFiles = import.meta.glob('../../../assets/**')
+
+const SvgIcons = () => {
+  const [svgComponents, setSvgComponents] = useState<any>([])
+
+  useEffect(() => {
+    const array = Object.keys(allSvgFiles).map(key => ({ path: key, id: key.split('/').pop(), fn: allSvgFiles[key]() }))
+
+    Promise.all(array.map(el => el.fn))
+      .then(data => {
+        setSvgComponents(
+          data.map((e: any, i) => {
+            const id = array[i].id
+            return {
+              render: () => <img src={e.default} height="24px" />,
+              id,
+              path: array[i].path,
+            }
+          }),
+        )
+      })
+      .catch(console.error)
+  }, [])
+
+  return (
+    <Flex flexWrap="wrap" sx={{ gap: '8px' }}>
+      {svgComponents.map((el: any) => {
+        const title: string = el.id
+        return (
+          <Flex
+            sx={{
+              padding: '1rem',
+              gap: '1rem',
+              alignItems: 'center',
+              justifyItems: 'center',
+              border: '1px solid #000000',
+              borderRadius: '8px',
+            }}
+            flexDirection="column"
+            key={el.id}
+          >
+            {el.render?.()}
+            <Flex alignItems="center">
+              {title}
+              <CopyHelper toCopy={`${el.path.slice(9)}`} />
+            </Flex>
+          </Flex>
+        )
+      })}
+    </Flex>
+  )
+}
+
+const allIconComponentsFiles = import.meta.glob('../../../components/Icons/*')
+
+const IconComponents = () => {
+  const [iconComponents, setIconComponents] = useState<any>([])
+
+  useEffect(() => {
+    const componentArr = Object.keys(allIconComponentsFiles).map(key => ({
+      id: key.split('/').pop()?.replace('.tsx', ''),
+      fn: allIconComponentsFiles[key](),
+    }))
+    Promise.all(componentArr.map(el => el.fn))
+      .then(data => {
+        setIconComponents(
+          data.map((e: any, i) => {
+            const id = componentArr[i].id
+            return {
+              render: e.default || (() => null),
+              id,
+            }
+          }),
+        )
+      })
+      .catch(console.error)
+  }, [])
+
+  return (
+    <Flex flexWrap="wrap" sx={{ gap: '8px' }}>
+      {iconComponents.map((el: any) => {
+        const key: string = el.id
+        return (
+          <Flex
+            sx={{
+              padding: '1rem',
+              gap: '1rem',
+              alignItems: 'center',
+              justifyItems: 'center',
+              border: '1px solid #000000',
+              borderRadius: '8px',
+            }}
+            flexDirection="column"
+            key={key}
+          >
+            {(() => {
+              try {
+                return typeof el?.render === 'function'
+                  ? el.render({ color: '#000000' })
+                  : React.createElement(el?.render)
+              } catch (error) {
+                return 'Display Error'
+              }
+            })()}
+            <Flex alignItems="center">
+              {key}.tsx
+              <CopyHelper toCopy={`import ${key} from 'components/Icons/${key}'`} />
+            </Flex>
+          </Flex>
+        )
+      })}
+    </Flex>
+  )
+}
+const Icons = () => {
+  return (
+    <Flex flexDirection="column">
+      <Text fontWeight="500" fontSize="24px" marginBottom="1rem">
+        Svg Sprite Icons
+      </Text>
+      <SpriteIcon />
+
+      <Divider style={{ margin: '24px 0' }} />
+
+      <Text fontWeight="500" fontSize="24px" marginBottom="1rem">
+        React Feather
+      </Text>
+      <ReactFeather />
+
+      <Divider style={{ margin: '24px 0' }} />
+
+      <Text fontWeight="500" fontSize="24px" marginBottom="1rem">
+        Folder: components/Icons
+      </Text>
+      <IconComponents />
+
+      <Divider style={{ margin: '24px 0' }} />
+
+      <Text fontWeight="500" fontSize="24px" marginBottom="1rem">
+        Folder: assets
+      </Text>
+      <SvgIcons />
+    </Flex>
+  )
+}
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta: Meta<typeof SpriteIcon> = {
+  title: 'Kyberswap/Shared Components/Icons',
+  component: Icons,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  argTypes: {
+    children: { control: 'text' },
+    color: { control: 'text' },
+    theme: { control: 'none' },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Icons>
+
+export const Icon: Story = {}

src/pages/App.tsx

@@ -17,10 +17,8 @@ import ModalsGlobal from 'components/ModalsGlobal'
 import ProtectedRoute, { ProtectedRouteKyberAI } from 'components/ProtectedRoute'
 import Snowfall from 'components/Snowflake/Snowfall'
 import Web3ReactManager from 'components/Web3ReactManager'
-import { ENV_LEVEL } from 'constants/env'
 import { APP_PATHS, CHAINS_SUPPORT_CROSS_CHAIN } from 'constants/index'
 import { CLASSIC_NOT_SUPPORTED, ELASTIC_NOT_SUPPORTED, NETWORKS_INFO, SUPPORTED_NETWORKS } from 'constants/networks'
-import { ENV_TYPE } from 'constants/type'
 import { useActiveWeb3React } from 'hooks'
 import { useAutoLogin } from 'hooks/useLogin'
 import { useGlobalMixpanelEvents } from 'hooks/useMixpanel'
@@ -70,7 +68,6 @@ const BuyCrypto = lazy(() => import('pages/BuyCrypto'))
 const Campaign = lazy(() => import('pages/Campaign'))
 const GrantProgramPage = lazy(() => import('pages/GrantProgram'))
 const NotificationCenter = lazy(() => import('pages/NotificationCenter'))
-const Icons = lazy(() => import('./Icons'))
 
 const AppWrapper = styled.div`
   display: flex;
@@ -370,7 +367,6 @@ export default function App() {
                 />
                 <Route path={`${APP_PATHS.GRANT_PROGRAMS}`} element={<GrantProgramPage />} />
                 <Route path={`${APP_PATHS.GRANT_PROGRAMS}/:slug`} element={<GrantProgramPage />} />
-                {ENV_LEVEL === ENV_TYPE.LOCAL && <Route path="/icons" element={<Icons />} />}
 
                 <Route path={`elastic-swap`} element={<ElasticSwap />} />