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

package/src/components/input/StackedTextarea/StackedTextarea.tsx

@@ -1,8 +1,13 @@
 import React from 'react';
-import { Textarea } from '@chakra-ui/react';
+import { Flex, Textarea } from '@chakra-ui/react';
 import { TextareaFieldProps } from '../InputTypes';
 
-export interface StackedTextareaProps extends TextareaFieldProps {}
+export interface StackedTextareaProps extends TextareaFieldProps {
+  isRequired?: boolean;
+  allowDefault?: boolean;
+  variant: string;
+  label?: string;
+}
 
 /**
  * A functional React component utilized to render the `StackedTextarea` component.
@@ -10,14 +15,35 @@ export interface StackedTextareaProps extends TextareaFieldProps {}
 const StackedTextarea = React.forwardRef<
   HTMLTextAreaElement,
   StackedTextareaProps
->(({ ...props }, _ref) => {
+>(({ isRequired, allowDefault, variant, label, ...props }, _ref) => {
+  const isMobile = variant === 'mobile';
+  if (isMobile) {
+    return (
+      <Flex>
+        <Textarea
+          ref={_ref}
+          {...props}
+          variant={variant}
+          fontSize="17px"
+          placeholder={label ?? ''}
+          onKeyDown={e => {
+            if (e.key === 'Enter' && !allowDefault) {
+              e.stopPropagation();
+              e.preventDefault();
+            }
+          }}
+        />
+      </Flex>
+    );
+  }
   return (
     <Textarea
       ref={_ref}
       {...props}
+      variant={variant}
       fontSize="13px"
       onKeyDown={e => {
-        if (e.key === 'Enter') {
+        if (e.key === 'Enter' && !allowDefault) {
           e.stopPropagation();
           e.preventDefault();
         }

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

@@ -23,7 +23,7 @@ export const Dropdown: React.FC<DropdownProps> = ({
 }) => {
   const DropdownContent = useMemo(() => {
     return options.map((option, idx) => (
-      <Box key={idx} width="100%">
+      <Box key={idx} width="100%" role="combobox">
         {option.value === 'section_header' &&
           options[idx + 1] &&
           options[idx + 1].value !== 'section_header' && (

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,8 @@ export function Input<T extends FieldValues>({
             defaultValue={defaultValue}
             value={value}
             allowDefault={allowDefault}
+            variant={variant}
+            label={label as string}
           />
         );
       case 'radio':
@@ -161,6 +165,8 @@ export function Input<T extends FieldValues>({
             ref={ref}
             disabled={disabled}
             value={value}
+            variant={variant}
+            label={label as string}
           />
         );
       case 'checkbox':
@@ -177,6 +183,7 @@ export function Input<T extends FieldValues>({
             defaultValue={defaultValue}
             label={label as string}
             disabled={disabled}
+            variant={variant}
           />
         );
       case 'multi-select':
@@ -218,6 +225,8 @@ export function Input<T extends FieldValues>({
             clearErrors={clearErrors as UseFormClearErrors<FieldValues>}
             control={control as Control<FieldValues, any>}
             maxLength={maxLength}
+            variant={variant}
+            label={label}
           />
         );
       case 'switch':
@@ -238,6 +247,7 @@ export function Input<T extends FieldValues>({
         return null;
     }
   };
+  const nonLabeledInputs = ['checkbox'];
 
   return (
     <Controller
@@ -252,18 +262,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,140 @@
+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>
+      )}
+    />
+  );
+};

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,28 @@
+import { checkboxAnatomy } from '@chakra-ui/anatomy';
+import { createMultiStyleConfigHelpers } from '@chakra-ui/react';
+
+const {
+  definePartsStyle,
+  defineMultiStyleConfig,
+} = createMultiStyleConfigHelpers(checkboxAnatomy.keys);
+
+const roundedCheckbox = definePartsStyle({
+  control: {
+    //borderRadius: 50,
+  },
+  label: {
+    fontSize: '17px',
+    fontWeight: 400,
+    lineHeight: '20px',
+    padding: '12px 16px 12px 0px',
+  },
+  height: '44px',
+});
+
+const variants = {
+  mobile: roundedCheckbox,
+};
+
+export default defineMultiStyleConfig({
+  variants,
+});

package/src/theme/components/input.ts

@@ -26,10 +26,32 @@ const baseStyle = {
       border: '2px solid',
       borderColor: colors.border.focus,
     },
+    _placeholder: {
+      color: colors.label.secondary.light,
+    },
+  },
+};
+
+const mobileInputs = {
+  ...baseStyle,
+  field: {
+    fontSize: '17px',
+    py: '14px',
+    px: '16px',
+    cursor: 'pointer',
+    lineHeight: '21px',
+    fontWeight: 400,
+    borderRadius: 0,
+    height: '48px',
+    padding: '12px 16px 12px 0px',
+    border: '0.5px solid rgba(153, 153, 153, 0.1)',
+    borderColor: 'rgba(153, 153, 153, 0.1)',
+    borderLeft: 'none',
+    borderRight: 'none',
   },
 };
 
-const variants = { default: baseStyle };
+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,31 @@ const baseStyle = {
   lineHeight: 'short',
 };
 
+const mobileInputs = defineStyle({
+  ...baseStyle,
+  ...Input.variants.mobile.field,
+  border: 'none',
+  borderRadius: 0,
+  paddingY: '16px',
+  paddingX: '0',
+  // padding: '16px 16px',
+  cursor: 'pointer',
+  lineHeight: '21px',
+  fontWeight: 400,
+  resize: 'none',
+  overflowY: 'auto',
+  fontSize: '17px',
+  minHeight: '208px',
+});
+
+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,