ui-arreya-components 0.0.16 → 0.1.2

package/src/components/feature/login-form.tsx

@@ -1,97 +0,0 @@
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-
-export function LoginForm({
-  className,
-  ...props
-}: React.ComponentPropsWithoutRef<"div">) {
-  return (
-    <div className={cn("flex flex-col gap-6", className)} {...props}>
-      <Card>
-        <CardHeader className="text-center">
-          <CardTitle className="text-xl">Welcome back</CardTitle>
-          <CardDescription>
-            Login with your Apple or Google account
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form>
-            <div className="grid gap-6">
-              <div className="flex flex-col gap-4">
-                <Button variant="outline" className="w-full">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                    <path
-                      d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
-                      fill="currentColor"
-                    />
-                  </svg>
-                  Login with Apple
-                </Button>
-                <Button variant="outline" className="w-full">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                    <path
-                      d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                  Login with Google
-                </Button>
-              </div>
-              <div className="relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t after:border-border">
-                <span className="relative z-10 bg-background px-2 text-muted-foreground">
-                  Or continue with
-                </span>
-              </div>
-              <div className="grid gap-6">
-                <div className="grid gap-2">
-                  <Label htmlFor="email">Email</Label>
-                  <Input
-                    id="email"
-                    type="email"
-                    placeholder="m@example.com"
-                    required
-                  />
-                </div>
-                <div className="grid gap-2">
-                  <div className="flex items-center">
-                    <Label htmlFor="password">Password</Label>
-                    <a
-                      href="#"
-                      className="ml-auto text-sm underline-offset-4 hover:underline"
-                    >
-                      Forgot your password?
-                    </a>
-                  </div>
-                  <Input id="password" type="password" required />
-                </div>
-                <Button type="submit" className="w-full">
-                  Login
-                </Button>
-              </div>
-              <div className="text-center text-sm">
-                Don&apos;t have an account?{" "}
-                <a href="#" className="underline underline-offset-4">
-                  Sign up
-                </a>
-              </div>
-            </div>
-          </form>
-        </CardContent>
-      </Card>
-      <div className="text-balance text-center text-xs text-muted-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-primary  ">
-        By clicking continue, you agree to our <a href="#">Terms of Service</a>{" "}
-        and <a href="#">Privacy Policy</a>.
-      </div>
-    </div>
-  )
-}
-

package/src/components/feature/search-bar.stories.tsx

@@ -1,35 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react"
-import { SearchBar } from "@/components/feature/search-bar"
-
-const meta = {
-  title: "Feature/SearchBar",
-  component: SearchBar,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof SearchBar>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    options: [
-      "First",
-      "Second",
-      "Third"
-    ],
-    search: [
-      "How to use React hooks",
-      "Tailwind CSS tutorial",
-      "Next.js documentation",
-      "JavaScript best practices",
-      "TypeScript interfaces",
-      "CSS Grid layout examples",
-      "React performance optimization",
-      "State management in React",
-    ],
-    submit: (search, option) => { console.log(`pressed ${search} ${option}`) },
-  }
-}

package/src/components/feature/search-bar.tsx

