ui-arreya-components 0.0.16 → 0.1.2

package/eslint.config.js

@@ -1,28 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-
-export default tseslint.config(
-  { ignores: ['dist'] },
-  {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-    plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-    },
-    rules: {
-      ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
-      ],
-    },
-  },
-)

package/postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

package/scripts/build-index-ts.sh

@@ -1,16 +0,0 @@
-#!/bin/bash
-
-# Starting fresh
-rm src/index.ts
-
-# Add Components
-for import in `ls src/components/ui/ | grep -v '.stories.' | cut -f1 -d\.`;
-do 
-  echo 'export * from "./components/ui/'$import'"' >> src/index.ts 
-done
-
-# Add Features
-for import in `ls src/components/feature/ | grep -v '.stories.' | cut -f1 -d\.`;
-do 
-  echo 'export * from "./components/feature/'${import}'"' >> src/index.ts 
-done

package/scripts/template.sh

@@ -1,57 +0,0 @@
-#!/bin/bash
-
-# Check if a parameter is passed
-if [ "$#" -ne 2 ]; then
-  echo "Usage: $0 <feature|component> <name>"
-  exit 1
-fi 
-
-# Determine which template to output based on the parameter
-TEMPLATE_TYPE=$1
-COMPONENT_OR_FEATURE_NAME=$2
-
-case $TEMPLATE_TYPE in
-  feature)
-    echo "Creating feature template..."
-    mkdir -p src/components/feature/${COMPONENT_OR_FEATURE_NAME}
-
-    cat <<EOF > src/components/feature/${COMPONENT_OR_FEATURE_NAME}/index.ts 
-export * from './${COMPONENT_OR_FEATURE_NAME}'
-EOF
-
-    cat <<EOF >> src/components/feature/index.ts 
-export * from './${COMPONENT_OR_FEATURE_NAME}'
-EOF
-
-    cat <<EOF >> src/components/index.ts 
-export * from './feature/${COMPONENT_OR_FEATURE_NAME}'
-EOF
-
-    touch src/components/feature/${COMPONENT_OR_FEATURE_NAME}/{${COMPONENT_OR_FEATURE_NAME}.stories.tsx,${COMPONENT_OR_FEATURE_NAME}.tsx}
-    ;;
-  component)
-    echo "Creating component template"
-    mkdir -p src/components/ui/${COMPONENT_OR_FEATURE_NAME}
-
-    cat <<EOF > src/components/ui/${COMPONENT_OR_FEATURE_NAME}/index.ts 
-export * from './${COMPONENT_OR_FEATURE_NAME}'
-EOF
-
-    cat <<EOF >> src/components/ui/index.ts 
-export * from './${COMPONENT_OR_FEATURE_NAME}'
-EOF
-
-    cat <<EOF >> src/components/index.ts 
-export * from './ui/${COMPONENT_OR_FEATURE_NAME}'
-EOF
-
-   touch src/components/ui/${COMPONENT_OR_FEATURE_NAME}/{${COMPONENT_OR_FEATURE_NAME}.stories.tsx,${COMPONENT_OR_FEATURE_NAME}.tsx}
-    ;;
-  *)
-    echo "Invalid option. Usage: $0 <feature|component> <name>"
-    exit 1
-
-    ;;
-esac
-
-echo "Template created successfully!"

package/src/components/feature/graph-card.stories.tsx

