fix: better integrated select component

package.json

@@ -35,6 +35,19 @@
     "react-dom": "18.3.1",
     "react-router-dom": "6.27.0"
   },
+  "peerDependencies": {
+    "@chakra-ui/react": "2.10.3",
+    "@chakra-ui/theme-tools": "2.2.6",
+    "@emotion/css": "11.13.4",
+    "@emotion/react": "11.13.3",
+    "@emotion/styled": "11.13.0",
+    "chakra-react-select": "5.0.2",
+    "classnames": "2.5.1",
+    "framer-motion": "11.11.11",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-router-dom": "6.27.0"
+  },
   "devDependencies": {
     "@rollup/plugin-commonjs": "28.0.1",
     "@rollup/plugin-node-resolve": "15.3.0",

rollup.config.js

@@ -49,6 +49,7 @@ export default [
     external: [
       '@chakra-ui/react',
       '@chakra-ui/theme-tools',
+      'chakra-react-select',
       '@emotion/css',
       '@emotion/react',
       '@emotion/styled',

src/components/index.ts

@@ -20,3 +20,4 @@ export * from './search-bar'
 export * from './account-menu'
 export * from './form'
 export * from './data-table'
+export * from './select'

src/components/notification-badge.tsx

@@ -12,20 +12,18 @@ export const NotificationBadge = ({
   children,
 }: NotificationBadgeProps) => {
   return (
-    <div className={cx('koupr-inline-block')}>
-      <div
-        className={cx(
-          'koupr-flex',
-          'koupr-items-center',
-          'koupr-justify-center',
-          'koupr-relative',
-        )}
-      >
-        {children}
-        {hasBadge ? (
-          <Circle size="10px" bg="red" position="absolute" top={0} right={0} />
-        ) : null}
-      </div>
+    <div
+      className={cx(
+        'koupr-flex',
+        'koupr-items-center',
+        'koupr-justify-center',
+        'koupr-relative',
+      )}
+    >
+      {children}
+      {hasBadge ? (
+        <Circle size="10px" bg="red" position="absolute" top={0} right={0} />
+      ) : null}
     </div>
   )
 }

src/components/page-pagination.tsx

@@ -48,36 +48,34 @@ export const PagePagination = ({
   return (
     <>
       {!hasPageSwitcher && !hasSizeSelector ? null : (
-        <div className={cx('koupr-inline-block')}>
-          <div
-            className={cx(
-              'koupr-flex',
-              'koupr-flex-row',
-              'koupr-items-center',
-              'koupr-gap-1.5',
-            )}
-            style={style}
-          >
-            {hasPageSwitcher ? (
-              <Pagination
-                uiSize={uiSize}
-                page={page}
-                totalPages={totalPages}
-                onPageChange={setPage}
-                disableMiddleNav={disableMiddleNav}
-                disableLastNav={disableLastNav}
-              />
-            ) : null}
-            {hasSizeSelector ? (
-              <Select defaultValue={size} onChange={handleSizeChange}>
-                {steps?.map((step, index) => (
-                  <option key={index} value={step.toString()}>
-                    {step} items
-                  </option>
-                ))}
-              </Select>
-            ) : null}
-          </div>
+        <div
+          className={cx(
+            'koupr-flex',
+            'koupr-flex-row',
+            'koupr-items-center',
+            'koupr-gap-1.5',
+          )}
+          style={style}
+        >
+          {hasPageSwitcher ? (
+            <Pagination
+              uiSize={uiSize}
+              page={page}
+              totalPages={totalPages}
+              onPageChange={setPage}
+              disableMiddleNav={disableMiddleNav}
+              disableLastNav={disableLastNav}
+            />
+          ) : null}
+          {hasSizeSelector ? (
+            <Select defaultValue={size} onChange={handleSizeChange}>
+              {steps?.map((step, index) => (
+                <option key={index} value={step.toString()}>
+                  {step} items
+                </option>
+              ))}
+            </Select>
+          ) : null}
         </div>
       )}
     </>

src/components/select.tsx

@@ -0,0 +1,60 @@
+import { ComponentProps, useMemo } from 'react'
+import { SystemStyleObject, useColorMode } from '@chakra-ui/react'
+import {
+  Select as ChakraReactSelect,
+  ChakraStylesConfig,
+} from 'chakra-react-select'
+import { GroupBase } from 'react-select'
+
+export const Select = <
+  Option = unknown,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>,
+>(
+  props: ComponentProps<typeof ChakraReactSelect<Option, IsMulti, Group>>,
+) => {
+  const { colorMode } = useColorMode()
+  const chakraStyles = useMemo(() => {
+    let bg = 'transparent'
+    if (colorMode === 'light') {
+      bg = 'white'
+    } else if (colorMode === 'dark') {
+      bg = 'gray.800'
+    }
+    return {
+      control: (provided: SystemStyleObject) => ({
+        ...provided,
+        bg,
+      }),
+      dropdownIndicator: (provided: SystemStyleObject) => ({
+        ...provided,
+        bg,
+        cursor: 'inherit',
+        position: 'absolute',
+        right: '0px',
+      }),
+      menuList: (provided: SystemStyleObject) => ({
+        ...provided,
+        borderRadius: '15px',
+      }),
+      indicatorSeparator: (provided: SystemStyleObject) => ({
+        ...provided,
+        display: 'none',
+      }),
+      placeholder: (provided: SystemStyleObject) => ({
+        ...provided,
+        textAlign: 'center',
+      }),
+      singleValue: (provided: SystemStyleObject) => ({
+        ...provided,
+        textAlign: 'center',
+      }),
+    } as ChakraStylesConfig<Option, IsMulti, Group>
+  }, [colorMode])
+  return (
+    <ChakraReactSelect<Option, IsMulti, Group>
+      {...props}
+      chakraStyles={chakraStyles}
+    />
+  )
+}

src/components/switch-card.tsx

@@ -71,75 +71,71 @@ export const SwitchCard = ({
 
   if (isCollapsed) {
     return (
-      <div className={cx('koupr-inline-block')}>
-        <Popover>
-          <PopoverTrigger>
-            <div>
-              <Tooltip label={label}>
-                <IconButton
-                  icon={icon}
-                  variant="outline"
-                  className={cx(
-                    'koupr-w-[50px]',
-                    'koupr-h-[50px]',
-                    'koupr-p-1.5',
-                    'koupr-rounded-md',
-                  )}
-                  aria-label={label}
-                  title={label}
-                />
-              </Tooltip>
-            </div>
-          </PopoverTrigger>
-          <PopoverContent>
-            <PopoverBody>{children}</PopoverBody>
-          </PopoverContent>
-        </Popover>
-      </div>
+      <Popover>
+        <PopoverTrigger>
+          <div>
+            <Tooltip label={label}>
+              <IconButton
+                icon={icon}
+                variant="outline"
+                className={cx(
+                  'koupr-w-[50px]',
+                  'koupr-h-[50px]',
+                  'koupr-p-1.5',
+                  'koupr-rounded-md',
+                )}
+                aria-label={label}
+                title={label}
+              />
+            </Tooltip>
+          </div>
+        </PopoverTrigger>
+        <PopoverContent>
+          <PopoverBody>{children}</PopoverBody>
+        </PopoverContent>
+      </Popover>
     )
   } else {
     return (
-      <div className={cx('koupr-inline-block')}>
+      <div
+        className={cx(
+          'koupr-flex',
+          'koupr-flex-col',
+          'koupr-gap-0',
+          'koupr-border',
+          'koupr-border-gray-200',
+          'dark:koupr-border-gray-600',
+          'koupr-rounded-md',
+        )}
+        style={{ minWidth: expandedMinWidth }}
+      >
         <div
           className={cx(
             'koupr-flex',
-            'koupr-flex-col',
-            'koupr-gap-0',
-            'koupr-border',
-            'koupr-border-gray-200',
-            'dark:koupr-border-gray-600',
-            'koupr-rounded-md',
+            'koupr-flex-row',
+            'koupr-items-center',
+            'koupr-gap-1',
+            'koupr-h-[50px]',
+            'koupr-px-1',
+            'koupr-shrink-0',
           )}
-          style={{ minWidth: expandedMinWidth }}
         >
+          {icon}
+          <span className={cx('koupr-grow')}>{label}</span>
+          <Switch isChecked={isActive} onChange={handleChange} />
+        </div>
+        {isActive ? (
           <div
             className={cx(
-              'koupr-flex',
-              'koupr-flex-row',
-              'koupr-items-center',
-              'koupr-gap-1',
-              'koupr-h-[50px]',
-              'koupr-px-1',
-              'koupr-shrink-0',
+              'koupr-pt-0',
+              'koupr-pr-1',
+              'koupr-pb-1',
+              'koupr-pl-1',
             )}
           >
-            {icon}
-            <span className={cx('koupr-grow')}>{label}</span>
-            <Switch isChecked={isActive} onChange={handleChange} />
+            {children}
           </div>
-          {isActive ? (
-            <div
-              className={cx(
-                'koupr-pt-0',
-                'koupr-pr-1',
-                'koupr-pb-1',
-                'koupr-pl-1',
-              )}
-            >
-              {children}
-            </div>
-          ) : null}
-        </div>
+        ) : null}
       </div>
     )
   }

src/stories/components/notification-badge.stories.tsx

@@ -1,6 +1,7 @@
 import { IconButton } from '@chakra-ui/react'
 import { IconStacks, NotificationBadge } from '@koupr/ui'
 import { Meta, StoryObj } from '@storybook/react'
+import cx from 'classnames'
 
 const meta: Meta<typeof NotificationBadge> = {
   title: 'Components/Notification Badge',
@@ -15,8 +16,10 @@ export const Default: Story = {
     hasBadge: true,
   },
   render: (args) => (
-    <NotificationBadge {...args}>
-      <IconButton icon={<IconStacks />} aria-label="Tasks" />
-    </NotificationBadge>
+    <div className={cx('inline-block')}>
+      <NotificationBadge {...args}>
+        <IconButton icon={<IconStacks />} aria-label="Tasks" />
+      </NotificationBadge>
+    </div>
   ),
 }

src/stories/components/page-pagination.stories.tsx

@@ -1,5 +1,6 @@
 import { PagePagination, usePagePagination } from '@koupr/ui'
 import { Meta, StoryObj } from '@storybook/react'
+import cx from 'classnames'
 import { useLocation, useNavigate } from 'react-router-dom'
 
 const meta: Meta<typeof PagePagination> = {
@@ -28,14 +29,16 @@ export const Default: Story = {
     })
 
     return (
-      <PagePagination
-        {...args}
-        page={page}
-        size={size}
-        steps={steps}
-        setPage={setPage}
-        setSize={setSize}
-      />
+      <div className={cx('inline-block')}>
+        <PagePagination
+          {...args}
+          page={page}
+          size={size}
+          steps={steps}
+          setPage={setPage}
+          setSize={setSize}
+        />
+      </div>
     )
   },
 }