feat: css

schummar · Apr 17, 2023 · 29e7d5a · 29e7d5a
1 parent 8047c6e
commit 29e7d5a
Show file tree

Hide file tree

Showing 21 changed files with 16,287 additions and 25,995 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -17,7 +17,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: npm
 
       - name: Install dependencies

diff --git a/docs/.storybook/main.cjs b/docs/.storybook/main.cjs
@@ -1,19 +1,23 @@
 const path = require('path');
 const react = require('@vitejs/plugin-react');
-
 module.exports = {
   stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
-  framework: '@storybook/react',
-  core: {
-    builder: '@storybook/builder-vite',
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
   },
   features: {
     storyStoreV7: true,
   },
   async viteFinal(config) {
-    config.plugins = config.plugins.filter((plugin) => !(Array.isArray(plugin) && plugin[0]?.name.includes('vite:react')));
-
+    config.plugins = config.plugins.filter(
+      (plugin) => !(Array.isArray(plugin) && plugin[0]?.name.includes('vite:react')),
+    );
     config.plugins.push(
       react({
         exclude: [/\.stories\.(t|j)sx?$/, /node_modules/],
@@ -23,11 +27,14 @@ module.exports = {
         },
       }),
     );
-
     config.esbuild = {
-      logOverride: { 'this-is-undefined-in-esm': 'silent' },
+      logOverride: {
+        'this-is-undefined-in-esm': 'silent',
+      },
     };
-
     return config;
   },
+  docs: {
+    // autodocs: true,
+  },
 };
diff --git a/docs/package.json b/docs/package.json
@@ -1,21 +1,26 @@
 {
   "name": "docs",
   "scripts": {
-    "start": "start-storybook -p 6006",
-    "build": "build-storybook"
+    "start": "storybook dev -p 6006",
+    "build": "storybook build"
   },
   "dependencies": {
     "@babel/core": "7.21.0",
-    "@storybook/addon-actions": "6.5.16",
-    "@storybook/addon-essentials": "6.5.16",
-    "@storybook/addon-interactions": "6.5.16",
-    "@storybook/addon-links": "6.5.16",
-    "@storybook/builder-vite": "0.4.2",
-    "@storybook/react": "6.5.16",
-    "@storybook/testing-library": "0.0.13",
-    "babel-loader": "9.1.2",
     "@material-ui/core": "4.12.4",
     "@mui/material": "5.11.12",
-    "@types/react": "18.0.28"
+    "@storybook/addon-actions": "7.0.4",
+    "@storybook/addon-essentials": "7.0.4",
+    "@storybook/addon-interactions": "7.0.4",
+    "@storybook/addon-links": "7.0.4",
+    "@storybook/react": "7.0.4",
+    "@storybook/testing-library": "0.1.0",
+    "@types/react": "18.0.28",
+    "babel-loader": "9.1.2"
+  },
+  "devDependencies": {
+    "@storybook/react-vite": "^7.0.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^7.0.4"
   }
 }
diff --git a/docs/stories/aIntro.stories.tsx b/docs/stories/aIntro.stories.tsx
@@ -1,57 +1,50 @@
-import type { ComponentMeta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { Table } from '../../src';
-import css from './styles.module.css';
 import data from './_data';
 import { defaultColumns } from './_default';
+import css from './styles.module.css';
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
   title: 'Intro',
   component: Table,
+
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
-    classes: {
-      defaultValue: {
-        table: css.table,
-      },
-    },
     items: {
-      defaultValue: data,
       table: { disable: true },
     },
-    id: {
-      defaultValue: 'id',
-    },
-    columns: {
-      defaultValue: defaultColumns,
-    },
-    virtual: {
-      defaultValue: true,
-    },
-    enableExport: {
-      defaultValue: true,
-    },
-    stickyHeader: {
-      defaultValue: true,
-    },
     fullWidth: {
       defaultValue: true,
       options: [true, false, 'left', 'right'],
       control: { type: 'inline-radio' },
     },
   },
-} as ComponentMeta<typeof Table>;
+} as Meta<typeof Table>;
 
-export const Primary = {};
+export const Primary = {
+  args: {
+    classes: { table: css.table },
+    items: data,
+    id: 'id',
+    columns: defaultColumns,
+    virtual: true,
+    enableExport: true,
+    stickyHeader: true,
+    fullWidth: true,
+  },
+};
 
 export const SortDisabledAll = {
   args: {
+    ...Primary.args,
     disableSort: true,
   },
 };
 
 export const SortDisabledOne = {
   args: {
+    ...Primary.args,
     columns: defaultColumns.map((col, i) => ({
       ...col,
       disableSort: i === 0,
@@ -61,16 +54,29 @@ export const SortDisabledOne = {
 
 export const Persitance = {
   args: {
+    ...Primary.args,
     persist: { storage: localStorage, id: 'tablePersistance' },
   },
 };
 
 export const HiddenColumns = {
   args: {
+    ...Primary.args,
     defaultHiddenColumns: new Set([1, 2]),
     columns: defaultColumns.map((col, i) => ({
       ...col,
       hidden: i === 0 ? false : i === 1 ? true : undefined,
     })),
   },
 };
+
+export const StyledCells = {
+  args: {
+    ...Primary.args,
+    css: {
+      evenCell: {
+        backgroundColor: 'rgba(0, 0, 0, 0.05)',
+      },
+    },
+  },
+};