@oneplatformdev/ui 0.1.0-5 → 0.1.0-8

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/Accordion/index.ts

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

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/Alert/index.ts

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

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: [],
+  },
+};

package/src_old/AlertDialog/AlertDialog.tsx

@@ -0,0 +1,257 @@
+import {
+  Children,
+  cloneElement,
+  FC,
+  Key,
+  PropsWithChildren,
+  ReactElement,
+  useId,
+} from 'react';
+import {
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogRoot,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from './AlertDialogRoot';
+import {
+  AlertDialogContentProps,
+  AlertDialogDescriptionProps,
+  AlertDialogFooterProps,
+  AlertDialogHeaderProps,
+  AlertDialogProps,
+  AlertDialogTitleProps,
+  AlertDialogTriggerProps,
+} from './AlertDialog.types';
+
+import { isValidReactElement } from '@oneplatformdev/utils';
+
+const RenderAlertDialogTrigger: FC<PropsWithChildren<AlertDialogProps>> = (
+  props
+) => {
+  const { slotProps = {}, children } = props;
+
+  const triggerProps = slotProps.trigger ?? {};
+
+  if (isValidReactElement(children, AlertDialogTrigger)) {
+    return cloneElement<AlertDialogTriggerProps>(
+      children as ReactElement<AlertDialogTriggerProps>,
+      {
+        ...((children as ReactElement<AlertDialogTriggerProps>).props || {}),
+        ...triggerProps,
+      }
+    );
+  }
+
+  return <AlertDialogTrigger asChild>{children}</AlertDialogTrigger>;
+};
+
+const RenderAlertDialogHeader: FC<PropsWithChildren<AlertDialogProps>> = (props) => {
+  const {
+    title = '',
+    description = '',
+    slotProps = {},
+    children,
+  } = props;
+
+  const headerProps = slotProps.header ?? {};
+  const titleProps = slotProps.title ?? {};
+  const descriptionProps = slotProps.description ?? {};
+
+  if(children) {
+    return isValidReactElement(children, AlertDialogHeader)
+      ? cloneElement<AlertDialogHeaderProps>(
+        children as ReactElement<AlertDialogHeaderProps>,
+        { ...((children as ReactElement<AlertDialogHeaderProps>).props || {}), ...headerProps }
+      )
+      : <AlertDialogHeader {...headerProps}>{children}</AlertDialogHeader>
+  }
+
+  return (
+    <AlertDialogHeader>
+      {Boolean(title) && isValidReactElement(title, AlertDialogTitle)
+        ? cloneElement<AlertDialogTitleProps>(
+          title as ReactElement<AlertDialogTitleProps>,
+          { ...((title as ReactElement<AlertDialogTitleProps>).props || {}), ...titleProps }
+        )
+        : <AlertDialogTitle {...titleProps}>{title}</AlertDialogTitle>}
+
+      {Boolean(description) && isValidReactElement(description, AlertDialogDescription)
+        ? cloneElement<AlertDialogDescriptionProps>(
+          description as ReactElement<AlertDialogDescriptionProps>,
+          { ...((description as ReactElement<AlertDialogDescriptionProps>).props || {}), ...descriptionProps }
+        )
+        : <AlertDialogDescription {...descriptionProps}>{description}</AlertDialogDescription>
+      }
+    </AlertDialogHeader>
+  )
+}
+
+const RenderAlertDialogFooter: FC<PropsWithChildren<AlertDialogProps>> = (props) => {
+  const {
+    slotProps = {},
+    children,
+    onCancel,
+    onConfirm,
+    cancelLabel = 'Cancel',
+    actionLabel = 'Continue',
+    variant = 'confirm',
+  } = props;
+  const footerId = useId();
+
+  const footerProps = slotProps.footer ?? {};
+  const cancelButtonProps = slotProps.cancelButton ?? {};
+  const actionButtonProps = slotProps.actionButton ?? {};
+
+  if(children) {
+    return isValidReactElement(children, AlertDialogFooter)
+      ? cloneElement<AlertDialogFooterProps>(
+        children as ReactElement<AlertDialogFooterProps>,
+        { ...((children as ReactElement<AlertDialogFooterProps>).props || {}), ...footerProps }
+      )
+      : (
+        <AlertDialogFooter {...footerProps}>
+          {Children.map(children, (child, i) => {
+            if(!child || !isValidReactElement(child)) return;
+
+            const reactChild = child as ReactElement;
+            const clonedChild = cloneElement(reactChild, {...(reactChild.props || {}), key: (reactChild.key || `footer-${footerId}-action-${i}` as unknown as Key)});
+
+            if(isValidReactElement(child, AlertDialogAction) || isValidReactElement(child, AlertDialogCancel)) {
+              return clonedChild;
+            }
+
+            return (
+              <AlertDialogAction asChild>
+                {clonedChild}
+              </AlertDialogAction>
+            )
+          })}
+        </AlertDialogFooter>
+      )
+  }
+
+  return (
+    <AlertDialogFooter>
+      {variant !== 'alert' && (
+        <AlertDialogCancel
+          variant='ghost'
+          onClick={onCancel}
+          {...cancelButtonProps}
+        >
+          {cancelLabel}
+        </AlertDialogCancel>
+      )}
+      <AlertDialogAction
+        onClick={onConfirm}
+        {...actionButtonProps}
+        variant={
+          actionButtonProps.variant || variant === 'destructive' ? 'destructive' : 'default'
+        }
+      >
+        {actionLabel}
+      </AlertDialogAction>
+    </AlertDialogFooter>
+  )
+}
+
+/**
+ * Component for show Alert Dialog.
+ * @public
+ * @see [Documentation](#)
+ * @example
+ * > Import:
+ * ```tsx
+ *    import { AlertDialog } from '@oneplatformdev/ui/AlertDialog';
+ * ```
+ * > Simple example:
+ * ```tsx
+ *    <AlertDialog
+ *         trigger={'Trigger text'} // may be any ReactNode | Button | string
+ *         variant='alert' // 'confirm' (default) | 'alert' | 'destructive'
+ *         title='Dialog title'
+ *         description='Description text...'
+ *       />
+ * ```
+ * > Base example:
+ * ```tsx
+ *   <AlertDialog
+ *         trigger={<Button variant="outline">Simple Trigger</Button>}
+ *         title='Dialog title'
+ *         description='Description text...'
+ *         onCancel={(event) => console.log(event, 'Cancel')}
+ *         onConfirm={(event) => console.log(event, 'Confirm')}
+ *       />
+ * ```
+ * > Trigger example: Button with icon children
+ * ```tsx
+ *      <AlertDialog
+ *         trigger={<Button variant="outline" size="icon"><PencilLine /></Button>}
+ *         title="Dialog title with icon trigger"
+ *         description="Description text..."
+ *         onCancel={(event) => console.log(event, 'Cancel')}
+ *         onConfirm={(event) => console.log(event, 'Confirm')}
+ *       />
+ * ```
+ *
+ * > Full content example:
+ * ```tsx
+ *    <AlertDialog trigger={<Button variant="outline">Full Content Trigger</Button>}>
+ *      Full Content...
+ *     </AlertDialog>
+ * ```
+ *
+ * > Full control example:
+ * ```tsx
+ *       <AlertDialog
+ *         open={true}
+ *         onOpenChange={(nextState) => console.log(nextState)}
+ *         trigger={<Button variant="outline">Control Trigger</Button>}
+ *         header={<div>Custom Header</div>}
+ *         footer={[
+ *           <Button key='cancel' variant="outline" onClick={() => {}}>On Action</Button>,
+ *           <Button key='action' variant="outline" onClick={() => {}}>On Action</Button>,
+ *         ]}
+ *       />
+ * ```
+ */
+export const AlertDialog: FC<PropsWithChildren<AlertDialogProps>> = (props) => {
+  const {
+    trigger,
+    header,
+    footer,
+    slotProps = {},
+    children,
+    ...rest
+  } = props;
+
+  const contentProps = slotProps.content ?? {};
+
+  return (
+    <AlertDialogRoot {...rest}>
+      <RenderAlertDialogTrigger {...props}>{trigger}</RenderAlertDialogTrigger>
+      {children
+        ? isValidReactElement(children, AlertDialogContent)
+          ? cloneElement<AlertDialogContentProps>(
+            children as ReactElement<AlertDialogContentProps>,
+            {
+              ...((children as ReactElement<AlertDialogContentProps>).props || {}),
+              ...contentProps
+            })
+          : <AlertDialogContent {...contentProps}>{children}</AlertDialogContent>
+        : (
+          <AlertDialogContent {...contentProps}>
+            <RenderAlertDialogHeader {...props}>{header}</RenderAlertDialogHeader>
+            <RenderAlertDialogFooter {...props}>{footer}</RenderAlertDialogFooter>
+          </AlertDialogContent>
+        )
+      }
+    </AlertDialogRoot>
+  )
+}
+
+export default AlertDialog;