feat: add isInvalid styling for inputs

lovrozagar · Jun 21, 2024 · c06a68a · c06a68a
1 parent 93727c4
commit c06a68a
Show file tree

Hide file tree

Showing 12 changed files with 62 additions and 22 deletions.
diff --git a/app.tsx b/app.tsx
@@ -1,7 +1,43 @@
-import React from 'react'
+import {
+  Checkbox,
+  Combobox,
+  ComboboxContent,
+  ComboboxItem,
+  ComboboxTrigger,
+  RadioGroup,
+  RadioGroupItem,
+  TextInput,
+} from '@/components'
+import React, { useState } from 'react'
 
 const App = () => {
-  return <div />
+  const [checkbox, setCheckbox] = useState(false)
+  const [radio, setRadio] = useState(1)
+
+  return (
+    <div className='min-h-screen w-full flex items-center justify-center gap-8'>
+      <TextInput isInvalid />
+      <Combobox isInvalid>
+        <ComboboxTrigger>trigger</ComboboxTrigger>
+        <ComboboxContent>
+          <ComboboxItem value={1}>value</ComboboxItem>
+        </ComboboxContent>
+      </Combobox>
+      <Checkbox
+        isInvalid={!checkbox}
+        isChecked={checkbox}
+        onCheckedChange={(value) => setCheckbox(value)}
+      />
+      <RadioGroup
+        isInvalid={!radio}
+        value={radio}
+        onValueChange={(value) => setRadio(value as number)}
+      >
+        <RadioGroupItem value={1} />
+        <RadioGroupItem value={2} />
+      </RadioGroup>
+    </div>
+  )
 }
 
 export { App }
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="dark">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@renderui/core",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "private": false,
   "description": "React UI library with highly modular and ready-out-of-the-box components",
   "license": "MIT",

