@xqmsg/ui-core 0.23.1-rc.3 → 0.23.1

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

@@ -1,45 +1,45 @@
-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';
-
-interface TableLoadingRowsProps {
-  isLoading: boolean;
-  onLoadMore: () => void;
-}
-
-/**
- * A loading spinner rendered after the table to indicate more rows are being loaded.
- */
-export const TableLoadingRows: React.FC<TableLoadingRowsProps> = ({
-  isLoading,
-  onLoadMore,
-}) => {
-  return (
-    <Flex
-      width="full"
-      direction="column"
-      justifyContent="center"
-      alignItems="center"
-      height={20}
-      borderTopColor={colors.fill.light.quaternary}
-    >
-      {isLoading ? (
-        <Spinner size="lg" color={colors.fill.action} />
-      ) : (
-        <IconButton
-          aria-label="Fetch more rows"
-          icon={<HiOutlineRefresh />}
-          fontSize={typography.fontSizes['3xl']}
-          bg="transparent"
-          shadow="none"
-          color={colors.fill.action}
-          type="button"
-          variant="outline"
-          onClick={onLoadMore}
-        />
-      )}
-    </Flex>
-  );
-};
+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';
+
+interface TableLoadingRowsProps {
+  isLoading: boolean;
+  onLoadMore: () => void;
+}
+
+/**
+ * A loading spinner rendered after the table to indicate more rows are being loaded.
+ */
+export const TableLoadingRows: React.FC<TableLoadingRowsProps> = ({
+  isLoading,
+  onLoadMore,
+}) => {
+  return (
+    <Flex
+      width="full"
+      direction="column"
+      justifyContent="center"
+      alignItems="center"
+      height={20}
+      borderTopColor={colors.fill.light.quaternary}
+    >
+      {isLoading ? (
+        <Spinner size="lg" color={colors.fill.action} />
+      ) : (
+        <IconButton
+          aria-label="Fetch more rows"
+          icon={<HiOutlineRefresh />}
+          fontSize={typography.fontSizes['3xl']}
+          bg="transparent"
+          shadow="none"
+          color={colors.fill.action}
+          type="button"
+          variant="outline"
+          onClick={onLoadMore}
+        />
+      )}
+    </Flex>
+  );
+};

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

@@ -1,23 +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>
-  );
-};
+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/empty/index.tsx

@@ -1,47 +1,47 @@
-import React from 'react';
-import { Table as ChakraTable, Tbody, Td, Tr } from '@chakra-ui/react';
-
-/**
- * A React component utilized to render the `EmptyTable` component
- */
-export const EmptyTable: React.FC = () => {
-  const getOpacity = (index: number) => {
-    switch (index) {
-      case 1:
-        return 0.7;
-      case 3:
-        return 0.6;
-      case 5:
-        return 0.5;
-      case 7:
-        return 0.4;
-      case 9:
-        return 0.3;
-      case 11:
-        return 0.2;
-      case 13:
-        return 0.1;
-      default:
-        return 1;
-    }
-  };
-
-  return (
-    <ChakraTable
-      variant="unstyled"
-      width="100%"
-      style={{
-        borderCollapse: 'separate',
-        borderSpacing: '0px',
-      }}
-    >
-      <Tbody>
-        {Array.from({ length: 14 }, (_, i) => i + 1).map(i => (
-          <Tr key={i}>
-            <Td height="26px" opacity={getOpacity(i)}></Td>
-          </Tr>
-        ))}
-      </Tbody>
-    </ChakraTable>
-  );
-};
+import React from 'react';
+import { Table as ChakraTable, Tbody, Td, Tr } from '@chakra-ui/react';
+
+/**
+ * A React component utilized to render the `EmptyTable` component
+ */
+export const EmptyTable: React.FC = () => {
+  const getOpacity = (index: number) => {
+    switch (index) {
+      case 1:
+        return 0.7;
+      case 3:
+        return 0.6;
+      case 5:
+        return 0.5;
+      case 7:
+        return 0.4;
+      case 9:
+        return 0.3;
+      case 11:
+        return 0.2;
+      case 13:
+        return 0.1;
+      default:
+        return 1;
+    }
+  };
+
+  return (
+    <ChakraTable
+      variant="unstyled"
+      width="100%"
+      style={{
+        borderCollapse: 'separate',
+        borderSpacing: '0px',
+      }}
+    >
+      <Tbody>
+        {Array.from({ length: 14 }, (_, i) => i + 1).map(i => (
+          <Tr key={i}>
+            <Td height="26px" opacity={getOpacity(i)}></Td>
+          </Tr>
+        ))}
+      </Tbody>
+    </ChakraTable>
+  );
+};

