Remove seek-style-guide support (#803)

Co-authored-by: Michael Taranto <michaeltaranto@users.noreply.github.com>
seek-oss · May 26, 2023 · c006ba4 · c006ba4
1 parent 5b90ec5
commit c006ba4
Show file tree

Hide file tree

Showing 37 changed files with 75 additions and 1,100 deletions.
diff --git a/.changeset/dry-jokes-fly.md b/.changeset/dry-jokes-fly.md
@@ -0,0 +1,15 @@
+---
+'sku': major
+---
+
+Remove workaround for `classnames` package issue
+
+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
diff --git a/.changeset/tasty-cameras-speak.md b/.changeset/tasty-cameras-speak.md
@@ -0,0 +1,16 @@
+---
+'sku': major
+---
+
+Drop support for [`seek-style-guide`]
+
+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/
diff --git a/fixtures/seek-style-guide/.eslintignore b/fixtures/seek-style-guide/.eslintignore
diff --git a/fixtures/seek-style-guide/.gitignore b/fixtures/seek-style-guide/.gitignore
diff --git a/fixtures/seek-style-guide/.prettierignore b/fixtures/seek-style-guide/.prettierignore
diff --git a/fixtures/seek-style-guide/README.md b/fixtures/seek-style-guide/README.md
diff --git a/fixtures/seek-style-guide/package.json b/fixtures/seek-style-guide/package.json
diff --git a/fixtures/seek-style-guide/sku.config.js b/fixtures/seek-style-guide/sku.config.js
diff --git a/fixtures/seek-style-guide/src/App.js b/fixtures/seek-style-guide/src/App.js
diff --git a/fixtures/seek-style-guide/src/App.test.js b/fixtures/seek-style-guide/src/App.test.js
diff --git a/fixtures/seek-style-guide/src/client.js b/fixtures/seek-style-guide/src/client.js
diff --git a/fixtures/seek-style-guide/src/render.js b/fixtures/seek-style-guide/src/render.js
diff --git a/fixtures/storybook-config/package.json b/fixtures/storybook-config/package.json
@@ -4,8 +4,7 @@
   "dependencies": {
     "braid-design-system": "^32.0.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "seek-style-guide": "^42.0.0"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@storybook/addon-controls": "^6.5.12",

diff --git a/fixtures/storybook-config/src/TestComponent.stories.tsx b/fixtures/storybook-config/src/TestComponent.stories.tsx
@@ -1,6 +1,4 @@
 import React from 'react';
-// @ts-expect-error no types
-import { StyleGuideProvider } from 'seek-style-guide/react';
 import type { Meta, StoryObj } from 'sku/@storybook/react';
 
 import { TestComponent } from './TestComponent';
@@ -14,16 +12,6 @@ export default {
       type: { name: 'string', required: true },
     },
   },
-  decorators: [
-    (Story) => (
-      // Storybook doesn't like style guide usage in `preview.tsx` because it tries to import
-      // everything and blows up because it doesn't support flow types.
-      // This will go away soon when we properly drop support for SSG
-      <StyleGuideProvider>
-        <Story />
-      </StyleGuideProvider>
-    ),
-  ],
 } satisfies Meta;
 
 type Story = StoryObj<typeof TestComponent>;

diff --git a/fixtures/storybook-config/src/TestComponent.tsx b/fixtures/storybook-config/src/TestComponent.tsx
@@ -1,7 +1,5 @@
 import { Box, Card, Text } from 'braid-design-system';
 import React from 'react';
-// @ts-expect-error no types
-import { Text as SSGText, HeartIcon } from 'seek-style-guide/react';
 
 import * as styles from './TestComponent.css';
 import stylesRefs from './TestComponent.less';
@@ -22,9 +20,5 @@ export const TestComponent = ({ tone, text }: TestComponentProps) => (
     <Box className={stylesRefs.root} data={{ 'automation-less': true }}>
       32px less text
     </Box>
-    <SSGText large data-automation-seek-style-guide>
-      Style guide text
-    </SSGText>
-    <HeartIcon data-automation-svg />
   </Card>
 );
diff --git a/fixtures/translations/.eslintignore b/fixtures/translations/.eslintignore
@@ -2,7 +2,7 @@
 **/*.vocab/index.ts
 *.less.d.ts
 coverage/
+dist-ssr/
 dist-storybook/
-dist/
 report/
 # end managed by sku
diff --git a/fixtures/translations/.gitignore b/fixtures/translations/.gitignore
@@ -5,8 +5,8 @@
 .eslintrc
 .prettierrc
 coverage/
+dist-ssr/
 dist-storybook/
-dist/
 report/
 tsconfig.json
 # end managed by sku
diff --git a/fixtures/translations/.prettierignore b/fixtures/translations/.prettierignore
@@ -4,7 +4,7 @@ translations.ts
 **/*.vocab/index.ts
 *.less.d.ts
 coverage/
+dist-ssr/
 dist-storybook/
-dist/
 report/
 # end managed by sku
diff --git a/packages/sku/config/babel/babelConfig.js b/packages/sku/config/babel/babelConfig.js
@@ -36,8 +36,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) {

diff --git a/packages/sku/config/jest/jestConfig.js b/packages/sku/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'),

diff --git a/packages/sku/config/webpack/utils/loaders.js b/packages/sku/config/webpack/utils/loaders.js
@@ -1,6 +1,5 @@
 /**
  * e.g.
- * seek-style-guide -> __SEEK_STYLE_GUIDE__
  * @foo/awesome -> __FOO_AWESOME__
  */
 const packageNameToClassPrefix = (packageName) =>

diff --git a/packages/sku/config/webpack/webpack.config.js b/packages/sku/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})`),
                 ),

diff --git a/packages/sku/config/webpack/webpack.config.ssr.js b/packages/sku/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})`),
                 ),

diff --git a/packages/sku/context/defaultCompilePackages.js b/packages/sku/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];
diff --git a/packages/sku/package.json b/packages/sku/package.json
@@ -59,7 +59,6 @@
     "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-transform-react-remove-prop-types": "^0.4.24",
     "babel-plugin-treat": "^1.6.2",
     "babel-plugin-unassert": "^3.1.0",
@@ -92,7 +91,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",
@@ -147,7 +145,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"
   }
 }