Merge pull request #81 from Eureka-Shoulders/esmodule

Esmodule

jest.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   moduleDirectories: ['node_modules', 'src'],
   moduleFileExtensions: ['js', 'ts', 'tsx', 'json', 'node'],
   testPathIgnorePatterns: ['/node_modules/', '/lib/'],

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@euk-labs/componentz",
-  "version": "0.5.6",
-  "main": "./cjs/index.js",
-  "module": "./index.js",
+  "version": "0.5.7",
+  "type": "module",
+  "exports": "./index.js",
   "types": "./index.d.ts",
   "keywords": [
     "eureka",
@@ -32,13 +32,14 @@
     "@babel/preset-env": "^7.16.5",
     "@babel/preset-react": "^7.16.5",
     "@babel/preset-typescript": "^7.16.5",
-    "@commitlint/cli": "^16.2.1",
-    "@commitlint/config-conventional": "^16.2.1",
-    "@emotion/react": "^11.8.1",
-    "@emotion/styled": "^11.8.1",
-    "@mui/icons-material": "^5.8.0",
-    "@mui/lab": "^5.0.0-alpha.83",
-    "@mui/material": "^5.8.1",
+    "@commitlint/cli": "^17.0.2",
+    "@commitlint/config-conventional": "^17.0.2",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/lab": "^5.0.0-alpha.86",
+    "@mui/material": "^5.8.4",
+    "@mui/x-date-pickers": "^5.0.0-alpha.6",
     "@storybook/addon-actions": "^6.4.17",
     "@storybook/addon-essentials": "^6.4.17",
     "@storybook/addon-interactions": "^6.4.17",
@@ -52,48 +53,48 @@
     "@testing-library/react": "^12.1.2",
     "@types/faker": "^5.5.9",
     "@types/jest": "^27.0.3",
-    "@types/ramda": "^0.27.61",
     "@types/react": "^17.0.38",
     "@types/react-input-mask": "^3.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.8.0",
-    "@typescript-eslint/parser": "^5.8.0",
+    "@typescript-eslint/eslint-plugin": "^5.28.0",
+    "@typescript-eslint/parser": "^5.28.0",
     "babel-jest": "^27.4.5",
     "babel-loader": "^8.2.3",
     "chromatic": "^6.3.3",
     "esbuild": "^0.14.42",
-    "eslint": "^8.5.0",
-    "eslint-plugin-react": "^7.28.0",
+    "eslint": "^8.18.0",
+    "eslint-plugin-react": "^7.30.0",
     "husky": "^7.0.4",
     "inversify-react": "^1.0.2",
     "jest": "^27.4.5",
-    "mobx": "^6.3.10",
-    "mobx-react-lite": "^3.2.2",
+    "mobx": "^6.6.0",
+    "mobx-react-lite": "^3.4.0",
     "prettier": "^2.4.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "reflect-metadata": "^0.1.13",
     "rimraf": "^3.0.2",
     "ts-jest": "^27.1.2",
-    "tsc-alias": "^1.6.7",
-    "typescript": "^4.5.4"
+    "typescript": "^4.7.4"
   },
   "peerDependencies": {
-    "@emotion/react": ">=11.6.0",
-    "@emotion/styled": ">=11.6.0",
+    "@emotion/react": ">=11.9.0",
+    "@emotion/styled": ">=11.9.0",
     "@mui/icons-material": ">=5.8.0",
-    "@mui/lab": ">=5.0.0-alpha.83",
-    "@mui/material": ">=5.8.1",
+    "@mui/lab": ">=5.0.0-alpha.86",
+    "@mui/material": ">=5.8.4",
+    "@mui/x-date-pickers": ">=5.0.0-alpha.6",
     "inversify-react": ">=1.0.2",
-    "mobx": ">=6.3.7",
-    "mobx-react-lite": ">=3.2.2",
-    "react": ">=17",
-    "react-dom": ">=17"
+    "mobx": ">=6.6.0",
+    "mobx-react-lite": ">=3.4.0",
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2"
   },
   "dependencies": {
     "date-fns": "^2.28.0",
-    "inversify": ">=6.0.1",
-    "ramda": ">=0.27.1",
-    "react-input-mask": "^2.0.4",
-    "react-number-format": "^4.9.1"
+    "inversify": "^6.0.1",
+    "react-input-mask": "^2.0.4"
+  },
+  "engines": {
+    "node": ">=14.16"
   }
 }

scripts/build.js

