@xqmsg/ui-core 0.12.0 → 0.14.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.12.0",
+  "version": "0.14.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -25,9 +25,6 @@
     "release:minor": "changelog -m && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version minor && git push origin && git push origin --tags",
     "release:patch": "changelog -p && git add CHANGELOG.md && git commit -m 'updated CHANGELOG.md' && npm version patch && git push origin && git push origin --tags"
   },
-  "peerDependencies": {
-    "react": ">=16"
-  },
   "husky": {
     "hooks": {
       "pre-commit": "tsdx lint"
@@ -56,6 +53,8 @@
     "@babel/core": "^7.18.13",
     "@babel/preset-env": "^7.19.0",
     "@babel/preset-react": "^7.18.6",
+    "@rollup/plugin-image": "^3.0.1",
+    "@rollup/plugin-url": "^8.0.1",
     "@size-limit/preset-small-lib": "^8.0.1",
     "@storybook/addon-essentials": "^6.5.10",
     "@storybook/addon-info": "^5.3.21",
@@ -64,6 +63,7 @@
     "@storybook/builder-webpack5": "^6.5.10",
     "@storybook/manager-webpack5": "^6.5.10",
     "@storybook/react": "^6.5.10",
+    "@svgr/rollup": "^6.5.1",
     "@svgr/webpack": "^6.3.1",
     "@types/react": "^18.0.18",
     "@types/react-dom": "^18.0.6",
@@ -71,15 +71,18 @@
     "@typescript-eslint/parser": "^5.36.2",
     "babel-loader": "8.1.0",
     "babel-preset-react-app": "^9.1.2",
+    "generate-changelog": "^1.8.0",
     "husky": "^8.0.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "rollup-plugin-cjs-es": "^1.1.0",
+    "rollup-plugin-image-files": "^1.4.2",
     "rollup-plugin-svg": "^2.0.0",
     "size-limit": "^8.0.1",
     "tsconfig-paths-webpack-plugin": "^4.0.0",
     "tsdx": "^0.14.1",
     "tslib": "^2.4.0",
     "typescript": "^4.8.2",
-    "generate-changelog": "^1.8.0",
     "yalc": "^1.0.0-pre.53"
   },
   "dependencies": {
@@ -98,8 +101,6 @@
     "@hookform/resolvers": "^2.9.7",
     "axios": "^0.27.2",
     "framer-motion": "6.3.0",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
     "react-hook-form": "^7.34.0",
     "react-icons": "^4.4.0",
     "react-is": "^18.2.0",

package/src/components/banner/index.tsx

@@ -11,7 +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';
+import colors from '../../../src/theme/foundations/colors';
 
 export type BannerVariant = 'positive' | 'warning' | 'error' | 'neutral';
 

package/src/components/form/Form.stories.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import * as Yup from 'yup';
 
-import { useFormHandler } from 'src/components/form/hooks/useFormHandler';
-import { Form, FormProps } from 'src/components/form';
-import { FormSection } from 'src/components/form/section';
-import { formSectionStoryArgs } from 'src/components/form/section/FormSection.stories';
+import { useFormHandler } from '../../../src/components/form/hooks/useFormHandler';
+import { Form, FormProps } from '../../../src/components/form';
+import { FormSection } from '../../../src/components/form/section';
+import { formSectionStoryArgs } from '../../../src/components/form/section/FormSection.stories';
 import { FormStructure } from './FormTypes';
 
 const meta: Meta<FormProps<StoryFormSchema>> = {

package/src/components/form/hooks/useFormHandler.tsx

@@ -12,8 +12,8 @@ import * as Yup from 'yup';
 import {
   ErrorResponse,
   formatErrorResponse,
-} from 'src/components/form/utils/formErrors';
-import useDeepEffect from 'src/hooks/useDeepEffect';
+} from '../../../../src/components/form/utils/formErrors';
+import useDeepEffect from '../../../../src/hooks/useDeepEffect';
 
 // Default Yup error message for required fields
 Yup.setLocale({

package/src/components/form/section/FormSection.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Meta, Story } from '@storybook/react';
 import * as Yup from 'yup';
 
-import { useFormHandler } from 'src/components/form/hooks/useFormHandler';
+import { useFormHandler } from '../../../../src/components/form/hooks/useFormHandler';
 
 import { FormSection, FormSectionProps } from '.';
 import { FormStructure } from '../FormTypes';

package/src/components/form/section/index.tsx

@@ -1,6 +1,6 @@
 import { SimpleGrid } from '@chakra-ui/react';
 import React from 'react';
-import { Control, FieldValues, UseFormReturn } from 'react-hook-form';
+import { FieldValues, UseFormReturn } from 'react-hook-form';
 import { Input } from '../../input';
 import { FormInput, FormStructure } from '../FormTypes';
 
@@ -61,8 +61,8 @@ export function FormSection<
           disabled,
           defaultValue,
         }: FormInput) => (
-          <Input
-            control={form.control as Control<FieldValues, any>}
+          <Input<U>
+            control={form.control}
             label={label}
             inputType={inputType}
             name={name}
@@ -73,6 +73,7 @@ export function FormSection<
             maxLength={maxLength}
             isInvalid={!!form.formState.errors[name]}
             defaultValue={defaultValue}
+            setValue={form.setValue}
           />
         )
       )}

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

