shadcn-ui-react 0.2.5 → 0.2.8

package/README.md

@@ -17,47 +17,58 @@ yarn add shadcn-ui-react
 Import `style.css` in the App root:
 
 ```tsx
-import 'shadcn-ui-react/dist/style.css';
+import "shadcn-ui-react/dist/style.css";
 ```
 
 Then use the components:
 
 ```tsx
-import { Button } from 'shadcn-ui-react'
+import { Button } from "shadcn-ui-react";
 
 export default function MyComponent() {
-  return (<Button>Hello world</Button>)
+  return <Button>Hello world</Button>;
 }
 ```
 
 ```tsx
-import { Card } from 'shadcn-ui-react'
+import { Card } from "shadcn-ui-react";
 
 export default function MyComponent() {
-  return (<Card><h1>Hello World</h1></Card>)
+  return (
+    <Card>
+      <h1>Hello World</h1>
+    </Card>
+  );
 }
 ```
 
 ```tsx
-import React, { useState } from 'react';
-import { SearchInput } from './components/search-input';
+import React, { useState } from "react";
+import { SearchInput } from "./components/search-input";
 
-export default function MyComponent()  {
-  const [searchTerm, setSearchTerm] = useState('');
+export default function MyComponent() {
+  const [searchTerm, setSearchTerm] = useState("");
 
-  const handleSearch = (term) => {
+  const handleSearch = (term?: string) => {
     setSearchTerm(term);
-    console.log('Search term:', term);
+    console.log("Search term:", term);
   };
 
-  return (<SearchInput placeholder="Search" value={searchTerm} onSearch={handleSearch} />);
-};
+  return (
+    <SearchInput
+      placeholder="Search"
+      value={searchTerm}
+      onSearch={handleSearch}
+    />
+  );
+}
 ```
 
 ## Example of a login form
+
 ```tsx
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useForm } from 'react-hook-form';
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
 import {
   Button,
   Form,
@@ -66,59 +77,44 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-  Input
-} from 'shadcn-ui-react';
-import * as z from 'zod';
+  Input,
+} from "shadcn-ui-react";
+import * as z from "zod";
 
 const formSchema = z.object({
-  email: z.string().email({ message: 'Enter a valid email address' }),
+  email: z.string().email({ message: "Enter a valid email address" }),
   password: z
     .string()
-    .min(8, { message: 'Password must be at least 8 characters' })
+    .min(8, { message: "Password must be at least 8 characters" }),
 });
 
 type UserFormValue = z.infer<typeof formSchema>;
 
 export default function UserAuthForm() {
   const defaultValues = {
-    email: 'demo@domain.com'
+    email: "demo@domain.com",
   };
   const form = useForm<UserFormValue>({
     resolver: zodResolver(formSchema),
-    defaultValues
+    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="demo@domain.com"
-                    {...field}
-                  />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <Button className="ml-auto w-full" type="submit">
-            Log In
-          </Button>
-        </form>
-      </Form>
+    <Form methods={form} onSubmit={onSubmit}>
+      <FormField
+        control={form.control}
+        name="email"
+        placeholder="Enter your email"
+        onChange={(e) => {
+          form.setValue("firstname", e.target.value);
+        }}
+      />
+      <Button className="ml-auto w-full" type="submit">
+        Log In
+      </Button>
+    </Form>
   );
 }
 ```
@@ -126,9 +122,9 @@ export default function UserAuthForm() {
 ## Example of a data table
 
 ```tsx
-import React, { useState } from 'react';
-import { DataTable } from 'shadcn-ui-react';
-import { ColumnDef } from '@tanstack/react-table';
+import React, { useState } from "react";
+import { DataTable } from "shadcn-ui-react";
+import { ColumnDef } from "@tanstack/react-table";
 
 type Data = {
   id: number;
@@ -138,23 +134,23 @@ type Data = {
 
 const columns: ColumnDef<Data, any>[] = [
   {
-    accessorKey: 'id',
-    header: 'ID',
+    accessorKey: "id",
+    header: "ID",
   },
   {
-    accessorKey: 'name',
-    header: 'Name',
+    accessorKey: "name",
+    header: "Name",
   },
   {
-    accessorKey: 'age',
-    header: 'Age',
+    accessorKey: "age",
+    header: "Age",
   },
 ];
 
 const data: Data[] = [
-  { id: 1, name: 'John Doe', age: 28 },
-  { id: 2, name: 'Jane Smith', age: 34 },
-  { id: 3, name: 'Sam Johnson', age: 45 },
+  { id: 1, name: "John Doe", age: 28 },
+  { id: 2, name: "Jane Smith", age: 34 },
+  { id: 3, name: "Sam Johnson", age: 45 },
 ];
 
 const Example = () => {
@@ -165,7 +161,7 @@ const Example = () => {
   };
 
   const handleRowClick = (row: Data) => {
-    console.log('Row clicked:', row);
+    console.log("Row clicked:", row);
   };
 
   return (
@@ -184,4 +180,4 @@ const Example = () => {
 };
 
 export default Example;
-```
+```