Build/upgrade packages

.eslintrc.cjs

@@ -1,3 +1,6 @@
+/**
+ * @type {import("eslint").Linter.Config}
+ */
 module.exports = {
   env: {
     browser: true,
@@ -69,8 +72,16 @@ module.exports = {
     'react/jsx-one-expression-per-line': 'off', // Prettier takes care of this
     'react/jsx-wrap-multilines': 'off', // Prettier takes care of this
     'react/prop-types': 'off', // Try removing this after updating to "react-scripts": "^4.x"
+    'react/function-component-definition': [
+      'error',
+      {
+        namedComponents: ['function-declaration', 'arrow-function'],
+        unnamedComponents: 'arrow-function',
+      },
+    ],
     'react/default-props-match-prop-types': 'off',
     'react/require-default-props': 'off',
+    'react/jsx-no-useless-fragment': ['error', { allowExpressions: true }],
     'simple-import-sort/exports': 'error',
     'simple-import-sort/imports': [
       'error',

build-utils/build.ts

@@ -1,12 +1,11 @@
 import buble from '@rollup/plugin-buble';
+import terser from '@rollup/plugin-terser';
 import fs from 'fs';
 import { glob } from 'glob';
 import { InputOptions, OutputChunk, OutputOptions, rollup } from 'rollup';
 import image from 'rollup-plugin-img';
 import progress from 'rollup-plugin-progress';
-import { terser } from 'rollup-plugin-terser';
 import tsPlugin from 'rollup-plugin-typescript2';
-import ttypescript from 'ttypescript';
 
 import { dependencies, peerDependencies } from '../package.json';
 import sizes from './plugins/customized-rollup-plugin-sizes';
@@ -19,8 +18,8 @@ type ConfigOptions = Omit<RollupOptions, 'input' | 'output'> &
  * @param entries array of entries that need to be prepared or ignore single entry
  * @returns string{} | string
  */
-const prepareEntries = (entries: string[] | string) => {
-  return Array.isArray(entries)
+const prepareEntries = (entries: string[] | string) =>
+  Array.isArray(entries)
     ? entries.reduce(
         (prev, current) => ({
           ...prev,
@@ -29,7 +28,6 @@ const prepareEntries = (entries: string[] | string) => {
         {}
       )
     : entries;
-};
 
 /**
  * Bundle package
@@ -48,7 +46,6 @@ const bundlePackage = async (
         limit: 10000,
       }),
       tsPlugin({
-        typescript: ttypescript,
         tsconfigOverride: {
           compilerOptions: {
             module: 'esnext',
@@ -64,13 +61,13 @@ const bundlePackage = async (
           dangerousTaggedTemplateString: true,
         },
       }),
-      terser({ numWorkers: 10 }),
+      terser(),
       progress({ clearLine: true }),
       sizes({ details: true }),
     ],
     cache: false,
     external: Object.keys(peerDependencies).concat(Object.keys(dependencies)),
-    maxParallelFileReads: 50,
+    maxParallelFileOps: 50,
   };
   const configOptions: ConfigOptions = {
     ...defaultOptions,
@@ -83,13 +80,13 @@ const bundlePackage = async (
     const { output } = await bundle.write(configOptions.output);
     return output.filter(item => item.type === 'chunk') as OutputChunk[];
   } catch (err) {
-    console.error(err); // eslint-disable-line no-console
+    console.error('Error bundling:', err); // eslint-disable-line no-console
     return [];
   }
 };
 
-const generateAllModulesContent = async (bundles: OutputChunk[]) => {
-  return bundles
+const generateAllModulesContent = async (bundles: OutputChunk[]) =>
+  bundles
     .map(bundle => {
       const [, subFolderPath, fileName] =
         bundle.fileName.split(/(.*\/)*(.*)\.js/g) || [];
@@ -101,11 +98,9 @@ const generateAllModulesContent = async (bundles: OutputChunk[]) => {
       ) {
         return null;
       }
-      return `import "./${subFolderPath || ''}${fileName}";`;
+      return `import './${subFolderPath || ''}${fileName}';`;
     })
-    .filter(item => item)
-    .concat(['\n']);
-};
+    .filter(item => item);
 
 const animationsModules = glob.sync('src/animations/**/*.ts*') as string[];
 const iconsModules = glob.sync('src/icons/**/*.ts*') as string[];
@@ -126,8 +121,9 @@ const configs: ConfigOptions[] = [
       format: 'cjs',
       sourcemap: false,
       exports: 'auto',
+      interop: 'auto',
     },
-    maxParallelFileReads: 200,
+    maxParallelFileOps: 200,
   },
 ];
 
@@ -145,10 +141,7 @@ const build = async () => {
   fs.writeFileSync(
     // generate all modules ts file
     `./src/all.ts`,
-    [
-      '/* eslint-disable */',
-      moduleContents.flatMap(item => item).join('\n'),
-    ].join('\n')
+    `${moduleContents.flatMap(item => item).join('\n')}\n`
   );
 };
 

build-utils/css/README.md

@@ -144,7 +144,7 @@ If you create new variable, the script will add some default jsdocs to your vari
 
 **NOTE**: ALL OTHER THEME FILE NAME NEED TO HAVE PREFIX `_` SINCE IT WOULD ONLY BE USED FOR GENERATING CSS FILE AND NOT BEING EXPOSED TO AMINO CONSUMER.
 
-File `theme.ts` in `build-utils/css/constants` is the main theme constant. If you are going to update/add new theme, the new theme need to extend the key of variables in `theme.ts` by overwritting the variable in it's own theme file (ex: `_darkTheme.ts`).
+File `theme.ts` in `build-utils/css/constants` is the main theme constant. If you are going to update/add new theme, the new theme need to extend the key of variables in `theme.ts` by overwriting the variable in it's own theme file (ex: `_darkTheme.ts`).
 
 To strongly type the key of the new theme constant, use custom utility function `constraintDefinedAminoVar` located at `build-utils/css/constants/utils.ts` (This function would do nothing at runtime but help Typescript to understand and tell developers where the key in `darkStyleList` constant doesn't match with existing key in `theme.ts`).
 **Ex**: Constraint key constant of `Dark Mode` with keys exist in `Light Mode` (theme.ts).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amino-ui/core",
-  "version": "3.2.39",
+  "version": "3.2.40",
   "description": "Core UI components for Amino",
   "repository": "git@github.com:amino-ui/core.git",
   "author": "Joshua Beitler <joshbeitler@gmail.com>",
@@ -12,7 +12,8 @@
     "@babel/preset-typescript": "^7.18.6",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
-    "@rollup/plugin-buble": "^0.21.3",
+    "@rollup/plugin-buble": "^1.0.1",
+    "@rollup/plugin-terser": "^0.1.0",
     "@storybook/addon-a11y": "^6.5.10",
     "@storybook/addon-actions": "^6.5.10",
     "@storybook/addon-essentials": "^6.5.10",
@@ -28,23 +29,21 @@
     "@types/react-dom": "17.0.13",
     "@types/react-simple-maps": "^1.0.8",
     "@types/styled-components": "5.1.24",
-    "@types/svgo": "^2.6.3",
+    "@types/svgo": "^3.0.0",
     "@types/uuid": "^8.3.4",
-    "@typescript-eslint/eslint-plugin": "^5.36.2",
-    "@typescript-eslint/parser": "^5.36.2",
-    "@zerollup/ts-transform-paths": "^1.7.18",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
     "autoprefixer": "10.4.4",
     "babel-jest": "^28.1.3",
     "concurrently": "^7.1.0",
     "dotenv": "^16.0.0",
-    "eslint": "^8.23.0",
-    "eslint-config-airbnb": "18.2.0",
-    "eslint-config-airbnb-typescript": "^12.3.1",
-    "eslint-config-prettier": "^6.11.0",
+    "eslint": "^8.28.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "2.25.4",
     "eslint-plugin-jest": "^27.0.2",
     "eslint-plugin-jsx-a11y": "6.5.1",
-    "eslint-plugin-prettier": "3.4.1",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "7.29.4",
     "eslint-plugin-react-hooks": "4.3.0",
     "eslint-plugin-simple-import-sort": "^7.0.0",
@@ -56,30 +55,30 @@
     "jest-transformer-svg": "^2.0.0",
     "postcss": "8.4.12",
     "postcss-preset-env": "6.7.1",
-    "prettier": "2.6.0",
+    "prettier": "^2.8.0",
     "puppeteer": "^16.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hotkeys-hook": "3.4.4",
     "react-is": "^17.0.2",
     "react-tooltip": "^4.2.21",
-    "rollup": "^2.72.1",
+    "rollup": "^3.5.0",
     "rollup-plugin-img": "^1.1.0",
     "rollup-plugin-progress": "^1.1.2",
     "rollup-plugin-sizes": "^1.0.4",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.31.2",
+    "rollup-plugin-typescript2": "^0.34.1",
     "storybook-addon-designs": "6.2.1",
     "styled-components": "5.3.5",
-    "svgo": "^2.8.0",
+    "svgo": "^3.0.2",
     "text-treeview": "^1.0.2",
     "ts-jest": "^28.0.7",
     "ts-node": "^10.7.0",
     "ts-toolbelt": "^9.6.0",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "tslib": "^2.4.0",
     "ttypescript": "^1.5.13",
-    "typescript": "4.6.2"
+    "typescript": "4.8.4",
+    "typescript-transform-paths": "^3.4.4"
   },
   "dependencies": {
     "@dnd-kit/core": "^5.0.3",

prettier.config.cjs

@@ -14,14 +14,5 @@ module.exports = {
         tabWidth: 2,
       },
     },
-    {
-      files: '{**/.vscode/*.json,**/tsconfig.json,**/tsconfig.*.json}',
-      options: {
-        parser: 'json5',
-        quoteProps: 'preserve',
-        singleQuote: false,
-        trailingComma: 'all',
-      },
-    },
   ],
 };