Improve types and multiselect styles

.storybook/main.ts

@@ -24,7 +24,7 @@ const config: StorybookConfig = {
   docs: {},
 
   typescript: {
-    reactDocgen: 'react-docgen-typescript'
-  }
+    reactDocgen: 'react-docgen-typescript',
+  },
 }
 export default config

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ooni-components",
-  "version": "0.7.0-alpha.3",
+  "version": "0.7.0-alpha.5",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",

src/components/Checkbox.tsx

@@ -1,17 +1,24 @@
 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>(
   ({ name, label, error, disabled = false, className, ...props }, ref) => (
     <>
-      <div className={twMerge(`relative flex items-start ${disabled && 'opacity-50'}`, className)}>
+      <div
+        className={twMerge(
+          `relative flex items-start ${disabled && 'opacity-50'}`,
+          className,
+        )}
+      >
         <div className="flex items-center h-5">
           <input
             ref={ref}
@@ -50,8 +57,8 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
         <div className="ml-2">
           <label htmlFor={name}>{label}</label>
         </div>
-        {/* {error} */}
       </div>
+      {error && <ErrorMessage>{error}</ErrorMessage>}
     </>
   ),
 )

src/components/ErrorMessage.tsx

@@ -1,11 +1,15 @@
-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

src/components/IconButton.tsx

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react'
 
-export interface IconButtonProps {
+export interface IconButtonProps
+  extends React.HtmlHTMLAttributes<HTMLButtonElement> {
   icon: ReactNode
 }
 

src/components/Input.tsx

@@ -1,18 +1,20 @@
 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
 }
 
 const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ error, name, label, ...props }, ref) => {
+  ({ error, name, label, className, ...props }, ref) => {
     return (
-      <div>
+      <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>
         )}

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',
+          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}
     />

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>
       )}
@@ -80,20 +81,25 @@ const MultiSelectCreatable = ({
         value={value}
         classNames={{
           control: (state) =>
-            state.isFocused
-              ? 'border-blue-500 hover:border-blue-500'
-              : 'border-gray-600 hover:border-gray-800',
+            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',
             },
           }),
         }}

src/components/RadioButton.tsx

@@ -1,8 +1,10 @@
 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>(

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 = ({

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>
       )}

src/components/Textarea.tsx

@@ -1,18 +1,20 @@
 import React, { forwardRef } from 'react'
 import ErrorMessage from './ErrorMessage'
 
-export interface TextareaProps {
+type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
   error?: string
   label?: string
-  name: string
 }
 
 const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ error, label, name, ...props }, ref) => {
+  ({ error, label, name, className, ...props }, ref) => {
     return (
-      <div>
+      <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>
         )}
@@ -27,7 +29,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
             p-2
             block 
             w-full
-          bg-white
+            bg-white
             align-middle 
             box-border
             rounded

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'
@@ -11,4 +10,3 @@ export { default as Select } from './components/Select'
 export { default as Textarea } from './components/Textarea'
 export { default as theme } from './theme'
 export { default as colors } from './theme/colors'
-

src/tailwind.css

@@ -43,33 +43,39 @@
   @apply px-16 py-3.5 text-2xl;
 }
 
+@layer components {
+  .container {
+    @apply max-w-7xl mx-auto w-full px-4;
+  }
+}
+
 @layer base {
   a {
     @apply text-blue-500 hover:text-blue-800;
   }
 
   h1 {
-    @apply text-5xl font-light leading-normal
+    @apply text-4xl/normal md:text-5xl/normal font-light;
   }
 
   h2 {
-    @apply text-4xl font-light leading-normal
+    @apply text-3xl/normal md:text-4xl/normal font-light;
   }
 
   h3 {
-    @apply text-2xl font-semibold leading-normal
+    @apply text-xl/normal md:text-2xl/normal font-semibold;
   }
 
   h4 {
-    @apply text-xl font-semibold leading-normal
+    @apply text-lg/normal md:text-xl/normal font-semibold;
   }
 
   h5 {
-    @apply text-base font-semibold leading-normal
+    @apply text-base/normal font-semibold;
   }
 
   h6 {
-    @apply text-xs font-semibold leading-normal
+    @apply text-xs/normal font-semibold;
   }
 
   * {