Skip to content

Commit

Permalink
feat: migrate icons to storybook (#2446)
Browse files Browse the repository at this point in the history
  • Loading branch information
viet-nv authored Dec 13, 2023
1 parent c866375 commit e08525e
Show file tree
Hide file tree
Showing 16 changed files with 243 additions and 198 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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> = {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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> = {
Expand Down
Original file line number Diff line number Diff line change
@@ -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> = {
Expand Down
Original file line number Diff line number Diff line change
@@ -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> = {
Expand Down
Original file line number Diff line number Diff line change
@@ -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> = {
Expand Down
Original file line number Diff line number Diff line change
@@ -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> = {
Expand Down
Original file line number Diff line number Diff line change
@@ -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> = {
Expand Down
Original file line number Diff line number Diff line change
@@ -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> = {
Expand Down
Original file line number Diff line number Diff line change
@@ -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> = {
Expand Down
Original file line number Diff line number Diff line change
@@ -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> = {
Expand Down
Original file line number Diff line number Diff line change
@@ -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> = {
Expand Down
Original file line number Diff line number Diff line change
@@ -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> = {
Expand Down
Original file line number Diff line number Diff line change
@@ -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> = {
Expand Down
230 changes: 230 additions & 0 deletions src/components/Icons/stories/SvgSprite.stories.tsx
Original file line number Diff line number Diff line change
@@ -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 = {}
4 changes: 0 additions & 4 deletions src/pages/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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 />} />

Expand Down
Loading

0 comments on commit e08525e

Please sign in to comment.