refactor(table): redesign interfaces to improve the experience in Typ…

…eScript (#569) * refactor(table): redesign interfaces to improve the experience in TypeScript * docs: upgrade to new type exports * style: fix lint warnings
geist-org · Jun 26, 2021 · 2dbf1dd · 2dbf1dd
1 parent 26490d4
commit 2dbf1dd
Show file tree

Hide file tree

Showing 16 changed files with 577 additions and 304 deletions.
diff --git a/components/rating/rating.tsx b/components/rating/rating.tsx
@@ -47,7 +47,6 @@ const getColor = (type: RatingTypes, palette: GeistUIThemesPalette): string => {
 
 const RatingComponent: React.FC<RatingProps> = ({
   type,
-  children,
   className,
   icon,
   count,

diff --git a/components/table/__tests__/__snapshots__/index.test.tsx.snap b/components/table/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Table should be no erros when width is too large 1`] = `
-"<table class=\\"\\"><colgroup></colgroup><thead><tr><th><div class=\\"thead-box\\">property</div></th><th><div class=\\"thead-box\\">description</div></th><th><div class=\\"thead-box\\">default</div></th></tr></thead><style>
+"<table class=\\"\\"><colgroup></colgroup><thead><tr><th class=\\"\\"><div class=\\"thead-box\\">property</div></th><th class=\\"\\"><div class=\\"thead-box\\">description</div></th><th class=\\"\\"><div class=\\"thead-box\\">default</div></th></tr></thead><style>
         thead {
           border-collapse: separate;
           border-spacing: 0;
@@ -46,7 +46,7 @@ exports[`Table should be no erros when width is too large 1`] = `
           min-height: calc(2.5 * var(--table-font-size));
           text-transform: uppercase;
         }
-      </style><tbody><tr class=\\"hover\\"><td><div class=\\"cell\\">type</div></td><td><div class=\\"cell\\">Content type</div></td><td><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">Component</div></td><td><div class=\\"cell\\">DOM element to use</div></td><td><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">bold</div></td><td><div class=\\"cell\\">Bold style</div></td><td><div class=\\"cell\\">true</div></td></tr><style>
+      </style><tbody><tr class=\\"hover \\"><td class=\\"\\"><div class=\\"cell\\">type</div></td><td class=\\"\\"><div class=\\"cell\\">Content type</div></td><td class=\\"\\"><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover \\"><td class=\\"\\"><div class=\\"cell\\">Component</div></td><td class=\\"\\"><div class=\\"cell\\">DOM element to use</div></td><td class=\\"\\"><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover \\"><td class=\\"\\"><div class=\\"cell\\">bold</div></td><td class=\\"\\"><div class=\\"cell\\">Bold style</div></td><td class=\\"\\"><div class=\\"cell\\">true</div></td></tr><style>
         tr {
           transition: background-color 0.25s ease;
           font-size: inherit;
@@ -86,7 +86,7 @@ exports[`Table should be no erros when width is too large 1`] = `
 `;
 
 exports[`Table should render children for table head 1`] = `
-"<table class=\\"\\"><colgroup></colgroup><thead><tr><th><div class=\\"thead-box\\"><code>property</code></div></th></tr></thead><style>
+"<table class=\\"\\"><colgroup></colgroup><thead><tr><th class=\\"\\"><div class=\\"thead-box\\"><code>property</code></div></th></tr></thead><style>
         thead {
           border-collapse: separate;
           border-spacing: 0;
@@ -131,7 +131,7 @@ exports[`Table should render children for table head 1`] = `
           min-height: calc(2.5 * var(--table-font-size));
           text-transform: uppercase;
         }
-      </style><tbody><tr class=\\"hover\\"><td><div class=\\"cell\\">type</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">Component</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">bold</div></td></tr><style>
+      </style><tbody><tr class=\\"hover \\"><td class=\\"\\"><div class=\\"cell\\">type</div></td></tr><tr class=\\"hover \\"><td class=\\"\\"><div class=\\"cell\\">Component</div></td></tr><tr class=\\"hover \\"><td class=\\"\\"><div class=\\"cell\\">bold</div></td></tr><style>
         tr {
           transition: background-color 0.25s ease;
           font-size: inherit;
@@ -171,7 +171,7 @@ exports[`Table should render children for table head 1`] = `
 `;
 
 exports[`Table should render correctly 1`] = `
-"<table class=\\"\\"><colgroup></colgroup><thead><tr><th><div class=\\"thead-box\\">property</div></th><th><div class=\\"thead-box\\">description</div></th><th><div class=\\"thead-box\\">default</div></th></tr></thead><style>
+"<table class=\\"\\"><colgroup></colgroup><thead><tr><th class=\\"\\"><div class=\\"thead-box\\">property</div></th><th class=\\"\\"><div class=\\"thead-box\\">description</div></th><th class=\\"\\"><div class=\\"thead-box\\">default</div></th></tr></thead><style>
         thead {
           border-collapse: separate;
           border-spacing: 0;
@@ -216,7 +216,7 @@ exports[`Table should render correctly 1`] = `
           min-height: calc(2.5 * var(--table-font-size));
           text-transform: uppercase;
         }
-      </style><tbody><tr class=\\"hover\\"><td><div class=\\"cell\\">type</div></td><td><div class=\\"cell\\">Content type</div></td><td><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">Component</div></td><td><div class=\\"cell\\">DOM element to use</div></td><td><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">bold</div></td><td><div class=\\"cell\\">Bold style</div></td><td><div class=\\"cell\\">true</div></td></tr><style>
+      </style><tbody><tr class=\\"hover \\"><td class=\\"\\"><div class=\\"cell\\">type</div></td><td class=\\"\\"><div class=\\"cell\\">Content type</div></td><td class=\\"\\"><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover \\"><td class=\\"\\"><div class=\\"cell\\">Component</div></td><td class=\\"\\"><div class=\\"cell\\">DOM element to use</div></td><td class=\\"\\"><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover \\"><td class=\\"\\"><div class=\\"cell\\">bold</div></td><td class=\\"\\"><div class=\\"cell\\">Bold style</div></td><td class=\\"\\"><div class=\\"cell\\">true</div></td></tr><style>
         tr {
           transition: background-color 0.25s ease;
           font-size: inherit;
@@ -256,7 +256,7 @@ exports[`Table should render correctly 1`] = `
 `;
 
 exports[`Table should set width automatically 1`] = `
-"<table class=\\"\\"><colgroup><col width=\\"25\\"><col width=\\"25\\"><col width=\\"50\\"></colgroup><thead><tr><th><div class=\\"thead-box\\">property</div></th><th><div class=\\"thead-box\\">description</div></th><th><div class=\\"thead-box\\">default</div></th></tr></thead><style>
+"<table class=\\"\\"><colgroup><col width=\\"25\\"><col width=\\"25\\"><col width=\\"50\\"></colgroup><thead><tr><th class=\\"\\"><div class=\\"thead-box\\">property</div></th><th class=\\"\\"><div class=\\"thead-box\\">description</div></th><th class=\\"\\"><div class=\\"thead-box\\">default</div></th></tr></thead><style>
         thead {
           border-collapse: separate;
           border-spacing: 0;
@@ -301,7 +301,92 @@ exports[`Table should set width automatically 1`] = `
           min-height: calc(2.5 * var(--table-font-size));
           text-transform: uppercase;
         }
-      </style><tbody><tr class=\\"hover\\"><td><div class=\\"cell\\">type</div></td><td><div class=\\"cell\\">Content type</div></td><td><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">Component</div></td><td><div class=\\"cell\\">DOM element to use</div></td><td><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">bold</div></td><td><div class=\\"cell\\">Bold style</div></td><td><div class=\\"cell\\">true</div></td></tr><style>
+      </style><tbody><tr class=\\"hover \\"><td class=\\"\\"><div class=\\"cell\\">type</div></td><td class=\\"\\"><div class=\\"cell\\">Content type</div></td><td class=\\"\\"><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover \\"><td class=\\"\\"><div class=\\"cell\\">Component</div></td><td class=\\"\\"><div class=\\"cell\\">DOM element to use</div></td><td class=\\"\\"><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover \\"><td class=\\"\\"><div class=\\"cell\\">bold</div></td><td class=\\"\\"><div class=\\"cell\\">Bold style</div></td><td class=\\"\\"><div class=\\"cell\\">true</div></td></tr><style>
+        tr {
+          transition: background-color 0.25s ease;
+          font-size: inherit;
+        }
+
+        tr.hover:hover {
+          background-color: #fafafa;
+        }
+
+        tr :global(td) {
+          padding: 0 0.5em;
+          border-bottom: 1px solid #eaeaea;
+          color: #444;
+          font-size: calc(0.875 * var(--table-font-size));
+          text-align: left;
+        }
+
+        tr :global(.cell) {
+          min-height: calc(3.125 * var(--table-font-size));
+          display: flex;
+          -webkit-box-align: center;
+          align-items: center;
+          flex-flow: row wrap;
+        }
+      </style></tbody><style>
+          table {
+            border-collapse: separate;
+            border-spacing: 0;
+            --table-font-size: calc(1 * 16px);
+            font-size: var(--table-font-size);
+            width: 100%;
+            height: auto;
+            padding: 0 0 0 0;
+            margin: 0 0 0 0;
+          }
+        </style></table>"
+`;
+
+exports[`Table should work correctly with multiple identical props 1`] = `
+"<table class=\\"\\"><colgroup></colgroup><thead><tr><th class=\\"\\"><div class=\\"thead-box\\">property3</div></th><th class=\\"\\"><div class=\\"thead-box\\">description2</div></th></tr></thead><style>
+        thead {
+          border-collapse: separate;
+          border-spacing: 0;
+          font-size: inherit;
+        }
+
+        th {
+          padding: 0 0.5em;
+          font-size: calc(0.75 * var(--table-font-size));
+          font-weight: normal;
+          text-align: left;
+          letter-spacing: 0;
+          vertical-align: middle;
+          min-height: calc(2.5 * var(--table-font-size));
+          color: #666;
+          background: #fafafa;
+          border-bottom: 1px solid #eaeaea;
+          border-top: 1px solid #eaeaea;
+          border-radius: 0;
+        }
+
+        th:nth-child(1) {
+          border-bottom: 1px solid #eaeaea;
+          border-left: 1px solid #eaeaea;
+          border-top: 1px solid #eaeaea;
+          border-top-left-radius: 5px;
+          border-bottom-left-radius: 5px;
+        }
+
+        th:last-child {
+          border-bottom: 1px solid #eaeaea;
+          border-right: 1px solid #eaeaea;
+          border-top: 1px solid #eaeaea;
+          border-top-right-radius: 5px;
+          border-bottom-right-radius: 5px;
+        }
+
+        .thead-box {
+          display: flex;
+          align-items: center;
+          -webkit-box-align: center;
+          min-height: calc(2.5 * var(--table-font-size));
+          text-transform: uppercase;
+        }
+      </style><tbody><tr class=\\"hover \\"><td class=\\"\\"><div class=\\"cell\\">type</div></td><td class=\\"\\"><div class=\\"cell\\">Content type</div></td></tr><tr class=\\"hover \\"><td class=\\"\\"><div class=\\"cell\\">Component</div></td><td class=\\"\\"><div class=\\"cell\\">DOM element to use</div></td></tr><tr class=\\"hover \\"><td class=\\"\\"><div class=\\"cell\\">bold</div></td><td class=\\"\\"><div class=\\"cell\\">Bold style</div></td></tr><style>
         tr {
           transition: background-color 0.25s ease;
           font-size: inherit;
@@ -341,7 +426,7 @@ exports[`Table should set width automatically 1`] = `
 `;
 
 exports[`Table should work with other components 1`] = `
-"<table class=\\"\\"><colgroup></colgroup><thead><tr><th><div class=\\"thead-box\\">property</div></th><th><div class=\\"thead-box\\">description</div></th><th><div class=\\"thead-box\\">default</div></th></tr></thead><style>
+"<table class=\\"\\"><colgroup></colgroup><thead><tr><th class=\\"\\"><div class=\\"thead-box\\">property</div></th><th class=\\"\\"><div class=\\"thead-box\\">description</div></th><th class=\\"\\"><div class=\\"thead-box\\">default</div></th></tr></thead><style>
         thead {
           border-collapse: separate;
           border-spacing: 0;
@@ -386,7 +471,7 @@ exports[`Table should work with other components 1`] = `
           min-height: calc(2.5 * var(--table-font-size));
           text-transform: uppercase;
         }
-      </style><tbody><tr class=\\"hover\\"><td><div class=\\"cell\\">type</div></td><td><div class=\\"cell\\">Content type</div></td><td><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">Component</div></td><td><div class=\\"cell\\">DOM element to use</div></td><td><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">bold</div></td><td><div class=\\"cell\\">Bold style</div></td><td><div class=\\"cell\\">true</div></td></tr><tr class=\\"hover\\"><td><div class=\\"cell\\">bold</div></td><td><div class=\\"cell\\"><code>boolean</code></div></td><td><div class=\\"cell\\">true</div></td></tr><style>
+      </style><tbody><tr class=\\"hover \\"><td class=\\"\\"><div class=\\"cell\\">type</div></td><td class=\\"\\"><div class=\\"cell\\">Content type</div></td><td class=\\"\\"><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover \\"><td class=\\"\\"><div class=\\"cell\\">Component</div></td><td class=\\"\\"><div class=\\"cell\\">DOM element to use</div></td><td class=\\"\\"><div class=\\"cell\\">-</div></td></tr><tr class=\\"hover \\"><td class=\\"\\"><div class=\\"cell\\">bold</div></td><td class=\\"\\"><div class=\\"cell\\">Bold style</div></td><td class=\\"\\"><div class=\\"cell\\">true</div></td></tr><tr class=\\"hover \\"><td class=\\"\\"><div class=\\"cell\\">bold</div></td><td class=\\"\\"><div class=\\"cell\\"><code>boolean</code></div></td><td class=\\"\\"><div class=\\"cell\\">true</div></td></tr><style>
         tr {
           transition: background-color 0.25s ease;
           font-size: inherit;
@@ -426,7 +511,7 @@ exports[`Table should work with other components 1`] = `
 `;
 
 exports[`Table should work without hover effect 1`] = `
-"<table class=\\"\\"><colgroup></colgroup><thead><tr><th><div class=\\"thead-box\\">property</div></th><th><div class=\\"thead-box\\">description</div></th><th><div class=\\"thead-box\\">default</div></th></tr></thead><style>
+"<table class=\\"\\"><colgroup></colgroup><thead><tr><th class=\\"\\"><div class=\\"thead-box\\">property</div></th><th class=\\"\\"><div class=\\"thead-box\\">description</div></th><th class=\\"\\"><div class=\\"thead-box\\">default</div></th></tr></thead><style>
         thead {
           border-collapse: separate;
           border-spacing: 0;
@@ -471,7 +556,7 @@ exports[`Table should work without hover effect 1`] = `
           min-height: calc(2.5 * var(--table-font-size));
           text-transform: uppercase;
         }
-      </style><tbody><tr class=\\"\\"><td><div class=\\"cell\\">type</div></td><td><div class=\\"cell\\">Content type</div></td><td><div class=\\"cell\\">-</div></td></tr><tr class=\\"\\"><td><div class=\\"cell\\">Component</div></td><td><div class=\\"cell\\">DOM element to use</div></td><td><div class=\\"cell\\">-</div></td></tr><tr class=\\"\\"><td><div class=\\"cell\\">bold</div></td><td><div class=\\"cell\\">Bold style</div></td><td><div class=\\"cell\\">true</div></td></tr><style>
+      </style><tbody><tr class=\\" \\"><td class=\\"\\"><div class=\\"cell\\">type</div></td><td class=\\"\\"><div class=\\"cell\\">Content type</div></td><td class=\\"\\"><div class=\\"cell\\">-</div></td></tr><tr class=\\" \\"><td class=\\"\\"><div class=\\"cell\\">Component</div></td><td class=\\"\\"><div class=\\"cell\\">DOM element to use</div></td><td class=\\"\\"><div class=\\"cell\\">-</div></td></tr><tr class=\\" \\"><td class=\\"\\"><div class=\\"cell\\">bold</div></td><td class=\\"\\"><div class=\\"cell\\">Bold style</div></td><td class=\\"\\"><div class=\\"cell\\">true</div></td></tr><style>
         tr {
           transition: background-color 0.25s ease;
           font-size: inherit;

diff --git a/components/table/__tests__/index.test.tsx b/components/table/__tests__/index.test.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
 import { mount } from 'enzyme'
 import { Table, Code } from 'components'
-import { TableCellActions } from '../table-cell'
 import { nativeEvent, updateWrapper } from 'tests/utils'
 import { act } from 'react-dom/test-utils'
+import { TableColumnRender } from 'components/table/table-types'
 
 const data = [
   { property: 'type', description: 'Content type', default: '-' },
@@ -24,6 +24,20 @@ describe('Table', () => {
     expect(() => wrapper.unmount()).not.toThrow()
   })
 
+  it('should work correctly with multiple identical props', () => {
+    const wrapper = mount(
+      <Table data={data}>
+        <Table.Column prop="property" label="property" />
+        <Table.Column prop="description" label="description" />
+        <Table.Column prop="property" label="property2" />
+        <Table.Column prop="property" label="property3" />
+        <Table.Column prop="description" label="description2" />
+      </Table>,
+    )
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+
   it('should re-render when data changed', async () => {
     const wrapper = mount(
       <Table data={data}>
@@ -99,47 +113,39 @@ describe('Table', () => {
     expect(() => wrapper.unmount()).not.toThrow()
   })
 
-  it('should be possible to remove the row', () => {
-    const operation = (actions: TableCellActions) => {
-      return <button onClick={() => actions.remove()}>Remove</button>
+  it('should be render specified elements', async () => {
+    type Item = {
+      property: string
+      description: string
+      operation: string
     }
-    const data = [{ property: 'bold', description: 'boolean', operation }]
-    const wrapper = mount(
-      <Table data={data}>
-        <Table.Column prop="property" label="property" />
-        <Table.Column prop="description" label="description" />
-        <Table.Column prop="operation" label="operation" />
-      </Table>,
-    )
-    expect(wrapper.find('tbody').find('tr').length).toBe(1)
-    wrapper.find('tbody').find('button').simulate('click')
-    expect(wrapper.find('tbody').find('tr').length).toBe(0)
-    expect(() => wrapper.unmount()).not.toThrow()
-  })
-
-  it('should be possible to update the row', () => {
-    const operation = (actions: TableCellActions) => {
+    const renderAction: TableColumnRender<Item> = (value, rowData, index) => {
       return (
-        <button
-          onClick={() =>
-            actions.update({ property: 'test', description: 'test', operation })
-          }>
-          Update
-        </button>
+        <div>
+          <button id="test-btn">Remove</button>
+          <div id="value">{value}</div>
+          <div id="row-data">{rowData.description}</div>
+          <div id="row-index">{index}</div>
+        </div>
       )
     }
+    const operation = Math.random().toString(16).slice(-10)
     const data = [{ property: 'bold', description: 'boolean', operation }]
     const wrapper = mount(
-      <Table data={data}>
-        <Table.Column prop="property" label="property" />
-        <Table.Column prop="description" label="description" />
-        <Table.Column prop="operation" label="operation" />
+      <Table<Item> data={data}>
+        <Table.Column<Item> prop="property" label="property" />
+        <Table.Column<Item> prop="description" label="description" />
+        <Table.Column<Item> prop="operation" label="operation" render={renderAction} />
       </Table>,
     )
-    expect(wrapper.find('tbody').find('tr').length).toBe(1)
-    wrapper.find('tbody').find('button').simulate('click')
-    expect(wrapper.find('tbody').find('tr').find('td').first().text()).toContain('test')
-    expect(() => wrapper.unmount()).not.toThrow()
+    const buttons = wrapper.find('tbody').find('#test-btn')
+    expect(buttons.length).not.toEqual(0)
+    const value = wrapper.find('tbody').find('#value').html()
+    expect(value).toMatch(operation)
+    const rowData = wrapper.find('tbody').find('#row-data').html()
+    expect(rowData).toMatch(`${data[0].description}`)
+    const rowIndex = wrapper.find('tbody').find('#row-index').html()
+    expect(rowIndex).toMatch(`0`)
   })
 
   it('should render emptyText when data missing', () => {
-Original file line number
+Diff line change
@@ Expand Up @@
     const RatingComponent: React.FC<RatingProps> = ({
       type,
-      children,
       className,
       icon,
       count,
@@ Expand Down @@