Improve types and multiselect styles

ooni · Aug 6, 2024 · d7965df · d7965df
1 parent a71ecb0
commit d7965df
Show file tree

Hide file tree

Showing 12 changed files with 53 additions and 74 deletions.
diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
@@ -1,11 +1,10 @@
 import React, { forwardRef } from 'react'
 import { twMerge } from 'tailwind-merge'
-export interface CheckboxProps {
+import ErrorMessage from './ErrorMessage'
+
+type CheckboxProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & {
   error?: string
-  name: string
   label: string
-  disabled?: boolean
-  className?: string
 }
 
 const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
@@ -50,8 +49,8 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
         <div className="ml-2">
           <label htmlFor={name}>{label}</label>
         </div>
-        {/* {error} */}
       </div>
+      {error && <ErrorMessage>{error}</ErrorMessage>}
     </>
   ),
 )

diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx
@@ -1,11 +1,8 @@
-import React, { ReactNode } from 'react'
+import React from 'react'
+import { twMerge } from 'tailwind-merge'
 
-interface ErrorMessageProps {
-  children: ReactNode
-}
-
-const ErrorMessage = ({ children }: ErrorMessageProps) => {
-  return <p className="mt-1 text-sm text-red-700">{children}</p>
+const ErrorMessage = ({ children, className }: React.HTMLAttributes<HTMLElement>) => {
+  return <p className={twMerge("mt-1 text-sm text-red-700", className)}>{children}</p>
 }
 
 export default ErrorMessage
diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react'
 
-export interface IconButtonProps {
+export interface IconButtonProps extends React.HtmlHTMLAttributes<HTMLButtonElement> {
   icon: ReactNode
 }
 

diff --git a/src/components/Input.tsx b/src/components/Input.tsx
@@ -1,19 +1,17 @@
 import React, { forwardRef } from 'react'
 import ErrorMessage from './ErrorMessage'
 
-export interface InputProps {
+type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & {
   error?: string
   label?: string
-  name: string
-  className?: string
 }
 
 const Input = forwardRef<HTMLInputElement, InputProps>(
   ({ error, name, label, className, ...props }, ref) => {
     return (
       <div className={className}>
         {label && (
-          <label className="font-semibold mb-1 block" htmlFor={name}>
+          <label className="font-semibold mb-1 block leading-none" htmlFor={name}>
             {label}
           </label>
         )}

diff --git a/src/components/Label.tsx b/src/components/Label.tsx
diff --git a/src/components/MultiSelect.tsx b/src/components/MultiSelect.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import Select from 'react-select'
+import { twMerge } from 'tailwind-merge'
 import ErrorMessage from './ErrorMessage'
 
 export interface MultiSelectProps {
@@ -20,21 +21,22 @@ const MultiSelect = ({
 }: MultiSelectProps) => (
   <div className={className}>
     {label && (
-      <label className="font-semibold mb-1 block" htmlFor={name}>
+      <label className="font-semibold mb-1 block leading-none" htmlFor={name}>
         {label}
       </label>
     )}
     <Select
       options={options}
       isMulti
       styles={{
-        control: (baseStyles) => ({
-          ...baseStyles,
+        control: () => ({
+          outline: '0',
+          transition: 'all 100ms',
+          borderStyle: 'solid',
+          boxSizing: 'border-box',
           borderRadius: '32px',
           minHeight: '36.5px',
-          borderWidth: '1px',
           boxShadow: 'none',
-          paddingLeft: '5px',
         }),
         indicatorSeparator: () => ({
           display: 'none',
@@ -52,17 +54,21 @@ const MultiSelect = ({
           '&:before': {
             content: '"✕"',
             fontSize: '80%',
-            padding: '0 6px 0 4px',
+            padding: '0 8px 0 4px',
           },
         }),
       }}
       classNames={{
-        control: (state) =>
-          state.isFocused
-            ? 'border-blue-500 hover:border-blue-500'
-            : 'border-grey-700 hover:border-gray-800',
+        control: (state) =>(
+          twMerge(
+            'flex flex-wrap cursor-default items-center relative border',
+            state.isFocused
+              ? 'border-blue-500 hover:border-blue-500'
+              : 'border-gray-600 hover:border-gray-800'
+          )
+        ),
         multiValue: () => 'bg-gray-300',
-        multiValueRemove: () => 'hover:cursor-pointer text-red-700',
+        multiValueRemove: () => 'hover:cursor-pointer hover:text-red-700 self-center',
       }}
       {...props}
     />

diff --git a/src/components/MultiSelectCreatable.tsx b/src/components/MultiSelectCreatable.tsx
@@ -1,6 +1,7 @@
 import React, { FocusEvent, KeyboardEventHandler, useEffect } from 'react'
 import { MultiValue } from 'react-select'
 import CreatableSelect from 'react-select/creatable'
+import { twMerge } from 'tailwind-merge'
 import ErrorMessage from './ErrorMessage'
 
 interface Option {
@@ -64,7 +65,7 @@ const MultiSelectCreatable = ({
   return (
     <div className={className}>
       {label && (
-        <label className="font-semibold mb-1 block" htmlFor={name}>
+        <label className="font-semibold mb-1 block leading-none" htmlFor={name}>
           {label}
         </label>
       )}
@@ -79,21 +80,26 @@ const MultiSelectCreatable = ({
         inputValue={inputValue}
         value={value}
         classNames={{
-          control: (state) =>
-            state.isFocused
-              ? 'border-blue-500 hover:border-blue-500'
-              : 'border-gray-600 hover:border-gray-800',
+          control: (state) =>(
+            twMerge(
+              'flex flex-wrap cursor-default items-center relative border',
+              state.isFocused
+                ? 'border-blue-500 hover:border-blue-500'
+                : 'border-gray-600 hover:border-gray-800'
+            )
+          ),
           multiValue: () => 'bg-gray-300',
-          multiValueRemove: () => 'hover:cursor-pointer text-red-700',
+          multiValueRemove: () => 'hover:cursor-pointer hover:text-red-700 self-center',
         }}
         styles={{
-          control: (baseStyles) => ({
-            ...baseStyles,
+          control: () => ({
+            outline: '0',
+            transition: 'all 100ms',
+            borderStyle: 'solid',
+            boxSizing: 'border-box',
             borderRadius: '32px',
             minHeight: '36.5px',
-            borderWidth: '1px',
             boxShadow: 'none',
-            paddingLeft: '5px',
           }),
           indicatorSeparator: () => ({
             display: 'none',
@@ -111,7 +117,7 @@ const MultiSelectCreatable = ({
             '&:before': {
               content: '"✕"',
               fontSize: '80%',
-              padding: '0 6px 0 4px',
+              padding: '0 8px 0 4px',
             },
           }),
         }}

diff --git a/src/components/RadioButton.tsx b/src/components/RadioButton.tsx
@@ -1,8 +1,7 @@
 import React, { forwardRef } from 'react'
 
-export interface RadioButtonProps extends React.HTMLProps<HTMLInputElement> {
-  label?: string
-  name: string
+type RadioButtonProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & {
+  label: string
 }
 
 const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(

diff --git a/src/components/RadioGroup.tsx b/src/components/RadioGroup.tsx
@@ -1,13 +1,8 @@
 import React, { ChangeEvent, Children, ReactNode, cloneElement } from 'react'
 import { twMerge } from 'tailwind-merge'
 
-export interface RadioGroupProps {
-  children?: ReactNode
-  name?: string
-  value?: string
+type RadioGroupProps = React.InputHTMLAttributes<HTMLInputElement> & {
   flexDirection?: 'row' | 'column'
-  className?: string
-  onChange: (arg: string) => void
 }
 
 const RadioGroup = ({

diff --git a/src/components/Select.tsx b/src/components/Select.tsx
@@ -1,16 +1,16 @@
 import React, { forwardRef } from 'react'
 import ErrorMessage from './ErrorMessage'
 
-export interface SelectProps extends React.HTMLProps<HTMLSelectElement> {
-  label?: string
+type SelectProps = React.InputHTMLAttributes<HTMLSelectElement> & {
   error?: string
+  label?: string
 }
 
 const Select = forwardRef<HTMLSelectElement, SelectProps>(
   ({ label, name, className, error, ...props }, ref) => (
     <div className={className}>
       {label && (
-        <label className="font-semibold mb-1 block" htmlFor={name}>
+        <label className="font-semibold mb-1 block leading-none" htmlFor={name}>
           {label}
         </label>
       )}

diff --git a/src/components/Textarea.tsx b/src/components/Textarea.tsx
@@ -1,20 +1,17 @@
 import React, { forwardRef } from 'react'
 import ErrorMessage from './ErrorMessage'
 
-export interface TextareaProps {
+type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
   error?: string
-  fontSize?: number
   label?: string
-  name: string
-  className?: string
 }
 
 const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ error, label, name, className, ...props }, ref) => {
     return (
       <div className={className}>
         {label && (
-          <label className="font-semibold mb-1 block" htmlFor={name}>
+          <label className="font-semibold mb-1 block leading-none" htmlFor={name}>
             {label}
           </label>
         )}

diff --git a/src/index.ts b/src/index.ts
@@ -1,6 +1,5 @@
 export { default as Checkbox } from './components/Checkbox'
 export { default as Input } from './components/Input'
-export { default as Label } from './components/Label'
 export { default as LogoOONIRun } from './components/LogoOONIRun'
 export { default as Modal } from './components/Modal'
 export { default as MultiSelect } from './components/MultiSelect'