package/src/components/table/index.tsx

@@ -1,84 +1,84 @@
-import React from 'react';
-import {
-  ReadonlyTableColumns,
-  TableBody,
-  TableColumns,
-  TableHeaders,
-} from './TableTypes';
-import { generateTableColumnsAsConst } from './utils/generateTableColumns';
-
-import {
-  Table as ChakraTable,
-  TableContainer,
-  Tbody,
-  Td,
-  Th,
-  Thead,
-  Tr,
-} from '@chakra-ui/react';
-import { TableLoadingRows } from './components/loading';
-import colors from '../../theme/foundations/colors';
-import { EmptyTable } from './empty';
-
-export interface TableProps<T extends ReadonlyTableColumns> {
-  columns: TableColumns;
-  headers?: TableHeaders<T>;
-  body: TableBody<T>;
-  loading?: boolean;
-  loadMore?: () => void;
-  placeholder?: string;
-}
-
-/**
- * A React component utilized to render the `Table` component
- */
-export function Table<T extends ReadonlyTableColumns>({
-  columns,
-  headers,
-  body,
-  loading,
-  loadMore,
-}: TableProps<T>) {
-  const columnsAsConst = generateTableColumnsAsConst(columns);
-
-  return (
-    <TableContainer border="none" overflowX="auto" bg="white" width="100%">
-      {body.length ? (
-        <ChakraTable
-          variant="unstyled"
-          width="100%"
-          style={{
-            borderCollapse: 'separate',
-            borderSpacing: '0px',
-          }}
-        >
-          {headers && (
-            <Thead>
-              <Tr _odd={{ bg: colors.label.primary.dark }}>
-                {columnsAsConst.map((column, idx) => (
-                  // @ts-ignore
-                  <Th key={idx}>{headers[column]}</Th>
-                ))}
-              </Tr>
-            </Thead>
-          )}
-          <Tbody>
-            {body.map((row, idx) => (
-              <Tr key={idx}>
-                {columnsAsConst.map((column, idx) => (
-                  // @ts-ignore
-                  <Td key={idx}>{row[column]}</Td>
-                ))}
-              </Tr>
-            ))}
-          </Tbody>
-        </ChakraTable>
-      ) : (
-        <EmptyTable />
-      )}
-      {loadMore && loading !== undefined && body.length ? (
-        <TableLoadingRows isLoading={loading} onLoadMore={loadMore} />
-      ) : null}
-    </TableContainer>
-  );
-}
+import React from 'react';
+import {
+  ReadonlyTableColumns,
+  TableBody,
+  TableColumns,
+  TableHeaders,
+} from './TableTypes';
+import { generateTableColumnsAsConst } from './utils/generateTableColumns';
+
+import {
+  Table as ChakraTable,
+  TableContainer,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+} from '@chakra-ui/react';
+import { TableLoadingRows } from './components/loading';
+import colors from '../../theme/foundations/colors';
+import { EmptyTable } from './empty';
+
+export interface TableProps<T extends ReadonlyTableColumns> {
+  columns: TableColumns;
+  headers?: TableHeaders<T>;
+  body: TableBody<T>;
+  loading?: boolean;
+  loadMore?: () => void;
+  placeholder?: string;
+}
+
+/**
+ * A React component utilized to render the `Table` component
+ */
+export function Table<T extends ReadonlyTableColumns>({
+  columns,
+  headers,
+  body,
+  loading,
+  loadMore,
+}: TableProps<T>) {
+  const columnsAsConst = generateTableColumnsAsConst(columns);
+
+  return (
+    <TableContainer border="none" overflowX="auto" bg="white" width="100%">
+      {body.length ? (
+        <ChakraTable
+          variant="unstyled"
+          width="100%"
+          style={{
+            borderCollapse: 'separate',
+            borderSpacing: '0px',
+          }}
+        >
+          {headers && (
+            <Thead>
+              <Tr _odd={{ bg: colors.label.primary.dark }}>
+                {columnsAsConst.map((column, idx) => (
+                  // @ts-ignore
+                  <Th key={idx}>{headers[column]}</Th>
+                ))}
+              </Tr>
+            </Thead>
+          )}
+          <Tbody>
+            {body.map((row, idx) => (
+              <Tr key={idx}>
+                {columnsAsConst.map((column, idx) => (
+                  // @ts-ignore
+                  <Td key={idx}>{row[column]}</Td>
+                ))}
+              </Tr>
+            ))}
+          </Tbody>
+        </ChakraTable>
+      ) : (
+        <EmptyTable />
+      )}
+      {loadMore && loading !== undefined && body.length ? (
+        <TableLoadingRows isLoading={loading} onLoadMore={loadMore} />
+      ) : null}
+    </TableContainer>
+  );
+}