@@ -1,138 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { GraphCard } from "./graph-card"
-import { Area, AreaChart, ResponsiveContainer } from "recharts"
-
-const meta: Meta<typeof GraphCard> = {
-  title: "Feature/GraphCard",
-  component: GraphCard,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    title: {
-      control: "text",
-      description: "The title of the graph card",
-    },
-    description: {
-      control: "text",
-      description: "Optional description text below the title",
-    },
-    value: {
-      control: "text",
-      description: "The primary value to display (e.g., total, average)",
-    },
-    change: {
-      control: "number",
-      description: "Percentage change to display",
-    },
-    changeType: {
-      control: { type: "select" },
-      options: ["increase", "decrease", "neutral"],
-      description: "Type of change (affects color and icon)",
-    },
-    changeLabel: {
-      control: "text",
-      description: "Label to display after the change value",
-    },
-    isLoading: {
-      control: "boolean",
-      description: "Whether to show a loading state",
-    },
-  },
-}
-
-export default meta
-type Story = StoryObj<typeof GraphCard>
-
-// Simple example with minimal data
-export const Simple: Story = {
-  args: {
-    title: "Monthly Sales",
-    description: "Total sales for the current month",
-    value: "$12,345",
-    chart: (
-      <ResponsiveContainer width="100%" height="100%">
-        <AreaChart
-          data={[
-            { month: "Jan", value: 1000 },
-            { month: "Feb", value: 2000 },
-            { month: "Mar", value: 1500 },
-            { month: "Apr", value: 3000 },
-            { month: "May", value: 2500 },
-            { month: "Jun", value: 4000 },
-          ]}
-        >
-          <Area type="monotone" dataKey="value" stroke="hsl(var(--primary))" fill="hsl(var(--primary) / 0.2)" />
-        </AreaChart>
-      </ResponsiveContainer>
-    ),
-  },
-}
-
-// Example with positive change
-export const PositiveChange: Story = {
-  args: {
-    title: "Website Traffic",
-    description: "Unique visitors per day",
-    value: "12,456",
-    change: 23.5,
-    changeType: "increase",
-    changeLabel: "vs last week",
-    chart: (
-      <ResponsiveContainer width="100%" height="100%">
-        <AreaChart
-          data={[
-            { day: "Mon", value: 1000 },
-            { day: "Tue", value: 2000 },
-            { day: "Wed", value: 3000 },
-            { day: "Thu", value: 2500 },
-            { day: "Fri", value: 4000 },
-            { day: "Sat", value: 3500 },
-            { day: "Sun", value: 4500 },
-          ]}
-        >
-          <Area type="monotone" dataKey="value" stroke="hsl(var(--primary))" fill="hsl(var(--primary) / 0.2)" />
-        </AreaChart>
-      </ResponsiveContainer>
-    ),
-  },
-}
-
-// Example with negative change
-export const NegativeChange: Story = {
-  args: {
-    title: "Conversion Rate",
-    description: "Percentage of visitors who make a purchase",
-    value: "3.2%",
-    change: 5.7,
-    changeType: "decrease",
-    changeLabel: "vs last month",
-    chart: (
-      <ResponsiveContainer width="100%" height="100%">
-        <AreaChart
-          data={[
-            { week: "W1", value: 4.5 },
-            { week: "W2", value: 4.2 },
-            { week: "W3", value: 3.8 },
-            { week: "W4", value: 3.5 },
-            { week: "W5", value: 3.2 },
-          ]}
-        >
-          <Area type="monotone" dataKey="value" stroke="hsl(var(--destructive))" fill="hsl(var(--destructive) / 0.2)" />
-        </AreaChart>
-      </ResponsiveContainer>
-    ),
-  },
-}
-
-// Loading state
-export const Loading: Story = {
-  args: {
-    title: "Revenue",
-    description: "Total revenue this quarter",
-    value: "$143,245",
-    isLoading: true,
-    chart: <div />, // This won't be shown in loading state
-  },
-}

package/src/components/feature/graph-card.tsx

