@lodado/sdui-template-component 1.0.0

package/LICENCE

@@ -0,0 +1,8 @@
+The MIT License (MIT)
+Copyright (c) 2024 lodado
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,50 @@
+# @lodado/sdui-template-component
+
+SDUI Component Library - Radix UI-based components for Server-Driven UI.
+
+## Installation
+
+```bash
+npm install @lodado/sdui-template-component
+# or
+pnpm add @lodado/sdui-template-component
+# or
+yarn add @lodado/sdui-template-component
+```
+
+## Usage
+
+```tsx
+import { Button } from '@lodado/sdui-template-component'
+
+function App() {
+  return <Button variant="primary">Click me</Button>
+}
+```
+
+## Components
+
+### Button
+
+A flexible button component built with Radix UI primitives.
+
+```tsx
+import { Button } from '@lodado/sdui-template-component'
+
+<Button variant="primary" size="md" onClick={handleClick}>
+  Submit
+</Button>
+```
+
+## Architecture
+
+This library follows Feature-Sliced Design (FSD) architecture:
+
+- `app/` - Entry point and exports
+- `features/` - Component features (Button, etc.)
+- `shared/` - Shared utilities, hooks, and UI primitives
+
+## License
+
+MIT
+

package/dist/cjs/client/index.cjs

