Merge pull request #102 from raid-guild/fix/better-defaults

more/less defaults
raid-guild · Nov 1, 2023 · 8f99ebc · 8f99ebc
2 parents 2970302 + 9b1f1ab
commit 8f99ebc
Show file tree

Hide file tree

Showing 10 changed files with 93 additions and 66 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@raidguild/design-system",
-  "version": "0.4.48",
+  "version": "0.4.49",
   "license": "MIT",
   "author": "Raid Guild",
   "module": "dist/design-system.esm.js",

diff --git a/src/components/atoms/Heading/Heading.tsx b/src/components/atoms/Heading/Heading.tsx
@@ -5,7 +5,7 @@ import { ChakraHeadingProps, ChakraHeading } from '../../chakra';
  * Primary UI component for Heading
  */
 const Heading = ({
-  variant = 'shadow',
+  variant,
   as,
   color,
   content,

diff --git a/src/components/atoms/Toast/Toast.tsx b/src/components/atoms/Toast/Toast.tsx
@@ -24,6 +24,7 @@ type CustomToastProps = {
   iconColor?: string;
   toast?: CreateToastFnReturn;
   closeToast?: () => void;
+  descriptionNoOfLines?: number;
 };
 
 export type ToastProps = ChakraToastProps & CustomToastProps;
@@ -75,6 +76,7 @@ const Toast: React.FC<ToastProps> = ({
   iconName,
   iconColor,
   closeToast,
+  descriptionNoOfLines,
   ...props
 }: ToastProps) => {
   return (
@@ -97,7 +99,11 @@ const Toast: React.FC<ToastProps> = ({
         )}
         <Box>
           <Heading size='md'>{title}</Heading>
-          {description && <Text size='sm'>{description}</Text>}
+          {description && (
+            <Text size='sm' noOfLines={descriptionNoOfLines}>
+              {description}
+            </Text>
+          )}
         </Box>
       </HStack>
       {props.isClosable === true && (

diff --git a/src/components/forms/Input/Input.tsx b/src/components/forms/Input/Input.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { UseFormReturn } from 'react-hook-form';
+import { FieldValues, RegisterOptions, UseFormReturn } from 'react-hook-form';
 import { AiOutlineInfoCircle } from 'react-icons/ai';
 import {
   ChakraInput,
@@ -21,6 +21,8 @@ type CustomInputProps = {
   localForm: UseFormReturn;
   tooltip?: string;
   helperText?: string;
+  spacing?: number | string;
+  registerOptions?: RegisterOptions<FieldValues, string> | undefined;
 };
 
 export type InputProps = ChakraInputProps & CustomInputProps;
@@ -40,8 +42,10 @@ const Input: React.FC<InputProps> = ({
   name,
   type,
   localForm,
+  registerOptions,
   tooltip,
   helperText,
+  spacing,
   ...props
 }: InputProps) => {
   if (!localForm) return null;
@@ -54,30 +58,37 @@ const Input: React.FC<InputProps> = ({
 
   return (
     <FormControl>
-      <Stack spacing={4}>
-        <HStack align='center'>
-          {label && <FormLabel m='0'>{label}</FormLabel>}
-          {tooltip && (
-            <Tooltip
-              label={tooltip}
-              shouldWrapChildren
-              hasArrow
-              placement='end'
-            >
-              <Flex
-                h='24px'
-                w='24px'
-                bg='primary.500'
-                borderRadius='full'
-                align='center'
-                justify='center'
+      <Stack spacing={spacing}>
+        {label && (
+          <HStack align='center'>
+            <FormLabel m='0'>{label}</FormLabel>
+            {tooltip && (
+              <Tooltip
+                label={tooltip}
+                shouldWrapChildren
+                hasArrow
+                placement='end'
               >
-                <Icon as={AiOutlineInfoCircle} w='12px' h='12px' />
-              </Flex>
-            </Tooltip>
-          )}
-        </HStack>
-        <ChakraInput type={type} {...props} {...register(name)} />
+                <Flex
+                  h='24px'
+                  w='24px'
+                  bg='primary.500'
+                  borderRadius='full'
+                  align='center'
+                  justify='center'
+                >
+                  <Icon as={AiOutlineInfoCircle} w='12px' h='12px' />
+                </Flex>
+              </Tooltip>
+            )}
+          </HStack>
+        )}
+
+        <ChakraInput
+          type={type}
+          {...props}
+          {...register(name, registerOptions)}
+        />
         {helperText && <FormHelperText>{helperText}</FormHelperText>}
         {typeof error === 'string' && (
           <FormErrorMessage>{error}</FormErrorMessage>

diff --git a/src/components/forms/NumberInput/NumberInput.tsx b/src/components/forms/NumberInput/NumberInput.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { FormHelperText } from '@chakra-ui/react';
+import { FormHelperText, Stack } from '@chakra-ui/react';
 import React from 'react';
 import {
   UseFormReturn,
@@ -25,10 +25,11 @@ export interface CustomNumberInputProps {
   helperText?: string;
   name: string;
   localForm: UseFormReturn<FieldValues>;
-  step: number;
-  variant: string;
-  min: number;
-  max: number;
+  step?: number;
+  variant?: string;
+  min?: number;
+  max?: number;
+  spacing: number | string;
 }
 
 type NumberInputProps = ChakraInputProps & CustomNumberInputProps;
@@ -43,10 +44,11 @@ const NumberInput = ({
   helperText,
   customValidations,
   isRequired,
-  step,
-  variant,
-  min,
-  max,
+  step = 1,
+  variant = 'filled',
+  min = 0,
+  max = 100,
+  spacing,
 }: NumberInputProps) => {
   if (!localForm) return null;
 
@@ -59,31 +61,33 @@ const NumberInput = ({
 
   return (
     <FormControl isRequired={isRequired} isInvalid={!!errors[name]}>
-      {label && <FormLabel>{label}</FormLabel>}
-      <Controller
-        control={control}
-        name={name}
-        rules={customValidations}
-        render={({ field: { ref, ...restField } }) => (
-          <ChakraNumberInput
-            variant={variant}
-            step={step}
-            min={min}
-            max={max}
-            {...restField}
-          >
-            <NumberInputField ref={ref} name={restField.name} />
-            <NumberInputStepper>
-              <NumberIncrementStepper />
-              <NumberDecrementStepper />
-            </NumberInputStepper>
-          </ChakraNumberInput>
+      <Stack spacing={spacing}>
+        {label && <FormLabel m={0}>{label}</FormLabel>}
+        <Controller
+          control={control}
+          name={name}
+          rules={customValidations}
+          render={({ field: { ref, ...restField } }) => (
+            <ChakraNumberInput
+              variant={variant}
+              step={step}
+              min={min}
+              max={max}
+              {...restField}
+            >
+              <NumberInputField ref={ref} name={restField.name} />
+              <NumberInputStepper>
+                <NumberIncrementStepper />
+                <NumberDecrementStepper />
+              </NumberInputStepper>
+            </ChakraNumberInput>
+          )}
+        />
+        {helperText && <FormHelperText>{helperText}</FormHelperText>}
+        {typeof error === 'string' && (
+          <FormErrorMessage>{error}</FormErrorMessage>
         )}
-      />
-      {helperText && <FormHelperText>{helperText}</FormHelperText>}
-      {typeof error === 'string' && (
-        <FormErrorMessage>{error}</FormErrorMessage>
-      )}
+      </Stack>
     </FormControl>
   );
 };

diff --git a/src/components/forms/Select/Select.tsx b/src/components/forms/Select/Select.tsx
@@ -43,7 +43,7 @@ export interface SelectProps {
   isDisabled?: boolean;
   variant?: 'outline' | 'filled' | 'flushed' | undefined;
   basicStyles?: boolean;
-  value?: any;
+  value?: unknown;
   colorScheme?:
     | 'whiteAlpha'
     | 'blackAlpha'

diff --git a/src/components/forms/Switch/Switch.tsx b/src/components/forms/Switch/Switch.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { UseFormReturn } from 'react-hook-form';
+import { FieldValues, RegisterOptions, UseFormReturn } from 'react-hook-form';
 import {
   HStack,
   ChakraSwitch,
@@ -12,7 +12,9 @@ import {
 
 type CustomSwitchProps = {
   label: string | React.ReactNode;
-  localForm: UseFormReturn;
+  name: string;
+  registerOptions?: RegisterOptions<FieldValues, string> | undefined;
+  localForm: UseFormReturn<FieldValues>;
 };
 
 export type SwitchProps = ChakraSwitchProps & CustomSwitchProps;
@@ -22,6 +24,8 @@ export type SwitchProps = ChakraSwitchProps & CustomSwitchProps;
  */
 const Switch: React.FC<SwitchProps> = ({
   label,
+  name,
+  registerOptions,
   localForm,
   ...props
 }: SwitchProps) => {
@@ -31,7 +35,7 @@ const Switch: React.FC<SwitchProps> = ({
     <Flex as={FormControl} align='center'>
       <HStack spacing={3}>
         {label && <ChakraText as={FormLabel}>{label}</ChakraText>}
-        <ChakraSwitch {...props} {...register} />
+        <ChakraSwitch {...props} {...register(name, registerOptions)} />
       </HStack>
     </Flex>
   );

diff --git a/src/hooks/useToast.tsx b/src/hooks/useToast.tsx
@@ -17,6 +17,7 @@ const ToastBase = ({
   id,
   duration,
   closeToast,
+  descriptionNoOfLines = 2,
   ...props // gets the rest of the original Chakra Toast props (such as isClosable)
 }: ToastProps & {
   status: ChakraAlertStatus;
@@ -37,6 +38,7 @@ const ToastBase = ({
         iconName={iconName}
         status={status}
         closeToast={closeToast}
+        descriptionNoOfLines={descriptionNoOfLines}
         {...props}
       />
     ),

diff --git a/src/theme/components/Input.ts b/src/theme/components/Input.ts
@@ -38,7 +38,7 @@ const Input = {
     },
   },
   defaultProps: {
-    variant: 'filled',
+    variant: 'outline',
   },
 };
 

diff --git a/src/theme/components/NumberInput.ts b/src/theme/components/NumberInput.ts
@@ -1,7 +1,7 @@
 const NumberInput = {
   baseStyle: {},
   defaultProps: {
-    variant: 'filled',
+    variant: 'outline',
   },
   variants: {
     filled: {
-Original file line number
+Diff line change
@@ Expand Up / @@ -38,7 +38,7 @@ const Input = { @@
         },
       },
       defaultProps: {
-        variant: 'filled',
+        variant: 'outline',
       },
     };
@@ Expand Down @@