chore: ✨ updated storybook stories

Just fixed them

.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: {

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(
@@ -430,8 +431,6 @@ export const useUserStore = create<UserState>()(
             }
           } catch (error) {
             showError('Collect', error)
-          } finally {
-            close()
           }
         },
         cancelV1: async (swap_id) => {

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' },
   },

src/stories/Feedback.mdx

@@ -0,0 +1,37 @@
+import { Canvas, Meta, Story } from '@storybook/blocks'
+
+import * as FeedbackStories from './Feedback.stories'
+import {
+  ArgsTable,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  Subtitle,
+  Title,
+} from '@storybook/blocks'
+
+<Meta of={FeedbackStories} />
+
+# Feedback
+
+Pretty rough for now, the feedback component is an HOC controlled by a
+[Zustand](https://zustand-demo.pmnd.rs/) store.
+
+`useModalStore`, the hook associated with the zustand store has a few methods, where `message` can be a markdown string.
+
+- `step(title:string,message:string, start?:boolean)`: A progress step without buttons, `start` is an optional bool to scroll to top.
+- `show(title:string,message:string)`: Show a dialog with a close button.
+
+## Random Notes
+
+- The `MintStore` and methods in `@data/ipfs` also make use of the feedback automatically and provide feedback.
+- The `UserStore` has a `handleOp` method that takes a [WalletOperationBatch](https://tezostaquito.io/typedoc/classes/_taquito_taquito.walletoperationbatch.html) or a [ContractMethod(Wallet)](https://tezostaquito.io/typedoc/classes/_taquito_taquito.contractmethod.html) and deals with sending the tx, reporting feedback to the user using the above methods. This is now shared by all the contract call on teia.
+
+<Canvas columns={1}>
+  {/* <Title/> */}
+  {/* <Subtitle /> */}
+  {/* <Description /> */}
+  {/* <Primary /> */}
+  {/* <ArgsTable story={FeedbackStories.Transactions} /> */}
+  <Story of={FeedbackStories.Transactions} />
+</Canvas>

src/stories/Feedback.stories.tsx

@@ -0,0 +1,63 @@
+import { Button } from '@atoms/button'
+import { FeedbackComponent } from '@components/feedback'
+import { useModalStore } from '@context/modalStore'
+import { ArgsTable, PRIMARY_STORY, Title } from '@storybook/blocks'
+// import { fetchObjktDetails } from '@data/api'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const Decorator = (Story, context) => {
+  const [step, show] = useModalStore((st) => [st.step, st.show])
+
+  return (
+    <div>
+      <Button
+        shadow_box
+        onClick={async () => {
+          step(
+            'Example',
+            'The body can contain [markdown](https://www.markdownguide.org/)'
+          )
+          setTimeout(
+            () => show('Example', 'Once done you can show a closing dialog 🔥'),
+            2500
+          )
+        }}
+      >
+        Example
+      </Button>
+      <Story />
+    </div>
+  )
+}
+const meta: Meta<typeof FeedbackComponent> = {
+  title: 'Components/FeedbackComponent',
+  component: FeedbackComponent,
+
+  tags: ['autodocs'],
+  decorators: [Decorator],
+
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          {/* <Subtitle /> */}
+          {/* <Description /> */}
+          {/* <Primary /> */}
+          <ArgsTable story={PRIMARY_STORY} />
+          Check the other stories in the sidebar for examples
+          {/* <Stories /> */}
+        </>
+      ),
+    },
+  },
+  argTypes: {},
+}
+
+export default meta
+type Story = StoryObj<typeof FeedbackComponent>
+
+export const Transactions: Story = {
+  render: (args, { loaded: { data } }) => <FeedbackComponent />,
+  loaders: [],
+}

src/stories/Select.stories.tsx

@@ -19,32 +19,40 @@ const meta: Meta<typeof Select> = {
   tags: ['autodocs'],
 
   argTypes: {},
-  parameters: {
-    docs: {
-      page: () => (
-        <>
-          <Title />
-          <Subtitle />
-          <Description />
-          <Primary />
-          <ArgsTable story={PRIMARY_STORY} />
-          Check the other stories in the sidebar for examples
-          {/* <Stories /> */}
-        </>
-      ),
-    },
-  },
+  // parameters: {
+  //   docs: {
+  //     page: () => (
+  //       <>
+  //         <Title />
+  //         <Subtitle />
+  //         <Description />
+  //         <Primary />
+  //         <ArgsTable story={PRIMARY_STORY} />
+  //         Check the other stories in the sidebar for examples
+  //         {/* <Stories /> */}
+  //       </>
+  //     ),
+  //   },
+  // },
 }
 
 export default meta
 type Story = StoryObj<typeof Select>
 
 export const Base: Story = {
+  decorators: [
+    (Story, context) => (
+      <div>
+        <p>This select has search enabled. This is powered by react-select</p>
+        <Story />
+      </div>
+    ),
+  ],
   args: {
     options: LANGUAGES_OPTIONS,
     search: true,
   },
 }
 export const Themes = {
-  render: () => <ThemeSelection />,
+  render: () => <ThemeSelection apply />,
 }

src/stories/shared.tsx

@@ -1,45 +1,52 @@
 // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
 import React from 'react'
-import { LocalSettingsProvider } from '@context'
 import { MemoryRouter } from 'react-router'
 import { IconCache } from '@utils/with-icon'
-import useLocalSettings from '@hooks/use-local-settings'
 import { useEffect } from 'react'
+import { useLocalSettings, type Theme } from '@context/localSettingsStore'
+import { DecoratorFunction } from '@storybook/types'
 
-const ThemeProvider = ({ theme, children }) => {
-  const { setTheme } = useLocalSettings()
+interface ThemeProviderProps {
+  theme: Theme
+  children: React.ReactNode
+}
+
+const ThemeProvider = ({ theme, children }: ThemeProviderProps) => {
+  const setTheme = useLocalSettings((st) => st.setTheme)
 
   useEffect(() => {
-    setTheme(theme)
-  }, [setTheme, theme])
+    if (theme) {
+      setTheme(theme, true)
+    }
+  }, [theme, setTheme])
 
   return <>{children}</>
 }
 
+const MainDecorator = (Story, context) => (
+  <MemoryRouter initialEntries={['/']}>
+    <IconCache.Provider value={{}}>
+      <ThemeProvider theme={context.globals.theme}>
+        <div
+          style={{
+            margin: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '100%',
+          }}
+        >
+          <Story />
+        </div>
+      </ThemeProvider>
+    </IconCache.Provider>
+  </MemoryRouter>
+)
+
 /**
  * these must be added to decorator array by end, for now
  * I'm simply using a theme one to add all teia's themes and a fake memory router
  */
-export const decorators = {
-  main: (Story, context) => (
-    <MemoryRouter initialEntries={['/']}>
-      <IconCache.Provider value={{}}>
-        <LocalSettingsProvider>
-          <ThemeProvider theme={context.globals.theme}>
-            <div
-              style={{
-                margin: 0,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100%',
-              }}
-            >
-              <Story />
-            </div>
-          </ThemeProvider>
-        </LocalSettingsProvider>
-      </IconCache.Provider>
-    </MemoryRouter>
-  ),
+export const decorators: { [key: string]: DecoratorFunction } = {
+  main: MainDecorator,
 }