@oneplatformdev/ui 0.0.1-beta.99 → 0.1.0-8

package/src/ButtonIcon/buttonIconVariants.ts

@@ -0,0 +1,137 @@
+import { cva } from 'class-variance-authority';
+
+export const buttonIconVariants = cva(
+  "aspect-square inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        contained: 'border shadow-sm',
+        outlined: 'border bg-transparent hover:shadow-xs',
+        ghost: "bg-transparent hover:bg-accent hover:text-accent-foreground",
+        link: "underline-offset-4 hover:underline bg-transparent hover:bg-transparent",
+      },
+      color: {
+        primary: "",
+        secondary: "",
+        error: "",
+        success: "",
+        disabled: "contrast-50",
+      },
+      size: {
+        sm: "w-8 h-8 rounded-sm text-xs [&_svg]:size-4",
+        md: "w-9 h-9 px-4 rounded-md [&_svg]:size-5",
+        lg: "w-10 h-10 rounded-md [&_svg]:size-6",
+        icon: "h-9 w-9 [&_svg]:size-5 rounded-sm",
+      },
+      disabled: {
+        true: "cursor-not-allowed contrast-50",
+        false: "cursor-pointer",
+      },
+      rounded: {
+        true: "rounded-full",
+        false: "",
+      },
+    },
+    compoundVariants: [
+      // contained
+      {
+        variant: 'contained',
+        color: 'primary',
+        disabled: false,
+        className: 'bg-typography-primary border-typography-primary text-white dark:bg-gray-3 dark:border-gray-3 dark:text-typography-secondary'
+      },
+      {
+        variant: 'contained',
+        color: 'secondary',
+        disabled: false,
+        className: 'bg-gray-2 border-gray-2 text-typography-primary dark:bg-gray-3 dark:border-gray-3 dark:text-typography-secondary'
+      },
+      {
+        variant: 'contained',
+        color: 'error',
+        disabled: false,
+        className: 'bg-typography-error/90 border-typography-error/90 text-white dark:bg-typography-error/80 dark:border-typography-error/80 dark:text-typography-primary'
+      },
+      {
+        variant: 'contained',
+        color: 'success',
+        disabled: false,
+        className: 'bg-typography-success/90 border-typography-success/90 text-white dark:bg-typography-success/80 dark:border-typography-success/80 dark:text-typography-primary'
+      },
+      // outlined
+      {
+        variant: 'outlined',
+        color: 'primary',
+        disabled: false,
+        className: 'border-typography-primary text-typography-primary hover:bg-typography-primary/15'
+      },
+      {
+        variant: 'outlined',
+        color: 'secondary',
+        disabled: false,
+        className: 'border-border text-typography-secondary hover:bg-border-border/15'
+      },
+      {
+        variant: 'outlined',
+        color: 'error',
+        disabled: false,
+        className: 'border-typography-error text-typography-error hover:bg-typography-error/15'
+      },
+      {
+        variant: 'outlined',
+        color: 'success',
+        disabled: false,
+        className: 'border-typography-success text-typography-success hover:bg-typography-success/15'
+      },
+      // link - ghost
+      {
+        variant: [ 'link', 'ghost' ],
+        color: 'primary',
+        className: "text-typography-primary",
+      },
+      {
+        variant: [ 'link', 'ghost' ],
+        color: 'secondary',
+        className: "text-typography-secondary",
+      },
+      {
+        variant: [ 'link', 'ghost' ],
+        color: "success",
+        className: "text-typography-success",
+      },
+      {
+        variant: [ 'link', 'ghost' ],
+        color: "error",
+        className: "text-typography-error",
+      },
+      // ghost
+      {
+        variant: 'ghost',
+        color: 'primary',
+        className: "hover:bg-typography-primary/15",
+      },
+      {
+        variant: 'ghost',
+        color: 'secondary',
+        className: "hover:bg-typography-secondary/15",
+      },
+      {
+        variant: 'ghost',
+        color: "success",
+        className: "hover:bg-typography-success/15",
+      },
+      {
+        variant: 'ghost',
+        color: "error",
+        className: "hover:bg-typography-error/15",
+      },
+    ],
+    defaultVariants: {
+      variant: "contained",
+      size: "md",
+      color: "primary",
+      disabled: false,
+      rounded: false,
+    },
+  }
+)

package/src/Tooltip/Tooltip.tsx

@@ -0,0 +1,20 @@
+import { FC, PropsWithChildren } from 'react';
+
+import { TooltipRoot, TooltipContent, TooltipTrigger, TooltipProvider } from "./TooltipRoot";
+import { TooltipProps } from './Tooltip.types';
+
+export const Tooltip: FC<PropsWithChildren<TooltipProps>> = (props) => {
+  const { trigger, children, message = '', delay = 100, ...rest } = props;
+  return (
+    <TooltipProvider>
+    <TooltipRoot delayDuration={delay} {...rest}>
+      <TooltipTrigger asChild>
+        {trigger || children}
+      </TooltipTrigger>
+      <TooltipContent className="bg-gray-300 text-black">
+        {message}
+      </TooltipContent>
+    </TooltipRoot>
+    </TooltipProvider>
+  )
+};