@@ -0,0 +1 @@
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),i=require("clsx"),t=require("tailwind-merge"),a=require("class-variance-authority");function n(...e){return t.twMerge(i.clsx(e))}"function"==typeof SuppressedError&&SuppressedError;const s=a.cva("inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",{variants:{variant:{primary:"bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-600",secondary:"bg-gray-200 text-gray-900 hover:bg-gray-300 focus-visible:ring-gray-400",outline:"border border-gray-300 bg-transparent hover:bg-gray-100 focus-visible:ring-gray-400",ghost:"hover:bg-gray-100 focus-visible:ring-gray-400"},size:{sm:"h-8 px-3 text-sm",md:"h-10 px-4 text-base",lg:"h-12 px-6 text-lg"}},defaultVariants:{variant:"primary",size:"md"}}),o=r.forwardRef((r,i)=>{var{variant:t="primary",size:a="md",disabled:o=!1,children:l,onClick:c,className:d,nodeId:b,eventId:u,"aria-label":y,"aria-describedby":g}=r,v=function(e,r){var i={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&r.indexOf(t)<0&&(i[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(t=Object.getOwnPropertySymbols(e);a<t.length;a++)r.indexOf(t[a])<0&&Object.prototype.propertyIsEnumerable.call(e,t[a])&&(i[t[a]]=e[t[a]])}return i}(r,["variant","size","disabled","children","onClick","className","nodeId","eventId","aria-label","aria-describedby"]);const p=s({variant:t,size:a});return e.jsx("button",Object.assign({ref:i,type:"button",disabled:o,onClick:e=>{o?e.preventDefault():null==c||c(e)},onKeyDown:e=>{var r;!o||"Enter"!==e.key&&" "!==e.key?null===(r=v.onKeyDown)||void 0===r||r.call(v,e):e.preventDefault()},className:n(p,d),"aria-label":y,"aria-describedby":g,"aria-disabled":o},v,{children:l}))});o.displayName="Button",exports.Button=o,exports.cn=n;

package/dist/es/client/_virtual/_tslib.mjs

@@ -0,0 +1 @@
+function r(r,e){var t={};for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&e.indexOf(o)<0&&(t[o]=r[o]);if(null!=r&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(r);n<o.length;n++)e.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(r,o[n])&&(t[o[n]]=r[o[n]])}return t}"function"==typeof SuppressedError&&SuppressedError;export{r as __rest};

package/dist/es/client/src/features/button/ui/Button.mjs

@@ -0,0 +1 @@
+import{__rest as e}from"../../../../_virtual/_tslib.mjs";import{jsx as a}from"react/jsx-runtime";import r from"react";import{cn as i}from"../../../shared/lib/cn.mjs";import{buttonVariants as t}from"../../../shared/lib/button-variants.mjs";const n=r.forwardRef((r,n)=>{var{variant:l="primary",size:d="md",disabled:s=!1,children:o,onClick:b,className:m,nodeId:c,eventId:v,"aria-label":p,"aria-describedby":u}=r,f=e(r,["variant","size","disabled","children","onClick","className","nodeId","eventId","aria-label","aria-describedby"]);const y=t({variant:l,size:d});return a("button",Object.assign({ref:n,type:"button",disabled:s,onClick:e=>{s?e.preventDefault():null==b||b(e)},onKeyDown:e=>{var a;!s||"Enter"!==e.key&&" "!==e.key?null===(a=f.onKeyDown)||void 0===a||a.call(f,e):e.preventDefault()},className:i(y,m),"aria-label":p,"aria-describedby":u,"aria-disabled":s},f,{children:o}))});n.displayName="Button";export{n as Button};

package/dist/es/client/src/index.mjs

@@ -0,0 +1 @@
+export{Button}from"./features/button/ui/Button.mjs";export{cn}from"./shared/lib/cn.mjs";

package/dist/es/client/src/shared/lib/button-variants.mjs

@@ -0,0 +1 @@
+import{cva as e}from"class-variance-authority";const i=e("inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",{variants:{variant:{primary:"bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-600",secondary:"bg-gray-200 text-gray-900 hover:bg-gray-300 focus-visible:ring-gray-400",outline:"border border-gray-300 bg-transparent hover:bg-gray-100 focus-visible:ring-gray-400",ghost:"hover:bg-gray-100 focus-visible:ring-gray-400"},size:{sm:"h-8 px-3 text-sm",md:"h-10 px-4 text-base",lg:"h-12 px-6 text-lg"}},defaultVariants:{variant:"primary",size:"md"}});export{i as buttonVariants};

package/dist/es/client/src/shared/lib/cn.mjs

@@ -0,0 +1 @@
+import{clsx as r}from"clsx";import{twMerge as o}from"tailwind-merge";function t(...t){return o(r(t))}export{t as cn};

package/dist/types/app/index.d.ts

@@ -0,0 +1,3 @@
+export { Button } from '../features/button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from '../features/button';
+export { cn } from '../shared/lib/cn';

package/dist/types/features/button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from './ui/Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './model/types';

package/dist/types/features/button/model/types.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Button component variant styles
+ */
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
+/**
+ * Button component size options
+ */
+export type ButtonSize = 'sm' | 'md' | 'lg';
+/**
+ * Button component props
+ *
+ * @description
+ * - Supports multiple variants and sizes for flexible styling
+ * - Integrates with SDUI via nodeId prop
+ * - Supports event emission via eventId prop
+ * - Full keyboard navigation support (Enter, Space)
+ * - Accessible by default (ARIA attributes)
+ *
+ * @param variant - Visual style variant (default: 'primary')
+ * @param size - Size of the button (default: 'md')
+ * @param disabled - Whether button is disabled (default: false)
+ * @param children - Button content
+ * @param onClick - Click event handler
+ * @param className - Additional CSS classes (merged with defaults)
+ * @param nodeId - SDUI node ID for integration (optional)
+ * @param eventId - Event ID for event emission (optional)
+ * @param 'aria-label' - Accessible label (optional, uses children if not provided)
+ * @param 'aria-describedby' - Element ID that describes button (optional)
+ *
+ * @example
+ * ```tsx
+ * <Button variant="primary" size="md" onClick={handleClick}>
+ *   Submit
+ * </Button>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // SDUI integration
+ * <Button nodeId="button-1" eventId="submit-click">
+ *   Submit
+ * </Button>
+ * ```
+ */
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Visual style variant */
+    variant?: ButtonVariant;
+    /** Size of the button */
+    size?: ButtonSize;
+    /** Whether button is disabled */
+    disabled?: boolean;
+    /** Button content */
+    children: React.ReactNode;
+    /** Click event handler */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** SDUI node ID for integration */
+    nodeId?: string;
+    /** Event ID for event emission */
+    eventId?: string;
+}

