Apple Silicon support (replace node-sass; enable node 18; upgrade storybook)

packages/apps/storybook/.gitignore

@@ -1 +1 @@
-/storybook-static
+/storybook-static

packages/apps/storybook/.storybook/main.ts

@@ -0,0 +1,32 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { StorybookConfig } from "@storybook/react-vite"
+const config: StorybookConfig = {
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "storybook-dark-mode",
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@itwin/storybook-auth-addon",
+    "../src/addon/register.tsx",
+  ],
+  viteFinal: (config, options) => {
+    const oldDefine = config.define
+    config.define = {
+      ...oldDefine,
+      "process.env": {
+        STORYBOOK_AUTH_CLIENT_ID: process.env.STORYBOOK_AUTH_CLIENT_ID
+      }
+    }
+    return config
+  },
+  staticDirs: ['../node_modules/@itwin/storybook-auth-addon/build'],
+};
+
+export default config;

packages/apps/storybook/.storybook/preview.js → packages/apps/storybook/.storybook/preview.ts

@@ -2,7 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import addons from "@storybook/addons";
+import { addons } from "@storybook/addons";
 import { themes } from "@storybook/theming";
 
 import { darkTheme, lightTheme } from "./itwinTheme";
@@ -12,7 +12,7 @@ const channel = addons.getChannel();
 
 // switch body class for story along with interface theme
 channel.on("DARK_MODE", (isDark) => {
-  document.body.dataset.iuiTheme = isDark ? 'dark' : 'light';
+  document.body.dataset.iuiTheme = isDark ? "dark" : "light";
 });
 
 export const parameters = {
@@ -28,7 +28,18 @@ export const parameters = {
   },
   authClientConfig: {
     clientId: process.env.STORYBOOK_AUTH_CLIENT_ID,
-    scope: ["imodels:read", "imodels:modify", "itwins:modify", "itwins:read"].join(" "),
+    scope: [
+      "imodels:read",
+      "imodels:modify",
+      "itwins:modify",
+      "itwins:read",
+    ].join(" "),
     authority: "https://qa-ims.bentley.com",
   },
 };
+
+export const globalTypes = {
+  accessToken: "",
+  iTwinId: ""
+}
+

packages/apps/storybook/package.json

@@ -3,7 +3,6 @@
   "version": "0.0.1",
   "private": true,
   "devDependencies": {
-    "@babel/core": "^7.12.10",
     "@bentley/bentleyjs-core": "2.11.0",
     "@bentley/frontend-authorization-client": "2.11.0",
     "@bentley/itwin-client": "2.11.0",
@@ -14,20 +13,19 @@
     "@itwin/itwinui-react": "^2.11.4",
     "@itwin/manage-versions-react": "~1.0.0",
     "@itwin/storybook-auth-addon": "^0.1.0",
-    "@storybook/addon-actions": "^6.2.5",
-    "@storybook/addon-essentials": "^6.2.5",
-    "@storybook/addon-links": "^6.2.5",
-    "@storybook/addons": "^6.2.5",
-    "@storybook/api": "^6.2.5",
-    "@storybook/core-events": "^6.2.5",
-    "@storybook/react": "^6.2.5",
-    "@storybook/theming": "^6.2.5",
+    "@storybook/addon-actions": "^7.4.0",
+    "@storybook/addon-essentials": "^7.4.0",
+    "@storybook/addon-links": "^7.4.0",
+    "@storybook/addons": "~7.4.1",
+    "@storybook/api": "^7.4.0",
+    "@storybook/core-events": "^7.4.0",
+    "@storybook/react": "^7.4.0",
+    "@storybook/theming": "^7.4.0",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.0",
     "@typescript-eslint/eslint-plugin": "^4.20.0",
     "@typescript-eslint/parser": "^4.20.0",
     "babel-eslint": "^10.0.0",
-    "babel-loader": "^8.2.2",
     "eslint-config-airbnb": "^0.0.4",
     "eslint-config-prettier": "^6.11.0",
     "eslint-config-react-app": "^6.0.0",
@@ -42,13 +40,22 @@
     "react-dom": "^17.0.2",
     "react": "^17.0.2",
     "rimraf": "^3.0.2",
-    "storybook-dark-mode": "^1.0.7",
-    "webpack": "^5.28.0"
+    "storybook-dark-mode": "^3.0.1",
+    "typescript": "~5.1.6",
+    "webpack": "^5.28.0",
+    "storybook": "~7.4.0",
+    "@storybook/react-vite": "~7.4.0"
   },
   "scripts": {
-    "start": "start-storybook -s ./node_modules/@itwin/storybook-auth-addon/build -p 6006",
+    "start": "storybook dev -p 6006",
     "build": "",
-    "test": "build-storybook -s ./node_modules/@itwin/storybook-auth-addon/build --loglevel error --quiet",
+    "test": "storybook build  --loglevel error --quiet",
     "clean": "rimraf storybook-static"
+  },
+  "dependencies": {
+    "vite": "~4.4.9",
+    "@storybook/preview-api": "~7.4.1",
+    "@storybook/preview": "~7.4.1",
+    "@storybook/components": "~7.4.1"
   }
 }

