Rollup update to v3

.github/workflows/codeql.yml

@@ -0,0 +1,75 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ main ]
+  schedule:
+    - cron: '33 19 * * 1'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: [ self-hosted, linux ]
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript', 'typescript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
+        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
+
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 14
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v2
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+
+        # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
+        # queries: security-extended,security-and-quality
+
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v2
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
+
+    #   If the Autobuild fails above, remove it and uncomment the following three lines.
+    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
+
+    # - run: |
+    #   echo "Run, Build Application using script"
+    #   ./location_of_script_within_repo/buildscript.sh
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v2
+

.github/workflows/continuous-integration.yml

@@ -0,0 +1,23 @@
+name: UI-Kit
+
+on:
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  continuous-integration:
+    runs-on: [ self-hosted, linux ]
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 14
+
+    - name: Install dependencies
+      run: |
+        corepack enable
+        yarn install --frozen-lockfile
+
+    - name: Run Continuous Integration
+      run: |
+        yarn ci

config/fileTransform.js

@@ -1,9 +1,39 @@
 const path = require('path');
+const camelcase = require('camelcase');
+
+// This is a custom Jest transformer turning file imports into filenames.
+// http://facebook.github.io/jest/docs/en/webpack.html
 
 module.exports = {
-  process(sourceText, sourcePath, options) {
-    return {
-      code: `module.exports = ${JSON.stringify(path.basename(sourcePath))};`,
-    };
+  process(src, filename) {
+    const assetFilename = JSON.stringify(path.basename(filename));
+
+    if (filename.match(/\.svg$/)) {
+      // Based on how SVGR generates a component name:
+      // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
+      const pascalCaseFilename = camelcase(path.parse(filename).name, {
+        pascalCase: true,
+      });
+      const componentName = `Svg${pascalCaseFilename}`;
+
+      return `const React = require('react');
+      module.exports = {
+        __esModule: true,
+        default: ${assetFilename},
+        ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
+          return {
+            $$typeof: Symbol.for('react.element'),
+            type: 'svg',
+            ref: ref,
+            key: null,
+            props: Object.assign({}, props, {
+              children: ${assetFilename}
+            })
+          };
+        }),
+      };`;
+    }
+
+    return `module.exports = ${assetFilename};`;
   },
 };

package.json

@@ -47,81 +47,82 @@
     "react-dom": "18.x"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.13",
-    "@babel/eslint-parser": "^7.18.9",
+    "@babel/core": "^7.19.3",
+    "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-flow": "^7.18.6",
-    "@babel/plugin-transform-react-jsx": "^7.18.10",
-    "@babel/plugin-transform-runtime": "^7.18.10",
-    "@babel/preset-env": "^7.18.10",
+    "@babel/plugin-transform-react-jsx": "^7.19.0",
+    "@babel/plugin-transform-runtime": "^7.19.1",
+    "@babel/preset-env": "^7.19.4",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@babel/runtime": "^7.18.9",
+    "@babel/runtime": "^7.19.4",
     "@popperjs/core": "^2.11.6",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^22.0.2",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-url": "^7.0.0",
-    "@storybook/addon-actions": "^6.5.10",
-    "@storybook/addon-controls": "^6.5.10",
-    "@storybook/addon-docs": "^6.5.10",
-    "@storybook/addon-essentials": "^6.5.10",
+    "@rollup/plugin-babel": "^6.0.0",
+    "@rollup/plugin-commonjs": "^23.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-typescript": "^9.0.1",
+    "@rollup/plugin-url": "^8.0.0",
+    "@storybook/addon-actions": "^6.5.12",
+    "@storybook/addon-controls": "^6.5.12",
+    "@storybook/addon-docs": "^6.5.12",
+    "@storybook/addon-essentials": "^6.5.12",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.5.10",
+    "@storybook/addon-links": "^6.5.12",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addons": "^6.5.10",
-    "@storybook/api": "^6.5.10",
-    "@storybook/builder-webpack5": "^6.5.10",
-    "@storybook/components": "^6.5.10",
-    "@storybook/core-events": "^6.5.10",
-    "@storybook/manager-webpack5": "^6.5.10",
+    "@storybook/addons": "^6.5.12",
+    "@storybook/api": "^6.5.12",
+    "@storybook/builder-webpack5": "^6.5.12",
+    "@storybook/components": "^6.5.12",
+    "@storybook/core-events": "^6.5.12",
+    "@storybook/manager-webpack5": "^6.5.12",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/preset-typescript": "^3.0.0",
-    "@storybook/react": "^6.5.10",
-    "@storybook/theming": "^6.5.10",
-    "@svgr/rollup": "^6.3.1",
-    "@svgr/webpack": "^6.3.1",
-    "@testing-library/dom": "^8.17.1",
+    "@storybook/react": "^6.5.12",
+    "@storybook/theming": "^6.5.12",
+    "@svgr/rollup": "^6.4.0",
+    "@svgr/webpack": "^6.4.0",
+    "@testing-library/dom": "^8.19.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.3.0",
+    "@testing-library/react": "^13.4.0",
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.4.3",
-    "@types/bluebird": "^3.5.36",
-    "@types/jest": "^29.0.0",
-    "@types/node": "^18.7.14",
-    "@types/react": "^18.0.18",
+    "@types/bluebird": "^3.5.37",
+    "@types/jest": "^29.1.2",
+    "@types/node": "^18.8.4",
+    "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.36.1",
-    "@typescript-eslint/parser": "^5.36.1",
-    "babel-jest": "^29.0.2",
+    "@typescript-eslint/eslint-plugin": "^5.40.0",
+    "@typescript-eslint/parser": "^5.40.0",
+    "babel-jest": "^29.1.2",
     "babel-loader": "^8.2.5",
     "babel-plugin-css-modules-transform": "^1.6.2",
     "babel-plugin-named-asset-import": "^0.3.8",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "babel-preset-react-app": "^10.0.1",
     "css-loader": "^6.7.1",
-    "eslint": "^8.23.0",
+    "eslint": "^8.25.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-import-resolver-webpack": "^0.13.2",
     "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^27.0.1",
+    "eslint-plugin-jest": "^26.1.5",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.4",
+    "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.4",
+    "eslint-plugin-storybook": "^0.6.6",
     "file-loader": "^6.2.0",
     "gh-pages": "^4.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.0.2",
-    "jest-environment-jsdom": "^29.0.2",
+    "jest": "^27.4.3",
+    "jest-environment-jsdom": "^27.5.1",
     "jest-pnp-resolver": "^1.2.2",
-    "jest-watch-typeahead": "^2.1.1",
-    "postcss": "^8.4.16",
-    "postcss-scss": "^4.0.4",
+    "jest-watch-typeahead": "^1.1.0",
+    "postcss": "^8.4.17",
+    "postcss-scss": "^4.0.5",
     "prettier": "^2.7.1",
     "process": "^0.11.10",
     "react": "^18.2.0",
@@ -133,24 +134,23 @@
     "regenerator-runtime": "^0.13.9",
     "resolve-url-loader": "^5.0.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.79.0",
+    "rollup": "^3.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.33.0",
-    "sass": "^1.54.8",
-    "sass-loader": "^13.0.2",
+    "sass": "^1.55.0",
+    "sass-loader": "^13.1.0",
     "style-loader": "^3.3.1",
-    "stylelint": "^14.11.0",
+    "stylelint": "^14.13.0",
     "stylelint-prettier": "^2.0.0",
     "stylelint-scss": "^4.3.0",
     "ts-toolbelt": "^9.6.0",
-    "typescript": "^4.7.4",
+    "typescript": "^4.8.4",
     "url-loader": "^4.1.1",
     "webpack": "^5.74.0",
-    "yarn-audit-fix": "^9.3.5"
+    "yarn-audit-fix": "^9.3.6"
   },
   "dependencies": {
-    "classnames": "^2.3.1"
+    "classnames": "^2.3.2"
   }
 }

