From ba2179e0cb9cd6c29df588e40f6b44f14ff0654e Mon Sep 17 00:00:00 2001 From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com> Date: Thu, 19 Oct 2023 12:25:54 +0530 Subject: [PATCH 1/6] initial commit - table --- .../design-system/src/Table/Table.constants.ts | 5 +++++ .../design-system/src/Table/Table.stories.tsx | 17 +++++++++++++++++ .../design-system/src/Table/Table.styles.tsx | 3 +++ packages/design-system/src/Table/Table.tsx | 12 ++++++++++++ packages/design-system/src/Table/Table.types.ts | 5 +++++ packages/design-system/src/Table/index.ts | 2 ++ 6 files changed, 44 insertions(+) create mode 100644 packages/design-system/src/Table/Table.constants.ts create mode 100644 packages/design-system/src/Table/Table.stories.tsx create mode 100644 packages/design-system/src/Table/Table.styles.tsx create mode 100644 packages/design-system/src/Table/Table.tsx create mode 100644 packages/design-system/src/Table/Table.types.ts create mode 100644 packages/design-system/src/Table/index.ts diff --git a/packages/design-system/src/Table/Table.constants.ts b/packages/design-system/src/Table/Table.constants.ts new file mode 100644 index 00000000..5ab37153 --- /dev/null +++ b/packages/design-system/src/Table/Table.constants.ts @@ -0,0 +1,5 @@ +import { CLASS_NAME_PREFIX } from "__config__/constants"; + +export const TableClassName = `${CLASS_NAME_PREFIX}-table`; +// export const TableSubElementClassName = `${TableClassName}__sub-element`; +// export const TableSubElementChildClassName = `${TableSubElementClassName}-child`; diff --git a/packages/design-system/src/Table/Table.stories.tsx b/packages/design-system/src/Table/Table.stories.tsx new file mode 100644 index 00000000..6b087f8f --- /dev/null +++ b/packages/design-system/src/Table/Table.stories.tsx @@ -0,0 +1,17 @@ +import React from "react"; +import { Meta, StoryObj } from "@storybook/react"; + +import { Table } from "./Table"; + +export default { + title: "Design System/Table", + component: Table, +} as Meta; + +type Story = StoryObj; + +export const TableStory: Story = { + name: "Table", + args: {}, + render: (args) => content
, +}; diff --git a/packages/design-system/src/Table/Table.styles.tsx b/packages/design-system/src/Table/Table.styles.tsx new file mode 100644 index 00000000..96f391be --- /dev/null +++ b/packages/design-system/src/Table/Table.styles.tsx @@ -0,0 +1,3 @@ +import styled from "styled-components"; + +export const StyledTable = styled.span``; diff --git a/packages/design-system/src/Table/Table.tsx b/packages/design-system/src/Table/Table.tsx new file mode 100644 index 00000000..255cd467 --- /dev/null +++ b/packages/design-system/src/Table/Table.tsx @@ -0,0 +1,12 @@ +import React from "react"; + +import { TableProps } from "./Table.types"; +import { StyledTable } from "./Table.styles"; + +function Table({ children, ...rest }: TableProps) { + return {children}; +} + +Table.displayName = "Table"; + +export { Table }; diff --git a/packages/design-system/src/Table/Table.types.ts b/packages/design-system/src/Table/Table.types.ts new file mode 100644 index 00000000..2986290c --- /dev/null +++ b/packages/design-system/src/Table/Table.types.ts @@ -0,0 +1,5 @@ +// Table props +export type TableProps = { + children?: React.ReactNode; + className?: string; +}; diff --git a/packages/design-system/src/Table/index.ts b/packages/design-system/src/Table/index.ts new file mode 100644 index 00000000..df14b6c4 --- /dev/null +++ b/packages/design-system/src/Table/index.ts @@ -0,0 +1,2 @@ +export * from "./Table"; +export * from "./Table.types"; From 7a1651cef8bf517608f8b0b8dcc31c1af7190e72 Mon Sep 17 00:00:00 2001 From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com> Date: Tue, 24 Oct 2023 10:45:53 +0530 Subject: [PATCH 2/6] table component completed --- packages/design-system/package.json | 1 + .../src/Table/Table.constants.ts | 9 +- .../design-system/src/Table/Table.stories.tsx | 188 +++++++++++++++++- .../design-system/src/Table/Table.styles.tsx | 72 ++++++- packages/design-system/src/Table/Table.tsx | 41 +++- .../design-system/src/Table/Table.types.ts | 6 +- packages/design-system/src/Table/reset.css | 55 +++++ .../src/__theme__/default/index.css | 1 + yarn.lock | 52 ++++- 9 files changed, 411 insertions(+), 14 deletions(-) create mode 100644 packages/design-system/src/Table/reset.css diff --git a/packages/design-system/package.json b/packages/design-system/package.json index 56234fce..2bff7819 100644 --- a/packages/design-system/package.json +++ b/packages/design-system/package.json @@ -137,6 +137,7 @@ "date-fns": "^2.29.3", "loglevel": "^1.8.1", "rc-select": "^14.4.3", + "rc-table": "^7.35.2", "rc-tooltip": "^5.3.1", "react-datepicker": "^4.10.0", "react-toastify": "9.0.3" diff --git a/packages/design-system/src/Table/Table.constants.ts b/packages/design-system/src/Table/Table.constants.ts index 5ab37153..ad2ee009 100644 --- a/packages/design-system/src/Table/Table.constants.ts +++ b/packages/design-system/src/Table/Table.constants.ts @@ -1,5 +1,10 @@ import { CLASS_NAME_PREFIX } from "__config__/constants"; +export const TableWrapperClassName = `${CLASS_NAME_PREFIX}-table-wrapper`; export const TableClassName = `${CLASS_NAME_PREFIX}-table`; -// export const TableSubElementClassName = `${TableClassName}__sub-element`; -// export const TableSubElementChildClassName = `${TableSubElementClassName}-child`; +export const TableHeaderClassName = `${TableClassName}__header`; +export const TableBodyClassName = `${TableClassName}__body`; +export const TableHeaderRowClassName = `${TableHeaderClassName}-row`; +export const TableHeaderCellClassName = `${TableHeaderRowClassName}-cell`; +export const TableBodyRowClassName = `${TableBodyClassName}-row`; +export const TableBodyCellClassName = `${TableBodyRowClassName}-cell`; diff --git a/packages/design-system/src/Table/Table.stories.tsx b/packages/design-system/src/Table/Table.stories.tsx index 6b087f8f..e82f077b 100644 --- a/packages/design-system/src/Table/Table.stories.tsx +++ b/packages/design-system/src/Table/Table.stories.tsx @@ -1,17 +1,201 @@ +/* eslint-disable react/jsx-no-useless-fragment */ import React from "react"; import { Meta, StoryObj } from "@storybook/react"; import { Table } from "./Table"; +import { Tooltip } from "../Tooltip"; export default { title: "Design System/Table", component: Table, + decorators: [ + (Story) => ( +
+ +
+ ), + ], } as Meta; type Story = StoryObj; export const TableStory: Story = { name: "Table", - args: {}, - render: (args) => content
, + args: { + columns: [ + { + title: "Column 1", + dataIndex: "col1", + width: 100, + }, + { + title: "Column 2", + dataIndex: "col2", + width: 100, + }, + { + title: "Column 3", + dataIndex: "col3", + width: 100, + }, + { + title: "Column 4", + dataIndex: "col4", + width: 100, + }, + { + title: "Column 5", + dataIndex: "col5", + width: 100, + }, + { + title: "Column 6", + dataIndex: "col6", + width: 100, + ellipsis: { + showTitle: false, + }, + render: (value: string) => ( + + {value} + + ), + }, + { + title: "Column 7", + dataIndex: "col7", + width: 100, + }, + ], + data: [ + { + col1: "Row 1, Column 1", + col2: "Row 1, Column 2", + col3: "Row 1, Column 3", + col4: "Row 1, Column 4", + col5: "Row 1, Column 5", + col6: "Row 1, Column 6, Row 1, Column 6, Row 1, Column 6, Row 1, Column 6, Row 1, Column 6", + col7: "Row 1, Column 7", + col8: "Row 1, Column 8", + col9: "Row 1, Column 9", + col10: "Row 1, Column 10", + }, + { + col1: "Row 2, Column 1", + col2: "Row 2, Column 2", + col3: "Row 2, Column 3", + col4: "Row 2, Column 4", + col5: "Row 2, Column 5", + col6: "Row 2, Column 6", + col7: "Row 2, Column 7", + col8: "Row 2, Column 8", + col9: "Row 2, Column 9", + col10: "Row 2, Column 10", + }, + { + col1: "Row 3, Column 1", + col2: "Row 3, Column 2", + col3: "Row 3, Column 3", + col4: "Row 3, Column 4", + col5: "Row 3, Column 5", + col6: "Row 3, Column 6", + col7: "Row 3, Column 7", + col8: "Row 3, Column 8", + col9: "Row 3, Column 9", + col10: "Row 3, Column 10", + }, + { + col1: "Row 4, Column 1", + col2: "Row 4, Column 2", + col3: "Row 4, Column 3", + col4: "Row 4, Column 4", + col5: "Row 4, Column 5", + col6: "Row 4, Column 6", + col7: "Row 4, Column 7", + col8: "Row 4, Column 8", + col9: "Row 4, Column 9", + col10: "Row 4, Column 10", + }, + { + col1: "Row 5, Column 1", + col2: "Row 5, Column 2", + col3: "Row 5, Column 3", + col4: "Row 5, Column 4", + col5: "Row 5, Column 5", + col6: "Row 5, Column 6", + col7: "Row 5, Column 7", + col8: "Row 5, Column 8", + col9: "Row 5, Column 9", + col10: "Row 5, Column 10", + }, + { + col1: "Row 6, Column 1", + col2: "Row 6, Column 2", + col3: "Row 6, Column 3", + col4: "Row 6, Column 4", + col5: "Row 6, Column 5", + col6: "Row 6, Column 6", + col7: "Row 6, Column 7", + col8: "Row 6, Column 8", + col9: "Row 6, Column 9", + col10: "Row 6, Column 10", + }, + { + col1: "Row 7, Column 1", + col2: "Row 7, Column 2", + col3: "Row 7, Column 3", + col4: "Row 7, Column 4", + col5: "Row 7, Column 5", + col6: "Row 7, Column 6", + col7: "Row 7, Column 7", + col8: "Row 7, Column 8", + col9: "Row 7, Column 9", + col10: "Row 7, Column 10", + }, + { + col1: "Row 8, Column 1", + col2: "Row 8, Column 2", + col3: "Row 8, Column 3", + col4: "Row 8, Column 4", + col5: "Row 8, Column 5", + col6: "Row 8, Column 6", + col7: "Row 8, Column 7", + col8: "Row 8, Column 8", + col9: "Row 8, Column 9", + col10: "Row 8, Column 10", + }, + { + col1: "Row 9, Column 1", + col2: "Row 9, Column 2", + col3: "Row 9, Column 3", + col4: "Row 9, Column 4", + col5: "Row 9, Column 5", + col6: "Row 9, Column 6", + col7: "Row 9, Column 7", + col8: "Row 9, Column 8", + col9: "Row 9, Column 9", + col10: "Row 9, Column 10", + }, + { + col1: "Row 10, Column 1", + col2: "Row 10, Column 2", + col3: "Row 10, Column 3", + col4: "Row 10, Column 4", + col5: "Row 10, Column 5", + col6: "Row 10, Column 6", + col7: "Row 10, Column 7", + col8: "Row 10, Column 8", + col9: "Row 10, Column 9", + col10: "Row 10, Column 10", + }, + ], + sticky: true, + }, + render: (args) => , }; diff --git a/packages/design-system/src/Table/Table.styles.tsx b/packages/design-system/src/Table/Table.styles.tsx index 96f391be..10a1059f 100644 --- a/packages/design-system/src/Table/Table.styles.tsx +++ b/packages/design-system/src/Table/Table.styles.tsx @@ -1,3 +1,73 @@ import styled from "styled-components"; +import clsx from "classnames"; +import { + TableBodyCellClassName, + TableBodyClassName, + TableBodyRowClassName, + TableClassName, + TableHeaderCellClassName, + TableHeaderClassName, + TableHeaderRowClassName, +} from "./Table.constants"; -export const StyledTable = styled.span``; +export const StyledTable = styled.table.attrs(({ className }) => ({ + className: clsx(TableClassName, className), +}))` + border-collapse: collapse; + border: none; + border-color: unset; +`; + +export const StyledHeader = styled.thead.attrs(({ className }) => ({ + className: clsx(TableHeaderClassName, className), +}))``; + +export const StyledHeaderRow = styled.tr.attrs(({ className }) => ({ + className: clsx(TableHeaderRowClassName, className), +}))` + height: var(--ads-v2-spaces-13); +`; + +export const StyledHeaderCell = styled.th.attrs(({ className }) => ({ + className: clsx(TableHeaderCellClassName, className), +}))` + && { + font-size: 14px; + font-style: normal; + font-weight: 400; + color: var(--ads-v2-colors-content-label-default-fg); + font-family: var(--ads-v2-font-family); + border: none; + border-color: unset; + padding: var(--ads-v2-spaces-5); + background-color: var(--ads-v2-colors-content-surface-neutral-bg); + border-bottom: 1px solid var(--ads-v2-colors-content-surface-default-border); + text-align: left; + } +`; + +export const StyledBody = styled.tbody.attrs(({ className }) => ({ + className: clsx(TableBodyClassName, className), +}))``; + +export const StyledRow = styled.tr.attrs(({ className }) => ({ + className: clsx(TableBodyRowClassName, className), +}))` + border-bottom: 1px solid var(--ads-v2-colors-content-surface-default-border); +`; + +export const StyledCell = styled.td.attrs(({ className }) => ({ + className: clsx(TableBodyCellClassName, className), +}))` + && { + font-size: 14px; + padding: var(--ads-v2-spaces-6) var(--ads-v2-spaces-5); + color: var(--ads-v2-colors-content-label-default-fg); + font-family: var(--ads-v2-font-family); + border: none; + } + + &&.rc-table-cell.rc-table-cell-row-hover { + background: var(--ads-v2-colors-content-surface-neutral-bg); + } +`; diff --git a/packages/design-system/src/Table/Table.tsx b/packages/design-system/src/Table/Table.tsx index 255cd467..2649fdb5 100644 --- a/packages/design-system/src/Table/Table.tsx +++ b/packages/design-system/src/Table/Table.tsx @@ -1,10 +1,45 @@ import React from "react"; +import RcTable from "rc-table"; +import clsx from "classnames"; + +import "rc-table/assets/index.css"; +import "./reset.css"; import { TableProps } from "./Table.types"; -import { StyledTable } from "./Table.styles"; +import { + StyledBody, + StyledCell, + StyledHeader, + StyledHeaderCell, + StyledHeaderRow, + StyledRow, + StyledTable, +} from "./Table.styles"; +import { TableWrapperClassName } from "./Table.constants"; -function Table({ children, ...rest }: TableProps) { - return {children}; +function Table({ className, ...props }: TableProps) { + const components = { + table: StyledTable, + header: { + wrapper: StyledHeader, + row: StyledHeaderRow, + cell: StyledHeaderCell, + }, + body: { + wrapper: StyledBody, + row: StyledRow, + cell: StyledCell, + }, + }; + return ( + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-expect-error + + ); } Table.displayName = "Table"; diff --git a/packages/design-system/src/Table/Table.types.ts b/packages/design-system/src/Table/Table.types.ts index 2986290c..ce07755a 100644 --- a/packages/design-system/src/Table/Table.types.ts +++ b/packages/design-system/src/Table/Table.types.ts @@ -1,5 +1,3 @@ +import type { TableProps as RcTableProps } from "rc-table"; // Table props -export type TableProps = { - children?: React.ReactNode; - className?: string; -}; +export type TableProps = Omit; diff --git a/packages/design-system/src/Table/reset.css b/packages/design-system/src/Table/reset.css new file mode 100644 index 00000000..9e1b9bec --- /dev/null +++ b/packages/design-system/src/Table/reset.css @@ -0,0 +1,55 @@ +.rc-table.ads-v2-table-wrapper { + color: var(--ads-v2-colors-content-label-default-fg); +} + +.rc-table.ads-v2-table-wrapper .rc-table-content { + border: none; + border-radius: 0; +} + +.rc-table.ads-v2-table-wrapper .rc-table-header { + border: none; +} + +.rc-table.ads-v2-table-wrapper .rc-table-body { + border: none; +} + +.rc-table.ads-v2-table-wrapper .rc-table-footer, +.rc-table.ads-v2-table-wrapper .rc-table-summary, +.rc-table.ads-v2-table-wrapper .rc-table-caption { + border: none; + color: var(--ads-v2-colors-content-label-default-fg); + font-family: var(--ads-v2-font-family); +} + +.rc-table.ads-v2-table-wrapper .rc-table-tbody-virtual { + border: none; +} + +.rc-table.ads-v2-table-wrapper .rc-table-cell-fix-right-first, +.rc-table.ads-v2-table-wrapper .rc-table-cell-fix-right-last { + box-shadow: -1px 0 0 var(--ads-v2-shadow-color); +} + +.rc-table.ads-v2-table-wrapper .rc-table-fixed-column .rc-table-body::after { + border-right: none; +} + +.rc-table.ads-v2-table-wrapper .rc-table-expanded-row .rc-table-cell { + box-shadow: none; +} + +.rc-table.ads-v2-table-wrapper .rc-table-expanded-row-fixed::after { + border-right: none; +} + +.rc-table.ads-v2-table-wrapper.rc-table-has-fix-left .rc-table-cell-fix-left-first::after, +.rc-table.ads-v2-table-wrapper.rc-table-has-fix-left .rc-table-cell-fix-left-last::after { + box-shadow: inset 10px 0 8px -8px var(--ads-v2-shadow-color); +} + +.rc-table.ads-v2-table-wrapper.rc-table-has-fix-right .rc-table-cell-fix-right-first::after, +.rc-table.ads-v2-table-wrapper.rc-table-has-fix-right .rc-table-cell-fix-right-last::after { + box-shadow: inset -10px 0 8px -8px var(--ads-v2-shadow-color); +} \ No newline at end of file diff --git a/packages/design-system/src/__theme__/default/index.css b/packages/design-system/src/__theme__/default/index.css index 001e8ef1..9e5225fa 100644 --- a/packages/design-system/src/__theme__/default/index.css +++ b/packages/design-system/src/__theme__/default/index.css @@ -127,6 +127,7 @@ * ================== Shadow =================* * ===========================================* */ + --ads-v2-shadow-color: rgba(76, 86, 100, 0.11); /* This is the shadow that applies only on popovers like select and menu and not in modal or anything that sort.*/ --ads-v2-shadow-popovers: 0 1px 20px 0 rgba(76, 86, 100, 0.11); diff --git a/yarn.lock b/yarn.lock index 59f153aa..9176bfc3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3059,6 +3059,14 @@ dependencies: "@babel/runtime" "^7.13.10" +"@rc-component/context@^1.4.0": + version "1.4.0" + resolved "https://registry.yarnpkg.com/@rc-component/context/-/context-1.4.0.tgz#dc6fb021d6773546af8f016ae4ce9aea088395e8" + integrity sha512-kFcNxg9oLRMoL3qki0OMxK+7g5mypjgaaJp/pkOis/6rVxma9nJBF/8kCIuTYHUQNr0ii7MxqE33wirPZLJQ2w== + dependencies: + "@babel/runtime" "^7.10.1" + rc-util "^5.27.0" + "@rc-component/portal@^1.1.0": version "1.1.2" resolved "https://registry.npmjs.org/@rc-component/portal/-/portal-1.1.2.tgz" @@ -8772,7 +8780,7 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" -classnames@2.x, classnames@^2.2, classnames@^2.2.1, classnames@^2.2.6, classnames@^2.3.1, classnames@^2.3.2: +classnames@2.x, classnames@^2.2, classnames@^2.2.1, classnames@^2.2.5, classnames@^2.2.6, classnames@^2.3.1, classnames@^2.3.2: version "2.3.2" resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz" integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw== @@ -17403,6 +17411,16 @@ rc-resize-observer@^1.0.0, rc-resize-observer@^1.3.1: rc-util "^5.27.0" resize-observer-polyfill "^1.5.1" +rc-resize-observer@^1.1.0: + version "1.4.0" + resolved "https://registry.yarnpkg.com/rc-resize-observer/-/rc-resize-observer-1.4.0.tgz#7bba61e6b3c604834980647cce6451914750d0cc" + integrity sha512-PnMVyRid9JLxFavTjeDXEXo65HCRqbmLBw9xX9gfC4BZiSzbLXKzW3jPz+J0P71pLbD5tBMTT+mkstV5gD0c9Q== + dependencies: + "@babel/runtime" "^7.20.7" + classnames "^2.2.1" + rc-util "^5.38.0" + resize-observer-polyfill "^1.5.1" + rc-select@^14.4.3: version "14.4.3" resolved "https://registry.npmjs.org/rc-select/-/rc-select-14.4.3.tgz" @@ -17416,6 +17434,18 @@ rc-select@^14.4.3: rc-util "^5.16.1" rc-virtual-list "^3.4.13" +rc-table@^7.35.2: + version "7.35.2" + resolved "https://registry.yarnpkg.com/rc-table/-/rc-table-7.35.2.tgz#8fcd59e9342bf13fe131ca54c6105e71ab95588b" + integrity sha512-ZLIZdAEdfen21FI21xt2LDg9chQ7gc5Lpy4nkjWKPDgmQMnH0KJ8JQQzrd3zrEN16xzjiVdHHvRmi1RU8BtgYg== + dependencies: + "@babel/runtime" "^7.10.1" + "@rc-component/context" "^1.4.0" + classnames "^2.2.5" + rc-resize-observer "^1.1.0" + rc-util "^5.37.0" + rc-virtual-list "^3.11.1" + rc-tooltip@^5.3.1: version "5.3.1" resolved "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-5.3.1.tgz" @@ -17444,6 +17474,24 @@ rc-util@^5.15.0, rc-util@^5.16.1, rc-util@^5.19.2, rc-util@^5.21.0, rc-util@^5.2 "@babel/runtime" "^7.18.3" react-is "^16.12.0" +rc-util@^5.36.0, rc-util@^5.37.0, rc-util@^5.38.0: + version "5.38.0" + resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.38.0.tgz#18a3d1c26ba3c43fabfbe6303e825dabd9e5f4f0" + integrity sha512-yV/YBNdFn+edyBpBdCqkPE29Su0jWcHNgwx2dJbRqMrMfrUcMJUjCRV+ZPhcvWyKFJ63GzEerPrz9JIVo0zXmA== + dependencies: + "@babel/runtime" "^7.18.3" + react-is "^18.2.0" + +rc-virtual-list@^3.11.1: + version "3.11.2" + resolved "https://registry.yarnpkg.com/rc-virtual-list/-/rc-virtual-list-3.11.2.tgz#eb859c2257233aff10864f041e5bcc89f7814bb7" + integrity sha512-MTFLL2LOHr3+/+r+WjTIs6j8XmJE6EqdOsJvCH8SWig7qyik3aljCEImUtw5tdWR0tQhXUfbv7P7nZaLY91XPg== + dependencies: + "@babel/runtime" "^7.20.0" + classnames "^2.2.6" + rc-resize-observer "^1.0.0" + rc-util "^5.36.0" + rc-virtual-list@^3.4.13: version "3.5.3" resolved "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.5.3.tgz" @@ -17585,7 +17633,7 @@ react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0: resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== -react-is@^18.0.0: +react-is@^18.0.0, react-is@^18.2.0: version "18.2.0" resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz" integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w== From 37d9b3358a9c40dab546c9825217f7bcce798bde Mon Sep 17 00:00:00 2001 From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com> Date: Tue, 24 Oct 2023 15:40:45 +0530 Subject: [PATCH 3/6] story updates for table component --- .../design-system/src/Table/Table.stories.tsx | 235 +++++++++++++++++- packages/design-system/src/Table/Table.tsx | 20 +- 2 files changed, 253 insertions(+), 2 deletions(-) diff --git a/packages/design-system/src/Table/Table.stories.tsx b/packages/design-system/src/Table/Table.stories.tsx index e82f077b..2c28b90d 100644 --- a/packages/design-system/src/Table/Table.stories.tsx +++ b/packages/design-system/src/Table/Table.stories.tsx @@ -1,9 +1,9 @@ -/* eslint-disable react/jsx-no-useless-fragment */ import React from "react"; import { Meta, StoryObj } from "@storybook/react"; import { Table } from "./Table"; import { Tooltip } from "../Tooltip"; +import { ColumnType } from "rc-table/lib/interface"; export default { title: "Design System/Table", @@ -27,6 +27,125 @@ type Story = StoryObj; export const TableStory: Story = { name: "Table", + argTypes: { + columns: { + control: { + type: "object", + }, + description: "Table columns", + }, + data: { + control: { + type: "object", + }, + description: "Table data", + }, + sticky: { + control: { + type: "boolean", + }, + description: + "This flag makes the table header sticky. This can be an object also.", + table: { + defaultValue: { + summary: "boolean | TableSticky", + }, + type: { + summary: `TableSticky { + offsetHeader?: number; + offsetSummary?: number; + offsetScroll?: number; + getContainer?: () => Window | HTMLElement; + }`, + }, + }, + }, + className: { + control: { + type: "text", + }, + description: "Table className", + }, + id: { + control: { + type: "text", + }, + description: "Table id", + }, + expandable: { + control: { + type: "object", + }, + description: + "Table expandable. ExpandableConfig object from rc-table. https://www.npmjs.com/package/rc-table", + }, + rowKey: { + control: { + type: "text", + }, + description: + "If rowKey is string, record[rowKey] will be used as key. If rowKey is function, the return value of rowKey(record, index) will be use as key.", + }, + rowClassName: { + control: { + type: "text", + }, + description: "get row's className", + table: { + type: { + summary: "string or Function(record, index, indent):string", + }, + }, + }, + onRow: { + control: { + type: "object", + }, + description: "onRow handler", + table: { + type: { + summary: "Function(record, index):Object", + }, + }, + }, + onHeaderRow: { + control: { + type: "object", + }, + description: "onHeaderRow handler", + table: { + type: { + summary: "Function(columns):Object", + }, + }, + }, + emptyText: { + control: { + type: "text", + }, + description: "empty text to show", + table: { + type: { + summary: "string | ReactNode | Function", + }, + defaultValue: { + summary: "No Data", + }, + }, + }, + summary: { + control: { + type: "object", + }, + description: + "Summary attribute in table component is used to define the summary row.", + table: { + type: { + summary: "Function(data):ReactNode", + }, + }, + }, + }, args: { columns: [ { @@ -199,3 +318,117 @@ export const TableStory: Story = { }, render: (args) =>
, }; + +type RecordType = { + [key: string]: any; +}; + +type ColumnStory = StoryObj>; +export const TableColumnStory: ColumnStory = { + name: "Table Column", + argTypes: { + key: { + control: { + type: "text", + }, + description: "Key for the column", + }, + className: { + control: { + type: "text", + }, + description: "className for the column", + }, + colSpan: { + control: { + type: "number", + }, + description: "Number of columns to be spanned", + }, + title: { + control: { + type: "text", + }, + description: "Title of the column", + }, + dataIndex: { + control: { + type: "text", + }, + description: "Display field of the data record", + }, + width: { + control: { + type: "number", + }, + description: "Width of the column", + }, + fixed: { + control: { + type: "text", + }, + description: "Set column to be fixed: true(same as left) 'left' 'right'", + }, + align: { + control: { + type: "text", + }, + description: "Alignment of the column", + }, + ellipsis: { + control: { + type: "boolean", + }, + description: "Whether ellipsis show or not", + table: { + defaultValue: { + summary: "false", + }, + }, + }, + rowScope: { + control: { + type: "text", + }, + description: "Scope of the row", + table: { + type: { + summary: "row | rowgroup", + }, + }, + }, + onCell: { + control: { + type: "object", + }, + description: "onCell handler", + table: { + type: { + summary: "Function(record, index):Object", + }, + }, + }, + onHeaderCell: { + control: { + type: "object", + }, + description: "onHeaderCell handler", + table: { + type: { + summary: "Function(column):Object", + }, + }, + }, + render: { + control: { + type: "object", + }, + description: "Render function of the cell", + table: { + type: { + summary: "Function(value, record, index):ReactNode", + }, + }, + }, + }, +}; diff --git a/packages/design-system/src/Table/Table.tsx b/packages/design-system/src/Table/Table.tsx index 2649fdb5..815c0f84 100644 --- a/packages/design-system/src/Table/Table.tsx +++ b/packages/design-system/src/Table/Table.tsx @@ -16,8 +16,11 @@ import { StyledTable, } from "./Table.styles"; import { TableWrapperClassName } from "./Table.constants"; +import { Icon } from "Icon"; +import { Text } from "Text"; +import { Flex } from "Flex"; -function Table({ className, ...props }: TableProps) { +function Table({ className, emptyText = NoData, ...props }: TableProps) { const components = { table: StyledTable, header: { @@ -38,10 +41,25 @@ function Table({ className, ...props }: TableProps) { {...props} className={clsx(TableWrapperClassName, className)} components={components} + emptyText={emptyText} /> ); } Table.displayName = "Table"; +function NoData() { + return ( + + + No data found + + ); +} + export { Table }; From b0044836c80fd5f855c6fe98ebf3490c8049daff Mon Sep 17 00:00:00 2001 From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com> Date: Wed, 25 Oct 2023 10:59:45 +0530 Subject: [PATCH 4/6] review comment fixes --- packages/design-system/src/Table/Table.stories.tsx | 3 ++- packages/design-system/src/Table/Table.styles.tsx | 6 +++--- packages/design-system/src/Table/Table.tsx | 4 +--- 3 files changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/design-system/src/Table/Table.stories.tsx b/packages/design-system/src/Table/Table.stories.tsx index 2c28b90d..fb8339fb 100644 --- a/packages/design-system/src/Table/Table.stories.tsx +++ b/packages/design-system/src/Table/Table.stories.tsx @@ -14,7 +14,7 @@ export default { style={{ width: "60%", height: "50vh", - overflow: "scroll", + display: "table", }} > @@ -315,6 +315,7 @@ export const TableStory: Story = { }, ], sticky: true, + tableLayout: "fixed", }, render: (args) =>
, }; diff --git a/packages/design-system/src/Table/Table.styles.tsx b/packages/design-system/src/Table/Table.styles.tsx index 10a1059f..eb8cf39d 100644 --- a/packages/design-system/src/Table/Table.styles.tsx +++ b/packages/design-system/src/Table/Table.styles.tsx @@ -32,9 +32,9 @@ export const StyledHeaderCell = styled.th.attrs(({ className }) => ({ className: clsx(TableHeaderCellClassName, className), }))` && { - font-size: 14px; + font-size: var(--ads-v2-font-size-4); font-style: normal; - font-weight: 400; + font-weight: var(--ads-v2-font-weight-normal); color: var(--ads-v2-colors-content-label-default-fg); font-family: var(--ads-v2-font-family); border: none; @@ -60,7 +60,7 @@ export const StyledCell = styled.td.attrs(({ className }) => ({ className: clsx(TableBodyCellClassName, className), }))` && { - font-size: 14px; + font-size: var(--ads-v2-font-size-4); padding: var(--ads-v2-spaces-6) var(--ads-v2-spaces-5); color: var(--ads-v2-colors-content-label-default-fg); font-family: var(--ads-v2-font-family); diff --git a/packages/design-system/src/Table/Table.tsx b/packages/design-system/src/Table/Table.tsx index 815c0f84..fe406690 100644 --- a/packages/design-system/src/Table/Table.tsx +++ b/packages/design-system/src/Table/Table.tsx @@ -35,9 +35,7 @@ function Table({ className, emptyText = NoData, ...props }: TableProps) { }, }; return ( - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-expect-error - {...props} className={clsx(TableWrapperClassName, className)} components={components} From c29e613e675de139f72a7e05a0efe8a83345013b Mon Sep 17 00:00:00 2001 From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com> Date: Wed, 25 Oct 2023 11:22:23 +0530 Subject: [PATCH 5/6] table type fixes --- packages/design-system/src/Table/Table.tsx | 9 +++++++-- packages/design-system/src/Table/Table.types.ts | 8 ++++++-- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/design-system/src/Table/Table.tsx b/packages/design-system/src/Table/Table.tsx index fe406690..160b266b 100644 --- a/packages/design-system/src/Table/Table.tsx +++ b/packages/design-system/src/Table/Table.tsx @@ -5,6 +5,7 @@ import clsx from "classnames"; import "rc-table/assets/index.css"; import "./reset.css"; +import { DefaultRecordType } from "rc-table/lib/interface"; import { TableProps } from "./Table.types"; import { StyledBody, @@ -20,7 +21,11 @@ import { Icon } from "Icon"; import { Text } from "Text"; import { Flex } from "Flex"; -function Table({ className, emptyText = NoData, ...props }: TableProps) { +function Table({ + className, + emptyText = NoData, + ...props +}: TableProps) { const components = { table: StyledTable, header: { @@ -35,7 +40,7 @@ function Table({ className, emptyText = NoData, ...props }: TableProps) { }, }; return ( - + {...props} className={clsx(TableWrapperClassName, className)} components={components} diff --git a/packages/design-system/src/Table/Table.types.ts b/packages/design-system/src/Table/Table.types.ts index ce07755a..171003eb 100644 --- a/packages/design-system/src/Table/Table.types.ts +++ b/packages/design-system/src/Table/Table.types.ts @@ -1,3 +1,7 @@ import type { TableProps as RcTableProps } from "rc-table"; -// Table props -export type TableProps = Omit; +import { DefaultRecordType } from "rc-table/lib/interface"; + +export type TableProps = Omit< + RcTableProps, + "styles" | "components" +>; From 0753e7a754a8865d7d1660fd09f46682a8ecb1d3 Mon Sep 17 00:00:00 2001 From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com> Date: Wed, 25 Oct 2023 13:55:02 +0530 Subject: [PATCH 6/6] fix: table header height fix --- packages/design-system/src/Table/Table.styles.tsx | 2 ++ packages/design-system/src/index.ts | 1 + 2 files changed, 3 insertions(+) diff --git a/packages/design-system/src/Table/Table.styles.tsx b/packages/design-system/src/Table/Table.styles.tsx index eb8cf39d..5ea487b5 100644 --- a/packages/design-system/src/Table/Table.styles.tsx +++ b/packages/design-system/src/Table/Table.styles.tsx @@ -35,6 +35,7 @@ export const StyledHeaderCell = styled.th.attrs(({ className }) => ({ font-size: var(--ads-v2-font-size-4); font-style: normal; font-weight: var(--ads-v2-font-weight-normal); + line-height: 13px; color: var(--ads-v2-colors-content-label-default-fg); font-family: var(--ads-v2-font-family); border: none; @@ -65,6 +66,7 @@ export const StyledCell = styled.td.attrs(({ className }) => ({ color: var(--ads-v2-colors-content-label-default-fg); font-family: var(--ads-v2-font-family); border: none; + line-height: normal; } &&.rc-table-cell.rc-table-cell-row-hover { diff --git a/packages/design-system/src/index.ts b/packages/design-system/src/index.ts index 2cf1ec0a..6cd7a5ae 100644 --- a/packages/design-system/src/index.ts +++ b/packages/design-system/src/index.ts @@ -26,6 +26,7 @@ export * from "./Select"; export * from "./Spinner"; export * from "./Switch"; export * from "./Tab"; +export * from "./Table"; export * from "./Tag"; export * from "./Text"; export * from "./Toast";