refactor(components): refactor components and fix bugs

ruru-m07 · Aug 15, 2024 · fe22b54 · fe22b54
1 parent 90c8087
commit fe22b54
Show file tree

Hide file tree

Showing 34 changed files with 305 additions and 138 deletions.
diff --git a/apps/www/content/docs/changelog.mdx → .changeset/changelog.mdx b/apps/www/content/docs/changelog.mdx → .changeset/changelog.mdx
diff --git a/apps/www/__registry__/index.tsx b/apps/www/__registry__/index.tsx
@@ -101,6 +101,18 @@ export const Index: Record<string, any> = {
       category: "undefined",
       subcategory: undefined,
     },
+    tabs: {
+      name: "tabs",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(
+        () => import("@/../../packages/ui/src/components/tabs"),
+      ),
+      source: "",
+      files: ["@/../../packages/ui/src/components/tabs.tsx"],
+      category: "undefined",
+      subcategory: undefined,
+    },
     textarea: {
       name: "textarea",
       type: "components:ui",

diff --git a/apps/www/components/preview/index.tsx b/apps/www/components/preview/index.tsx
@@ -20,6 +20,7 @@ import {
   SelectGroup,
   SelectItem,
   SelectLabel,
+  SelectSeparator,
   SelectTrigger,
   SelectValue,
 } from "ruru-ui/components/select";
@@ -145,7 +146,8 @@ export default {
           </SelectTrigger>
           <SelectContent>
             <SelectGroup>
-              <SelectLabel>Fruits</SelectLabel>
+              <SelectLabel>Languages</SelectLabel>
+              <SelectSeparator />
               <SelectItem value="C ">C </SelectItem>
               <SelectItem value="C++">C++</SelectItem>
               <SelectItem value="Java">Java</SelectItem>

diff --git a/apps/www/components/selectLargeData.tsx b/apps/www/components/selectLargeData.tsx
@@ -0,0 +1,39 @@
+import {
+  Select,
+  SelectContent,
+  SelectTrigger,
+  SelectValue,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+} from "ruru-ui/components/select";
+
+const SelectCountries = () => {
+  return (
+    <>
+      <Select>
+        <SelectTrigger className="w-[180px]">
+          <SelectValue placeholder="Select a version." />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            <SelectLabel>Fruits</SelectLabel>
+            <SelectSeparator />
+            <SelectScrollUpButton />
+            {Array.from({ length: 50 }, (_, index) => (
+              <SelectItem key={index} value={String(index)}>
+                Ruru-UI-V{index}
+              </SelectItem>
+            ))}
+            <SelectScrollDownButton />
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+    </>
+  );
+};
+
+export default SelectCountries;
diff --git a/apps/www/content/docs/components/button.mdx b/apps/www/content/docs/components/button.mdx
@@ -235,7 +235,7 @@ The `Button` component allows you to show a loading spinner when the button is i
 
 <Tabs items={["Preview", "Code"]}>
   <Tab className={"flex justify-between gap-5"} value="Preview" >
-     <Button loading variant={"secondary"} disabled size={"small"}>
+    <Button loading variant={"secondary"} disabled size={"small"}>
         default
     </Button>
     <Button loading variant={"secondary"} disabled>
@@ -251,15 +251,17 @@ The `Button` component allows you to show a loading spinner when the button is i
 
     export function ButtonDemo() {
       return (
-        <Button loading variant={"secondary"} disabled size={"small"}>
-            default
-        </Button>
-        <Button loading variant={"secondary"} disabled>
-            default
-        </Button>
-        <Button loading variant={"secondary"} disabled size={"large"}>
-            default
-        </Button>
+        <div className={"flex justify-between gap-5"}>
+          <Button loading variant={"secondary"} disabled size={"small"}>
+              default
+          </Button>
+          <Button loading variant={"secondary"} disabled>
+              default
+          </Button>
+          <Button loading variant={"secondary"} disabled size={"large"}>
+              default
+          </Button>
+        </div>
       )
     }
     ```

diff --git a/apps/www/content/docs/components/select.mdx b/apps/www/content/docs/components/select.mdx
@@ -19,6 +19,7 @@ import {
   SelectScrollDownButton,
 } from "ruru-ui/components/select";
 import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
+import SelectCountries from "../../../components/selectLargeData.tsx"
 
 ## Installation
 
@@ -71,6 +72,7 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs";
                 <SelectContent>
                     <SelectGroup>
                         <SelectLabel>Fruits</SelectLabel>
+                        <SelectSeparator />
                         <SelectItem value="apple">Apple</SelectItem>
                         <SelectItem value="banana">Banana</SelectItem>
                         <SelectItem value="blueberry">Blueberry</SelectItem>
@@ -106,6 +108,7 @@ export function SelectDemo() {
                 <SelectContent>
                 <SelectGroup>
                     <SelectLabel>Fruits</SelectLabel>
+                    <SelectSeparator />
                     <SelectItem value="apple">Apple</SelectItem>
                     <SelectItem value="banana">Banana</SelectItem>
                     <SelectItem value="blueberry">Blueberry</SelectItem>
@@ -139,6 +142,7 @@ The `Select` component can be used to create a basic dropdown menu.
    <SelectContent>
      <SelectGroup>
        <SelectLabel>Fruits</SelectLabel>
+       <SelectSeparator />
        <SelectItem value="apple">Apple</SelectItem>
        <SelectItem value="banana">Banana</SelectItem>
        <SelectItem value="blueberry">Blueberry</SelectItem>
@@ -158,6 +162,7 @@ The `Select` component can be used to create a basic dropdown menu.
         SelectContent,
         SelectLabel,
         SelectItem,
+        SelectSeparator,
     } from "ruru-ui/components/select";
 
     export function BasicSelect() {
@@ -169,6 +174,7 @@ The `Select` component can be used to create a basic dropdown menu.
                 <SelectContent>
                     <SelectGroup>
                         <SelectLabel>Fruits</SelectLabel>
+                        <SelectSeparator />
                         <SelectItem value="apple">Apple</SelectItem>
                         <SelectItem value="banana">Banana</SelectItem>
                         <SelectItem value="blueberry">Blueberry</SelectItem>
@@ -197,6 +203,7 @@ You can disable the `Select` component by passing the `disabled` prop to the `Se
   <SelectContent>
     <SelectGroup>
       <SelectLabel>Fruits</SelectLabel>
+      <SelectSeparator />
       <SelectItem value="apple">Apple</SelectItem>
       <SelectItem value="banana">Banana</SelectItem>
       <SelectItem value="blueberry">Blueberry</SelectItem>
@@ -216,6 +223,7 @@ You can disable the `Select` component by passing the `disabled` prop to the `Se
         SelectContent,
         SelectLabel,
         SelectItem,
+        SelectSeparator,
     } from "ruru-ui/components/select";
 
     export function DisabledSelect() {
@@ -227,6 +235,7 @@ You can disable the `Select` component by passing the `disabled` prop to the `Se
                 <SelectContent>
                     <SelectGroup>
                         <SelectLabel>Fruits</SelectLabel>
+                        <SelectSeparator />
                         <SelectItem value="apple">Apple</SelectItem>
                         <SelectItem value="banana">Banana</SelectItem>
                         <SelectItem value="blueberry">Blueberry</SelectItem>
@@ -256,6 +265,7 @@ You can set a default value for the `Select` component by passing the `defaultVa
    <SelectContent>
      <SelectGroup>
        <SelectLabel>Fruits</SelectLabel>
+       <SelectSeparator />
        <SelectItem value="apple">Apple</SelectItem>
        <SelectItem value="banana">Banana</SelectItem>
        <SelectItem value="blueberry">Blueberry</SelectItem>
@@ -275,6 +285,7 @@ You can set a default value for the `Select` component by passing the `defaultVa
    SelectContent,
    SelectLabel,
    SelectItem,
+   SelectSeparator,
  } from "ruru-ui/components/select";
 
 export function DefaultValueSelect() {
@@ -286,6 +297,7 @@ export function DefaultValueSelect() {
       <SelectContent>
         <SelectGroup>
           <SelectLabel>Fruits</SelectLabel>
+          <SelectSeparator />
           <SelectItem value="apple">Apple</SelectItem>
           <SelectItem value="banana">Banana</SelectItem>
           <SelectItem value="blueberry">Blueberry</SelectItem>
@@ -300,6 +312,36 @@ export function DefaultValueSelect() {
 </Tab>
 </Tabs>
 
+### ScrollDownButton and ScrollUpButton
+
+You can add scroll buttons to the `Select` component by using the `SelectScrollDownButton` and `SelectScrollUpButton` components.
+
+<Tabs items={["Preview", "Code"]}>
+<Tab className={"flex justify-center"} value="Preview">
+<SelectCountries />
+</Tab>
+<Tab className={"-mt-8"} value="Code">
+  <Select>
+    <SelectTrigger className="w-[180px]">
+      <SelectValue placeholder="Select a version." />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectGroup>
+        <SelectLabel>Fruits</SelectLabel>
+        <SelectSeparator />
+        <SelectScrollUpButton />
+        {Array.from({ length: 50 }, (_, index) => (
+          <SelectItem key={index} value={String(index)}>
+            Ruru-UI-V{index}
+          </SelectItem>
+        ))}
+        <SelectScrollDownButton />
+      </SelectGroup>
+    </SelectContent>
+  </Select>
+</Tab>
+</Tabs>
+
 ## Props
 
 | Name              | Type                     | Default   | Description                                |

diff --git a/apps/www/content/docs/meta.json b/apps/www/content/docs/meta.json
@@ -6,7 +6,6 @@
     "installation",
     "cli",
     "dark-mode",
-    "changelog",
     "---Components---",
     "...components",
     "---Others---",

diff --git a/apps/www/public/registry/components/avatar.json b/apps/www/public/registry/components/avatar.json
@@ -3,7 +3,7 @@
   "files": [
     {
       "name": "avatar.tsx",
-      "content": "import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\ntype AvatarProps = Omit<\n  React.ComponentPropsWithoutRef<\"img\">,\n  \"src\" | \"alt\"\n> & {\n  className?: string;\n  size?: number;\n  placeholder?: string;\n  src: string;\n};\nconst Avatar = React.forwardRef<HTMLImageElement, AvatarProps>(\n  ({ className, size = 30, src, placeholder, ...props }, ref) => {\n    return (\n      <img\n        className={cn(`rounded-full border`, className)}\n        aria-label=\"avatar\"\n        ref={ref}\n        style={{\n          width: `${size}px`,\n          height: `${size}px`,\n        }}\n        src={src}\n        alt={placeholder}\n        {...props}\n      />\n    );\n  },\n);\nAvatar.displayName = \"Avatar\";\ntype AvatarGroupProps = Omit<\n  React.ComponentPropsWithoutRef<\"div\">,\n  \"children\"\n> & {\n  className?: string;\n  members: { src: string; alt: string }[];\n  size?: number;\n  limit?: number;\n  aClassName?: string;\n  lnClassName?: string;\n};\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  (\n    { className, aClassName, lnClassName, size = 30, members, limit, ...props },\n    ref,\n  ) => {\n    const displayedMembers =\n      limit && members.length > limit ? members.slice(0, limit - 1) : members;\n    const extraMembersCount =\n      limit && members.length > limit ? members.length - limit + 1 : 0;\n    return (\n      <div className={cn(`flex`, className)} ref={ref} {...props}>\n        {displayedMembers.map((member, index) => (\n          <Avatar\n            key={index}\n            className={cn(`-ml-2 border`, aClassName)}\n            size={size}\n            src={member.src}\n            placeholder={member.alt}\n          />\n        ))}\n        {extraMembersCount > 0 && (\n          <div\n            className={cn(\n              `lastcount -ml-2 flex items-center justify-center rounded-full border bg-primary-foreground`,\n              lnClassName,\n            )}\n            style={{\n              width: `${size}px`,\n              height: `${size}px`,\n            }}\n          >\n            +{extraMembersCount}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\nAvatarGroup.displayName = \"AvatarGroup\";\ntype AvatarWithBadgeProps = Omit<\n  React.ComponentPropsWithoutRef<\"div\">,\n  \"children\"\n> & {\n  className?: string;\n  size?: number;\n  src: string;\n  placeholder?: string;\n  badgeSrc: string;\n  iClassName?: string;\n  sClassName?: string;\n};\nconst AvatarWithBadge = React.forwardRef<HTMLDivElement, AvatarWithBadgeProps>(\n  (\n    {\n      className,\n      sClassName,\n      iClassName,\n      size = 30,\n      src,\n      placeholder,\n      badgeSrc,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        className={cn(\"relative inline-block\", className)}\n        style={{\n          width: `${size}px`,\n          height: `${size}px`,\n        }}\n        ref={ref}\n        {...props}\n      >\n        <img\n          className={cn(\"rounded-full border\", iClassName)}\n          style={{\n            width: \"100%\",\n            height: \"100%\",\n          }}\n          src={src}\n          alt={placeholder}\n        />\n        <img\n          className={cn(\n            \"absolute bottom-0 left-0 rounded-full border\",\n            sClassName,\n          )}\n          style={{\n            width: `${size / 3}px`,\n            height: `${size / 3}px`,\n          }}\n          src={badgeSrc}\n          alt=\"badge\"\n        />\n      </div>\n    );\n  },\n);\nAvatarWithBadge.displayName = \"AvatarWithBadge\";\nexport { Avatar, AvatarGroup, AvatarWithBadge };\n"
+      "content": "import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\n\n\ntype AvatarProps = Omit<\n  React.ComponentPropsWithoutRef<\"img\">,\n  \"src\" | \"alt\"\n> & {\n  \n  className?: string;\n  \n  size?: number;\n  \n  placeholder?: string;\n  \n  src: string;\n};\n\n\nconst Avatar = React.forwardRef<HTMLImageElement, AvatarProps>(\n  ({ className, size = 30, src, placeholder, ...props }, ref) => {\n    return (\n      <img\n        className={cn(`rounded-full border`, className)}\n        aria-label=\"avatar\"\n        ref={ref}\n        style={{\n          width: `${size}px`,\n          height: `${size}px`,\n        }}\n        src={src}\n        alt={placeholder}\n        {...props}\n      />\n    );\n  },\n);\nAvatar.displayName = \"Avatar\";\n\ntype AvatarGroupProps = Omit<\n  React.ComponentPropsWithoutRef<\"div\">,\n  \"children\"\n> & {\n  \n  className?: string;\n  \n  members: { src: string; alt: string }[];\n  \n  size?: number;\n  \n  limit?: number;\n  aClassName?: string;\n  lnClassName?: string;\n};\n\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  (\n    { className, aClassName, lnClassName, size = 30, members, limit, ...props },\n    ref,\n  ) => {\n    const displayedMembers =\n      limit && members.length > limit ? members.slice(0, limit - 1) : members;\n    const extraMembersCount =\n      limit && members.length > limit ? members.length - limit + 1 : 0;\n\n    return (\n      <div className={cn(`flex`, className)} ref={ref} {...props}>\n        {displayedMembers.map((member, index) => (\n          <Avatar\n            key={index}\n            className={cn(`-ml-2 border`, aClassName)}\n            size={size}\n            src={member.src}\n            placeholder={member.alt}\n          />\n        ))}\n        {extraMembersCount > 0 && (\n          <div\n            className={cn(\n              `lastcount -ml-2 flex items-center justify-center rounded-full border bg-primary-foreground`,\n              lnClassName,\n            )}\n            style={{\n              width: `${size}px`,\n              height: `${size}px`,\n            }}\n          >\n            +{extraMembersCount}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\nAvatarGroup.displayName = \"AvatarGroup\";\n\ntype AvatarWithBadgeProps = Omit<\n  React.ComponentPropsWithoutRef<\"div\">,\n  \"children\"\n> & {\n  \n  className?: string;\n  \n  size?: number;\n  \n  src: string;\n  \n  placeholder?: string;\n  \n  badgeSrc: string;\n  iClassName?: string;\n  sClassName?: string;\n};\n\n\nconst AvatarWithBadge = React.forwardRef<HTMLDivElement, AvatarWithBadgeProps>(\n  (\n    {\n      className,\n      sClassName,\n      iClassName,\n      size = 30,\n      src,\n      placeholder,\n      badgeSrc,\n      ...props\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        className={cn(\"relative inline-block\", className)}\n        style={{\n          width: `${size}px`,\n          height: `${size}px`,\n        }}\n        ref={ref}\n        {...props}\n      >\n        <img\n          className={cn(\"rounded-full border\", iClassName)}\n          style={{\n            width: \"100%\",\n            height: \"100%\",\n          }}\n          src={src}\n          alt={placeholder}\n        />\n        <img\n          className={cn(\n            \"absolute bottom-0 left-0 rounded-full border\",\n            sClassName,\n          )}\n          style={{\n            width: `${size / 3}px`,\n            height: `${size / 3}px`,\n          }}\n          src={badgeSrc}\n          alt=\"badge\"\n        />\n      </div>\n    );\n  },\n);\nAvatarWithBadge.displayName = \"AvatarWithBadge\";\n\nexport { Avatar, AvatarGroup, AvatarWithBadge };\n"
     }
   ],
   "type": "components:ui"