In this article, we review how Zustand is used in workbench package in motia codebase. We will look at:

1. useFlowStore

2. useTabsStore

Press enter or click to view image in full size

We picked only two stores as examples.

useFlowStore

useFlowStore is used in packages/workbench/…/flow/flow-page.tsx as shown below:

import { useFlowStore } from '@/stores/use-flow-store'
import { FlowConfigResponse, FlowResponse } from '@/types/flow'
import { useStreamItem } from '@motiadev/stream-client-react'
import { FlowView } from './flow-view'

export const FlowPage = () => {
  const selectedFlowId = useFlowStore((state) => state.selectedFlowId)

and this is defined in packages/workbench/stores/use-flow-store.ts as shown below:

export const useFlowStore = create(
  persist<UseFlowStore>(
    (set) => ({
      flows: [],
      setFlows: (flows) => set({ flows }),
      selectFlowId: (flowId) =>
        set((state) => {
          if (state.selectedFlowId === flowId) {
            return state
          }
          return { selectedFlowId: flowId }
        }),
    }),
    {
      name: 'motia-flow-storage',
      storage: createJSONStorage(() => localStorage),
    },
  ),
)

useTabsStore

useTabsStore is used in packages/workbench/src/App.tsx as shown below:

import { StatesPage } from './components/states/states-page'
import { useTabsStore } from './stores/use-tabs-store'

enum TabLocation {
  TOP = 'top',
  BOTTOM = 'bottom',
}

export const App: FC = () => {
  const tab = useTabsStore((state) => state.tab)
  const setTopTab = useTabsStore((state) => state.setTopTab)
  const setBottomTab = useTabsStore((state) => state.setBottomTab)

and this useTabsStore is defined as shown below:

import { create } from "zustand";
import { createJSONStorage, persist } from "zustand/middleware";

interface TabsState {
  tab: Record<string, string>;
  setTopTab: (tab: string) => void;
  setBottomTab: (tab: string) => void;
}

export const useTabsStore = create(persist<TabsState>((set) => ({
  tab: {
    top: "flow",
    bottom: "tracing",
  },
  setTopTab: (tab) => set((state) => ({ tab: { ...state.tab, top: tab } })),
  setBottomTab: (tab) => set((state) => ({ tab: { ...state.tab, bottom: tab } })),
}), {
  name: 'motia-tabs-storage',
  storage: createJSONStorage(() => localStorage),
}))

About me:

Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.

Email: ramu.narasinga@gmail.com

Want to learn from open-source? Solve challenges inspired by open-source projects.

References:

1. https://github.com/MotiaDev/motia/blob/main/packages/workbench/src/components/flow/flow-page.tsx#L6

2. https://github.com/MotiaDev/motia/blob/main/packages/workbench/src/stores/use-flow-store.ts#L11

3. https://github.com/MotiaDev/motia/blob/main/packages/workbench/src/App.tsx#L22

4. https://github.com/MotiaDev/motia/blob/main/packages/workbench/src/stores/use-tabs-store.ts