@xqmsg/ui-core 0.22.4 → 0.23.1-rc.0

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

@@ -7,19 +7,20 @@ import colors from '../../../../../src/theme/foundations/colors';
 export interface TokenProps {
   label: any;
   onDelete: any;
+  isMobile?: boolean;
 }
 
 // For v1 we are truncating the label at 15 characters to avoid overflow
-const Token: React.FC<TokenProps> = ({ label, onDelete }) => {
+const Token: React.FC<TokenProps> = ({ label, onDelete, isMobile = false }) => {
   return (
     <Flex
       key={label}
-      borderRadius="full"
+      borderRadius={'full'}
       backgroundColor="#7676801F"
       alignItems="center"
       width="fit-content"
       w="auto"
-      h="16px"
+      h={isMobile ? '18px' : '16px'}
       pl="6px"
       pr="2px"
       py="2px"
@@ -28,7 +29,7 @@ const Token: React.FC<TokenProps> = ({ label, onDelete }) => {
       <Text
         whiteSpace="nowrap"
         color={colors.label.primary.light}
-        fontSize="13px"
+        fontSize={isMobile ? '17px' : '13px'}
         pr="4px"
       >
         {truncate(label.trim(), {
@@ -36,7 +37,7 @@ const Token: React.FC<TokenProps> = ({ label, onDelete }) => {
           omission: '...',
         })}
       </Text>
-      <Close boxSize="11px" onClick={onDelete} />
+      <Close boxSize={isMobile ? '17px' : '11px'} onClick={onDelete} />
     </Flex>
   );
 };

package/src/components/input/index.tsx

@@ -38,7 +38,7 @@ export interface InputProps<T extends FieldValues> extends ValidationProps {
   fullOptions?: FieldOptions;
   maxLength?: number;
   helperText?: React.ReactNode;
-  control: Control<T, any>;
+  control: Control<T, unknown>;
   onChange?: (value?: string) => void;
   disabled?: boolean;
   tooltipText?: string;
@@ -48,6 +48,7 @@ export interface InputProps<T extends FieldValues> extends ValidationProps {
   leftElement?: React.ReactNode;
   allowDefault?: boolean;
   rightElement?: React.ReactNode;
+  variant: string;
 }
 
 /**
@@ -75,6 +76,7 @@ export function Input<T extends FieldValues>({
   rightElement,
   leftElement,
   allowDefault,
+  variant = 'default',
   onChange,
   setValue,
   setError,
@@ -107,6 +109,7 @@ export function Input<T extends FieldValues>({
             defaultValue={defaultValue}
             value={value}
             allowDefault={allowDefault}
+            variant={variant}
           />
         );
       case 'radio':
@@ -161,6 +164,7 @@ export function Input<T extends FieldValues>({
             ref={ref}
             disabled={disabled}
             value={value}
+            variant={variant}
           />
         );
       case 'checkbox':
@@ -177,6 +181,7 @@ export function Input<T extends FieldValues>({
             defaultValue={defaultValue}
             label={label as string}
             disabled={disabled}
+            variant={variant}
           />
         );
       case 'multi-select':
@@ -218,6 +223,7 @@ export function Input<T extends FieldValues>({
             clearErrors={clearErrors as UseFormClearErrors<FieldValues>}
             control={control as Control<FieldValues, any>}
             maxLength={maxLength}
+            variant={variant}
           />
         );
       case 'switch':
@@ -238,6 +244,7 @@ export function Input<T extends FieldValues>({
         return null;
     }
   };
+  const nonLabeledInputs = ['checkbox'];
 
   return (
     <Controller
@@ -252,18 +259,24 @@ export function Input<T extends FieldValues>({
           isInvalid={isInvalid}
           position="relative"
           py={
-            (inputType !== 'checkbox' && label) || helperText || isInvalid
+            (!nonLabeledInputs.includes(inputType) &&
+              variant !== 'mobile' &&
+              label) ||
+            helperText ||
+            isInvalid
               ? 5
               : 0
           }
         >
-          {label && inputType !== 'checkbox' && (
-            <Label
-              tooltipText={tooltipText}
-              label={label}
-              isRequired={isRequired}
-            />
-          )}
+          {label &&
+            !nonLabeledInputs.includes(inputType) &&
+            variant !== 'mobile' && (
+              <Label
+                tooltipText={tooltipText}
+                label={label}
+                isRequired={isRequired}
+              />
+            )}
           {selectedInputField(
             onChange ? onChange : fieldOnChange,
             onBlur,

package/src/components/select/index.tsx

@@ -0,0 +1,184 @@
+import React, { useEffect, useState } from 'react';
+import { Box, Flex, 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.find(option => option.value === value)?.label ?? ''
+  // );
+
+  const [selectedOption, setSelectedOption] = useState(
+    options ? options[0] ?? '' : ''
+  );
+
+  //const [selectedOption, setSelectedOption] = useState(null);
+
+  // useEffect(() => {
+  //   if (defaultValue) {
+  //     setSelectedOption(defaultValue);
+  //   }
+  //   setSelectedOption(
+  //     (fullOptions || options).find(option => option.value === value)?.label ??
+  //       ''
+  //   );
+  // }, [fullOptions, value]);
+
+  const handleOnSelectItem = (selectedValue: string) => {
+    console.log(selectedValue);
+    const selectedOption = options?.find(
+      ({ value: val }) => selectedValue === val
+    );
+    console.log(selectedValue);
+    setValue(name as string, selectedValue);
+    if (selectedOption) {
+      if (onChange) {
+        onChange(selectedOption.value);
+      }
+      setSelectedOption(selectedOption);
+      setValue(name as string, selectedOption.value);
+    }
+  };
+  console.log(selectedOption);
+
+  useEffect(() => {
+    if (defaultValue) {
+      handleOnSelectItem(defaultValue);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaultValue]);
+  return (
+    <Controller
+      control={control}
+      name={name}
+      // 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={0}>
+          {/* {label &&
+              !nonLabeledInputs.includes(inputType) &&
+              variant !== 'mobile' && (
+                <Label
+                  tooltipText={tooltipText}
+                  label={label}
+                  isRequired={isRequired}
+                />
+              )} */}
+          <Box //ref={dropdownRef}
+            position="relative"
+          >
+            <Flex
+              flexDirection="column"
+              //ref={dropdownRef}
+              //scrollMargin="15px"
+              border="0"
+              mt="3px"
+              //maxH="240px"
+              overflowY="auto"
+              width="fit-content"
+              minWidth="100%"
+              zIndex={100}
+              tabIndex={-2000}
+              borderTop="0.5px solid #9999991A"
+            >
+              <Select
+                {...props}
+                required={isRequired}
+                ref={ref}
+                //value={selectedOption?.value ?? value}
+                // textShadow={`0 0 0 ${colors.label.primary.light}`}
+                disabled={disabled ?? false}
+                onChange={e => handleOnSelectItem(e.target.value)}
+                // onKeyDown={handleOnKeyDown}
+                style={{
+                  cursor: 'pointer',
+                  color: 'var(--chakra-colors-blue-500)',
+                  height: '48px',
+                  fontSize: '17px',
+                  lineHeight: '20px',
+                  fontWeight: 400,
+                  padding: '12px 16px 12px 0px',
+                  borderRadius: 0,
+                }}
+              >
+                {options &&
+                  options.map(i => {
+                    return (
+                      <option value={i.value} key={i.sortValue}>
+                        {i.label}
+                      </option>
+                    );
+                  })}
+              </Select>
+            </Flex>
+          </Box>
+          {isInvalid ? (
+            <FormErrorMessage>{errorText}</FormErrorMessage>
+          ) : (
+            helperText && <FormHelperText>{helperText}</FormHelperText>
+          )}
+        </FormControl>
+      )}
+    />
+  );
+};

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

