feat: build public/r with smart-registry

apps/ui-layout/package.json

@@ -6,7 +6,8 @@
     "dev": "tsc && next dev --port 3001",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "build:registry": "npx smart-registry@latest"
   },
   "dependencies": {
     "@code-hike/mdx": "^0.9.0",

apps/ui-layout/public/r/accordion-gridlayout.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "accordion-gridlayout",
+  "type": "registry:component",
+  "dependencies": [
+    "clsx",
+    "framer-motion",
+    "lucide-react",
+    "react",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "type": "registry:component",
+      "target": "components/accordion/gridlayout.tsx",
+      "content": "import React from 'react';\nimport {\n  Accordion,\n  AccordionContainer,\n  AccordionHeader,\n  AccordionItem,\n  AccordionPanel,\n  AccordionWrapper,\n} from '@/components/core/accordion';\n\nfunction index() {\n  return (\n    <AccordionContainer className='md:grid-cols-2 grid-cols-1'>\n      <AccordionWrapper>\n        <Accordion defaultValue={'item-1'}>\n          <AccordionItem value='item-1'>\n            <AccordionHeader className='2xl:text-base text-sm'>\n              What is a UI component?\n            </AccordionHeader>\n            <AccordionPanel className='2xl:text-base text-sm'>\n              A UI (User Interface) component is a modular, reusable element\n              that serves a specific function within a graphical user interface.\n              Examples include buttons, input fields, dropdown menus, sliders.\n            </AccordionPanel>\n          </AccordionItem>\n          <AccordionItem value='item-2'>\n            <AccordionHeader className='2xl:text-base text-sm'>\n              Why are components important?\n            </AccordionHeader>\n            <AccordionPanel className='2xl:text-base text-sm'>\n              UI components promote consistency, efficiency, and scalability in\n              software development. They allow developers to reuse code,\n              maintain a consistent look and feel across an application.\n            </AccordionPanel>\n          </AccordionItem>\n          <AccordionItem value='item-3'>\n            <AccordionHeader className='2xl:text-base text-sm'>\n              UI Component Traits\n            </AccordionHeader>\n            <AccordionPanel className='2xl:text-base text-sm'>\n              Well-designed UI components should be modular, customizable, and\n              accessible. They should have clear and intuitive functionality, be\n              easily styled to match the overall design language.\n            </AccordionPanel>\n          </AccordionItem>\n        </Accordion>\n      </AccordionWrapper>\n      <AccordionWrapper>\n        <Accordion defaultValue={'item-5'}>\n          <AccordionItem value='item-4'>\n            <AccordionHeader className='2xl:text-base text-sm'>\n              Does Component Improve UX?\n            </AccordionHeader>\n            <AccordionPanel className='2xl:text-base text-sm'>\n              UI components can improve UX by providing familiar, consistent\n              interactions that make it easy for users to navigate and interact\n              with an application byy using recognizable patterns.\n            </AccordionPanel>\n          </AccordionItem>\n          <AccordionItem value='item-5'>\n            <AccordionHeader className='2xl:text-base text-sm'>\n              component design challenges?\n            </AccordionHeader>\n            <AccordionPanel className='2xl:text-base text-sm'>\n              Some common challenges include maintaining consistency across\n              different devices and screen sizes, ensuring compatibility with\n              various browsers and assistive technologies with ease of use.\n            </AccordionPanel>\n          </AccordionItem>\n          <AccordionItem value='item-6'>\n            <AccordionHeader className='2xl:text-base text-sm'>\n              Ensure Responsiveness\n            </AccordionHeader>\n            <AccordionPanel className='2xl:text-base text-sm'>\n              Developers can ensure the responsiveness of UI components by using\n              techniques such as fluid layouts, flexible grids, and media\n              queries to adapt the components to different screen sizes.\n            </AccordionPanel>\n          </AccordionItem>\n        </Accordion>\n      </AccordionWrapper>\n    </AccordionContainer>\n  );\n}\n\nexport default index;\n",
+      "path": "registry/components/accordion/gridlayout.tsx"
+    },
+    {
+      "type": "registry:component",
+      "target": "components/core/accordion.tsx",
+      "content": "// @ts-nocheck\n'use client';\nimport React, { ReactNode } from 'react';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { ChevronDown } from 'lucide-react';\nimport { cn } from '@/lib/utils';\n\nconst AccordionContext = React.createContext({});\nconst useAccordion = () => React.useContext(AccordionContext);\n\nexport function AccordionContainer({\n  children,\n  className,\n}: {\n  children: ReactNode;\n  className?: string;\n}) {\n  return (\n    <div className={cn('grid grid-cols-2 gap-1', className)}>{children}</div>\n  );\n}\nexport function AccordionWrapper({ children }) {\n  return <div>{children}</div>;\n}\n\nexport function Accordion({\n  children,\n  multiple,\n  defaultValue,\n}: {\n  children: ReactNode;\n  multiple?: boolean;\n  defaultValue?: string | undefined | string[];\n}) {\n  const [activeIndex, setActiveIndex] = React.useState(\n    multiple ? (defaultValue ? [defaultValue] : []) : [defaultValue]\n  );\n\n  function onChangeIndex(value) {\n    setActiveIndex((currentActiveIndex) => {\n      if (!multiple) {\n        return value === currentActiveIndex ? null : value;\n      }\n\n      if (currentActiveIndex.includes(value)) {\n        return currentActiveIndex.filter((i) => i !== value);\n      }\n\n      return [...currentActiveIndex, value];\n    });\n  }\n\n  return React.Children.map(children, (child) => {\n    const value = child.props.value;\n    const isActive = multiple\n      ? Array.isArray(activeIndex) && activeIndex.includes(value)\n      : Array.isArray(activeIndex)\n        ? activeIndex[0].includes(value)\n        : activeIndex === value;\n\n    return (\n      <AccordionContext.Provider value={{ isActive, value, onChangeIndex }}>\n        <>{child}</>\n      </AccordionContext.Provider>\n    );\n  });\n}\n\nexport function AccordionItem({ children, value }) {\n  const { isActive } = useAccordion();\n\n  return (\n    <div\n      className={`rounded-lg overflow-hidden mb-2  ${\n        isActive\n          ? 'active border-2 dark:border-[#656fe2]  border-[#F2F2F2] dark:bg-[#E0ECFB] bg-[#F2F2F2]'\n          : 'bg-transparent border-2 dark:hover:border-[#656fe2]'\n      }\n    `}\n      value={value}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function AccordionHeader({\n  children,\n  icon,\n  className,\n}: {\n  children: ReactNode;\n  icon?: any;\n  className?: string;\n}) {\n  const { isActive, value, onChangeIndex } = useAccordion();\n\n  return (\n    <motion.div\n      className={cn(\n        `p-4 cursor-pointer transition-all font-semibold    dark:text-white text-black dark:hover:bg-[#1e2a78] hover:bg-[#F2F2F2] dark:hover:text-white hover:text-black flex justify-between items-center ${\n          isActive\n            ? 'active  dark:bg-[#1e2a78] bg-[#F2F2F2] '\n            : 'dark:bg-[#11112b] bg-white'\n        }\n      `,\n        className\n      )}\n      onClick={() => onChangeIndex(value)}\n    >\n      {children}\n      {icon ? (\n        <div\n          className={`${\n            isActive ? 'rotate-45 ' : 'rotate-0 '\n          } transition-transform`}\n        >\n          {icon}\n        </div>\n      ) : (\n        <>\n          <ChevronDown\n            className={`${\n              isActive ? 'rotate-180 ' : 'rotate-0 '\n            } transition-transform`}\n          />\n        </>\n      )}\n    </motion.div>\n  );\n}\n\nexport function AccordionPanel({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) {\n  const { isActive } = useAccordion();\n\n  return (\n    <AnimatePresence initial={true}>\n      {isActive && (\n        <motion.div\n          initial={{ height: 0, overflow: 'hidden' }}\n          animate={{ height: 'auto', overflow: 'hidden' }}\n          exit={{ height: 0 }}\n          transition={{ type: 'spring', duration: 0.6, bounce: 0 }}\n          className={cn(\n            `dark:bg-white bg-[#F2F2F2] \n          `,\n            className\n          )}\n        >\n          <motion.article\n            initial={{ clipPath: 'polygon(0 0, 100% 0, 100% 0, 0 0)' }}\n            animate={{ clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0% 100%)' }}\n            exit={{\n              clipPath: 'polygon(0 0, 100% 0, 100% 0, 0 0)',\n            }}\n            transition={{\n              type: 'spring',\n              duration: 0.4,\n              bounce: 0,\n            }}\n            className={`p-3 bg-transparent text-black `}\n          >\n            {children}\n          </motion.article>\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n}\n",
+      "path": "components/core/accordion.tsx"
+    },
+    {
+      "type": "registry:lib",
+      "target": "lib/utils.ts",
+      "content": "import { ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport function debounce(\n  func: (...args: any[]) => any,\n  wait: number,\n  immediate: boolean = false\n) {\n  let timeout: number | undefined;\n\n  return function executedFunction(this: any, ...args: any[]) {\n    const context: any = this;\n\n    const later = () => {\n      timeout = undefined;\n      if (!immediate) {\n        func.apply(context, args);\n      }\n    };\n\n    const callNow: boolean = immediate && !timeout;\n\n    clearTimeout(timeout);\n\n    timeout = window.setTimeout(later, wait);\n\n    if (callNow) {\n      func.apply(context, args);\n    }\n  };\n}\n\nexport function throttle(fn: (...args: any[]) => any, wait: number) {\n  let shouldWait = false;\n\n  return function throttledFunction(this: any, ...args: any[]) {\n    if (!shouldWait) {\n      fn.apply(this, args);\n      shouldWait = true;\n      setTimeout(() => (shouldWait = false), wait);\n    }\n  };\n}\n\nexport const siteConfig = {\n  name: 'ui-layouts',\n  url: 'https://ui-layouts.com',\n  ogImage: 'https://www.ui-layouts.com/og.jpg',\n  description:\n    'Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.',\n  links: {\n    twitter: 'https://twitter.com/naymur_dev',\n    linkedin: 'https://www.linkedin.com/in/naymur-rahman',\n    github: 'https://github.com/naymurdev',\n  },\n};\n\nexport type SiteConfig = typeof siteConfig;\n",
+      "path": "lib/utils.ts"
+    }
+  ]
+}

