fix v2: settings panel, sidebar

apps/storybook/src/stories/notion/settings-panel/settings-panel.stories.tsx

@@ -0,0 +1,61 @@
+import { useEffect } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+import { SettingsPanel2, useSettingsStore2 } from "@swy/notion";
+import {
+  mockConnections,
+  mockSettings,
+  mockUploadFile,
+} from "@swy/notion/mock";
+import { ModalProvider } from "@swy/ui/shared";
+
+import { ModalTrigger } from "./settings";
+
+const meta = {
+  title: "notion/Settings Panel",
+  component: SettingsPanel2,
+  parameters: { layout: "centered" },
+  tags: ["!autodocs"],
+  args: {
+    updateSettings: fn(),
+    uploadFile: mockUploadFile,
+    people: {},
+    connections: {
+      load: () => Promise.resolve(mockConnections),
+    },
+  },
+} satisfies Meta<typeof SettingsPanel2>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const RenderWithZustand: Story["render"] = (props) => {
+  const { settings, update } = useSettingsStore2();
+
+  useEffect(() => {
+    update(props.settings);
+  }, [props.settings, update]);
+
+  return (
+    <div className="flex h-[calc(100vh-100px)] max-h-[720px] w-[calc(100vw-100px)] max-w-[1150px] rounded border-solid p-0 shadow">
+      <SettingsPanel2 {...props} settings={settings} updateSettings={update} />
+    </div>
+  );
+};
+
+export const Default: Story = {
+  args: {
+    settings: mockSettings,
+  },
+  render: RenderWithZustand,
+};
+
+export const Modal: Story = {
+  args: { settings: mockSettings },
+  render: ({ settings }) => (
+    <ModalProvider>
+      <ModalTrigger initialData={settings} />
+    </ModalProvider>
+  ),
+};

apps/storybook/src/stories/notion/settings-panel/settings.tsx

@@ -1,19 +1,39 @@
 "use client";
 
+import { useEffect } from "react";
 import { SettingsIcon } from "lucide-react";
 
-import { SettingsPanel, SettingsPanelProps, SettingsStore } from "@swy/notion";
-import { mockConnections } from "@swy/notion/mock";
+import {
+  SettingsPanel2,
+  useSettingsStore2,
+  type SettingsStore,
+} from "@swy/notion";
+import { mockConnections, mockUploadFile } from "@swy/notion/mock";
 import { Button, Dialog, DialogContent } from "@swy/ui/shadcn";
 import { useModal } from "@swy/ui/shared";
 
-const Panel = () => {
-  const { data, isOpen, setClose } = useModal<SettingsStore>();
-  const props: SettingsPanelProps = {
-    settings: data,
-    onUpdate: ({ account }) => console.log(`mutating`, { account }),
-    onFetchConnections: () => Promise.resolve(mockConnections),
-  };
+export const ModalTrigger = (props: { initialData: SettingsStore }) => {
+  const { setOpen } = useModal();
+  const handleClick = () => setOpen(<SettingsModal {...props} />);
+
+  return (
+    <Button size="icon" onClick={handleClick}>
+      <SettingsIcon />
+    </Button>
+  );
+};
+
+export const SettingsModal = ({
+  initialData,
+}: {
+  initialData: SettingsStore;
+}) => {
+  const { isOpen, setClose } = useModal<SettingsStore>();
+  const { settings, update } = useSettingsStore2();
+
+  useEffect(() => {
+    update(initialData);
+  }, [initialData, update]);
 
   return (
     <Dialog open={isOpen} onOpenChange={setClose}>
@@ -23,20 +43,16 @@ const Panel = () => {
         className="flex h-[calc(100vh-100px)] max-h-[720px] w-[calc(100vw-100px)] max-w-[1150px] rounded border-none p-0 shadow"
         onClick={(e) => e.stopPropagation()}
       >
-        <SettingsPanel {...props} />
+        <SettingsPanel2
+          settings={settings}
+          updateSettings={update}
+          uploadFile={mockUploadFile}
+          people={{}}
+          connections={{
+            load: () => Promise.resolve(mockConnections),
+          }}
+        />
       </DialogContent>
     </Dialog>
   );
 };
-
-export const Settings = ({ initialData }: { initialData: SettingsStore }) => {
-  const { setOpen } = useModal();
-  const handleClick = () =>
-    setOpen(<Panel />, () => Promise.resolve(initialData));
-
-  return (
-    <Button size="icon" onClick={handleClick}>
-      <SettingsIcon />
-    </Button>
-  );
-};