@procore/storybook-addon 4.5.1 → 4.6.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @procore/storybook-addon
 
+## 4.6.0
+
+### Minor Changes
+
+- 5544bb4: upgrade Storybook to v9
+
 ## 4.5.1
 
 ### Patch Changes

package/README.md

@@ -8,7 +8,7 @@ An addon to customize procore theme and adds common used configuration.
 yarn add -D @procore/storybook-addon
 ```
 
-And add the addon to you addon sets:
+And add the addon to your addon sets:
 
 ```tsx
 module.exports = {
@@ -16,11 +16,13 @@ module.exports = {
 };
 ```
 
-This simple addon adds 3 main addon used across different apps at Procore.
+This addon provides essential functionality and addons used across different apps at Procore.
 
-- [@storybook/addon-essentials](https://storybook.js.org/addons/tag/essentials/)
-- [@storybook/addon-storysource](https://storybook.js.org/addons/@storybook/addon-storysource)
-- [@storybook/addon-a11y](https://storybook.js.org/addons/@storybook/addon-a11y)
+## Included Addons
+
+- [@storybook/addon-docs](https://storybook.js.org/addons/@storybook/addon-docs) - Documentation and documentation controls
+- [@storybook/addon-a11y](https://storybook.js.org/addons/@storybook/addon-a11y) - Accessibility testing addon
+- [@storybook/addon-styling-webpack](https://storybook.js.org/addons/@storybook/addon-styling-webpack) - Webpack styling configuration
 
 ## Usage
 
@@ -33,12 +35,12 @@ This simple addon adds 3 main addon used across different apps at Procore.
 - a hower text ${\text{\color{green}{Core}}}$
 - the link to core design system [https://design.procore.com](https://design.procore.com) on the logo.
 
-In order to set the theme by default values ${\text{\color{green}{createProcoreTheme}}}$ needs to be added in `manager.js`. If no parameter has been passed to the `createProcoreTheme` the aforementioned default values will be set.
+In order to set the theme by default values ${\text{\color{green}{createProcoreTheme}}}$ needs to be added in `manager.ts`. If no parameter has been passed to the `createProcoreTheme` the aforementioned default values will be set.
 
 ```tsx
 // .storybook/manager.js
 import { createProcoreTheme } from '@procore/storybook-addon';
-import { addons } from '@storybook/manager-api';
+import { addons } from 'storybook/manager-api';
 
 addons.setConfig({
   theme: createProcoreTheme(),
@@ -51,7 +53,7 @@ For more configuration please visit: https://storybook.js.org/docs/react/configu
 // .storybook/manager.js
 // example below will override Procore default theming configuration
 import { createProcoreTheme } from '@procore/storybook-addon';
-import { addons } from '@storybook/manager-api';
+import { addons } from 'storybook/manager-api';
 
 addons.setConfig({
   theme: createProcoreTheme({

package/dist/legacy/chunk-CLCAWS5I.js

@@ -0,0 +1,253 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+var __commonJS = (cb, mod) => function __require2() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// ../../node_modules/react-dev-utils/getCacheIdentifier.js
+var require_getCacheIdentifier = __commonJS({
+  "../../node_modules/react-dev-utils/getCacheIdentifier.js"(exports, module) {
+    "use strict";
+    module.exports = function getCacheIdentifier2(environment, packages) {
+      let cacheIdentifier = environment == null ? "" : environment.toString();
+      for (const packageName of packages) {
+        cacheIdentifier += `:${packageName}@`;
+        try {
+          cacheIdentifier += __require(`${packageName}/package.json`).version;
+        } catch (_) {
+        }
+      }
+      return cacheIdentifier;
+    };
+  }
+});
+
+// src/configurations/babel.ts
+var import_getCacheIdentifier = __toESM(require_getCacheIdentifier(), 1);
+import { version as babelRuntimeVersion } from "@babel/runtime/package.json";
+import { version as corejsVersion } from "core-js/package.json";
+var targets = "defaults";
+var transformRuntimeOptions = {
+  // By default, babel assumes babel/runtime version 7.0.0-beta.0,
+  // explicitly resolving to match the provided helper functions.
+  // https://github.com/babel/babel/issues/10261
+  version: babelRuntimeVersion
+};
+function createConfigForReact() {
+  const env = process.env.NODE_ENV || "development";
+  const isProduction = env === "production";
+  return {
+    babelrc: false,
+    cacheCompression: false,
+    cacheDirectory: true,
+    cacheIdentifier: (0, import_getCacheIdentifier.default)(env, [
+      "babel-plugin-named-asset-import",
+      "react-dev-utils"
+    ]),
+    assumptions: {
+      privateFieldsAsProperties: true,
+      setPublicClassFields: true
+    },
+    compact: isProduction,
+    configFile: false,
+    sourceType: "unambiguous",
+    targets,
+    plugins: [
+      [
+        __require.resolve("@babel/plugin-transform-runtime"),
+        transformRuntimeOptions
+      ],
+      [
+        __require.resolve("babel-plugin-named-asset-import"),
+        {
+          loaderMap: {
+            svg: {
+              ReactComponent: "@svgr/webpack?-svgo,+titleProp,+ref![path]"
+            }
+          }
+        }
+      ],
+      [
+        __require.resolve("babel-plugin-styled-components"),
+        {
+          minify: true,
+          ssr: false,
+          displayName: true,
+          fileName: false,
+          transpileTemplateLiterals: true,
+          pure: false
+        }
+      ]
+    ],
+    presets: [
+      [
+        __require.resolve("@babel/preset-env"),
+        {
+          useBuiltIns: "usage",
+          corejs: corejsVersion
+        }
+      ],
+      [
+        __require.resolve("@babel/preset-react"),
+        {
+          useBuiltIns: true
+        }
+      ],
+      __require.resolve("@babel/preset-typescript")
+    ]
+  };
+}
+
+// src/configurations/previewHead.ts
+var defaultValues = {
+  includeBoxSizing: true
+};
+function previewHead_default(head, _options, parameters) {
+  const { includeBoxSizing = true } = {
+    ...defaultValues,
+    ...parameters
+  };
+  return `
+    ${head}
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap">
+
+    <style>
+      ${includeBoxSizing ? `
+          *,
+          *:before,
+          *:after {
+            -webkit-box-sizing: inherit;
+            -moz-box-sizing: inherit;
+            box-sizing: inherit;
+          }
+          html {
+            -webkit-box-sizing: border-box;
+            -moz-box-sizing: border-box;
+            box-sizing: border-box;
+          }
+        ` : ""}
+      html {
+        font-family: Inter, sans-serif;
+      }
+      body {
+        width: 100%;
+      }
+    </style>
+`;
+}
+
+// src/utils/index.ts
+function requireIfExists(moduleName) {
+  try {
+    return __require(moduleName);
+  } catch (e) {
+    return;
+  }
+}
+
+// src/preset.ts
+var addons = () => {
+  const sassImplementation = requireIfExists("sass");
+  return [
+    {
+      name: "@storybook/addon-styling-webpack",
+      options: {
+        rules: [
+          {
+            test: /\.scss$/,
+            use: [
+              "style-loader",
+              {
+                loader: "css-loader",
+                options: {
+                  modules: {
+                    localIdentName: "[name]__[local]--[hash:base64:5]"
+                  }
+                }
+              },
+              {
+                loader: "sass-loader",
+                options: {
+                  ...sassImplementation ? {
+                    implementation: sassImplementation
+                  } : {}
+                }
+              }
+            ]
+          },
+          {
+            test: /\.css$/,
+            use: [
+              "style-loader",
+              {
+                loader: "css-loader",
+                options: {
+                  modules: {
+                    localIdentName: "[name]__[local]--[hash:base64:5]"
+                  }
+                }
+              }
+            ]
+          }
+        ]
+      }
+    },
+    "@storybook/addon-docs",
+    "@storybook/addon-a11y"
+  ];
+};
+function babelDefault() {
+  return createConfigForReact();
+}
+var typescript = {
+  checkOptions: {
+    check: true,
+    exclude: /node_modules/
+  },
+  reactDocgen: false
+};
+var preset_default = {
+  addons: addons(),
+  babelDefault,
+  typescript,
+  previewHead: previewHead_default
+};
+
+export {
+  __require,
+  __commonJS,
+  __toESM,
+  previewHead_default,
+  addons,
+  babelDefault,
+  typescript,
+  preset_default
+};