build: replace building with vite

BREAKING CHANGE:

This commit contains possibly several braking changes. It updates large number of dependencies and adds `exports` field in the package.json. We also slightly change the setting of the tsconfig.

Ref UXD-1107

Author: ajkl2533

.eslintrc.js

@@ -128,6 +128,7 @@ module.exports = {
         unnamedComponents: 'arrow-function',
       },
     ],
+    'react/react-in-jsx-scope': 'off',
     'fp/no-arguments': 'error',
     'fp/no-delete': 'error',
     'fp/no-get-set': 'error',

.github/workflows/CD.yaml

@@ -1,6 +1,3 @@
-# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
-# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
-
 name: CD
 
 on:

.gitignore

@@ -12,6 +12,7 @@ yarn-error.log
 stats
 coverage
 .scannerwork
+tsconfig.tsbuildinfo
 
 .yarn/*
 !.yarn/patches

.storybook/main.ts

@@ -1,6 +1,7 @@
-const { includes } = require('ramda');
+import { includes } from 'ramda';
+import type { StorybookConfig } from '@storybook/react/types';
 
-module.exports = {
+const config: StorybookConfig = {
   stories: ['../src/**/*.stories.@(tsx|jsx|mdx)'],
   addons: [
     '@storybook/addon-a11y',
@@ -48,3 +49,5 @@ module.exports = {
     return config;
   },
 };
+
+export default config;

.storybook/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "..",
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "ES2017"
+  }
+}

.vscode/settings.json

@@ -6,5 +6,6 @@
   "sonarlint.connectedMode.project": {
     "connectionId": "https://sonarqube.prod-eks.ssc.band",
     "projectKey": "securityscorecard_design-system_3c8a3f7f-942f-4414-a39a-f4b4f20c2f3f"
-  }
+  },
+  "typescript.tsdk": "node_modules/typescript/lib"
 }

.yarnrc.yml

@@ -1,10 +1,10 @@
 nodeLinker: node-modules
 
 packageExtensions:
-  "@babel/plugin-transform-react-jsx@*":
+  '@babel/plugin-transform-react-jsx@*':
     dependencies:
-      "@babel/core": ^7.18.9
-  "@babel/preset-env@*":
+      '@babel/core': ^7.18.9
+  '@babel/preset-env@*':
     dependencies:
       "@babel/core": ^7.0.0-0
   "@babel/plugin-syntax-jsx@*":
@@ -13,23 +13,29 @@ packageExtensions:
   "@figspec/react@*":
     dependencies:
       react: ^16.14.0
-  "@phenomnomnominal/tsquery@*":
+  '@phenomnomnominal/tsquery@*':
     dependencies:
       typescript: 4.7.4
-  "@storybook/addon-docs@*":
+  '@storybook/addon-docs@*':
     dependencies:
       "@babel/core": ^7.18.9
       webpack: ^5.75.0
-  "@storybook/core-common@*":
+  '@storybook/core-common@*':
     dependencies:
       react: ^16.14.0
       react-dom: ^16.14.0
-  "@storybook/docs-tools@*":
+  '@storybook/docs-tools@*':
     dependencies:
       react: ^16.14.0
       react-dom: ^16.14.0
+  '@storybook/react@*':
+    dependencies:
+      require-from-string: ^2.0.2
   ts-node@*:
     dependencies:
-      "@types/node": "*"
+      '@types/node': '*'
+  '@stylelint/postcss-css-in-js@*':
+    dependencies:
+      postcss-syntax: ^0.36.2
 
 yarnPath: .yarn/releases/yarn-3.6.4.cjs

jest.config.js jest.config.ts

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   roots: ['./src'],
   setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
   moduleFileExtensions: ['js', 'ts', 'tsx', 'json'],

package.json

@@ -4,9 +4,17 @@
   "description": "Security Scorecard Design System",
   "author": "Radek Podrazky <[email protected]>",
   "license": "Apache-2.0",
