shadcn-ui-react 0.0.2 → 0.0.5

package/README.md

@@ -17,6 +17,12 @@ yarn add shadcn-ui-react
 
 ## Usage
 
+Import `style.css` in the App root:
+
+```tsx
+import 'shadcn-ui-react/dist/index.css';
+```
+
 Then use the components:
 
 ```tsx
@@ -27,13 +33,79 @@ export default function MyComponent() {
 }
 ```
 
-Use [lucide icons](https://lucide.dev/icons/):
+```tsx
+import { Card } from 'shadcn-ui-react'
 
+export default function MyComponent() {
+  return <Card/>
+}
+```
+
+## Example
 ```tsx
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import {
+  Button,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input
+} from 'shadcn-ui-react';
+import * as z from 'zod';
 
-import { Icons } from 'shadcn-ui-react'
+const formSchema = z.object({
+  email: z.string().email({ message: 'Enter a valid email address' }),
+  password: z
+    .string()
+    .min(8, { message: 'Password must be at least 8 characters' })
+});
 
-export default function MyComponent() {
-  return <Icons.Add />
+type UserFormValue = z.infer<typeof formSchema>;
+
+export default function UserAuthForm() {
+  const defaultValues = {
+    email: 'demo@domain.com'
+  };
+  const form = useForm<UserFormValue>({
+    resolver: zodResolver(formSchema),
+    defaultValues
+  });
+
+  const onSubmit = async (data: UserFormValue) => {};
+
+  return (
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="w-full space-y-2"
+        >
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <Input
+                    id="email"
+                    type="email"
+                    placeholder="Ingrese su email"
+                    {...field}
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <Button className="ml-auto w-full" type="submit">
+            Log In
+          </Button>
+        </form>
+      </Form>
+  );
 }
 ```