rollup.config.js → rollup.config.mjs

@@ -1,6 +1,6 @@
 import { DEFAULT_EXTENSIONS } from '@babel/core';
 import babel from '@rollup/plugin-babel';
-import typescript from 'rollup-plugin-typescript2';
+import rpt2 from '@rollup/plugin-typescript';
 import commonjs from '@rollup/plugin-commonjs';
 import external from 'rollup-plugin-peer-deps-external';
 import postcss from 'rollup-plugin-postcss';
@@ -9,20 +9,22 @@ import url from '@rollup/plugin-url';
 import svgr from '@svgr/rollup';
 import { terser } from 'rollup-plugin-terser';
 import typescriptEngine from 'typescript';
-import pkg from './package.json';
+import pkg from './package.json' assert { type: 'json' };
 
 const config = {
-  input: 'src/index.ts',
+  input: './src/index.ts',
   output: [
     {
       file: pkg.main,
       format: 'cjs',
       exports: 'named',
+      sourcemap: true,
     },
     {
       file: pkg.module,
       format: 'es',
       exports: 'named',
+      sourcemap: true,
     },
   ],
   plugins: [
@@ -33,7 +35,8 @@ const config = {
     external({
       includeDependencies: true,
     }),
-    typescript({
+    rpt2({
+      tsconfig: './tsconfig.json',
       typescript: typescriptEngine,
       include: ['*.js+(|x)', '**/*.js+(|x)'],
       exclude: ['coverage', 'config', 'dist', 'node_modules/**', '*.test.{js+(|x), ts+(|x)}', '**/*.test.{js+(|x), ts+(|x)}'],
@@ -49,6 +52,9 @@ const config = {
     resolve(),
     terser(),
   ],
+  watch: {
+    clearScreen: false,
+  },
 };
 
 export default config;