fix(components): fix data table exports

packages/components/CHANGELOG.md

@@ -3,6 +3,70 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.9.2-beta.0](https://github.com/layer5io/sistent/compare/@layer5/[email protected]...@layer5/[email protected]) (2023-11-09)
+
+**Note:** Version bump only for package @layer5/sistent-components
+
+## [0.9.1-beta.2](https://github.com/layer5io/sistent/compare/@layer5/[email protected]...@layer5/[email protected]) (2023-11-09)
+
+**Note:** Version bump only for package @layer5/sistent-components
+
+## [0.9.1-beta.1](https://github.com/layer5io/sistent/compare/@layer5/[email protected]...@layer5/[email protected]) (2023-11-09)
+
+### Bug Fixes
+
+- **import:** import of inputlabel ([7e7fa3a](https://github.com/layer5io/sistent/commit/7e7fa3a6b7ec3482a003671b473929ecedb92227))
+
+# [0.9.0-beta.8](https://github.com/layer5io/sistent/compare/@layer5/[email protected]...@layer5/[email protected]) (2023-11-09)
+
+### Bug Fixes
+
+- **components:** change to export function ([bfcbe25](https://github.com/layer5io/sistent/commit/bfcbe257160cd12e3cb859441a0d73241b4c8335))
+- **components:** correct exports again ([1ca52b7](https://github.com/layer5io/sistent/commit/1ca52b71aad7e1753daf4af726d9f6950087ce32))
+- **components:** fix data table exports ([dbb474b](https://github.com/layer5io/sistent/commit/dbb474b70dd70da3d83656219cebd7fea0e9c2f7))
+- **components:** moved exports to src/index.tsx ([2916da5](https://github.com/layer5io/sistent/commit/2916da599d02abf9a67a975ae1922809c55da452))
+- **components:** remove custom-table.tsx ([765d194](https://github.com/layer5io/sistent/commit/765d194b8aadbde019b93b106dfd2ed088fbca3a))
+- **components:** remove duplicated grid.tsx ([ee5b275](https://github.com/layer5io/sistent/commit/ee5b275f0ef58c2cd23b85b2560ca550877d9ea9))
+- **components:** turn off splitting during build ([3b5319b](https://github.com/layer5io/sistent/commit/3b5319b0774cecd5eabf9613aad5058f0809fec2))
+- move ResponsiveDataTable to custom ([f2f5ecc](https://github.com/layer5io/sistent/commit/f2f5eccf1b529da197141ca009f03112f778a6cd))
+
+# [0.9.0-beta.7](https://github.com/layer5io/sistent/compare/@layer5/[email protected]...@layer5/[email protected]) (2023-11-09)
+
+### Bug Fixes
+
+- **components:** turn off splitting during build ([47ed274](https://github.com/layer5io/sistent/commit/47ed274e704617d784ad7fb4a6037048e56f1572))
+
+# [0.9.0-beta.6](https://github.com/layer5io/sistent/compare/@layer5/[email protected]...@layer5/[email protected]) (2023-11-09)
+
+### Bug Fixes
+
+- **components:** moved exports to src/index.tsx ([a3ada47](https://github.com/layer5io/sistent/commit/a3ada47f513f23ff135b6f21559c39d6aa44afb1))
+
+# [0.9.0-beta.5](https://github.com/layer5io/sistent/compare/@layer5/[email protected]...@layer5/[email protected]) (2023-11-09)
+
+### Bug Fixes
+
+- **components:** change to export function ([1348bce](https://github.com/layer5io/sistent/commit/1348bce85ff379543757f0ea38758f1c7bcc87b9))
+
+# [0.9.0-beta.4](https://github.com/layer5io/sistent/compare/@layer5/[email protected]...@layer5/[email protected]) (2023-11-09)
+
+### Bug Fixes
+
+- **components:** remove custom-table.tsx ([8a25608](https://github.com/layer5io/sistent/commit/8a2560852ff23030f4389e28e061ea6fe6a61aeb))
+
+# [0.9.0-beta.3](https://github.com/layer5io/sistent/compare/@layer5/[email protected]...@layer5/[email protected]) (2023-11-09)
+
+### Bug Fixes
+
+- **components:** correct exports again ([aa5d4a0](https://github.com/layer5io/sistent/commit/aa5d4a06e5086ff7ab90a1b8461fda23da86101a))
+- **components:** remove duplicated grid.tsx ([0c1952f](https://github.com/layer5io/sistent/commit/0c1952f1b0bb64e8ad08b35e96d67299b699d5c0))
+
+# [0.9.0-beta.2](https://github.com/layer5io/sistent/compare/@layer5/[email protected]...@layer5/[email protected]) (2023-11-09)
+
+### Bug Fixes
+
+- **components:** fix data table exports ([6e80b75](https://github.com/layer5io/sistent/commit/6e80b753bb31be88c98abad1c3f28b8a607ea016))
+
 ## [0.9.1-beta.0](https://github.com/layer5io/sistent/compare/@layer5/[email protected]...@layer5/[email protected]) (2023-11-09)
 
 ### Bug Fixes

packages/components/package.json

@@ -1,12 +1,21 @@
 {
   "name": "@layer5/sistent-components",
-  "version": "0.9.1-beta.0",
+  "version": "0.9.2-beta.0",
   "description": "Reusable React Components",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
   "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist"
+    "dist/**"
   ],
   "scripts": {
     "build": "NODE_ENV=production tsup",
@@ -15,7 +24,7 @@
     "lint:fix": "eslint --fix"
   },
   "dependencies": {
-    "@layer5/sistent-svg": "^0.11.2-beta.0"
+    "@layer5/sistent-svg": "^0.11.2-beta.1"
   },
   "devDependencies": {
     "@emotion/react": "^11.11.1",
@@ -68,6 +77,14 @@
     "react-dom": "^17.0.0 || ^18.0.0"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "exports": {
+      ".": {
+        "require": "./dist/index.js",
+        "import": "./dist/index.js",
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
   }
 }

packages/components/src/custom/ResponsiveDataTable.tsx

@@ -0,0 +1,127 @@
+import MUIDataTable from 'mui-datatables';
+import React from 'react';
+
+export interface Column {
+  name: string;
+  label: string;
+  options?: {
+    filter?: boolean;
+    sort?: boolean;
+    searchable?: boolean;
+    display?: boolean;
+    sortDescFirst?: boolean;
+    customBodyRender?: (value: string | number | boolean | object) => JSX.Element;
+  };
+}
+
+export interface ResponsiveDataTableProps {
+  data: string[][];
+  columns: Column[];
+  options?: object;
+  tableCols?: Column[];
+  updateCols?: ((columns: Column[]) => void) | undefined;
+  columnVisibility: Record<string, boolean> | undefined;
+  theme?: object;
+}
+
+const ResponsiveDataTable = ({
+  data,
+  columns,
+  options = {},
+  ...props
+}: ResponsiveDataTableProps): JSX.Element => {
+  const [tableCols, updateCols] = React.useState<Column[]>(columns);
+  const [columnVisibility, ,] = React.useState<Record<string, boolean>>({});
+
+  const formatDate = (date: Date): string => {
+    const dateOptions: Intl.DateTimeFormatOptions = {
+      weekday: 'short',
+      day: 'numeric',
+      month: 'long',
+      year: 'numeric'
+    };
+
+    return new Intl.DateTimeFormat('un-US', dateOptions).format(date);
+  };
+
+  const updatedOptions = {
+    ...options,
+    onViewColumnsChange: (column: string, action: string) => {
+      switch (action) {
+        case 'add': {
+          const colToAdd = columns.find((obj) => obj.name === column);
+          if (colToAdd) {
+            colToAdd.options!.display = true;
+            updateCols([...columns]);
+          }
+          break;
+        }
+        case 'remove': {
+          const colToRemove = columns.find((obj) => obj.name === column);
+          if (colToRemove) {
+            colToRemove.options!.display = false;
+            updateCols([...columns]);
+          }
+          break;
+        }
+      }
+    }
+  };
+
+  React.useEffect(() => {
+    columns?.forEach((col) => {
+      console.log('Current Column:', col);
+      if (typeof col === 'object' && col !== null) {
+        if (!col.options) {
+          col.options = {};
+        }
+        col.options.display = columnVisibility[col.name];
+
+        if (
+          ['updated_at', 'created_at', 'deleted_at', 'last_login_time', 'joined_at'].includes(
+            col.name
+          )
+        ) {
+          col.options.customBodyRender = (value: string | number | boolean | object) => {
+            if (value === 'NA') {
+              return <>{value}</>;
+            } else if (typeof value === 'object' && 'Valid' in value) {
+              const obj = value as { Valid: boolean; Time: string | undefined };
+              if (obj.Valid && obj.Time) {
+                const date = new Date(obj.Time);
+                return <>{formatDate(date)}</>;
+              } else {
+                return <>NA</>;
+              }
+            } else if (typeof value === 'string') {
+              const date = new Date(value);
+              return <>{formatDate(date)}</>;
+            } else {
+              return <>{value}</>;
+            }
+          };
+        }
+      }
+    });
+    updateCols([...columns]);
+  }, [columnVisibility]);
+
+  const components = {
+    ExpandButton: () => ''
+  };
+
+  return (
+    <MUIDataTable
+      columns={columns || []}
+      data={data || []}
+      title={undefined}
+      components={components}
+      options={updatedOptions}
+      tableCols={tableCols}
+      updateCols={updateCols}
+      {...props}
+    />
+  );
+};
+
+export default ResponsiveDataTable;

packages/components/src/custom/Toolbar/custom-table.tsx → packages/components/src/custom/ResponsiveDataTable/ResponsiveDataTable.tsx

@@ -1,5 +1,5 @@
 import MUIDataTable from 'mui-datatables';
-import { useEffect, useState } from 'react';
+import React from 'react';
 
 interface Column {
   name: string;
@@ -24,14 +24,14 @@ interface ResponsiveDataTableProps {
   theme?: object;
 }
 
-function ResponsiveDataTable({
+export function ResponsiveDataTable({
   data,
   columns,
   options = {},
   ...props
 }: ResponsiveDataTableProps): JSX.Element {
-  const [tableCols, updateCols] = useState(columns);
-  const [columnVisibility, ,] = useState<Record<string, boolean>>({});
+  const [tableCols, updateCols] = React.useState(columns);
+  const [columnVisibility, ,] = React.useState<Record<string, boolean>>({});
 
   const formatDate = (date: Date): string => {
     const dateOptions: Intl.DateTimeFormatOptions = {
@@ -68,7 +68,7 @@ function ResponsiveDataTable({
     }
   };
 
-  useEffect(() => {
+  React.useEffect(() => {
     columns?.forEach((col) => {
       if (!col.options) {
         col.options = {};
@@ -120,5 +120,3 @@ function ResponsiveDataTable({
     />
   );
 }
-
-export default ResponsiveDataTable;

packages/components/src/custom/ResponsiveDataTable/index.tsx

@@ -0,0 +1 @@
+export { ResponsiveDataTable } from './ResponsiveDataTable';

packages/components/src/custom/Toolbar/index.tsx

@@ -1,6 +1,5 @@
 import CustomColumnVisibilityControl from './custom-column';
 import UniversalFilter from './custom-filter';
 import SearchBar from './custom-search';
-import ResponsiveDataTable from './custom-table';
 
-export { CustomColumnVisibilityControl, ResponsiveDataTable, SearchBar, UniversalFilter };
+export { CustomColumnVisibilityControl, SearchBar, UniversalFilter };

packages/components/src/custom/index.tsx

@@ -3,14 +3,12 @@ import { StyledDialog, StyledDialogActions, StyledDialogContent } from './Dialog
 import CustomColumnVisibilityControl from './Toolbar/custom-column';
 import UniversalFilter from './Toolbar/custom-filter';
 import SearchBar from './Toolbar/custom-search';
-import ResponsiveDataTable from './Toolbar/custom-table';
 import { StyledTooltip } from './Tooltip';
 
 export { StyledChartDialog } from './ChartDialog';
 export { StyledSearchBar } from './SearchBar';
 export {
   CustomColumnVisibilityControl,
-  ResponsiveDataTable,
   SearchBar,
   StyledDialog,
   StyledDialogActions,

packages/components/src/index.tsx

@@ -30,10 +30,10 @@ export * from './base/ToggleButton';
 export * from './base/Toolbar';
 export * from './base/Tooltip';
 export * from './base/Typography';
-export * from './custom/Dialog';
-export * from './custom/Toolbar';
-export * from './custom/Toolbar/index';
-export * from './custom/Tooltip';
-export * from './custom/index';
-// export * from './custom/ErrorBoundary';
 export * from './colors';
+export * from './custom';
+export {
+  default as ResponsiveDataTable,
+  type Column,
+  type ResponsiveDataTableProps
+} from './custom/ResponsiveDataTable';

packages/components/tsconfig.json

@@ -10,7 +10,9 @@
       "emitDeclarationOnly": true,
       "typeRoots": ["./src/types"],
       "types": ["react-error-boundary"],
-      "lib": ["ES2016", "DOM"]
+      "lib": ["es2020", "DOM"],
+      "target": "es2020",
+      "module": "esnext"
     },
     "include": ["."],
     "exclude": ["dist", "build", "node_modules", "**/*.d.ts", "tsup.config.ts"]

packages/components/tsup.config.ts

@@ -9,11 +9,9 @@ export default defineConfig({
   bundle: env === 'production',
   clean: true,
   dts: true,
-  format: ['esm', 'cjs'],
+  format: ['cjs'],
   external: ['react'],
-  splitting: true,
   minify: env === 'production',
-  skipNodeModulesBundle: true,
   watch: env === 'development',
   sourcemap: env === 'development',
   tsconfig: path.resolve(__dirname, './tsconfig.json')

packages/svg/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.11.2-beta.1](https://github.com/layer5io/sistent/compare/@layer5/[email protected]...@layer5/[email protected]) (2023-11-09)
+
+**Note:** Version bump only for package @layer5/sistent-svg
+
+## [0.11.1-beta.7](https://github.com/layer5io/sistent/compare/@layer5/[email protected]...@layer5/[email protected]) (2023-11-09)
+
+**Note:** Version bump only for package @layer5/sistent-svg
+
+## [0.11.1-beta.6](https://github.com/layer5io/sistent/compare/@layer5/[email protected]...@layer5/[email protected]) (2023-11-09)
+
+**Note:** Version bump only for package @layer5/sistent-svg
+
 ## [0.11.2-beta.0](https://github.com/layer5io/sistent/compare/@layer5/[email protected]...@layer5/[email protected]) (2023-11-09)
 
 **Note:** Version bump only for package @layer5/sistent-svg

packages/svg/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layer5/sistent-svg",
-  "version": "0.11.2-beta.0",
+  "version": "0.11.2-beta.1",
   "description": "SVG Icons library",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",