Dev bqx (#27)

* feat(table): complete table component

docs/package.json

@@ -8,7 +8,7 @@
     "preview": "rspress preview"
   },
   "dependencies": {
-    "@sast/ui-react": "workspace:^",
+    "@ui-aurora/react": "workspace:^",
     "@sast/ui-universal": "workspace:^",
     "@theguild/remark-mermaid": "^0.0.6",
     "rspress": "^1.16.0"

packages/ui-react/lib/Table/Table.module.scss

@@ -0,0 +1,48 @@
+@use '../variables' as *;
+
+.table {
+  color: $black-color;
+  font-size: 14px;
+  border-spacing: 0px !important;
+  .caption {
+    font-size: 1.2rem;
+    text-align: start;
+  }
+  .thead {
+    tr {
+      th {
+        text-align: start;
+        background-color: $title-bg-color;
+        color: $gray-color;
+        padding: 10px 30px;
+      }
+      th:first-child {
+        border-radius: 5px 0 0 5px;
+      }
+      th:last-child {
+        border-radius: 0 5px 5px 0;
+      }
+    }
+  }
+  .tbody {
+    tr {
+      &:hover {
+        transition: all 300ms $cubic-bezier;
+        background-color: $pale-white-color;
+      }
+      td {
+        border-style: solid;
+        border-width: 0px 0px 1px 0px;
+        border-color: $border-white-color;
+        padding: 12px 30px;
+        box-sizing: border-box;
+      }
+    }
+  }
+}
+
+.pagination {
+  display: flex;
+  flex-direction: row-reverse;
+  margin-top: 0.625rem;
+}

packages/ui-react/lib/Table/Table.stories.ts

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Table, type TableProps } from './Table';
+
+const meta = {
+  title: 'Components/Table',
+  component: Table,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Table>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const defaultProps: TableProps = {
+  pageSize: 3,
+  columns: [
+    {
+      title: 'Title',
+      dataIndex: 'name',
+      width: 400,
+    },
+    { title: 'Size', dataIndex: 'size' },
+    { title: 'Owner', dataIndex: 'owner', width: 150 },
+    { title: 'Update-Time', dataIndex: 'time', width: 150 },
+  ],
+  dataSource: [
+    {
+      key: '1',
+      name: 'Semi Design 设计稿.fig',
+      size: '2M ',
+      owner: '姜鹏志',
+      time: 'hello',
+    },
+    {
+      key: '2',
+      name: 'Semi Design 分享演示文稿',
+      size: '2M ',
+      owner: '姜鹏志',
+      time: '2020-02-02 05:12',
+    },
+    {
+      key: '3',
+      name: '设计文档',
+      size: '2M ',
+      owner: '姜鹏志',
+      time: '2020-01-26 11:01',
+    },
+    {
+      key: '4',
+      name: 'Semi Design 2 设计稿.fig',
+      size: '2M ',
+      owner: '姜鹏志',
+      time: '2020-02-02 05:18',
+    },
+    {
+      key: '5',
+      name: 'Semi Design 2 分享演示文稿',
+      size: '2M ',
+      owner: '姜鹏志',
+      time: '2020-02-02 05:12',
+    },
+    {
+      key: '6',
+      name: '设计文档 2',
+      size: '2M ',
+      owner: '姜鹏志',
+      time: '2020-01-26 11:01',
+    },
+  ],
+};
+
+export const DefaultTable: Story = {
+  args: {
+    ...defaultProps,
+  },
+};

packages/ui-react/lib/Table/Table.tsx

@@ -0,0 +1,115 @@
+import React, { useEffect, useState, type CSSProperties, type ReactNode } from 'react';
+import styles from './Table.module.scss';
+import { Pagination } from '..';
+
+export interface column {
+  /**
+   * title , the title of the column
+   */
+  title?: string;
+  /**
+   * dataIndex, the dataIndex of the column
+   */
+  dataIndex?: string;
+  /**
+   * width, the width of the column
+   */
+  width?: number;
+  /**
+   * render, the render of the column
+   */
+  render?: (title?: string, dataIndex?: string) => ReactNode;
+}
+
+export interface dataItem {
+  /**
+   * key , the key of the dataItem
+   */
+  key?: string;
+
+  /**
+   * other property
+   */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [property: string]: any;
+}
+
+export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {
+  /**
+   * the caption of the Table
+   */
+  caption?: ReactNode;
+  /**
+   * style , the style of the table
+   */
+  style?: CSSProperties;
+  /**
+   * columns, the column of the table
+   */
+  columns: column[];
+  /**
+   * dataSource
+   */
+  dataSource: dataItem[];
+  /**
+   * pageSize: number
+   */
+  pageSize: number;
+}
+
+export const Table = React.forwardRef<HTMLTableElement, TableProps>(
+  ({ caption, style, columns, dataSource, pageSize = 8, ...rest }, ref) => {
+    const [page, setPage] = useState<number>(1);
+    const [showData, setShowData] = useState<dataItem[]>([]);
+
+    useEffect(() => {
+      const newShowData = dataSource.slice((page - 1) * pageSize, page * pageSize);
+      setShowData(newShowData);
+    }, [page, pageSize, dataSource]);
+    return (
+      <>
+        <table
+          className={styles['table']}
+          style={style}
+          ref={ref}
+          {...rest}
+        >
+          <caption className={styles['caption']}>{caption}</caption>
+          <thead className={styles['thead']}>
+            <tr>
+              {columns?.map((item: column) => {
+                return (
+                  <th
+                    key={item.dataIndex}
+                    style={{ width: `${item?.width}px` }}
+                  >
+                    {item.render && item.render(item.title, item.dataIndex)}
+                    {!item.render && item.title}
+                  </th>
+                );
+              })}
+            </tr>
+          </thead>
+          <tbody className={styles['tbody']}>
+            {showData.map((dataItem) => (
+              <tr key={dataItem.key}>
+                {columns?.map((column) => (
+                  <td key={column.dataIndex}>{dataItem[`${column.dataIndex}`]}</td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+        <div className={styles['pagination']}>
+          <Pagination
+            total={dataSource?.length}
+            pageSize={pageSize}
+            onChange={(value) => setPage(value)}
+          />
+        </div>
+      </>
+    );
+  },
+);
+
+Table.displayName = 'Table';

packages/ui-react/lib/Table/index.ts

@@ -0,0 +1 @@
+export * from './Table';

packages/ui-react/lib/_variables/color.scss

@@ -10,3 +10,5 @@ $border-white-color: #f1f1f1;
 $black-color: #121212;
 $gray-color: #808080;
 $background-shadow-color: rgb(var(--black-color-rgb), 0.6);
+$title-bg-color: #f3f3f3;
+

packages/ui-react/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@ui-aurora/react",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A React UI library built for SASTOJ",
   "author": "sast",
-  "license": "./LICENSE",
+  "license": "MIT",
   "type": "module",
   "files": [
     "dist"
@@ -89,7 +89,7 @@
     "@types/react-transition-group": "^4.4.10",
     "classnames": "^2.5.1",
     "framer-motion": "^11.0.24",
-    "lucide-react": "^0.364.0",
+    "lucide-react": "^0.368.0",
     "zustand": "^4.4.7"
   }
 }