@xqmsg/ui-core 0.23.3 → 0.24.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.23.3",
+  "version": "0.24.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -8,7 +8,7 @@
     "src"
   ],
   "engines": {
-    "node": ">=10"
+    "node": ">=14"
   },
   "scripts": {
     "start": "tsdx watch",

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

@@ -57,6 +57,9 @@ const Template: Story<ButtonProps> = args => (
         width="fixed"
       />
     </Box>
+    <Box p={5}>
+      <Button {...args} text="danger Fixed" variant="danger" width="fixed" />
+    </Box>
     <Box p={5}>
       <Button
         {...args}
@@ -81,6 +84,14 @@ const Template: Story<ButtonProps> = args => (
         width="variable"
       />
     </Box>
+    <Box p={5}>
+      <Button
+        {...args}
+        text="danger Variable"
+        variant="danger"
+        width="variable"
+      />
+    </Box>
     <Box p={5}>
       <Button
         {...args}
@@ -105,6 +116,14 @@ const Template: Story<ButtonProps> = args => (
         width="variable"
       />
     </Box>
+    <Box p={5}>
+      <Button
+        {...args}
+        text="danger Fixed variable"
+        variant="flat-danger"
+        width="variable"
+      />
+    </Box>
     <Box p={5}>
       <Button
         {...args}
@@ -129,6 +148,14 @@ const Template: Story<ButtonProps> = args => (
         width="fixed"
       />
     </Box>
+    <Box p={5}>
+      <Button
+        {...args}
+        text="danger Fixed Flat"
+        variant="flat-danger"
+        width="fixed"
+      />
+    </Box>
   </Flex>
 );
 

package/src/components/input/InputTypes.ts

@@ -38,7 +38,13 @@ export interface InputFieldProps
         React.InputHTMLAttributes<HTMLInputElement>,
         HTMLInputElement
       >,
-      'color' | 'height' | 'width' | 'size' | 'ref'
+      | 'color'
+      | 'height'
+      | 'width'
+      | 'size'
+      | 'ref'
+      | 'onChange'
+      | 'defaultValue'
     >,
     FieldProps,
     Partial<InputProps> {}

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

@@ -219,7 +219,7 @@ const StackedSelect = React.forwardRef<HTMLInputElement, StackedSelectProps>(
           <Dropdown
             position={position}
             dropdownRef={dropdownMenuRef}
-            onSelectItem={option => handleOnSelectItem(option)}
+            onSelectItem={handleOnSelectItem}
             options={options}
             optionIndex={optionIndex}
           />

package/src/components/input/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ChangeEvent } from 'react';
 import StackedCheckBox from './StackedCheckbox/StackedCheckbox';
 import StackedInput from './StackedInput/StackedInput';
 import StackedRadioGroup from './StackedRadio/StackedRadioGroup';
@@ -26,7 +26,8 @@ import StackedPilledInput from './StackedPilledInput';
 import StackedSwitch from './StackedSwitch';
 import { Label } from './components/label';
 
-export interface InputProps<T extends FieldValues> extends ValidationProps {
+export interface InputProps<T extends FieldValues = FieldValues>
+  extends ValidationProps {
   inputType: InputType;
   name: string;
   ariaLabel: string;
@@ -39,7 +40,7 @@ export interface InputProps<T extends FieldValues> extends ValidationProps {
   maxLength?: number;
   helperText?: React.ReactNode;
   control: Control<T, any>;
-  onChange?: (value?: string) => void;
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
   disabled?: boolean;
   tooltipText?: string;
   setValue: UseFormSetValue<T>;
@@ -84,12 +85,12 @@ export function Input<T extends FieldValues>({
   clearErrors,
   separators,
 }: InputProps<T>) {
-  const selectedInputField = (
-    onChange: () => void,
+  function selectedInputField<T extends Element = Element>(
+    onChange: ((e: ChangeEvent<T>) => void) | ((v?: string) => void),
     onBlur: () => void,
     ref: RefCallBack,
     value: string
-  ) => {
+  ) {
     switch (inputType) {
       case 'text':
         return (
@@ -102,7 +103,7 @@ export function Input<T extends FieldValues>({
             maxLength={maxLength}
             isRequired={isRequired}
             isInvalid={isInvalid}
-            onChange={onChange}
+            onChange={onChange as (e: ChangeEvent) => void}
             onBlur={onBlur}
             ref={ref}
             rightElement={rightElement}
@@ -123,7 +124,7 @@ export function Input<T extends FieldValues>({
             id={name}
             isInvalid={isInvalid}
             options={options as FieldOptions}
-            onChange={onChange}
+            onChange={onChange as (e: ChangeEvent) => void}
             onBlur={onBlur}
             ref={ref}
             disabled={disabled}
@@ -139,7 +140,7 @@ export function Input<T extends FieldValues>({
             isRequired={isRequired}
             isInvalid={isInvalid}
             options={options as FieldOptions}
-            handleOnChange={onChange}
+            handleOnChange={onChange as (v?: string) => void}
             onBlur={onBlur}
             setValue={setValue as UseFormSetValue<FieldValues>}
             control={control as Control<FieldValues, any>}
@@ -162,7 +163,7 @@ export function Input<T extends FieldValues>({
             maxLength={maxLength}
             isRequired={isRequired}
             isInvalid={isInvalid}
-            onChange={onChange}
+            onChange={onChange as (e: ChangeEvent) => void}
             onBlur={onBlur}
             ref={ref}
             disabled={disabled}
@@ -178,7 +179,7 @@ export function Input<T extends FieldValues>({
             name={name}
             id={name}
             isInvalid={isInvalid}
-            onChange={onChange}
+            onChange={onChange as (e: ChangeEvent) => void}
             onBlur={onBlur}
             ref={ref}
             value={value}
@@ -196,7 +197,7 @@ export function Input<T extends FieldValues>({
             id={name}
             isInvalid={isInvalid}
             options={options as FieldOptions}
-            onChange={onChange}
+            onChange={onChange as (e: ChangeEvent) => void}
             onBlur={onBlur}
             ref={ref}
             disabled={disabled}
@@ -216,7 +217,7 @@ export function Input<T extends FieldValues>({
             name={name}
             id={name}
             isInvalid={isInvalid}
-            onChange={onChange}
+            onChange={onChange as (e: ChangeEvent) => void}
             onBlur={onBlur}
             ref={ref}
             disabled={disabled}
@@ -239,7 +240,7 @@ export function Input<T extends FieldValues>({
             name={name}
             id={name}
             isInvalid={isInvalid}
-            onChange={onChange}
+            onChange={onChange as (e: ChangeEvent) => void}
             onBlur={onBlur}
             ref={ref}
             value={value}
@@ -249,7 +250,7 @@ export function Input<T extends FieldValues>({
       default:
         return null;
     }
-  };
+  }
   const nonLabeledInputs = ['checkbox'];
 
   return (
@@ -284,7 +285,7 @@ export function Input<T extends FieldValues>({
               />
             )}
           {selectedInputField(
-            onChange ? onChange : fieldOnChange,
+            onChange ? onChange : (fieldOnChange as (e: ChangeEvent) => void),
             onBlur,
             ref,
             value

package/src/components/select/index.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react';
-import { Select } from '@chakra-ui/react';
+import React from 'react';
+import { Select, SelectProps } from '@chakra-ui/react';
 import {
   FormControl,
   FormErrorMessage,
@@ -9,6 +9,8 @@ import {
   Control,
   Controller,
   FieldValues,
+  Path,
+  PathValue,
   UseFormClearErrors,
   UseFormSetError,
   UseFormSetValue,
@@ -16,10 +18,11 @@ import {
 import { FieldOptions, ValidationProps } from 'src/components/input/InputTypes';
 
 export interface SelectNativeProps<T extends FieldValues>
-  extends ValidationProps {
+  extends ValidationProps,
+    SelectProps {
   isRequired: boolean;
 
-  name: string;
+  name: Path<T>;
   ariaLabel: string;
   placeholder?: string;
   defaultValue?: string;
@@ -29,7 +32,7 @@ export interface SelectNativeProps<T extends FieldValues>
   fullOptions?: FieldOptions;
   helperText?: React.ReactNode;
   control: Control<T, unknown>;
-  onChange?: (value?: string) => void;
+  onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
   disabled?: boolean;
   tooltipText?: string;
   setValue: UseFormSetValue<T>;
@@ -41,7 +44,7 @@ export interface SelectNativeProps<T extends FieldValues>
 /**
  * A functional React component utilized to render the `SelectNative` component.
  */
-export const SelectNative: React.FC<SelectNativeProps<HTMLSelectElement>> = ({
+export function SelectNative<T extends FieldValues = FieldValues>({
   label,
   ariaLabel,
   className,
@@ -62,7 +65,7 @@ export const SelectNative: React.FC<SelectNativeProps<HTMLSelectElement>> = ({
   setError,
   clearErrors,
   ...props
-}) => {
+}: SelectNativeProps<T>): React.ReactElement {
   // const [selectedOption, setSelectedOption] = useState(
   //   options ? options[0] ?? '' : ''
   // );
@@ -81,27 +84,22 @@ export const SelectNative: React.FC<SelectNativeProps<HTMLSelectElement>> = ({
     borderRight: 'none',
   };
 
-  const handleOnSelectItem = (selectedValue: string) => {
+  const handleOnSelectItem = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedValue = e.target.value;
     const selectedOption = options?.find(
       ({ value: val }) => selectedValue === val
     );
 
     if (selectedOption) {
       if (onChange) {
-        onChange(selectedOption.value);
+        onChange(e);
       }
-      setValue(name as string, selectedOption.value);
+      setValue(name, selectedOption.value as PathValue<T, Path<T>>);
     } else {
-      setValue(name as string, selectedValue);
+      setValue(name, selectedValue as PathValue<T, Path<T>>);
     }
   };
 
-  useEffect(() => {
-    if (defaultValue) {
-      handleOnSelectItem(defaultValue);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [defaultValue]);
   return (
     <Controller
       control={control}
@@ -116,7 +114,8 @@ export const SelectNative: React.FC<SelectNativeProps<HTMLSelectElement>> = ({
             ref={ref}
             value={value}
             disabled={disabled ?? false}
-            onChange={e => handleOnSelectItem(e.target.value)}
+            onChange={handleOnSelectItem}
+            defaultValue={defaultValue}
             style={style}
           >
             {options &&
@@ -137,4 +136,4 @@ export const SelectNative: React.FC<SelectNativeProps<HTMLSelectElement>> = ({
       )}
     />
   );
-};
+}

package/src/components/text/index.tsx

@@ -2,9 +2,9 @@ import React, { PropsWithChildren } from 'react';
 import { Text as ChakraText } from '@chakra-ui/react';
 import textTheme from '../../theme/components/text';
 
-export interface TextProps extends PropsWithChildren {
+export type TextProps = PropsWithChildren & {
   variant: keyof typeof textTheme.variants;
-}
+};
 
 /**
  * A functional React component utilized to render the `Text` component. The component is mainly

package/src/theme/components/button.ts

@@ -79,6 +79,30 @@ const variantTertiary = () => {
   };
 };
 
+const variantDanger = () => {
+  return {
+    ...baseStyle,
+    fontWeight: '400',
+    color: colors.label.primary.dark,
+    bg: colors.label.error,
+    _hover: {
+      bg: colors.label.error,
+    },
+    _active: {
+      color: colors.label.primary.dark,
+      bg: colors.label.error,
+    },
+    _focus: {
+      color: colors.label.primary.dark,
+      bg: colors.label.error,
+    },
+    _disabled: {
+      backgroundColor: colors.label.error,
+      color: colors.label.secondary.light,
+    },
+  };
+};
+
 const variantPrimaryFlat = () => {
   return {
     ...baseStyle,
@@ -142,14 +166,39 @@ const variantTertiaryFlat = () => {
     },
   };
 };
+const variantDangerFlat = () => {
+  return {
+    ...variantPrimaryFlat(),
+    fontWeight: '400',
+    color: colors.label.primary.dark,
+    bg: colors.label.error,
+    _hover: {
+      bg: colors.label.error,
+    },
+    _active: {
+      color: colors.label.primary.dark,
+      bg: colors.label.error,
+    },
+    _focus: {
+      color: colors.label.primary.dark,
+      bg: colors.label.error,
+    },
+    _disabled: {
+      backgroundColor: colors.label.error,
+      color: colors.label.secondary.light,
+    },
+  };
+};
 
 const variants = {
   primary: variantPrimary(),
   secondary: variantSecondary(),
   tertiary: variantTertiary(),
+  danger: variantDanger(),
   'flat-primary': variantPrimaryFlat(),
   'flat-secondary': variantSecondaryFlat(),
   'flat-tertiary': variantTertiaryFlat(),
+  'flat-danger': variantDangerFlat(),
 };
 
 const defaultProps = {