@oneplatformdev/ui 0.1.0-5 → 0.1.0-8

package/node_modules/@radix-ui/react-tooltip/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@radix-ui/react-tooltip",
+  "version": "1.2.8",
+  "license": "MIT",
+  "source": "./src/index.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "dependencies": {
+    "@radix-ui/primitive": "1.1.3",
+    "@radix-ui/react-compose-refs": "1.1.2",
+    "@radix-ui/react-context": "1.1.2",
+    "@radix-ui/react-dismissable-layer": "1.1.11",
+    "@radix-ui/react-id": "1.1.1",
+    "@radix-ui/react-popper": "1.2.8",
+    "@radix-ui/react-portal": "1.1.9",
+    "@radix-ui/react-presence": "1.1.5",
+    "@radix-ui/react-primitive": "2.1.3",
+    "@radix-ui/react-slot": "1.2.3",
+    "@radix-ui/react-use-controllable-state": "1.2.2",
+    "@radix-ui/react-visually-hidden": "1.2.3"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
+    "eslint": "^9.18.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "typescript": "^5.7.3",
+    "@repo/builder": "0.0.0",
+    "@repo/eslint-config": "0.0.0",
+    "@repo/typescript-config": "0.0.0"
+  },
+  "peerDependencies": {
+    "@types/react": "*",
+    "@types/react-dom": "*",
+    "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+    "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    }
+  },
+  "homepage": "https://radix-ui.com/primitives",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/radix-ui/primitives.git"
+  },
+  "bugs": {
+    "url": "https://github.com/radix-ui/primitives/issues"
+  },
+  "scripts": {
+    "lint": "eslint --max-warnings 0 src",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit",
+    "build": "radix-build"
+  },
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oneplatformdev/ui",
-  "version": "0.1.0-5",
+  "version": "0.1.0-8",
   "description": "React hook library",
   "author": "One Platform Development Team",
   "keywords": [
@@ -43,6 +43,7 @@
     }
   },
   "files": [
+    "**/*",
     "dist",
     "package.json",
     "README.md",
@@ -70,7 +71,7 @@
   "dependencies": {
     "@radix-ui/react-slot": "1.1.1",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@oneplatformdev/hooks": "^0.1.0-7",
-    "@oneplatformdev/utils": "^0.1.1-28"
+    "@oneplatformdev/utils": "^0.1.1-34",
+    "@oneplatformdev/hooks": "^0.1.0-9"
   }
 }

package/src/Button/Button.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+import type { ButtonProps } from './Button.types';
+import React from 'react';
+
+const Template = (props: ButtonProps) => (
+  <Button {...props}/>
+);
+
+const variants = ['default', 'destructive', 'outline-solid', 'secondary', 'ghost', 'link']
+const size = ['default', 'sm', 'lg', 'icon']
+
+const meta = {
+  title: 'Button',
+  component: Button,
+  render: Template,
+  args: {
+    variant: 'default',
+    size: 'default',
+    disabled: false,
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Default',
+  }
+};

package/src/Button/Button.tsx

@@ -0,0 +1,33 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+
+import { cn } from "@oneplatformdev/utils"
+import { buttonVariants } from './buttonVariants';
+import { ButtonProps } from './Button.types';
+
+import { Tooltip } from '../Tooltip';
+
+// TODO: create ButtonIcon component | update button  | add start/end icon
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ disabled, className, variant, size, asChild = false, title = '', tooltip, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Tooltip
+        open={(disabled || (!title && !tooltip)) ? false : undefined}
+        message={tooltip || title}
+        delay={300}
+      >
+        <Comp
+          type='button'
+          ref={ref}
+          disabled={disabled}
+          className={cn(buttonVariants({ variant, size, className }))}
+          {...props}
+        />
+      </Tooltip>
+    )
+  }
+)
+Button.displayName = "Button"
+
+export default Button;

package/src/Button/Button.types.ts

@@ -0,0 +1,11 @@
+import * as React from "react"
+import { type VariantProps } from "class-variance-authority"
+import { buttonVariants } from './buttonVariants';
+import { ReactNode } from 'react';
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+  tooltip?: ReactNode;
+}

package/src/Button/buttonVariants.ts

@@ -0,0 +1,38 @@
+import { cva } from 'class-variance-authority';
+
+// TODO: refactor btn variants | ask me about mnc next pwa
+export const buttonVariants = cva(
+  [
+    "inline-flex items-center justify-center gap-2",
+    "whitespace-nowrap rounded-lg 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: {
+        default:
+          "bg-primary text-primary-foreground shadow-sm hover:opacity-[.8]",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs [&_svg]:size-4",
+        lg: "h-10 px-8 [&_svg]:size-5 px-3 py-2",
+        icon: "h-9 w-9 [&_svg]:size-5!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "lg",
+    },
+  }
+)

package/src/Button/index.ts

@@ -0,0 +1,3 @@
+export { Button as default, Button } from './Button';
+export * from './buttonVariants';
+export type * from './Button.types';

package/src/ButtonIcon/ButtonIcon.stories.tsx

