@oneplatformdev/ui 0.1.0-8 → 0.1.9-2

package/src/global.css

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

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

package/src_old/Accordion/Accordion.tsx

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

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

package/src_old/Alert/Alert.tsx

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

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

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

package/src_old/AlertDialog/AlertDialog.stories.tsx

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

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