Merge pull request #167 from turistikrota/refactor/toggle

Refactor/toggle

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@turistikrota/ui",
-  "version": "1.3.9",
+  "version": "1.4.2",
   "description": "the turistikrota ui library for React",
   "main": "./index.js",
   "module": "./index.js",

packages/ui/src/dropdown/index.tsx

@@ -9,32 +9,60 @@ type PropsWithActive<P = any> = P & {
   active?: boolean
 }
 
+type DropdownVariant = 'primary' | 'secondary'
+
 type DropdownContext = {
   active: boolean
+  variant: DropdownVariant
   setActive: React.Dispatch<React.SetStateAction<boolean>>
 }
 
-type DropdownType = React.FC<React.PropsWithChildren> & {
+type DropdownType = React.FC<
+  React.PropsWithChildren<{
+    variant?: DropdownVariant
+  }>
+> & {
   Button: React.FC<React.PropsWithChildren<PropsWithActive>>
   Overlay: React.FC<React.PropsWithChildren>
   OverlayItem: React.FC<React.PropsWithChildren<PropsWithActive<OverlayItemProps>>>
 }
 
+type DropdownVariantMap = {
+  button: string
+  overlay: string
+  inactiveItem: string
+}
+
+const variantMap: Record<DropdownVariant, DropdownVariantMap> = {
+  primary: {
+    button: 'bg-default',
+    inactiveItem: 'hover:bg-second',
+    overlay: 'bg-default',
+  },
+  secondary: {
+    button: 'bg-second',
+    inactiveItem: 'hover:bg-default',
+    overlay: 'bg-second',
+  },
+}
+
 const Context = React.createContext<DropdownContext>({
   active: false,
+  variant: 'primary',
   setActive: () => {},
 })
 
 const Button: React.FC<React.PropsWithChildren<PropsWithActive>> = ({ active, children }) => {
-  const { active: activeContext, setActive } = useContext(Context)
+  const { active: activeContext, setActive, variant } = useContext(Context)
   const debouncedBlur = debounce((activeContext) => {
     if (activeContext) setActive(false)
   }, 200)
   return (
     <button
       type='button'
-      className={`bg-default group peer inline-flex w-full items-center justify-center rounded-md border p-2 text-sm font-medium transition-colors focus:outline-none focus:ring-0 focus:ring-transparent focus-visible:outline-none
+      className={`group peer inline-flex w-full items-center justify-center rounded-md border p-2 text-sm font-medium transition-colors focus:outline-none focus:ring-0 focus:ring-transparent focus-visible:outline-none
         ${active ? 'text-primary' : 'text-gray-700 dark:text-gray-300'}
+        ${variantMap[variant].button}
       `}
       onClick={() => setActive(!activeContext)}
       onBlur={() => debouncedBlur(activeContext)}
@@ -52,12 +80,13 @@ const Button: React.FC<React.PropsWithChildren<PropsWithActive>> = ({ active, ch
 }
 
 const Overlay: React.FC<React.PropsWithChildren> = ({ children }) => {
-  const { active } = useContext(Context)
+  const { active, variant } = useContext(Context)
   return (
     <div
       className={`
-    bg-default absolute right-0 z-10 mt-2 w-40 origin-top-right rounded-md border p-2 ring-0 transition-opacity
+    absolute right-0 z-10 mt-2 w-40 origin-top-right rounded-md border p-2 ring-0 transition-opacity
     ${active ? 'visible opacity-100' : 'invisible opacity-0'}
+    ${variantMap[variant].overlay}
     `}
     >
       <div className='space-y-1' role='menu' aria-orientation='vertical' aria-labelledby='options-menu'>
@@ -72,13 +101,14 @@ const OverlayItem: React.FC<React.PropsWithChildren<PropsWithActive<OverlayItemP
   children,
   onClick,
 }) => {
+  const { variant } = useContext(Context)
   return (
     <a
       href='#'
       className={`flex items-center justify-between rounded-md p-2 text-sm transition-colors ${
         active
           ? 'text-primary bg-primary-200 dark:bg-primary-700 cursor-auto bg-opacity-10 dark:bg-opacity-10'
-          : 'hover:bg-second text-gray-700 dark:text-gray-300'
+          : `${variantMap[variant].inactiveItem} text-gray-700 dark:text-gray-300`
       }`}
       role='menuitem'
       onClick={onClick}
@@ -89,10 +119,10 @@ const OverlayItem: React.FC<React.PropsWithChildren<PropsWithActive<OverlayItemP
   )
 }
 
-const Dropdown: DropdownType = ({ children }) => {
+const Dropdown: DropdownType = ({ children, variant = 'primary' }) => {
   const [active, setActive] = useState(false)
   return (
-    <Context.Provider value={{ active, setActive }}>
+    <Context.Provider value={{ active, setActive, variant }}>
       <div className='relative hidden lg:block'>{children}</div>
     </Context.Provider>
   )

packages/ui/src/form/toggle/index.tsx

@@ -5,6 +5,7 @@ type Size = 'sm' | 'md' | 'lg'
 
 type Props = {
   defaultChecked?: boolean
+  secondary?: boolean
   checked?: boolean
   disabled?: boolean
   onChange?: (checked: boolean) => void
@@ -15,6 +16,7 @@ type Props = {
 
 type Variants = {
   default: string
+  secondary: string
   checked: string
   circle: string
   circleChecked: string
@@ -28,31 +30,36 @@ type Sizes = {
 
 const variants: Record<Variant, Variants> = {
   primary: {
-    default: 'bg-second',
+    default: 'bg-default',
+    secondary: 'bg-second',
     checked: 'bg-primary-500 bg-opacity-20 dark:bg-primary-500 dark:bg-opacity-20',
     circleChecked: 'bg-primary-500 dark:bg-primary-500',
     circle: 'bg-gray-400 dark:bg-gray-700',
   },
   secondary: {
-    default: 'bg-second',
+    default: 'bg-default',
+    secondary: 'bg-second',
     checked: 'bg-secondary-500 bg-opacity-20 dark:bg-secondary-500 dark:bg-opacity-20',
     circleChecked: 'bg-secondary-500 dark:bg-secondary-500',
     circle: 'bg-gray-400 dark:bg-gray-700',
   },
   success: {
-    default: 'bg-second',
+    default: 'bg-default',
+    secondary: 'bg-second',
     checked: 'bg-green-500 bg-opacity-20 dark:bg-green-500 dark:bg-opacity-20',
     circleChecked: 'bg-green-500 dark:bg-green-500',
     circle: 'bg-gray-400 dark:bg-gray-700',
   },
   error: {
-    default: 'bg-second',
+    default: 'bg-default',
+    secondary: 'bg-second',
     checked: 'bg-red-500 bg-opacity-20 dark:bg-red-500 dark:bg-opacity-20',
     circleChecked: 'bg-red-500 dark:bg-red-500',
     circle: 'bg-gray-400 dark:bg-gray-700',
   },
   warning: {
-    default: 'bg-second',
+    default: 'bg-default',
+    secondary: 'bg-second',
     checked: 'bg-orange-500 bg-opacity-20 dark:bg-orange-500 dark:bg-opacity-20',
     circleChecked: 'bg-orange-500 dark:bg-orange-500',
     circle: 'bg-gray-400 dark:bg-gray-700',
@@ -82,6 +89,7 @@ const ToggleButton: React.FC<Props> = ({
   checked: checkedProp,
   variant = 'primary',
   size = 'md',
+  secondary = false,
   disabled = false,
   title,
   onChange,
@@ -107,7 +115,7 @@ const ToggleButton: React.FC<Props> = ({
       type='button'
       className={`disable-highlight relative inline-flex items-center rounded-full shadow-none transition-colors focus:ring-0 focus:ring-transparent focus:ring-offset-0 focus:ring-offset-transparent ${
         sizes[size].default
-      } ${checked ? variants[variant].checked : variants[variant].default}`}
+      } ${checked ? variants[variant].checked : secondary ? variants[variant].secondary : variants[variant].default}`}
       onClick={handleChange}
       disabled={disabled}
       title={title}