From a03b10e452a0e501a09dd6eac6e010ee9b97ac99 Mon Sep 17 00:00:00 2001 From: Theo Ribbi Date: Tue, 9 Sep 2025 22:17:14 +0200 Subject: [PATCH 1/2] fix(tabs): update flex style to allow scroll view --- registry/tabs/tabs.tsx | 198 ++++++++++++++++++++--------------------- 1 file changed, 99 insertions(+), 99 deletions(-) diff --git a/registry/tabs/tabs.tsx b/registry/tabs/tabs.tsx index 621dc30..c5b3050 100644 --- a/registry/tabs/tabs.tsx +++ b/registry/tabs/tabs.tsx @@ -1,129 +1,129 @@ -import * as React from "react"; -import { View, Text, Pressable, Platform } from "react-native"; import { cn } from "@/lib/utils"; +import * as React from "react"; +import { Platform, Pressable, Text, View } from "react-native"; interface TabsProps { - defaultValue?: string; - value?: string; - onValueChange?: (value: string) => void; - children: React.ReactNode; - className?: string; + defaultValue?: string; + value?: string; + onValueChange?: (value: string) => void; + children: React.ReactNode; + className?: string; } interface TabsListProps { - children: React.ReactNode; - className?: string; + children: React.ReactNode; + className?: string; } interface TabsTriggerProps { - value: string; - children: React.ReactNode; - className?: string; + value: string; + children: React.ReactNode; + className?: string; } interface TabsContentProps { - value: string; - children: React.ReactNode; - className?: string; + value: string; + children: React.ReactNode; + className?: string; } const TabsContext = React.createContext<{ - value: string; - onValueChange: (value: string) => void; + value: string; + onValueChange: (value: string) => void; }>({ - value: "", - onValueChange: () => { }, + value: "", + onValueChange: () => {}, }); const Tabs = React.forwardRef( - ({ defaultValue, value, onValueChange, children, className }, ref) => { - const [selectedValue, setSelectedValue] = React.useState( - value || defaultValue || "" - ); - - const handleValueChange = React.useCallback( - (newValue: string) => { - setSelectedValue(newValue); - onValueChange?.(newValue); - }, - [onValueChange] - ); - - return ( - - - {children} - - - ); - } + ({ defaultValue, value, onValueChange, children, className }, ref) => { + const [selectedValue, setSelectedValue] = React.useState( + value || defaultValue || "", + ); + + const handleValueChange = React.useCallback( + (newValue: string) => { + setSelectedValue(newValue); + onValueChange?.(newValue); + }, + [onValueChange], + ); + + return ( + + + {children} + + + ); + }, ); const TabsList = React.forwardRef( - ({ children, className }, ref) => { - return ( - - {children} - - ); - } + ({ children, className }, ref) => { + return ( + + {children} + + ); + }, ); const TabsTrigger = React.forwardRef( - ({ value, children, className }, ref) => { - const { value: selectedValue, onValueChange } = - React.useContext(TabsContext); - const isSelected = selectedValue === value; - - return ( - onValueChange(value)} - className={cn( - "flex-1 items-center justify-center rounded-lg px-4 py-2", - Platform.OS === "ios" ? "h-10" : "h-12", - isSelected ? "bg-background" : "bg-transparent", - className - )} - > - - {children} - - - ); - } + ({ value, children, className }, ref) => { + const { value: selectedValue, onValueChange } = + React.useContext(TabsContext); + const isSelected = selectedValue === value; + + return ( + onValueChange(value)} + className={cn( + "flex-1 items-center justify-center rounded-lg px-4 py-2", + Platform.OS === "ios" ? "h-10" : "h-12", + isSelected ? "bg-background" : "bg-transparent", + className, + )} + > + + {children} + + + ); + }, ); const TabsContent = React.forwardRef( - ({ value, children, className }, ref) => { - const { value: selectedValue } = React.useContext(TabsContext); - const isSelected = selectedValue === value; - - if (!isSelected) return null; - - return ( - - {children} - - ); - } + ({ value, children, className }, ref) => { + const { value: selectedValue } = React.useContext(TabsContext); + const isSelected = selectedValue === value; + + if (!isSelected) return null; + + return ( + + {children} + + ); + }, ); Tabs.displayName = "Tabs"; @@ -131,4 +131,4 @@ TabsList.displayName = "TabsList"; TabsTrigger.displayName = "TabsTrigger"; TabsContent.displayName = "TabsContent"; -export { Tabs, TabsList, TabsTrigger, TabsContent }; +export { Tabs, TabsContent, TabsList, TabsTrigger }; From 594b73405f573836d3bb3f06333d92663b11c4fe Mon Sep 17 00:00:00 2001 From: Theo Ribbi Date: Tue, 9 Sep 2025 22:19:40 +0200 Subject: [PATCH 2/2] refactor(tabs): reorganize imports and improve component structure - Adjust import order in Tabs component for better readability. - Update Tabs component's structure to enhance consistency and maintainability. - Ensure proper export order for Tabs components in the module. --- app/(site)/docs/components/tabs/page.tsx | 190 +++++++++++------------ public/r/tabs.json | 2 +- 2 files changed, 96 insertions(+), 96 deletions(-) diff --git a/app/(site)/docs/components/tabs/page.tsx b/app/(site)/docs/components/tabs/page.tsx index 249e331..60689a2 100644 --- a/app/(site)/docs/components/tabs/page.tsx +++ b/app/(site)/docs/components/tabs/page.tsx @@ -13,132 +13,132 @@ export default function TabsPage() { "language": "tsx" } ]} - componentCode={`import * as React from "react"; -import { View, Text, Pressable, Platform } from "react-native"; -import { cn } from "@/lib/utils"; + componentCode={`import { cn } from "@/lib/utils"; +import * as React from "react"; +import { Platform, Pressable, Text, View } from "react-native"; interface TabsProps { - defaultValue?: string; - value?: string; - onValueChange?: (value: string) => void; - children: React.ReactNode; - className?: string; + defaultValue?: string; + value?: string; + onValueChange?: (value: string) => void; + children: React.ReactNode; + className?: string; } interface TabsListProps { - children: React.ReactNode; - className?: string; + children: React.ReactNode; + className?: string; } interface TabsTriggerProps { - value: string; - children: React.ReactNode; - className?: string; + value: string; + children: React.ReactNode; + className?: string; } interface TabsContentProps { - value: string; - children: React.ReactNode; - className?: string; + value: string; + children: React.ReactNode; + className?: string; } const TabsContext = React.createContext<{ - value: string; - onValueChange: (value: string) => void; + value: string; + onValueChange: (value: string) => void; }>({ - value: "", - onValueChange: () => { }, + value: "", + onValueChange: () => {}, }); const Tabs = React.forwardRef( - ({ defaultValue, value, onValueChange, children, className }, ref) => { - const [selectedValue, setSelectedValue] = React.useState( - value || defaultValue || "" - ); + ({ defaultValue, value, onValueChange, children, className }, ref) => { + const [selectedValue, setSelectedValue] = React.useState( + value || defaultValue || "", + ); - const handleValueChange = React.useCallback( - (newValue: string) => { - setSelectedValue(newValue); - onValueChange?.(newValue); - }, - [onValueChange] - ); + const handleValueChange = React.useCallback( + (newValue: string) => { + setSelectedValue(newValue); + onValueChange?.(newValue); + }, + [onValueChange], + ); - return ( - - - {children} - - - ); - } + return ( + + + {children} + + + ); + }, ); const TabsList = React.forwardRef( - ({ children, className }, ref) => { - return ( - - {children} - - ); - } + ({ children, className }, ref) => { + return ( + + {children} + + ); + }, ); const TabsTrigger = React.forwardRef( - ({ value, children, className }, ref) => { - const { value: selectedValue, onValueChange } = - React.useContext(TabsContext); - const isSelected = selectedValue === value; + ({ value, children, className }, ref) => { + const { value: selectedValue, onValueChange } = + React.useContext(TabsContext); + const isSelected = selectedValue === value; - return ( - onValueChange(value)} - className={cn( - "flex-1 items-center justify-center rounded-lg px-4 py-2", - Platform.OS === "ios" ? "h-10" : "h-12", - isSelected ? "bg-background" : "bg-transparent", - className - )} - > - - {children} - - - ); - } + return ( + onValueChange(value)} + className={cn( + "flex-1 items-center justify-center rounded-lg px-4 py-2", + Platform.OS === "ios" ? "h-10" : "h-12", + isSelected ? "bg-background" : "bg-transparent", + className, + )} + > + + {children} + + + ); + }, ); const TabsContent = React.forwardRef( - ({ value, children, className }, ref) => { - const { value: selectedValue } = React.useContext(TabsContext); - const isSelected = selectedValue === value; + ({ value, children, className }, ref) => { + const { value: selectedValue } = React.useContext(TabsContext); + const isSelected = selectedValue === value; - if (!isSelected) return null; + if (!isSelected) return null; - return ( - - {children} - - ); - } + return ( + + {children} + + ); + }, ); Tabs.displayName = "Tabs"; @@ -146,7 +146,7 @@ TabsList.displayName = "TabsList"; TabsTrigger.displayName = "TabsTrigger"; TabsContent.displayName = "TabsContent"; -export { Tabs, TabsList, TabsTrigger, TabsContent }; +export { Tabs, TabsContent, TabsList, TabsTrigger }; `} previewCode={`import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import * as React from "react"; diff --git a/public/r/tabs.json b/public/r/tabs.json index 2572650..5c74621 100644 --- a/public/r/tabs.json +++ b/public/r/tabs.json @@ -9,7 +9,7 @@ "files": [ { "path": "registry/tabs/tabs.tsx", - "content": "import * as React from \"react\";\nimport { View, Text, Pressable, Platform } from \"react-native\";\nimport { cn } from \"@/lib/utils\";\n\ninterface TabsProps {\n defaultValue?: string;\n value?: string;\n onValueChange?: (value: string) => void;\n children: React.ReactNode;\n className?: string;\n}\n\ninterface TabsListProps {\n children: React.ReactNode;\n className?: string;\n}\n\ninterface TabsTriggerProps {\n value: string;\n children: React.ReactNode;\n className?: string;\n}\n\ninterface TabsContentProps {\n value: string;\n children: React.ReactNode;\n className?: string;\n}\n\nconst TabsContext = React.createContext<{\n value: string;\n onValueChange: (value: string) => void;\n}>({\n value: \"\",\n onValueChange: () => { },\n});\n\nconst Tabs = React.forwardRef(\n ({ defaultValue, value, onValueChange, children, className }, ref) => {\n const [selectedValue, setSelectedValue] = React.useState(\n value || defaultValue || \"\"\n );\n\n const handleValueChange = React.useCallback(\n (newValue: string) => {\n setSelectedValue(newValue);\n onValueChange?.(newValue);\n },\n [onValueChange]\n );\n\n return (\n \n \n {children}\n \n \n );\n }\n);\n\nconst TabsList = React.forwardRef(\n ({ children, className }, ref) => {\n return (\n \n {children}\n \n );\n }\n);\n\nconst TabsTrigger = React.forwardRef(\n ({ value, children, className }, ref) => {\n const { value: selectedValue, onValueChange } =\n React.useContext(TabsContext);\n const isSelected = selectedValue === value;\n\n return (\n onValueChange(value)}\n className={cn(\n \"flex-1 items-center justify-center rounded-lg px-4 py-2\",\n Platform.OS === \"ios\" ? \"h-10\" : \"h-12\",\n isSelected ? \"bg-background\" : \"bg-transparent\",\n className\n )}\n >\n \n {children}\n \n \n );\n }\n);\n\nconst TabsContent = React.forwardRef(\n ({ value, children, className }, ref) => {\n const { value: selectedValue } = React.useContext(TabsContext);\n const isSelected = selectedValue === value;\n\n if (!isSelected) return null;\n\n return (\n \n {children}\n \n );\n }\n);\n\nTabs.displayName = \"Tabs\";\nTabsList.displayName = \"TabsList\";\nTabsTrigger.displayName = \"TabsTrigger\";\nTabsContent.displayName = \"TabsContent\";\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent };\n", + "content": "import { cn } from \"@/lib/utils\";\nimport * as React from \"react\";\nimport { Platform, Pressable, Text, View } from \"react-native\";\n\ninterface TabsProps {\n\tdefaultValue?: string;\n\tvalue?: string;\n\tonValueChange?: (value: string) => void;\n\tchildren: React.ReactNode;\n\tclassName?: string;\n}\n\ninterface TabsListProps {\n\tchildren: React.ReactNode;\n\tclassName?: string;\n}\n\ninterface TabsTriggerProps {\n\tvalue: string;\n\tchildren: React.ReactNode;\n\tclassName?: string;\n}\n\ninterface TabsContentProps {\n\tvalue: string;\n\tchildren: React.ReactNode;\n\tclassName?: string;\n}\n\nconst TabsContext = React.createContext<{\n\tvalue: string;\n\tonValueChange: (value: string) => void;\n}>({\n\tvalue: \"\",\n\tonValueChange: () => {},\n});\n\nconst Tabs = React.forwardRef(\n\t({ defaultValue, value, onValueChange, children, className }, ref) => {\n\t\tconst [selectedValue, setSelectedValue] = React.useState(\n\t\t\tvalue || defaultValue || \"\",\n\t\t);\n\n\t\tconst handleValueChange = React.useCallback(\n\t\t\t(newValue: string) => {\n\t\t\t\tsetSelectedValue(newValue);\n\t\t\t\tonValueChange?.(newValue);\n\t\t\t},\n\t\t\t[onValueChange],\n\t\t);\n\n\t\treturn (\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t{children}\n\t\t\t\t\n\t\t\t\n\t\t);\n\t},\n);\n\nconst TabsList = React.forwardRef(\n\t({ children, className }, ref) => {\n\t\treturn (\n\t\t\t\n\t\t\t\t{children}\n\t\t\t\n\t\t);\n\t},\n);\n\nconst TabsTrigger = React.forwardRef(\n\t({ value, children, className }, ref) => {\n\t\tconst { value: selectedValue, onValueChange } =\n\t\t\tReact.useContext(TabsContext);\n\t\tconst isSelected = selectedValue === value;\n\n\t\treturn (\n\t\t\t onValueChange(value)}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex-1 items-center justify-center rounded-lg px-4 py-2\",\n\t\t\t\t\tPlatform.OS === \"ios\" ? \"h-10\" : \"h-12\",\n\t\t\t\t\tisSelected ? \"bg-background\" : \"bg-transparent\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t\n\t\t\t\t\t{children}\n\t\t\t\t\n\t\t\t\n\t\t);\n\t},\n);\n\nconst TabsContent = React.forwardRef(\n\t({ value, children, className }, ref) => {\n\t\tconst { value: selectedValue } = React.useContext(TabsContext);\n\t\tconst isSelected = selectedValue === value;\n\n\t\tif (!isSelected) return null;\n\n\t\treturn (\n\t\t\t\n\t\t\t\t{children}\n\t\t\t\n\t\t);\n\t},\n);\n\nTabs.displayName = \"Tabs\";\nTabsList.displayName = \"TabsList\";\nTabsTrigger.displayName = \"TabsTrigger\";\nTabsContent.displayName = \"TabsContent\";\n\nexport { Tabs, TabsContent, TabsList, TabsTrigger };\n", "type": "registry:ui" } ],