ui-arreya-components 0.0.9 → 0.0.11

package/.github/workflows/npm-publish.yml

@@ -0,0 +1,35 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: npm ci
+      - run: npm test
+      - run: npm prepublish
+
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - run: npm prepublish
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-arreya-components",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "type": "module",
   "types": "dist/index.d.ts",
   "exports": {
@@ -24,7 +24,7 @@
     "build-storybook": "concurrently 'npm run build-storybook:css' 'storybook build'",
     "build-storybook:css": "tailwindcss -m -i ./src/styles/tailwind.css -o ./src/index.css",
     "prepublish": "npm run build",
-    "publish": "npm publish"
+    "test": "echo 'setup unit testing'"
   },
   "peerDependencies": {
     "react": "^18.0.0",

package/scripts/build-index-ts.sh

@@ -0,0 +1,16 @@
+#!/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/src/components/feature/graph-card.stories.tsx

@@ -0,0 +1,138 @@
+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

@@ -0,0 +1,113 @@
+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
+  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 ? (
+            <ChartContainer config={chartConfig}>{chart}</ChartContainer>
+          ) : (
+            chart
+          )}
+        </div>
+      </CardContent>
+      {footerContent && <CardFooter>{footerContent}</CardFooter>}
+    </Card>
+  )
+}

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

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react"
 import { Header } from "./header"
 
 const meta: Meta<typeof Header> = {
-  title: "Components/Header",
+  title: "Feature/Header",
   component: Header,
   parameters: {
     layout: "fullscreen",

package/src/components/feature/header.tsx

@@ -9,7 +9,7 @@ import {
 } from "@/components/ui/breadcrumb"
 import { ChevronRight, Home } from "lucide-react"
 
-export type BreadcrumbItem = {
+type BreadcrumbItem = {
   label: string
   href?: string
   isCurrentPage?: boolean
@@ -26,7 +26,7 @@ interface HeaderProps {
 export function Header({ title, breadcrumbItems = [], showHomeLink = true, className = "", children }: HeaderProps) {
   return (
     <header className={`border-b pb-4 ${className}`}>
-      <div className="container mx-auto px-4">
+      <div className="container mx-auto p-4">
         {(breadcrumbItems.length > 0 || showHomeLink) && (
           <Breadcrumb className="mb-2">
             <BreadcrumbList>

package/src/components/index.ts

@@ -1 +1,2 @@
 export * from './ui/accordion'
+export * from './features/GraphCard'

package/src/components/ui/input.tsx

@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
       <input
         type={type}
         className={cn(
-          "flex h-9 w-full rounded-md border focus:border-[--primary] border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className
         )}
         ref={ref}

package/src/components/ui/sheet.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import * as SheetPrimitive from "@radix-ui/react-dialog"
 import { cva, type VariantProps } from "class-variance-authority"

package/src/components/ui/sonner.tsx

@@ -3,7 +3,7 @@ import { Toaster as Sonner } from "sonner"
 
 type ToasterProps = React.ComponentProps<typeof Sonner>
 
-const Toaster = ({ ...props }: ToasterProps) => {
+const SonnerToaster = ({ ...props }: ToasterProps) => {
   const { theme = "system" } = useTheme()
 
   return (
@@ -26,4 +26,4 @@ const Toaster = ({ ...props }: ToasterProps) => {
   )
 }
 
-export { Toaster }
+export { SonnerToaster }

package/src/index.css

@@ -1009,10 +1009,18 @@ body{
   height: 2.25rem;
 }
 
+.h-\[180px\]{
+  height: 180px;
+}
+
 .h-\[1px\]{
   height: 1px;
 }
 
+.h-\[240px\]{
+  height: 240px;
+}
+
 .h-\[var\(--radix-navigation-menu-viewport-height\)\]{
   height: var(--radix-navigation-menu-viewport-height);
 }
@@ -1538,6 +1546,10 @@ body{
   border-width: 2px;
 }
 
+.border-4{
+  border-width: 4px;
+}
+
 .border-\[1\.5px\]{
   border-width: 1.5px;
 }
@@ -1768,6 +1780,10 @@ body{
   padding-bottom: 0px;
 }
 
+.pb-2{
+  padding-bottom: 0.5rem;
+}
+
 .pb-3{
   padding-bottom: 0.75rem;
 }
@@ -1924,6 +1940,11 @@ body{
   color: hsl(var(--destructive-foreground));
 }
 
+.text-emerald-500{
+  --tw-text-opacity: 1;
+  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
+}
+
 .text-foreground{
   color: var(--foreground);
 }
@@ -1944,6 +1965,11 @@ body{
   color: hsl(var(--primary-foreground));
 }
 
+.text-red-500{
+  --tw-text-opacity: 1;
+  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
+}
+
 .text-secondary-foreground{
   color: var(--secondary-foreground);
 }
@@ -2377,10 +2403,6 @@ h1, h2, h3, h4 {
   background-color: hsl(var(--sidebar-border));
 }
 
-.focus\:border-\[--primary\]:focus{
-  border-color: var(--primary);
-}
-
 .focus\:bg-accent:focus{
   background-color: var(--accent);
 }
@@ -2455,10 +2477,6 @@ h1, h2, h3, h4 {
   --tw-ring-offset-color: var(--background);
 }
 
-.active\:border-\[--primary\]:active{
-  border-color: var(--primary);
-}
-
 .active\:bg-sidebar-accent:active{
   background-color: hsl(var(--sidebar-accent));
 }

package/src/index.ts

@@ -1,51 +1,50 @@
-export { Button } from './components/ui/button';
-export { 
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogTrigger,
-  DialogClose,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-} from './components/ui/dialog';
-export {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupAction,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInput,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuAction,
-  SidebarMenuBadge,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSkeleton,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-  SidebarProvider,
-  SidebarRail,
-  SidebarSeparator,
-  SidebarTrigger,
-  useSidebar,
-} from './components/ui/sidebar';
-export {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-} from './components/ui/breadcrumb';
-export {
-  Header
-} from './components/feature/header'
+export * from "./components/ui/accordion"
+export * from "./components/ui/alert-dialog"
+export * from "./components/ui/alert"
+export * from "./components/ui/aspect-ratio"
+export * from "./components/ui/avatar"
+export * from "./components/ui/badge"
+export * from "./components/ui/breadcrumb"
+export * from "./components/ui/button"
+export * from "./components/ui/card"
+export * from "./components/ui/carousel"
+export * from "./components/ui/chart"
+export * from "./components/ui/checkbox"
+export * from "./components/ui/collapsible"
+export * from "./components/ui/context-menu"
+export * from "./components/ui/dialog"
+export * from "./components/ui/drawer"
+export * from "./components/ui/dropdown-menu"
+export * from "./components/ui/form"
+export * from "./components/ui/hover-card"
+export * from "./components/ui/index"
+export * from "./components/ui/input-otp"
+export * from "./components/ui/input"
+export * from "./components/ui/label"
+export * from "./components/ui/menubar"
+export * from "./components/ui/navigation-menu"
+export * from "./components/ui/pagination"
+export * from "./components/ui/popover"
+export * from "./components/ui/progress"
+export * from "./components/ui/radio-group"
+export * from "./components/ui/resizable"
+export * from "./components/ui/scroll-area"
+export * from "./components/ui/select"
+export * from "./components/ui/separator"
+export * from "./components/ui/sheet"
+export * from "./components/ui/sidebar"
+export * from "./components/ui/skeleton"
+export * from "./components/ui/slider"
+export * from "./components/ui/sonner"
+export * from "./components/ui/switch"
+export * from "./components/ui/table"
+export * from "./components/ui/tabs"
+export * from "./components/ui/textarea"
+export * from "./components/ui/toast"
+export * from "./components/ui/toaster"
+export * from "./components/ui/toggle-group"
+export * from "./components/ui/toggle"
+export * from "./components/ui/tooltip"
+export * from "./components/feature/graph-card"
+export * from "./components/feature/header"
+export * from "./components/feature/login-form"

package/tailwind.config.js

@@ -92,5 +92,3 @@ const config: Config = {
 }
 
 export default config
-
-