From ecfe3bd5f2c1d3157488c14b2c2dde7fd62d774e Mon Sep 17 00:00:00 2001 From: zuramai Date: Mon, 27 Nov 2023 08:34:47 +0700 Subject: [PATCH 1/5] feat: create @bootwind/table package --- packages/table/.babelrc | 12 ++++++ packages/table/.eslintrc.json | 18 ++++++++ packages/table/README.md | 7 ++++ packages/table/package.json | 12 ++++++ packages/table/project.json | 32 +++++++++++++++ packages/table/src/index.ts | 6 +++ packages/table/src/lib/Table.tsx | 12 ++++++ packages/table/src/lib/TableBody.tsx | 15 +++++++ packages/table/src/lib/TableCell.tsx | 0 packages/table/src/lib/TableHead.tsx | 0 packages/table/src/lib/TableHeader.tsx | 0 packages/table/src/lib/TableRow.tsx | 0 packages/table/src/stories/Table.stories.tsx | 0 packages/table/tsconfig.json | 18 ++++++++ packages/table/tsconfig.lib.json | 23 +++++++++++ packages/table/vite.config.ts | 43 ++++++++++++++++++++ tsconfig.base.json | 3 +- 17 files changed, 200 insertions(+), 1 deletion(-) create mode 100644 packages/table/.babelrc create mode 100644 packages/table/.eslintrc.json create mode 100644 packages/table/README.md create mode 100644 packages/table/package.json create mode 100644 packages/table/project.json create mode 100644 packages/table/src/index.ts create mode 100644 packages/table/src/lib/Table.tsx create mode 100644 packages/table/src/lib/TableBody.tsx create mode 100644 packages/table/src/lib/TableCell.tsx create mode 100644 packages/table/src/lib/TableHead.tsx create mode 100644 packages/table/src/lib/TableHeader.tsx create mode 100644 packages/table/src/lib/TableRow.tsx create mode 100644 packages/table/src/stories/Table.stories.tsx create mode 100644 packages/table/tsconfig.json create mode 100644 packages/table/tsconfig.lib.json create mode 100644 packages/table/vite.config.ts diff --git a/packages/table/.babelrc b/packages/table/.babelrc new file mode 100644 index 0000000..1ea870e --- /dev/null +++ b/packages/table/.babelrc @@ -0,0 +1,12 @@ +{ + "presets": [ + [ + "@nx/react/babel", + { + "runtime": "automatic", + "useBuiltIns": "usage" + } + ] + ], + "plugins": [] +} diff --git a/packages/table/.eslintrc.json b/packages/table/.eslintrc.json new file mode 100644 index 0000000..a39ac5d --- /dev/null +++ b/packages/table/.eslintrc.json @@ -0,0 +1,18 @@ +{ + "extends": ["plugin:@nx/react", "../../.eslintrc.json"], + "ignorePatterns": ["!**/*"], + "overrides": [ + { + "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], + "rules": {} + }, + { + "files": ["*.ts", "*.tsx"], + "rules": {} + }, + { + "files": ["*.js", "*.jsx"], + "rules": {} + } + ] +} diff --git a/packages/table/README.md b/packages/table/README.md new file mode 100644 index 0000000..189e764 --- /dev/null +++ b/packages/table/README.md @@ -0,0 +1,7 @@ +# table + +This library was generated with [Nx](https://nx.dev). + +## Running unit tests + +Run `nx test table` to execute the unit tests via [Vitest](https://vitest.dev/). diff --git a/packages/table/package.json b/packages/table/package.json new file mode 100644 index 0000000..4b4dcbb --- /dev/null +++ b/packages/table/package.json @@ -0,0 +1,12 @@ +{ + "name": "table", + "version": "0.0.1", + "main": "./index.js", + "types": "./index.d.ts", + "exports": { + ".": { + "import": "./index.mjs", + "require": "./index.js" + } + } +} diff --git a/packages/table/project.json b/packages/table/project.json new file mode 100644 index 0000000..c12e98b --- /dev/null +++ b/packages/table/project.json @@ -0,0 +1,32 @@ +{ + "name": "table", + "$schema": "../../node_modules/nx/schemas/project-schema.json", + "sourceRoot": "packages/table/src", + "projectType": "library", + "tags": [], + "targets": { + "lint": { + "executor": "@nx/eslint:lint", + "outputs": ["{options.outputFile}"], + "options": { + "lintFilePatterns": ["packages/table/**/*.{ts,tsx,js,jsx}"] + } + }, + "build": { + "executor": "@nx/vite:build", + "outputs": ["{options.outputPath}"], + "defaultConfiguration": "production", + "options": { + "outputPath": "dist/packages/table" + }, + "configurations": { + "development": { + "mode": "development" + }, + "production": { + "mode": "production" + } + } + } + } +} diff --git a/packages/table/src/index.ts b/packages/table/src/index.ts new file mode 100644 index 0000000..c2504a7 --- /dev/null +++ b/packages/table/src/index.ts @@ -0,0 +1,6 @@ +export * from './lib/Table'; +export * from './lib/TableBody'; +export * from './lib/TableHead'; +export * from './lib/TableHeader'; +export * from './lib/TableRow'; +export * from './lib/TableCell'; diff --git a/packages/table/src/lib/Table.tsx b/packages/table/src/lib/Table.tsx new file mode 100644 index 0000000..4c24824 --- /dev/null +++ b/packages/table/src/lib/Table.tsx @@ -0,0 +1,12 @@ +/* eslint-disable-next-line */ +export interface TableProps {} + +export function Table(props: TableProps) { + return ( +
+

Welcome to Table!

+
+ ); +} + +export default Table; diff --git a/packages/table/src/lib/TableBody.tsx b/packages/table/src/lib/TableBody.tsx new file mode 100644 index 0000000..9f1e9c6 --- /dev/null +++ b/packages/table/src/lib/TableBody.tsx @@ -0,0 +1,15 @@ +import React from "react"; +import { cn } from "@bootwind/common" + +export const TableBody = React.forwardRef< + HTMLTableSectionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + <> + + +)) \ No newline at end of file diff --git a/packages/table/src/lib/TableCell.tsx b/packages/table/src/lib/TableCell.tsx new file mode 100644 index 0000000..e69de29 diff --git a/packages/table/src/lib/TableHead.tsx b/packages/table/src/lib/TableHead.tsx new file mode 100644 index 0000000..e69de29 diff --git a/packages/table/src/lib/TableHeader.tsx b/packages/table/src/lib/TableHeader.tsx new file mode 100644 index 0000000..e69de29 diff --git a/packages/table/src/lib/TableRow.tsx b/packages/table/src/lib/TableRow.tsx new file mode 100644 index 0000000..e69de29 diff --git a/packages/table/src/stories/Table.stories.tsx b/packages/table/src/stories/Table.stories.tsx new file mode 100644 index 0000000..e69de29 diff --git a/packages/table/tsconfig.json b/packages/table/tsconfig.json new file mode 100644 index 0000000..6734c59 --- /dev/null +++ b/packages/table/tsconfig.json @@ -0,0 +1,18 @@ +{ + "compilerOptions": { + "jsx": "react-jsx", + "allowJs": false, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true, + "types": ["vite/client"] + }, + "files": [], + "include": [], + "references": [ + { + "path": "./tsconfig.lib.json" + } + ], + "extends": "../../tsconfig.base.json" +} diff --git a/packages/table/tsconfig.lib.json b/packages/table/tsconfig.lib.json new file mode 100644 index 0000000..8d6bbf7 --- /dev/null +++ b/packages/table/tsconfig.lib.json @@ -0,0 +1,23 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../dist/out-tsc", + "types": [ + "node", + "@nx/react/typings/cssmodule.d.ts", + "@nx/react/typings/image.d.ts", + "vite/client" + ] + }, + "exclude": [ + "**/*.spec.ts", + "**/*.test.ts", + "**/*.spec.tsx", + "**/*.test.tsx", + "**/*.spec.js", + "**/*.test.js", + "**/*.spec.jsx", + "**/*.test.jsx" + ], + "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"] +} diff --git a/packages/table/vite.config.ts b/packages/table/vite.config.ts new file mode 100644 index 0000000..1b029c0 --- /dev/null +++ b/packages/table/vite.config.ts @@ -0,0 +1,43 @@ +/// +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; +import dts from 'vite-plugin-dts'; +import * as path from 'path'; +import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; + +export default defineConfig({ + cacheDir: '../../node_modules/.vite/table', + + plugins: [ + react(), + nxViteTsPaths(), + dts({ + entryRoot: 'src', + tsConfigFilePath: path.join(__dirname, 'tsconfig.lib.json'), + skipDiagnostics: true, + }), + ], + + // Uncomment this if you are using workers. + // worker: { + // plugins: [ nxViteTsPaths() ], + // }, + + // Configuration for building your library. + // See: https://vitejs.dev/guide/build.html#library-mode + build: { + lib: { + // Could also be a dictionary or array of multiple entry points. + entry: 'src/index.ts', + name: 'table', + fileName: 'index', + // Change this to the formats you want to support. + // Don't forget to update your package.json as well. + formats: ['es', 'cjs'], + }, + rollupOptions: { + // External packages that should not be bundled into your library. + external: ['react', 'react-dom', 'react/jsx-runtime'], + }, + }, +}); diff --git a/tsconfig.base.json b/tsconfig.base.json index cf71463..6db957d 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -19,9 +19,10 @@ "@bootwind/forms": ["packages/forms/src/index.ts"], "@bootwind/pagination": ["packages/pagination/src/index.ts"], "@bootwind/title": ["./packages/title/src/index.ts"], + "@bootwind/toast": ["./packages/toast/src/index.ts"], "@bootwind/typography": ["packages/typography/src/index.ts"], "@bootwind/ui": ["./packages/ui/src/index.ts"], - "@bootwind/toast": ["./packages/toast/src/index.ts"] + "table": ["packages/table/src/index.ts"] } } } From c1e8dbf40bc7e48d181103707b7beb6327496dec Mon Sep 17 00:00:00 2001 From: zuramai Date: Mon, 27 Nov 2023 09:16:11 +0700 Subject: [PATCH 2/5] feat: table components --- packages/table/src/lib/Table.tsx | 25 +++++++++++++++---------- packages/table/src/lib/TableCell.tsx | 14 ++++++++++++++ packages/table/src/lib/TableHead.tsx | 15 +++++++++++++++ packages/table/src/lib/TableHeader.tsx | 15 +++++++++++++++ packages/table/src/lib/TableRow.tsx | 17 +++++++++++++++++ 5 files changed, 76 insertions(+), 10 deletions(-) diff --git a/packages/table/src/lib/Table.tsx b/packages/table/src/lib/Table.tsx index 4c24824..8e98fff 100644 --- a/packages/table/src/lib/Table.tsx +++ b/packages/table/src/lib/Table.tsx @@ -1,12 +1,17 @@ -/* eslint-disable-next-line */ -export interface TableProps {} +import React from "react"; +import { cn } from "@bootwind/common" -export function Table(props: TableProps) { - return ( -
-