package/src/Tooltip/Tooltip.types.tsx

@@ -0,0 +1,9 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { TooltipRoot } from './TooltipRoot';
+
+export interface TooltipProps
+  extends ComponentPropsWithoutRef<typeof TooltipRoot> {
+  trigger?: ReactNode;
+  message?: ReactNode;
+  delay?: number;
+};

package/src/Tooltip/TooltipRoot.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@oneplatformdev/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const TooltipRoot = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { TooltipRoot, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/global.css

@@ -0,0 +1,123 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+import "./global.css"
+
+export * from './Button';
+export * from './ButtonIcon';
+export * from './Tooltip';

package/src_old/Accordion/Accordion.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
+
+import { cn } from '@oneplatformdev/utils';
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & { showChevron?: boolean }
+>(({ className, children, showChevron = true, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all text-left [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      onKeyDown={e => {
+        if (e.key === " " && e.target === e.currentTarget) {
+          e.preventDefault()
+        }
+      }}
+      {...props}
+    >
+      {children}
+      {showChevron && <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />}
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/src_old/Alert/Alert.tsx

@@ -0,0 +1,42 @@
+import * as React from "react"
+import { type VariantProps } from "class-variance-authority"
+import { cn } from "@oneplatformdev/utils"
+
+import alertVariants from './alertVariants';
+
+export const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+export const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+export const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"

package/src_old/Alert/alertVariants.ts

@@ -0,0 +1,19 @@
+import { cva } from "class-variance-authority"
+
+export const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export default alertVariants;

package/src_old/AlertDialog/AlertDialog.stories.tsx

@@ -0,0 +1,131 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { AlertDialog } from './AlertDialog';
+import { AlertDialogProps } from './AlertDialog.types';
+import React from 'react';
+import { Button } from '../Button';
+
+const Template = (props: AlertDialogProps) => <AlertDialog {...props} />;
+
+const variants = ['confirm', 'alert', 'destructive'] as const;
+
+const meta = {
+  title: 'AlertDialog',
+  component: AlertDialog,
+  render: Template,
+  argTypes: {
+    open: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    variant: {
+      name: 'variant',
+      description: 'ButtonIcon variant',
+      options: variants,
+      control: {
+        type: 'inline-radio',
+      },
+    },
+    cancelLabel: {
+      control: {
+        type: 'text',
+      },
+    },
+    actionLabel: {
+      control: {
+        type: 'text',
+      },
+    },
+    title: {
+      control: {
+        type: 'text',
+      },
+    },
+    description: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  args: {
+    variant: 'alert',
+    cancelLabel: 'Cancel',
+    actionLabel: 'Action',
+  },
+} satisfies Meta<typeof AlertDialog>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = (args: AlertDialogProps) => (
+  <AlertDialog
+    {...args}
+  />
+);
+Playground.args = {
+  trigger: 'Trigger text or ReactNode',
+  variant: 'confirm',
+  title: 'Dialog title...',
+  description: 'Description text...',
+  cancelLabel: 'Cancel label',
+  actionLabel: 'Action label',
+}
+
+export const Variants = (args: AlertDialogProps) => (
+  <div className='flex gap-3'>
+    {variants.map((variant) => (
+      <AlertDialog
+        key={variant}
+        trigger={variant}
+        {...args}
+        variant={variant}
+      />
+    ))}
+  </div>
+);
+Variants.parameters = {
+  controls: {
+    include: ['title', 'description', 'cancelLabel', 'actionLabel'],
+  },
+};
+Variants.args = {
+  title: "Dialog title",
+  description: "Description text..."
+}
+
+export const FullControl = (args: AlertDialogProps) => (
+  <AlertDialog
+    onOpenChange={(nextState) => console.log(nextState)}
+    trigger={<Button variant="outline">Control Trigger</Button>}
+    header={<div>Custom Header</div>}
+    footer={[
+      <Button key='cancel' variant="outline" onClick={console.log}>On cancel</Button>,
+      <Button key='action' variant="outline" onClick={console.log}>On Action</Button>,
+    ]}
+    {...args}
+  />
+);
+FullControl.parameters = {
+  controls: {
+    include: ['open'],
+  },
+};
+FullControl.args = {
+  open: false,
+}
+
+
+export const FullContent = (args: AlertDialogProps) => (
+  <AlertDialog
+    trigger={<Button variant="outline">Full Content Trigger</Button>}
+    {...args}
+  >
+    Full Content...
+  </AlertDialog>
+);
+FullContent.parameters = {
+  controls: {
+    include: [],
+  },
+};