@xqmsg/ui-core 0.10.0 → 0.12.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.10.0",
+  "version": "0.12.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -98,7 +98,6 @@
     "@hookform/resolvers": "^2.9.7",
     "axios": "^0.27.2",
     "framer-motion": "6.3.0",
-    "ip-regex": "^5.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-hook-form": "^7.34.0",

package/src/components/banner/index.tsx

@@ -11,6 +11,7 @@ import ErrorIcon from './assets/svg/error.svg';
 import PositiveIcon from './assets/svg/positive.svg';
 import NeutralIcon from './assets/svg/neutral.svg';
 import WarningIcon from './assets/svg/warning.svg';
+import colors from 'src/theme/foundations/colors';
 
 export type BannerVariant = 'positive' | 'warning' | 'error' | 'neutral';
 
@@ -52,7 +53,12 @@ export const Banner: React.FC<BannerProps> = ({
         {message}
         {onClick && buttonText && (
           <Flex pt="8px" justifyContent="flex-end">
-            <Button size="sm" bg="white" color="blue.500" onClick={onClick}>
+            <Button
+              size="sm"
+              bg="white"
+              color={colors.fill.action}
+              onClick={onClick}
+            >
               {buttonText}
             </Button>
           </Flex>

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

@@ -1,11 +1,17 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import { Button, ButtonProps } from '.';
+import { Flex } from '@chakra-ui/react';
 
 const meta: Meta<ButtonProps> = {
   title: 'Button example',
   component: Button,
   argTypes: {
+    width: {
+      control: null,
+      description:
+        '`variable` adopts 100% of the width of the parent component, whereas `fixed` fits the label content to the button',
+    },
     text: {
       control: {
         type: 'text',
@@ -24,23 +30,29 @@ const meta: Meta<ButtonProps> = {
       control: 'boolean',
       description: 'Disabled state of the button',
     },
-    size: {
-      control: 'select',
-      options: ['xs', 'sm', 'md', 'lg'],
-      description: 'The chakra based size prop for the button',
-    },
   },
   parameters: {
     controls: { expanded: true },
   },
 };
 export default meta;
-const Template: Story<ButtonProps> = args => <Button {...args} />;
+const Template: Story<ButtonProps> = args => (
+  <Flex flexDir="column" height="200px" justifyContent="space-between">
+    <Button {...args} text="Solid Fixed" variant="solid" width="fixed" />
+    <Button {...args} text="Outline Fixed" variant="outline" width="fixed" />
+    <Button {...args} text="Solid Variable" variant="solid" width="variable" />
+    <Button
+      {...args}
+      text="Outline Variable"
+      variant="outline"
+      width="variable"
+    />
+  </Flex>
+);
 
 export const Default = Template.bind({});
 Default.args = {
   onClick: () => alert('This is a button click!'),
-  text: 'Button',
   type: 'button',
   disabled: false,
 };

package/src/components/button/index.tsx

@@ -1,52 +1,40 @@
 import React from 'react';
-import {
-  Button as ChakraButton,
-  ButtonProps as ChakraButtonProps,
-} from '@chakra-ui/react';
+import { Button as ChakraButton } from '@chakra-ui/react';
 import buttonTheme from '../../theme/components/button';
 
 export interface ButtonProps {
   text: string;
   onClick?: () => void;
+  width: 'variable' | 'fixed';
   variant?: keyof typeof buttonTheme.variants;
-  colorScheme?: string;
-  type: 'button' | 'submit' | 'reset' | undefined;
+  type?: 'button' | 'submit' | 'reset';
   ariaLabel: string;
-  size?: 'sm' | 'md' | 'lg' | 'xs';
   disabled?: boolean;
   className?: string;
-  style?: React.CSSProperties;
-  width?: string | number;
 }
 
 /**
  * A functional React component utilized to render the `Button` component
  */
-export const Button: React.FC<ButtonProps & ChakraButtonProps> = ({
+export const Button: React.FC<ButtonProps> = ({
   onClick,
   text,
-  type,
+  type = 'button',
   ariaLabel,
   variant = 'solid',
-  colorScheme = 'primary',
-  style,
-  size = 'md',
   disabled,
   className,
-  ...props
+  width,
 }) => {
   return (
     <ChakraButton
       onClick={onClick}
       type={type}
       variant={variant}
-      colorScheme={colorScheme}
-      size={size}
       disabled={disabled}
       aria-label={ariaLabel}
-      style={style}
       className={className}
-      {...props}
+      width={width === 'variable' ? '100%' : 'fit-content'}
     >
       {text}
     </ChakraButton>

package/src/components/button/spinner/index.tsx

@@ -15,25 +15,20 @@ export const SpinnerButton: React.FC<SpinnerButtonProps> = ({
   onClick,
   type,
   ariaLabel,
-  style,
   variant = 'solid',
-  colorScheme = 'primary',
-  size = 'md',
+
   disabled,
   className,
 }) => {
   return (
     <Button
-      spinner={<Spinner size={size} />}
+      spinner={<Spinner size={'md'} />}
       isLoading={isLoading}
       onClick={onClick}
       type={type}
       variant={variant}
-      colorScheme={colorScheme}
-      size={size}
       disabled={disabled}
       aria-label={ariaLabel}
-      style={style}
       className={className}
     >
       {text}

package/src/components/input/Input.stories.tsx

@@ -5,9 +5,7 @@ import { Input, InputProps } from '.';
 import { useFormHandler } from '../form/hooks/useFormHandler';
 import * as Yup from 'yup';
 import { Form } from '../form';
-import ipRegex from 'ip-regex';
-import { useEffect, useMemo } from '@storybook/addons';
-import { Box } from '@chakra-ui/react';
+import { useMemo } from '@storybook/addons';
 
 const meta: Meta<InputProps<StoryFormSchema>> = {
   title: 'Input example',
@@ -20,17 +18,6 @@ const meta: Meta<InputProps<StoryFormSchema>> = {
       description: 'The label for the input',
     },
     inputType: {
-      control: 'select',
-      options: [
-        'text',
-        'textarea',
-        'radio',
-        'select',
-        'checkbox',
-        'multi-select',
-        'pilled-text',
-        'switch',
-      ],
       description: 'The type of the input',
     },
     options: {
@@ -71,51 +58,32 @@ const meta: Meta<InputProps<StoryFormSchema>> = {
 
 interface StoryFormSchema {
   prop?: string;
+  prop2?: string;
+  prop3?: string;
+  prop4?: string;
+  prop5?: string;
 }
 
 const onStubbedSubmit = () => null;
 
 const storyFormDefaultValues: StoryFormSchema = {
   prop: '',
+  prop2: '',
+  prop3: '',
+  prop4: '',
+  prop5: '',
 };
 
 const storyFormSchema: Yup.SchemaOf<StoryFormSchema> = Yup.object().shape({
-  prop: Yup.string().test(
-    'Valid IP',
-    'Please enter a valid IP address.',
-    (value, testContext) => {
-      if (value) {
-        const ipStringsToArray = value.split(',');
-        const isIPValidArray = ipStringsToArray.map((ip) => {
-          return ipRegex({ exact: true }).test(ip as string);
-        });
-
-        if (isIPValidArray && isIPValidArray.includes(false)) {
-          const malformedIPList = isIPValidArray
-            // eslint-disable-next-line
-            .map((testedIP, i) => {
-              if (testedIP === false) {
-                const malformedIP = ipStringsToArray[i];
-
-                return malformedIP.trim();
-              }
-            })
-            .filter((invalidIP) => invalidIP !== undefined);
-
-          const errorMessage = `Malformed IPs: ${malformedIPList.join(', ')}`;
-          return testContext.createError({
-            message:
-              errorMessage.length <= 45 ? errorMessage : `${errorMessage}...`,
-          });
-        }
-      }
-      return true;
-    }
-  ),
+  prop: Yup.string(),
+  prop2: Yup.string(),
+  prop3: Yup.string(),
+  prop4: Yup.string(),
+  prop5: Yup.string(),
 });
 
 export default meta;
-const Template: Story<InputProps<StoryFormSchema>> = (args) => {
+const Template: Story<InputProps<StoryFormSchema>> = args => {
   const formHandler = useFormHandler<StoryFormSchema>(
     onStubbedSubmit,
     storyFormDefaultValues,
@@ -126,19 +94,38 @@ const Template: Story<InputProps<StoryFormSchema>> = (args) => {
 
   const { form } = formHandler;
 
-  const valueErrorMessage = useMemo(() => {
-    if (form.formState.errors) return form.formState.errors.prop?.message;
-  }, [form.formState.errors]);
-
-  useEffect(() => {
-    form.resetField('prop');
-  }, [args.inputType, form]);
-
   return (
     <Form formHandler={formHandler}>
-      <Input {...args} setValue={form.setValue} errorText={valueErrorMessage} />
-      <Box mb={10}>Hi</Box> <Box mb={10}>there</Box> <Box mb={10}>Hi</Box>{' '}
-      <Box mb={10}>hey</Box> hello
+      <Input
+        {...args}
+        inputType="multi-select"
+        setValue={form.setValue}
+        name="prop5"
+      />
+      <Input
+        {...args}
+        inputType="select"
+        setValue={form.setValue}
+        name="prop4"
+      />
+      <Input
+        {...args}
+        inputType="text"
+        name="prop3"
+        onChange={e => form.setValue('prop3', e.target.value)}
+      />
+      <Input
+        {...args}
+        inputType="textarea"
+        name="prop2"
+        onChange={e => form.setValue('prop2', e.target.value)}
+      />
+      <Input
+        {...args}
+        name="prop"
+        inputType="pilled-text"
+        setValue={form.setValue}
+      />
     </Form>
   );
 };
@@ -147,7 +134,6 @@ export const Default = Template.bind({});
 Default.args = {
   label: 'Input Label',
   inputType: 'text',
-  name: 'prop',
   options: [
     { value: 'section_header', label: 'Section 1', sortValue: 0 },
     {

package/src/components/input/StackedMultiSelect/index.tsx

@@ -50,7 +50,7 @@ const StackedMultiSelect = React.forwardRef<
           .split(',')
           .filter(Boolean)
           .map((value: string) =>
-            options.find((option) => option.value === value)
+            options.find(option => option.value === value)
           )
       );
     }
@@ -66,16 +66,16 @@ const StackedMultiSelect = React.forwardRef<
       shouldDirty: true,
     });
 
-    setLocalOptions((prevLocalOptions) =>
-      prevLocalOptions.filter((prevLocalOption) => prevLocalOption !== option)
+    setLocalOptions(prevLocalOptions =>
+      prevLocalOptions.filter(prevLocalOption => prevLocalOption !== option)
     );
 
-    setLocalValues((prevLocalValues) => [...prevLocalValues, option]);
+    setLocalValues(prevLocalValues => [...prevLocalValues, option]);
   };
 
   const handleDelete = (option: FieldOption) => {
     const newValue = localValues
-      .filter((localValue) => localValue !== option)
+      .filter(localValue => localValue !== option)
       .map(({ value }) => value)
       .join(',');
 
@@ -84,12 +84,12 @@ const StackedMultiSelect = React.forwardRef<
       shouldDirty: true,
     });
 
-    setLocalOptions((prevLocalOptions) =>
+    setLocalOptions(prevLocalOptions =>
       [...prevLocalOptions, option].sort((a, b) => a.sortValue - b.sortValue)
     );
 
-    setLocalValues((prevLocalValues) =>
-      prevLocalValues.filter((prevLocalValue) => prevLocalValue !== option)
+    setLocalValues(prevLocalValues =>
+      prevLocalValues.filter(prevLocalValue => prevLocalValue !== option)
     );
   };
 
@@ -105,12 +105,12 @@ const StackedMultiSelect = React.forwardRef<
         alignItems="center"
         justifyContent="space-between"
         onClick={() => !disabled && setIsFocussed(true)}
-        bg={disabled ? colors.fill.light : '#ffffff'}
+        bg={disabled ? colors.fill.light.quaternary : '#ffffff'}
         cursor={disabled ? 'not-allowed' : 'pointer'}
       >
         <Flex height="28px" alignItems="center">
           {localValues.length ? (
-            localValues.map((option) => (
+            localValues.map(option => (
               <Box mr="4px">
                 <Token
                   label={option.label}
@@ -130,7 +130,7 @@ const StackedMultiSelect = React.forwardRef<
       </Flex>
       {isFocussed && (
         <Dropdown
-          onSelectItem={(option) => handleChange(option)}
+          onSelectItem={option => handleChange(option)}
           options={localOptions}
         />
       )}

package/src/components/input/StackedPilledInput/index.tsx

@@ -58,7 +58,7 @@ const StackedPilledInput = React.forwardRef<
         const filteredUniqueValues = Array.from(
           new Set(
             lastestFormValueToArray.filter(
-              (value) => value !== lastestFormValueToArray[tokenIndex]
+              value => value !== lastestFormValueToArray[tokenIndex]
             )
           )
         );
@@ -103,7 +103,7 @@ const StackedPilledInput = React.forwardRef<
         const filteredUniqueValues = Array.from(
           new Set(
             [...lastestFormValueToArray].filter(
-              (value) => value !== lastestFormValueToArray[tokenIndex]
+              value => value !== lastestFormValueToArray[tokenIndex]
             )
           )
         );
@@ -127,9 +127,7 @@ const StackedPilledInput = React.forwardRef<
           return setTokenIndex(lastestFormValueToArray.length - 1);
         }
 
-        return setTokenIndex(
-          (prevTokenIndex) => (prevTokenIndex as number) - 1
-        );
+        return setTokenIndex(prevTokenIndex => (prevTokenIndex as number) - 1);
       }
 
       if (e.key === 'ArrowRight') {
@@ -138,9 +136,7 @@ const StackedPilledInput = React.forwardRef<
         if (tokenIndex === lastestFormValueToArray.length - 1) {
           return setTokenIndex(null);
         }
-        return setTokenIndex(
-          (prevTokenIndex) => (prevTokenIndex as number) + 1
-        );
+        return setTokenIndex(prevTokenIndex => (prevTokenIndex as number) + 1);
       }
     }
   };
@@ -199,7 +195,7 @@ const StackedPilledInput = React.forwardRef<
             inputRef.current?.focus();
           }
         }}
-        bg={disabled ? colors.fill.light : '#ffffff'}
+        bg={disabled ? colors.fill.light.quaternary : '#ffffff'}
         cursor={disabled ? 'not-allowed' : 'pointer'}
         ref={inputWrapperRef}
       >
@@ -243,9 +239,7 @@ const StackedPilledInput = React.forwardRef<
             color={tokenIndex !== null ? 'transparent' : colors.label.primary}
             _focus={{ boxShadow: 'none !important' }}
             value={localValue}
-            onChange={(e) =>
-              tokenIndex === null && setLocalValue(e.target.value)
-            }
+            onChange={e => tokenIndex === null && setLocalValue(e.target.value)}
             ref={inputRef}
             onFocus={() => setIsFocussed(true)}
           />

package/src/components/input/components/dropdown/index.tsx

@@ -49,7 +49,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
             color={colors.label.primary.light}
             _hover={{
               color: colors.label.primary.dark,
-              bg: colors.fill.blue,
+              bg: colors.fill.action,
               borderRadius: '4px',
             }}
           >
@@ -62,7 +62,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
 
   return (
     <Box
-      bg={colors.fill.light}
+      bg={colors.fill.light.quaternary}
       backdropFilter="blur(64px)"
       borderRadius="4px"
       mt="3px"
@@ -72,6 +72,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
       py="4px"
       position="absolute"
       width="100%"
+      zIndex="100"
     >
       {DropdownContent}
     </Box>

package/src/components/input/index.tsx

@@ -54,7 +54,6 @@ export function Input<T extends FieldValues>({
   placeholder,
   name,
   helperText,
-
   options,
   isInvalid,
   errorText,

package/src/components/loading/index.tsx

@@ -29,7 +29,7 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
     >
       <Spinner
         size={size}
-        color={colors.blue[500]}
+        color={colors.fill.action}
         flex="none"
         thickness={thickness}
         speed={speed}

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

@@ -4,6 +4,7 @@ import { Text } from '../text';
 import { Table, TableProps } from '.';
 import { TableBody, TableHeaders } from './TableTypes';
 import { useArgs } from '@storybook/addons';
+import { TableText } from './components/text';
 
 const tableColumns = ['foo', 'bar'];
 
@@ -13,7 +14,10 @@ const tableHeaders: TableHeaders<typeof tableColumns> = {
 };
 
 const tableBody: TableBody<typeof tableColumns> = [
-  { foo: 'hi', bar: 'hey' },
+  {
+    foo: <TableText primaryText="hee" secondaryText="hi" />,
+    bar: 'hey',
+  },
   { foo: 'hi', bar: 'hey' },
   { foo: 'hi', bar: 'hey' },
 ];
@@ -68,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;
@@ -23,17 +23,20 @@ export const TableLoadingRows: React.FC<TableLoadingRowsProps> = ({
       justifyContent="center"
       alignItems="center"
       height={20}
-      borderTopColor={colors.gray[100]}
+      borderTopColor={colors.fill.light.quaternary}
     >
       {isLoading ? (
-        <Spinner size="lg" color={colors.blue[500]} />
+        <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="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.gray[100]}
+      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/components/tabs/index.tsx

@@ -22,7 +22,7 @@ export const TabsWrapper: React.FC<TabsWrapperProps> = ({
       <TabList
         flexDirection={{ base: 'column', sm: 'row' }}
         border="1px"
-        borderColor={colors.gray[100]}
+        borderColor={colors.fill.light.quaternary}
         bg="white"
         borderRadius="md"
         borderBottom={0}