@oneplatformdev/ui 0.0.1-beta.99 → 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,51 +1,64 @@
 {
   "name": "@oneplatformdev/ui",
-  "version": "0.0.1-beta.99",
-  "description": "UI React Components.",
+  "version": "0.1.0-8",
+  "description": "React hook library",
   "author": "One Platform Development Team",
   "keywords": [
     "react",
     "oneplatform",
-    "ui"
+    "hooks",
+    "typescript"
   ],
-  "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/oneplatformdev/core-web.git",
-    "directory": "packages/ui"
+    "url": "git+https://github.com/oneplatformdev/core.git",
+    "directory": "packages/hooks"
   },
   "bugs": {
     "url": "https://github.com/oneplatformdev/core/issues"
   },
   "homepage": "private package",
+  "private": false,
+  "license": "MIT",
   "type": "module",
-  "source": "./index.ts",
-  "main": "./index.mjs",
-  "module": "./index.mjs",
-  "default": "./index.mjs",
+  "main": "./index.js",
+  "module": "./index.js",
   "types": "./index.d.ts",
-  "scripts": {
-    "beta-version-patch": "npm version $(semver $npm_package_version -i prerelease --preid beta)",
-    "semver": "npm version $(semver $npm_package_version -i $release --preid $preid)"
-  },
   "sideEffects": [
-    "**/*.css"
+    "./global.css"
   ],
-  "publishConfig": {
-    "directory": "build",
-    "registry": "https://registry.npmjs.org/",
-    "dependencies": {
-      "@oneplatformdev/hooks": "~0.0.1-beta.3",
-      "@oneplatformdev/utils": "~0.0.2-beta.10"
+  "exports": {
+    "./package.json": "./package.json",
+    "./global.css": "./global.css",
+    ".": {
+      "@oneplatformdev/source": "./src/index.ts",
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./*": {
+      "types": "./*.d.ts",
+      "import": "./*.js",
+      "default": "./*.js"
     }
   },
-  "peerDependency": {
-    "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@oneplatformdev/hooks": "~0.0.1-beta.7",
-    "@oneplatformdev/utils": "~0.0.2-beta.17",
-    "lucide-react": "^0.469.0"
+  "files": [
+    "**/*",
+    "dist",
+    "package.json",
+    "README.md",
+    "LICENSE",
+    "!**/*.tsbuildinfo"
+  ],
+  "peerDependencies": {
+    "react": ">=18 || >=19",
+    "react-dom": ">=18 || >=19",
+    "tailwindcss": ">=4.0.0",
+    "tw-animate-css": "^1.3.8",
+    "clsx": "^2.1.1",
+    "class-variance-authority": "^0.7.1",
+    "tailwind-merge": "^2.3.0",
+    "lucide-react": "^0.452.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -56,48 +69,9 @@
     }
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.9.1",
-    "@oneplatformdev/hooks": "~0.0.1-beta.7",
-    "@oneplatformdev/utils": "~0.0.2-beta.16",
-    "@radix-ui/react-accordion": "^1.2.2",
-    "@radix-ui/react-alert-dialog": "^1.1.4",
-    "@radix-ui/react-aspect-ratio": "^1.1.1",
-    "@radix-ui/react-avatar": "^1.1.2",
-    "@radix-ui/react-checkbox": "^1.1.3",
-    "@radix-ui/react-collapsible": "^1.1.2",
-    "@radix-ui/react-dialog": "^1.1.4",
-    "@radix-ui/react-dropdown-menu": "^2.1.4",
-    "@radix-ui/react-hover-card": "^1.1.4",
-    "@radix-ui/react-label": "^2.1.1",
-    "@radix-ui/react-menubar": "^1.1.4",
-    "@radix-ui/react-navigation-menu": "^1.2.3",
-    "@radix-ui/react-popover": "^1.1.4",
-    "@radix-ui/react-progress": "^1.1.1",
-    "@radix-ui/react-radio-group": "^1.2.2",
-    "@radix-ui/react-scroll-area": "^1.2.2",
-    "@radix-ui/react-select": "^2.1.4",
-    "@radix-ui/react-separator": "^1.1.1",
-    "@radix-ui/react-slider": "^1.2.2",
-    "@radix-ui/react-slot": "^1.1.1",
-    "@radix-ui/react-switch": "^1.1.2",
-    "@radix-ui/react-tabs": "^1.1.2",
-    "@radix-ui/react-toast": "^1.2.4",
-    "@radix-ui/react-toggle": "^1.1.1",
-    "@radix-ui/react-toggle-group": "^1.1.1",
-    "@radix-ui/react-tooltip": "^1.1.6",
-    "@tanstack/react-table": "^8.20.6",
-    "cmdk": "1.0.0",
-    "date-fns": "^4.1.0",
-    "embla-carousel-react": "^8.5.1",
-    "input-otp": "^1.4.1",
-    "next-themes": "^0.4.4",
-    "react-day-picker": "8.10.1",
-    "react-dropzone": "^14.3.5",
-    "react-hook-form": "^7.54.2",
-    "react-resizable-panels": "^2.1.7",
-    "recharts": "^2.15.0",
-    "sonner": "^1.7.1",
-    "vaul": "^1.1.2",
-    "zod": "^3.24.1"
+    "@radix-ui/react-slot": "1.1.1",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@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/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;
+}