Show project picker when no project id is in main.js

.storybook/main.ts

@@ -1,7 +1,4 @@
 import type { StorybookConfig } from "@storybook/react-vite";
-
-const CHROMATIC_BASE_URL = process.env.CHROMATIC_BASE_URL || "https://www.chromatic.com";
-
 const config: StorybookConfig = {
   addons: [
     {
@@ -17,16 +14,13 @@ const config: StorybookConfig = {
       name: "../dist/index.js",
       options: {
         projectToken: "chpt_c4206d1157d8947",
+        projectId: "6480e1b0042842f149cfd74c", // Default to the the production project of this addon - WILL BE MOVED TO preview.tsx since we can't access options in the manager.
       },
     },
   ],
   docs: {
     autodocs: "tag",
   },
-  env: (config) => ({
-    ...config,
-    CHROMATIC_BASE_URL,
-  }),
   framework: {
     name: "@storybook/react-vite",
     options: {},
@@ -35,5 +29,4 @@ const config: StorybookConfig = {
   stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
   logLevel: "debug",
 };
-
 export default config;

.storybook/preview.tsx

@@ -1,12 +1,4 @@
-import {
-  Global,
-  ThemeProvider,
-  themes,
-  createReset,
-  convert,
-  styled,
-  useTheme,
-} from "@storybook/theming";
+import { Global, ThemeProvider, themes, createReset, convert, styled, useTheme } from "@storybook/theming";
 import type { Preview } from "@storybook/react";
 import { initialize, mswDecorator } from "msw-storybook-addon";
 import React from "react";
@@ -15,44 +7,40 @@ import React from "react";
 initialize({
   onUnhandledRequest(req) {
     if (req.url.origin !== document.location.origin) {
-      console.error(
-        `[MSW] %s %s %s (UNHANDLED)`,
-        new Date().toTimeString().slice(0, 8),
-        req.method.toUpperCase(),
-        req.url.href
-      );
+      console.error(`[MSW] %s %s %s (UNHANDLED)`, new Date().toTimeString().slice(0, 8), req.method.toUpperCase(), req.url.href);
     }
-  },
-});
-
-const Panels = styled.div<{ orientation: "right" | "bottom" }>(
-  ({ orientation }) => ({
-    flexDirection: orientation === "right" ? "row" : "column",
-  }),
-  {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    gap: 40,
-    margin: 40,
   }
-);
-
-const Panel = styled.div<{ orientation: "right" | "bottom" }>(
-  ({ orientation }) => ({
-    width: orientation === "right" ? 420 : 880,
-    height: orientation === "right" ? 640 : 300,
-    overflow: "auto",
-  }),
-  ({ theme }) => ({
-    position: "relative",
-    outline: `1px solid ${theme.color.border}`,
-    background: theme.background.content,
-    color: theme.color.defaultText,
-    fontSize: theme.typography.size.s2 - 1,
-  })
-);
-
+});
+const Panels = styled.div<{
+  orientation: "right" | "bottom";
+}>(({
+  orientation
+}) => ({
+  flexDirection: orientation === "right" ? "row" : "column"
+}), {
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  gap: 40,
+  margin: 40
+});
+const Panel = styled.div<{
+  orientation: "right" | "bottom";
+}>(({
+  orientation
+}) => ({
+  width: orientation === "right" ? 420 : 880,
+  height: orientation === "right" ? 640 : 300,
+  overflow: "auto"
+}), ({
+  theme
+}) => ({
+  position: "relative",
+  outline: `1px solid ${theme.color.border}`,
+  background: theme.background.content,
+  color: theme.color.defaultText,
+  fontSize: theme.typography.size.s2 - 1
+}));
 const ThemedSetRoot = () => {
   const theme = useTheme();
   React.useEffect(() => {
@@ -62,77 +50,87 @@ const ThemedSetRoot = () => {
   });
   return null;
 };
-
 export const decorators = [
   // Provide the MSW addon decorator globally
   mswDecorator,
-
   // Render two panels side-by-side or stacked, depending on selected orientation
   // Note this assumes any play functions are equipped to deal with multiple canvases
-  (StoryFn, { globals, parameters }) => {
+  (StoryFn, {
+    globals,
+    parameters
+  }) => {
     const theme = globals.theme || parameters.theme || "right";
-    return theme === "light" || theme === "dark" ? (
-      <ThemeProvider theme={convert(themes[theme])}>
+    return theme === "light" || theme === "dark" ? <ThemeProvider theme={convert(themes[theme])}>
+      <Global styles={createReset} />
+      <Global styles={{
+        "#storybook-root": {
+          height: "100vh",
+          padding: 0
+        }
+      }}></Global>
+      <ThemedSetRoot />
+      <StoryFn />
+    </ThemeProvider> : <>
+      <ThemeProvider theme={convert(themes.light)}>
         <Global styles={createReset} />
-        <Global styles={{ "#storybook-root": { height: "100vh", padding: 0 } }}></Global>
         <ThemedSetRoot />
-        <StoryFn />
       </ThemeProvider>
-    ) : (
-      <>
+      <Panels orientation={theme}>
         <ThemeProvider theme={convert(themes.light)}>
-          <Global styles={createReset} />
-          <ThemedSetRoot />
+          <Panel orientation={theme} data-canvas={theme}>
+            <StoryFn />
+          </Panel>
         </ThemeProvider>
-        <Panels orientation={theme}>
-          <ThemeProvider theme={convert(themes.light)}>
-            <Panel orientation={theme} data-canvas={theme}>
-              <StoryFn />
-            </Panel>
-          </ThemeProvider>
-          <ThemeProvider theme={convert(themes.dark)}>
-            <Panel orientation={theme} data-canvas={theme}>
-              <StoryFn />
-            </Panel>
-          </ThemeProvider>
-        </Panels>
-      </>
-    );
-  },
-];
-
+        <ThemeProvider theme={convert(themes.dark)}>
+          <Panel orientation={theme} data-canvas={theme}>
+            <StoryFn />
+          </Panel>
+        </ThemeProvider>
+      </Panels>
+    </>;
+  }];
 export const parameters: Preview["parameters"] = {
   actions: {
-    argTypesRegex: "^on[A-Z].*",
+    argTypesRegex: "^on[A-Z].*"
   },
   backgrounds: {
-    disable: true,
+    disable: true
   },
   chromatic: {
-    viewports: [960],
+    viewports: [960]
   },
   controls: {
     matchers: {
       color: /(background|color)$/i,
-      date: /Date$/,
-    },
+      date: /Date$/
+    }
   },
-  layout: "fullscreen",
+  layout: "fullscreen"
 };
