feat: migrate to vite

.babelrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: ["@babel/plugin-transform-runtime"],
+  presets: [
+    "@babel/preset-react",
+    [
+      "@babel/preset-env",
+      {
+        useBuiltIns: "entry",
+        corejs: "3.23",
+        browserslistEnv: "production"
+      },
+    ],
+  ],
+};

.eslintrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  extends: ["react-app", "plugin:jsx-a11y/recommended"],
+  plugins: ["jsx-a11y"],
+  overrides: [
+    {
+      files: ["**/*.stories.*"],
+      rules: {
+        "import/no-anonymous-default-export": "off",
+      },
+    },
+  ],
+  ignorePatterns: ["node_modules", "coverage", "config", "lib", "docs", "storybook-static", "results"],
+};

.gitignore

@@ -1,5 +1,5 @@
-# Coverage directory used by tools like istanbul
-coverage
+#
+node_modules
 
 # Compiled
 lib
@@ -9,38 +9,29 @@ build
 styles
 docs
 
-# Dependency directory
-# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
-node_modules
-
-# Socksjs-client exceptions
-!src/tools/sockjs-client/lib
-!src/tools/sockjs-client/lib/transport/lib
-!src/tools/sockjs-client/node_modules
-
-
-
-
-
-# Package Files #
-*.jar
-*.war
-*.ear
-*.zip
-*.tar.gz
-*.rar
+# Testing
+coverage
 
-# log files
+# Logs
+logs
 *.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
 
-# We don't use npm, we use yarn
-package-lock.json
-
-# Mac OS Specific files
-.DS_Store
-
-.npmrc
-results
-
+# Environment
 .env
+*.local
 
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm commitlint --edit $1

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+pnpm precommit

.npmrc

@@ -0,0 +1,3 @@
+shamefully-hoist=true
+auto-install-peers=true
+strict-peer-dependencies=false

.prettierrc.json

@@ -1,6 +1,6 @@
 {
-  "singleQuote": true,
-  "printWidth": 100,
-  "jsxBracketSameLine": false,
-  "trailingComma": "es5"
-}
+    "printWidth": 120,
+    "jsxBracketSameLine": false,
+    "trailingComma": "es5"
+  }
+  

.storybook/main.js

@@ -1,27 +1,33 @@
-const path = require('path');
+const { mergeConfig } = require('vite');
 
 module.exports = {
-  core: {
-    builder: 'webpack5',
+  "stories": [
+    "../src/components/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions"
+  ],
+  "framework": "@storybook/react",
+  "core": {
+    "builder": "@storybook/builder-vite"
+  },
+  "features": {
+    "storyStoreV7": true
+  },
+  typescript: {
+    check: false,
   },
-  stories: ['../src/**/*.stories.js'],
-  addons: [
-    '@storybook/preset-create-react-app',
-    {
-      name: '@storybook/addon-storysource',
-      options: {
-        rule: {
-          include: [path.resolve(__dirname, '../src')],
-        },
-        loaderOptions: {
-          prettierConfig: { printWidth: 80, singleQuote: false },
-        },
+  async viteFinal(config) {
+    // return the customized config
+    return mergeConfig(config, {
+      define: {
+        // By default, Vite doesn't include shims for NodeJS/
+        // necessary for segment analytics lib to work
+        global: {},
       },
-    },
-    '@storybook/addon-knobs',
-    '@storybook/addon-actions',
-    '@storybook/addon-links',
-    '@storybook/addon-a11y',
-    'storybook-readme',
-  ],
-};
+
+    });
+  },
+}

.storybook/manager-head.html

@@ -1,9 +1,10 @@
 <link rel="icon" type="image/png" href="/favicon.png" />
-<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
+<link href="https://1.www.s81c.com/common/carbon/plex/sans.css" rel="stylesheet">
+<link href="https://1.www.s81c.com/common/carbon/plex/mono.css" rel="stylesheet">
 <style>
   body {
     background: var(--cds-ui-background, #f2f4f8);
-    font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif !important;
+    font-family: 'IBM Plex Sans', sans-serif !important;
   }
   .sidebar-header img {
     margin: 0 auto;

.storybook/preview-body.html → .storybook/preview-head.html

@@ -1,16 +1,18 @@
+<!-- <script>
+  window.global = window;
+</script> -->
 <link href="https://1.www.s81c.com/common/carbon/plex/sans.css" rel="stylesheet">
 <link href="https://1.www.s81c.com/common/carbon/plex/mono.css" rel="stylesheet">
-
 <style>
   #root {
     background: var(--cds-ui-background, #f2f4f8);
     display: flex;
     flex-direction: column;
-    align-items: center;
+
   }
 
   body {
     background: var(--cds-ui-background, #f2f4f8);
-    font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif !important;
+    font-family: 'IBM Plex Sans', sans-serif !important;
   }
-</style>
+</style>

.storybook/preview.js

@@ -1,7 +1,11 @@
-import { addDecorator } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
-import { withKnobs } from '@storybook/addon-knobs';
 import './styles.scss';
 
-addDecorator(withKnobs);
-addDecorator(withInfo);
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

README.md

@@ -6,18 +6,13 @@
 
 Install the Carbon peer dependencies in addition to the package itself. We re-export all of the components from `carbon-components-react` but in some cases you may want to import directly from a Carbon library. It is a best practice to have the dependency defined in the `package.json` in that situation and depending on your package manager and node version, a requirement. It also gives consumers more control over the version of the packages they are using without being dependent on our library.
 
-Run the following command using [npm](https://www.npmjs.com/):
-
+Run the following command using [pnpm](https://pnpm.io)
 ```bash
-npm install carbon-components carbon-components-react carbon-icons @carbon/icons-react
+pnpm install carbon-components carbon-components-react carbon-icons @carbon/icons-react
 npm install @boomerang-io/carbon-addons-boomerang-react
 ```
 
-If you prefer [Yarn](https://yarnpkg.com/en/), use the following command instead:
-
-```bash
-yarn add carbon-components carbon-components-react carbon-icons @carbon/icons-react
-yarn add @boomerang-io/carbon-addons-boomerang-react
+> You can also use npm and yarn if you'd prefer.
 ```
 
 ## Using

commitlint.config.js

@@ -0,0 +1 @@
+module.exports = {extends: ['@commitlint/config-conventional']}