Welcome to Table!

+export const Table = React.forwardRef< + HTMLTableElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + <> +
+ - ); -} - -export default Table; + +)) \ No newline at end of file diff --git a/packages/table/src/lib/TableCell.tsx b/packages/table/src/lib/TableCell.tsx index e69de29..af9d6cc 100644 --- a/packages/table/src/lib/TableCell.tsx +++ b/packages/table/src/lib/TableCell.tsx @@ -0,0 +1,14 @@ +import React from "react"; +import { cn } from "@bootwind/common" + +export const TableCell = React.forwardRef< + HTMLTableCellElement, + React.TdHTMLAttributes +>(({ className, ...props }, ref) => ( + +)) \ No newline at end of file diff --git a/packages/table/src/lib/TableHead.tsx b/packages/table/src/lib/TableHead.tsx index e69de29..626bf65 100644 --- a/packages/table/src/lib/TableHead.tsx +++ b/packages/table/src/lib/TableHead.tsx @@ -0,0 +1,15 @@ +import React from "react"; +import { cn } from "@bootwind/common" + +export const TableHead = React.forwardRef< + HTMLTableCellElement, + React.ThHTMLAttributes +>(({ className, ...props }, ref) => ( + <> + + +)) \ No newline at end of file diff --git a/packages/table/src/lib/TableRow.tsx b/packages/table/src/lib/TableRow.tsx index e69de29..12f162a 100644 --- a/packages/table/src/lib/TableRow.tsx +++ b/packages/table/src/lib/TableRow.tsx @@ -0,0 +1,17 @@ +import React from "react"; +import { cn } from "@bootwind/common" + +export const TableRow = React.forwardRef< + HTMLTableRowElement, + React.HTMLAttributes +>(({ className, children, ...props }, ref) => ( + <> + + {children} + + +)) \ No newline at end of file From cf1856eb039c9a535dc0f6ba6edc4b1801d82568 Mon Sep 17 00:00:00 2001 From: zuramai Date: Mon, 27 Nov 2023 09:16:23 +0700 Subject: [PATCH 3/5] docs: basic table stories --- packages/table/src/stories/Table.stories.tsx | 98 ++++++++++++++++++++ 1 file changed, 98 insertions(+) diff --git a/packages/table/src/stories/Table.stories.tsx b/packages/table/src/stories/Table.stories.tsx index e69de29..47d0a8c 100644 --- a/packages/table/src/stories/Table.stories.tsx +++ b/packages/table/src/stories/Table.stories.tsx @@ -0,0 +1,98 @@ +import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../"; +import { Meta } from '@storybook/react'; +import { Badge } from '@bootwind/badges' +import { Button } from '@bootwind/button' +import { HiEllipsisHorizontal } from 'react-icons/hi2' + +export default { + title: 'Components/Table', + component: Table, + args: { + type: 'card', + totalResults: 50, + resultsPerPage: 10 + }, + argTypes: { + type: { + options: ['card', 'centered', 'simple'], + control: { + type: 'select' + } + }, + currentPage: { + control: { + type: 'number' + } + }, + totalResults: { + control: { + type: 'number' + } + }, + resultsPerPage: { + control: { + type: 'number' + } + }, + }, +} as Meta; + + +export const BasicTable = () => ( +
+ + +)) \ No newline at end of file diff --git a/packages/table/src/lib/TableHeader.tsx b/packages/table/src/lib/TableHeader.tsx index e69de29..7ed62b7 100644 --- a/packages/table/src/lib/TableHeader.tsx +++ b/packages/table/src/lib/TableHeader.tsx @@ -0,0 +1,15 @@ +import React from "react"; +import { cn } from "@bootwind/common" + +export const TableHeader = React.forwardRef< + HTMLTableSectionElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( + <> +
+ + Type + Status + Role + Email Address + Team + + + + + Wade Warren + + Inactive + + + Scrum Master + + + wade@example.com + + +
+ UI + Marketing + + 3 +
+ + + + + + + Ralph Edwards + + Active + + + UI/UX Designer + + + ralph@example.com + + +
+ Product + Marketing + + 3 +
+ + + + + + +
+) \ No newline at end of file From b240084528f85953297f3da1514eb0e17fd5f19f Mon Sep 17 00:00:00 2001 From: zuramai Date: Mon, 27 Nov 2023 10:00:45 +0700 Subject: [PATCH 4/5] feat(table): striped variant --- packages/table/src/lib/Table.tsx | 9 +- packages/table/src/lib/TableBody.tsx | 2 +- packages/table/src/lib/TableHeader.tsx | 2 +- packages/table/src/lib/TableRow.tsx | 2 +- packages/table/src/stories/Table.stories.tsx | 141 +++++++++++++------ 5 files changed, 107 insertions(+), 49 deletions(-) diff --git a/packages/table/src/lib/Table.tsx b/packages/table/src/lib/Table.tsx index 8e98fff..7808589 100644 --- a/packages/table/src/lib/Table.tsx +++ b/packages/table/src/lib/Table.tsx @@ -1,15 +1,20 @@ import React from "react"; import { cn } from "@bootwind/common" +interface TableProps extends React.ComponentPropsWithoutRef<'table'> { + variant?: 'striped' | 'normal' + borders?: 'all' | 'bottom' +} + export const Table = React.forwardRef< HTMLTableElement, - React.HTMLAttributes + TableProps >(({ className, ...props }, ref) => ( <>
diff --git a/packages/table/src/lib/TableBody.tsx b/packages/table/src/lib/TableBody.tsx index 9f1e9c6..d869c21 100644 --- a/packages/table/src/lib/TableBody.tsx +++ b/packages/table/src/lib/TableBody.tsx @@ -8,7 +8,7 @@ export const TableBody = React.forwardRef< <> diff --git a/packages/table/src/lib/TableHeader.tsx b/packages/table/src/lib/TableHeader.tsx index 7ed62b7..d0b5ba1 100644 --- a/packages/table/src/lib/TableHeader.tsx +++ b/packages/table/src/lib/TableHeader.tsx @@ -8,7 +8,7 @@ export const TableHeader = React.forwardRef< <> diff --git a/packages/table/src/lib/TableRow.tsx b/packages/table/src/lib/TableRow.tsx index 12f162a..076257c 100644 --- a/packages/table/src/lib/TableRow.tsx +++ b/packages/table/src/lib/TableRow.tsx @@ -8,7 +8,7 @@ export const TableRow = React.forwardRef< <> {children} diff --git a/packages/table/src/stories/Table.stories.tsx b/packages/table/src/stories/Table.stories.tsx index 47d0a8c..95b4472 100644 --- a/packages/table/src/stories/Table.stories.tsx +++ b/packages/table/src/stories/Table.stories.tsx @@ -37,6 +37,36 @@ export default { }, } as Meta; +const data = [ + { + type: 'Wade Warren', + status: 'Inactive', + role: 'Scrum Master', + email: 'wade@example.com', + team: ['UI', 'Marketing'], + }, + { + type: 'Jerome Bell', + status: 'Active', + role: 'Scrum Master', + email: 'wade@example.com', + team: ['Product', 'Marketing'], + }, + { + type: 'Wade Warren', + status: 'Inactive', + role: 'Scrum Master', + email: 'wade@example.com', + team: ['UI', 'Marketing'], + }, + { + type: 'Jerome Bell', + status: 'Active', + role: 'Scrum Master', + email: 'wade@example.com', + team: ['Product', 'Marketing'], + }, +] export const BasicTable = () => (
@@ -49,50 +79,73 @@ export const BasicTable = () => ( - - Wade Warren - - Inactive - - - Scrum Master - - - wade@example.com - - -
- UI - Marketing - + 3 -
- - - - - - - Ralph Edwards - - Active - - - UI/UX Designer - - - ralph@example.com - - -
- Product - Marketing - + 3 -
- - - - - + {data.map(person => ( + + {person.type} + + {person.status} + + + {person.role} + + + {person.email} + + +
+ {person.team.map(name => ( + {name} + ))} + + 3 +
+ + + + + + )) + } + +
+) + +export const StripedTable = () => ( + + + Type + Status + Role + Email Address + Team + + + + {data.map(person => ( + + {person.type} + + {person.status} + + + {person.role} + + + {person.email} + + +
+ {person.team.map(name => ( + {name} + ))} + + 3 +
+ + + + + + )) + }
) \ No newline at end of file From 8ea4572b6118cc1a13e94262a38f4d1c7e937087 Mon Sep 17 00:00:00 2001 From: zuramai Date: Mon, 27 Nov 2023 10:07:43 +0700 Subject: [PATCH 5/5] feat(table): bordered table --- packages/table/src/lib/Table.tsx | 23 ++++++++--- packages/table/src/lib/TableRow.tsx | 2 +- packages/table/src/stories/Table.stories.tsx | 41 ++++++++++++++++++++ 3 files changed, 59 insertions(+), 7 deletions(-) diff --git a/packages/table/src/lib/Table.tsx b/packages/table/src/lib/Table.tsx index 7808589..d42fe39 100644 --- a/packages/table/src/lib/Table.tsx +++ b/packages/table/src/lib/Table.tsx @@ -3,20 +3,31 @@ import { cn } from "@bootwind/common" interface TableProps extends React.ComponentPropsWithoutRef<'table'> { variant?: 'striped' | 'normal' - borders?: 'all' | 'bottom' + borders?: 'all' | 'bottom' | "none" } export const Table = React.forwardRef< HTMLTableElement, TableProps ->(({ className, ...props }, ref) => ( - <> +>(({ className, ...props }, ref) => { + const borderClasses = { + bottom: '[&_td]:border-b [&_td]:border-[#e9eff6] [&_th]:border-b [&_th]:border-[#e9eff6]', + all: '[&_td]:border [&_td]:border-[#e9eff6] [&_th]:border [&_th]:border-[#e9eff6]', + none: '' + } + return (
- -)) \ No newline at end of file + ) +}) \ No newline at end of file diff --git a/packages/table/src/lib/TableRow.tsx b/packages/table/src/lib/TableRow.tsx index 076257c..f697b98 100644 --- a/packages/table/src/lib/TableRow.tsx +++ b/packages/table/src/lib/TableRow.tsx @@ -8,7 +8,7 @@ export const TableRow = React.forwardRef< <> {children} diff --git a/packages/table/src/stories/Table.stories.tsx b/packages/table/src/stories/Table.stories.tsx index 95b4472..fec3da7 100644 --- a/packages/table/src/stories/Table.stories.tsx +++ b/packages/table/src/stories/Table.stories.tsx @@ -148,4 +148,45 @@ export const StripedTable = () => ( }
+) + +export const BorderedTable = () => ( + + + Type + Status + Role + Email Address + Team + + + + {data.map(person => ( + + {person.type} + + {person.status} + + + {person.role} + + + {person.email} + + +
+ {person.team.map(name => ( + {name} + ))} + + 3 +
+ + + + + + )) + } + +
) \ No newline at end of file