feat(table): resize

apps/docs/package.json

@@ -7,7 +7,7 @@
     "build": "storybook build",
     "preview-storybook": "serve storybook-static",
     "clean": "rm -rf .turbo && rm -rf node_modules",
-    "deploy": "gh-pages -d storybook-static"
+    "deploy": "pnpm build && touch ./storybook-static/.nojekyll && gh-pages -d ./storybook-static -t true"
   },
   "dependencies": {
     "@soul/core": "workspace:0.0.1",

apps/docs/stories/Table.stories.ts

@@ -1,6 +1,6 @@
-import { SoulTable } from "@soul/core";
-import type { Meta, StoryObj } from "@storybook/react";
-import { columns, dataSource } from "./mockData";
+import {SoulTable} from "@soul/core"
+import type {Meta, StoryObj} from "@storybook/react"
+import {columns, dataSource} from "./mockData"
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta = {
   title: "Example/Table",
@@ -9,35 +9,34 @@ const meta = {
   // argTypes: {
   //   backgroundColor: { control: 'color' },
   // },
-} satisfies Meta<typeof SoulTable>;
+} satisfies Meta<typeof SoulTable>
 
-export default meta;
-type Story = StoryObj<typeof meta>;
+export default meta
+type Story = StoryObj<typeof meta>
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Uncontrolled: Story = {
   args: {
     dataSource,
     columns,
     rowKey: "id",
-    defaultColumnsStateChange: {
+    defaultColumnsState: {
       name: {
         order: 1,
       },
     },
     onColumnsStateChange: console.log,
   },
-};
+}
 
 export const Controlled: Story = {
   args: {
     rowKey: "id",
 
     dataSource,
     columns,
-    label: "Button",
   },
-};
+}
 
 export const RowReorder: Story = {
   args: {
@@ -46,9 +45,8 @@ export const RowReorder: Story = {
     dataSource,
     columns,
     size: "large",
-    label: "Button",
   },
-};
+}
 
 export const CustomVisibleModal: Story = {
   args: {
@@ -57,6 +55,5 @@ export const CustomVisibleModal: Story = {
     dataSource,
     columns,
     size: "small",
-    label: "Button",
   },
-};
+}

apps/docs/stories/mockData.tsx

@@ -1,8 +1,8 @@
 // http://mockjs.com/examples.html#Random\.first\(\)
 
-import { TableColumnsType } from "antd";
-import { Random, mock } from "mockjs";
-import React from "react";
+import {TableColumnsType} from "antd"
+import {Random, mock} from "mockjs"
+import React from "react"
 
 export const columns: TableColumnsType = [
   {
@@ -13,10 +13,12 @@ export const columns: TableColumnsType = [
   {
     title: "name",
     dataIndex: "name",
+    width: 200,
   },
   {
     title: "age",
     dataIndex: "age",
+    width: 100,
   },
   {
     title: "email",
@@ -30,7 +32,7 @@ export const columns: TableColumnsType = [
     title: "date",
     dataIndex: "date",
   },
-];
+]
 export const dataSource = Array(10)
   .fill(0)
   .map((item, idx) => ({
@@ -40,4 +42,4 @@ export const dataSource = Array(10)
     email: Random.email(),
     address: Random.county(true),
     date: mock("@datetime"),
-  }));
+  }))

package.json

@@ -1,5 +1,10 @@
 {
   "private": true,
+  "homepage": "https://vaynevayne.github.io/soul/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vaynevayne/soul"
+  },
   "scripts": {
     "build": "turbo run build",
     "dev": "turbo run dev --no-cache --continue",

packages/eslint-config-soul/index.js

@@ -1,11 +1,10 @@
 module.exports = {
-  extends: ["next", "turbo", "prettier"],
+  extends: ["next", "turbo", "prettier", "plugin:react-hooks/recommended"],
   rules: {
     "@next/next/no-html-link-for-pages": "off",
   },
   parserOptions: {
-    babelOptions: {
-      presets: [require.resolve("next/babel")],
-    },
+    ecmaVersion: "latest",
+    sourceType: "module",
   },
-};
+}

packages/eslint-config-soul/package.json

@@ -6,10 +6,13 @@
   "dependencies": {
     "eslint-config-next": "latest",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-react": "7.29.4",
-    "eslint-config-turbo": "latest"
+    "eslint-config-turbo": "latest",
+    "eslint-plugin-react": "7.29.4"
   },
   "publishConfig": {
     "access": "public"
+  },
+  "devDependencies": {
+    "eslint-plugin-react-hooks": "^4.6.0"
   }
 }

packages/soul-core/package.json

@@ -44,7 +44,8 @@
     "react-resizable": "^3.0.5"
   },
   "dependencies": {
-    "@soul/utils": "workspace:^"
+    "@soul/utils": "workspace:^",
+    "react-template": "link:/Users/vayne/wmqj/react-template"
   },
   "tsup": {
     "sourcemap": true

packages/soul-core/src/Table/ResizeableTitle.tsx

@@ -1,10 +1,27 @@
-import { Resizable } from 'react-resizable';
+import {useState} from "react"
+import {Resizable} from "react-resizable"
 
 export const ResizeableTitle = (props) => {
-  const { onResize, width, onResizeStart, onResizeStop, ...restProps } = props;
+  const {onResize, width, onClick, ...restProps} = props
+  const [resizing, setIsResizing] = useState(false)
+
+  const onResizeStart = (e) => {
+    console.log("start resize")
+    setIsResizing(true)
+
+    e.stopPropagation()
+    e.preventDefault()
+  }
+
+  const onResizeStop = () => {
+    console.log("end resize")
+    setTimeout(() => {
+      setIsResizing(false)
+    })
+  }
 
   if (!width) {
-    return <th {...restProps} />;
+    return <th onClick={onClick} {...restProps} />
   }
 
   return (
@@ -15,7 +32,14 @@ export const ResizeableTitle = (props) => {
       onResizeStart={onResizeStart}
       onResizeStop={onResizeStop}
     >
-      <th {...restProps} />
+      <th
+        onClick={(...args) => {
+          if (!resizing && onClick) {
+            onClick(...args)
+          }
+        }}
+        {...restProps}
+      />
     </Resizable>
-  );
-};
+  )
+}