feat(tailwind-config,pixels,uniform,pixel-utils): migrate nextUI to h…

…eroUI

#703

packages/config/tailwind-config/content.ts

@@ -3,13 +3,13 @@ import type { ContentConfig } from 'tailwindcss/types/config';
 import path from 'path';
 
 /**
- * nextui used components
- * @see https://nextui.org/docs/guide/installation#tailwind-css-setup-1
+ * heroui used components
+ * @see https://heroui.org/docs/guide/installation#tailwind-css-setup-1
  *
- * all nextui components that are in use for theme
- * update with: pnpm list "@nextui-org/*" --recursive | grep @nextui-org/ | sort | uniq -u
+ * all heroui components that are in use for theme
+ * update with: pnpm list "@heroui/*" --recursive | grep @heroui/ | sort | uniq -u
  */
-const NEXTUI_THEME_USED_COMPONENT_PATHS = [
+const HEROUI_THEME_USED_COMPONENT_PATHS = [
   'accordion',
   'alert',
   'autocomplete',
@@ -37,7 +37,7 @@ const NEXTUI_THEME_USED_COMPONENT_PATHS = [
 ].map((c) =>
   path.resolve(
     __dirname,
-    `./node_modules/@nextui-org/theme/dist/components/${c}.js`,
+    `./node_modules/@heroui/theme/dist/components/${c}.js`,
   ),
 );
 
@@ -50,8 +50,8 @@ const content: ContentConfig = [
   path.resolve(__dirname, '../../pixels/src/**/*.tsx'),
   path.resolve(__dirname, '../../uniform/src/**/*.tsx'),
 
-  // nextui theme component paths
-  ...NEXTUI_THEME_USED_COMPONENT_PATHS,
+  // heroui theme component paths
+  ...HEROUI_THEME_USED_COMPONENT_PATHS,
 ];
 
 export default content;

packages/config/tailwind-config/package.json

@@ -5,8 +5,8 @@
   "private": true,
   "main": "index.js",
   "devDependencies": {
-    "@nextui-org/theme": "2.4.5",
+    "@heroui/theme": "2.4.5",
     "autoprefixer": "10.4.20",
     "tailwindcss": "3.4.17"
   }
-}
+}

packages/config/tailwind-config/plugins.ts

@@ -2,11 +2,11 @@
 
 import type { PluginsConfig } from 'tailwindcss/types/config';
 
-import { nextui } from '@nextui-org/theme';
+import { heroui } from '@heroui/theme';
 
 const plugins: Partial<PluginsConfig> = [
-  // see: https://nextui.org/docs/guide/installation#tailwind-css-setup-1
-  nextui({}),
+  // see: https://www.heroui.com//docs/guide/installation#tailwind-css-setup-1
+  heroui({}),
 ];
 
 export default plugins;

packages/pixel-utils/package.json

