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..d42fe39 --- /dev/null +++ b/packages/table/src/lib/Table.tsx @@ -0,0 +1,33 @@ +import React from "react"; +import { cn } from "@bootwind/common" + +interface TableProps extends React.ComponentPropsWithoutRef<'table'> { + variant?: 'striped' | 'normal' + borders?: 'all' | 'bottom' | "none" +} + +export const Table = React.forwardRef< + HTMLTableElement, + TableProps +>(({ 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 diff --git a/packages/table/src/lib/TableBody.tsx b/packages/table/src/lib/TableBody.tsx new file mode 100644 index 0000000..d869c21 --- /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..af9d6cc --- /dev/null +++ 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 new file mode 100644 index 0000000..626bf65 --- /dev/null +++ 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 new file mode 100644 index 0000000..f697b98 --- /dev/null +++ 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 diff --git a/packages/table/src/stories/Table.stories.tsx b/packages/table/src/stories/Table.stories.tsx new file mode 100644 index 0000000..fec3da7 --- /dev/null +++ b/packages/table/src/stories/Table.stories.tsx @@ -0,0 +1,192 @@ +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; + +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 = () => ( +
+ + +)) \ No newline at end of file diff --git a/packages/table/src/lib/TableHeader.tsx b/packages/table/src/lib/TableHeader.tsx new file mode 100644 index 0000000..d0b5ba1 --- /dev/null +++ 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 + + + + {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 +
+ + + + + + )) + } + +
+) + +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 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"] } } }