Merge branch 'develop' into dev/mel-gql-experiment

teia-community · Feb 22, 2023 · 084b83a · 084b83a
2 parents e697abe + dd461fc
commit 084b83a
Show file tree

Hide file tree

Showing 18 changed files with 375 additions and 114 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -11,11 +11,19 @@ const config: StorybookConfig = {
     name: '@storybook/react-vite',
     options: {},
   },
+
   core: {
     disableTelemetry: true,
     enableCrashReports: true,
   },
-
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: (prop) =>
+        prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
+    },
+  },
   docs: {
     defaultName: 'Documentation',
     autodocs: true,

diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -2,6 +2,7 @@ import '@styles/index.scss'
 import { themes } from '@storybook/theming'
 import { THEME_OPTIONS } from '@constants'
 import { decorators as shared } from '../src/stories/shared'
+
 export const globalTypes = {
   theme: {
     toolbar: {

diff --git a/src/atoms/select/ThemeSelection.jsx b/src/atoms/select/ThemeSelection.jsx
@@ -10,7 +10,7 @@ export const ThemeSelection = (props) => {
     <Select
       alt="theme selection"
       value={{ label: THEMES[theme], value: theme }}
-      onChange={(e) => setTheme(e.value)}
+      onChange={(e) => setTheme(e.value, props.apply)}
       options={THEME_OPTIONS}
       {...props}
     />

diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx
@@ -27,11 +27,6 @@ import { useUserStore } from '@context/userStore'
 import { useModalStore } from '@context/modalStore'
 import { shallow } from 'zustand/shallow'
 
-const setDataTheme = (theme) => {
-  const root = document.documentElement
-  root.setAttribute('data-theme', theme)
-}
-
 export const Header = () => {
   const [
     address,
@@ -62,7 +57,8 @@ export const Header = () => {
 
   // Subscribe to theme changes using zustand
   useEffect(() => {
-    const unsub = useLocalSettings.subscribe((st) => st.theme, setDataTheme, {
+    const applyTheme = useLocalSettings.getState().applyTheme
+    const unsub = useLocalSettings.subscribe((st) => st.theme, applyTheme, {
       fireImmediately: true,
     })
     return unsub

diff --git a/src/components/media-types/index.tsx b/src/components/media-types/index.tsx
@@ -15,24 +15,29 @@ import { MD } from './md'
 import { useMemo } from 'react'
 import { NFT } from '@types'
 
+interface RenderMediaTypeProps {
+  /**The nft with the core fragments*/
+  nft: NFT
+  /**When minting this is a base64 (or ObjectURL) representation of the image/video */
+  previewUri?: string
+  /**When minting this is a base64 (or ObjectURL) representation of the cover image/video */
+  previewDisplayUri?: string
+  /**false on feeds, true on objkt detail view. */
+  displayView?: boolean
+  /**hacky way to pass the details hover for now... */
+  details?: JSX.Element | JSX.Element[]
+}
+
 /**
- * Method that handles the rendering of any of the supported
- * media types.
+ * Method that handles the rendering of any of the supported media types.
  */
-
 export const RenderMediaType = ({
   nft,
   previewUri,
   previewDisplayUri,
   displayView,
   details,
-}: {
-  nft: NFT
-  previewUri?: string
-  previewDisplayUri?: string
-  displayView?: boolean
-  details?: JSX.Element | JSX.Element[]
-}) => {
+}: RenderMediaTypeProps) => {
   const [forceArtifact, setForceArtifact] = useState(false)
   const parsedArtifactUri = useMemo(
     () =>

diff --git a/src/components/media-types/video/index.jsx b/src/components/media-types/video/index.jsx
@@ -2,6 +2,7 @@ import { useEffect, useRef } from 'react'
 import { iOS } from '@utils/os'
 import styles from '@style'
 import ImageComponent from '../image/index'
+import { VideoIcon } from '@icons/refs'
 
 /**
  * @param {import("@types").MediaTypeProps} renderOptions - Th options for the media renderer
@@ -70,28 +71,32 @@ export const VideoComponent = ({
     )
 
   return (
-    <ImageComponent
-      artifactUri={artifactUri}
-      displayUri={displayUri}
-      previewUri={previewUri}
-      inView={inView}
-      displayView={displayView}
-      nft={nft}
-    />
-    // <div className={styles.container}>
-    //   <video
-    //     ref={domElement}
-    //     className={styles.video}
-    //     autoPlay={inView}
-    //     playsInline
-    //     muted
-    //     loop
-    //     src={previewUri ? previewUri : displayUri}
-    //     poster={displayUri}
-    //     title={`video object ${nft.token_id}`}
-    //   />
-    // </div>
+    <>
+      <div className={styles.icon}>
+        <VideoIcon size={32} />
+      </div>
+      <ImageComponent
+        artifactUri={artifactUri}
+        displayUri={displayUri}
+        previewUri={previewUri}
+        inView={inView}
+        displayView={displayView}
+        nft={nft}
+      />
+    </>
   )
 }
-
+// <div className={styles.container}>
+//   <video
+//     ref={domElement}
+//     className={styles.video}
+//     autoPlay={inView}
+//     playsInline
+//     muted
+//     loop
+//     src={previewUri ? previewUri : displayUri}
+//     poster={displayUri}
+//     title={`video object ${nft.token_id}`}
+//   />
+// </div>
 export default VideoComponent
diff --git a/src/components/media-types/video/index.module.scss b/src/components/media-types/video/index.module.scss
@@ -16,3 +16,9 @@
   max-height: 60vh;
   max-width: 100%;
 }
+
+.icon {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+}
diff --git a/src/context/localSettingsStore.ts b/src/context/localSettingsStore.ts
@@ -8,7 +8,7 @@ import { useUserStore } from './userStore'
 
 type ViewMode = 'single' | 'masonry'
 
-type Theme = 'dark' | 'light' | 'kawai' | 'aqua' | 'coffee' | 'midnight'
+export type Theme = 'dark' | 'light' | 'kawai' | 'aqua' | 'coffee' | 'midnight'
 
 export const rpc_nodes = [
   'https://mainnet.api.tez.ie',
@@ -37,7 +37,8 @@ interface LocalSettingsState {
   setZen: (zen: boolean) => void
   toggleTheme: () => void
   setViewMode: (mode: ViewMode) => void
-  setTheme: (theme: Theme) => void
+  setTheme: (theme: Theme, apply?: boolean) => void
+  applyTheme: (theme: Theme) => void
   setNsfwFriendly: (v: boolean) => void
   setPhotosensitiveFriendly: (v: boolean) => void
   setRpcNode: (rpcNode?: RPC_NODES) => Promise<void>
@@ -73,7 +74,16 @@ export const useLocalSettings = create<LocalSettingsState>()(
                 : state.themeDark,
           })),
         setViewMode: (viewMode: ViewMode) => set({ viewMode }),
-        setTheme: (theme: Theme) => set({ theme }),
+        setTheme: (theme, apply) => {
+          set({ theme })
+          if (apply) {
+            get().applyTheme(theme)
+          }
+        },
+        applyTheme: (theme) => {
+          const root = document.documentElement
+          root.setAttribute('data-theme', theme)
+        },
         setRpcNode: async (rpcNode) => {
           set({ rpcNode })
           await useUserStore.getState().sync({ rpcNode })

diff --git a/src/context/userStore.ts b/src/context/userStore.ts
@@ -116,7 +116,7 @@ interface UserState {
   ) => OperationReturn
 }
 // const rpcClient = new CancellableRpcClient(useLocalSettings.getState().rpcNode)
-export const Tezos = new TezosToolkit(useLocalSettings.getState().rpcNode)
+export const Tezos = new TezosToolkit(import.meta.env.VITE_TEZOS_RPC)
 
 const Packer = new MichelCodecPacker()
 
@@ -158,7 +158,8 @@ export const useUserStore = create<UserState>()(
           try {
             step(
               title,
-              `Awaiting for confirmation of the [operation](https://tzkt.io/${op.opHash})`
+              `Awaiting for confirmation of the [operation](https://tzkt.io/${op.opHash})
+              __closing this dialog has no effect on the transaction__`
             )
             const confirm = await op.confirmation()
             show(
@@ -403,7 +404,6 @@ export const useUserStore = create<UserState>()(
         collect: async (listing) => {
           const handleOp = get().handleOp
           const show = useModalStore.getState().show
-          const close = useModalStore.getState().close
           const showError = useModalStore.getState().showError
 
           let batch = undefined
@@ -430,8 +430,6 @@ export const useUserStore = create<UserState>()(
             }
           } catch (error) {
             showError('Collect', error)
-          } finally {
-            close()
           }
         },
         cancelV1: async (swap_id) => {

diff --git a/src/icons/refs.js b/src/icons/refs.js
@@ -1,30 +1,53 @@
 import withIcon from '@utils/with-icon'
 
-export const BurnIcon = withIcon(`<svg>
+export const BurnIcon = withIcon(
+  `<svg>
   <path d="M9.66 2.67c-.13.6-.26 1.2-.15 1.76.08.39.29.78.84 1.1l.16-.38.24-.64.63.34.25.16a7.07 7.07 0 0 1 2.14 2.12c1 1.55 1.53 3.83-.12 6.79a.62.62 0 0 1-.8.24.54.54 0 0 1-.26-.75c1.45-2.6.95-4.48.15-5.7-.4-.64-.9-1.12-1.3-1.44l-.1-.08a3.2 3.2 0 0 1-.07.13c-.06.1-.17.26-.33.38l-.27.2-.32-.13C9.08 6.28 8.5 5.5 8.33 4.63a3.83 3.83 0 0 1-.02-1.26 3.79 3.79 0 0 0-2.3 2.15 5.48 5.48 0 0 0 .14 3.8l.45 1.27-1.3-.6a4.84 4.84 0 0 1-1.6-1.43 8.76 8.76 0 0 1-.4-.54 3.2 3.2 0 0 0-.73 2.77c.2 1.09.86 2.04 1.32 2.5.22.22.2.57-.04.78-.24.2-.62.2-.85-.03a6.26 6.26 0 0 1-1.61-3.06 4.37 4.37 0 0 1 1.65-4.32l.67-.57.3.8c.03.09.24.46.56.89-.1-.9-.01-1.8.32-2.64.57-1.46 1.86-2.62 4.04-3.12l.93-.22-.2.87Z"/>
-</svg>`)
+</svg>`,
+  16
+)
 
 export const GenerativeIcon = withIcon(`
-  <circle cx="15" cy="15" r="14.25" fill="#0D0D0D" stroke="#fff"/>
-  <path fill="#fff" d="m10.6 13.34-3.3 1.7v.06l3.3 1.7v.92h-.15l-4.24-2.3v-.7l4.24-2.3h.14v.92Zm6.18-3.98h1l-4.15 11.51h-1l4.15-11.5Zm2.85 3.06 4.24 2.3v.7l-4.24 2.3h-.14v-.92l3.3-1.7v-.06l-3.3-1.7v-.92h.14Z"/>
-  <path fill="#fff" d="m10.6 13.34.18.35.21-.11v-.24h-.4Zm-3.3 1.7-.2-.36-.2.12v.24h.4Zm0 .06h-.4v.24l.2.12.2-.36Zm3.3 1.7h.4v-.24l-.22-.11-.19.35Zm0 .92v.4h.4v-.4h-.4Zm-.15 0-.2.35.1.05h.1v-.4Zm-4.24-2.3h-.4v.24l.21.12.2-.36Zm0-.7-.19-.36-.2.12v.24h.4Zm4.24-2.3v-.4h-.1l-.1.05.2.35Zm.14 0h.4v-.4h-.4v.4Zm-.18.56-3.3 1.7.37.72 3.3-1.7-.37-.72Zm-3.52 2.06v.06h.8v-.06h-.8Zm.22.42 3.3 1.7.37-.71-3.3-1.7-.37.7Zm3.08 1.34v.92h.8v-.92h-.8Zm.4.52h-.14v.8h.14v-.8Zm.05.04L6.4 15.07l-.38.7 4.24 2.3.38-.7ZM6.6 15.42v-.7h-.8v.7h.8Zm-.2-.35 4.23-2.3-.38-.7-4.24 2.3.38.7Zm4.04-2.25h.14v-.8h-.14v.8Zm-.26-.4v.92h.8v-.92h-.8Zm6.59-3.06v-.4h-.28l-.1.27.38.13Zm1 0 .38.14.2-.54h-.58v.4Zm-4.15 11.51v.4h.28l.1-.26-.38-.14Zm-1 0-.38-.13-.2.53h.57v-.4Zm4.15-11.1h1v-.8h-1v.8Zm.63-.54-4.15 11.5.75.28L18.16 9.5l-.75-.27Zm-3.78 11.24h-1v.8h1v-.8Zm-.63.54L17.15 9.5l-.75-.27-4.15 11.5.75.28Zm6.63-8.59.19-.35-.09-.05h-.1v.4Zm4.24 2.3h.4v-.24l-.21-.12-.2.36Zm0 .7.19.36.2-.12v-.24h-.4Zm-4.24 2.3v.4h.1l.09-.05-.19-.35Zm-.14 0h-.4v.4h.4v-.4Zm0-.92-.19-.35-.21.11v.24h.4Zm3.3-1.7.2.36.2-.12v-.24h-.4Zm0-.06h.4v-.24l-.2-.12-.2.36Zm-3.3-1.7h-.4v.24l.21.11.19-.35Zm0-.92v-.4h-.4v.4h.4Zm-.05.36 4.24 2.29.38-.7-4.24-2.3-.38.7Zm4.03 1.94v.7h.8v-.7h-.8Zm.2.35-4.23 2.3.38.7 4.24-2.3-.38-.7Zm-4.04 2.25h-.14v.8h.14v-.8Zm.26.4v-.92h-.8v.92h.8Zm-.22-.56 3.31-1.7-.36-.72-3.32 1.7.37.72Zm3.53-2.06v-.06h-.8v.06h.8Zm-.22-.42-3.31-1.7-.37.71 3.32 1.7.36-.7Zm-3.1-1.34v-.92h-.8v.92h.8Zm-.4-.52h.15v-.8h-.14v.8Z"/>
+  <circle cx="15" cy="15" r="14.25" fill="var(--text-color)" stroke="var(--background-color)"/>
+  <path fill="var(--background-color)" d="m10.6 13.34-3.3 1.7v.06l3.3 1.7v.92h-.15l-4.24-2.3v-.7l4.24-2.3h.14v.92Zm6.18-3.98h1l-4.15 11.51h-1l4.15-11.5Zm2.85 3.06 4.24 2.3v.7l-4.24 2.3h-.14v-.92l3.3-1.7v-.06l-3.3-1.7v-.92h.14Z"/>
+  <path fill="var(--background-color)" d="m10.6 13.34.18.35.21-.11v-.24h-.4Zm-3.3 1.7-.2-.36-.2.12v.24h.4Zm0 .06h-.4v.24l.2.12.2-.36Zm3.3 1.7h.4v-.24l-.22-.11-.19.35Zm0 .92v.4h.4v-.4h-.4Zm-.15 0-.2.35.1.05h.1v-.4Zm-4.24-2.3h-.4v.24l.21.12.2-.36Zm0-.7-.19-.36-.2.12v.24h.4Zm4.24-2.3v-.4h-.1l-.1.05.2.35Zm.14 0h.4v-.4h-.4v.4Zm-.18.56-3.3 1.7.37.72 3.3-1.7-.37-.72Zm-3.52 2.06v.06h.8v-.06h-.8Zm.22.42 3.3 1.7.37-.71-3.3-1.7-.37.7Zm3.08 1.34v.92h.8v-.92h-.8Zm.4.52h-.14v.8h.14v-.8Zm.05.04L6.4 15.07l-.38.7 4.24 2.3.38-.7ZM6.6 15.42v-.7h-.8v.7h.8Zm-.2-.35 4.23-2.3-.38-.7-4.24 2.3.38.7Zm4.04-2.25h.14v-.8h-.14v.8Zm-.26-.4v.92h.8v-.92h-.8Zm6.59-3.06v-.4h-.28l-.1.27.38.13Zm1 0 .38.14.2-.54h-.58v.4Zm-4.15 11.51v.4h.28l.1-.26-.38-.14Zm-1 0-.38-.13-.2.53h.57v-.4Zm4.15-11.1h1v-.8h-1v.8Zm.63-.54-4.15 11.5.75.28L18.16 9.5l-.75-.27Zm-3.78 11.24h-1v.8h1v-.8Zm-.63.54L17.15 9.5l-.75-.27-4.15 11.5.75.28Zm6.63-8.59.19-.35-.09-.05h-.1v.4Zm4.24 2.3h.4v-.24l-.21-.12-.2.36Zm0 .7.19.36.2-.12v-.24h-.4Zm-4.24 2.3v.4h.1l.09-.05-.19-.35Zm-.14 0h-.4v.4h.4v-.4Zm0-.92-.19-.35-.21.11v.24h.4Zm3.3-1.7.2.36.2-.12v-.24h-.4Zm0-.06h.4v-.24l-.2-.12-.2.36Zm-3.3-1.7h-.4v.24l.21.11.19-.35Zm0-.92v-.4h-.4v.4h.4Zm-.05.36 4.24 2.29.38-.7-4.24-2.3-.38.7Zm4.03 1.94v.7h.8v-.7h-.8Zm.2.35-4.23 2.3.38.7 4.24-2.3-.38-.7Zm-4.04 2.25h-.14v.8h.14v-.8Zm.26.4v-.92h-.8v.92h.8Zm-.22-.56 3.31-1.7-.36-.72-3.32 1.7.37.72Zm3.53-2.06v-.06h-.8v.06h.8Zm-.22-.42-3.31-1.7-.37.71 3.32 1.7.36-.7Zm-3.1-1.34v-.92h-.8v.92h.8Zm-.4-.52h.15v-.8h-.14v.8Z"/>
 `)
 
-export const SwapIcon = withIcon(`
+export const SwapIcon = withIcon(
+  `
 <path d="M1.97 1.97a.56.56 0 0 1 .44-.16l5.5.36c.14 0 .27.06.37.16l5.63 5.63c.4.4.4 1.06 0 1.46l-4.49 4.5c-.4.4-1.05.4-1.46 0L2.33 8.27a.56.56 0 0 1-.16-.36L1.8 2.4a.56.56 0 0 1 .16-.44Zm1.3 5.66 5.42 5.42 4.36-4.36-5.41-5.42-4.67-.3.3 4.66Z"/>
-`)
+`,
+  16
+)
 
 export const TezosIcon = withIcon(
   `<path 
       fill="var(--text-color)" 
       d="M9.23 11.96a4.18 4.18 0 0 0 1.12-.16v.9a3.75 3.75 0 0 1-1.36.23c-.63 0-1.12-.16-1.47-.49-.34-.34-.51-.91-.51-1.72V6.57H6v-.56l1.06-.44L7.48 4h.69v1.64h7.57v.8l-3.15 3.35c1.21.06 2.09.36 2.62.89.53.52.79 1.23.79 2.12a3.3 3.3 0 0 1-.41 1.67c-.27.49-.67.86-1.2 1.13-.51.28-1.14.4-1.87.4-.95 0-1.78-.16-2.5-.47v-1.08a5.53 5.53 0 0 0 2.43.56c.8 0 1.39-.21 1.78-.64.39-.42.58-.96.58-1.61 0-.65-.22-1.15-.65-1.5-.43-.37-1.15-.55-2.14-.55h-.8v-.88l3.05-3.26h-6.1v4.1c0 .86.35 1.29 1.06 1.29Z" 
-      />`
+      />`,
+  16
 )
 
-export const MintedIcon = withIcon(`
+export const MintedIcon = withIcon(
+  `
 <path d="M7 2.63a1.07 1.07 0 0 1 2.03 0l1.01 3.12h3.28c1.03 0 1.46 1.32.63 1.93l-2.66 1.93 1.02 3.11c.32.99-.81 1.8-1.65 1.2l-2.65-1.93-2.65 1.93c-.84.6-1.96-.21-1.65-1.2l1.02-3.11-2.65-1.93c-.84-.6-.41-1.93.62-1.93h3.28L7 2.63Zm1.01.4-1 3.07c-.14.44-.55.74-1.01.74H2.77l2.61 1.9c.38.27.53.75.39 1.19l-1 3.07 2.61-1.9c.38-.27.88-.27 1.26 0l2.6 1.9-.99-3.07a1.1 1.1 0 0 1 .39-1.2l2.6-1.89h-3.22c-.46 0-.87-.3-1.01-.74L8 3.03Z"/>
-`)
+`,
+  16
+)
 
-export const TradeIcon = withIcon(`
+export const TradeIcon = withIcon(
+  `
 <path d="M2.95 8.39v2.5c0 .34-.25.61-.56.61-.3 0-.56-.27-.56-.6V6.94c0-.34.25-.6.56-.6h3.67c.3 0 .56.26.56.6 0 .33-.25.6-.56.6H3.75l5.33 5.75c.22.24.22.62 0 .86a.53.53 0 0 1-.8 0L2.96 8.39Zm9.55 1.26-.02-.03-6.02-6.5a.64.64 0 0 1 0-.85.53.53 0 0 1 .79 0l6 6.48V6.29c0-.33.25-.6.56-.6.31 0 .56.27.56.6v3.96c0 .33-.25.6-.56.6h-3.67c-.3 0-.56-.27-.56-.6 0-.33.25-.6.56-.6h2.36Z"/>
-`)
+`,
+  16
+)
+
+// export const VideoIcon =
+//   withIcon(`<path fill="currentColor" d="M18 9h-2V7h2m0 6h-2v-2h2m0 6h-2v-2h2M8 9H6V7h2m0 6H6v-2h2m0 6H6v-2h2M18 3v2h-2V3H8v2H6V3H4v18h2v-2h2v2h8v-2h2v2h2V3h-2Z"/>
+// `)
+
+export const VideoIcon = withIcon(
+  `<g transform="translate(-240.658 -193.721)"><circle cx="252.673" cy="205.713" r="8.119" fill="var(--text-color)"/><path fill="var(--background-color)" d="M252.658 195.721c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10Zm0 18c-4.41 0-8-3.59-8-8a8 8 0 0 1 3.558-6.65 7.954 7.954 0 0 1 4.442-1.35c4.41 0 8 3.59 8 8s-3.59 8-8 8Zm-2-3.5 6-4.5-6-4.5v9Z" paint-order="fill"/></g> 
+`,
+  24
+)
diff --git a/src/pages/objkt-display/tabs/History.jsx b/src/pages/objkt-display/tabs/History.jsx
@@ -125,7 +125,7 @@ export const History = () => {
                 key={`t-${e.id}`}
                 eventType={
                   <>
-                    <TradeIcon size={14} viewBox={16} />
+                    <TradeIcon size={14} />
                     <a
                       href={`https://tzkt.io/${e.ophash}`}
                       target="_blank"
@@ -153,7 +153,7 @@ export const History = () => {
                 key={`t-${e.id}`}
                 eventType={
                   <>
-                    <SwapIcon size={14} viewBox={16} />
+                    <SwapIcon size={14} />
                     <a
                       href={`https://tzkt.io/${e.ophash}`}
                       target="_blank"
@@ -190,7 +190,7 @@ export const History = () => {
                 key={`t-${e.id}`}
                 eventType={
                   <>
-                    <TradeIcon size={14} viewBox={16} />
+                    <TradeIcon size={14} />
                     <a
                       href={`https://tzkt.io/${e.ophash}`}
                       target="_blank"
@@ -213,7 +213,7 @@ export const History = () => {
                 key={`t-${e.id}`}
                 eventType={
                   <>
-                    <BurnIcon size={14} viewBox={16} />
+                    <BurnIcon size={14} />
                     <a
                       href={`https://tzkt.io/${e.ophash}`}
                       target="_blank"
@@ -243,7 +243,7 @@ export const History = () => {
                 key={`t-${e.id}`}
                 eventType={
                   <>
-                    <MintedIcon size={14} viewBox={16} />
+                    <MintedIcon size={14} />
                     <div className={styles.history__mint__op}>Minted</div>
                   </>
                 }

diff --git a/src/stories/Buttons.stories.ts b/src/stories/Buttons.stories.ts
@@ -4,7 +4,6 @@ import type { Meta, StoryObj } from '@storybook/react'
 const meta: Meta<typeof Button> = {
   title: 'Atoms/Button',
   component: Button,
-
   argTypes: {
     onClick: { action: 'clicked' },
   },