-  "main": "build/index.js",
-  "module": "build/index.es.js",
+  "main": "build/index.cjs",
+  "module": "build/index.mjs",
   "types": "build/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./build/index.d.ts",
+      "import": "./build/index.mjs",
+      "require": "./build/index.cjs",
+      "default": "./src/index.ts"
+    }
+  },
   "files": [
     "CHANGELOG.md",
     "LICENSE",
@@ -15,15 +23,15 @@
     "build"
   ],
   "scripts": {
-    "build": "rollup -c",
-    "storybook": "start-storybook -p 8008",
-    "storybook:build": "build-storybook --quiet",
+    "build": "vite build",
+    "storybook": "cross-env TS_NODE_PROJECT=.storybook/tsconfig.json start-storybook -p 8008",
+    "storybook:build": "cross-env TS_NODE_PROJECT=.storybook/tsconfig.json build-storybook --quiet",
     "test:storybook:visual": "./visual-regressions/bin/take-and-check-in-docker.sh",
     "test:storybook:visual:update": "./visual-regressions/bin/take-and-update-in-docker.sh",
     "test:storybook:visual:ci": "./visual-regressions/bin/take-and-check-in-docker-ci.sh",
-    "test": "jest -w 1",
+    "test": "jest -w 4",
     "test:watch": "jest --watch",
-    "types": "tsc --noEmit",
+    "types": "tsc",
     "lint": "eslint 'src/**/*.{js,ts,tsx}'",
     "lint:fix": "eslint 'src/**/*.{js,ts,tsx}' --fix",
     "lint:css": "stylelint 'src/**/*.{js,ts,tsx}'",
@@ -88,9 +96,7 @@
     "@fontsource/inter": "^4.5.15",
     "@geometricpanda/storybook-addon-badges": "^0.2.1",
     "@mdx-js/react": "^1.6.22",
-    "@rollup/plugin-commonjs": "^21.0.3",
-    "@rollup/plugin-node-resolve": "^13.2.0",
-    "@rollup/plugin-url": "^6.1.0",
+    "@prisma-capacity/babel-plugin-react-display-name": "^1.0.6",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/commit-analyzer": "^9.0.2",
     "@semantic-release/git": "^10.0.1",
@@ -115,14 +121,20 @@
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.4.1",
-    "@types/node": "^16.11.27",
+    "@types/node": "*",
     "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@types/react-router-dom": "^5.3.3",
     "@types/react-select": "^4.0.18",
-    "@types/react-table": "^7.7.10",
+    "@types/react-table": "7.7.14",
+    "@types/rollup-plugin-auto-external": "^2.0.5",
     "@types/styled-components": "^5.1.24",
     "@types/testing-library__jest-dom": "^5.14.3",
     "@typescript-eslint/eslint-plugin": "^5.16.0",
     "@typescript-eslint/parser": "^5.16.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "babel-plugin-styled-components": "^2.0.7",
+    "cross-env": "^7.0.3",
     "eslint": "^8.11.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",
@@ -154,13 +166,8 @@
     "react-select": "^4.3.1",
     "react-select-event": "^5.3.0",
     "react-test-renderer": "^16.13.1",
-    "require-from-string": "^2.0.2",
-    "rollup": "^2.70.1",
     "rollup-plugin-auto-external": "^2.0.0",
-    "rollup-plugin-peer-deps-external": "^2.2.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.31.2",
-    "rollup-plugin-visualizer": "^5.6.0",
+    "rollup-plugin-visualizer": "^5.12.0",
     "semantic-release": "^19.0.2",
     "semantic-release-export-data": "^1.0.1",
     "storybook-addon-designs": "^6.2.1",
@@ -172,10 +179,14 @@
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
     "ts-jest": "^27.1.4",
+    "ts-node": "^10.9.0",
     "ts-react-display-name": "^1.2.2",
     "tslib": "^2.3.1",
     "typescript": "4.7.4",
-    "typescript-plugin-styled-components": "^2.0.0"
+    "typescript-plugin-styled-components": "^2.0.0",
+    "vite": "^5.2.8",
+    "vite-plugin-dts": "^3.8.1",
+    "vite-require": "^0.2.3"
   },
   "resolutions": {
     "trim": "1.0.1",

rollup.config.js

@@ -5,7 +5,10 @@ import styled from 'styled-components';
 import { isNilOrEmpty, isNotNilOrEmpty } from 'ramda-adjunct';
 import cls from 'classnames';
 
-import { BreadcrumbsProps } from './Breadcrumbs.types';
+import type {
+  BreadcrumbItemProps,
+  BreadcrumbsProps,
+} from './Breadcrumbs.types';
 import { SSCIconNames } from '../../theme/icons/icons.enums';
 import { Icon } from '../Icon';
 import { DropdownMenu } from '../_internal/BaseDropdownMenu';
@@ -98,12 +101,15 @@ const Breadcrumbs = ({ children, className, ...props }: BreadcrumbsProps) => {
       return null;
     }
 
-    return React.cloneElement(breadcrumbItem, {
-      isSelected:
-        isNilOrEmpty(breadcrumbItem.props.to) &&
-        isNilOrEmpty(breadcrumbItem.props.href),
-      ...props,
-    });
+    return React.cloneElement(
+      breadcrumbItem as React.ReactElement<BreadcrumbItemProps>,
+      {
+        isSelected:
+          isNilOrEmpty(breadcrumbItem.props.to) &&
+          isNilOrEmpty(breadcrumbItem.props.href),
+        ...props,
+      },
+    );
   });
 
   const allDropdownActions = slice(

src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -121,13 +121,10 @@ export const ServerSidePlayground: Story<DatatableProps<Data>> = (args) => {
   const timeoutRef = useRef(null);
 
   const dispatchFetchData = useCallback(
-    ({ pageSize, pageIndex, sortBy, filters, query }) => {
+    ({ pageSize, pageIndex }) => {
       action('onDataFetch')({
         pageSize,
         pageIndex,
-        sortBy,
-        filters,
-        query,
       });
       setIsLoading(true);
       timeoutRef.current = setTimeout(() => {

src/components/Datatable/Datatable.stories.tsx

@@ -1,3 +1,3 @@
 export { default as Datatable } from './Datatable';
 export * from './Datatable.types';
-export { CustomColumnOptions } from './Table/Table.types';
+export type { CustomColumnOptions } from './Table/Table.types';

src/components/Datatable/index.ts

@@ -1,2 +1,2 @@
 export { default as DatatableV2 } from './Datatable';
-export { DatatableColumnDef, DatatableOptions } from './Datatable.types';
+export type { DatatableColumnDef, DatatableOptions } from './Datatable.types';

src/components/DatatableV2/index.ts

@@ -29,7 +29,7 @@ export default {
 const Popup = (
   <Stack gap="md">
     <Paragraph size="md">This is the tooltip content</Paragraph>
-    <Link variant="text">Here is some link</Link>
+    <Link>Here is some link</Link>
   </Stack>
 );
 

src/components/HintTooltip/HintTooltip.stories.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { equals } from 'ramda';
 
 import { Inline } from '../layout';
-import { TabsProps } from './Tabs.types';
+import { TabProps, TabsProps } from './Tabs.types';
 import { TabVariants } from './Tabs.enums';
 import { SpaceSizes } from '../../theme/space.enums';
 import { BaseTabsWrapper } from '../_internal/BaseTabs/BaseTabsWrapper';
@@ -41,8 +41,8 @@ const Tabs = ({
           return null;
         }
 
-        return React.cloneElement(tab, {
-          __key: tab.props.value,
+        return React.cloneElement<Partial<TabProps>>(tab, {
+          key: tab.props.value,
           __variant: variant,
           __isExpanded: isExpanded,
           __isSelected: selectedPatternMatcher(tab.props.value, selectedValue),