From 37ea9665e6af1d6fe2e28d3733863d9a7b1884c4 Mon Sep 17 00:00:00 2001 From: Shlok Prajapati Date: Thu, 5 Oct 2023 18:43:14 +0530 Subject: [PATCH 1/4] Add new feature: Table Component --- src/packages/Table/index.tsx | 39 ++++++++++++++++++++++++++++++++++ src/packages/Table/stories.tsx | 28 ++++++++++++++++++++++++ src/packages/Table/style.ts | 23 ++++++++++++++++++++ 3 files changed, 90 insertions(+) create mode 100644 src/packages/Table/index.tsx create mode 100644 src/packages/Table/stories.tsx create mode 100644 src/packages/Table/style.ts diff --git a/src/packages/Table/index.tsx b/src/packages/Table/index.tsx new file mode 100644 index 0000000..82852e7 --- /dev/null +++ b/src/packages/Table/index.tsx @@ -0,0 +1,39 @@ +import React, { ReactNode } from 'react' +import * as S from './style' + +export interface TableColumn { + title: string + key: string +} + +export interface TableRow { + [key: string]: ReactNode +} + +export interface TableProps { + columns: TableColumn[] + data: TableRow[] +} + +const Table: React.FC = ({ columns, data }) => { + return ( + + + {columns.map((column) => ( + {column.title} + ))} + + + {data.map((row, index) => ( + + {columns.map((column) => ( + {row[column.key]} + ))} + + ))} + + + ) +} + +export default Table diff --git a/src/packages/Table/stories.tsx b/src/packages/Table/stories.tsx new file mode 100644 index 0000000..3c9a40e --- /dev/null +++ b/src/packages/Table/stories.tsx @@ -0,0 +1,28 @@ +import React from 'react' +import { StoryFn, Meta } from '@storybook/react' +import Table, { TableProps } from '.' + +export default { + title: 'Table', + component: Table +} as Meta + +const columns = [ + { title: 'Name', key: 'name' }, + { title: 'Age', key: 'age' }, + { title: 'Country', key: 'country' } +] + +const data = [ + { name: 'John', age: 30, country: 'USA' }, + { name: 'Alice', age: 25, country: 'Canada' }, + { name: 'Bob', age: 35, country: 'UK' } +] + +const Template: StoryFn = (args) => + +export const Default = Template.bind({}) +Default.args = { + columns, + data +} diff --git a/src/packages/Table/style.ts b/src/packages/Table/style.ts new file mode 100644 index 0000000..f6a8909 --- /dev/null +++ b/src/packages/Table/style.ts @@ -0,0 +1,23 @@ +import styled from 'styled-components' + +export const Table = styled.table` + width: 100%; + border-collapse: collapse; + border: 1px solid #ddd; +` + +export const TableHead = styled.thead` + background-color: #f2f2f2; +` + +export const TableHeaderCell = styled.th` + padding: 10px; + text-align: left; +` + +export const TableBody = styled.tbody`` + +export const TableCell = styled.td` + padding: 10px; + border: 1px solid #ddd; +` From 9700da9796483e54d7e445231af27729de1b2f69 Mon Sep 17 00:00:00 2001 From: Shlok Prajapati Date: Fri, 6 Oct 2023 22:32:14 +0530 Subject: [PATCH 2/4] Add new feature: Created Table Section --- src/packages/Table/style.ts | 30 +++++++++++++++++++++--------- src/packages/index.ts | 1 + 2 files changed, 22 insertions(+), 9 deletions(-) diff --git a/src/packages/Table/style.ts b/src/packages/Table/style.ts index f6a8909..d7efe6f 100644 --- a/src/packages/Table/style.ts +++ b/src/packages/Table/style.ts @@ -1,23 +1,35 @@ -import styled from 'styled-components' +import styled, { css, DefaultTheme } from 'styled-components' +import { TableProps } from '.' export const Table = styled.table` - width: 100%; - border-collapse: collapse; - border: 1px solid #ddd; + ${({ theme }) => css` + width: 100%; + border-collapse: collapse; + border-width: ${theme.border.xxsmall} + border-style: solid; + border-color: ${theme.colors.primary.light}; + `} ` export const TableHead = styled.thead` - background-color: #f2f2f2; + ${({ theme }) => css` + background-color: ${theme.colors.base.info}; + `} ` export const TableHeaderCell = styled.th` - padding: 10px; - text-align: left; + ${({ theme }) => css` + padding: ${theme.spacings.xxsmall}; + border: ${theme.border.mini} solid ${theme.colors.primary.dark}; + `} ` export const TableBody = styled.tbody`` export const TableCell = styled.td` - padding: 10px; - border: 1px solid #ddd; + ${({ theme }) => css` + padding: ${theme.spacings.xxsmall}; + border: ${theme.border.mini} solid ${theme.colors.primary.dark}; + text-align: center; + `} ` diff --git a/src/packages/index.ts b/src/packages/index.ts index 0ec7420..25f76c4 100644 --- a/src/packages/index.ts +++ b/src/packages/index.ts @@ -26,4 +26,5 @@ export { default as Alert } from './Alert' export { default as Breadcrumb } from './Breadcrumb' export { default as Skeleton } from './Skeleton' export { default as Switch } from './Switch' +export { default as Table } from './Table' // export { default as Pagination } from './Pagination' TODO: review pagination styles and logic From 0897e6c476ad3d496fc3a58df59c43b6c833d2e5 Mon Sep 17 00:00:00 2001 From: Shlok Prajapati Date: Fri, 6 Oct 2023 22:45:25 +0530 Subject: [PATCH 3/4] Added background color and completed linting --- src/packages/Table/style.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/packages/Table/style.ts b/src/packages/Table/style.ts index d7efe6f..6b3c45a 100644 --- a/src/packages/Table/style.ts +++ b/src/packages/Table/style.ts @@ -30,6 +30,7 @@ export const TableCell = styled.td` ${({ theme }) => css` padding: ${theme.spacings.xxsmall}; border: ${theme.border.mini} solid ${theme.colors.primary.dark}; + background-color: ${theme.colors.neutral.lighter}; text-align: center; `} ` From d90ae9dd48485711a2fecb08fd904461928ca99a Mon Sep 17 00:00:00 2001 From: Shlok Prajapati Date: Fri, 6 Oct 2023 22:47:29 +0530 Subject: [PATCH 4/4] Added unused variables --- src/packages/Table/style.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/packages/Table/style.ts b/src/packages/Table/style.ts index 6b3c45a..b13e9e9 100644 --- a/src/packages/Table/style.ts +++ b/src/packages/Table/style.ts @@ -1,5 +1,4 @@ -import styled, { css, DefaultTheme } from 'styled-components' -import { TableProps } from '.' +import styled, { css } from 'styled-components' export const Table = styled.table` ${({ theme }) => css`