@@ -3,7 +3,7 @@ import { Meta, Story } from '@storybook/react';
 import { Text } from '../text';
 import { Table, TableProps } from '../table';
 import { TableBody, TableHeaders } from '../table/TableTypes';
-import { useArgs, useMemo, useState } from '@storybook/addons';
+import { useMemo, useState } from '@storybook/addons';
 import { TabsWrapper, TabsWrapperProps } from '.';
 
 const tableColumns = ['foo', 'bar'];

package/src/index.tsx

@@ -35,6 +35,9 @@ export * from './components/icons';
 // Input
 export * from './components/input';
 
+// Select
+export { SelectNative } from './components/select';
+
 // Layout
 export * from './components/layout';
 

package/src/theme/components/button.ts

@@ -79,10 +79,77 @@ const variantTertiary = () => {
   };
 };
 
+const variantPrimaryFlat = () => {
+  return {
+    ...baseStyle,
+    bg: colors.fill.action,
+    bgGradient: null,
+    minWidth: '172.5px',
+    padding: '10px 16px',
+    borderRadius: '8px',
+    border: '0.5px',
+    gap: '8px',
+    height: '44px',
+    margin: '8px',
+    fontSize: '17px',
+    fontWeight: '500',
+    lineHeight: '24px',
+    letterSpacing: '0.02em',
+    textAlign: 'center',
+    boxShadow: '0px 0.5px 1px 0.5px #0000001A',
+  };
+};
+
+const variantSecondaryFlat = () => {
+  return {
+    ...variantPrimaryFlat(),
+    fontWeight: '400',
+    color: colors.black,
+    bg: colors.label.primary.dark,
+    _hover: {
+      bg: colors.label.primary.dark,
+    },
+    _active: {
+      color: colors.black,
+      bg: colors.label.primary.dark,
+      bgGradient: colors.fill.light.quaternary,
+    },
+    _focus: {
+      bg: colors.label.primary.dark,
+    },
+  };
+};
+const variantTertiaryFlat = () => {
+  return {
+    ...variantPrimaryFlat(),
+    fontWeight: '400',
+    color: colors.label.primary.dark,
+    bg: colors.blur.quaternary.dark,
+    _hover: {
+      bg: colors.blur.quaternary.dark,
+    },
+    _active: {
+      color: colors.label.primary.dark,
+      bg: colors.blur.tertiary.dark,
+    },
+    _focus: {
+      color: colors.label.primary.dark,
+      bg: colors.blur.quaternary.dark,
+    },
+    _disabled: {
+      backgroundColor: colors.blur.quaternary.dark,
+      color: colors.blur.tertiary.dark,
+    },
+  };
+};
+
 const variants = {
   primary: variantPrimary(),
   secondary: variantSecondary(),
   tertiary: variantTertiary(),
+  'flat-primary': variantPrimaryFlat(),
+  'flat-secondary': variantSecondaryFlat(),
+  'flat-tertiary': variantTertiaryFlat(),
 };
 
 const defaultProps = {

package/src/theme/components/checkbox.ts

@@ -0,0 +1,25 @@
+import { checkboxAnatomy } from '@chakra-ui/anatomy';
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react';
+
+const {
+  definePartsStyle,
+  defineMultiStyleConfig,
+} = createMultiStyleConfigHelpers(checkboxAnatomy.keys);
+
+const roundedCheckbox = definePartsStyle({
+  control: {
+    borderRadius: 50,
+    padding: 3,
+  },
+  label: {
+    fontSize: '17px',
+  },
+});
+
+const variants = {
+  mobile: roundedCheckbox,
+};
+
+export default defineMultiStyleConfig({
+  variants,
+});

package/src/theme/components/input.ts

@@ -29,7 +29,21 @@ const baseStyle = {
   },
 };
 
