Merge pull request #8 from bootwindproject/feat/table

feat: table component

packages/table/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

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": {}
+    }
+  ]
+}

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/).

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"
+    }
+  }
+}

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"
+        }
+      }
+    }
+  }
+}

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';

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 (
+    <div className="relative w-full overflow-auto">
+        <table
+            ref={ref}
+            className={cn(
+              "w-full caption-bottom text-sm ", 
+              className, 
+              props.variant == "striped" ? '[&_tr:nth-child(even)]:bg-[#f9fafb]' : '',
+              borderClasses[props.borders ?? 'bottom']
+              )
+            }
+            {...props}
+        />
+    </div>
+  )
+})

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<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+    <>
+        <tbody
+            ref={ref}
+            className={cn("[&_tr:last-child]:border-0 ", className)}
+            {...props}
+        />
+    </>
+))

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<HTMLTableCellElement>
+>(({ className,  ...props }, ref) => (
+    <td
+        ref={ref}
+        className={cn("px-5 py-3.5 text-slate-500", className)}
+        {...props}
+    >
+    </td>
+))

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<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+    <>
+        <th
+            ref={ref}
+            className={cn("px-5 py-3.5 font-normal text-left", className)}
+            {...props}
+        />
+    </>
+))

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<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+    <>
+        <thead
+            ref={ref}
+            className={cn(className, "bg-gray-50 text-slate-400")}
+            {...props}
+        />
+    </>
+))

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<HTMLTableRowElement>
+>(({ className, children, ...props }, ref) => (
+    <>
+        <tr
+            ref={ref}
+            className={cn("transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className)}
+            {...props}
+        >
+          {children}
+        </tr>
+    </>
+))