@@ -1,113 +0,0 @@
-import type React from "react"
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
-import { ChartContainer } from "@/components/ui/chart"
-import { cn } from "@/lib/utils"
-import { ArrowDownIcon, ArrowUpIcon, MoreHorizontal } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
-
-export interface GraphCardProps {
-  title: string
-  description?: string
-  chart?: React.ReactNode | any
-  value?: string | number
-  previousValue?: string | number
-  change?: number
-  changeType?: "increase" | "decrease" | "neutral"
-  changeLabel?: string
-  className?: string
-  footerContent?: React.ReactNode
-  menuItems?: Array<{ label: string; onClick: () => void }>
-  chartConfig?: Record<string, any>
-  isLoading?: boolean
-}
-
-export function GraphCard({
-  title,
-  description,
-  chart,
-  value,
-  previousValue,
-  change,
-  changeType,
-  changeLabel,
-  className,
-  footerContent,
-  menuItems,
-  chartConfig,
-  isLoading = false,
-}: GraphCardProps) {
-  const renderChangeIndicator = () => {
-    if (changeType === "increase") {
-      return <ArrowUpIcon className="h-4 w-4 text-emerald-500" />
-    } else if (changeType === "decrease") {
-      return <ArrowDownIcon className="h-4 w-4 text-red-500" />
-    }
-    return null
-  }
-
-  const getChangeTextColor = () => {
-    if (changeType === "increase") return "text-emerald-500"
-    if (changeType === "decrease") return "text-red-500"
-    return "text-muted-foreground"
-  }
-
-  return (
-    <Card className={cn("overflow-hidden", className)}>
-      <CardHeader className="flex flex-row items-center justify-between pb-2">
-        <div>
-          <CardTitle className="text-base font-medium">{title}</CardTitle>
-          {description && <CardDescription>{description}</CardDescription>}
-        </div>
-        {menuItems && menuItems.length > 0 && (
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="ghost" className="h-8 w-8 p-0">
-                <span className="sr-only">Open menu</span>
-                <MoreHorizontal className="h-4 w-4" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              {menuItems.map((item, index) => (
-                <DropdownMenuItem key={index} onClick={item.onClick}>
-                  {item.label}
-                </DropdownMenuItem>
-              ))}
-            </DropdownMenuContent>
-          </DropdownMenu>
-        )}
-      </CardHeader>
-      <CardContent className="pb-2">
-        {value && (
-          <div className="flex items-center justify-between">
-            <div className="space-y-1">
-              <p className="text-2xl font-bold">{value}</p>
-              {(change !== undefined || previousValue) && (
-                <div className="flex items-center text-xs">
-                  {renderChangeIndicator()}
-                  <span className={cn("ml-1", getChangeTextColor())}>
-                    {change !== undefined && `${Math.abs(change)}%`}
-                    {previousValue && !change && `from ${previousValue}`}
-                  </span>
-                  {changeLabel && <span className="ml-1 text-muted-foreground">{changeLabel}</span>}
-                </div>
-              )}
-            </div>
-          </div>
-        )}
-        <div className={cn("mt-4", value ? "h-[180px]" : "h-[240px]")}>
-          {isLoading ? (
-            <div className="flex h-full items-center justify-center">
-              <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent"></div>
-            </div>
-          ) : (chartConfig && chart) ? (
-            <ChartContainer config={chartConfig}>{ chart }</ChartContainer>
-          ) : (
-            chart
-          )}
-        </div>
-      </CardContent>
-      {footerContent && <CardFooter>{footerContent}</CardFooter>}
-    </Card>
-  )
-}

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

@@ -1,129 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { Header } from "./header"
-
-const meta: Meta<typeof Header> = {
-  title: "Feature/Header",
-  component: Header,
-  parameters: {
-    layout: "fullscreen",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    title: {
-      control: "text",
-      description: "The main title displayed in the header",
-    },
-    breadcrumbItems: {
-      control: "object",
-      description: "Array of breadcrumb items to display in the navigation",
-    },
-    showHomeLink: {
-      control: "boolean",
-      description: "Whether to show the home link at the start of the breadcrumb",
-    },
-    className: {
-      control: "text",
-      description: "Additional CSS classes to apply to the header",
-    },
-    children: {
-      control: { type: undefined },
-      description: "Additional content to render within the header",
-    },
-  },
-}
-
-export default meta
-type Story = StoryObj<typeof Header>
-
-// Basic header with just a title
-export const Basic: Story = {
-  args: {
-    title: "Dashboard",
-    showHomeLink: true,
-    breadcrumbItems: [],
-  },
-}
-
-// Header with a single breadcrumb (current page)
-export const SingleBreadcrumb: Story = {
-  args: {
-    title: "Products",
-    showHomeLink: true,
-    breadcrumbItems: [
-      { label: "Products", isCurrentPage: true },
-    ],
-  },
-}
-
-// Header with multiple breadcrumb levels
-export const MultipleBreadcrumbs: Story = {
-  args: {
-    title: "Edit Product",
-    showHomeLink: true,
-    breadcrumbItems: [
-      { label: "Products", href: "/products" },
-      { label: "Electronics", href: "/products/electronics" },
-      { label: "Edit Product", isCurrentPage: true },
-    ],
-  },
-}
-
-// Header without home link
-export const NoHomeLink: Story = {
-  args: {
-    title: "Settings",
-    showHomeLink: false,
-    breadcrumbItems: [
-      { label: "Account", href: "/account" },
-      { label: "Settings", isCurrentPage: true },
-    ],
-  },
-}
-
-// Header with custom content
-export const WithCustomContent: Story = {
-  args: {
-    title: "Dashboard",
-    showHomeLink: true,
-    breadcrumbItems: [
-      { label: "Dashboard", isCurrentPage: true },
-    ],
-  },
-  render: (args) => (
-    <Header {...args}>
-      <div className="flex justify-between items-center mt-4">
-        <p className="text-muted-foreground">Last updated: Yesterday</p>
-        <button className="bg-primary text-primary-foreground px-4 py-2 rounded-md text-sm">
-          Refresh Data
-        </button>
-      </div>
-    </Header>
-  ),
-}
-
-// Header with a very long breadcrumb path
-export const LongBreadcrumbPath: Story = {
-  args: {
-    title: "Edit User Profile",
-    showHomeLink: true,
-    breadcrumbItems: [
-      { label: "Administration", href: "/admin" },
-      { label: "User Management", href: "/admin/users" },
-      { label: "Enterprise Accounts", href: "/admin/users/enterprise" },
-      { label: "ACME Corporation", href: "/admin/users/enterprise/acme" },
-      { label: "Department Leads", href: "/admin/users/enterprise/acme/leads" },
-      { label: "John Doe", isCurrentPage: true },
-    ],
-  },
-}
-
-// Header with minimal styling
-export const Minimalist: Story = {
-  args: {
-    title: "Analytics",
-    showHomeLink: false,
-    breadcrumbItems: [],
-    className: "border-0 pb-0",
-  },
-}
-

