@maayan-albert/moab-sdk 1.0.0

package/README.md

@@ -0,0 +1,101 @@
+# moab-sdk
+
+A JavaScript/TypeScript SDK for Moab.
+
+## Installation
+
+```bash
+pnpm add @maayan-albert/moab-sdk
+# or
+npm install @maayan-albert/moab-sdk
+```
+
+## Usage
+
+### SDK Usage
+
+```javascript
+const MoabSDK = require('@maayan-albert/moab-sdk');
+
+const sdk = new MoabSDK({
+  // your options here
+});
+
+sdk.hello();
+```
+
+### UI Components (React TypeScript)
+
+```tsx
+import React from 'react';
+import { Button, Card, Input } from '@maayan-albert/moab-sdk/components';
+
+const MyApp: React.FC = () => {
+  return (
+    <div>
+      <Card title="Welcome">
+        <Input label="Name" placeholder="Enter your name" />
+        <Button variant="primary" onClick={() => alert('Clicked!')}>
+          Submit
+        </Button>
+      </Card>
+    </div>
+  );
+};
+```
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Run the SDK example
+pnpm start
+# or
+pnpm example
+
+# Run the component demo (dev server with hot reload)
+pnpm demo
+# This will start a Vite dev server (usually http://localhost:5173) where you can preview all UI components
+
+# Build the demo for production
+pnpm run demo:build
+
+# Preview the production build
+pnpm run demo:preview
+
+# Type check
+pnpm type-check
+
+# Build
+pnpm run build
+
+# Test
+pnpm test
+```
+
+### Previewing Components
+
+To preview and test the UI components, run:
+
+```bash
+pnpm demo
+```
+
+This starts a Vite development server (typically at `http://localhost:5173`) with:
+- ⚡ Fast hot module replacement (HMR) - changes appear instantly
+- 🔥 Zero-config setup - works out of the box
+- 📦 Automatic TypeScript/React bundling
+- 🎨 See all components in action with live reload
+
+You can:
+- See all components in action
+- Test different variants and props
+- Interact with components to verify behavior
+- Edit components and see changes instantly
+- Use this as a reference for implementing components in your apps
+
+## License
+
+MIT

package/dist/components.d.mts

@@ -0,0 +1,53 @@
+import React from 'react';
+
+type ButtonVariant = "primary" | "secondary" | "outline";
+type ButtonSize = "small" | "medium" | "large";
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: React.ReactNode;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    disabled?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    className?: string;
+}
+/**
+ * Button component
+ */
+declare const Button: React.FC<ButtonProps>;
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    title?: string;
+    className?: string;
+}
+/**
+ * Card component
+ */
+declare const Card: React.FC<CardProps>;
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    type?: string;
+    placeholder?: string;
+    value?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    required?: boolean;
+    className?: string;
+}
+/**
+ * Input component
+ */
+declare const Input: React.FC<InputProps>;
+
+interface DrawingToolProps extends React.HTMLAttributes<HTMLDivElement> {
+    width?: number;
+    height?: number;
+    className?: string;
+    overlay?: boolean;
+}
+/**
+ * DrawingTool component - A canvas-based drawing tool
+ */
+declare const DrawingTool: React.FC<DrawingToolProps>;
+
+export { Button, Button as ButtonDefault, type ButtonProps, type ButtonSize, type ButtonVariant, Card, Card as CardDefault, type CardProps, DrawingTool, DrawingTool as DrawingToolDefault, type DrawingToolProps, Input, Input as InputDefault, type InputProps };

package/dist/components.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+
+type ButtonVariant = "primary" | "secondary" | "outline";
+type ButtonSize = "small" | "medium" | "large";
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: React.ReactNode;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    disabled?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    className?: string;
+}
+/**
+ * Button component
+ */
+declare const Button: React.FC<ButtonProps>;
+
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    title?: string;
+    className?: string;
+}
+/**
+ * Card component
+ */
+declare const Card: React.FC<CardProps>;
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    type?: string;
+    placeholder?: string;
+    value?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    required?: boolean;
+    className?: string;
+}
+/**
+ * Input component
+ */
+declare const Input: React.FC<InputProps>;
+
+interface DrawingToolProps extends React.HTMLAttributes<HTMLDivElement> {
+    width?: number;
+    height?: number;
+    className?: string;
+    overlay?: boolean;
+}
+/**
+ * DrawingTool component - A canvas-based drawing tool
+ */
+declare const DrawingTool: React.FC<DrawingToolProps>;
+
+export { Button, Button as ButtonDefault, type ButtonProps, type ButtonSize, type ButtonVariant, Card, Card as CardDefault, type CardProps, DrawingTool, DrawingTool as DrawingToolDefault, type DrawingToolProps, Input, Input as InputDefault, type InputProps };