@xqmsg/ui-core 0.11.0 → 0.12.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.11.0",
+  "version": "0.12.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/button/Button.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import { Button, ButtonProps } from '.';
-import { Box, Flex } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 
 const meta: Meta<ButtonProps> = {
   title: 'Button example',

package/src/components/table/Table.stories.tsx

@@ -4,7 +4,7 @@ import { Text } from '../text';
 import { Table, TableProps } from '.';
 import { TableBody, TableHeaders } from './TableTypes';
 import { useArgs } from '@storybook/addons';
-import { Box } from '@chakra-ui/react';
+import { TableText } from './components/text';
 
 const tableColumns = ['foo', 'bar'];
 
@@ -15,11 +15,7 @@ const tableHeaders: TableHeaders<typeof tableColumns> = {
 
 const tableBody: TableBody<typeof tableColumns> = [
   {
-    foo: (
-      <Box>
-        hi <Box>hi</Box>
-      </Box>
-    ),
+    foo: <TableText primaryText="hee" secondaryText="hi" />,
     bar: 'hey',
   },
   { foo: 'hi', bar: 'hey' },
@@ -76,6 +72,4 @@ Default.args = {
   headers: tableHeaders,
   columns: tableColumns,
   loading: false,
-  variant: 'simple',
-  colorScheme: 'messenger',
 };

package/src/components/table/TableTypes.ts

@@ -13,23 +13,3 @@ export type TableRow<K extends ReadonlyTableColumns> = {
 };
 
 export type TableBody<R extends ReadonlyTableColumns> = TableRow<R>[];
-
-export type TableColorScheme =
-  | 'blue'
-  | 'cyan'
-  | 'gray'
-  | 'green'
-  | 'orange'
-  | 'pink'
-  | 'purple'
-  | 'red'
-  | 'teal'
-  | 'yellow'
-  | 'whiteAlpha'
-  | 'blackAlpha'
-  | 'linkedin'
-  | 'facebook'
-  | 'messenger'
-  | 'whatsapp'
-  | 'twitter'
-  | 'telegram';

package/src/components/table/{loading → components/loading}/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Flex, IconButton, Spinner } from '@chakra-ui/react';
 import { HiOutlineRefresh } from 'react-icons/hi';
-import colors from '../../../theme/foundations/colors';
-import typography from '../../../theme/foundations/typography';
+import colors from '../../../../theme/foundations/colors';
+import typography from '../../../../theme/foundations/typography';
 
 interface TableLoadingRowsProps {
   isLoading: boolean;
@@ -32,8 +32,11 @@ export const TableLoadingRows: React.FC<TableLoadingRowsProps> = ({
           aria-label="Fetch more rows"
           icon={<HiOutlineRefresh />}
           fontSize={typography.fontSizes['3xl']}
+          bg="transparent"
+          shadow="none"
+          color={colors.fill.action}
           type="button"
-          variant="link"
+          variant="outline"
           onClick={onLoadMore}
         />
       )}

package/src/components/table/components/text/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Box, Text } from '@chakra-ui/react';
+import colors from 'src/theme/foundations/colors';
+
+export interface TableTextProps {
+  primaryText: string;
+  secondaryText?: string;
+}
+
+/**
+ * A functional React component utilized to render the `TableText` component
+ */
+export const TableText: React.FC<TableTextProps> = ({
+  primaryText,
+  secondaryText,
+}) => {
+  return (
+    <Box>
+      <Text color={colors.label.primary.light}>{primaryText}</Text>
+      <Text color={colors.label.secondary.light}>{secondaryText}</Text>
+    </Box>
+  );
+};

package/src/components/table/index.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import {
   ReadonlyTableColumns,
   TableBody,
-  TableColorScheme,
   TableColumns,
   TableHeaders,
 } from './TableTypes';
@@ -18,16 +17,13 @@ import {
   Thead,
   Tr,
 } from '@chakra-ui/react';
-import { TableLoadingRows } from './loading';
-import colors from '../../theme/foundations/colors';
+import { TableLoadingRows } from './components/loading';
 
 export interface TableProps<T extends ReadonlyTableColumns> {
   columns: TableColumns;
   headers: TableHeaders<T>;
   body: TableBody<T>;
   loading?: boolean;
-  variant: 'simple' | 'striped' | 'unstyled';
-  colorScheme?: TableColorScheme;
   borderTopRadius?: boolean;
   loadMore?: () => void;
   placeholder?: string;
@@ -42,8 +38,7 @@ export function Table<T extends ReadonlyTableColumns>({
   body,
   placeholder = 'There is currently no available data',
   loading,
-  variant = 'simple',
-  colorScheme,
+
   borderTopRadius = true,
   loadMore,
 }: TableProps<T>) {
@@ -51,15 +46,14 @@ export function Table<T extends ReadonlyTableColumns>({
 
   return (
     <TableContainer
-      border="1px"
-      borderColor={colors.fill.light.quaternary}
+      border="none"
       overflowX="auto"
       bg="white"
       borderRadius="md"
       borderTopLeftRadius={borderTopRadius ? 'md' : 0}
       borderTopRightRadius={borderTopRadius ? 'md' : 0}
     >
-      <ChakraTable variant={variant} colorScheme={colorScheme}>
+      <ChakraTable variant="unstyled">
         <Thead>
           <Tr>
             {columnsAsConst.map(column => (

package/src/theme/components/table.ts

@@ -0,0 +1,34 @@
+import colors from '../foundations/colors';
+
+const parts = ['th', 'td', 'tr', 'body'];
+
+const baseStyle = {
+  th: {
+    height: 'fit-content',
+    width: '100%',
+    bg: colors.label.primary.dark,
+    padding: '5px 8px !important',
+  },
+  tr: {
+    fontSize: '13px',
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+
+    height: 'fit-content',
+    borderRadius: 'md',
+    _odd: {
+      background: colors.fill.light.tertiary,
+    },
+  },
+  td: {
+    padding: '5px 8px !important',
+    borderRadius: 'md',
+    width: '100%',
+  },
+};
+
+export default {
+  parts,
+  baseStyle,
+};

package/src/theme/customXQChakraTheme.ts

@@ -15,6 +15,7 @@ import Link from './components/link';
 import Modal from './components/modal';
 import Select from './components/select';
 import Switch from './components/switch';
+import Table from './components/table';
 import Tabs from './components/tabs';
 import Textarea from './components/textarea';
 import Text from './components/text';
@@ -38,6 +39,7 @@ const customXQChakraTheme = extendTheme({
     Modal,
     Select,
     Switch,
+    Table,
     Tabs,
     Textarea,
     Text,