@xqmsg/ui-core 0.23.2 → 0.24.0

package/src/components/navigation/index.tsx

@@ -1,87 +1,87 @@
-import React, { useMemo, useState, useEffect } from 'react';
-import { Box, Flex } from '@chakra-ui/react';
-import { NavigationMenuHeader } from './components/header';
-import { NavigationMenuItem } from './components/items';
-
-export type GroupMenuItems = {
-  leftIcon: JSX.Element;
-  label: string;
-  href?: string;
-  to?: string;
-  rightIcon?: JSX.Element;
-  onClick?: () => void;
-  isExternal?: boolean;
-};
-
-export type GroupedMenuItem = {
-  groupSortValue: number;
-  groupHeader?: string;
-  groupMenuItems: GroupMenuItems[];
-};
-
-export interface NavigationMenuProps {
-  groupedMenuItems: GroupedMenuItem[];
-  selectedMenuItem?: string;
-  bottomMenuItem?: GroupMenuItems;
-}
-
-/**
- * A functional React component utilized to render the `NavigationMenu` component
- */
-export const NavigationMenu: React.FC<NavigationMenuProps> = ({
-  groupedMenuItems,
-  selectedMenuItem,
-  bottomMenuItem,
-}) => {
-  const sortedGroupedMenuItems = useMemo(
-    () => groupedMenuItems?.sort((a, b) => a.groupSortValue - b.groupSortValue),
-    [groupedMenuItems]
-  );
-
-  const [_selectedMenuItem, setSelectedMenuItem] = useState<string>('');
-
-  useEffect(() => {
-    if (selectedMenuItem) setSelectedMenuItem(selectedMenuItem);
-  }, [selectedMenuItem]);
-
-  return (
-    <Flex
-      bg="#7474800D"
-      py="32px"
-      px="8px"
-      height="100%"
-      overflowY="auto"
-      width="220px"
-      flexDirection="column"
-      justifyContent="space-between"
-    >
-      {sortedGroupedMenuItems?.map((menuItemGroup, idx) => (
-        <Box key={idx} _notLast={{ paddingBottom: '8px' }}>
-          {menuItemGroup.groupHeader && (
-            <NavigationMenuHeader label={menuItemGroup.groupHeader} />
-          )}
-          {menuItemGroup.groupMenuItems.map((item, idx) => (
-            <NavigationMenuItem
-              {...item}
-              key={idx}
-              isSelected={_selectedMenuItem === item.label}
-              onClick={() => setSelectedMenuItem(item.label)}
-            />
-          ))}
-        </Box>
-      ))}
-      {bottomMenuItem && (
-        <NavigationMenuItem
-          {...bottomMenuItem}
-          key={bottomMenuItem.label}
-          isSelected
-          onClick={() => {
-            if (bottomMenuItem.onClick) {
-              bottomMenuItem.onClick();
-            }
-          }}
-        />
-      )}
-    </Flex>
-  );
-};
+import React, { useMemo, useState, useEffect } from 'react';
+import { Box, Flex } from '@chakra-ui/react';
+import { NavigationMenuHeader } from './components/header';
+import { NavigationMenuItem } from './components/items';
+
+export type GroupMenuItems = {
+  leftIcon: JSX.Element;
+  label: string;
+  href?: string;
+  to?: string;
+  rightIcon?: JSX.Element;
+  onClick?: () => void;
+  isExternal?: boolean;
+};
+
+export type GroupedMenuItem = {
+  groupSortValue: number;
+  groupHeader?: string;
+  groupMenuItems: GroupMenuItems[];
+};
+
+export interface NavigationMenuProps {
+  groupedMenuItems: GroupedMenuItem[];
+  selectedMenuItem?: string;
+  bottomMenuItem?: GroupMenuItems;
+}
+
+/**
+ * A functional React component utilized to render the `NavigationMenu` component
+ */
+export const NavigationMenu: React.FC<NavigationMenuProps> = ({
+  groupedMenuItems,
+  selectedMenuItem,
+  bottomMenuItem,
+}) => {
+  const sortedGroupedMenuItems = useMemo(
+    () => groupedMenuItems?.sort((a, b) => a.groupSortValue - b.groupSortValue),
+    [groupedMenuItems]
+  );
+
+  const [_selectedMenuItem, setSelectedMenuItem] = useState<string>('');
+
+  useEffect(() => {
+    if (selectedMenuItem) setSelectedMenuItem(selectedMenuItem);
+  }, [selectedMenuItem]);
+
+  return (
+    <Flex
+      bg="#7474800D"
+      py="32px"
+      px="8px"
+      height="100%"
+      overflowY="auto"
+      width="220px"
+      flexDirection="column"
+      justifyContent="space-between"
+    >
+      {sortedGroupedMenuItems?.map((menuItemGroup, idx) => (
+        <Box key={idx} _notLast={{ paddingBottom: '8px' }}>
+          {menuItemGroup.groupHeader && (
+            <NavigationMenuHeader label={menuItemGroup.groupHeader} />
+          )}
+          {menuItemGroup.groupMenuItems.map((item, idx) => (
+            <NavigationMenuItem
+              {...item}
+              key={idx}
+              isSelected={_selectedMenuItem === item.label}
+              onClick={() => setSelectedMenuItem(item.label)}
+            />
+          ))}
+        </Box>
+      ))}
+      {bottomMenuItem && (
+        <NavigationMenuItem
+          {...bottomMenuItem}
+          key={bottomMenuItem.label}
+          isSelected
+          onClick={() => {
+            if (bottomMenuItem.onClick) {
+              bottomMenuItem.onClick();
+            }
+          }}
+        />
+      )}
+    </Flex>
+  );
+};

