118 monorepo

.eslintrc.js

@@ -34,6 +34,7 @@ module.exports = {
     "unicorn/no-array-for-each": "off",
     "react/function-component-definition": "off",
     "react/jsx-filename-extension": "off",
+    "@typescript-eslint/no-empty-function": "off",
   },
   env: {
     "browser": true,

jest.config.js

@@ -0,0 +1,27 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  collectCoverageFrom: ['packages/**/__test__/*.{ts,tsx}'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  modulePathIgnorePatterns: [
+    '<rootDir>/examples',
+    '<rootDir>/tooling/cra-template*',
+  ],
+  transform: {
+    '^.+\\.(ts|tsx|js|jsx)?$': '@swc-node/jest',
+  },
+  transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$'],
+  setupFilesAfterEnv: [
+    '@testing-library/jest-dom/extend-expect',
+    './scripts/setup-test.ts',
+  ],
+  globals: {
+    'ts-jest': {
+      tsconfig: 'tsconfig.json',
+    },
+  },
+  watchPlugins: [
+    'jest-watch-typeahead/filename',
+    'jest-watch-typeahead/testname',
+  ],
+};

lerna.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "node_modules/lerna/schemas/lerna-schema.json",
+  "useWorkspaces": true,
+  "version": "3.0.0",
+  "npmClient": "yarn",
+  "packages": ["packages/*"]
+}

package.json

@@ -33,9 +33,8 @@
     "lint": "eslint --ext .ts,.tsx .",
     "package": "electron-forge package",
     "prepare": "husky install",
-    "rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir release/app",
     "start": "cross-env NODE_ENV=development DEBUG=\"node-ts-cache,knex:*\" electron-forge start",
-    "test": "NODE_OPTIONS=--experimental-vm-modules npx jest",
+    "test": "NODE_OPTIONS=--experimental-vm-modules npx jest packages",
     "make": "electron-forge make"
   },
   "lint-staged": {
@@ -67,51 +66,6 @@
       }
     ]
   },
-  "jest": {
-    "preset": "ts-jest/presets/default-esm",
-    "moduleDirectories": [
-      "node_modules",
-      "release/app/node_modules",
-      "src"
-    ],
-    "moduleFileExtensions": [
-      "js",
-      "jsx",
-      "ts",
-      "tsx",
-      "json"
-    ],
-    "moduleNameMapper": {
-      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/.erb/mocks/fileMock.js",
-      "\\.(css|less|sass|scss)$": "identity-obj-proxy"
-    },
-    "setupFiles": [],
-    "testEnvironment": "jsdom",
-    "extensionsToTreatAsEsm": [
-      ".ts"
-    ],
-    "testEnvironmentOptions": {
-      "url": "http://localhost/"
-    },
-    "testPathIgnorePatterns": [
-      "release/app/dist"
-    ],
-    "transform": {
-      "^.+\\.(ts|tsx)?$": [
-        "ts-jest",
-        {
-          "useESM": true
-        }
-      ]
-    },
-    "coverageProvider": "v8",
-    "collectCoverage": true,
-    "reporters": [
-      "default",
-      "summary"
-    ],
-    "verbose": true
-  },
   "dependencies": {
     "@chakra-ui/card": "^2.1.6",
     "@chakra-ui/checkbox": "^2.2.10",
@@ -126,6 +80,11 @@
     "@chakra-ui/transition": "^2.0.15",
     "@chakra-ui/utils": "^2.0.15",
     "@day1co/fastcase": "github:garrylachman/fastcase#main",
+    "@electrocrud/shared": "link:./packages/shared",
+    "@electrocrud/utils": "link:./packages/utils",
+    "@electrocrud/buttons": "link:./packages/buttons",
+    "@electrocrud/feedback": "link:./packages/feedback",
+    "@electrocrud/tables": "link:./packages/tables",
     "@emotion/cache": "^11.7.1",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
@@ -162,7 +121,7 @@
     "electron-log": "^4.4.8",
     "electron-squirrel-startup": "^1.0.0",
     "flatted": "^3.2.7",
-    "framer-motion": "^7.10.0",
+    "framer-motion": "^9.0.2",
     "get-current-line": "^6.6.0",
     "get-port": "5.1.1",
     "javascript-time-ago": "^2.5.9",
@@ -227,6 +186,8 @@
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
     "@sqltools/formatter": "^1.2.5",
     "@svgr/webpack": "^6.3.1",
+    "@swc-node/jest": "^1.6.1",
+    "@swc/core": "^1.3.35",
     "@teamsupercell/typings-for-css-modules-loader": "^2.5.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",
@@ -245,6 +206,7 @@
     "@types/react-typist": "^2.0.3",
     "@types/redux-logger": "^3.0.9",
     "@types/terser-webpack-plugin": "^5.0.4",
+    "@types/testing-library__jest-dom": "^5.14.5",
     "@types/underscore": "^1.11.4",
     "@types/uuid": "^8.3.4",
     "@types/webpack-bundle-analyzer": "^4.4.2",
@@ -276,6 +238,7 @@
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-testing-library": "^5.10.1",
     "eslint-plugin-unicorn": "^45.0.1",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^7.3.0",
@@ -284,8 +247,10 @@
     "husky": "^8.0.1",
     "identity-obj-proxy": "^3.0.0",
     "install": "^0.13.0",
-    "jest": "^29.4.1",
-    "jest-environment-jsdom": "^29.4.1",
+    "jest": "^29.4.2",
+    "jest-environment-jsdom": "^29.4.2",
+    "jest-watch-typeahead": "^2.2.2",
+    "lerna": "^6.4.1",
     "lint-staged": "^13.0.3",
     "lodash": "^4.17.21",
     "node-loader": "^2.0.0",
@@ -329,5 +294,9 @@
       "src/shared/**"
     ],
     "logLevel": "quiet"
