@oneplatformdev/ui 0.1.0-5 → 0.1.0-8

package/src_old/AlertDialog/AlertDialog.types.tsx

@@ -0,0 +1,66 @@
+import { ComponentPropsWithoutRef, ReactNode, MouseEvent } from 'react';
+import {
+  AlertDialogTrigger,
+  AlertDialogTitle,
+  AlertDialogRoot,
+  AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+  AlertDialogContent,
+} from './AlertDialogRoot';
+
+export type AlertDialogRootProps = ComponentPropsWithoutRef<typeof AlertDialogRoot>
+export type AlertDialogTriggerProps = ComponentPropsWithoutRef<typeof AlertDialogTrigger>
+export type AlertDialogContentProps = ComponentPropsWithoutRef<typeof AlertDialogContent>
+
+export type AlertDialogHeaderProps = ComponentPropsWithoutRef<typeof AlertDialogHeader>
+export type AlertDialogTitleProps = ComponentPropsWithoutRef<typeof AlertDialogTitle>
+export type AlertDialogDescriptionProps = ComponentPropsWithoutRef<typeof AlertDialogDescription>
+
+export type AlertDialogFooterProps = ComponentPropsWithoutRef<typeof AlertDialogFooter>
+export type AlertDialogCancelProps = ComponentPropsWithoutRef<typeof AlertDialogCancel>
+export type AlertDialogActionProps = ComponentPropsWithoutRef<typeof AlertDialogAction>
+
+export interface AlertDialogProps extends Partial<AlertDialogRootProps> {
+  /** Alert Dialog Type. */
+  variant?: 'confirm' | 'alert' | 'destructive';
+  /** CancelButton label. */
+  cancelLabel?: ReactNode;
+  /** ActionButton label. */
+  actionLabel?: ReactNode;
+  /** CancelButton onClick event. */
+  onCancel?: (event: MouseEvent<HTMLButtonElement>) => void;
+  /** ActionButton onClick event. */
+  onConfirm?: (event: MouseEvent<HTMLButtonElement>) => void;
+  /** The trigger to open alert dialog. */
+  trigger?: ReactNode;
+  /** Alert Dialog Header. */
+  header?: ReactNode;
+  /** Alert Dialog Header Title. */
+  title?: ReactNode;
+  /** Alert Dialog Header Description. */
+  description?: ReactNode;
+  /** Alert Dialog Footer. */
+  footer?: ReactNode;
+  /** Alert Dialog Slots props. */
+  slotProps?: {
+    /** Alert Dialog Slot props for AlertDialogTrigger. */
+    trigger?: AlertDialogTriggerProps;
+    /** Alert Dialog Slot props for AlertDialogContentProps. */
+    content?: AlertDialogContentProps;
+    /** Alert Dialog Slot props for AlertDialogTrigger. */
+    header?: AlertDialogHeaderProps;
+    /** Alert Dialog Slot props for AlertDialogFooter. */
+    footer?: AlertDialogFooterProps;
+    /** Alert Dialog Slot props for AlertDialogTitle. */
+    title?: AlertDialogTitleProps;
+    /** Alert Dialog Slot props for AlertDialogDescriptionProps. */
+    description?: AlertDialogDescriptionProps;
+    /** Alert Dialog Slot props for AlertDialogCancelProps. */
+    cancelButton?: AlertDialogCancelProps;
+    /** Alert Dialog Slot props for AlertDialogActionProps. */
+    actionButton?: AlertDialogActionProps;
+  };
+}