package/src/components/select/index.tsx

@@ -1,140 +1,139 @@
-import React, { useEffect } from 'react';
-import { Select } from '@chakra-ui/react';
-import {
-  FormControl,
-  FormErrorMessage,
-  FormHelperText,
-} from '@chakra-ui/react';
-import {
-  Control,
-  Controller,
-  FieldValues,
-  UseFormClearErrors,
-  UseFormSetError,
-  UseFormSetValue,
-} from 'react-hook-form';
-import { FieldOptions, ValidationProps } from 'src/components/input/InputTypes';
-
-export interface SelectNativeProps<T extends FieldValues>
-  extends ValidationProps {
-  isRequired: boolean;
-
-  name: string;
-  ariaLabel: string;
-  placeholder?: string;
-  defaultValue?: string;
-  label?: string;
-  className?: string;
-  options?: FieldOptions;
-  fullOptions?: FieldOptions;
-  helperText?: React.ReactNode;
-  control: Control<T, unknown>;
-  onChange?: (value?: string) => void;
-  disabled?: boolean;
-  tooltipText?: string;
-  setValue: UseFormSetValue<T>;
-  setError: UseFormSetError<T>;
-  clearErrors: UseFormClearErrors<T>;
-  allowDefault?: boolean;
-}
-
-/**
- * A functional React component utilized to render the `SelectNative` component.
- */
-export const SelectNative: React.FC<SelectNativeProps<HTMLSelectElement>> = ({
-  label,
-  ariaLabel,
-  className,
-  placeholder,
-  name,
-  helperText,
-  options,
-  tooltipText,
-  isInvalid,
-  errorText,
-  isRequired,
-  defaultValue,
-  fullOptions,
-  control,
-  disabled,
-  onChange,
-  setValue,
-  setError,
-  clearErrors,
-  ...props
-}) => {
-  // const [selectedOption, setSelectedOption] = useState(
-  //   options ? options[0] ?? '' : ''
-  // );
-
-  const style = {
-    cursor: 'pointer',
-    color: 'var(--chakra-colors-blue-500)',
-    height: '48px',
-    fontSize: '17px',
-    lineHeight: '20px',
-    fontWeight: 400,
-    padding: '12px 16px 12px 0px',
-    borderRadius: 0,
-    border: '0.5px solid rgba(153, 153, 153, 0.1)',
-    borderLeft: 'none',
-    borderRight: 'none',
-  };
-
-  const handleOnSelectItem = (selectedValue: string) => {
-    const selectedOption = options?.find(
-      ({ value: val }) => selectedValue === val
-    );
-
-    if (selectedOption) {
-      if (onChange) {
-        onChange(selectedOption.value);
-      }
-      setValue(name as string, selectedOption.value);
-    } else {
-      setValue(name as string, selectedValue);
-    }
-  };
-
-  useEffect(() => {
-    if (defaultValue) {
-      handleOnSelectItem(defaultValue);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [defaultValue]);
-  return (
-    <Controller
-      control={control}
-      name={name}
-      rules={{ required: isRequired }}
-      /** @ts-ignore: issues with implicit */
-      render={({ field: { onBlur, onChange: fieldOnChange, ref, value } }) => (
-        <FormControl id={name} isInvalid={isInvalid} position="relative" py={0}>
-          <Select
-            {...props}
-            required={isRequired}
-            ref={ref}
-            value={value}
-            disabled={disabled ?? false}
-            onChange={e => handleOnSelectItem(e.target.value)}
-            style={style}
-          >
-            {options &&
-              options.map(i => {
-                return (
-                  <option value={i.value} key={i.sortValue}>
-                    {i.label}
-                  </option>
-                );
-              })}
-          </Select>
-          {isInvalid ? (
-            <FormErrorMessage>{errorText}</FormErrorMessage>
-          ) : (
-            helperText && <FormHelperText>{helperText}</FormHelperText>
-          )}
-        </FormControl>
-      )}
-    />
-  );
-};
+import React from 'react';
+import { Select, SelectProps } from '@chakra-ui/react';
+import {
+  FormControl,
+  FormErrorMessage,
+  FormHelperText,
+} from '@chakra-ui/react';
+import {
+  Control,
+  Controller,
+  FieldValues,
+  Path,
+  PathValue,
+  UseFormClearErrors,
+  UseFormSetError,
+  UseFormSetValue,
+} from 'react-hook-form';
+import { FieldOptions, ValidationProps } from 'src/components/input/InputTypes';
+
+export interface SelectNativeProps<T extends FieldValues>
+  extends ValidationProps,
+    SelectProps {
+  isRequired: boolean;
+
+  name: Path<T>;
+  ariaLabel: string;
+  placeholder?: string;
+  defaultValue?: string;
+  label?: string;
+  className?: string;
+  options?: FieldOptions;
+  fullOptions?: FieldOptions;
+  helperText?: React.ReactNode;
+  control: Control<T, unknown>;
+  onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+  disabled?: boolean;
+  tooltipText?: string;
+  setValue: UseFormSetValue<T>;
+  setError: UseFormSetError<T>;
+  clearErrors: UseFormClearErrors<T>;
+  allowDefault?: boolean;
+}
+
+/**
+ * A functional React component utilized to render the `SelectNative` component.
+ */
+export function SelectNative<T extends FieldValues = FieldValues>({
+  label,
+  ariaLabel,
+  className,
+  placeholder,
+  name,
+  helperText,
+  options,
+  tooltipText,
+  isInvalid,
+  errorText,
+  isRequired,
+  defaultValue,
+  fullOptions,
+  control,
+  disabled,
+  onChange,
+  setValue,
+  setError,
+  clearErrors,
+  ...props
+}: SelectNativeProps<T>): React.ReactElement {
+  // const [selectedOption, setSelectedOption] = useState(
+  //   options ? options[0] ?? '' : ''
+  // );
+
+  const style = {
+    cursor: 'pointer',
+    color: 'var(--chakra-colors-blue-500)',
+    height: '48px',
+    fontSize: '17px',
+    lineHeight: '20px',
+    fontWeight: 400,
+    padding: '12px 16px 12px 0px',
+    borderRadius: 0,
+    border: '0.5px solid rgba(153, 153, 153, 0.1)',
+    borderLeft: 'none',
+    borderRight: 'none',
+  };
+
+  const handleOnSelectItem = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedValue = e.target.value;
+    const selectedOption = options?.find(
+      ({ value: val }) => selectedValue === val
+    );
+
+    if (selectedOption) {
+      if (onChange) {
+        onChange(e);
+      }
+      setValue(name, selectedOption.value as PathValue<T, Path<T>>);
+    } else {
+      setValue(name, selectedValue as PathValue<T, Path<T>>);
+    }
+  };
+
+  return (
+    <Controller
+      control={control}
+      name={name}
+      rules={{ required: isRequired }}
+      /** @ts-ignore: issues with implicit */
+      render={({ field: { onBlur, onChange: fieldOnChange, ref, value } }) => (
+        <FormControl id={name} isInvalid={isInvalid} position="relative" py={0}>
+          <Select
+            {...props}
+            required={isRequired}
+            ref={ref}
+            value={value}
+            disabled={disabled ?? false}
+            onChange={handleOnSelectItem}
+            defaultValue={defaultValue}
+            style={style}
+          >
+            {options &&
+              options.map(i => {
+                return (
+                  <option value={i.value} key={i.sortValue}>
+                    {i.label}
+                  </option>
+                );
+              })}
+          </Select>
+          {isInvalid ? (
+            <FormErrorMessage>{errorText}</FormErrorMessage>
+          ) : (
+            helperText && <FormHelperText>{helperText}</FormHelperText>
+          )}
+        </FormControl>
+      )}
+    />
+  );
+}

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

@@ -1,63 +1,63 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { Text } from '../text';
-import { Table, TableProps } from '.';
-import { TableBody, TableHeaders } from './TableTypes';
-import { useArgs } from '@storybook/addons';
-
-const tableColumns = ['AppliesToTypes', 'bar'];
-
-// const tableHeaders: TableHeaders<typeof tableColumns> = {
-//   AppliesToTypes: <Text variant="paragraph">AppliesToTypes</Text>,
-//   bar: <Text variant="paragraph">BAR</Text>,
-// };
-
-const tableBody: TableBody<typeof tableColumns> = [
-  {
-    AppliesToTypes: 'hi',
-    bar: 'hey',
-  },
-  { AppliesToTypes: 'hi', bar: 'hey' },
-  { AppliesToTypes: 'hi', bar: 'hey' },
-];
-
-const meta: Meta<TableProps<typeof tableColumns>> = {
-  title: 'Table example',
-  component: Table,
-  argTypes: {
-    body: {
-      description:
-        'An array of `TableRow<T>` that we use to populate the body of the table',
-    },
-    columns: {
-      description:
-        'An array of `string` that we use to populate the column headers of the table',
-    },
-    loading: {
-      description: 'The loading state of data being passed into the table',
-    },
-    loadMore: {
-      description: 'The callback used on click of the load more button',
-    },
-  },
-  parameters: {
-    controls: { expanded: true },
-  },
-};
-export default meta;
-const Template: Story<TableProps<typeof tableColumns>> = args => {
-  const [, updateArgs] = useArgs();
-
-  return (
-    <Table {...args} loadMore={() => updateArgs({ ...args, loading: true })} />
-  );
-};
-
-export const Default = Template.bind({});
-
-Default.args = {
-  body: tableBody,
-  // headers: tableHeaders,
-  columns: tableColumns,
-  loading: false,
-};
+import React from 'react';
+import { Meta, Story } from '@storybook/react';
+import { Text } from '../text';
+import { Table, TableProps } from '.';
+import { TableBody, TableHeaders } from './TableTypes';
+import { useArgs } from '@storybook/addons';
+
+const tableColumns = ['AppliesToTypes', 'bar'];
+
+// const tableHeaders: TableHeaders<typeof tableColumns> = {
+//   AppliesToTypes: <Text variant="paragraph">AppliesToTypes</Text>,
+//   bar: <Text variant="paragraph">BAR</Text>,
+// };
+
+const tableBody: TableBody<typeof tableColumns> = [
+  {
+    AppliesToTypes: 'hi',
+    bar: 'hey',
+  },
+  { AppliesToTypes: 'hi', bar: 'hey' },
+  { AppliesToTypes: 'hi', bar: 'hey' },
+];
+
+const meta: Meta<TableProps<typeof tableColumns>> = {
+  title: 'Table example',
+  component: Table,
+  argTypes: {
+    body: {
+      description:
+        'An array of `TableRow<T>` that we use to populate the body of the table',
+    },
+    columns: {
+      description:
+        'An array of `string` that we use to populate the column headers of the table',
+    },
+    loading: {
+      description: 'The loading state of data being passed into the table',
+    },
+    loadMore: {
+      description: 'The callback used on click of the load more button',
+    },
+  },
+  parameters: {
+    controls: { expanded: true },
+  },
+};
+export default meta;
+const Template: Story<TableProps<typeof tableColumns>> = args => {
+  const [, updateArgs] = useArgs();
+
+  return (
+    <Table {...args} loadMore={() => updateArgs({ ...args, loading: true })} />
+  );
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  body: tableBody,
+  // headers: tableHeaders,
+  columns: tableColumns,
+  loading: false,
+};

package/src/components/table/TableTypes.ts

@@ -1,15 +1,15 @@
-import { ReactNode } from 'react';
-
-export type TableColumns = string[];
-
-export type ReadonlyTableColumns = Readonly<TableColumns>;
-
-export type TableHeaders<K extends ReadonlyTableColumns> = {
-  [k in K[number]]: ReactNode;
-};
-
-export type TableRow<K extends ReadonlyTableColumns> = {
-  [k in K[number]]: ReactNode;
-};
-
-export type TableBody<R extends ReadonlyTableColumns> = TableRow<R>[];
+import { ReactNode } from 'react';
+
+export type TableColumns = string[];
+
+export type ReadonlyTableColumns = Readonly<TableColumns>;
+
+export type TableHeaders<K extends ReadonlyTableColumns> = {
+  [k in K[number]]: ReactNode;
+};
+
+export type TableRow<K extends ReadonlyTableColumns> = {
+  [k in K[number]]: ReactNode;
+};
+
+export type TableBody<R extends ReadonlyTableColumns> = TableRow<R>[];