From 39a3abae881f042f12d57091f6d475759d164ec6 Mon Sep 17 00:00:00 2001 From: ruru <142723369+ruru-m07@users.noreply.github.com> Date: Sat, 17 Aug 2024 17:19:32 +0530 Subject: [PATCH] feat(select): improve select component and update documentation --- apps/www/app/playground/page.tsx | 23 +++ .../components/selectAnimationVariants.tsx | 43 ++++ apps/www/content/docs/animation.mdx | 35 ++++ apps/www/content/docs/cli.mdx | 8 +- apps/www/content/docs/components/avatar.mdx | 4 +- apps/www/content/docs/components/badge.mdx | 4 +- apps/www/content/docs/components/button.mdx | 4 +- apps/www/content/docs/components/checkbox.mdx | 4 +- apps/www/content/docs/components/input.mdx | 4 +- apps/www/content/docs/components/select.mdx | 23 ++- apps/www/content/docs/components/spinner.mdx | 4 +- apps/www/content/docs/components/switch.mdx | 4 +- apps/www/content/docs/components/tabs.mdx | 4 +- apps/www/content/docs/components/textarea.mdx | 4 +- apps/www/content/docs/components/tooltip.mdx | 4 +- apps/www/content/docs/dark-mode.mdx | 31 ++- apps/www/content/docs/hooks.mdx | 42 ++++ apps/www/content/docs/installation.mdx | 97 +++++---- apps/www/content/docs/meta.json | 4 + apps/www/content/docs/provider.mdx | 28 +++ apps/www/content/docs/ruru-json.mdx | 193 ++++++++++++++++++ .../public/registry/components/select.json | 2 +- apps/www/public/schema.json | 3 - packages/ui/src/components/select.tsx | 147 +++++++++---- 24 files changed, 614 insertions(+), 105 deletions(-) create mode 100644 apps/www/components/selectAnimationVariants.tsx create mode 100644 apps/www/content/docs/hooks.mdx diff --git a/apps/www/app/playground/page.tsx b/apps/www/app/playground/page.tsx index 0aed718..85c2bb0 100644 --- a/apps/www/app/playground/page.tsx +++ b/apps/www/app/playground/page.tsx @@ -37,6 +37,7 @@ import { SelectTrigger, SelectValue, SelectSeparator, + selectAnimationVariants, } from "ruru-ui/components/select"; import AnimationToggle from "@/components/animationToggle"; @@ -556,6 +557,28 @@ const Playground = () => { +
+ {Object.keys(selectAnimationVariants).map((variantKey: any, index) => ( +
+ +
+ ))} +
diff --git a/apps/www/components/selectAnimationVariants.tsx b/apps/www/components/selectAnimationVariants.tsx new file mode 100644 index 0000000..5d13d2a --- /dev/null +++ b/apps/www/components/selectAnimationVariants.tsx @@ -0,0 +1,43 @@ +"use client"; + +import React from "react"; +import { + Select, + selectAnimationVariants, + SelectContent, + SelectGroup, + SelectItem, + SelectLabel, + SelectSeparator, + SelectTrigger, + SelectValue, +} from "ruru-ui/components/select"; + +const SelectAnimationVariants = () => { + return ( +
+ {Object.keys(selectAnimationVariants).map((variantKey: any, index) => ( +
+ +
+ ))} +
+ ); +}; + +export default SelectAnimationVariants; diff --git a/apps/www/content/docs/animation.mdx b/apps/www/content/docs/animation.mdx index 2755207..be39767 100644 --- a/apps/www/content/docs/animation.mdx +++ b/apps/www/content/docs/animation.mdx @@ -3,3 +3,38 @@ title: Animation description: The Animation component is used to animate elements. --- +import { Callout } from 'fumadocs-ui/components/callout'; + + + Will change the components soon. will batter UI + + +## Animation + +The `Animation` component is used to animate elements. + +```tsx title="AnimationToggle.tsx" +// [!code word:useRuru] +// [!code word:setAnimation] +"use client"; + +import React from "react"; +import { Switch } from "@/components/ui/switch"; +import { useRuru } from "@/provider"; // [!code highlight] + +const AnimationToggle = () => { + const { setAnimation } = useRuru(); // [!code highlight] + return ( +
+ setAnimation(e)} // [!code highlight] + id="toggle-animation" + /> + +
+ ); +}; + +export default AnimationToggle; +``` diff --git a/apps/www/content/docs/cli.mdx b/apps/www/content/docs/cli.mdx index 7d0b979..d55fb2f 100644 --- a/apps/www/content/docs/cli.mdx +++ b/apps/www/content/docs/cli.mdx @@ -24,12 +24,12 @@ pnpm dlx ruru-ui-cli@latest init ```bash -npx ruru-ui@latest init +npx ruru-ui-cli@latest init ``` ```bash -bunx --bun ruru-ui@latest init +bunx --bun ruru-ui-cli@latest init ``` @@ -88,12 +88,12 @@ pnpm dlx ruru-ui-cli@latest add [component] ```bash -npx ruru-ui@latest add [component] +npx ruru-ui-cli@latest add [component] ``` ```bash -bunx --bun ruru-ui@latest add [component] +bunx --bun ruru-ui-cli@latest add [component] ``` diff --git a/apps/www/content/docs/components/avatar.mdx b/apps/www/content/docs/components/avatar.mdx index 903a52f..270685e 100644 --- a/apps/www/content/docs/components/avatar.mdx +++ b/apps/www/content/docs/components/avatar.mdx @@ -29,12 +29,12 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs"; ```bash - npx ruru-ui@latest add avatar + npx ruru-ui-cli@latest add avatar ``` ```bash - bunx --bun ruru-ui@latest add avatar + bunx --bun ruru-ui-cli@latest add avatar ``` diff --git a/apps/www/content/docs/components/badge.mdx b/apps/www/content/docs/components/badge.mdx index cc4bb34..5f3ccde 100644 --- a/apps/www/content/docs/components/badge.mdx +++ b/apps/www/content/docs/components/badge.mdx @@ -26,12 +26,12 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs"; ```bash - npx ruru-ui@latest add badge + npx ruru-ui-cli@latest add badge ``` ```bash - bunx --bun ruru-ui@latest add badge + bunx --bun ruru-ui-cli@latest add badge ``` diff --git a/apps/www/content/docs/components/button.mdx b/apps/www/content/docs/components/button.mdx index c56d79b..3f1e3a4 100644 --- a/apps/www/content/docs/components/button.mdx +++ b/apps/www/content/docs/components/button.mdx @@ -31,12 +31,12 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs"; ```bash - npx ruru-ui@latest add button + npx ruru-ui-cli@latest add button ``` ```bash - bunx --bun ruru-ui@latest add button + bunx --bun ruru-ui-cli@latest add button ``` diff --git a/apps/www/content/docs/components/checkbox.mdx b/apps/www/content/docs/components/checkbox.mdx index fbec83f..b78ffad 100644 --- a/apps/www/content/docs/components/checkbox.mdx +++ b/apps/www/content/docs/components/checkbox.mdx @@ -26,12 +26,12 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs"; ```bash - npx ruru-ui@latest add checkbox + npx ruru-ui-cli@latest add checkbox ``` ```bash - bunx --bun ruru-ui@latest add checkbox + bunx --bun ruru-ui-cli@latest add checkbox ``` diff --git a/apps/www/content/docs/components/input.mdx b/apps/www/content/docs/components/input.mdx index 1d073c2..75edf8e 100644 --- a/apps/www/content/docs/components/input.mdx +++ b/apps/www/content/docs/components/input.mdx @@ -26,12 +26,12 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs"; ```bash - npx ruru-ui@latest add input + npx ruru-ui-cli@latest add input ``` ```bash - bunx --bun ruru-ui@latest add input + bunx --bun ruru-ui-cli@latest add input ``` diff --git a/apps/www/content/docs/components/select.mdx b/apps/www/content/docs/components/select.mdx index 3cdd124..444d01e 100644 --- a/apps/www/content/docs/components/select.mdx +++ b/apps/www/content/docs/components/select.mdx @@ -20,6 +20,8 @@ import { } from "ruru-ui/components/select"; import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs"; import SelectCountries from "../../../components/selectLargeData.tsx" +import SelectAnimationVariants from "../../../components/selectAnimationVariants.tsx" +import { Callout } from 'fumadocs-ui/components/callout'; ## Installation @@ -38,12 +40,12 @@ import SelectCountries from "../../../components/selectLargeData.tsx" ```bash - npx ruru-ui@latest add select + npx ruru-ui-cli@latest add select ``` ```bash - bunx --bun ruru-ui@latest add select + bunx --bun ruru-ui-cli@latest add select ``` @@ -342,6 +344,23 @@ You can add scroll buttons to the `Select` component by using the `SelectScrollD +## Select Animation Variants + +The `Select` component supports two animation variants: `zoom`, `scaleBounce` Etc.... You can set the animation variant by passing the `variant` prop to the `SelectContent` component. + + + + + + + + + + + + The animation variants only work when the animation mode is turned on. + + ## Props | Name | Type | Default | Description | diff --git a/apps/www/content/docs/components/spinner.mdx b/apps/www/content/docs/components/spinner.mdx index 6bf469c..c802026 100644 --- a/apps/www/content/docs/components/spinner.mdx +++ b/apps/www/content/docs/components/spinner.mdx @@ -25,12 +25,12 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs"; ```bash - npx ruru-ui@latest add spinner + npx ruru-ui-cli@latest add spinner ``` ```bash - bunx --bun ruru-ui@latest add spinner + bunx --bun ruru-ui-cli@latest add spinner ``` diff --git a/apps/www/content/docs/components/switch.mdx b/apps/www/content/docs/components/switch.mdx index 5b96e73..a6d5b0c 100644 --- a/apps/www/content/docs/components/switch.mdx +++ b/apps/www/content/docs/components/switch.mdx @@ -27,12 +27,12 @@ import SwiychEvent from "../../../components/SwitchEvent.tsx"; ```bash - npx ruru-ui@latest add switch + npx ruru-ui-cli@latest add switch ``` ```bash - bunx --bun ruru-ui@latest add switch + bunx --bun ruru-ui-cli@latest add switch ``` diff --git a/apps/www/content/docs/components/tabs.mdx b/apps/www/content/docs/components/tabs.mdx index 7749d6e..2286ea5 100644 --- a/apps/www/content/docs/components/tabs.mdx +++ b/apps/www/content/docs/components/tabs.mdx @@ -24,12 +24,12 @@ import { Tabs, Tab } from "fumadocs-ui/components/tabs"; ```bash - npx ruru-ui@latest add tabs + npx ruru-ui-cli@latest add tabs ``` ```bash - bunx --bun ruru-ui@latest add tabs + bunx --bun ruru-ui-cli@latest add tabs ``` diff --git a/apps/www/content/docs/components/textarea.mdx b/apps/www/content/docs/components/textarea.mdx index 44cf482..0c06252 100644 --- a/apps/www/content/docs/components/textarea.mdx +++ b/apps/www/content/docs/components/textarea.mdx @@ -25,12 +25,12 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs"; ```bash - npx ruru-ui@latest add textarea + npx ruru-ui-cli@latest add textarea ``` ```bash - bunx --bun ruru-ui@latest add textarea + bunx --bun ruru-ui-cli@latest add textarea ``` diff --git a/apps/www/content/docs/components/tooltip.mdx b/apps/www/content/docs/components/tooltip.mdx index 2e047e4..163063b 100644 --- a/apps/www/content/docs/components/tooltip.mdx +++ b/apps/www/content/docs/components/tooltip.mdx @@ -32,12 +32,12 @@ import { Tabs as Rutabs, Tab as Rutab } from "ruru-ui/components/tabs"; ```bash - npx ruru-ui@latest add tooltip + npx ruru-ui-cli@latest add tooltip ``` ```bash - bunx --bun ruru-ui@latest add tooltip + bunx --bun ruru-ui-cli@latest add tooltip ``` diff --git a/apps/www/content/docs/dark-mode.mdx b/apps/www/content/docs/dark-mode.mdx index dd94b8f..71a85a9 100644 --- a/apps/www/content/docs/dark-mode.mdx +++ b/apps/www/content/docs/dark-mode.mdx @@ -3,6 +3,33 @@ title: Dark Mode description: How to enable dark mode in your app. --- -import { Callout } from "fumadocs-ui/components/callout"; +import { Callout } from 'fumadocs-ui/components/callout'; - + + Will change the components soon. will batter UI + + +## Dark Mode + +```tsx title="DarkModeToggle.tsx" +// [!code word:useTheme] +// [!code word:setTheme] +"use client"; + +import * as React from "react"; +import { useTheme } from "@/provider/theme"; // [!code highlight] + +import { Button } from "@/components/ui/button"; + +export function ModeToggle() { + const { setTheme } = useTheme(); // [!code highlight] + + return ( +
+ + + +
+ ); +} +``` \ No newline at end of file diff --git a/apps/www/content/docs/hooks.mdx b/apps/www/content/docs/hooks.mdx new file mode 100644 index 0000000..74bf705 --- /dev/null +++ b/apps/www/content/docs/hooks.mdx @@ -0,0 +1,42 @@ +--- +title: Hooks +description: Hooks are a new addition in React 16.8 that let you use state and other React features without writing a class. +--- + +### useRuru + +The `useRuru` hook is used to provide a context to all components in the tree. + +```tsx title="layout.tsx" +// [!code word:useRuru] +"use client"; + +import React from "react"; +import { Switch } from "ruru-ui/components/switch"; +import { useRuru } from "ruru-ui/provider"; + +const AnimationToggle = () => { + const { setAnimation } = useRuru(); + return ( +
+ setAnimation(e)} + id="toggle-animation" + /> + +
+ ); +}; + +export default AnimationToggle; +``` + +### props + +| name | type | default | description | +| ----------------------- | -------------------------------- | ------- | -------------------------------------- | +| **animation** | **boolean** | `-` | The animation state. | +| **setAnimation** | **(Animation: boolean) => void** | `-` | Set the animation state. | +| **togleThemeAnimation** | **boolean** | `false` | Enable or disable the theme animation. | + diff --git a/apps/www/content/docs/installation.mdx b/apps/www/content/docs/installation.mdx index 26d3f68..91918bf 100644 --- a/apps/www/content/docs/installation.mdx +++ b/apps/www/content/docs/installation.mdx @@ -29,12 +29,12 @@ import { Step, Steps } from "fumadocs-ui/components/steps"; ```bash - npx ruru-ui@latest init + npx ruru-ui-cli@latest init ``` ```bash - bunx --bun ruru-ui@latest init + bunx --bun ruru-ui-cli@latest init ``` @@ -72,6 +72,27 @@ import { Step, Steps } from "fumadocs-ui/components/steps"; + ### Add the Provider + + Add the `RuruProvider` component to your layout file: + +```tsx title="layout.tsx" +// [!code word:RuruProvider] +import { RuruProvider } from "@/provider"; + +export default function RootLayout() { + return ( + + + {children} + + + ); +} +``` + + + ### That's it Now you can start adding components @@ -89,18 +110,18 @@ import { Step, Steps } from "fumadocs-ui/components/steps"; ```bash - npx ruru-ui@latest add button + npx ruru-ui-cli@latest add button ``` ```bash - bunx --bun ruru-ui@latest add button + bunx --bun ruru-ui-cli@latest add button ``` -This command adds the `button` component to your project. + This command adds the `button` component to your project. ```tsx title="App.tsx" // [!code word:Button] @@ -121,23 +142,49 @@ This command adds the `button` component to your project. -## Install Dependencies + + + ### Install Dependencies -First, you'll need to install **ruru UI** and its peer dependencies. You can do this using npm or yarn: + First, you'll need to install **ruru UI** and its peer dependencies. You can do this using npm or yarn: ```package-install npm i ruru-ui@latest ``` + + + ### Import Styles -## Import Styles + Next, you'll need to import **ruru UI**'s styles into your project. You can do this by including the following line in your main stylesheet: -Next, you'll need to import **ruru UI**'s styles into your project. You can do this by including the following line in your main stylesheet: + ```tsx title="layout.tsx" + import "ruru-ui/style.css"; + ``` + + + +### Setup Provider + +To provide a context to all components in your project, you'll need to add the `RuruProvider` component to your layout file: ```tsx title="layout.tsx" -import "ruru-ui/style.css"; +// [!code word:RuruProvider] +import { RuruProvider } from "ruru-ui/provider"; + +export default function RootLayout() { + return ( + + + {children} + + + ); +} ``` + + -## Usage +### Usage Now that you've installed **ruru UI** and imported its styles, you can start using the components in your project. Here's an example of how you can use a button component: @@ -150,32 +197,12 @@ function App() { // [!code highlight] ); } -``` - -That's it! You're now ready to start building beautiful interfaces with **ruru UI**. If you have any questions or need further assistance, feel free to reach out to us on [GitHub Discussions](https://github.com/ruru-m07/ruru-ui/discussions/3). - +``` + + -## Next Steps - - - - - - - + That's it! You're now ready to start building beautiful interfaces with **ruru UI**. If you have any questions or need further assistance, feel free to reach out to us on [GitHub Discussions](https://github.com/ruru-m07/ruru-ui/discussions/3). --- diff --git a/apps/www/content/docs/meta.json b/apps/www/content/docs/meta.json index ed1c618..6c235d1 100644 --- a/apps/www/content/docs/meta.json +++ b/apps/www/content/docs/meta.json @@ -6,6 +6,10 @@ "installation", "cli", "dark-mode", + "ruru-json", + "provider", + "hooks", + "animation", "---Components---", "...components", "---Others---", diff --git a/apps/www/content/docs/provider.mdx b/apps/www/content/docs/provider.mdx index bd7f29a..ece405a 100644 --- a/apps/www/content/docs/provider.mdx +++ b/apps/www/content/docs/provider.mdx @@ -2,3 +2,31 @@ title: Provider description: The Provider component is used to provide a context to all components in the tree. --- + +## RuruProvider + +The `RuruProvider` component is used to provide a context to all components in the tree. + +```tsx title="layout.tsx" +// [!code word:RuruProvider] +import { RuruProvider } from "@/provider"; + +export default function RootLayout() { + return ( + + + {children} + + + ); +} +``` + +### props + +| name | type | default | description | +| ----------------------- | ------------- | ------- | -------------------------------------- | +| **children** | **ReactNode** | `-` | The children to render. | +| **togleThemeAnimation** | **boolean** | `false` | Enable or disable the theme animation. | +| **disableAnimation** | **boolean** | `false` | Enable or disable the animation. | +| **disableBaseColor** | **boolean** | `false` | Enable or disable the base color. | diff --git a/apps/www/content/docs/ruru-json.mdx b/apps/www/content/docs/ruru-json.mdx index fe685c9..027380c 100644 --- a/apps/www/content/docs/ruru-json.mdx +++ b/apps/www/content/docs/ruru-json.mdx @@ -3,3 +3,196 @@ title: ruru.json description: The `ruru.json` file is used to configure the project. --- +import { Tabs, Tab } from "fumadocs-ui/components/tabs"; + +The `ruru.json` file is used to configure the project. + +We use it to understand how your project is set up and how to generate components customized for your project. + +You can create a `ruru.json` file by running the following command: + + + +```bash +npx ruru-ui-cli@latest init +``` + + +```bash +pnpm dlx ruru-ui-cli@latest init +``` + + +```bash +npx ruru-ui-cli@latest init +``` + + +```bash +bunx --bun ruru-ui-cli@latest init +``` + + + +Read more about the `init` command [here](/docs/cli#init). + +## $schema +--- + +The `$schema` property is used to specify the version of the schema that the `ruru.json` file uses. + +```json title="ruru.json" +{ + "$schema": "https://ruru-ui.vercel.app/schema.json" +} +``` + +## tailwind +--- + + +### config + +The `tailwind` property is used to specify the configuration for the Tailwind CSS framework. + +```json title="ruru.json" +{ + "tailwind": { + "config": "./tailwind.config.js" + } +} +``` + +### css + +The `css` property is used to specify the configuration for your css file. + +```json title="ruru.json" +{ + "tailwind": { + "css": "./app/globals.css" + } +} +``` + +### cssVariables + +The `cssVariables` property is used to specify if you would like to use CSS variables for colors. + +```json title="ruru.json" +{ + "tailwind": { + "cssVariables": true + } +} +``` + +### prefix + +The `prefix` property is used to specify if you are using a custom tailwind prefix eg. tw-. + +```json title="ruru.json" +{ + "tailwind": { + "prefix": "tw-" + } +} +``` + +## rsc +--- + +The `rsc` property is used to specify if you would like to use the RSC (React State Component) pattern. + +```json title="ruru.json" +{ + "rsc": true +} +``` + +## tsx +--- + +The `tsx` property is used to specify if you would like to use TypeScript. + +```json title="ruru.json" +{ + "tsx": true +} +``` + +## aliases +--- + +The `aliases` property is used to specify the import alias for components and utils. + +```json title="ruru.json" +{ + "aliases": { + "components": "@/components/ui", + "utils": "@/lib/utils" + } +} +``` + +### utils + +The `utils` property is used to specify the import alias for utils. + +```json title="ruru.json" +{ + "aliases": { + "utils": "@/lib/utils" + } +} +``` + +### components + +The `components` property is used to specify the import alias for components. + +```json title="ruru.json" +{ + "aliases": { + "components": "@/components/ui" + } +} +``` + +### ui + +The `ui` property is used to specify the import alias for ui components. + +```json title="ruru.json" +{ + "aliases": { + "ui": "@/components/ui" + } +} +``` + +### provider + +The `provider` property is used to specify the import alias for the provider. + +```json title="ruru.json" +{ + "aliases": { + "provider": "@/lib/provider" + } +} +``` + +### interfaces + + +The `interfaces` property is used to specify the import alias for interfaces. + +```json title="ruru.json" +{ + "aliases": { + "interfaces": "@/lib/interfaces" + } +} +``` + diff --git a/apps/www/public/registry/components/select.json b/apps/www/public/registry/components/select.json index 8daab8e..0c52f42 100644 --- a/apps/www/public/registry/components/select.json +++ b/apps/www/public/registry/components/select.json @@ -4,7 +4,7 @@ "files": [ { "name": "select.tsx", - "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n CaretSortIcon,\n CheckIcon,\n ChevronDownIcon,\n ChevronUpIcon,\n} from \"@radix-ui/react-icons\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { cn } from \"@/utils/cn\";\nimport { motion } from \"framer-motion\";\nimport { useRuru } from \"@/provider\";\n\nconst Select = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\nconst SelectValue = SelectPrimitive.Value;\n\nconst SelectTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => {\n const { animation } = useRuru();\n return animation ? (\n \n span]:line-clamp-1\",\n className,\n )}\n {...props}\n >\n {children}\n \n \n \n \n \n ) : (\n span]:line-clamp-1\",\n className,\n )}\n {...props}\n >\n {children}\n \n \n \n \n );\n});\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n\nconst SelectScrollUpButton = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n));\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;\n\nconst SelectScrollDownButton = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n));\nSelectScrollDownButton.displayName =\n SelectPrimitive.ScrollDownButton.displayName;\n\n\nconst AnimatedSelectContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n \n \n \n \n \n {children}\n \n \n \n \n \n));\nAnimatedSelectContent.displayName = SelectPrimitive.Content.displayName;\n\n\nconst StaticSelectContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n \n \n \n \n {children}\n \n \n \n \n));\nStaticSelectContent.displayName = SelectPrimitive.Content.displayName;\n\nconst SelectContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>((props, ref) => {\n const { animation } = useRuru();\n return animation ? (\n \n ) : (\n \n );\n});\n\nSelectContent.displayName = \"SelectContent\";\n\nconst SelectLabel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nconst SelectItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n\nconst SelectSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName;\n\nexport {\n Select,\n SelectGroup,\n SelectValue,\n SelectTrigger,\n SelectContent,\n SelectLabel,\n SelectItem,\n SelectSeparator,\n SelectScrollUpButton,\n SelectScrollDownButton,\n};\n" + "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n CaretSortIcon,\n CheckIcon,\n ChevronDownIcon,\n ChevronUpIcon,\n} from \"@radix-ui/react-icons\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport { cn } from \"@/utils/cn\";\nimport { motion } from \"framer-motion\";\nimport { useRuru } from \"@/provider\";\n\nconst Select = SelectPrimitive.Root;\nconst SelectGroup = SelectPrimitive.Group;\nconst SelectValue = SelectPrimitive.Value;\n\nexport const selectAnimationVariants = {\n zoom: {\n initial: { opacity: 0, scale: 0.9 },\n animate: { opacity: 1, scale: 1 },\n exit: { opacity: 0, scale: 0.9 },\n transition: { type: \"spring\", stiffness: 600, damping: 25 },\n },\n scaleBounce: {\n initial: { opacity: 0, scale: 0.5 },\n animate: { opacity: 1, scale: [1.2, 0.9, 1] },\n exit: { opacity: 0, scale: 0.5 },\n transition: { type: \"spring\", stiffness: 600, damping: 20 },\n },\n fade: {\n initial: { opacity: 0 },\n animate: { opacity: 1 },\n exit: { opacity: 0 },\n transition: { duration: 0.3 },\n },\n slideUp: {\n initial: { opacity: 0, y: 20 },\n animate: { opacity: 1, y: 0 },\n exit: { opacity: 0, y: 20 },\n transition: { type: \"spring\", stiffness: 500, damping: 20 },\n },\n slideDown: {\n initial: { opacity: 0, y: -20 },\n animate: { opacity: 1, y: 0 },\n exit: { opacity: 0, y: -20 },\n transition: { type: \"spring\", stiffness: 500, damping: 20 },\n },\n slideRight: {\n initial: { opacity: 0, x: -30 },\n animate: { opacity: 1, x: 0 },\n exit: { opacity: 0, x: -30 },\n transition: { type: \"spring\", stiffness: 400, damping: 20 },\n },\n slideLeft: {\n initial: { opacity: 0, x: 30 },\n animate: { opacity: 1, x: 0 },\n exit: { opacity: 0, x: 30 },\n transition: { type: \"spring\", stiffness: 400, damping: 20 },\n },\n flip: {\n initial: { opacity: 0, rotateY: 90 },\n animate: { opacity: 1, rotateY: 0 },\n exit: { opacity: 0, rotateY: 90 },\n transition: { type: \"spring\", stiffness: 500, damping: 30 },\n },\n rotate: {\n initial: { opacity: 0, rotate: -180 },\n animate: { opacity: 1, rotate: 0 },\n exit: { opacity: 0, rotate: -180 },\n transition: { type: \"spring\", stiffness: 500, damping: 25 },\n },\n};\n\nconst SelectTrigger = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n enableAnimation?: boolean;\n }\n>(({ className, children, enableAnimation = false, ...props }, ref) => {\n const { animation } = useRuru();\n return animation && enableAnimation ? (\n \n span]:line-clamp-1\",\n className,\n )}\n {...props}\n >\n {children}\n \n \n \n \n \n ) : (\n span]:line-clamp-1\",\n className,\n )}\n {...props}\n >\n {children}\n \n \n \n \n );\n});\nSelectTrigger.displayName = SelectPrimitive.Trigger.displayName;\n\nconst SelectScrollUpButton = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n));\nSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;\n\nconst SelectScrollDownButton = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n \n \n));\nSelectScrollDownButton.displayName =\n SelectPrimitive.ScrollDownButton.displayName;\n\n\nconst AnimatedSelectContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n selectedVariant: keyof typeof selectAnimationVariants;\n }\n>(\n (\n { className, children, position = \"popper\", selectedVariant, ...props },\n ref,\n ) => (\n \n \n \n \n \n {children}\n \n \n \n \n \n ),\n);\nAnimatedSelectContent.displayName = SelectPrimitive.Content.displayName;\n\n\nconst StaticSelectContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, position = \"popper\", ...props }, ref) => (\n \n \n \n \n {children}\n \n \n \n \n));\nStaticSelectContent.displayName = SelectPrimitive.Content.displayName;\n\nconst SelectContent = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef & {\n variants?: keyof typeof selectAnimationVariants;\n }\n>((props, ref) => {\n const { animation } = useRuru();\n const selectedVariant = props.variants || \"zoom\";\n\n return animation ? (\n \n ) : (\n \n );\n});\n\nSelectContent.displayName = \"SelectContent\";\n\nconst SelectLabel = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nSelectLabel.displayName = SelectPrimitive.Label.displayName;\n\nconst SelectItem = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, children, ...props }, ref) => (\n \n \n \n \n \n \n {children}\n \n));\nSelectItem.displayName = SelectPrimitive.Item.displayName;\n\nconst SelectSeparator = React.forwardRef<\n React.ElementRef,\n React.ComponentPropsWithoutRef\n>(({ className, ...props }, ref) => (\n \n));\nSelectSeparator.displayName = SelectPrimitive.Separator.displayName;\n\nexport {\n Select,\n SelectGroup,\n SelectValue,\n SelectTrigger,\n SelectContent,\n SelectLabel,\n SelectItem,\n SelectSeparator,\n SelectScrollUpButton,\n SelectScrollDownButton,\n};\n" } ], "type": "components:ui" diff --git a/apps/www/public/schema.json b/apps/www/public/schema.json index aa8f0de..fcb3294 100644 --- a/apps/www/public/schema.json +++ b/apps/www/public/schema.json @@ -11,9 +11,6 @@ "css": { "type": "string" }, - "baseColor": { - "type": "string" - }, "cssVariables": { "type": "boolean" }, diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx index 13c14ed..6a1bad4 100644 --- a/packages/ui/src/components/select.tsx +++ b/packages/ui/src/components/select.tsx @@ -16,12 +16,71 @@ const Select = SelectPrimitive.Root; const SelectGroup = SelectPrimitive.Group; const SelectValue = SelectPrimitive.Value; +export const selectAnimationVariants = { + zoom: { + initial: { opacity: 0, scale: 0.9 }, + animate: { opacity: 1, scale: 1 }, + exit: { opacity: 0, scale: 0.9 }, + transition: { type: "spring", stiffness: 600, damping: 25 }, + }, + scaleBounce: { + initial: { opacity: 0, scale: 0.5 }, + animate: { opacity: 1, scale: [1.2, 0.9, 1] }, + exit: { opacity: 0, scale: 0.5 }, + transition: { type: "spring", stiffness: 600, damping: 20 }, + }, + fade: { + initial: { opacity: 0 }, + animate: { opacity: 1 }, + exit: { opacity: 0 }, + transition: { duration: 0.3 }, + }, + slideUp: { + initial: { opacity: 0, y: 20 }, + animate: { opacity: 1, y: 0 }, + exit: { opacity: 0, y: 20 }, + transition: { type: "spring", stiffness: 500, damping: 20 }, + }, + slideDown: { + initial: { opacity: 0, y: -20 }, + animate: { opacity: 1, y: 0 }, + exit: { opacity: 0, y: -20 }, + transition: { type: "spring", stiffness: 500, damping: 20 }, + }, + slideRight: { + initial: { opacity: 0, x: -30 }, + animate: { opacity: 1, x: 0 }, + exit: { opacity: 0, x: -30 }, + transition: { type: "spring", stiffness: 400, damping: 20 }, + }, + slideLeft: { + initial: { opacity: 0, x: 30 }, + animate: { opacity: 1, x: 0 }, + exit: { opacity: 0, x: 30 }, + transition: { type: "spring", stiffness: 400, damping: 20 }, + }, + flip: { + initial: { opacity: 0, rotateY: 90 }, + animate: { opacity: 1, rotateY: 0 }, + exit: { opacity: 0, rotateY: 90 }, + transition: { type: "spring", stiffness: 500, damping: 30 }, + }, + rotate: { + initial: { opacity: 0, rotate: -180 }, + animate: { opacity: 1, rotate: 0 }, + exit: { opacity: 0, rotate: -180 }, + transition: { type: "spring", stiffness: 500, damping: 25 }, + }, +}; + const SelectTrigger = React.forwardRef< React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, children, ...props }, ref) => { + React.ComponentPropsWithoutRef & { + enableAnimation?: boolean; + } +>(({ className, children, enableAnimation = false, ...props }, ref) => { const { animation } = useRuru(); - return animation ? ( + return animation && enableAnimation ? ( , - React.ComponentPropsWithoutRef ->(({ className, children, position = "popper", ...props }, ref) => ( - - - & { + selectedVariant: keyof typeof selectAnimationVariants; + } +>( + ( + { className, children, position = "popper", selectedVariant, ...props }, + ref, + ) => ( + + - - - {children} - - - - - -)); + + + {children} + + + + + + ), +); AnimatedSelectContent.displayName = SelectPrimitive.Content.displayName; // Non-animated SelectContent component @@ -170,11 +233,19 @@ StaticSelectContent.displayName = SelectPrimitive.Content.displayName; const SelectContent = React.forwardRef< React.ElementRef, - React.ComponentPropsWithoutRef + React.ComponentPropsWithoutRef & { + variants?: keyof typeof selectAnimationVariants; + } >((props, ref) => { const { animation } = useRuru(); + const selectedVariant = props.variants || "zoom"; + return animation ? ( - + ) : ( );