package/src/components/feature/header.tsx

@@ -1,78 +0,0 @@
-import React from "react"
-import {
-  Breadcrumb,
-  BreadcrumbItem as BreadcrumbItemComponent,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb"
-import { ChevronRight, Home } from "lucide-react"
-
-type BreadcrumbItem = {
-  label: string
-  href?: string
-  isCurrentPage?: boolean
-}
-
-interface HeaderProps {
-  title?: string
-  breadcrumbItems?: BreadcrumbItem[]
-  showHomeLink?: boolean
-  className?: string
-  children?: React.ReactNode
-}
-
-export function Header({ title, breadcrumbItems = [], showHomeLink = true, className = "", children }: HeaderProps) {
-  return (
-    <header className={`border-b pb-4 ${className}`}>
-      <div className="container mx-auto p-4">
-        {(breadcrumbItems.length > 0 || showHomeLink) && (
-          <Breadcrumb className="mb-2">
-            <BreadcrumbList>
-              {showHomeLink && (
-                <>
-                  <BreadcrumbItemComponent>
-                    <BreadcrumbLink href="/" className="flex items-center">
-                      <Home className="h-3.5 w-3.5 mr-1" />
-                      Home
-                    </BreadcrumbLink>
-                  </BreadcrumbItemComponent>
-                  {breadcrumbItems.length > 0 && (
-                    <BreadcrumbSeparator>
-                      <ChevronRight className="h-3.5 w-3.5" />
-                    </BreadcrumbSeparator>
-                  )}
-                </>
-              )}
-
-              {breadcrumbItems.map((item, index) => (
-                <React.Fragment key={index}>
-                  <BreadcrumbItemComponent>
-                    {item.isCurrentPage ? (
-                      <BreadcrumbPage>{item.label}</BreadcrumbPage>
-                    ) : (
-                      <BreadcrumbLink href={item.href || "#"}>{item.label}</BreadcrumbLink>
-                    )}
-                  </BreadcrumbItemComponent>
-                  {index < breadcrumbItems.length - 1 && (
-                    <BreadcrumbSeparator>
-                      <ChevronRight className="h-3.5 w-3.5" />
-                    </BreadcrumbSeparator>
-                  )}
-                </React.Fragment>
-              ))}
-            </BreadcrumbList>
-          </Breadcrumb>
-        )}
-
-        <div className="flex items-center justify-between">
-          {title && <h1 className="text-2xl font-bold tracking-tight">{title}</h1>}
-          {children && <div className="flex items-center">{children}</div>}
-        </div>
-      </div>
-    </header>
-  )
-}
-
-

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

@@ -1,35 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react"
-
-import { GalleryVerticalEnd } from 'lucide-react'
-
-import { 
-  LoginForm
-} from "./login-form"
-
-const meta = {
-  title: "Feature/LoginForm",
-  component: LoginForm,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof LoginForm>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  render: () => (
-    <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
-      <div className="flex w-full max-w-sm flex-col gap-6">
-        <a href="#" className="flex items-center gap-2 self-center font-medium">
-          <div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary text-primary-foreground">
-            <GalleryVerticalEnd className="size-4" />
-          </div>
-          Acme Inc.
-        </a>
-        <LoginForm />
-      </div>
-    </div>)
-}
-