package/src_old/AlertDialog/AlertDialogRoot.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+
+import { cn } from '@oneplatformdev/utils';
+import { ButtonProps, buttonVariants } from '../Button';
+
+const AlertDialogRoot = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "w-full min-w-0 flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> & ButtonProps
+>(({ className, variant, size, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants({variant, size}), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> & ButtonProps
+>(({ className, variant = 'outline-solid', size, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant, size }),
+      "mt-2 sm:mt-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialogRoot,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/src_old/AlertDialog/index.ts

@@ -0,0 +1,15 @@
+export {
+  AlertDialogRoot,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}  from './AlertDialogRoot';
+export * from './AlertDialog';
+export type * from './AlertDialog.types';

package/src_old/AreaChart/AreaChart.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { FC } from "react";
+import { Area, AreaChart as RechartAreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "../Chart";
+
+import { AreaChartProps } from './AreaChart.types';
+
+export const AreaChart: FC<AreaChartProps> = ({ data, config }) => {
+    return (
+        <ChartContainer config={config} className="h-[350px] w-full">
+            <RechartAreaChart data={data} width={808} height={350} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
+                <defs>
+                    {Object.entries(config).map(([key, { color }]) => (
+                        <linearGradient id={`${key}Gradient`} x1="0" y1="0" x2="0" y2="1" key={key}>
+                            <stop offset="5%" stopColor={color} stopOpacity={0.8} />
+                            <stop offset="95%" stopColor={color} stopOpacity={0.1} />
+                        </linearGradient>
+                    ))}
+                </defs>
+                <CartesianGrid strokeDasharray="none" stroke="gray" strokeWidth={0.5} vertical={true} horizontal={true} />
+                <XAxis dataKey="month" axisLine={false} tickLine={false} tick={{ fontSize: 12 }} />
+                <YAxis axisLine={false} tickLine={false} tick={{ fontSize: 12 }} />
+                <ChartTooltip content={<ChartTooltipContent />} />
+                {Object.entries(config).map(([key, { color }]) => (
+                    <Area
+                        key={key}
+                        type="monotone"
+                        dataKey={key}
+                        stroke={color}
+                        fill={`url(#${key}Gradient)`}
+                        strokeWidth={3}
+                    />
+                ))}
+            </RechartAreaChart>
+        </ChartContainer>
+    );
+};

package/src_old/AreaChart/AreaChart.types.ts

@@ -0,0 +1,18 @@
+export interface AreaChartData {
+  month: string;
+  [key: string]: number | string;
+};
+
+export interface AreaChartConfigItem {
+  label: string;
+  color: string;
+};
+
+export interface AreaChartConfig {
+  [key: string]: AreaChartConfigItem;
+};
+
+export interface AreaChartProps {
+  data: AreaChartData[];
+  config: AreaChartConfig;
+};

package/src_old/AreaChart/index.tsx

@@ -0,0 +1,2 @@
+export * from './AreaChart'
+export type * from './AreaChart.types'

package/src_old/Aside/Aside.tsx

@@ -0,0 +1,26 @@
+import { SidebarInset, SidebarProvider } from "../Sidebar";
+import { AsideProps } from "./Aside.types";
+
+export const Aside: React.FC<React.PropsWithChildren<AsideProps>> = (props) => {
+  const {
+    children,
+    header,
+    sidebar
+  } = props;
+  return (
+    <SidebarProvider>
+      {Boolean(sidebar) && sidebar}
+      <SidebarInset>
+        {Boolean(header) && header}
+        <section className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <div>
+            test build
+          </div>
+          {children}
+        </section>
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
+
+export default Aside;

package/src_old/Aside/Aside.types.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { SidebarHeader, SidebarContent, SidebarFooter, Sidebar } from "../Sidebar";
+
+export interface AsideProps {
+  header?: React.ReactNode;
+  sidebar?: React.ReactElement<typeof Sidebar>;
+}
+
+export interface AsideSidebarProps
+  extends Partial<Omit<React.ComponentPropsWithRef<typeof Sidebar>, 'slot' | 'content'>> {
+  header?: React.ReactNode | React.ReactElement<typeof SidebarHeader>;
+  content?: React.ReactNode | React.ReactElement<typeof SidebarContent>;
+  footer?: React.ReactNode | React.ReactElement<typeof SidebarFooter>;
+  slot?: {
+    sidebar?: React.ComponentProps<typeof Sidebar>["slot"];
+    header?: React.ComponentPropsWithoutRef<typeof SidebarHeader>;
+    content?: React.ComponentPropsWithoutRef<typeof SidebarContent>;
+    footer?: React.ComponentPropsWithoutRef<typeof SidebarFooter>;
+  },
+  hiddenRail?: boolean;
+}

package/src_old/Aside/AsideSidebar.tsx

@@ -0,0 +1,78 @@
+import * as React from "react";
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarRail
+} from "../Sidebar";
+import { AsideSidebarProps } from "./Aside.types";
+
+function isReactElement<T>(
+  element: React.ReactNode,
+  componentType: React.JSXElementConstructor<T>
+): element is React.ReactElement<T> {
+  return React.isValidElement(element) && element.type === componentType;
+}
+
+export const AsideSidebar: React.FC<React.PropsWithChildren<AsideSidebarProps>> = (props) => {
+  const {
+    children,
+    header,
+    content,
+    footer,
+    slot,
+    hiddenRail,
+    ...rest
+  } = props;
+  return (
+    <Sidebar collapsible="icon" {...rest}>
+      {Boolean(children)
+        ? children
+        : (
+          <>
+            {!children && Boolean(header) && isReactElement(header, SidebarHeader)
+              ? React.cloneElement(header, {
+                ...header.props,
+                ...(slot?.header || {})
+              })
+              : (
+                <SidebarHeader {...(slot?.header || {})}>
+                  <div className="grid gap-2 text-center">
+                    {header}
+                  </div>
+                </SidebarHeader>
+              )
+            }
+
+            {!children && Boolean(content) && isReactElement(content, SidebarContent)
+              ? React.cloneElement(content, {
+                ...content.props,
+                ...(slot?.content || {})
+              })
+              : (
+                <SidebarContent {...(slot?.content || {})}>
+                  {content}
+                </SidebarContent>
+              )
+            }
+
+            {!children && Boolean(footer) && isReactElement(footer, SidebarFooter)
+              ? React.cloneElement(footer, {
+                ...footer.props,
+                ...(slot?.footer || {})
+              })
+              : (
+                <SidebarFooter {...(slot?.footer || {})}>
+                  {footer}
+                </SidebarFooter>
+              )
+            }
+          </>
+        )
+      }
+      {!hiddenRail && <SidebarRail />}
+    </Sidebar>
+  )
+}

package/src_old/Aside/index.ts

@@ -0,0 +1,3 @@
+export { Aside, default } from './Aside';
+export { AsideSidebar } from './AsideSidebar';
+export type * from './Aside.types';

package/src_old/AspectRatio/AspectRatio.tsx

@@ -0,0 +1,5 @@
+"use client"
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+export const AspectRatio = AspectRatioPrimitive.Root

package/src_old/AspectRatio/index.ts

@@ -0,0 +1 @@
+export {AspectRatio as default, AspectRatio} from './AspectRatio';

package/src_old/Avatar/Avatar.tsx

@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@oneplatformdev/utils"
+
+export const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+export const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+export const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName

package/src_old/Avatar/index.ts

@@ -0,0 +1 @@
+export * from './Avatar';

package/src_old/Badge/Badge.tsx

@@ -0,0 +1,13 @@
+import * as React from "react"
+
+import { cn } from "@oneplatformdev/utils"
+import { badgeVariants } from './badgeVariants';
+import { BadgeProps } from './/Badge.types';
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

package/src_old/Badge/Badge.types.ts

@@ -0,0 +1,8 @@
+import * as React from "react"
+import { type VariantProps } from "class-variance-authority"
+
+import { badgeVariants } from './badgeVariants';
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}

package/src_old/Badge/badgeVariants.ts

@@ -0,0 +1,21 @@
+import { cva } from 'class-variance-authority';
+
+export const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow-sm hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)

package/src_old/Badge/index.ts

@@ -0,0 +1,3 @@
+export * from './Badge';
+export * from './badgeVariants'
+export type * from './Badge.types';

package/src_old/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,115 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@oneplatformdev/utils";
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
+Breadcrumb.displayName = "Breadcrumb"
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      className
+    )}
+    {...props}
+  />
+))
+BreadcrumbList.displayName = "BreadcrumbList"
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props}
+  />
+))
+BreadcrumbItem.displayName = "BreadcrumbItem"
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  )
+})
+BreadcrumbLink.displayName = "BreadcrumbLink"
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("font-normal text-foreground", className)}
+    {...props}
+  />
+))
+BreadcrumbPage.displayName = "BreadcrumbPage"
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
+    {...props}
+  >
+    {children ?? <ChevronRight />}
+  </li>
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+)
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

package/src_old/Breadcrumb/index.ts

@@ -0,0 +1 @@
+export * from './Breadcrumb';