@@ -1,18 +1,17 @@
 /* eslint-disable no-undef */
 /* eslint-disable @typescript-eslint/no-var-requires */
-const rimraf = require('rimraf');
-const esbuild = require('esbuild');
-const fs = require('fs');
-const path = require('path');
-const tscAlias = require('tsc-alias');
+import rimraf from 'rimraf';
+import esbuild from 'esbuild';
+import fs from 'node:fs';
+import path from 'node:path';
 
 const distFolder = './lib';
 const sourceFolder = './src';
 const includes = new RegExp('.+\\.(ts|tsx)$');
-const excludes = new RegExp('.+\\.stories\\.js$');
+const excludes = new RegExp('.+\\.(stories|test)\\.(ts|tsx)$');
 
 function getInputs(dir, result = []) {
-  fs.readdirSync(dir).forEach(function (file) {
+  fs.readdirSync(dir).forEach((file) => {
     file = path.join(dir, file);
     const stat = fs.statSync(file);
 
@@ -26,55 +25,38 @@ function getInputs(dir, result = []) {
   return result;
 }
 
-const inputs = getInputs(sourceFolder);
-const commomEsbuildOptions = {
-  entryPoints: [...inputs],
-  outbase: sourceFolder,
-  jsx: 'transform',
-  jsxFactory: 'React.createElement',
-  jsxFragment: 'React.Fragment',
-  target: 'es6',
-  loader: {
-    '.json': 'json',
-    '.tsx': 'tsx',
-    '.ts': 'ts',
-  },
-  minify: true,
-  inject: ['./scripts/react-shim.js'],
-};
+const inputs = [
+  ...getInputs(`${sourceFolder}/components`),
+  ...getInputs(`${sourceFolder}/containers`),
+  ...getInputs(`${sourceFolder}/hooks`),
+  ...getInputs(`${sourceFolder}/stores`),
+  `${sourceFolder}/index.ts`,
+];
 
 rimraf(distFolder, async (err) => {
   if (err) console.error(err);
 
   console.time('Generating ESM output...');
   await esbuild.build({
-    ...commomEsbuildOptions,
+    entryPoints: [...inputs],
+    outbase: sourceFolder,
+    jsx: 'transform',
+    jsxFactory: 'React.createElement',
+    jsxFragment: 'React.Fragment',
+    target: 'es6',
+    loader: {
+      '.json': 'json',
+      '.tsx': 'tsx',
+      '.ts': 'ts',
+    },
     format: 'esm',
+    // minify: true,
     outdir: distFolder,
     treeShaking: true,
+    inject: ['./scripts/react-shim.js'],
   });
   console.timeEnd('Generating ESM output...');
 
-  console.time('Generating CJS output...');
-  await esbuild.build({
-    ...commomEsbuildOptions,
-    format: 'cjs',
-    outdir: distFolder + '/cjs',
-  });
-  console.timeEnd('Generating CJS output...');
-
-  await tscAlias.replaceTscAliasPaths({
-    configFile: './tsconfig.json',
-    outDir: './lib/cjs',
-    declarationDir: './lib/cjs',
-  });
-
-  await tscAlias.replaceTscAliasPaths({
-    configFile: './tsconfig.json',
-    outDir: './lib',
-    declarationDir: './lib',
-  });
-
   fs.copyFileSync(
     path.join('./package.json'),
     path.join(distFolder, 'package.json')

src/components/AppBar/AppBar.stories.tsx

@@ -9,7 +9,7 @@ import {
 import { Box, Typography } from '@mui/material';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { useEffect } from 'react';
-import AppBar from '.';
+import AppBar from './index';
 import useUIStore from '../../hooks/useUIStore';
 
 export default {

src/components/AppBar/AppBar.test.tsx

@@ -3,7 +3,6 @@ import Bindings from '../../containers/global.bindings';
 import globalContainer from '../../containers/global.inversify';
 import AppBar from './index';
 import { Dashboard } from '@mui/icons-material';
-import { UIStoreType } from '@stores/types';
 import {
   getByTestId,
   getByText,
@@ -13,6 +12,7 @@ import {
 } from '@testing-library/react';
 import { Container } from 'inversify';
 import { Provider } from 'inversify-react';
+import { UIStoreType } from '../../stores/UIStore';
 
 describe('AppBar', () => {
   let mockedAppBar: RenderResult;

src/components/AppBar/DrawerItem.tsx

@@ -6,8 +6,8 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import useUIStore from '../../hooks/useUIStore';
 import { Fragment, useState } from 'react';
-import { Page } from './types';
 import { observer } from 'mobx-react-lite';
+import { Page } from './index';
 
 interface DrawerItemProps {
   page: Page;

src/components/AppBar/index.tsx

@@ -9,6 +9,24 @@ import { StyledAppBar } from './StyledAppBar';
 import { DrawerHeader, StyledDrawer } from './StyledDrawer';
 import Toolbar from './Toolbar';
 
+import { SvgIconTypeMap } from '@mui/material';
+import { OverridableComponent } from '@mui/material/OverridableComponent';
+
+type MuiIcon = OverridableComponent<
+  SvgIconTypeMap<Record<string, never>, 'svg'>
+> & {
+  muiName: string;
+};
+
+export interface Page {
+  label: string;
+  link: string;
+  Icon: MuiIcon | (() => JSX.Element);
+  sub?: Omit<Page, 'sub'>[];
+  drawer?: boolean;
+  disabled?: boolean;
+}
+
 export interface AppBarProps {
   children?: ReactNode;
 }

src/components/Breadcrumbs/Breadcrumbs.test.tsx

@@ -1,16 +1,17 @@
 import 'reflect-metadata';
 
 import Bindings from '../../containers/global.bindings';
-import { UIStoreType } from '@stores/types';
 import {
   getByTestId,
   render,
   RenderResult,
   screen,
 } from '@testing-library/react';
-import { Breadcrumb, globalContainer } from 'index';
 import { Container } from 'inversify';
 import { Provider } from 'inversify-react';
+import Breadcrumbs from './index';
+import globalContainer from '../../containers/global.inversify';
+import { UIStoreType } from '../../stores/UIStore';
 
 describe('Breadcrumbs', () => {
   let onClickSpy: jest.Mock;
@@ -24,7 +25,7 @@ describe('Breadcrumbs', () => {
 
     mockedBreadcrumb = render(
       <Provider container={unitContainer}>
-        <Breadcrumb />
+        <Breadcrumbs />
       </Provider>
     );
   });

src/components/Breadcrumbs/index.tsx

@@ -4,12 +4,16 @@ import Typography from '@mui/material/Typography';
 import useUIStore from '../../hooks/useUIStore';
 import { observer } from 'mobx-react-lite';
 import { MouseEventHandler } from 'react';
-import { BreadcrumbPath } from './types';
+
+export interface BreadcrumbPath {
+  label: string;
+  link?: string;
+  onClick?: () => void;
+}
 
 /**
  * @returns A component that displays Breadcrumbs and should be controlled by the UIStore
  */
-
 function Breadcrumbs(props: BreadcrumbsProps) {
   const uiStore = useUIStore();
 

src/components/Dialog/Dialog.test.tsx

@@ -1,11 +1,12 @@
 import 'reflect-metadata';
 import Bindings from '../../containers/global.bindings';
-import { UIStoreType } from '@stores/types';
 import '@testing-library/jest-dom/extend-expect';
 import { render, screen } from '@testing-library/react';
-import { Dialog, globalContainer } from 'index';
 import { Container } from 'inversify';
 import { Provider } from 'inversify-react';
+import globalContainer from '../../containers/global.inversify';
+import Dialog from './index';
+import { UIStoreType } from '../../stores/UIStore';
 
 describe('Dialog', () => {
   let onRejectSpy: jest.Mock;

src/components/Dialog/index.tsx

@@ -1,5 +1,4 @@
 import useUIStore from '../../hooks/useUIStore';
-import { DialogProps } from './types';
 import LoadingButton from '@mui/lab/LoadingButton';
 import { Backdrop } from '@mui/material';
 import Button from '@mui/material/Button';
@@ -9,15 +8,22 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import { observer } from 'mobx-react-lite';
 
+import { DialogProps as MuiDialogProps } from '@mui/material/Dialog';
+
+export interface DialogProps extends Omit<MuiDialogProps, 'open'> {
+  cancelLabel?: string;
+  confirmLabel?: string;
+  open?: boolean;
+}
+
 /**
  * @returns A component that displays a Dialog and should be controlled by the UIStore
  */
-
 function Dialog(props: DialogProps) {
   const uiStore = useUIStore();
   const showDialogActions =
     !!uiStore.dialog.onReject || !!uiStore.dialog.onAccept;
-  
+
   return (
     <Backdrop
       sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}