@@ -1,141 +0,0 @@
-import { 
-  useEffect,
-  useState,
-  useRef,
-} from 'react'
-
-import { Search, ChevronDown } from 'lucide-react'
-
-type SearchBarProps = {
-  search: string[],
-  options?: string[]
-  submit: (search:string, option?: string) => void
-}
-
-export const SearchBar = ({ search, options, submit }: SearchBarProps): JSX.Element => {
-    const firstDropdownOption = (options && options.length > 0) ? options[0] : ""
-
-    const [isOptionsOpen, setIsOptionsOpen] = useState(false)
-    const [isSearchOpen, setIsSearchOpen] = useState(false)
-    const [searchValue, setSearchValue] = useState("") 
-    const [selectedOption, setSelectedOption] = useState(firstDropdownOption)
-
-    const optionsDropdownRef = useRef<HTMLDivElement>(null)
-    const searchDropdownRef = useRef<HTMLDivElement>(null)
-    const searchInputRef = useRef<HTMLInputElement>(null)
-
-    // TODO if no dropdownOptions make it a regular search bar
-    
-    // Filtered search options based on input
-    const filteredOptions = searchValue
-      ? search.filter((option) => option?.toLowerCase().includes(searchValue.toLowerCase()))
-      : []
-
-    const onSubmit = () => {
-      submit(searchValue, selectedOption)
-    }
-
-    // Close dropdowns when clicking outside
-    useEffect(() => {
-      function handleClickOutside(event: MouseEvent) {
-        if (optionsDropdownRef.current && !optionsDropdownRef.current.contains(event.target as Node)) {
-          setIsOptionsOpen(false)
-        }
-
-        if (
-          searchDropdownRef.current &&
-          !searchDropdownRef.current.contains(event.target as Node) &&
-          event.target !== searchInputRef.current
-
-        ) {
-          setIsSearchOpen(false)
-        }
-      }
-
-      document.addEventListener("mousedown", handleClickOutside)
-      return () => document.removeEventListener("mousedown", handleClickOutside)
-    }, [])
-
-    // Handle search input changes
-    const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = e.target.value
-      setSearchValue(value)
-      setIsSearchOpen(value.length > 0)
-    }
-
-    // Handle search option selection
-    const handleSelectSearchOption = (option: string) => {
-      setSearchValue(option)
-      setIsSearchOpen(false)
-      searchInputRef.current?.focus()
-    }
-
-    return (
-      <div className="flex max-w-xl rounded-lg border border-blue-100 bg-white">
-        <div className="relative flex-1" ref={searchDropdownRef}>
-          <input
-            ref={searchInputRef}
-            type="search"
-            placeholder="Search..."
-            value={searchValue}
-            onChange={handleSearchChange}
-            onFocus={() => searchValue && setIsSearchOpen(true)}
-            className="h-9 w-full border-0 bg-transparent px-3 py-2 outline-none"
-          />
-
-          {isSearchOpen && filteredOptions.length > 0 && (
-            <div className="absolute left-0 top-full z-10 mt-1 w-full rounded-md border border-gray-200 bg-white py-1 shadow-lg">
-              {filteredOptions.map((option) => (
-                <button
-                  key={option}
-                  className="flex w-full px-4 py-2 text-left text-sm hover:bg-gray-50"
-                  onClick={() => handleSelectSearchOption(option)}
-                >
-                  {option}
-                </button>
-              ))}
-            </div>
-          )}
-        </div>
-
-        <div className="flex items-center">
-          <div className="h-5 w-[1px] bg-slate-200" />
-          <div className="relative" ref={optionsDropdownRef}>
-            <button
-              onClick={() => setIsOptionsOpen(!isOptionsOpen)}
-              className="flex h-9 items-center gap-1 px-3 text-sm font-normal text-gray-700 hover:bg-gray-50"
-            >
-              {selectedOption}
-              <ChevronDown className="h-4 w-4 opacity-50" />
-            </button>
-
-            {isOptionsOpen && (
-              <div className="absolute right-0 top-full z-10 mt-1 w-48 rounded-md border border-gray-200 bg-white py-1 shadow-lg">
-                {options?.map((option) => (
-                  <button
-                    key={option}
-                    className="flex w-full px-4 py-2 text-left text-sm hover:bg-gray-50"
-                    onClick={() => {
-                      setSelectedOption(option)
-                      setIsOptionsOpen(false)
-                    }}
-                  >
-                    {option}
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
-          <div className="h-5 w-[1px] bg-slate-200" />
-          <button 
-            className="flex h-9 w-9 items-center justify-center text-gray-500 hover:bg-gray-50"
-            onClick={onSubmit}
-          >
-            <Search className="h-2 w-2" />
-          </button>
-        </div>
-      </div> 
-    )
-  }
-
-SearchBar.displayName = "SearchBar"

package/src/components/feature/wizard.stories.tsx

@@ -1,199 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { Wizard, WizardStepContent, WizardCompletion } from "./wizard"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { Card, CardContent } from "@/components/ui/card"
-
-const meta: Meta<typeof Wizard> = {
-  title: "Feature/Wizard",
-  component: Wizard,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-}
-
-export default meta
-type Story = StoryObj<typeof Wizard>
-
-export const Default: Story = {
-  render: () => (
-    <Card className="w-full max-w-2xl">
-      <CardContent className="p-6">
-        <Wizard
-          steps={[
-            { id: "step1", title: "Step 1", description: "Personal Info" },
-            { id: "step2", title: "Step 2", description: "Account Details" },
-            { id: "step3", title: "Step 3", description: "Confirmation" },
-          ]}
-        >
-          <WizardStepContent stepId="step1">
-            <div className="space-y-4 py-4">
-              <h3 className="text-lg font-medium">Personal Information</h3>
-              <p className="text-sm text-muted-foreground">Please provide your personal details.</p>
-              <div className="grid gap-4">
-                <div className="grid gap-2">
-                  <Label htmlFor="name">Full Name</Label>
-                  <Input id="name" placeholder="John Doe" />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="email">Email</Label>
-                  <Input id="email" type="email" placeholder="john@example.com" />
-                </div>
-              </div>
-            </div>
-          </WizardStepContent>
-
-          <WizardStepContent stepId="step2">
-            <div className="space-y-4 py-4">
-              <h3 className="text-lg font-medium">Account Details</h3>
-              <p className="text-sm text-muted-foreground">Set up your account preferences.</p>
-              <div className="grid gap-4">
-                <div className="grid gap-2">
-                  <Label htmlFor="username">Username</Label>
-                  <Input id="username" placeholder="johndoe" />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="password">Password</Label>
-                  <Input id="password" type="password" />
-                </div>
-              </div>
-            </div>
-          </WizardStepContent>
-
-          <WizardStepContent stepId="step3">
-            <div className="space-y-4 py-4">
-              <h3 className="text-lg font-medium">Confirmation</h3>
-              <p className="text-sm text-muted-foreground">Review your information before submitting.</p>
-              <div className="rounded-lg border p-4">
-                <div className="grid grid-cols-2 gap-4">
-                  <div className="text-sm font-medium">Name</div>
-                  <div className="text-sm">John Doe</div>
-                  <div className="text-sm font-medium">Email</div>
-                  <div className="text-sm">john@example.com</div>
-                  <div className="text-sm font-medium">Username</div>
-                  <div className="text-sm">johndoe</div>
-                </div>
-              </div>
-            </div>
-          </WizardStepContent>
-
-          <WizardCompletion>
-            <div className="flex flex-col items-center justify-center py-8 text-center">
-              <div className="rounded-full bg-primary/10 p-3 mb-4">
-                <svg
-                  className="h-8 w-8 text-primary"
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                >
-                  <path d="M20 6L9 17l-5-5" />
-                </svg>
-              </div>
-              <h3 className="text-2xl font-semibold mb-2">Setup Complete!</h3>
-              <p className="text-muted-foreground mb-6">Your account has been successfully created.</p>
-              <Button>Go to Dashboard</Button>
-            </div>
-          </WizardCompletion>
-        </Wizard>
-      </CardContent>
-    </Card>
-  ),
-}
-
-export const WithoutStepIndicator: Story = {
-  render: () => (
-    <Card className="w-full max-w-2xl">
-      <CardContent className="p-6">
-        <Wizard
-          steps={[
-            { id: "step1", title: "Step 1" },
-            { id: "step2", title: "Step 2" },
-            { id: "step3", title: "Step 3" },
-          ]}
-          showStepIndicator={false}
-        >
-          <WizardStepContent stepId="step1">
-            <div className="space-y-4 py-4">
-              <h3 className="text-lg font-medium">Step 1 Content</h3>
-              <p className="text-sm text-muted-foreground">This wizard doesn't show the step indicator.</p>
-            </div>
-          </WizardStepContent>
-
-          <WizardStepContent stepId="step2">
-            <div className="space-y-4 py-4">
-              <h3 className="text-lg font-medium">Step 2 Content</h3>
-              <p className="text-sm text-muted-foreground">Navigation is still available at the bottom.</p>
-            </div>
-          </WizardStepContent>
-
-          <WizardStepContent stepId="step3">
-            <div className="space-y-4 py-4">
-              <h3 className="text-lg font-medium">Step 3 Content</h3>
-              <p className="text-sm text-muted-foreground">This is the final step.</p>
-            </div>
-          </WizardStepContent>
-
-          <WizardCompletion>
-            <div className="py-4 text-center">
-              <h3 className="text-lg font-medium">All Done!</h3>
-            </div>
-          </WizardCompletion>
-        </Wizard>
-      </CardContent>
-    </Card>
-  ),
-}
-
-export const TopNavigation: Story = {
-  render: () => (
-    <Card className="w-full max-w-2xl">
-      <CardContent className="p-6">
-        <Wizard
-          steps={[
-            { id: "step1", title: "Step 1" },
-            { id: "step2", title: "Step 2" },
-            { id: "step3", title: "Step 3" },
-          ]}
-          navigationPosition="top"
-        >
-          <WizardStepContent stepId="step1">
-            <div className="space-y-4 py-4">
-              <h3 className="text-lg font-medium">Step 1 Content</h3>
-              <p className="text-sm text-muted-foreground">This wizard has navigation at the top.</p>
-            </div>
-          </WizardStepContent>
-
-          <WizardStepContent stepId="step2">
-            <div className="space-y-4 py-4">
-              <h3 className="text-lg font-medium">Step 2 Content</h3>
-              <p className="text-sm text-muted-foreground">Navigation buttons are above the content.</p>
-            </div>
-          </WizardStepContent>
-
-          <WizardStepContent stepId="step3">
-            <div className="space-y-4 py-4">
-              <h3 className="text-lg font-medium">Step 3 Content</h3>
-              <p className="text-sm text-muted-foreground">This is the final step.</p>
-            </div>
-          </WizardStepContent>
-
-          <WizardCompletion>
-            <div className="py-4 text-center">
-              <h3 className="text-lg font-medium">All Done!</h3>
-            </div>
-          </WizardCompletion>
-        </Wizard>
-      </CardContent>
-    </Card>
-  ),
-}
-
-