@@ -0,0 +1,186 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ButtonIcon } from './ButtonIcon';
+import { ButtonIconProps } from './ButtonIcon.types';
+import { PencilLineIcon } from 'lucide-react';
+import React from 'react';
+
+const variants = ['contained', 'outlined', 'ghost', 'link'] as const;
+const colors = [
+  'primary',
+  'secondary',
+  'error',
+  'success',
+  'disabled',
+] as const;
+const sizes = ['sm', 'md', 'lg'] as const;
+
+const Template = (props: ButtonIconProps) => (
+  <ButtonIcon {...props}>
+    <PencilLineIcon />
+  </ButtonIcon>
+);
+
+const meta = {
+  title: 'ButtonIcon',
+  component: ButtonIcon,
+  render: Template,
+  argTypes: {
+    variant: {
+      name: 'variant',
+      description: 'ButtonIcon variant',
+      defaultValue: 'contained',
+      options: variants,
+      control: {
+        type: 'inline-radio',
+      },
+    },
+    color: {
+      options: colors,
+      control: {
+        type: 'inline-radio',
+      },
+    },
+    size: {
+      options: sizes,
+      control: {
+        type: 'inline-radio',
+      },
+    },
+    tooltip: {
+      control: {
+        type: 'text',
+      },
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    rounded: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  args: {
+    variant: 'contained',
+    color: 'primary',
+    size: 'md',
+    disabled: false,
+    rounded: false,
+    tooltip: 'ButtonIcon tooltip',
+  },
+} satisfies Meta<typeof ButtonIcon>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground = ({ rounded, ...args }: ButtonIconProps) => (
+  <div className="flex flex-col gap-10">
+    <span>
+      <Template rounded={rounded} {...args} />
+    </span>
+
+    <div className="flex flex-col gap-2">
+      {variants.map((v) => {
+        return (
+          <div className="flex gap-2" key={v}>
+            {colors.map((c) => {
+              const k = `${v}-${c}`;
+              return (
+                <div className="flex gap-2" key={k}>
+                  {sizes.map((s) => {
+                    const key = `${k}-${s}`;
+                    return (
+                      <Template
+                        key={key}
+                        color={c}
+                        size={s}
+                        variant={v}
+                        rounded={rounded}
+                        tooltip={key}
+                      />
+                    );
+                  })}
+                </div>
+              );
+            })}
+          </div>
+        );
+      })}
+    </div>
+  </div>
+);
+Playground.args = {
+  onClick: { action: (e: React.MouseEvent<HTMLButtonElement>) => e },
+};
+
+export const Variants = ({ variant, ...args }: ButtonIconProps) => (
+  <div className="flex flex-col gap-10">
+    <span>
+      <Template variant={variant} {...args} />
+    </span>
+
+    <div className="flex gap-2">
+      {variants.map((v) => (
+        <Template key={v} variant={v} tooltip={v} />
+      ))}
+    </div>
+  </div>
+);
+
+Variants.parameters = {
+  controls: {
+    include: ['disabled', 'color', 'size', 'variant'],
+  },
+};
+
+export const Colors = ({ color, ...args }: ButtonIconProps) => (
+  <div className="flex flex-col gap-2">
+    <span>
+      <Template color={color} {...args} />
+    </span>
+
+    <div className="flex gap-2">
+      {colors.map((c) => (
+        <Template key={c} color={c} tooltip={c} {...args} />
+      ))}
+    </div>
+  </div>
+);
+
+Colors.parameters = {
+  controls: {
+    include: ['disabled', 'color', 'size', 'variant'],
+  },
+};
+
+export const Disabled = ({ variant, color, ...args }: ButtonIconProps) => (
+  <div className="flex flex-col gap-10">
+    <div className="flex flex-col gap-2">
+      {variants.map((v) => {
+        return (
+          <div className="flex gap-2" key={v}>
+            {colors.map((c) => {
+              const key = `${v}-${c}`;
+              return <Template
+                key={key}
+                variant={v}
+                color={c}
+                disabled
+                tooltip={key}
+                {...args}
+              />;
+            })}
+          </div>
+        );
+      })}
+    </div>
+  </div>
+);
+Disabled.parameters = {
+  controls: {
+    include: [],
+  },
+};

package/src/ButtonIcon/ButtonIcon.tsx

@@ -0,0 +1,28 @@
+import * as React from "react"
+
+import { cn } from "@oneplatformdev/utils"
+import { buttonIconVariants } from './buttonIconVariants';
+import { ButtonIconProps } from './ButtonIcon.types';
+
+import { Tooltip } from '../Tooltip';
+
+export const ButtonIcon = React.forwardRef<HTMLButtonElement, ButtonIconProps>(
+  ({ disabled, className, variant, color, size, rounded, title = '', tooltip, ...props }, ref) => {
+    const shouldTooltipOpen = (disabled || (!title && !tooltip)) ? false : undefined;
+    return (
+      <Tooltip
+        open={shouldTooltipOpen}
+        message={tooltip || title}
+        delay={300}
+      >
+        <button
+          className={cn(buttonIconVariants({ variant, size, color, disabled, rounded, className }))}
+          ref={ref}
+          disabled={Boolean(disabled)}
+          {...props}
+        />
+      </Tooltip>
+    )
+  }
+)
+ButtonIcon.displayName = "Button"

package/src/ButtonIcon/ButtonIcon.types.ts

@@ -0,0 +1,10 @@
+import * as React from "react"
+import { type VariantProps } from "class-variance-authority"
+import { buttonIconVariants } from './buttonIconVariants';
+import { ReactNode } from 'react';
+
+export interface ButtonIconProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'color' | 'disabled'>,
+    VariantProps<typeof buttonIconVariants> {
+  tooltip?: ReactNode;
+}

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

@@ -0,0 +1,3 @@
+export { ButtonIcon as default, ButtonIcon } from './ButtonIcon';
+export * from './buttonIconVariants';
+export type * from './ButtonIcon.types';

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

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