sku 11.13.0 → 12.0.1

package/@storybook/react/index.ts

@@ -1,15 +1,4 @@
 // This is provided so consumers can import `sku/@storybook/react`,
 // since they don't depend on `@storybook/react` directly.
 
-export {
-  addDecorator,
-  addParameters,
-  configure,
-  setAddon,
-  storiesOf,
-  forceReRender,
-  getStorybook,
-  type Meta,
-  type StoryObj,
-  type DecoratorFn,
-} from '@storybook/react';
+export * from '@storybook/react';

package/CHANGELOG.md

@@ -1,5 +1,124 @@
 # sku
 
+## 12.0.1
+
+### Patch Changes
+
+- Check that paths exist before looking for `*.less` files in them ([#817](https://github.com/seek-oss/sku/pull/817))
+
+## 12.0.0
+
+### Major Changes
+
+- Drop support for styling with [treat]. Please [migrate] styles to [Vanilla Extract]. ([#809](https://github.com/seek-oss/sku/pull/809))
+
+  [treat]: https://seek-oss.github.io/treat/
+  [migrate]: https://github.com/seek-oss/braid-design-system/blob/e42c6f9168904f6b607c74157cafebf9b0147489/docs/treat%20to%20vanilla-extract%20migration.md
+  [Vanilla Extract]: https://vanilla-extract.style/documentation/getting-started
+
+- Remove workaround for `classnames` package issue ([#803](https://github.com/seek-oss/sku/pull/803))
+
+  A workaround for [a bug in the `classnames`][bug] package has been removed now that the bug has been fixed.
+
+  Please evaluate whether you need to use `classnames` library in your app.
+  Prefer using [Braid's `Box` component, which supports the full `clsx` API][box], instead.
+  If you need to construct class name strings for components other than `Box`, prefer [the `clsx` package][clsx] over the `classnames` package.
+
+  [bug]: https://github.com/JedWatson/classnames/issues/240
+  [box]: https://seek-oss.github.io/braid-design-system/components/Box/#dynamic-css-classes
+  [clsx]: https://github.com/lukeed/clsx
+
+- `sku init` no longer installs and configures husky for you ([#804](https://github.com/seek-oss/sku/pull/804))
+
+  BREAKING CHANGE
+
+  `sku init` no longer adds `husky` as a dependecy nor does it configure husky for you out of the box.
+  For instructions on how to set up `husky` to use sku's pre-commit hook, see [the docs].
+
+  [the docs]: https://seek-oss.github.io/sku/#/./docs/extra-features?id=pre-commit-hook
+
+- Support Storybook v7 ([#810](https://github.com/seek-oss/sku/pull/810))
+
+  sku now supports Storybook v7. Please read [the Storybook migration guide] for a high-level overview of what has changed. For a more detailed list of changes, take a look at [the full migration notes].
+  **NOTE**: Since sku installs and configures Storybook for you, a lot of the changes will not be relevant to users.
+
+  **BREAKING CHANGE**
+
+  As of Storybook v7, stories that use the `storiesOf` API will not work by default. The `storiesOf` API is deprecated and will be removed in Storybook v8, so it is highly encouraged to migrate your stories to the [Component Story Format (CSF)][csf].
+
+  Migration can be done automatically via the migration tools provided by Storybook:
+
+  ```sh
+  npx storybook@7 migrate storiesof-to-csf --glob="src/**/*.stories.tsx"
+  ```
+
+  After doing this migration, your stories may need some manual cleanup to function correctly, such as adding [a default metadata export][meta].
+
+  When your stories are working, you can also optionally migrate to the newer [CSF 3]:
+
+  ```sh
+  npx storybook@7 migrate csf-2-to-3 --glob="src/**/*.stories.tsx"
+  ```
+
+  If you cannot migrate your stories to CSF, or you need to dynamically generate stories with `storiesOf` (see [this issue][storiesof issue] for more info on the future of the `storiesOf` API), you can set the `storybookStoryStore` flag to `false` in your sku config:
+
+  ```ts
+  import { type SkuConfig } from 'sku';
+
+  export default {
+    storybookStoryStore: false,
+  } satisfies SkuConfig;
+  ```
+
+  [the storybook migration guide]: https://storybook.js.org/docs/react/migration-guide#page-top
+  [the full migration notes]: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-65x-to-700
+  [csf]: https://storybook.js.org/docs/react/api/csf
+  [meta]: https://storybook.js.org/docs/react/api/csf#default-export
+  [csf 3]: https://storybook.js.org/blog/storybook-csf3-is-here/
+  [storiesof issue]: https://github.com/storybookjs/storybook/issues/9828#issuecomment-1370291568
+
+- Drop support for [`seek-style-guide`] ([#803](https://github.com/seek-oss/sku/pull/803))
+
+  BREAKING CHANGE
+
+  `seek-style-guide` is no longer supported by sku. Flow support was already removed from sku in [v11], so
+  any `seek-style-guide` components that use flow currently don't work with sku. However, there were remnants
+  of `seek-style-guide` still present in sku's codebase. Specifically, import optimization and
+  component mocking. These features have now been removed. Please migrate to [`braid-design-system`].
+
+  [`seek-style-guide`]: https://github.com/seek-oss/seek-style-guide
+  [v11]: https://github.com/seek-oss/sku/releases/tag/v11.0.0
+  [`braid-design-system`]: https://seek-oss.github.io/braid-design-system/
+
+- Require Node.js 18.12+ ([#805](https://github.com/seek-oss/sku/pull/805))
+
+  **BREAKING CHANGE**
+
+  Node 14 has already reached end of life as of April 2023, and Node.js 16 had its end of life date [brought forward to September 2023][node 16 eol], so in the interest of preventing another breaking change in 4 months time, we're pre-emptively dropping support for Node.js 16 in addition to Node.js 14.
+  We've chosen to support Node.js versions from v18.12 onwards as this version was the first [Node.js 18 LTS release][node 18.12 release].
+
+  Consider upgrading the Node.js version for your project across:
+
+  - `.nvmrc`
+  - `package.json#/engines/node`
+  - `@types/node` package version
+  - CI/CD configuration (`.buildkite/pipeline.yml`, `Dockerfile`, etc.)
+
+  [node 16 eol]: https://nodejs.org/en/blog/announcements/nodejs16-eol
+  [node 18.12 release]: https://nodejs.org/en/blog/release/v18.12.0
+
+### Minor Changes
+
+- Re-export all of `@storybook/react` ([#810](https://github.com/seek-oss/sku/pull/810))
+
+  Previously, only specific APIs were re-exported under `sku/@storybook/react`. All APIs are now re-exported.
+
+- Upgrade to TypeScript 5.0 ([#813](https://github.com/seek-oss/sku/pull/813))
+
+  This major release includes breaking changes. See the [TypeScript 5.0 announcement][ts5] for more information.
+
+  [ts5]: https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/
+
 ## 11.13.0
 
 ### Minor Changes

package/bin/sku.js

@@ -3,6 +3,7 @@ const fs = require('fs');
 const debug = require('debug');
 const args = require('../config/args');
 const _validatePeerDeps = require('../lib/validatePeerDeps');
+const validateLessFiles = require('../lib/validateLessFiles');
 const { getPathFromCwd } = require('../lib/cwd');
 const log = debug('sku:bin');
 
@@ -62,8 +63,10 @@ log(`Starting script: ${script}`);
     case 'setup-hosts':
     case 'init':
     case 'configure': {
-      runScript(script);
-      break;
+      if (script !== 'init') {
+        validateLessFiles();
+      }
+      return runScript(script);
     }
 
     case 'test':
@@ -72,8 +75,8 @@ log(`Starting script: ${script}`);
     case 'pre-commit':
     case 'translations': {
       await configureProject();
-      runScript(script);
-      break;
+      validateLessFiles();
+      return runScript(script);
     }
 
     case 'start':
@@ -84,10 +87,9 @@ log(`Starting script: ${script}`);
     case 'build-ssr':
     case 'serve': {
       await configureProject();
-
+      validateLessFiles();
       validatePeerDeps();
-      runScript(script);
-      break;
+      return runScript(script);
     }
 
     default: {

package/config/babel/babelConfig.js

@@ -23,7 +23,6 @@ module.exports = ({
     ],
     require.resolve('babel-plugin-macros'),
     require.resolve('@loadable/babel-plugin'),
-    [require.resolve('babel-plugin-treat'), { alias: 'sku/treat' }],
     require.resolve('@babel/plugin-transform-runtime'),
   ];
 
@@ -36,8 +35,6 @@ module.exports = ({
 
   if (isJest) {
     plugins.push(require.resolve('babel-plugin-dynamic-import-node'));
-  } else {
-    plugins.push(require.resolve('babel-plugin-seek-style-guide'));
   }
 
   if (isProductionBuild) {

package/config/eslint/importOrderConfig.js

@@ -29,7 +29,7 @@ module.exports = {
         ],
         pathGroups: [
           {
-            pattern: '*.+(treat|less|css)',
+            pattern: '*.@(less|css)',
             group: 'index',
             position: 'after',
             patternOptions: { matchBase: true },

package/config/jest/jestConfig.js

@@ -25,14 +25,6 @@ module.exports = {
   moduleNameMapper: {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|svg)$':
       require.resolve('./fileMock'),
-
-    // Mock seek-style-guide components
-    // with a proxy object that echoes back the import name as a string,
-    // e.g. `import { Text } from 'seek-style-guide/react'` resolves
-    // to the string 'Text'. This way, snapshot tests won't break when
-    // these packages get updated, which happens regularly. There's
-    // still room for debate about whether this is a good idea or not...
-    '^seek-style-guide/react': require.resolve('identity-obj-proxy'),
   },
   transform: {
     '\\.less$': require.resolve('./cssModulesTransform.js'),

package/config/storybook/build/main.js

@@ -1 +1 @@
-module.exports = require('../config');
+export { default } from '../config';

package/config/storybook/config.js

@@ -1,13 +1,44 @@
-const fs = require('fs');
-const path = require('path');
-const { paths, storybookAddons } = require('../../context');
+import fs from 'fs';
+import path from 'path';
+import { createRequire } from 'module';
+import { paths, storybookAddons, storybookStoryStore } from '../../context';
 
-module.exports = {
+const require = createRequire(import.meta.url);
+
+/** @type {import("@storybook/react-webpack5").StorybookConfig} */
+export default {
   stories: paths.src
     .filter((srcPath) => fs.statSync(srcPath).isDirectory())
     .map((srcPath) => path.join(srcPath, '**/*.stories.@(js|ts|tsx)')),
   addons: storybookAddons,
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
   core: {
-    builder: 'webpack5',
+    builder: {
+      name: '@storybook/builder-webpack5',
+      options: {
+        fsCache: true,
+      },
+    },
+  },
+  features: {
+    storyStoreV7: storybookStoryStore,
   },
+  babel: (config) => ({
+    ...config,
+    presets: [
+      ...config.presets,
+      [
+        require.resolve('@babel/preset-env'),
+        {
+          targets: {
+            chrome: 100,
+          },
+        },
+      ],
+      require.resolve('@babel/preset-typescript'),
+    ],
+  }),
 };

package/config/storybook/start/main.js

@@ -1 +1 @@
-module.exports = require('../config');
+export { default } from '../config';

package/config/webpack/plugins/createHtmlRenderPlugin.js

@@ -121,9 +121,6 @@ module.exports = () => {
     transformFilePath: transformOutputPath,
     mapStatsToParams,
     extraGlobals: {
-      // This fixes an issue where one of treats deps (@hapi/joek)
-      // accesses Buffer globally. Not great...
-      Buffer,
       // Allows Date serialization checks to work in render e.g. `myDate instance Date`
       Date,
     },

package/config/webpack/plugins/metrics-plugin/index.js

@@ -1,10 +1,6 @@
 const { performance } = require('perf_hooks');
 const prettyMilliseconds = require('pretty-ms');
 const debug = require('debug')('sku:metrics');
-const chalk = require('chalk');
-
-const { persistentCache } = require('../../../../context');
-const banner = require('../../../../lib/banner');
 const track = require('../../../../telemetry');
 
 const smp = 'sku-metrics-plugin';
@@ -14,7 +10,6 @@ class MetricsPlugin {
     this.initial = true;
     this.target = target;
     this.type = type;
-    this.builtTreatFiles = new Set();
     this.builtLessFiles = new Set();
   }
 
@@ -32,10 +27,6 @@ class MetricsPlugin {
           target: this.target,
           type: this.type,
         });
-        track.gauge('start.files.initial.treat', this.builtTreatFiles.size, {
-          target: this.target,
-          type: this.type,
-        });
         track.gauge('start.files.initial.less', this.builtLessFiles.size, {
           target: this.target,
           type: this.type,
@@ -51,56 +42,23 @@ class MetricsPlugin {
           target: this.target,
           type: this.type,
         });
-        track.gauge('start.files.rebuild.treat', this.builtTreatFiles.size, {
-          target: this.target,
-          type: this.type,
-        });
         track.gauge('start.files.rebuild.less', this.builtLessFiles.size, {
           target: this.target,
           type: this.type,
         });
       }
 
-      this.builtTreatFiles.clear();
       this.builtLessFiles.clear();
     });
 
     compiler.hooks.thisCompilation.tap(smp, (compilation) => {
       compilation.hooks.buildModule.tap(smp, (module) => {
         if (module.resource) {
-          if (module.resource.endsWith('.treat.ts')) {
-            this.builtTreatFiles.add(module.resource);
-          } else if (module.resource.endsWith('.less')) {
+          if (module.resource.endsWith('.less')) {
             this.builtLessFiles.add(module.resource);
           }
         }
       });
-
-      if (persistentCache) {
-        compilation.hooks.finishModules.tap(smp, () => {
-          const internalTreatFiles = Array.from(this.builtTreatFiles).filter(
-            (treatFile) => !treatFile.match(/node_modules|braid-design-system/),
-          );
-
-          if (internalTreatFiles.length > 0) {
-            const treatFileNumMsg =
-              internalTreatFiles.length > 1
-                ? `${internalTreatFiles.length} treat files were`
-                : `A treat file was`;
-
-            banner(
-              'error',
-              `${treatFileNumMsg} detected within your project while using 'persistentCache' mode.`,
-              [
-                `Set '${chalk.bold(
-                  'persistentCache: false',
-                )}' in your sku.config.js until all treat files have been removed from the project.`,
-              ],
-            );
-            process.exit(1);
-          }
-        });
-      }
     });
   }
 }

package/config/webpack/plugins/sku-webpack-plugin/index.js

@@ -14,7 +14,6 @@ const {
   SVG,
   resolvePackage,
 } = require('../../utils');
-const createTreatPlugin = require('../createTreatPlugin');
 const defaultCompilePackages = require('../../../../context/defaultCompilePackages');
 const validateOptions = require('./validateOptions');
 
@@ -50,7 +49,6 @@ class SkuWebpackPlugin {
       generateCSSTypes,
       browserslist,
       mode = compiler.options.mode,
-      libraryName,
       displayNamesProd,
       removeAssertionsInProduction,
       MiniCssExtractPlugin,
@@ -65,7 +63,7 @@ class SkuWebpackPlugin {
         include: this.include,
         oneOf: [
           {
-            compiler: /(vanilla-extract|treat-webpack-loader)/,
+            compiler: /(vanilla-extract)/,
             use: makeJsLoaders({
               target: 'node',
               lang: 'ts',
@@ -94,7 +92,7 @@ class SkuWebpackPlugin {
         include: this.include,
         oneOf: [
           {
-            compiler: /(vanilla-extract|treat-webpack-loader)/,
+            compiler: /(vanilla-extract)/,
             use: makeJsLoaders({
               target: 'node',
               lang: 'js',
@@ -204,14 +202,6 @@ class SkuWebpackPlugin {
       }
     }
 
-    createTreatPlugin({
-      target,
-      isProductionBuild,
-      libraryName,
-      browserslist,
-      MiniCssExtractPlugin,
-    }).apply(compiler);
-
     new VanillaExtractPlugin({
       identifiers: isProductionBuild ? 'short' : 'debug',
       outputCss: target === 'browser',

package/config/webpack/utils/loaders.js

@@ -1,6 +1,5 @@
 /**
  * e.g.
- * seek-style-guide -> __SEEK_STYLE_GUIDE__
  * @foo/awesome -> __FOO_AWESOME__
  */
 const packageNameToClassPrefix = (packageName) =>

package/config/webpack/webpack.config.js

@@ -275,14 +275,12 @@ const makeWebpackConfig = ({
         externalizeNodeModules
           ? nodeExternals({
               allowlist: [
-                'classnames', // Workaround for https://github.com/JedWatson/classnames/issues/240
-
                 // Include '@babel/runtime' in render builds to workaround ESM imports in html-render-webpack-plugin
                 /@babel\/runtime/,
 
                 // webpack-node-externals compares the `import` or `require` expression to this list,
                 // not the package name, so we map each packageName to a pattern. This ensures it
-                // matches when importing a file within a package e.g. import { Text } from 'seek-style-guide/react'.
+                // matches when importing a file within a package e.g. import { MyComponent } from '@seek/my-component-package'.
                 ...paths.compilePackages.map(
                   (packageName) => new RegExp(`^(${packageName})`),
                 ),

package/config/webpack/webpack.config.ssr.js

@@ -232,7 +232,7 @@ const makeWebpackConfig = ({
               allowlist: [
                 // webpack-node-externals compares the `import` or `require` expression to this list,
                 // not the package name, so we map each packageName to a pattern. This ensures it
-                // matches when importing a file within a package e.g. import { Text } from 'seek-style-guide/react'.
+                // matches when importing a file within a package e.g. import { MyComponent } from '@seek/my-component-package'.
                 ...paths.compilePackages.map(
                   (packageName) => new RegExp(`^(${packageName})`),
                 ),

package/context/configSchema.js

@@ -201,4 +201,7 @@ module.exports = validator.compile({
   externalizeNodeModules: {
     type: 'boolean',
   },
+  storybookStoryStore: {
+    type: 'boolean',
+  },
 });

package/context/defaultCompilePackages.js

@@ -29,9 +29,4 @@ try {
   console.error(e);
 }
 
-module.exports = [
-  'sku',
-  'seek-style-guide',
-  'braid-design-system',
-  ...detectedCompilePackages,
-];
+module.exports = ['sku', 'braid-design-system', ...detectedCompilePackages];

package/context/defaultSkuConfig.js

@@ -48,4 +48,5 @@ module.exports = {
   skipPackageCompatibilityCompilation: [],
   persistentCache: true,
   externalizeNodeModules: false,
+  storybookStoryStore: true,
 };

package/context/index.js

@@ -214,4 +214,5 @@ module.exports = {
     skuConfig.skipPackageCompatibilityCompilation,
   persistentCache: skuConfig.persistentCache,
   externalizeNodeModules: skuConfig.externalizeNodeModules,
+  storybookStoryStore: skuConfig.storybookStoryStore,
 };

package/lib/configure.js

@@ -1,8 +1,6 @@
 #!/usr/bin/env node
 const { writeFile, rm } = require('fs/promises');
 const path = require('path');
-const glob = require('fast-glob');
-const fs = require('fs');
 
 const ensureGitignore = require('ensure-gitignore');
 const { cwd, getPathFromCwd } = require('./cwd');
@@ -11,8 +9,6 @@ const { paths, httpsDevServer, languages } = require('../context');
 const {
   bundleReportFolder,
 } = require('../config/webpack/plugins/bundleAnalyzer');
-const printBanner = require('../lib/banner');
-const chalk = require('chalk');
 const prettierConfig = require('../config/prettier/prettierConfig');
 const eslintConfig = require('../config/eslint/eslintConfig');
 const createTSConfig = require('../config/typescript/tsconfig.js');
@@ -32,12 +28,7 @@ const writeFileToCWD = async (fileName, content, { banner = true } = {}) => {
   await writeFile(outPath, contentStr);
 };
 
-/**
- * @typedef {object} Options
- * @property {boolean | undefined} isPostInit
- * @param {Options}
- */
-module.exports = async ({ isPostInit } = {}) => {
+module.exports = async () => {
   // Ignore webpack bundle report output
   const gitIgnorePatterns = [
     addSep(bundleReportFolder),
@@ -118,32 +109,4 @@ module.exports = async ({ isPostInit } = {}) => {
     comment: 'managed by sku',
     patterns: gitIgnorePatterns.map(convertToForwardSlashPaths),
   });
-
-  // Check for `.less` files only if we haven't just done an init
-  if (!isPostInit) {
-    const lessFileGlobResults = await Promise.all(
-      paths.src
-        .filter((srcPath) => fs.statSync(srcPath).isDirectory())
-        .map(async (srcPath) => await glob(path.join(srcPath, '**/*.less'))),
-    );
-    const srcHasLessFiles = lessFileGlobResults.some(
-      (fileArray) => fileArray.length > 0,
-    );
-    if (srcHasLessFiles) {
-      printBanner('warning', 'LESS styles detected', [
-        `Support for ${chalk.bold('LESS')} has been deprecated.`,
-        `${chalk.bold(
-          'Vanilla Extract',
-        )} is the preferred styling solution supported by ${chalk.bold(
-          'sku',
-        )}, and support for ${chalk.bold(
-          'LESS',
-        )} will be removed in a future release.`,
-        `Consumers are encouraged to migrate to ${chalk.bold(
-          'Vanilla Extract',
-        )} at the earliest opportunity.`,
-        'https://seek-oss.github.io/sku/#/./docs/styling?id=vanilla-extract',
-      ]);
-    }
-  }
 };

package/lib/validateLessFiles.js

@@ -0,0 +1,38 @@
+const fs = require('fs');
+const path = require('path');
+const glob = require('fast-glob');
+const chalk = require('chalk');
+
+const printBanner = require('./banner');
+const exists = require('./exists');
+const { paths } = require('../context');
+
+module.exports = async () => {
+  const srcPathsExist = await Promise.all(
+    paths.src.map(async (srcPath) => (await exists(srcPath)) && srcPath),
+  );
+  const lessFileGlobResults = await Promise.all(
+    srcPathsExist
+      .filter((srcPath) => srcPath && fs.statSync(srcPath).isDirectory())
+      .map(async (srcPath) => await glob(path.join(srcPath, '**/*.less'))),
+  );
+  const srcHasLessFiles = lessFileGlobResults.some(
+    (fileArray) => fileArray.length > 0,
+  );
+  if (srcHasLessFiles) {
+    printBanner('warning', 'LESS styles detected', [
+      `Support for ${chalk.bold('LESS')} has been deprecated.`,
+      `${chalk.bold(
+        'Vanilla Extract',
+      )} is the preferred styling solution supported by ${chalk.bold(
+        'sku',
+      )}, and support for ${chalk.bold(
+        'LESS',
+      )} will be removed in a future release.`,
+      `Consumers are encouraged to migrate to ${chalk.bold(
+        'Vanilla Extract',
+      )} at the earliest opportunity.`,
+      'https://seek-oss.github.io/sku/#/./docs/styling?id=vanilla-extract',
+    ]);
+  }
+};

package/lib/validatePeerDeps.js

@@ -17,7 +17,7 @@ const asyncMap = (list, fn) => {
   return Promise.all(list.map((item) => fn(item)));
 };
 
-const singletonPackages = ['react-treat'];
+const singletonPackages = ['@vanilla-extract/css'];
 
 module.exports = async () => {
   try {

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "sku",
-  "version": "11.13.0",
+  "version": "12.0.1",
   "description": "Front-end development toolkit, powered by Webpack, Babel, CSS Modules, Less and Jest",
   "main": "index.js",
   "bin": {
     "sku": "./bin/sku.js"
   },
   "engines": {
-    "node": ">=14.15"
+    "node": ">=18.12"
   },
   "types": "./sku-types.d.ts",
   "repository": {
@@ -25,22 +25,23 @@
     "react": "^16.14.0 || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {
-    "@babel/core": "^7.18.0",
-    "@babel/plugin-transform-react-constant-elements": "^7.18.0",
-    "@babel/plugin-transform-react-inline-elements": "^7.18.0",
-    "@babel/plugin-transform-runtime": "^7.18.0",
-    "@babel/preset-env": "^7.18.0",
-    "@babel/preset-react": "^7.18.0",
-    "@babel/preset-typescript": "^7.18.0",
-    "@babel/runtime": "^7.18.0",
+    "@babel/core": "^7.21.8",
+    "@babel/plugin-transform-react-constant-elements": "^7.21.3",
+    "@babel/plugin-transform-react-inline-elements": "^7.21.0",
+    "@babel/plugin-transform-runtime": "^7.21.4",
+    "@babel/preset-env": "^7.21.5",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.5",
+    "@babel/runtime": "^7.21.0",
     "@loadable/babel-plugin": "^5.13.2",
     "@loadable/component": "^5.14.1",
     "@loadable/server": "^5.14.0",
     "@loadable/webpack-plugin": "^5.14.0",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.10",
-    "@storybook/builder-webpack5": "^6.5.12",
-    "@storybook/manager-webpack5": "^6.5.12",
-    "@storybook/react": "^6.5.12",
+    "@storybook/builder-webpack5": "^7.0.17",
+    "@storybook/cli": "^7.0.17",
+    "@storybook/react": "^7.0.17",
+    "@storybook/react-webpack5": "^7.0.17",
     "@types/jest": "^29.0.0",
     "@types/loadable__component": "^5.13.1",
     "@vanilla-extract/jest-transform": "^1.1.0",
@@ -51,14 +52,12 @@
     "@vocab/webpack": "^1.2.1",
     "autoprefixer": "^10.3.1",
     "babel-jest": "^29.0.0",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^9.1.2",
     "babel-plugin-add-react-displayname": "^0.0.5",
     "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-macros": "^3.1.0",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "babel-plugin-seek-style-guide": "^1.0.0",
+    "babel-plugin-module-resolver": "^5.0.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "babel-plugin-treat": "^1.6.2",
     "babel-plugin-unassert": "^3.1.0",
     "browserslist": "^4.16.1",
     "browserslist-config-seek": "^2.1.0",
@@ -89,7 +88,6 @@
     "get-port": "^5.0.0",
     "hostile": "^1.3.3",
     "html-render-webpack-plugin": "^3.0.1",
-    "identity-obj-proxy": "^3.0.0",
     "indent-string": "^4.0.0",
     "jest": "^29.0.0",
     "jest-environment-jsdom": "^29.0.0",
@@ -109,7 +107,6 @@
     "prettier": "^2.8.8",
     "pretty-ms": "^7.0.1",
     "react-refresh": "^0.14.0",
-    "react-treat": "^2.0.1",
     "require-from-string": "^2.0.2",
     "rimraf": "^5.0.0",
     "selfsigned": "^2.1.1",
@@ -119,10 +116,9 @@
     "svgo-loader": "^4.0.0",
     "terser-webpack-plugin": "^5.1.4",
     "traverse": "^0.6.6",
-    "treat": "^2.0.4",
     "tree-kill": "^1.2.1",
-    "typescript": "^4.5.0",
-    "validate-npm-package-name": "^4.0.0",
+    "typescript": "~5.0.0",
+    "validate-npm-package-name": "^5.0.0",
     "webpack": "^5.52.0",
     "webpack-bundle-analyzer": "^4.6.1",
     "webpack-dev-server": "4.11.1",
@@ -144,7 +140,6 @@
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-router-dom": "^5.2.0",
-    "seek-style-guide": "^42.0.0",
     "webpack-cli": "^5.0.0"
   },
   "scripts": {

package/scripts/build-storybook.js

@@ -6,7 +6,7 @@ const { rimraf } = require('rimraf');
 const { argv } = require('../config/args');
 const gracefulSpawn = require('../lib/gracefulSpawn');
 const { storybookTarget } = require('../context');
-const buildStorybookPath = require.resolve('@storybook/react/bin/build.js');
+const buildStorybookPath = require.resolve('@storybook/cli/bin/index');
 const configDir = path.resolve(__dirname, '../config/storybook/build');
 const { runVocabCompile } = require('../lib/runVocab');
 const { setUpStorybookPreviewFile } = require('../lib/storybook');
@@ -16,6 +16,7 @@ const { setUpStorybookPreviewFile } = require('../lib/storybook');
   await rimraf(storybookTarget);
   await setUpStorybookPreviewFile(configDir);
 
+  argv.push('build');
   argv.push('--config-dir', configDir);
   argv.push('--output-dir', storybookTarget);
   argv.push('--quiet');

package/scripts/init.js

@@ -140,11 +140,6 @@ const getTemplateFileDestinationFromRoot =
       lint: 'sku lint',
       format: 'sku format',
     },
-    husky: {
-      hooks: {
-        'pre-commit': 'sku pre-commit',
-      },
-    },
   };
   const packageJsonString = JSON.stringify(packageJson, null, 2);
 
@@ -198,11 +193,11 @@ const getTemplateFileDestinationFromRoot =
     }),
   );
 
-  const deps = ['braid-design-system', 'sku', 'react', 'react-dom'];
+  const deps = ['braid-design-system', 'react', 'react-dom'];
 
   const devDeps = [
     '@vanilla-extract/css',
-    'husky',
+    'sku',
     '@types/react',
     '@types/react-dom',
   ];
@@ -219,7 +214,7 @@ const getTemplateFileDestinationFromRoot =
   await install({ deps, verbose, useYarn });
   await install({ deps: devDeps, type: 'dev', exact: false, verbose, useYarn });
 
-  await configure({ isPostInit: true });
+  await configure();
   await esLintFix();
   await prettierWrite();
 

package/scripts/postinstall.js

@@ -2,6 +2,8 @@
 const fs = require('fs');
 const { setCwd, getPathFromCwd, cwd } = require('../lib/cwd');
 const debug = require('debug');
+const banner = require('../lib/banner');
+const chalk = require('chalk');
 
 const log = debug('sku:postinstall');
 
@@ -28,11 +30,9 @@ if (packageJsonExists) {
   } = require(packageJson);
 
   const skipPostInstall = skuSkipPostInstall || skuSkipPostinstall;
-  const hasSku =
-    Boolean(devDependencies?.sku) ||
-    // TODO: get rid of this part when we remove treat
-    Boolean(dependencies?.sku);
-
+  const hasSkuDep = Boolean(dependencies?.sku);
+  // sku should always be a dev dependency now that sku init installs it as one, but some repos may still have it as a regular dependency
+  const hasSku = Boolean(devDependencies?.sku) || hasSkuDep;
   // Don't run configure script on sku itself
   // Don't run configure script if sku is not installed
   // Ignore projects that are opting out of sku's postinstall script
@@ -40,6 +40,17 @@ if (packageJsonExists) {
     process.exit();
   }
 
+  if (hasSkuDep) {
+    banner('warning', 'sku dependency detected', [
+      `${chalk.bold('sku')} is present as a ${chalk.bold(
+        'dependency',
+      )} in ${chalk.bold(packageJson)}.`,
+      `${chalk.bold('sku')} should be installed in ${chalk.bold(
+        'devDependencies',
+      )}.`,
+    ]);
+  }
+
   log('postinstall', 'configuring');
   let configure;
   try {

package/scripts/storybook.js

@@ -2,14 +2,16 @@ const path = require('path');
 const { argv } = require('../config/args');
 const gracefulSpawn = require('../lib/gracefulSpawn');
 const { storybookPort } = require('../context');
-const startStorybookPath = require.resolve('@storybook/react/bin/index.js');
+const startStorybookPath = require.resolve('@storybook/cli/bin/index');
 const configDir = path.resolve(__dirname, '../config/storybook/start');
 const { watchVocabCompile } = require('../lib/runVocab');
 const { setUpStorybookPreviewFile } = require('../lib/storybook');
 
-argv.push('--port', storybookPort);
-argv.push('--config-dir', configDir);
-argv.push('--quiet');
+// Unshift args to allow pushing --ci as an arg during storybook-config tests
+argv.unshift('--quiet');
+argv.unshift('--config-dir', configDir);
+argv.unshift('--port', storybookPort);
+argv.unshift('dev');
 
 (async () => {
   await watchVocabCompile();

package/sku-types.d.ts

@@ -242,6 +242,16 @@ export interface SkuConfig {
    */
   persistentCache?: boolean;
 
+  /**
+   * Allows disabling Storybook's `storyStoreV7` feature flag. This will result in all stories being
+   * loaded upfront instead of on demand. Disabling this feature will allow stories that use the
+   * deprecated `storiesOf` API to work, however it's highly recommended to migrate off `storiesOf`
+   * to the Component Story Format (CSF) instead.
+   * @default true
+   * @link https://seek-oss.github.io/sku/#/./docs/configuration?id=storybookStoryStore
+   */
+  storybookStoryStore?: boolean;
+
   /**
    * An array of polyfills to be included into all client entry points.
    *

package/config/webpack/plugins/createTreatPlugin.js

@@ -1,55 +0,0 @@
-const { TreatPlugin } = require('treat/webpack-plugin');
-
-const braidThemes = [
-  'apac',
-  'jobStreet',
-  'jobStreetClassic',
-  'jobsDb',
-  'seekAnz',
-  'seekBusiness',
-  'seekUnifiedBeta',
-  'occ',
-  'catho',
-  'docs',
-  'wireframe',
-];
-
-module.exports = ({
-  target,
-  isProductionBuild,
-  libraryName,
-  browserslist,
-  MiniCssExtractPlugin,
-}) => {
-  const libraryPrefix = libraryName ? `${libraryName}_` : '';
-
-  const localIdentName = `${libraryPrefix}${
-    isProductionBuild ? '' : 'BRAID__[name]-[local]_'
-  }[hash:base64:5]`;
-
-  const themeIdentFallback = '[hash:base64:3]';
-
-  const devThemeIdent = (theme) =>
-    theme.name ? `_${theme.name}` : themeIdentFallback;
-
-  const prodThemeIdent = (theme) => {
-    const braidThemeIndex = braidThemes.indexOf(theme.name);
-
-    if (braidThemeIndex >= 0) {
-      return `${braidThemeIndex}`;
-    }
-
-    return themeIdentFallback;
-  };
-
-  const themeIdentName = isProductionBuild ? prodThemeIdent : devThemeIdent;
-
-  return new TreatPlugin({
-    test: /\.treat\.ts$/,
-    outputCSS: target === 'browser',
-    outputLoaders: [MiniCssExtractPlugin.loader],
-    localIdentName,
-    themeIdentName,
-    browsers: browserslist,
-  });
-};

package/react-treat/index.ts

@@ -1,3 +0,0 @@
-// This is provided so consumers can import `sku/react-treat`,
-// since they don't depend on `react-treat` directly.
-export * from 'react-treat';

package/treat/index.ts

@@ -1,42 +0,0 @@
-// This is provided so consumers can import `sku/treat`,
-// since they don't depend on `treat` directly.
-
-// We can't re-export directly because eslint-plugin-import doesn't understand :(
-
-import {
-  createTheme,
-  style,
-  styleMap,
-  styleTree,
-  globalStyle,
-  resolveStyles,
-  resolveClassName,
-} from 'treat';
-
-import type {
-  Style,
-  GlobalStyle,
-  CSSProperties,
-  ThemeRef,
-  ClassRef,
-  TreatModule,
-} from 'treat';
-
-export {
-  createTheme,
-  style,
-  styleMap,
-  styleTree,
-  resolveStyles,
-  resolveClassName,
-  globalStyle,
-};
-
-export type {
-  Style,
-  GlobalStyle,
-  CSSProperties,
-  ThemeRef,
-  ClassRef,
-  TreatModule,
-};