-
 export const globalTypes = {
   theme: {
     name: "Theme",
     description: "Panel theme",
     toolbar: {
       icon: "sidebaralt",
       title: "Theme",
-      items: [
-        { value: "light", icon: "circlehollow", title: "Light" },
-        { value: "dark", icon: "circle", title: "Dark" },
-        { value: "right", icon: "sidebaralt", title: "Right 2-up" },
-        { value: "bottom", icon: "bottombar", title: "Bottom 2-up" },
-      ],
-    },
-  },
+      items: [{
+        value: "light",
+        icon: "circlehollow",
+        title: "Light"
+      }, {
+        value: "dark",
+        icon: "circle",
+        title: "Dark"
+      }, {
+        value: "right",
+        icon: "sidebaralt",
+        title: "Right 2-up"
+      }, {
+        value: "bottom",
+        icon: "bottombar",
+        title: "Bottom 2-up"
+      }]
+    }
+  }
 };

package.json

@@ -51,9 +51,11 @@
     "lint": "eslint src --max-warnings 0 --report-unused-disable-directives",
     "release": "pnpm run build && auto shipit",
     "start": "run-p build:watch 'storybook --quiet'",
-    "storybook": "storybook dev -p 6006"
+    "prerelease": "zx scripts/prepublish-checks.mjs",
+    "storybook": "CHROMATIC_ADDON_NAME='../dist/index.js' storybook dev -p 6006"
   },
   "dependencies": {
+    "@storybook/csf-tools": "^7.1.0-alpha.34",
     "@storybook/design-system": "^7.15.11",
     "chromatic": "^6.19.8",
     "date-fns": "^2.30.0",