ui-arreya-components 0.0.13 → 0.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-arreya-components",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "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",
-    "test": "echo 'setup unit testing'"
+    "publish": "npm publish"
   },
   "peerDependencies": {
     "react": "^18.0.0",

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: "Feature/Header",
+  title: "Components/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"
 
-type BreadcrumbItem = {
+export 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 p-4">
+      <div className="container mx-auto px-4">
         {(breadcrumbItems.length > 0 || showHomeLink) && (
           <Breadcrumb className="mb-2">
             <BreadcrumbList>
@@ -66,9 +66,10 @@ export function Header({ title, breadcrumbItems = [], showHomeLink = true, class
           </Breadcrumb>
         )}
 
-        {title && <h1 className="text-2xl font-bold tracking-tight">{title}</h1>}
-
-        {children}
+        <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/index.ts

@@ -0,0 +1 @@
+export * from './ui/accordion'

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 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",
+          "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",
           className
         )}
         ref={ref}

package/src/components/ui/sheet.tsx

@@ -1,3 +1,5 @@
+"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 SonnerToaster = ({ ...props }: ToasterProps) => {
+const Toaster = ({ ...props }: ToasterProps) => {
   const { theme = "system" } = useTheme()
 
   return (
@@ -26,4 +26,4 @@ const SonnerToaster = ({ ...props }: ToasterProps) => {
   )
 }
 
-export { SonnerToaster }
+export { Toaster }

package/src/index.css

@@ -1009,18 +1009,10 @@ 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);
 }
@@ -1546,10 +1538,6 @@ body{
   border-width: 2px;
 }
 
-.border-4{
-  border-width: 4px;
-}
-
 .border-\[1\.5px\]{
   border-width: 1.5px;
 }
@@ -1780,10 +1768,6 @@ body{
   padding-bottom: 0px;
 }
 
-.pb-2{
-  padding-bottom: 0.5rem;
-}
-
 .pb-3{
   padding-bottom: 0.75rem;
 }
@@ -1940,11 +1924,6 @@ 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);
 }
@@ -1965,11 +1944,6 @@ 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);
 }
@@ -2403,6 +2377,10 @@ 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);
 }
@@ -2477,6 +2455,10 @@ 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,50 +1,51 @@
-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"
+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'

package/tailwind.config.js

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

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

@@ -1,35 +0,0 @@
-# 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/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/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>
-  )
-}