package/dist/types/features/button/ui/Button.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { ButtonProps } from '../model/types';
+/**
+ * Button component
+ *
+ * @description
+ * A flexible, accessible button component built with Radix UI primitives.
+ * Supports multiple variants, sizes, and integrates with SDUI template system.
+ *
+ * @example
+ * ```tsx
+ * <Button variant="primary" size="md" onClick={handleClick}>
+ *   Submit
+ * </Button>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // SDUI integration
+ * <Button nodeId="button-1" eventId="submit-click">
+ *   Submit
+ * </Button>
+ * ```
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/index.d.ts

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

package/dist/types/shared/lib/button-variants.d.ts

@@ -0,0 +1,14 @@
+import { type VariantProps } from 'class-variance-authority';
+import type { ButtonVariant, ButtonSize } from '../../features/button/model/types';
+/**
+ * Button variant configuration using class-variance-authority
+ *
+ * @description
+ * Defines the visual variants and sizes for the Button component.
+ * Uses Tailwind CSS classes for styling.
+ */
+export declare const buttonVariants: (props?: ({
+    variant?: ButtonVariant | null | undefined;
+    size?: ButtonSize | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export type ButtonVariants = VariantProps<typeof buttonVariants>;

package/dist/types/shared/lib/cn.d.ts

@@ -0,0 +1,8 @@
+import { type ClassValue } from 'clsx';
+/**
+ * Utility function to merge Tailwind CSS classes
+ *
+ * @param inputs - Class values to merge
+ * @returns Merged class string
+ */
+export declare function cn(...inputs: ClassValue[]): string;

package/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "@lodado/sdui-template-component",
+  "version": "1.0.0",
+  "description": "SDUI Component Library - Radix UI-based components for Server-Driven UI",
+  "author": "lodado",
+  "license": "MIT",
+  "main": "./dist/cjs/client/index.cjs",
+  "module": "./dist/es/client/index.mjs",
+  "types": "./dist/types/index.d.ts",
+  "source": "./src/index.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "default": "./dist/es/client/index.mjs",
+        "types": "./dist/types/index.d.ts"
+      },
+      "require": {
+        "default": "./dist/cjs/client/index.cjs",
+        "types": "./dist/types/index.d.ts"
+      }
+    }
+  },
+  "files": [
+    "dist/**",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "source": "./src/index.ts"
+  },
+  "sideEffects": false,
+  "keywords": [
+    "react",
+    "sdui",
+    "server-driven-ui",
+    "components",
+    "radix-ui",
+    "ui-library",
+    "typescript"
+  ],
+  "peerDependencies": {
+    "react": "^18.0",
+    "react-dom": "^18.0",
+    "@lodado/sdui-template": "^1.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.0.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.2.1"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/node": "^20.12.7",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "babel-jest": "29.5.0",
+    "eslint": "^8.57.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "ts-jest": "29.0.5",
+    "typescript": "^5.4.5",
+    "vitest": "^1.6.0",
+    "eslint-config-sdui-template": "0.0.0",
+    "jest-config": "0.0.0",
+    "rollup-config": "0.0.1",
+    "tsconfig": "0.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lodado/sdui-template.git",
+    "directory": "apps/sdui-template-component"
+  },
+  "homepage": "https://github.com/lodado/sdui-template#readme",
+  "bugs": {
+    "url": "https://github.com/lodado/sdui-template/issues"
+  },
+  "scripts": {
+    "build": "rollup -c && tsc --emitDeclarationOnly --declarationMap false --declaration --declarationDir dist/types",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "lint": "eslint \"src/**/*.ts*\"",
+    "test": "jest --passWithNoTests",
+    "manual-release": "pnpm run build && pnpm publish --no-git-checks"
+  }
+}