@@ -41,7 +41,7 @@
     "prepack": "pnpm build"
   },
   "dependencies": {
-    "@nextui-org/theme": "2.4.5",
+    "@heroui/theme": "2.4.6",
     "classnames": "2.5.1",
     "tailwind-merge": "2.6.0",
     "tailwind-variants": "0.3.1"

packages/pixel-utils/src/theme.ts

@@ -1,2 +1,2 @@
 /* eslint-disable import/prefer-default-export */
-export { nextui } from '@nextui-org/theme';
+export { heroui } from '@heroui/theme';

packages/pixel-utils/src/tv.ts

@@ -1,4 +1,4 @@
-import type { VariantProps } from '@nextui-org/theme';
+import type { VariantProps } from '@heroui/theme';
 import type { ClassProp, TV } from 'tailwind-variants';
 
 import { tv as tailwindVariants } from 'tailwind-variants';

packages/pixels/package.json

@@ -146,26 +146,26 @@
   },
   "dependencies": {
     "@fuf-stack/pixel-utils": "workspace:*",
-    "@nextui-org/alert": "2.2.9",
-    "@nextui-org/avatar": "2.2.6",
-    "@nextui-org/accordion": "2.2.7",
-    "@nextui-org/badge": "2.2.5",
-    "@nextui-org/breadcrumbs": "2.2.6",
-    "@nextui-org/button": "2.2.9",
-    "@nextui-org/card": "2.2.9",
-    "@nextui-org/chip": "2.2.6",
-    "@nextui-org/divider": "2.2.5",
-    "@nextui-org/drawer": "2.2.7",
-    "@nextui-org/dropdown": "2.3.9",
-    "@nextui-org/modal": "2.2.7",
-    "@nextui-org/popover": "2.3.9",
-    "@nextui-org/progress": "2.2.6",
-    "@nextui-org/scroll-shadow": "2.3.5",
-    "@nextui-org/system": "2.4.6",
-    "@nextui-org/table": "2.2.8",
-    "@nextui-org/theme": "2.4.5",
-    "@nextui-org/tabs": "2.2.7",
-    "@nextui-org/tooltip": "2.2.7",
+    "@heroui/alert": "2.2.10",
+    "@heroui/avatar": "2.2.7",
+    "@heroui/accordion": "2.2.8",
+    "@heroui/badge": "2.2.6",
+    "@heroui/breadcrumbs": "2.2.7",
+    "@heroui/button": "2.2.10",
+    "@heroui/card": "2.2.10",
+    "@heroui/chip": "2.2.7",
+    "@heroui/divider": "2.2.6",
+    "@heroui/drawer": "2.2.8",
+    "@heroui/dropdown": "2.3.10",
+    "@heroui/modal": "2.2.8",
+    "@heroui/popover": "2.3.10",
+    "@heroui/progress": "2.2.7",
+    "@heroui/scroll-shadow": "2.3.6",
+    "@heroui/system": "2.4.7",
+    "@heroui/table": "2.2.9",
+    "@heroui/theme": "2.4.6",
+    "@heroui/tabs": "2.2.8",
+    "@heroui/tooltip": "2.2.8",
     "framer-motion": "11.18.2",
     "next-themes": "0.4.4",
     "react-icons": "5.4.0"

packages/pixels/src/Accordion/Accordion.tsx

@@ -1,16 +1,16 @@
 import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';
-import type { DividerProps } from '@nextui-org/divider';
+import type { DividerProps } from '@heroui/divider';
 import type { ReactNode } from 'react';
 
 import {
   Accordion as NextAccordion,
   AccordionItem as NextAccordionItem,
-} from '@nextui-org/accordion';
+} from '@heroui/accordion';
 
 import { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';
 
 // accordion styling variants
-// see: https://nextui.org/docs/components/accordion#accordion-item-slots
+// see: https://www.heroui.com//docs/components/accordion#accordion-item-slots
 export const accordionVariants = tv({
   slots: {
     base: '',
@@ -90,7 +90,7 @@ export interface AccordionProps extends VariantProps {
 }
 
 /**
- * Accordion component based on [NextUI Accordion](https://nextui.org/docs/components/accordion)
+ * Accordion component based on [HeroUI Accordion](https://www.heroui.com//docs/components/accordion)
  */
 const Accordion = ({
   accordionItems,

packages/pixels/src/Alert/Alert.tsx

@@ -1,9 +1,9 @@
 import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';
-import type { AlertProps as NextAlertProps } from '@nextui-org/alert';
+import type { AlertProps as NextAlertProps } from '@heroui/alert';
 import type { ReactNode } from 'react';
 
-import { Alert as NextAlert } from '@nextui-org/alert';
-import { alert as nextAlertVariants } from '@nextui-org/theme';
+import { Alert as NextAlert } from '@heroui/alert';
+import { alert as nextAlertVariants } from '@heroui/theme';
 
 import { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';
 
@@ -18,7 +18,7 @@ export const alertVariants = tv({
     alertIcon: '',
   },
   variants: {
-    // See: https://github.com/nextui-org/nextui/blob/canary/packages/core/theme/src/components/alert.ts
+    // See: https://github.comnextui-orgnextui/blob/canary/packages/core/theme/src/components/alert.ts
     color: {
       info: {
         mainWrapper: 'text-inherit',
@@ -104,7 +104,7 @@ export interface AlertProps extends VariantProps {
 }
 
 /**
- * Alert component based on [NextUI Alert](https://nextui.org/docs/components/alert)
+ * Alert component based on [HeroUI Alert](https://www.heroui.com//docs/components/alert)
  */
 const Alert = ({
   children = undefined,
@@ -123,15 +123,15 @@ const Alert = ({
     color,
     variant,
   });
-  const isNextUIColor = Object.keys(nextAlertVariants.variants.color).includes(
+  const isHeroUIColor = Object.keys(nextAlertVariants.variants.color).includes(
     color,
   );
   const classNames = variantsToClassNames(variants, className, 'base');
 
   return (
     <NextAlert
       classNames={classNames}
-      color={isNextUIColor ? (color as NextAlertProps['color']) : undefined}
+      color={isHeroUIColor ? (color as NextAlertProps['color']) : undefined}
       data-testid={testId}
       description={title ? children : undefined}
       endContent={endContent}

packages/pixels/src/Avatar/Avatar.tsx

@@ -1,7 +1,7 @@
 import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';
 import type React from 'react';
 
-import { Avatar as NextAvatar } from '@nextui-org/avatar';
+import { Avatar as NextAvatar } from '@heroui/avatar';
 
 import { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';
 
@@ -36,7 +36,7 @@ export interface AvatarProps extends VariantProps {
 }
 
 /**
- * Avatar component based on [NextUI Avatar](https://nextui.org/docs/components/avatar)
+ * Avatar component based on [HeroUI Avatar](https://www.heroui.com//docs/components/avatar)
  */
 const Avatar = ({
   bordered = false,

packages/pixels/src/AvatarGroup/AvatarGroup.tsx

@@ -1,7 +1,7 @@
 import type { JSX } from 'react';
 import type { AvatarProps } from '../Avatar/Avatar';
 
-import { AvatarGroup as NextAvatarGroup } from '@nextui-org/avatar';
+import { AvatarGroup as NextAvatarGroup } from '@heroui/avatar';
 
 import { Avatar } from '../Avatar';
 
@@ -28,7 +28,7 @@ export interface AvatarGroupProps {
 }
 
 /**
- * AvatarGroup component based on [NextUI AvatarGroup](https://nextui.org/docs/components/avatar)
+ * AvatarGroup component based on [HeroUI AvatarGroup](https://www.heroui.com//docs/components/avatar)
  */
 const AvatarGroup = ({
   bordered = false,

packages/pixels/src/Badge/Badge.tsx

@@ -1,7 +1,7 @@
 import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';
-import type { BadgeProps as NextBadgeProps } from '@nextui-org/badge';
+import type { BadgeProps as NextBadgeProps } from '@heroui/badge';
 
-import { Badge as NextBadge } from '@nextui-org/badge';
+import { Badge as NextBadge } from '@heroui/badge';
 
 import { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';
 
@@ -36,7 +36,7 @@ export interface BadgeProps extends VariantProps {
 }
 
 /**
- * Badge component based on [NextUI Badge](https://nextui.org/docs/components/badge)
+ * Badge component based on [HeroUI Badge](https://www.heroui.com//docs/components/badge)
  */
 const Avatar = ({
   children,

packages/pixels/src/Breadcrumb/Breadcrumb.tsx

@@ -4,12 +4,12 @@ import type { ReactNode } from 'react';
 import {
   Breadcrumbs as NextBreadcrumb,
   BreadcrumbItem as NextBreadcrumbItem,
-} from '@nextui-org/breadcrumbs';
+} from '@heroui/breadcrumbs';
 
 import { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';
 
 // breadcrumb styling variants
-// see: https://nextui.org/docs/components/breadcrumbs#breadcrumbitem-props
+// see: https://www.heroui.com//docs/components/breadcrumbs#breadcrumbitem-props
 export const breadcrumbVariants = tv({
   slots: {
     /** ellipsis slot */
@@ -22,7 +22,7 @@ export const breadcrumbVariants = tv({
     list: '',
     /** separator slot */
     separator: '',
-    /** nav slot, breadcrumb base slot in nextui */
+    /** nav slot, breadcrumb base slot in heroui */
     nav: '',
   },
 });
@@ -75,7 +75,7 @@ export interface BreadcrumbProps extends VariantProps {
 }
 
 /**
- * Breadcrumb component based on [NextUI Breadcrumbs](https://nextui.org/docs/components/breadcrumbs)
+ * Breadcrumb component based on [HeroUI Breadcrumbs](https://www.heroui.com//docs/components/breadcrumbs)
  */
 const Breadcrumb = ({
   breadcrumbItems,

packages/pixels/src/Button/Button.tsx

@@ -1,8 +1,8 @@
 import type { TVProps } from '@fuf-stack/pixel-utils';
-import type { ButtonProps as NextButtonProps } from '@nextui-org/button';
+import type { ButtonProps as NextButtonProps } from '@heroui/button';
 import type { ReactNode } from 'react';
 
-import { Button as NextButton } from '@nextui-org/button';
+import { Button as NextButton } from '@heroui/button';
 
 import { tv } from '@fuf-stack/pixel-utils';
 
@@ -77,7 +77,7 @@ export interface ButtonProps extends VariantProps {
 }
 
 /**
- * Button component based on [NextUI Button](https://nextui.org/docs/components/button)
+ * Button component based on [HeroUI Button](https://www.heroui.com//docs/components/button)
  */
 const Button = ({
   ariaLabel = undefined,

packages/pixels/src/Button/ButtonGroup.tsx

@@ -1,7 +1,7 @@
-import { ButtonGroup as NextButtonGroup } from '@nextui-org/button';
+import { ButtonGroup as NextButtonGroup } from '@heroui/button';
 
 /**
- * Button Group based on [NextUI Button Group](https://nextui.org/docs/components/button#button-group)
+ * Button Group based on [HeroUI Button Group](https://www.heroui.com//docs/components/button#button-group)
  */
 const ButtonGroup = NextButtonGroup;
 

packages/pixels/src/Button/subcomponents/LoadingSpinner.tsx

@@ -1,6 +1,6 @@
 /**
  * svg loading spinner for button
- * @see https://nextui.org/docs/components/button#loading
+ * @see https://www.heroui.com//docs/components/button#loading
  * */
 export default () => (
   <svg

packages/pixels/src/Card/Card.tsx

@@ -8,8 +8,8 @@ import {
   CardBody as NextCardBody,
   CardFooter as NextCardFooter,
   CardHeader as NextCardHeader,
-} from '@nextui-org/card';
-import { Divider as NextDivider } from '@nextui-org/divider';
+} from '@heroui/card';
+import { Divider as NextDivider } from '@heroui/divider';
 
 import { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';
 
@@ -41,7 +41,7 @@ export interface CardProps extends VariantProps {
 }
 
 /**
- * Card component based on [NextUI Card](https://nextui.org/docs/components/card)
+ * Card component based on [HeroUI Card](https://www.heroui.com//docs/components/card)
  */
 const Card = forwardRef<HTMLDivElement, CardProps>(
   (

packages/pixels/src/Drawer/Drawer.tsx

@@ -1,5 +1,5 @@
 import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';
-import type { DrawerProps as NextDrawerProps } from '@nextui-org/drawer';
+import type { DrawerProps as NextDrawerProps } from '@heroui/drawer';
 import type { ReactNode } from 'react';
 
 import {
@@ -8,7 +8,7 @@ import {
   DrawerContent as NextDrawerContent,
   DrawerFooter as NextDrawerFooter,
   DrawerHeader as NextDrawerHeader,
-} from '@nextui-org/drawer';
+} from '@heroui/drawer';
 
 import { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';
 
@@ -87,7 +87,7 @@ export interface DrawerProps extends VariantProps {
 }
 
 /**
- * Drawer component based on [NextUI Drawer](https://nextui.org/docs/components/drawer)
+ * Drawer component based on [HeroUI Drawer](https://www.heroui.com//docs/components/drawer)
  */
 const Drawer = ({
   backdrop = 'opaque',