-const variants = { default: baseStyle };
+const mobileInputs = {
+  ...baseStyle,
+  field: {
+    fontSize: '17px',
+    border: 'none',
+    py: '14px',
+    px: '16px',
+    cursor: 'pointer',
+    lineHeight: '21px',
+    fontWeight: 400,
+    borderRadius: 0,
+  },
+};
+
+const variants = { default: baseStyle, mobile: mobileInputs };
 
 const defaultProps = {
   variant: 'default',

package/src/theme/components/textarea.ts

@@ -1,4 +1,5 @@
 import Input from './input';
+import { defineStyle } from '@chakra-ui/react';
 
 const baseStyle = {
   ...Input.baseStyle.field,
@@ -11,11 +12,30 @@ const baseStyle = {
   lineHeight: 'short',
 };
 
+const mobileInputs = defineStyle({
+  ...baseStyle,
+  ...Input.variants.mobile.field,
+  border: 'none',
+  borderRadius: 0,
+  paddingY: '14px',
+  paddingX: '16px',
+  padding: '14px 16px',
+  cursor: 'pointer',
+  lineHeight: '21px',
+  fontWeight: 400,
+  resize: 'none',
+  overflowY: 'auto',
+  fontSize: '17px',
+});
+
+const variants = { default: baseStyle, mobile: mobileInputs };
+
 const defaultProps = {
   variant: 'default',
 };
 
 export default {
   baseStyle,
+  variants,
   defaultProps,
 };

package/src/theme/customXQChakraTheme.ts

@@ -6,6 +6,7 @@ import typography from './foundations/typography';
 import Alert from './components/alert';
 import Badge from './components/badge';
 import Button from './components/button';
+import Checkbox from './components/checkbox';
 import Code from './components/code';
 import Form from './components/form';
 import FormError from './components/form-error';
@@ -30,6 +31,7 @@ const customXQChakraTheme = extendTheme({
     Alert,
     Badge,
     Button,
+    Checkbox,
     Code,
     Form,
     FormError,