-  }
+  },
+  "workspaces": [
+    "packages/*"
+  ],
+  "private": true
 }

packages/buttons/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  "extends": [
+      "../../.eslintrc.js"
+  ],
+};

packages/buttons/README.md

@@ -0,0 +1,11 @@
+# `@electrocrud/buttons`
+
+> TODO: description
+
+## Usage
+
+```
+const buttons = require('@electrocrud/buttons');
+
+// TODO: DEMONSTRATE API
+```

packages/buttons/__tests__/buttons.test.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { RippleButton } from '../src/ripple-button';
+import { ChakraProvider } from '@chakra-ui/react';
+import theme from '../../../src/renderer/theme/theme';
+
+test('button with text', () => {
+  const { getByText, getByRole } = render(
+    <ChakraProvider theme={theme}>
+      <RippleButton variant="solid" bgColorScheme="primary" size="lg">
+        Save
+      </RippleButton>
+    </ChakraProvider>
+  );
+  expect(getByText('Save')).toBeTruthy();
+  expect(getByRole('button')).not.toBeDisabled();
+});
+
+test('disabled button', () => {
+  const { getByRole } = render(
+    <ChakraProvider theme={theme}>
+      <RippleButton isDisabled>Save</RippleButton>
+    </ChakraProvider>
+  );
+  expect(getByRole('button')).toBeDisabled();
+  expect(getByRole('button')).toHaveAttribute('disabled');
+});
+
+test('click', () => {
+  const clickFunction = jest.fn();
+  const { getByRole } = render(
+    <ChakraProvider theme={theme}>
+      <RippleButton onClick={clickFunction}>Save</RippleButton>
+    </ChakraProvider>
+  );
+
+  const button = getByRole('button');
+  fireEvent.click(button);
+  expect(clickFunction).toHaveBeenCalledTimes(1);
+});
+
+test('click disabled', () => {
+  const clickFunction = jest.fn();
+  const { getByRole } = render(
+    <ChakraProvider theme={theme}>
+      <RippleButton onClick={clickFunction} isDisabled>
+        Save
+      </RippleButton>
+    </ChakraProvider>
+  );
+
+  const button = getByRole('button');
+  fireEvent.click(button);
+  expect(clickFunction).toHaveBeenCalledTimes(0);
+});

packages/buttons/lib/action-button/action-button.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { RippleButtonProperties } from '../ripple-button.js';
+import '@chakra-ui/react';
+import 'ts-toolbelt';
+
+declare const ActionButton: FC<RippleButtonProperties>;
+
+export { ActionButton };