Add components (#147)

* Add components

* Format tabs component

.storybook/main.ts

@@ -11,8 +11,8 @@ const config: StorybookConfig = {
       titlePrefix: "Components",
     },
     {
-      directory: "../lib/primitives",
-      titlePrefix: "Primitives",
+      directory: "../src/examples",
+      titlePrefix: "Examples",
     },
   ],
   staticDirs: ["../public"],

.vscode/settings.json

@@ -9,7 +9,7 @@
   },
   "tailwindCSS.experimental.classRegex": [
     [
-      "cva\\(([^)]*)\\)",
+      "cva\\(\\s*\"[^\"]*\"\\s*,\\s*({(?:[^{}]|\\{(?:[^{}]|\\{[^{}]*\\})*\\})*})\\s*\\)",
       "[\"'`]([^\"'`]*).*?[\"'`]"
     ],
   ]

lib/components/Forms/Input/index.stories.tsx

@@ -16,7 +16,6 @@ const meta = {
   argTypes: {
     type: {
       control: { type: "radio" },
-      options: ["text", "email", "password", "number", "file"],
     },
     value: {
       control: { type: "text" },
@@ -32,3 +31,27 @@ export const Primary: Story = {
     placeholder: "Placeholder text here",
   },
 }
+
+export const File: Story = {
+  args: {
+    type: "file",
+    disabled: false,
+    placeholder: "Placeholder text here",
+  },
+}
+
+export const Password: Story = {
+  args: {
+    type: "password",
+    disabled: false,
+    placeholder: "Placeholder text here",
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    type: "text",
+    disabled: true,
+    placeholder: "Placeholder text here",
+  },
+}

lib/components/Layout/index.tsx

@@ -1 +1,2 @@
+export * from "./Grid"
 export * from "./Stack"

lib/components/Navigation/Tabs/index.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "."
+
+const meta = {
+  component: Tabs,
+  tags: ["autodocs"],
+  args: {
+    children: (
+      <>
+        <TabsList>
+          <TabsTrigger value="one">One</TabsTrigger>
+          <TabsTrigger value="two">Two</TabsTrigger>
+        </TabsList>
+        <TabsContent value="one">Content of section one</TabsContent>
+        <TabsContent value="two">Content of section two</TabsContent>
+      </>
+    ),
+  },
+} satisfies Meta<typeof Tabs>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    defaultValue: "one",
+  },
+}

lib/components/Navigation/Tabs/index.tsx

@@ -0,0 +1 @@
+export * from "@/shadcn/tabs"

lib/components/Navigation/index.tsx

@@ -0,0 +1 @@
+export * from "./Tabs"

lib/components/index.ts

@@ -3,4 +3,5 @@ export * from "./Blocks"
 export * from "./Forms"
 export * from "./Information"
 export * from "./Layout"
+export * from "./Navigation"
 export * from "./Overlays"

lib/lib/one-provider.tsx

@@ -4,7 +4,7 @@ export const FactorialOneProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
   useLayoutEffect(() => {
-    const classNames = "font-sans bg-background".split(" ")
+    const classNames = "font-sans text-foreground bg-background".split(" ")
 
     document.body.classList.add(...classNames)
 

lib/main.ts

@@ -1 +1,2 @@
 export * from "./components"
+export { FactorialOneProvider } from "./lib/one-provider"

lib/shadcn/tabs.tsx

@@ -0,0 +1,53 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsContent, TabsList, TabsTrigger }

package.json

@@ -40,6 +40,7 @@
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@tailwindcss/container-queries": "^0.1.1",
     "class-variance-authority": "^0.7.0",

src/examples/layout/application.tsx

@@ -19,6 +19,7 @@ import {
 } from "lucide-react"
 import React from "react"
 
+import { Card, CardContent, CardHeader, CardTitle, Grid } from "@/components"
 import { Button } from "@/shadcn/button"
 import { Popover, PopoverContent, PopoverTrigger } from "@/shadcn/popover"
 import { ScrollArea } from "@/shadcn/scrollarea"
@@ -149,14 +150,22 @@ const Layout: React.FC = () => {
               </span>
             </div>
           </div>
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 lg:grid-cols-3">
+          <Grid size={"lg"}>
             {[...Array(6)].map((_, i) => (
-              <div className="flex flex-col rounded-lg border p-4 font-medium transition-colors hover:cursor-pointer hover:bg-muted/50">
-                <Folder size="16" className="mb-1 text-secondary-foreground" />
-                Folder {++i}
-              </div>
+              <Card>
+                <CardHeader>
+                  <Folder
+                    size="16"
+                    className="mb-1 text-secondary-foreground"
+                  />
+                  <CardTitle>Folder {i + 1}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  Summary of the contents of the folder.
+                </CardContent>
+              </Card>
             ))}
-          </div>
+          </Grid>
         </div>
       </ScrollArea>
     </div>