Skip to content

Commit e1eff2f

Browse files
theoribbitheoribbi
authored
Merge pull request #95 from nativeui-org/feat/update-shadcn-registry
refactor(registry): move registry files to public/r directory
2 parents 963e49d + 15f15c2 commit e1eff2f

File tree

9 files changed

+145
-116
lines changed

9 files changed

+145
-116
lines changed

‎app/(site)/docs/components/button/page.tsx‎

Lines changed: 80 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export default function ButtonPage() {
1515
{
1616
"title": "Variants",
1717
"value": "variants",
18-
"content": "import { Button } from \"@nativeui/ui\";\n\nexport default function ButtonVariants() {\n return (\n <div className=\"flex flex-col gap-4\">\n <Button variant=\"default\">Default</Button>\n <Button variant=\"destructive\">Destructive</Button>\n <Button variant=\"outline\">Outline</Button>\n <Button variant=\"secondary\">Secondary</Button>\n <Button variant=\"ghost\">Ghost</Button>\n <Button variant=\"link\">Link</Button>\n </div>\n );\n}",
18+
"content": "import { Button } from \"@nativeui/ui\";\n\nexport default function ButtonVariants() {\n return (\n <div className=\"flex flex-col gap-4\">\n <Button variant=\"default\">Default</Button>\n <Button variant=\"destructive\">Destructive</Button>\n <Button variant=\"outline\">Outline</Button>\n <Button variant=\"secondary\">Secondary</Button>\n <Button variant=\"ghost\">Ghost</Button>\n <Button variant=\"link\">Link</Button>\n <Button variant=\"selection\">Selection</Button>\n </div>\n );\n}",
1919
"language": "tsx"
2020
},
2121
{
@@ -25,75 +25,97 @@ export default function ButtonPage() {
2525
"language": "tsx"
2626
}
2727
]}
28-
componentCode={`import * as React from "react";
28+
componentCode={`import { cn } from "@/lib/utils";
29+
import { cva, type VariantProps } from "class-variance-authority";
30+
import * as React from "react";
2931
import {
3032
Pressable,
31-
PressableProps as RNPressableProps,
33+
type PressableStateCallbackType,
34+
type PressableProps as RNPressableProps,
3235
View,
33-
ViewStyle,
34-
PressableStateCallbackType,
36+
type ViewStyle,
3537
} from "react-native";
36-
import { cn } from "@/lib/utils";
37-
38-
import { cva, type VariantProps } from "class-variance-authority";
3938
4039
export const buttonVariants = cva(
41-
"flex-row items-center justify-center rounded-md",
42-
{
43-
variants: {
44-
variant: {
45-
default:
46-
"bg-primary text-primary-foreground dark:bg-primary dark:text-primary-foreground shadow",
47-
destructive:
48-
"bg-destructive text-destructive-foreground dark:bg-destructive dark:text-destructive-foreground shadow-sm",
49-
outline:
50-
"border border-input bg-background text-foreground dark:border-input dark:bg-background dark:text-foreground shadow-sm",
51-
secondary:
52-
"bg-secondary text-secondary-foreground dark:bg-secondary dark:text-secondary-foreground shadow-sm",
53-
ghost: "text-foreground dark:text-foreground",
54-
link: "text-primary dark:text-primary underline",
55-
},
56-
size: {
57-
default: "h-12 px-6",
58-
sm: "h-10 px-4",
59-
lg: "h-14 px-8",
60-
icon: "h-12 w-12",
61-
},
62-
},
63-
defaultVariants: {
64-
variant: "default",
65-
size: "default",
66-
},
67-
}
40+
"flex-row items-center justify-center rounded-lg",
41+
{
42+
variants: {
43+
variant: {
44+
default: "bg-primary text-primary-foreground shadow-sm",
45+
destructive: "bg-destructive text-destructive-foreground shadow-sm",
46+
outline: "border-2 border-border bg-background text-foreground",
47+
secondary: "bg-secondary text-secondary-foreground shadow-sm",
48+
ghost: "text-foreground",
49+
link: "text-primary underline",
50+
selection: "border-2 border-border bg-background",
51+
},
52+
size: {
53+
default: "h-12 px-4",
54+
sm: "h-10 px-3",
55+
lg: "h-14 px-6",
56+
icon: "h-12 w-12",
57+
},
58+
selected: {
59+
true: "",
60+
false: "",
61+
},
62+
},
63+
compoundVariants: [
64+
{
65+
variant: "selection",
66+
selected: true,
67+
className: "border-primary bg-primary/5",
68+
},
69+
{
70+
variant: "outline",
71+
selected: true,
72+
className: "border-primary ring-1 ring-primary/20",
73+
},
74+
],
75+
defaultVariants: {
76+
variant: "default",
77+
size: "default",
78+
selected: false,
79+
},
80+
},
6881
);
6982
7083
export interface ButtonProps
71-
extends Omit<RNPressableProps, "style">,
72-
VariantProps<typeof buttonVariants> {
73-
className?: string;
74-
style?: ViewStyle;
75-
asChild?: boolean;
84+
extends Omit<RNPressableProps, "style">,
85+
VariantProps<typeof buttonVariants> {
86+
className?: string;
87+
style?: ViewStyle;
88+
asChild?: boolean;
89+
selected?: boolean;
7690
}
7791
7892
const Button = React.forwardRef<View, ButtonProps>(
79-
({ className, variant, size, asChild = false, children, ...props }, ref) => {
80-
return (
81-
<Pressable
82-
className={cn(buttonVariants({ variant, size, className }))}
83-
ref={ref}
84-
{...props}
85-
>
86-
{(state: PressableStateCallbackType) => (
87-
<View
88-
className={\`flex-row items-center justify-center gap-2 \${state.pressed ? "opacity-80" : ""
89-
}\`}
90-
>
91-
{typeof children === "function" ? children(state) : children}
92-
</View>
93-
)}
94-
</Pressable>
95-
);
96-
}
93+
(
94+
{ className, variant, size, selected, asChild = false, children, ...props },
95+
ref,
96+
) => {
97+
const [isPressed, setIsPressed] = React.useState(false);
98+
99+
return (
100+
<Pressable
101+
className={cn(buttonVariants({ variant, size, selected, className }))}
102+
ref={ref}
103+
onPressIn={() => setIsPressed(true)}
104+
onPressOut={() => setIsPressed(false)}
105+
{...props}
106+
>
107+
{(state: PressableStateCallbackType) => (
108+
<View
109+
className={\`flex-row items-center justify-center gap-2 \${
110+
state.pressed || isPressed ? "opacity-80" : ""
111+
}\`}
112+
>
113+
{typeof children === "function" ? children(state) : children}
114+
</View>
115+
)}
116+
</Pressable>
117+
);
118+
},
97119
);
98120
99121
Button.displayName = "Button";

‎app/(site)/docs/components/input/page.tsx‎

Lines changed: 30 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -13,37 +13,40 @@ export default function InputPage() {
1313
"language": "tsx"
1414
}
1515
]}
16-
componentCode={`import * as React from "react"
17-
import { TextInput, Platform } from "react-native"
18-
import { cn } from "@/lib/utils"
16+
componentCode={`import { cn } from "@/lib/utils";
17+
import * as React from "react";
18+
import { Platform, TextInput } from "react-native";
1919
20-
const Input = React.forwardRef<TextInput, React.ComponentProps<typeof TextInput>>(
21-
({ className, ...props }, ref) => {
22-
const [isFocused, setIsFocused] = React.useState(false)
20+
const Input = React.forwardRef<
21+
TextInput,
22+
React.ComponentProps<typeof TextInput>
23+
>(({ className, ...props }, ref) => {
24+
const [isFocused, setIsFocused] = React.useState(false);
2325
24-
return (
25-
<TextInput
26-
className={cn(
27-
"h-12 w-full rounded-md border border-input bg-transparent px-3 text-primary shadow-sm",
28-
"placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
29-
isFocused ? "border-ring ring-1 ring-ring" : "",
30-
Platform.OS === "ios" ? "ios:shadow-sm ios:shadow-foreground/10" : "android:elevation-1",
31-
className
32-
)}
33-
ref={ref}
34-
textAlignVertical="center"
35-
underlineColorAndroid="transparent"
36-
onFocus={() => setIsFocused(true)}
37-
onBlur={() => setIsFocused(false)}
38-
{...props}
39-
/>
40-
)
41-
}
42-
)
26+
return (
27+
<TextInput
28+
className={cn(
29+
"h-12 w-full rounded-lg border bg-background px-3 text-foreground shadow-sm",
30+
"placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
31+
isFocused ? "border-ring" : "border-input",
32+
Platform.OS === "ios"
33+
? "ios:shadow-sm ios:shadow-foreground/10"
34+
: "android:elevation-1",
35+
className,
36+
)}
37+
ref={ref}
38+
textAlignVertical="center"
39+
underlineColorAndroid="transparent"
40+
onFocus={() => setIsFocused(true)}
41+
onBlur={() => setIsFocused(false)}
42+
{...props}
43+
/>
44+
);
45+
});
4346
44-
Input.displayName = "Input"
47+
Input.displayName = "Input";
4548
46-
export { Input }
49+
export { Input };
4750
`}
4851
previewCode={`import { Button } from "@/components/ui/button";
4952
import { Input } from "@/components/ui/input";

‎app/(site)/docs/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import React from "react";
44
import Link from "next/link";
55
import { usePathname } from "next/navigation";
66
import { cn } from "@/lib/utils";
7-
import registry from "@/registry.json";
7+
import registry from "@/public/r/registry.json";
88

99
const docsConfig = {
1010
sidebarNav: [

‎components/command-menu.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
CommandItem,
1010
CommandList,
1111
} from "@/components/ui/command";
12-
import registry from "@/registry.json";
12+
import registry from "@/public/r/registry.json";
1313

1414
export function CommandMenu() {
1515
const [open, setOpen] = React.useState(false);

‎public/r/button.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"files": [
1212
{
1313
"path": "registry/button/button.tsx",
14-
"content": "import * as React from \"react\";\nimport {\n Pressable,\n PressableProps as RNPressableProps,\n View,\n ViewStyle,\n PressableStateCallbackType,\n} from \"react-native\";\nimport { cn } from \"@/lib/utils\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nexport const buttonVariants = cva(\n \"flex-row items-center justify-center rounded-md\",\n {\n variants: {\n variant: {\n default:\n \"bg-primary text-primary-foreground dark:bg-primary dark:text-primary-foreground shadow\",\n destructive:\n \"bg-destructive text-destructive-foreground dark:bg-destructive dark:text-destructive-foreground shadow-sm\",\n outline:\n \"border border-input bg-background text-foreground dark:border-input dark:bg-background dark:text-foreground shadow-sm\",\n secondary:\n \"bg-secondary text-secondary-foreground dark:bg-secondary dark:text-secondary-foreground shadow-sm\",\n ghost: \"text-foreground dark:text-foreground\",\n link: \"text-primary dark:text-primary underline\",\n },\n size: {\n default: \"h-12 px-6\",\n sm: \"h-10 px-4\",\n lg: \"h-14 px-8\",\n icon: \"h-12 w-12\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n);\n\nexport interface ButtonProps\n extends Omit<RNPressableProps, \"style\">,\n VariantProps<typeof buttonVariants> {\n className?: string;\n style?: ViewStyle;\n asChild?: boolean;\n}\n\nconst Button = React.forwardRef<View, ButtonProps>(\n ({ className, variant, size, asChild = false, children, ...props }, ref) => {\n return (\n <Pressable\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n {...props}\n >\n {(state: PressableStateCallbackType) => (\n <View\n className={`flex-row items-center justify-center gap-2 ${state.pressed ? \"opacity-80\" : \"\"\n }`}\n >\n {typeof children === \"function\" ? children(state) : children}\n </View>\n )}\n </Pressable>\n );\n }\n);\n\nButton.displayName = \"Button\";\n\nexport { Button };\n",
14+
"content": "import { cn } from \"@/lib/utils\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport {\n Pressable,\n type PressableStateCallbackType,\n type PressableProps as RNPressableProps,\n View,\n type ViewStyle,\n} from \"react-native\";\n\nexport const buttonVariants = cva(\n\t\"flex-row items-center justify-center rounded-lg\",\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"bg-primary text-primary-foreground shadow-sm\",\n\t\t\t\tdestructive: \"bg-destructive text-destructive-foreground shadow-sm\",\n\t\t\t\toutline: \"border-2 border-border bg-background text-foreground\",\n\t\t\t\tsecondary: \"bg-secondary text-secondary-foreground shadow-sm\",\n\t\t\t\tghost: \"text-foreground\",\n\t\t\t\tlink: \"text-primary underline\",\n\t\t\t\tselection: \"border-2 border-border bg-background\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tdefault: \"h-12 px-4\",\n\t\t\t\tsm: \"h-10 px-3\",\n\t\t\t\tlg: \"h-14 px-6\",\n\t\t\t\ticon: \"h-12 w-12\",\n\t\t\t},\n\t\t\tselected: {\n\t\t\t\ttrue: \"\",\n\t\t\t\tfalse: \"\",\n\t\t\t},\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tvariant: \"selection\",\n\t\t\t\tselected: true,\n\t\t\t\tclassName: \"border-primary bg-primary/5\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tvariant: \"outline\",\n\t\t\t\tselected: true,\n\t\t\t\tclassName: \"border-primary ring-1 ring-primary/20\",\n\t\t\t},\n\t\t],\n\t\tdefaultVariants: {\n\t\t\tvariant: \"default\",\n\t\t\tsize: \"default\",\n\t\t\tselected: false,\n\t\t},\n\t},\n);\n\nexport interface ButtonProps\n\textends Omit<RNPressableProps, \"style\">,\n\t\tVariantProps<typeof buttonVariants> {\n\tclassName?: string;\n\tstyle?: ViewStyle;\n\tasChild?: boolean;\n\tselected?: boolean;\n}\n\nconst Button = React.forwardRef<View, ButtonProps>(\n\t(\n\t\t{ className, variant, size, selected, asChild = false, children, ...props },\n\t\tref,\n\t) => {\n\t\tconst [isPressed, setIsPressed] = React.useState(false);\n\n\t\treturn (\n\t\t\t<Pressable\n\t\t\t\tclassName={cn(buttonVariants({ variant, size, selected, className }))}\n\t\t\t\tref={ref}\n\t\t\t\tonPressIn={() => setIsPressed(true)}\n\t\t\t\tonPressOut={() => setIsPressed(false)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{(state: PressableStateCallbackType) => (\n\t\t\t\t\t<View\n\t\t\t\t\t\tclassName={`flex-row items-center justify-center gap-2 ${\n\t\t\t\t\t\t\tstate.pressed || isPressed ? \"opacity-80\" : \"\"\n\t\t\t\t\t\t}`}\n\t\t\t\t\t>\n\t\t\t\t\t\t{typeof children === \"function\" ? children(state) : children}\n\t\t\t\t\t</View>\n\t\t\t\t)}\n\t\t\t</Pressable>\n\t\t);\n\t},\n);\n\nButton.displayName = \"Button\";\n\nexport { Button };\n",
1515
"type": "registry:ui"
1616
}
1717
],

‎public/r/input.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"files": [
1010
{
1111
"path": "registry/input/input.tsx",
12-
"content": "import * as React from \"react\"\nimport { TextInput, Platform } from \"react-native\"\nimport { cn } from \"@/lib/utils\"\n\nconst Input = React.forwardRef<TextInput, React.ComponentProps<typeof TextInput>>(\n ({ className, ...props }, ref) => {\n const [isFocused, setIsFocused] = React.useState(false)\n\n return (\n <TextInput\n className={cn(\n \"h-12 w-full rounded-md border border-input bg-transparent px-3 text-primary shadow-sm\",\n \"placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n isFocused ? \"border-ring ring-1 ring-ring\" : \"\",\n Platform.OS === \"ios\" ? \"ios:shadow-sm ios:shadow-foreground/10\" : \"android:elevation-1\",\n className\n )}\n ref={ref}\n textAlignVertical=\"center\"\n underlineColorAndroid=\"transparent\"\n onFocus={() => setIsFocused(true)}\n onBlur={() => setIsFocused(false)}\n {...props}\n />\n )\n }\n)\n\nInput.displayName = \"Input\"\n\nexport { Input }\n",
12+
"content": "import { cn } from \"@/lib/utils\";\nimport * as React from \"react\";\nimport { Platform, TextInput } from \"react-native\";\n\nconst Input = React.forwardRef<\n\tTextInput,\n\tReact.ComponentProps<typeof TextInput>\n>(({ className, ...props }, ref) => {\n\tconst [isFocused, setIsFocused] = React.useState(false);\n\n\treturn (\n\t\t<TextInput\n\t\t\tclassName={cn(\n\t\t\t\t\"h-12 w-full rounded-lg border bg-background px-3 text-foreground shadow-sm\",\n\t\t\t\t\"placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\tisFocused ? \"border-ring\" : \"border-input\",\n\t\t\t\tPlatform.OS === \"ios\"\n\t\t\t\t\t? \"ios:shadow-sm ios:shadow-foreground/10\"\n\t\t\t\t\t: \"android:elevation-1\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\ttextAlignVertical=\"center\"\n\t\t\tunderlineColorAndroid=\"transparent\"\n\t\t\tonFocus={() => setIsFocused(true)}\n\t\t\tonBlur={() => setIsFocused(false)}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\n\nInput.displayName = \"Input\";\n\nexport { Input };\n",
1313
"type": "registry:ui"
1414
}
1515
],

‎registry.json‎ renamed to ‎public/r/registry.json‎

File renamed without changes.

‎registry/CONTRIBUTING.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ registry/
6161
After creating your component files, you need to add the component to the registry:
6262

6363
1. Create a JSON file in `public/r/[component-name].json`
64-
2. Add the component entry to `registry.json`
64+
2. Add the component entry to `public/r/registry.json`
6565

6666
### Generate component files
6767

0 commit comments

Comments
 (0)