UI: Remove tailwindcss-animate

fuma-nama · Jan 6, 2024 · d2744a4 · d2744a4
1 parent dec9280
commit d2744a4
Show file tree

Hide file tree

Showing 14 changed files with 245 additions and 230 deletions.
diff --git a/.changeset/three-candles-know.md b/.changeset/three-candles-know.md
@@ -0,0 +1,5 @@
+---
+'next-docs-ui': minor
+---
+
+Remove tailwindcss-animate
diff --git a/apps/docs/app/(home)/docs/page.tsx b/apps/docs/app/(home)/docs/page.tsx
@@ -5,7 +5,7 @@ import { buttonVariants } from '@/components/ui/button';
 import { cn } from '@/utils/cn';
 
 const cardVariants = cva(
-  'flex flex-col rounded-xl border border-primary/10 bg-background bg-gradient-to-br from-transparent to-primary/10 p-6 shadow-inner shadow-primary/10 transition-colors hover:bg-primary/5',
+  'flex flex-col rounded-xl border border-primary/10 bg-gradient-to-br from-transparent to-primary/10 p-6 shadow-inner shadow-primary/10 backdrop-blur-lg transition-colors hover:bg-primary/5',
 );
 
 const cardIconVariants = cva(

diff --git a/apps/docs/tailwind.config.js b/apps/docs/tailwind.config.js
@@ -1,4 +1,4 @@
-const { docsUi, docsUiPlugins } = require('next-docs-ui/tailwind-plugin');
+const { default: createDocsUI } = require('next-docs-ui/tailwind-plugin');
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -57,5 +57,5 @@ module.exports = {
       },
     },
   },
-  plugins: [...docsUiPlugins, docsUi],
+  plugins: [require('tailwindcss-animate'), ...createDocsUI()],
 };
diff --git a/examples/advanced/package.json b/examples/advanced/package.json
@@ -21,7 +21,7 @@
     "@types/react-dom": "18.2.1",
     "autoprefixer": "10.4.16",
     "postcss": "8.4.32",