@@ -5,7 +5,6 @@ import { Input, InputProps } from '.';
 import { useFormHandler } from '../form/hooks/useFormHandler';
 import * as Yup from 'yup';
 import { Form } from '../form';
-import { useMemo } from '@storybook/addons';
 
 const meta: Meta<InputProps<StoryFormSchema>> = {
   title: 'Input example',
@@ -62,6 +61,7 @@ interface StoryFormSchema {
   prop3?: string;
   prop4?: string;
   prop5?: string;
+  prop6?: boolean;
 }
 
 const onStubbedSubmit = () => null;
@@ -72,6 +72,7 @@ const storyFormDefaultValues: StoryFormSchema = {
   prop3: '',
   prop4: '',
   prop5: '',
+  prop6: true,
 };
 
 const storyFormSchema: Yup.SchemaOf<StoryFormSchema> = Yup.object().shape({
@@ -80,6 +81,7 @@ const storyFormSchema: Yup.SchemaOf<StoryFormSchema> = Yup.object().shape({
   prop3: Yup.string(),
   prop4: Yup.string(),
   prop5: Yup.string(),
+  prop6: Yup.boolean(),
 });
 
 export default meta;
@@ -126,6 +128,12 @@ const Template: Story<InputProps<StoryFormSchema>> = args => {
         inputType="pilled-text"
         setValue={form.setValue}
       />
+      <Input
+        {...args}
+        name="prop6"
+        inputType="switch"
+        setValue={form.setValue}
+      />
     </Form>
   );
 };

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

@@ -199,7 +199,16 @@ const StackedPilledInput = React.forwardRef<
         cursor={disabled ? 'not-allowed' : 'pointer'}
         ref={inputWrapperRef}
       >
-        <Flex height="28px" alignItems="center" width="fit-content">
+        <Flex
+          height="28px"
+          alignItems="center"
+          // width="fit-content"
+          // maxW="70%"
+          overflowX="auto"
+          style={{
+            scrollbarWidth: 'none' /* Firefox */,
+          }}
+        >
           {lastestFormValueToArray.length ? (
             lastestFormValueToArray.map((label, index) => (
               <Box
@@ -211,6 +220,8 @@ const StackedPilledInput = React.forwardRef<
                 }
                 borderRadius="full"
                 onClick={() => setTokenIndex(index)}
+                // width="fit-content"
+                width="100%"
               >
                 <Token
                   label={label}

package/src/components/input/StackedSelect/StackedSelect.tsx

@@ -9,7 +9,7 @@ import {
 } from '@chakra-ui/react';
 import { FieldOptions } from '../InputTypes';
 import { StackedInputProps } from '../StackedInput/StackedInput';
-import colors from 'src/theme/foundations/colors';
+import colors from '../../../../src/theme/foundations/colors';
 import { UseFormSetValue, FieldValues, Control } from 'react-hook-form';
 import SubtractIcon from './assets/svg/subtract.svg';
 import { Dropdown } from '../components/dropdown';
@@ -18,16 +18,30 @@ export interface StackedSelectProps extends StackedInputProps {
   options: FieldOptions;
   setValue: UseFormSetValue<FieldValues>;
   control: Control<FieldValues, any>;
+  handleOnChange: (value?: string) => void;
 }
 
 /**
  * A functional React component utilized to render the `StackedSelect` component.
  */
 const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
-  ({ isRequired, options, name, setValue, onChange, ...props }, _ref) => {
+  (
+    {
+      isRequired,
+      options,
+      name,
+      setValue,
+      handleOnChange,
+      defaultValue,
+      ...props
+    },
+    _ref
+  ) => {
     const dropdownRef = useRef(null);
     const [isFocussed, setIsFocussed] = useState(false);
-    const [selectedOption, setSelectedOption] = useState('');
+    const [selectedOption, setSelectedOption] = useState(
+      options.find(option => option.value === defaultValue)?.label ?? ''
+    );
 
     useOutsideClick({ ref: dropdownRef, handler: () => setIsFocussed(false) });
 
@@ -36,6 +50,9 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
       value: string;
       sortValue: number;
     }) => {
+      if (handleOnChange) {
+        handleOnChange(option.value);
+      }
       setValue(name as string, option.value);
       setSelectedOption(option.label);
       setIsFocussed(false);
@@ -64,7 +81,7 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
         </InputGroup>
         {isFocussed && (
           <Dropdown
-            onSelectItem={(option) => handleOnSelectItem(option)}
+            onSelectItem={option => handleOnSelectItem(option)}
             options={options}
           />
         )}

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

@@ -8,8 +8,6 @@ export interface StackedSwitchProps extends SwitchProps {}
  */
 const StackedSwitch = React.forwardRef<HTMLInputElement, StackedSwitchProps>(
   ({ isRequired, onChange, value }, _ref) => {
-    if (value === undefined) return null;
-
     return (
       <Switch
         size="lg"

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

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import { Box } from '@chakra-ui/react';
-import colors from 'src/theme/foundations/colors';
+import colors from '../../../../../src/theme/foundations/colors';
 import { FieldOption, FieldOptions } from '../../InputTypes';
 
 export interface DropdownProps {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, FormLabel } from '@chakra-ui/react';
-import colors from 'src/theme/foundations/colors';
+import colors from '../../../../../src/theme/foundations/colors';
 
 export interface LabelProps {
   label: string;

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

@@ -1,6 +1,6 @@
 import { Flex, Image, Text } from '@chakra-ui/react';
 import React from 'react';
-import colors from 'src/theme/foundations/colors';
+import colors from '../../../../../src/theme/foundations/colors';
 import CloseIcon from './assets/svg/close.svg';
 
 export interface TokenProps {
@@ -15,7 +15,7 @@ const Token: React.FC<TokenProps> = ({ label, onDelete }) => {
       borderRadius="full"
       backgroundColor="#7676801F"
       alignItems="center"
-      width="fit-content"
+      // width="100%"
       pl="8px"
       pr="4px"
       py="2px"

package/src/components/input/index.tsx

@@ -35,11 +35,10 @@ export interface InputProps<T extends FieldValues> extends ValidationProps {
   options?: FieldOptions;
   maxLength?: number;
   helperText?: React.ReactNode;
-
-  control?: Control<T, any>;
-  onChange?: (args?: any) => void;
+  control: Control<T, any>;
+  onChange?: (value?: string) => void;
   disabled?: boolean;
-  setValue?: UseFormSetValue<T>;
+  setValue: UseFormSetValue<T>;
 }
 
 /**
@@ -97,7 +96,6 @@ export function Input<T extends FieldValues>({
               className={`input-${inputType} ${className ?? ''}`}
               name={name}
               id={name}
-              isRequired={isRequired}
               isInvalid={isInvalid}
               options={options as FieldOptions}
               onChange={onChange}
@@ -116,13 +114,14 @@ export function Input<T extends FieldValues>({
               isRequired={isRequired}
               isInvalid={isInvalid}
               options={options as FieldOptions}
-              onChange={onChange}
+              handleOnChange={onChange}
               onBlur={onBlur}
               setValue={setValue as UseFormSetValue<FieldValues>}
               control={control as Control<FieldValues, any>}
               ref={ref}
               disabled={disabled}
               value={value}
+              defaultValue={defaultValue}
               placeholder={placeholder}
             />
           );
@@ -133,7 +132,6 @@ export function Input<T extends FieldValues>({
               name={name}
               id={name}
               maxLength={maxLength}
-              isRequired={isRequired}
               isInvalid={isInvalid}
               onChange={onChange}
               onBlur={onBlur}
@@ -148,7 +146,6 @@ export function Input<T extends FieldValues>({
               className={`input-${inputType} ${className ?? ''}`}
               name={name}
               id={name}
-              isRequired={isRequired}
               isInvalid={isInvalid}
               options={options as FieldOptions}
               onChange={onChange}
@@ -214,6 +211,7 @@ export function Input<T extends FieldValues>({
       ariaLabel,
       className,
       control,
+      defaultValue,
       disabled,
       inputType,
       isInvalid,
@@ -232,12 +230,13 @@ export function Input<T extends FieldValues>({
       name={name as Path<T>}
       defaultValue={defaultValue as PathValue<T, Path<T>>}
       rules={{ required: isRequired }}
+      /** @ts-ignore: issues with implicit */
       render={({ field: { onBlur, onChange: fieldOnChange, ref, value } }) => (
         <FormControl
           id={name}
           isInvalid={isInvalid}
           position="relative"
-          py={label ? 6 : 0}
+          py={label || helperText || isInvalid ? 6 : 0}
         >
           {label && <Label label={label} isRequired={isRequired} />}
           {selectedInputField(

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Box, Text } from '@chakra-ui/react';
-import colors from 'src/theme/foundations/colors';
+import colors from '../../../../../src/theme/foundations/colors';
 
 export interface TableTextProps {
   primaryText: string;

package/src/components/table/index.tsx

@@ -18,6 +18,7 @@ import {
   Tr,
 } from '@chakra-ui/react';
 import { TableLoadingRows } from './components/loading';
+import colors from '../../theme/foundations/colors';
 
 export interface TableProps<T extends ReadonlyTableColumns> {
   columns: TableColumns;
@@ -55,7 +56,7 @@ export function Table<T extends ReadonlyTableColumns>({
     >
       <ChakraTable variant="unstyled">
         <Thead>
-          <Tr>
+          <Tr _odd={{ bg: colors.label.primary.dark }}>
             {columnsAsConst.map(column => (
               // @ts-ignore
               <Th>{headers[column]}</Th>

package/src/index.tsx

@@ -46,3 +46,6 @@ export * from './theme/provider';
 
 //Utils
 export * from './components/form/utils/formErrors';
+
+// Colors
+export * from './theme/foundations/colors';

package/src/theme/components/form-error.ts

@@ -5,6 +5,8 @@ const parts = ['text', 'icon'];
 function baseStyleText() {
   return {
     color: colors.label.error,
+    position: 'absolute',
+    bottom: 0,
     mt: 1,
     ml: 1,
     fontSize: '13px',

package/src/theme/components/form.ts

@@ -11,9 +11,11 @@ function baseStyleRequiredIndicator() {
 
 function baseStyleHelperText() {
   return {
+    position: 'absolute',
     color: colors.label.secondary.light,
     mt: 1,
     ml: 1,
+    bottom: 0,
     fontSize: '13px',
   };
 }

package/src/theme/components/table.ts

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

package/src/theme/foundations/colors.ts

@@ -94,7 +94,7 @@ const semantic = {
   error: '#f96057',
 };
 
-const colors = {
+export const colors = {
   label,
   border,
   fill,

package/src/theme/provider/index.tsx

@@ -7,9 +7,14 @@ import customXQChakraTheme from '../customXQChakraTheme';
  */
 export const XQThemeProvider: React.FC<ChakraProviderProps> = ({
   children,
+  cssVarsRoot,
 }) => {
   return (
-    <ChakraProvider theme={customXQChakraTheme} resetCSS>
+    <ChakraProvider
+      theme={customXQChakraTheme}
+      resetCSS
+      cssVarsRoot={cssVarsRoot}
+    >
       {children}
     </ChakraProvider>
   );