chore: adding badge components with documentation

gentelduck · Aug 14, 2024 · 1b63ddb · 1b63ddb
1 parent 2644716
commit 1b63ddb
Show file tree

Hide file tree

Showing 74 changed files with 996 additions and 481 deletions.
diff --git a/docs/www/.prettierrc b/docs/www/.prettierrc
@@ -2,11 +2,11 @@
   "semi": false,
   "singleQuote": true,
   "printWidth": 120,
+  "jsxBracketSameLine": false,
+  "trailingComma": "es5",
+  "arrowParens": "avoid",
   "tabWidth": 2,
-  "trailingComma": "all",
   "endOfLine": "auto",
   "bracketSpacing": true,
-  "jsxBracketSameLine": false,
-  "arrowParens": "always",
   "singleAttributePerLine": true
 }
diff --git a/docs/www/__registry__/index.tsx b/docs/www/__registry__/index.tsx
@@ -8,14 +8,47 @@ export const Index: Record<string, any> = {
     "DuckButton": {
       name: "DuckButton",
       type: "components:ui",
-      registryDependencies: undefined,
+      registryDependencies: ["dialog"],
       component: React.lazy(() => import("@/registry/default/ui/DuckButton")),
       source: "",
       files: ["registry/default/ui/DuckButton.tsx"],
       category: "undefined",
       subcategory: "undefined",
       chunks: []
     },
+    "DuckBadge": {
+      name: "DuckBadge",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/DuckBadge")),
+      source: "",
+      files: ["registry/default/ui/DuckBadge.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "DuckCommand": {
+      name: "DuckCommand",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/DuckCommand")),
+      source: "",
+      files: ["registry/default/ui/DuckCommand.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "DuckTooltip": {
+      name: "DuckTooltip",
+      type: "components:ui",
+      registryDependencies: undefined,
+      component: React.lazy(() => import("@/registry/default/ui/DuckTooltip")),
+      source: "",
+      files: ["registry/default/ui/DuckTooltip.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
     "DuckButtonMainDemo": {
       name: "DuckButtonMainDemo",
       type: "components:example",
@@ -49,13 +82,13 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       chunks: []
     },
-    "test": {
-      name: "test",
+    "DuckBadgeMainDemo": {
+      name: "DuckBadgeMainDemo",
       type: "components:example",
-      registryDependencies: ["DuckButton"],
-      component: React.lazy(() => import("@/registry/default/example/test")),
+      registryDependencies: ["DuckBadge"],
+      component: React.lazy(() => import("@/registry/default/example/DuckBadgeMainDemo")),
       source: "",
-      files: ["registry/default/example/test.tsx"],
+      files: ["registry/default/example/DuckBadgeMainDemo.tsx"],
       category: "undefined",
       subcategory: "undefined",
       chunks: []

diff --git a/docs/www/components/component-preview.tsx b/docs/www/components/component-preview.tsx
@@ -93,17 +93,7 @@ export function ComponentPreview({
           className="relative rounded-md border"
         >
           <div className="flex items-center justify-between p-4">
-            <VariantsSwitcher
-            // type={
-            //   name === 'DuckButtonSimpleDemo'
-            //     ? 'simple'
-            //     : name === 'DuckButtonMainDemo'
-            //       ? 'main'
-            //       : name === 'DuckButtonAdvancedDemo'
-            //         ? 'advanced'
-            //         : 'default'
-            // }
-            />
+            <VariantsSwitcher type={name} />
             <div className="flex items-center gap-2">
               <CopyButton
                 value={codeString}

diff --git a/docs/www/components/variantsSwitcher.tsx b/docs/www/components/variantsSwitcher.tsx
@@ -19,12 +19,27 @@ import { useAtom } from 'jotai'
 
 export const variants = ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link']
 export const sizes = ['default', 'sm', 'lg', 'icon']
+const typesAllowedForVariant = [
+  'DuckButtonMainDemo',
+  'DuckBadgeMainDemo',
+  'DuckButtonSimpleDemo',
+  'DuckButtonAdvancedDemo',
+]
+const typesAllowedForTitle = [
+  'DuckButtonMainDemo',
+  'DuckBadgeMainDemo',
+  'DuckButtonSimpleDemo',
+  'DuckButtonAdvancedDemo',
+]
+const typesAllowedForLabel = ['DuckButtonMainDemo', 'DuckButtonSimpleDemo', 'DuckButtonAdvancedDemo']
+const typesAllowedForLoading = ['DuckButtonMainDemo', 'DuckButtonSimpleDemo', 'DuckButtonAdvancedDemo']
+const typesAllowedForCollapse = ['DuckButtonMainDemo', 'DuckButtonSimpleDemo', 'DuckButtonAdvancedDemo']
 
-export function VariantsSwitcher() {
+export function VariantsSwitcher({ type }: { type: string }) {
   const [varieties, setVarieties] = useAtom(duckButtonVarieties)
 
   return (
-    <Popover onOpenChange={() => {}}>
+    <Popover onOpenChange={() => { }}>
       <PopoverTrigger asChild>
         <DuckButton
           isCollapsed={true}
@@ -37,88 +52,126 @@ export function VariantsSwitcher() {
         />
       </PopoverTrigger>
       <PopoverContent className="mx-2 flex flex-col gap-2 w-fit">
-        <Select
-          value={varieties.default.variety?.variant as string}
-          onValueChange={(value: string) => {
-            setVarieties({ default: { variety: { ...varieties.default.variety, variant: value as 'link' } } })
-          }}
-        >
-          <SelectTrigger className={cn('text-sm h-7 w-[175px] [&_svg]:h-4 [&_svg]:w-4')}>
-            <span className="text-muted-foreground">variant : </span>
-            <SelectValue placeholder="Select style" />
-          </SelectTrigger>
-          <SelectContent>
-            {variants.map((variant) => (
-              <SelectItem
-                key={variant}
-                value={variant}
-                className="text-xs"
-              >
-                {variant}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-
-        <Select
-          value={varieties.default.variety?.size as string}
-          onValueChange={(value: string) => {
-            setVarieties({
-              default: { variety: { ...varieties.default.variety, size: value as 'default' } },
-            })
-          }}
-        >
-          <SelectTrigger className={cn('text-sm h-7 w-[175px] [&_svg]:h-4 [&_svg]:w-4')}>
-            <span className="text-muted-foreground">size : </span>
-            <SelectValue placeholder="Select style" />
-          </SelectTrigger>
-          <SelectContent>
-            {sizes.map((variant) => (
-              <SelectItem
-                key={variant}
-                value={variant}
-                className="text-xs"
-              >
-                {variant}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <Input
-          placeholder="Enter Title"
-          value={varieties.default.variety?.title}
-          className="w-[175px] h-7 text-sm placeholder:text-[.8rem]"
-          onChange={({ currentTarget }) =>
-            setVarieties({ default: { variety: { ...varieties.default.variety, title: currentTarget.value } } })
-          }
-        />
-        <Input
-          placeholder="Enter label"
-          value={varieties.default.variety?.label}
-          className="w-[175px] h-7 text-sm placeholder:text-[.8rem]"
-          type="number"
-          onChange={({ currentTarget }) =>
-            setVarieties({ default: { variety: { ...varieties.default.variety, label: currentTarget.value } } })
-          }
-        />
-        <div className="flex items-center justify-between px-2">
-          <Label
-            htmlFor="is-collapsed"
-            className="text-xs"
+        {typesAllowedForVariant.includes(type) && type ? (
+          <Select
+            value={varieties.default.variety?.variant as string}
+            onValueChange={(value: string) => {
+              setVarieties({ default: { variety: { ...varieties.default.variety, variant: value as 'link' } } })
+            }}
           >
-            Is isCollapsed
-          </Label>
-          <Switch
-            id="is-collapsed"
-            className="h-5 [&_span]:w-4 [&_span]:h-4 w-8 data-[state=checked]:[&_span]:translate-x-[.75rem]"
-            checked={varieties.default.variety?.open}
-            onCheckedChange={() => {
+            <SelectTrigger className={cn('text-sm h-7 w-[175px] [&_svg]:h-4 [&_svg]:w-4')}>
+              <span className="text-muted-foreground">variant : </span>
+              <SelectValue placeholder="Select style" />
+            </SelectTrigger>
+            <SelectContent>
+              {variants.map(
+                variant =>
+                  type === 'DuckBadgeMainDemo' &&
+                  !['link', 'ghost'].includes(variant) && (
+                    <SelectItem
+                      key={variant}
+                      value={variant}
+                      className="text-xs"
+                    >
+                      {variant}
+                    </SelectItem>
+                  )
+              )}
+            </SelectContent>
+          </Select>
+        ) : null}
+
+        {typesAllowedForVariant.includes(type) && type ? (
+          <Select
+            value={varieties.default.variety?.size as string}
+            onValueChange={(value: string) => {
               setVarieties({
-                default: { variety: { ...varieties.default.variety, open: !varieties.default.variety?.open } },
+                default: { variety: { ...varieties.default.variety, size: value as 'default' } },
               })
             }}
+          >
+            <SelectTrigger className={cn('text-sm h-7 w-[175px] [&_svg]:h-4 [&_svg]:w-4')}>
+              <span className="text-muted-foreground">size : </span>
+              <SelectValue placeholder="Select style" />
+            </SelectTrigger>
+            <SelectContent>
+              {sizes.map(variant => (
+                <SelectItem
+                  key={variant}
+                  value={variant}
+                  className="text-xs"
+                >
+                  {variant}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        ) : null}
+
+        {typesAllowedForTitle.includes(type) && type ? (
+          <Input
+            placeholder="Enter Title"
+            value={varieties.default.variety?.title}
+            className="w-[175px] h-7 text-sm placeholder:text-[.8rem]"
+            onChange={({ currentTarget }) =>
+              setVarieties({ default: { variety: { ...varieties.default.variety, title: currentTarget.value } } })
+            }
+          />
+        ) : null}
+
+        {typesAllowedForLabel.includes(type) && type ? (
+          <Input
+            placeholder="Enter label"
+            value={varieties.default.variety?.label}
+            className="w-[175px] h-7 text-sm placeholder:text-[.8rem]"
+            type="number"
+            onChange={({ currentTarget }) =>
+              setVarieties({ default: { variety: { ...varieties.default.variety, label: currentTarget.value } } })
+            }
           />
-        </div>
+        ) : null}
+
+        {typesAllowedForCollapse.includes(type) && type ? (
+          <div className="flex items-center justify-between px-2">
+            <Label
+              htmlFor="is-collapsed"
+              className="text-xs"
+            >
+              Is isCollapsed
+            </Label>
+            <Switch
+              id="is-collapsed"
+              className="h-5 [&_span]:w-4 [&_span]:h-4 w-8 data-[state=checked]:[&_span]:translate-x-[.75rem]"
+              checked={varieties.default.variety?.open}
+              onCheckedChange={() => {
+                setVarieties({
+                  default: { variety: { ...varieties.default.variety, open: !varieties.default.variety?.open } },
+                })
+              }}
+            />
+          </div>
+        ) : null}
+
+        {typesAllowedForLoading.includes(type) && type ? (
+          <div className="flex items-center justify-between px-2">
+            <Label
+              htmlFor="loading"
+              className="text-xs"
+            >
+              Is Loading
+            </Label>
+            <Switch
+              id="loading"
+              className="h-5 [&_span]:w-4 [&_span]:h-4 w-8 data-[state=checked]:[&_span]:translate-x-[.75rem]"
+              checked={varieties.default.variety?.loading}
+              onCheckedChange={() => {
+                setVarieties({
+                  default: { variety: { ...varieties.default.variety, loading: !varieties.default.variety?.loading } },
+                })
+              }}
+            />
+          </div>
+        ) : null}
       </PopoverContent>
     </Popover>
   )

diff --git a/docs/www/config/docs.ts b/docs/www/config/docs.ts
@@ -36,13 +36,12 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Button',
           href: '/docs/components/Button',
-          items: [
-            {
-              title: 'Overview',
-              href: '/docs/components/Button',
-              items: [],
-            },
-          ],
+          items: [],
+        },
+        {
+          title: 'Badge',
+          href: '/docs/components/Badge',
+          items: [],
         },
       ],
     },