apps/ui-layout/public/r/accordion-multilayout.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "accordion-multilayout",
+  "type": "registry:component",
+  "dependencies": [
+    "clsx",
+    "framer-motion",
+    "lucide-react",
+    "react",
+    "tailwind-merge"
+  ],
+  "files": [
+    {
+      "type": "registry:component",
+      "target": "components/accordion/multilayout.tsx",
+      "content": "import React from 'react';\nimport {\n  Accordion,\n  AccordionHeader,\n  AccordionItem,\n  AccordionPanel,\n  AccordionWrapper,\n} from '@/components/core/accordion';\n\nfunction index() {\n  return (\n    <>\n      <Accordion defaultValue={'item-2'} multiple>\n        <AccordionItem value='item-1'>\n          <AccordionHeader>What is a UI component?</AccordionHeader>\n          <AccordionPanel>\n            A UI (User Interface) component is a modular, reusable element that\n            serves a specific function within a graphical user interface.\n            Examples include buttons, input fields, dropdown menus, sliders, and\n            checkboxes.\n          </AccordionPanel>\n        </AccordionItem>\n        <AccordionItem value='item-2'>\n          <AccordionHeader>Why are UI components important?</AccordionHeader>\n          <AccordionPanel>\n            UI components promote consistency, efficiency, and scalability in\n            software development. They allow developers to reuse code, maintain\n            a consistent look and feel across an application, and easily make\n            updates or modifications without affecting the entire system.\n          </AccordionPanel>\n        </AccordionItem>\n        <AccordionItem value='item-3'>\n          <AccordionHeader>\n            Key characteristics of UI components?\n          </AccordionHeader>\n          <AccordionPanel>\n            Well-designed UI components should be modular, customizable, and\n            accessible. They should have clear and intuitive functionality, be\n            easily styled to match the overall design language of the\n            application.\n          </AccordionPanel>\n        </AccordionItem>\n      </Accordion>\n    </>\n  );\n}\n\nexport default index;\n",
+      "path": "registry/components/accordion/multilayout.tsx"
+    },
+    {
+      "type": "registry:component",
+      "target": "components/core/accordion.tsx",
+      "content": "// @ts-nocheck\n'use client';\nimport React, { ReactNode } from 'react';\nimport { AnimatePresence, motion } from 'framer-motion';\nimport { ChevronDown } from 'lucide-react';\nimport { cn } from '@/lib/utils';\n\nconst AccordionContext = React.createContext({});\nconst useAccordion = () => React.useContext(AccordionContext);\n\nexport function AccordionContainer({\n  children,\n  className,\n}: {\n  children: ReactNode;\n  className?: string;\n}) {\n  return (\n    <div className={cn('grid grid-cols-2 gap-1', className)}>{children}</div>\n  );\n}\nexport function AccordionWrapper({ children }) {\n  return <div>{children}</div>;\n}\n\nexport function Accordion({\n  children,\n  multiple,\n  defaultValue,\n}: {\n  children: ReactNode;\n  multiple?: boolean;\n  defaultValue?: string | undefined | string[];\n}) {\n  const [activeIndex, setActiveIndex] = React.useState(\n    multiple ? (defaultValue ? [defaultValue] : []) : [defaultValue]\n  );\n\n  function onChangeIndex(value) {\n    setActiveIndex((currentActiveIndex) => {\n      if (!multiple) {\n        return value === currentActiveIndex ? null : value;\n      }\n\n      if (currentActiveIndex.includes(value)) {\n        return currentActiveIndex.filter((i) => i !== value);\n      }\n\n      return [...currentActiveIndex, value];\n    });\n  }\n\n  return React.Children.map(children, (child) => {\n    const value = child.props.value;\n    const isActive = multiple\n      ? Array.isArray(activeIndex) && activeIndex.includes(value)\n      : Array.isArray(activeIndex)\n        ? activeIndex[0].includes(value)\n        : activeIndex === value;\n\n    return (\n      <AccordionContext.Provider value={{ isActive, value, onChangeIndex }}>\n        <>{child}</>\n      </AccordionContext.Provider>\n    );\n  });\n}\n\nexport function AccordionItem({ children, value }) {\n  const { isActive } = useAccordion();\n\n  return (\n    <div\n      className={`rounded-lg overflow-hidden mb-2  ${\n        isActive\n          ? 'active border-2 dark:border-[#656fe2]  border-[#F2F2F2] dark:bg-[#E0ECFB] bg-[#F2F2F2]'\n          : 'bg-transparent border-2 dark:hover:border-[#656fe2]'\n      }\n    `}\n      value={value}\n    >\n      {children}\n    </div>\n  );\n}\n\nexport function AccordionHeader({\n  children,\n  icon,\n  className,\n}: {\n  children: ReactNode;\n  icon?: any;\n  className?: string;\n}) {\n  const { isActive, value, onChangeIndex } = useAccordion();\n\n  return (\n    <motion.div\n      className={cn(\n        `p-4 cursor-pointer transition-all font-semibold    dark:text-white text-black dark:hover:bg-[#1e2a78] hover:bg-[#F2F2F2] dark:hover:text-white hover:text-black flex justify-between items-center ${\n          isActive\n            ? 'active  dark:bg-[#1e2a78] bg-[#F2F2F2] '\n            : 'dark:bg-[#11112b] bg-white'\n        }\n      `,\n        className\n      )}\n      onClick={() => onChangeIndex(value)}\n    >\n      {children}\n      {icon ? (\n        <div\n          className={`${\n            isActive ? 'rotate-45 ' : 'rotate-0 '\n          } transition-transform`}\n        >\n          {icon}\n        </div>\n      ) : (\n        <>\n          <ChevronDown\n            className={`${\n              isActive ? 'rotate-180 ' : 'rotate-0 '\n            } transition-transform`}\n          />\n        </>\n      )}\n    </motion.div>\n  );\n}\n\nexport function AccordionPanel({\n  children,\n  className,\n}: {\n  children: React.ReactNode;\n  className?: string;\n}) {\n  const { isActive } = useAccordion();\n\n  return (\n    <AnimatePresence initial={true}>\n      {isActive && (\n        <motion.div\n          initial={{ height: 0, overflow: 'hidden' }}\n          animate={{ height: 'auto', overflow: 'hidden' }}\n          exit={{ height: 0 }}\n          transition={{ type: 'spring', duration: 0.6, bounce: 0 }}\n          className={cn(\n            `dark:bg-white bg-[#F2F2F2] \n          `,\n            className\n          )}\n        >\n          <motion.article\n            initial={{ clipPath: 'polygon(0 0, 100% 0, 100% 0, 0 0)' }}\n            animate={{ clipPath: 'polygon(0 0, 100% 0, 100% 100%, 0% 100%)' }}\n            exit={{\n              clipPath: 'polygon(0 0, 100% 0, 100% 0, 0 0)',\n            }}\n            transition={{\n              type: 'spring',\n              duration: 0.4,\n              bounce: 0,\n            }}\n            className={`p-3 bg-transparent text-black `}\n          >\n            {children}\n          </motion.article>\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n}\n",
+      "path": "components/core/accordion.tsx"
+    },
+    {
+      "type": "registry:lib",
+      "target": "lib/utils.ts",
+      "content": "import { ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport function debounce(\n  func: (...args: any[]) => any,\n  wait: number,\n  immediate: boolean = false\n) {\n  let timeout: number | undefined;\n\n  return function executedFunction(this: any, ...args: any[]) {\n    const context: any = this;\n\n    const later = () => {\n      timeout = undefined;\n      if (!immediate) {\n        func.apply(context, args);\n      }\n    };\n\n    const callNow: boolean = immediate && !timeout;\n\n    clearTimeout(timeout);\n\n    timeout = window.setTimeout(later, wait);\n\n    if (callNow) {\n      func.apply(context, args);\n    }\n  };\n}\n\nexport function throttle(fn: (...args: any[]) => any, wait: number) {\n  let shouldWait = false;\n\n  return function throttledFunction(this: any, ...args: any[]) {\n    if (!shouldWait) {\n      fn.apply(this, args);\n      shouldWait = true;\n      setTimeout(() => (shouldWait = false), wait);\n    }\n  };\n}\n\nexport const siteConfig = {\n  name: 'ui-layouts',\n  url: 'https://ui-layouts.com',\n  ogImage: 'https://www.ui-layouts.com/og.jpg',\n  description:\n    'Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.',\n  links: {\n    twitter: 'https://twitter.com/naymur_dev',\n    linkedin: 'https://www.linkedin.com/in/naymur-rahman',\n    github: 'https://github.com/naymurdev',\n  },\n};\n\nexport type SiteConfig = typeof siteConfig;\n",
+      "path": "lib/utils.ts"
+    }
+  ]
+}