-    "tailwindcss": "3.3.7",
+    "tailwindcss": "^3.4.1",
     "typescript": "5.3.3"
   },
   "overrides": {

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -75,7 +75,7 @@
     "next-themes": "^0.2.1",
     "react-medium-image-zoom": "^5.1.8",
     "tailwind-merge": "^2.0.0",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss": "^3.4.1"
   },
   "devDependencies": {
     "@algolia/client-search": "^4.20.0",
@@ -88,7 +88,6 @@
     "postcss": "8.4.33",
     "postcss-cli": "^11.0.0",
     "postcss-lightningcss": "^1.0.0",
-    "tailwindcss": "3.4.1",
     "tsconfig": "workspace:*"
   },
   "peerDependencies": {

diff --git a/packages/ui/src/components/ui/dialog.tsx b/packages/ui/src/components/ui/dialog.tsx
@@ -12,11 +12,11 @@ const DialogContent = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
   <DialogPrimitive.Portal>
-    <DialogPrimitive.DialogOverlay className="fixed inset-0 z-50 flex flex-col items-center bg-background/50 pt-[10vh] backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in">
+    <DialogPrimitive.DialogOverlay className="fixed inset-0 z-50 flex flex-col items-center bg-background/50 pt-[10vh] backdrop-blur-sm data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in">
       <DialogPrimitive.Content
         ref={ref}
         className={cn(
-          'relative grid w-[95vw] max-w-2xl gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-top-10 data-[state=open]:slide-in-from-top-10',
+          'relative grid w-[95vw] max-w-2xl gap-4 rounded-lg border bg-background p-6 shadow-lg data-[state=closed]:animate-dialog-out data-[state=open]:animate-dialog-in',
           className,
         )}
         {...props}

diff --git a/packages/ui/src/components/ui/popover.tsx b/packages/ui/src/components/ui/popover.tsx
@@ -17,7 +17,7 @@ const PopoverContent = React.forwardRef<
       sideOffset={sideOffset}
       side="bottom"
       className={cn(
-        'z-50 max-w-[90vw] rounded-md border bg-popover p-2 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in',
+        'z-50 max-w-[90vw] rounded-md border bg-popover p-2 text-popover-foreground shadow-md outline-none data-[state=closed]:animate-popover-out data-[state=open]:animate-popover-in',
         className,
       )}
       {...props}

diff --git a/packages/ui/src/components/ui/scroll-area.tsx b/packages/ui/src/components/ui/scroll-area.tsx
@@ -29,7 +29,7 @@ const ScrollBar = React.forwardRef<
     ref={ref}
     orientation={orientation}
     className={cn(
-      'flex select-none data-[state=hidden]:animate-out data-[state=hidden]:fade-out',
+      'flex select-none data-[state=hidden]:animate-fade-out',
       orientation === 'vertical' && 'h-full w-1.5',
       orientation === 'horizontal' && 'h-1.5 flex-col',
       className,

diff --git a/packages/ui/src/components/ui/select.tsx b/packages/ui/src/components/ui/select.tsx
@@ -37,7 +37,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=closed]:animate-popover-out data-[state=open]:animate-popover-in',
         position === 'popper' &&
           'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         className,

diff --git a/packages/ui/src/tailwind-plugin.ts b/packages/ui/src/tailwind-plugin.ts
@@ -1,8 +1,11 @@
 import typography from '@tailwindcss/typography';
-import animate from 'tailwindcss-animate';
 import plugin from 'tailwindcss/plugin';
+import type { PluginsConfig } from 'tailwindcss/types/config';
+import { presets } from './theme/colors';
+import { animations } from './theme/animations';
+import { typography as typographyConfig } from './theme/typography';
 
-interface NextDocsUIOptions {
+interface DocsUIOptions {
   /**
    * Prefix of colors
    */
@@ -11,7 +14,7 @@ interface NextDocsUIOptions {
   preset?: keyof typeof presets | Preset;
 }
 
-interface Preset {
+export interface Preset {
   light: Record<string, string>;
   dark: Record<string, string>;
   backgroundImage?: string;
@@ -20,98 +23,7 @@ interface Preset {
 /**
  * Dependency plugins
  */
-export const docsUiPlugins = [animate, typography];
-
-const defaultPreset: Preset = {
-  light: {
-    background: '0 0% 100%',
-    foreground: '0 0% 3.9%',
-    muted: '0 0% 96.1%',
-    'muted-foreground': '0 0% 45.1%',
-    popover: '0 0% 100%',
-    'popover-foreground': '0 0% 15.1%',
-    card: '0 0% 99.7%',
-    'card-foreground': '0 0% 3.9%',
-    border: '0 0% 89.8%',
-    input: '0 0% 89.8%',
-    primary: '0 0% 9%',
-    'primary-foreground': '0 0% 98%',
-    secondary: '0 0% 96.1%',
-    'secondary-foreground': '0 0% 9%',
-    accent: '0 0% 94.1%',
-    'accent-foreground': '0 0% 9%',
-    ring: '0 0% 63.9%',
-  },
-  dark: {
-    background: '0 0% 3.9%',
-    foreground: '0 0% 98%',
-    muted: '0 0% 14.9%',
-    'muted-foreground': '0 0% 60.9%',
-    popover: '0 0% 7%',
-    'popover-foreground': '0 0% 88%',
-    card: '0 0% 8%',
-    'card-foreground': '0 0% 98%',
-    border: '0 0% 18%',
-    input: '0 0% 14.9%',
-    primary: '0 0% 98%',
-    'primary-foreground': '0 0% 9%',
-    secondary: '0 0% 14.9%',
-    'secondary-foreground': '0 0% 98%',
-    accent: '0 0% 14.9%',
-    'accent-foreground': '0 0% 90%',
-    ring: '0 0% 14.9%',
-  },
-};
-
-const oceanPreset: Preset = {
-  light: {
-    background: '0 0% 100%',
-    foreground: '0 0% 3.9%',
-    muted: '220 90% 96.1%',
-    'muted-foreground': '0 0% 45.1%',
-    popover: '0 0% 100%',
-    'popover-foreground': '0 0% 15.1%',
-    card: '220 50% 98%',
-    'card-foreground': '0 0% 3.9%',
-    border: '220 50% 89.8%',
-    input: '0 0% 89.8%',
-    primary: '210 80% 20.2%',
-    'primary-foreground': '0 0% 98%',
-    secondary: '220 90% 96.1%',
-    'secondary-foreground': '0 0% 9%',
-    accent: '220 50% 94.1%',
-    'accent-foreground': '0 0% 9%',
-    ring: '220 100% 63.9%',
-    'global-background': 'transparent',
-  },
-  dark: {
-    'card-foreground': '220 60% 94.5%',
-    input: '0 0% 14.9%',
-    'primary-foreground': '0 0% 9%',
-    'secondary-foreground': '220 80% 90%',
-    ring: '205 100% 85%',
-    card: '220 50% 10%',
-    muted: '220 50% 10%',
-    'muted-foreground': '220 30% 65%',
-    'accent-foreground': '220 80% 90%',
-    popover: '220 50% 10%',
-    'popover-foreground': '220 30% 65%',
-    accent: '220 40% 20%',
-    secondary: '220 50% 25%',
-    background: '220 60% 6%',
-    foreground: '220 60% 94.5%',
-    primary: '205 100% 85%',
-    border: '220 50% 20%',
-    'global-background': 'rgba(5, 105, 255, 0.15)',
-  },
-  backgroundImage:
-    'linear-gradient(var(--global-background), transparent 20rem, transparent)',
-};
-
-export const presets = {
-  default: defaultPreset,
-  ocean: oceanPreset,
-};
+export const docsUiPlugins = [typography];
 
 function mapColors(
   prefix: string,
@@ -130,7 +42,7 @@ function colorToCSS(prefix: string, name: string): string {
   return `hsl(var(${colorToVariable(prefix, name)}) / <alpha-value>)`;
 }
 
-export const docsUi = plugin.withOptions<NextDocsUIOptions>(
+export const docsUi = plugin.withOptions<DocsUIOptions>(
   ({ prefix = '', preset = 'default' } = {}) => {
     return ({ addBase, addComponents, addUtilities }) => {
       const { light, dark, backgroundImage } =
@@ -316,94 +228,17 @@ export const docsUi = plugin.withOptions<NextDocsUIOptions>(
             foreground: colorToCSS(prefix, 'card-foreground'),
           },
         },
-        keyframes: {
-          'collapsible-down': {
-            from: { height: '0', opacity: '0' },
-            to: {
-              height: 'var(--radix-collapsible-content-height)',
-            },
-          },
-          'collapsible-up': {
-            from: {
-              height: 'var(--radix-collapsible-content-height)',
-            },
-            to: { height: '0', opacity: '0' },
-          },
-          'accordion-down': {
-            from: { height: '0', opacity: '0.5' },
-            to: { height: 'var(--radix-accordion-content-height)' },
-          },
-          'accordion-up': {
-            from: { height: 'var(--radix-accordion-content-height)' },
-            to: { height: '0', opacity: '0.5' },
-          },
-        },
-        animation: {
-          'collapsible-down': 'collapsible-down 150ms ease-out',
-          'collapsible-up': 'collapsible-up 150ms ease-out',
-          'accordion-down': 'accordion-down 200ms ease-out',
-          'accordion-up': 'accordion-up 200ms ease-out',
-        },
+        ...animations,
         typography: {
-          DEFAULT: {
-            css: {
-              '--tw-prose-body': `theme('colors.foreground / 90%')`,
-              '--tw-prose-headings': `theme('colors.foreground')`,
-              '--tw-prose-lead': `theme('colors.foreground')`,
-              '--tw-prose-links': `theme('colors.foreground')`,
-              '--tw-prose-bold': `theme('colors.foreground')`,
-              '--tw-prose-counters': `theme('colors.muted.foreground')`,
-              '--tw-prose-bullets': `theme('colors.muted.foreground')`,
-              '--tw-prose-hr': `theme('colors.border')`,
-              '--tw-prose-quotes': `theme('colors.foreground')`,
-              '--tw-prose-quote-borders': `theme('colors.border')`,
-              '--tw-prose-captions': `theme('colors.foreground')`,
-              '--tw-prose-code': `theme('colors.foreground')`,
-              '--tw-prose-th-borders': `theme('colors.border')`,
-              '--tw-prose-td-borders': `theme('colors.border')`,
-              '--tw-prose-pre-bg': `theme('colors.secondary.DEFAULT')`,
-              '--tw-prose-kbd': `theme('colors.foreground')`,
-              '--tw-prose-kbd-shadows': `theme('colors.primary.DEFAULT / 50%')`,
-              // not used
-              '--tw-prose-pre-code': false,
-              fontSize: '16px',
-              maxWidth: 'none',
-              a: {
-                transition: 'opacity 0.3s',
-                fontWeight: '400',
-                textDecoration: 'underline',
-                textUnderlineOffset: '2px',
-                textDecorationColor: `theme('colors.primary.DEFAULT')`,
-              },
-              'a:hover': {
-                opacity: '80%',
-              },
-              table: {
-                whiteSpace: 'nowrap',
-              },
-              code: {
-                padding: '4px',
-                borderRadius: '5px',
-                fontWeight: '400',
-                background: `theme('colors.muted.DEFAULT')`,
-              },
-              kbd: {
-                boxShadow:
-                  '0 0 0 1px var(--tw-prose-kbd-shadows),0 3px 0 var(--tw-prose-kbd-shadows)',
-              },
-              ul: {
-                paddingLeft: '1rem',
-              },
-              // Disabled styles, handled by Next Docs
-              'pre code': false,
-              'pre code::after': false,
-              'pre code::before': false,
-              'code::after': false,
-              'code::before': false,
-            },
-          },
+          DEFAULT: typographyConfig,
         },
       },
     },
   }),
 );
+
+export default function createDocsUI(
+  options: DocsUIOptions = {},
+): PluginsConfig {
+  return [...docsUiPlugins, docsUi(options)];
+}
diff --git a/packages/ui/src/theme/animations.ts b/packages/ui/src/theme/animations.ts
@@ -0,0 +1,60 @@
+export const animations = {
+  keyframes: {
+    'collapsible-down': {
+      from: { height: '0', opacity: '0' },
+      to: {
+        height: 'var(--radix-collapsible-content-height)',
+      },
+    },
+    'collapsible-up': {
+      from: {
+        height: 'var(--radix-collapsible-content-height)',
+      },
+      to: { height: '0', opacity: '0' },
+    },
+    'accordion-down': {
+      from: { height: '0', opacity: '0.5' },
+      to: { height: 'var(--radix-accordion-content-height)' },
+    },
+    'accordion-up': {
+      from: { height: 'var(--radix-accordion-content-height)' },
+      to: { height: '0', opacity: '0.5' },
+    },
+    'dialog-in': {
+      from: { transform: 'scale(0.95) translateY(-4rem)' },
+      to: { transform: 'scale(1) translateY(0)' },
+    },
+    'dialog-out': {
+      from: { transform: 'scale(1) translateY(0)' },
+      to: { transform: 'scale(0.95) translateY(-4rem)' },
+    },
+    'popover-in': {
+      from: { opacity: '0', transform: 'scale(0.95) translateY(-10px)' },
+      to: { opacity: '1', transform: 'scale(1) translateY(0)' },
+    },
+    'popover-out': {
+      from: { opacity: '1', transform: 'scale(1) translateY(0)' },
+      to: { opacity: '0', transform: 'scale(0.95) translateY(-10px)' },
+    },
+    'fade-in': {
+      from: { opacity: '0' },
+      to: { opacity: '1' },
+    },
+    'fade-out': {
+      from: { opacity: '1' },
+      to: { opacity: '0' },
+    },
+  },
+  animation: {
+    'fade-in': 'fade-in 300ms ease',
+    'fade-out': 'fade-out 300ms ease',
+    'dialog-in': 'dialog-in 150ms ease',
+    'dialog-out': 'dialog-out 200ms ease',
+    'popover-in': 'popover-in 150ms ease',
+    'popover-out': 'popover-out 150ms ease',
+    'collapsible-down': 'collapsible-down 150ms ease-out',
+    'collapsible-up': 'collapsible-up 150ms ease-out',
+    'accordion-down': 'accordion-down 200ms ease-out',
+    'accordion-up': 'accordion-up 200ms ease-out',
+  },
+};