package/src/components/table/utils/generateTableColumns.ts

@@ -1,9 +1,9 @@
-import { TableColumns } from '../TableTypes';
-
-/**
- * This function is responsible for returning an array as a const, so the generic type `TableBody`
- * may accept it as an argument and use the elements of the array as keys.
- */
-export function generateTableColumnsAsConst<T extends TableColumns>(arr: T) {
-  return [...arr] as const;
-}
+import { TableColumns } from '../TableTypes';
+
+/**
+ * This function is responsible for returning an array as a const, so the generic type `TableBody`
+ * may accept it as an argument and use the elements of the array as keys.
+ */
+export function generateTableColumnsAsConst<T extends TableColumns>(arr: T) {
+  return [...arr] as const;
+}

package/src/components/tabs/TabsWrapper.stories.tsx

@@ -1,85 +1,85 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { Text } from '../text';
-import { Table, TableProps } from '../table';
-import { TableBody, TableHeaders } from '../table/TableTypes';
-import { useMemo, useState } from '@storybook/addons';
-import { TabsWrapper, TabsWrapperProps } from '.';
-
-const tableColumns = ['foo', 'bar'];
-
-const tableHeaders: TableHeaders<typeof tableColumns> = {
-  foo: <Text variant="header">FOO</Text>,
-  bar: <Text variant="header">BAR</Text>,
-};
-
-const tableBody: TableBody<typeof tableColumns> = [
-  { foo: 'hi', bar: 'hey' },
-  { foo: 'hello', bar: 'howdy' },
-  { foo: 'hiya', bar: 'hola' },
-];
-
-const meta: Meta<TabsWrapperProps> = {
-  title: 'Table Nav example',
-  component: TabsWrapper,
-  argTypes: {
-    navIndex: {
-      control: 'none',
-      description: 'The index of the tab - 0th indexed starting on the left',
-    },
-    setNavIndex: {
-      description: 'The handler for setting the index of the tab list',
-    },
-    navItems: {
-      control: 'none',
-      description:
-        'The list of nav items to be displayed as tabs in the tab list',
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-
-enum Foo {
-  ALL = 0,
-  GREATER_THAN_THREE = 1,
-  LESS_THAN_THREE = 2,
-}
-
-export default meta;
-const Template: Story<TableProps<typeof tableColumns>> = args => {
-  const [index, setIndex] = useState(Foo.ALL);
-
-  const body = useMemo(() => {
-    if (index === Foo.GREATER_THAN_THREE) {
-      return tableBody.filter(item => (item.foo as string).length > 3);
-    }
-
-    if (index === Foo.LESS_THAN_THREE) {
-      return tableBody.filter(item => (item.foo as string).length < 3);
-    }
-
-    return tableBody;
-  }, [index]);
-
-  return (
-    <TabsWrapper
-      navItems={['All', 'Foo > 3', 'Foo < 3']}
-      navIndex={index}
-      setNavIndex={(index: number) => setIndex(index)}
-    >
-      <Table
-        {...args}
-        body={body}
-        borderTopRadius={false}
-        headers={tableHeaders}
-        columns={tableColumns}
-      />
-    </TabsWrapper>
-  );
-};
-
-export const Default = Template.bind({});
-
-Default.args = {};
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { Text } from '../text';
+import { Table, TableProps } from '../table';
+import { TableBody, TableHeaders } from '../table/TableTypes';
+import { useMemo, useState } from '@storybook/addons';
+import { TabsWrapper, TabsWrapperProps } from '.';
+
+const tableColumns = ['foo', 'bar'];
+
+const tableHeaders: TableHeaders<typeof tableColumns> = {
+  foo: <Text variant="header">FOO</Text>,
+  bar: <Text variant="header">BAR</Text>,
+};
+
+const tableBody: TableBody<typeof tableColumns> = [
+  { foo: 'hi', bar: 'hey' },
+  { foo: 'hello', bar: 'howdy' },
+  { foo: 'hiya', bar: 'hola' },
+];
+
+const meta: Meta<TabsWrapperProps> = {
+  title: 'Table Nav example',
+  component: TabsWrapper,
+  argTypes: {
+    navIndex: {
+      control: 'none',
+      description: 'The index of the tab - 0th indexed starting on the left',
+    },
+    setNavIndex: {
+      description: 'The handler for setting the index of the tab list',
+    },
+    navItems: {
+      control: 'none',
+      description:
+        'The list of nav items to be displayed as tabs in the tab list',
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+
+enum Foo {
+  ALL = 0,
+  GREATER_THAN_THREE = 1,
+  LESS_THAN_THREE = 2,
+}
+
+export default meta;
+const Template: Story<TableProps<typeof tableColumns>> = args => {
+  const [index, setIndex] = useState(Foo.ALL);
+
+  const body = useMemo(() => {
+    if (index === Foo.GREATER_THAN_THREE) {
+      return tableBody.filter(item => (item.foo as string).length > 3);
+    }
+
+    if (index === Foo.LESS_THAN_THREE) {
+      return tableBody.filter(item => (item.foo as string).length < 3);
+    }
+
+    return tableBody;
+  }, [index]);
+
+  return (
+    <TabsWrapper
+      navItems={['All', 'Foo > 3', 'Foo < 3']}
+      navIndex={index}
+      setNavIndex={(index: number) => setIndex(index)}
+    >
+      <Table
+        {...args}
+        body={body}
+        borderTopRadius={false}
+        headers={tableHeaders}
+        columns={tableColumns}
+      />
+    </TabsWrapper>
+  );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {};

package/src/components/tabs/index.tsx

@@ -1,39 +1,39 @@
-import React, { PropsWithChildren, ReactNode } from 'react';
-import { Tab, TabList, Tabs } from '@chakra-ui/react';
-import colors from '../../theme/foundations/colors';
-
-export interface TabsWrapperProps extends PropsWithChildren {
-  navIndex: number;
-  setNavIndex: (index: number) => void;
-  navItems: ReactNode[];
-}
-
-/**
- * A functional React component utilized to render the `TableNavWrapper` component
- */
-export const TabsWrapper: React.FC<TabsWrapperProps> = ({
-  children,
-  navItems,
-  navIndex,
-  setNavIndex,
-}) => {
-  return (
-    <Tabs size="lg" variant="simple" index={navIndex} onChange={setNavIndex}>
-      <TabList
-        flexDirection={{ base: 'column', sm: 'row' }}
-        border="1px"
-        borderColor={colors.fill.light.quaternary}
-        bg="white"
-        borderRadius="md"
-        borderBottom={0}
-        borderBottomLeftRadius={0}
-        borderBottomRightRadius={0}
-      >
-        {navItems.map((navItem, idx) => (
-          <Tab key={idx}>{navItem}</Tab>
-        ))}
-      </TabList>
-      {children}
-    </Tabs>
-  );
-};
+import React, { PropsWithChildren, ReactNode } from 'react';
+import { Tab, TabList, Tabs } from '@chakra-ui/react';
+import colors from '../../theme/foundations/colors';
+
+export interface TabsWrapperProps extends PropsWithChildren {
+  navIndex: number;
+  setNavIndex: (index: number) => void;
+  navItems: ReactNode[];
+}
+
+/**
+ * A functional React component utilized to render the `TableNavWrapper` component
+ */
+export const TabsWrapper: React.FC<TabsWrapperProps> = ({
+  children,
+  navItems,
+  navIndex,
+  setNavIndex,
+}) => {
+  return (
+    <Tabs size="lg" variant="simple" index={navIndex} onChange={setNavIndex}>
+      <TabList
+        flexDirection={{ base: 'column', sm: 'row' }}
+        border="1px"
+        borderColor={colors.fill.light.quaternary}
+        bg="white"
+        borderRadius="md"
+        borderBottom={0}
+        borderBottomLeftRadius={0}
+        borderBottomRightRadius={0}
+      >
+        {navItems.map((navItem, idx) => (
+          <Tab key={idx}>{navItem}</Tab>
+        ))}
+      </TabList>
+      {children}
+    </Tabs>
+  );
+};