packages/apps/storybook/src/addon/register.js → packages/apps/storybook/src/addon/register.tsx

@@ -3,7 +3,7 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 /* eslint-disable react-hooks/rules-of-hooks */
-import addons, { types } from "@storybook/addons";
+import { addons, types } from "@storybook/addons";
 import { useAddonState, useArgTypes, useGlobals } from "@storybook/api";
 import {
   IconButton,
@@ -14,6 +14,11 @@ import {
 } from "@storybook/components";
 import React from "react";
 
+type AddonStateProps = {
+  mustLoad: boolean;
+  projects: { displayName: React.ReactNode; id?: string }[];
+};
+
 addons.register("project/toolbar", () => {
   addons.add("project-toolbar-addon/toolbar", {
     title: "Project Selection toolbar",
@@ -25,10 +30,13 @@ addons.register("project/toolbar", () => {
       const [globals, updateGlobals] = useGlobals();
       const { iTwinId: withITwinId } = useArgTypes();
 
-      const [state, setState] = useAddonState("project/toolbar", {
-        mustLoad: true,
-        projects: [],
-      });
+      const [state, setState] = useAddonState<AddonStateProps>(
+        "project/toolbar",
+        {
+          mustLoad: true,
+          projects: [],
+        }
+      );
 
       const fetchProjects = React.useCallback(async () => {
         if (!state.mustLoad || !globals.accessToken) {
@@ -65,6 +73,7 @@ addons.register("project/toolbar", () => {
                 ),
               },
             ],
+            mustLoad: state.mustLoad,
           });
           const response = await fetch(
             "https://qa-api.bentley.com/itwins/favorites?subClass=Project",
@@ -84,7 +93,7 @@ addons.register("project/toolbar", () => {
                   "'Favorite' a project in CONNECT (QA) to show it here, refresh this page to see the results",
               });
             }
-            setState({ projects: projects });
+            setState({ ...state, projects: projects });
           }
         } catch (e) {
           console.error("Error", e);
@@ -93,9 +102,10 @@ addons.register("project/toolbar", () => {
 
       const buildLinks = React.useCallback(
         (onHide) =>
-          state.projects.map((project) => ({
-            key: project.id || project.displayName || "Loading State",
-            id: project.id,
+          state.projects?.map((project) => ({
+            key:
+              project.id || project.displayName?.toString() || "Loading State",
+            id: project.id || "",
             title: project.displayName,
             onClick: () => {
               updateGlobals({
@@ -111,8 +121,9 @@ addons.register("project/toolbar", () => {
       return withITwinId && globals.accessToken ? (
         <WithTooltip
           placement="top"
-          trigger="hover"
-          closeOnClick
+          withArrows
+          trigger="click"
+          closeOnOutsideClick
           tooltip={({ onHide }) => {
             return <TooltipLinkList links={buildLinks(onHide)} />;
           }}

packages/apps/storybook/src/create-imodel/CreateIModel.stories.tsx

@@ -10,8 +10,8 @@ import {
   IModelName,
   UploadImage,
 } from "@itwin/create-imodel-react";
-import { LabeledInput, LabeledSelect } from "@itwin/itwinui-react";
-import { Meta, Story } from "@storybook/react/types-6-0";
+// import { LabeledInput,  } from "@itwin/itwinui-react";
+// import { Meta, Story } from "@storybook/react/types-6-0";
 import React from "react";
 
 import {
@@ -32,44 +32,40 @@ export default {
     apiOverrides: { serverEnvironmentPrefix: "dev" },
     iTwinId: "de47c5ad-5657-42b8-a2bc-f2b8bf84cd4b",
   },
-} as Meta;
+};
 
-const root = document.getElementById("root") as HTMLElement;
-root.style.height = "90vh";
+// const root = document.getElementById("root") as HTMLElement;
+// root.style.height = "90vh";
 
-export const Create: Story<CreateIModelProps> = withAccessTokenOverride(
-  (args) => {
-    return (
-      <>
-        <CreateIModel {...args} />
-      </>
-    );
-  }
-);
+export const Create = withAccessTokenOverride((args: any) => {
+  return (
+    <>
+      <CreateIModel {...args} />
+    </>
+  );
+});
 
-export const WithExtentMap: Story<CreateIModelProps> = withAccessTokenOverride(
-  (args) => {
-    return (
-      <CreateIModel
-        {...args}
-        extentComponent={
-          <iframe
-            title="iModel Extent Map"
-            src="https://www.google.com/maps/embed"
-            width="100%"
-            height="100%"
-            frameBorder="0"
-            style={{ border: 0 }}
-            allowFullScreen={false}
-          ></iframe>
-        }
-      />
-    );
-  }
-);
+export const WithExtentMap = withAccessTokenOverride((args: any) => {
+  return (
+    <CreateIModel
+      {...args}
+      extentComponent={
+        <iframe
+          title="iModel Extent Map"
+          src="https://www.google.com/maps/embed"
+          width="100%"
+          height="100%"
+          frameBorder="0"
+          style={{ border: 0 }}
+          allowFullScreen={false}
+        ></iframe>
+      }
+    />
+  );
+});
 
-export const CreateIModelCustomized: Story<CreateIModelProps> =
-  withAccessTokenOverride((args) => {
+export const CreateIModelCustomized: CreateIModelProps =
+  withAccessTokenOverride((args: any) => {
     return (
       <>
         <CreateIModel {...args}>
@@ -82,7 +78,7 @@ export const CreateIModelCustomized: Story<CreateIModelProps> =
             }}
           >
             <IModelName />
-            <LabeledInput
+            {/* <LabeledInput
               label={"Sub title"}
               name="test"
               value={""}
@@ -99,7 +95,7 @@ export const CreateIModelCustomized: Story<CreateIModelProps> =
               ]}
               onChange={() => undefined}
               className="iac-imodel-input-element"
-            />
+            /> */}
             <IModelDescription />
             <UploadImage />
             <ButtonBar />

packages/apps/storybook/src/create-imodel/UpdateIModel.stories.tsx

@@ -6,7 +6,7 @@ import {
   UpdateIModel as ExternalComponent,
   UpdateIModelProps,
 } from "@itwin/create-imodel-react";
-import { Meta, Story } from "@storybook/react/types-6-0";
+// import { Meta, Story } from "@storybook/react/types-6-0";
 import React from "react";
 
 import {
@@ -32,20 +32,18 @@ export default {
   component: UpdateIModel,
   excludeStories: ["UpdateIModel"],
   argTypes: accessTokenArgTypes,
-} as Meta;
+};
 
-const root = document.getElementById("root") as HTMLElement;
-root.style.height = "90vh";
+// const root = document.getElementById("root") as HTMLElement;
+// root.style.height = "90vh";
 
-export const Update: Story<UpdateIModelProps> = withAccessTokenOverride(
-  (args) => {
-    return (
-      <>
-        <UpdateIModel {...args} />
-      </>
-    );
-  }
-);
+export const Update = withAccessTokenOverride((args: any) => {
+  return (
+    <>
+      <UpdateIModel {...args} />
+    </>
+  );
+});
 
 Update.args = {
   apiOverrides: { serverEnvironmentPrefix: "dev" },