diff --git a/src/components/_shared/classes/input-container-classes.ts b/src/components/_shared/classes/input-container-classes.ts
@@ -1,7 +1,7 @@
 import { cva } from '@renderui/utils'
 
 const inputContainerClasses = cva(
-  'flex min-w-0 cursor-text items-center gap-2 overflow-hidden ring-ring-color ring-offset-0 data-[focus-within=true]:ring-[2px] data-[hover=true]:data-[focus-within=true]:ring-[2px] data-[hover=true]:ring-[1px]',
+  'flex min-w-0 cursor-text items-center gap-2 overflow-hidden ring-ring-color ring-offset-0 data-[focus-within=true]:ring-[2px] data-[hover=true]:data-[focus-within=true]:ring-[2px] data-[hover=true]:ring-[1px] data-[invalid=true]:ring-destructive',
   {
     variants: {
       variant: {

diff --git a/src/components/checkbox/components/checkbox.tsx b/src/components/checkbox/components/checkbox.tsx
@@ -30,6 +30,7 @@ const Checkbox = React.forwardRef<CheckboxRef, CheckboxProps>((props, ref) => {
     children,
     onCheckedChange,
     onPress,
+    color = 'primary',
     hasRipple = false,
     hasIconContentWhenUnchecked = true,
     ...restProps
@@ -59,7 +60,7 @@ const Checkbox = React.forwardRef<CheckboxRef, CheckboxProps>((props, ref) => {
       ref={ref}
       role='checkbox'
       variant='outline'
-      color='primary'
+      color={isInvalid ? 'destructive' : color}
       value={checked ? 'on' : 'off'}
       aria-checked={checked}
       aria-disabled={isDisabled}

diff --git a/src/components/checkbox/constants/constants.ts b/src/components/checkbox/constants/constants.ts
@@ -1,5 +1,5 @@
 const DEFAULT_CHECKBOX_CLASSNAME =
-  'render-ui-checkbox p-0.5 bg-transparent rounded-md min-w-0 h-fit w-fit aspect-square shrink-0 text-white data-[state=checked]:bg-primary'
+  'render-ui-checkbox p-0.5 bg-transparent rounded-md min-w-0 h-fit w-fit aspect-square shrink-0 text-white data-[state=checked]:bg-primary data-[invalid=true]:ring-destructive'
 
 const DEFAULT_CHECKBOX_INDICATOR_CLASSNAME =
   'render-ui-checkbox-indicator h-[0.85rem] w-[0.85rem] stroke-white stroke-[2.5]'

diff --git a/src/components/checkbox/types/checkbox.ts b/src/components/checkbox/types/checkbox.ts
@@ -24,7 +24,7 @@ type CheckboxCustomProps = {
   isInvalid?: boolean
   isRequired?: boolean
   defaultChecked?: boolean
-  onCheckedChange?: React.Dispatch<React.SetStateAction<boolean | undefined>>
+  onCheckedChange?: React.Dispatch<React.SetStateAction<boolean>>
   hasIconContentWhenUnchecked?: boolean
 }
 

diff --git a/src/components/combobox/constants/constants.ts b/src/components/combobox/constants/constants.ts
@@ -1,5 +1,5 @@
 const DEFAULT_COMBOBOX_TRIGGER_CLASSNAME =
-  'render-ui-combobox-trigger group justify-between min-h-[40px] transition-[background-color,box-shadow] data-[empty=true]:text-mode-foreground/50 aria-[expanded=true]:ring-ring-color aria-[expanded=true]:ring-[1px] ring-offset-0 data-[focus-visible]:ring-offset-0 data-[hover=true]:ring-[1px] data-[expanded=true]:ring-[2px] data-[expanded=true]:data-[hover=true]:ring-[2px]'
+  'render-ui-combobox-trigger group justify-between min-h-[40px] transition-[background-color,box-shadow] data-[empty=true]:text-mode-foreground/50 aria-[expanded=true]:ring-ring-color aria-[expanded=true]:ring-[1px] ring-offset-0 data-[focus-visible]:ring-offset-0 data-[hover=true]:ring-[1px] data-[expanded=true]:ring-[2px] data-[hover=true]:data-[focus-visible=true]:ring-[2px] data-[expanded=true]:data-[hover=true]:ring-[2px] data-[invalid=true]:data-[expanded=true]:ring-destructive data-[invalid=true]:ring-destructive'
 
 const COMBOBOX_TRIGGER_SOLID_CLASSNAME = 'after:hidden before:hidden'
 

diff --git a/src/components/radio-group/components/radio-group-item.tsx b/src/components/radio-group/components/radio-group-item.tsx
@@ -23,16 +23,16 @@ const RadioGroupItem = React.forwardRef<RadioGroupItemRef, RadioGroupItemProps>(
     className,
     children,
     value,
-    color,
     variant,
     indicatorProps,
     onClick,
     role = 'radio',
+    color = 'primary',
     hasRipple = false,
     ...restProps
   } = props
 
-  const { name, value: rootValue, setValue } = useRadioGroupContext()
+  const { name, isInvalid, value: rootValue, setValue } = useRadioGroupContext()
 
   const {
     asChild: indicatorAsChild,
@@ -50,14 +50,18 @@ const RadioGroupItem = React.forwardRef<RadioGroupItemRef, RadioGroupItemProps>(
       ref={ref}
       role={role}
       value={value as string}
-      color={color ?? 'primary'}
+      color={isInvalid ? 'destructive' : color}
       variant={variant ?? isChecked ? 'solid' : 'outline'}
       hasRipple={hasRipple}
       aria-checked={isChecked}
       data-state={isChecked ? 'checked' : 'unchecked'}
       data-slot='item'
       onPress={chain(onClick, () => setValue(value))}
-      className={cx(DEFAULT_RADIO_GROUP_ITEM_CLASSNAME, className)}
+      className={cx(
+        DEFAULT_RADIO_GROUP_ITEM_CLASSNAME,
+        isInvalid ? 'ring-destructive' : '',
+        className,
+      )}
       {...restProps}
     >
       {functionCallOrValue(children, isChecked)}

diff --git a/src/components/radio-group/components/radio-group.tsx b/src/components/radio-group/components/radio-group.tsx
@@ -49,7 +49,7 @@ const RadioGroup = React.forwardRef<RadioGroupRef, RadioGroupProps>((props, ref)
       className={cx(DEFAULT_RADIO_GROUP_CLASSNAME, className)}
       {...restProps}
     >
-      <RadioGroupProvider value={{ name, value, setValue }}>
+      <RadioGroupProvider value={{ name, isInvalid, value, setValue }}>
         {functionCallOrValue(startContent, value)}
         {functionCallOrValue(children, value)}
         {functionCallOrValue(endContent, value)}

diff --git a/src/components/radio-group/types/radio-group-context.ts b/src/components/radio-group/types/radio-group-context.ts
@@ -1,7 +1,6 @@
 import { RadioGroupProps } from '@/components/radio-group/types/radio-group'
 
-type RadioGroupContext = Pick<RadioGroupProps, 'name'> & {
-  value: string | number
+type RadioGroupContext = Pick<RadioGroupProps, 'name' | 'value' | 'isInvalid'> & {
   setValue: React.Dispatch<React.SetStateAction<string | number>>
 }
 

diff --git a/src/components/radio-group/types/radio-group.ts b/src/components/radio-group/types/radio-group.ts
@@ -9,17 +9,17 @@ type RadioGroupRef = React.ElementRef<RadioGroupPrimitive>
 
 type RadioGroupPrimitiveProps = Omit<
   React.ComponentProps<RadioGroupPrimitive>,
-  'children' | 'disabled' | 'readonly' | 'required'
+  'children' | 'disabled' | 'readonly' | 'required' | 'value' | 'onValueChange'
 >
 
 type RadioGroupCustomProps = {
-  startContent?: React.ReactNode | ((value: string | number | undefined) => React.ReactNode)
-  children?: React.ReactNode | ((value: string | number | undefined) => React.ReactNode)
-  endContent?: React.ReactNode | ((value: string | number | undefined) => React.ReactNode)
+  startContent?: React.ReactNode | ((value: string | number) => React.ReactNode)
+  children?: React.ReactNode | ((value: string | number) => React.ReactNode)
+  endContent?: React.ReactNode | ((value: string | number) => React.ReactNode)
   name?: string
-  value?: string
+  value?: string | number
   defaultValue?: string | number | undefined
-  onValueChange?: (value: string | number | undefined) => void
+  onValueChange?: (value: string | number) => void
   isDisabled?: boolean
   isReadOnly?: boolean
   isInvalid?: boolean