diff --git a/apps/docs/astro.config.mjs b/apps/docs/astro.config.mjs index 92bd1a40..c6488320 100644 --- a/apps/docs/astro.config.mjs +++ b/apps/docs/astro.config.mjs @@ -1,13 +1,12 @@ import react from '@astrojs/react'; import starlight from '@astrojs/starlight'; import tailwind from '@astrojs/tailwind'; -import vercel from '@astrojs/vercel/static'; import { defineConfig } from 'astro/config'; // https://astro.build/config export default defineConfig({ output: 'static', - adapters: [vercel()], + adapters: [], integrations: [ starlight({ favicon: '/favicon.png', @@ -17,9 +16,9 @@ export default defineConfig({ ThemeSelect: './src/components/ThemeSelect.astro', Head: './src/components/Head.astro', }, - social: { - github: 'https://github.com/roninoss/rn-primitives', - }, + social: [ + { icon: 'github', label: 'GitHub', href: 'https://github.com/roninoss/rn-primitives' }, + ], sidebar: [ { label: 'Introduction', diff --git a/apps/docs/package.json b/apps/docs/package.json index c861e885..6ed92f15 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -11,12 +11,11 @@ "clean": "rm -rf .turbo node_modules dist .astro" }, "dependencies": { - "@astrojs/check": "^0.5.6", - "@astrojs/react": "^3.0.10", - "@astrojs/starlight": "^0.21.0", + "@astrojs/check": "^0.9.4", + "@astrojs/react": "^4.2.7", + "@astrojs/starlight": "^0.34.3", "@astrojs/starlight-tailwind": "^2.0.1", "@astrojs/tailwind": "^5.1.0", - "@astrojs/vercel": "^7.3.4", "@radix-ui/react-collapsible": "^1.1.0", "@radix-ui/react-dropdown-menu": "^2.1.1", "@radix-ui/react-slot": "^1.1.0", @@ -52,19 +51,19 @@ "@rn-primitives/tooltip": "workspace:*", "@rn-primitives/types": "workspace:*", "@rn-primitives/utils": "workspace:*", - "@types/react": "~18.3.12", - "@types/react-dom": "^18.2.19", + "@types/react": "19.0.10", + "@types/react-dom": "19.0.4", "@vercel/analytics": "^1.3.1", - "astro": "^4.4.9", - "class-variance-authority": "^0.7.0", - "clsx": "^2.1.0", - "lucide-react": "^0.334.0", - "react": "18.3.1", - "react-dom": "18.3.1", + "astro": "^5.7.13", + "class-variance-authority": "^0.7.1", + "clsx": "^2.1.1", + "lucide-react": "^0.503.0", + "react": "19.0.0", + "react-dom": "19.0.0", "sharp": "^0.32.5", - "tailwind-merge": "^2.5.3", + "tailwind-merge": "^3.0.2", "tailwindcss": "^3.4.13", "tailwindcss-animate": "^1.0.7", - "typescript": "^5.3.3" + "typescript": "^5.8.3" } } diff --git a/apps/docs/src/components/ui/button.tsx b/apps/docs/src/components/ui/button.tsx index e6f5744d..58b4d5bc 100644 --- a/apps/docs/src/components/ui/button.tsx +++ b/apps/docs/src/components/ui/button.tsx @@ -37,14 +37,19 @@ export interface ButtonProps asChild?: boolean; } -const Button = React.forwardRef( - ({ className, variant, size, asChild = false, ...props }, ref) => { - const Comp = asChild ? Slot : 'button'; - return ( - - ); - } -); +const Button = ({ + ref, + className, + variant, + size, + asChild = false, + ...props +}: ButtonProps & { + ref?: React.RefObject; +}) => { + const Comp = asChild ? Slot : 'button'; + return ; +}; Button.displayName = 'Button'; export { Button, buttonVariants }; diff --git a/apps/docs/src/components/ui/dropdown-menu.tsx b/apps/docs/src/components/ui/dropdown-menu.tsx index 1c78269b..16672d3b 100644 --- a/apps/docs/src/components/ui/dropdown-menu.tsx +++ b/apps/docs/src/components/ui/dropdown-menu.tsx @@ -16,12 +16,17 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub; const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup; -const DropdownMenuSubTrigger = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef & { - inset?: boolean; - } ->(({ className, inset, children, ...props }, ref) => ( +const DropdownMenuSubTrigger = ({ + ref, + className, + inset, + children, + ...props +}: React.ComponentPropsWithoutRef & { + inset?: boolean; +} & { + ref?: React.RefObject>; +}) => ( -)); +); DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName; -const DropdownMenuSubContent = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( +const DropdownMenuSubContent = ({ + ref, + className, + ...props +}: React.ComponentPropsWithoutRef & { + ref?: React.RefObject>; +}) => ( -)); +); DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName; -const DropdownMenuContent = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, sideOffset = 4, ...props }, ref) => ( +const DropdownMenuContent = ({ + ref, + className, + sideOffset = 4, + ...props +}: React.ComponentPropsWithoutRef & { + ref?: React.RefObject>; +}) => ( -)); +); DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName; -const DropdownMenuItem = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef & { - inset?: boolean; - } ->(({ className, inset, ...props }, ref) => ( +const DropdownMenuItem = ({ + ref, + className, + inset, + ...props +}: React.ComponentPropsWithoutRef & { + inset?: boolean; +} & { + ref?: React.RefObject>; +}) => ( -)); +); DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName; -const DropdownMenuCheckboxItem = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, children, checked, ...props }, ref) => ( +const DropdownMenuCheckboxItem = ({ + ref, + className, + children, + checked, + ...props +}: React.ComponentPropsWithoutRef & { + ref?: React.RefObject>; +}) => ( {children} -)); +); DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName; -const DropdownMenuRadioItem = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, children, ...props }, ref) => ( +const DropdownMenuRadioItem = ({ + ref, + className, + children, + ...props +}: React.ComponentPropsWithoutRef & { + ref?: React.RefObject>; +}) => ( {children} -)); +); DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName; -const DropdownMenuLabel = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef & { - inset?: boolean; - } ->(({ className, inset, ...props }, ref) => ( +const DropdownMenuLabel = ({ + ref, + className, + inset, + ...props +}: React.ComponentPropsWithoutRef & { + inset?: boolean; +} & { + ref?: React.RefObject>; +}) => ( -)); +); DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName; -const DropdownMenuSeparator = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( +const DropdownMenuSeparator = ({ + ref, + className, + ...props +}: React.ComponentPropsWithoutRef & { + ref?: React.RefObject>; +}) => ( -)); +); DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName; const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes) => { diff --git a/apps/docs/src/content/config.ts b/apps/docs/src/content/config.ts index 31b74762..6a7b7a02 100644 --- a/apps/docs/src/content/config.ts +++ b/apps/docs/src/content/config.ts @@ -1,6 +1,7 @@ import { defineCollection } from 'astro:content'; +import { docsLoader } from '@astrojs/starlight/loaders'; import { docsSchema } from '@astrojs/starlight/schema'; export const collections = { - docs: defineCollection({ schema: docsSchema() }), + docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }), }; diff --git a/apps/docs/src/content/docs/accordion.mdx b/apps/docs/src/content/docs/accordion.mdx index cb2f3ab6..2d3087f2 100644 --- a/apps/docs/src/content/docs/accordion.mdx +++ b/apps/docs/src/content/docs/accordion.mdx @@ -9,76 +9,17 @@ description: A vertically stacked set of interactive headings that each reveal a import Code from '@/components/ManualCode.astro'; import { LinkButton } from '@/components/react/LinkButton'; import { Aside, Tabs, TabItem } from '@astrojs/starlight/components'; -import importedNativeCode from '@/../node_modules/@rn-primitives/accordion/src/accordion.tsx?raw'; -import importedWebCode from '@/../node_modules/@rn-primitives/accordion/src/accordion.web.tsx?raw'; -import importedTypesCode from '@/../node_modules/@rn-primitives/accordion/src/types.ts?raw'; -import importedIndexCode from '@/../node_modules/@rn-primitives/accordion/src/index.ts?raw'; A vertically stacked set of interactive headings that each reveal a section of content. ## Installation - - - Install the component via your command line. - - ```bash - npx expo install @rn-primitives/accordion - ``` - - - - - -
- - - - **Install @radix-ui/react-accordion** - - ```bash - npx expo install @radix-ui/react-accordion - ``` - -
- - **Copy/paste the following code for web to `~/components/primitives/accordion/accordion.web.tsx`** - - - - **Copy/paste the following code for native to `~/components/primitives/accordion/accordion.tsx`** - - - - **Copy/paste the following code for types to `~/components/primitives/accordion/types.ts`** - - - - **Copy/paste the following code for exporting to `~/components/primitives/accordion/index.ts`** - - - - - **Copy/paste the following code for native to `~/components/primitives/accordion/index.tsx`** - - - - **Copy/paste the following code for types to `~/components/primitives/accordion/types.ts`** - - - - - - +Install the component via your command line. +```bash +npx expo install @rn-primitives/accordion +``` ## Usage diff --git a/apps/docs/src/content/docs/alert-dialog.mdx b/apps/docs/src/content/docs/alert-dialog.mdx index 28f52c32..a6228502 100644 --- a/apps/docs/src/content/docs/alert-dialog.mdx +++ b/apps/docs/src/content/docs/alert-dialog.mdx @@ -9,83 +9,27 @@ description: A modal dialog that interrupts the user with important content and import Code from '@/components/ManualCode.astro'; import { LinkButton } from '@/components/react/LinkButton'; import { Aside, Tabs, TabItem } from '@astrojs/starlight/components'; -import importedNativeCode from '@/../node_modules/@rn-primitives/alert-dialog/src/alert-dialog.tsx?raw'; -import importedWebCode from '@/../node_modules/@rn-primitives/alert-dialog/src/alert-dialog.web.tsx?raw'; -import importedTypesCode from '@/../node_modules/@rn-primitives/alert-dialog/src/types.ts?raw'; -import importedIndexCode from '@/../node_modules/@rn-primitives/alert-dialog/src/index.ts?raw'; + A modal dialog that interrupts the user with important content and expects a response. ## Installation - - - - Install the component via your command line. - - ```bash - npx expo install @rn-primitives/alert-dialog - ``` - - +Install the component via your command line. - - - -
- - - **Install @radix-ui/react-alert-dialog** + + ## Usage