@waysnx/ui-core 0.1.1

package/README.md

@@ -0,0 +1,475 @@
+# @waysnx/ui-core
+
+Core UI components for WaysNX - A comprehensive React component library with form controls, inputs, buttons, date pickers, and more.
+
+## Features
+
+- 🎨 Modern, accessible UI components
+- 📝 Complete form controls (Input, Select, Checkbox, Radio, etc.)
+- 📅 Date and date range pickers
+- 🔒 Built-in XSS protection with DOMPurify
+- 🎯 TypeScript support
+- 🌙 Dark mode ready
+- 📦 Tree-shakeable
+- 🎨 CSS variables for easy theming
+- 📋 JSON Schema to Form converter
+- ⚡ Optimized and minified for production
+
+## Installation
+
+### Prerequisites
+
+This package requires React 18+ and react-datepicker as peer dependencies.
+
+### Install via npm
+
+```bash
+npm install @waysnx/ui-core react-datepicker
+```
+
+### Authentication Setup
+
+Since this package is hosted on GitHub Packages, you need to authenticate:
+
+1. Create a `.npmrc` file in your project root:
+
+```
+@waysnx:registry=https://npm.pkg.github.com/
+//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN
+```
+
+2. Generate a GitHub Personal Access Token:
+   - Go to: https://github.com/settings/tokens
+   - Click "Generate new token (classic)"
+   - Select scope: `read:packages`
+   - Copy the token and replace `YOUR_GITHUB_TOKEN` in `.npmrc`
+
+3. Add `.npmrc` to `.gitignore`:
+
+```bash
+echo ".npmrc" >> .gitignore
+```
+
+### Import CSS
+
+Import the required CSS files in your main entry file (e.g., `main.tsx` or `App.tsx`):
+
+```javascript
+import '@waysnx/ui-core/dist/index.css';
+import 'react-datepicker/dist/react-datepicker.css';
+```
+
+## Usage
+
+### Basic Components
+
+```jsx
+import { Button, Input, Select, Checkbox } from '@waysnx/ui-core';
+import { useState } from 'react';
+
+function MyForm() {
+  const [name, setName] = useState('');
+  const [country, setCountry] = useState('');
+  const [agreed, setAgreed] = useState(false);
+
+  return (
+    <div>
+      <Input
+        label="Name"
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        placeholder="Enter your name"
+        required
+      />
+
+      <Select
+        label="Country"
+        value={country}
+        onChange={(e) => setCountry(e.target.value)}
+        options={[
+          { value: 'us', label: 'United States' },
+          { value: 'uk', label: 'United Kingdom' },
+          { value: 'ca', label: 'Canada' }
+        ]}
+      />
+
+      <Checkbox
+        label="I agree to terms and conditions"
+        checked={agreed}
+        onChange={(e) => setAgreed(e.target.checked)}
+      />
+
+      <Button variant="primary" type="submit">
+        Submit
+      </Button>
+    </div>
+  );
+}
+```
+
+### Switch Component
+
+```jsx
+import { Switch } from '@waysnx/ui-core';
+import { useState } from 'react';
+
+function MyComponent() {
+  const [enabled, setEnabled] = useState(false);
+
+  return (
+    <Switch
+      label="Enable notifications"
+      checked={enabled}
+      onChange={(e) => setEnabled(e.target.checked)}
+    />
+  );
+}
+```
+
+### Date Picker
+
+```jsx
+import { DatePicker } from '@waysnx/ui-core';
+import { useState } from 'react';
+
+function MyComponent() {
+  const [date, setDate] = useState(null);
+
+  return (
+    <DatePicker
+      label="Select Date"
+      selected={date}
+      onChange={setDate}
+      placeholder="Choose a date"
+    />
+  );
+}
+```
+
+### Multi-Select with Select All
+
+```jsx
+import { Select } from '@waysnx/ui-core';
+import { useState } from 'react';
+
+function MyComponent() {
+  const [selected, setSelected] = useState([]);
+
+  return (
+    <Select
+      label="Select Skills"
+      value={selected}
+      onChange={(e) => {
+        const options = Array.from(e.target.selectedOptions, option => option.value);
+        setSelected(options);
+      }}
+      options={[
+        { value: 'js', label: 'JavaScript' },
+        { value: 'ts', label: 'TypeScript' },
+        { value: 'react', label: 'React' }
+      ]}
+      multiple
+      showSelectAll
+    />
+  );
+}
+```
+
+### JSON Schema to Form
+
+Convert JSON Schema to form fields automatically:
+
+```jsx
+import { schemaToFormFields, type JSONSchema } from '@waysnx/ui-core';
+import { useState } from 'react';
+
+const formSchema: JSONSchema = {
+  type: 'object',
+  properties: {
+    firstName: {
+      type: 'string',
+      title: 'First Name',
+      'x-placeholder': 'John'
+    },
+    email: {
+      type: 'string',
+      format: 'email',
+      title: 'Email Address'
+    },
+    country: {
+      type: 'string',
+      title: 'Country',
+      enum: ['United States', 'United Kingdom', 'Canada']
+    },
+    birthdate: {
+      type: 'string',
+      format: 'date',
+      title: 'Date of Birth'
+    },
+    interests: {
+      type: 'array',
+      title: 'Interests',
+      items: {
+        type: 'string',
+        enum: ['Technology', 'Sports', 'Music', 'Travel']
+      },
+      'x-component': 'checkbox-group'
+    },
+    newsletter: {
+      type: 'boolean',
+      title: 'Subscribe to newsletter',
+      'x-component': 'checkbox'
+    },
+    status: {
+      type: 'boolean',
+      title: 'Active Status'
+      // Will render as Switch by default
+    }
+  },
+  required: ['firstName', 'email']
+};
+
+function DynamicForm() {
+  const [formData, setFormData] = useState({});
+
+  const handleChange = (name: string, value: any) => {
+    setFormData(prev => ({ ...prev, [name]: value }));
+  };
+
+  const fields = schemaToFormFields(formSchema, formData, handleChange);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    console.log('Form data:', formData);
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      {fields.map(field => (
+        <div key={field.name}>
+          {field.component}
+        </div>
+      ))}
+    </form>
+  );
+}
+```
+
+## Available Components
+
+### Form Controls
+- `Input` - Text, email, password, number inputs with optional password toggle
+- `Select` - Single and multi-select dropdowns with optional select-all
+- `Checkbox` - Single checkbox or checkbox group
+- `Radio` - Radio button group
+- `Textarea` - Multi-line text input
+- `Switch` - Toggle switch
+- `Slider` - Range slider
+- `Autocomplete` - Searchable dropdown with filtering
+- `FileUpload` - File upload with drag & drop
+
+### Date & Time Components
+- `DatePicker` - Single date picker
+- `DateRangePicker` - Date range picker
+- `DateTimePicker` - Date and time picker
+- `TimePicker` - Time picker
+
+### Buttons & Navigation
+- `Button` - Button with variants (primary, secondary, destructive, outline, ghost)
+- `Link` - Styled link component
+
+### Content & Display
+- `HtmlEditor` - Rich text editor (sanitized with DOMPurify)
+- `HtmlContent` - Display HTML content (sanitized with DOMPurify)
+- `Alert` - Alert/notification component
+- `Spinner` - Loading spinner
+- `Divider` - Horizontal divider line
+
+### Layout & Structure
+- `Stack` - Vertical or horizontal stack layout
+- `Hidden` - Conditionally hide content
+- `Tree` - Tree view component
+
+### Utilities
+- `schemaToFormFields` - Convert JSON Schema to form components
+- `useDebounce` - Debounce hook for performance
+
+## Button Variants
+
+```jsx
+<Button variant="primary">Primary</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="destructive">Delete</Button>
+<Button variant="outline">Outline</Button>
+<Button variant="ghost">Ghost</Button>
+```
+
+## Theming
+
+The library uses CSS variables for easy theming. Override these in your CSS to match your app's design system.
+
+### Available CSS Variables
+
+#### Color Variables
+
+```css
+:root {
+  /* Primary Colors */
+  --wx-color-primary: #f19924;
+  --wx-color-primary-hover: #d88420;
+  --wx-color-primary-light: #fef3e6;
+  
+  /* Secondary Colors */
+  --wx-color-secondary: #6b7280;
+  --wx-color-secondary-hover: #4b5563;
+  
+  /* Status Colors */
+  --wx-color-success: #10b981;
+  --wx-color-danger: #ef4444;
+  --wx-color-warning: #f59e0b;
+  --wx-color-info: #3b82f6;
+  
+  /* Text Colors */
+  --wx-text-primary: #111827;
+  --wx-text-secondary: #6b7280;
+  --wx-text-disabled: #9ca3af;
+  
+  /* Background Colors */
+  --wx-bg-primary: #ffffff;
+  --wx-bg-secondary: #f9fafb;
+  --wx-bg-hover: #f3f4f6;
+  
+  /* Border Colors */
+  --wx-border-color: #d1d5db;
+  --wx-border-focus: #f19924;
+  
+  /* Accent Colors */
+  --wx-accent-orange: #f97316;
+  --wx-accent-orange-dark: #ea580c;
+}
+```
+
+#### Dark Mode Support
+
+```css
+.dark {
+  --wx-color-primary: #fbbf24;
+  --wx-color-primary-hover: #f59e0b;
+  
+  --wx-text-primary: #f3f4f6;
+  --wx-text-secondary: #9ca3af;
+  --wx-text-disabled: #6b7280;
+  
+  --wx-bg-primary: #111827;
+  --wx-bg-secondary: #1f2937;
+  --wx-bg-hover: #374151;
+  
+  --wx-border-color: #374151;
+  --wx-border-focus: #fbbf24;
+}
+```
+
+### Dynamic Theme Integration
+
+To integrate with your existing design system, create a theme override file:
+
+```css
+/* theme-override.css */
+:root {
+  /* Map your app's variables to library variables */
+  --wx-color-primary: var(--your-brand-color, #f19924);
+  --wx-color-secondary: var(--your-gray-600, #6b7280);
+  --wx-text-primary: var(--your-text-color, #111827);
+  --wx-bg-primary: var(--your-bg-color, #ffffff);
+  /* ... map other variables */
+}
+```
+
+Import this file after the library CSS:
+
+```javascript
+import '@waysnx/ui-core/dist/index.css';
+import './theme-override.css'; // Your overrides
+```
+
+This ensures library components automatically match your app's theme, including dark mode support.
+
+## JSON Schema Extensions
+
+The library supports custom JSON Schema extensions using the `x-` prefix:
+
+- `x-placeholder` - Placeholder text for inputs
+- `x-component` - Force specific component:
+  - `'checkbox'` - Single checkbox for boolean
+  - `'checkbox-group'` - Multiple checkboxes for array
+  - `'toggle'` or `'switch'` - Toggle switch for boolean
+  - `'button'` - Render as button
+- `x-button-type` - Button type ('submit', 'button', 'reset')
+- `x-button-variant` - Button variant ('primary', 'secondary', 'destructive', 'outline', 'ghost')
+
+### JSON Schema Type Mappings
+
+The library automatically maps JSON Schema types to components:
+
+| Schema Type | Format | Component |
+|------------|--------|-----------|
+| `string` | - | Input (text) |
+| `string` | `email` | Input (email) |
+| `string` | `password` | Input (password) with toggle |
+| `string` | `date` | DatePicker |
+| `string` | `date-time` | DateTimePicker |
+| `string` | `time` | TimePicker |
+| `string` | `binary` | FileUpload |
+| `string` | `uri` | Input (url) |
+| `string` | `textarea` | Textarea |
+| `string` | `html` | HtmlEditor |
+| `string` | `enum` | Select (single) |
+| `integer` / `number` | - | Input (number) |
+| `integer` / `number` | with min/max | Slider |
+| `boolean` | - | Switch (default) |
+| `boolean` | `x-component: 'checkbox'` | Checkbox |
+| `array` | `enum` items | Select (multi) or Checkbox group |
+
+## TypeScript Support
+
+Full TypeScript support with type definitions included:
+
+```typescript
+import type { JSONSchema, FormField } from '@waysnx/ui-core';
+```
+
+## Security
+
+This package includes built-in XSS protection:
+- HTML content is sanitized using DOMPurify
+- Safe to render user-generated content
+- Code is minified and optimized for production
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## Peer Dependencies
+
+- `react` >= 18
+- `react-dom` >= 18
+- `react-datepicker` ^8.0.0
+
+## License
+
+MIT
+
+## Repository
+
+https://github.com/waysnx/waysnx-ui-kit
+
+## Issues
+
+https://github.com/waysnx/waysnx-ui-kit/issues
+
+## Author
+
+WaysNX Technologies

package/dist/components/Alert/Alert.css

@@ -0,0 +1 @@
+.wx-alert{padding:12px 16px;border-radius:6px;font-size:14px}.wx-alert-info{background:#eff6ff;color:#1d4ed8}.wx-alert-success{background:#ecfdf5;color:#047857}.wx-alert-warning{background:#fffbeb;color:#b45309}.wx-alert-error{background:#fef2f2;color:#b91c1c}

package/dist/components/Autocomplete/Autocomplete.css

@@ -0,0 +1,76 @@
+.wx-autocomplete-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  position: relative;
+}
+
+.wx-autocomplete-label {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.wx-autocomplete-input {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  outline: none;
+  height: 40px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+
+.wx-autocomplete-input:focus {
+  border-color: var(--wx-color-primary, #f19924);
+}
+
+.wx-autocomplete-input-error {
+  border-color: var(--wx-color-error, #dc2626);
+}
+
+.wx-autocomplete-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin: 4px 0 0 0;
+  padding: 0;
+  max-width: 350px;
+  max-height: 240px;
+  overflow-y: auto;
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+}
+
+.wx-autocomplete-option {
+  padding: 10px 12px;
+  cursor: pointer;
+  display: block;
+}
+
+.wx-autocomplete-option:hover,
+.wx-autocomplete-option-highlighted {
+  background: #f2f2f2;
+}
+
+.wx-autocomplete-no-options {
+  padding: 10px 12px;
+  color: #6b6b6d;
+  font-size: 14px;
+  text-align: center;
+}
+
+.wx-autocomplete-hint {
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.wx-autocomplete-error-text {
+  font-size: 12px;
+  color: #dc2626;
+}
+

package/dist/components/Button/Button.css

@@ -0,0 +1,12 @@
+.wx-button{font-weight:500;border-radius:6px;padding:10px 16px;cursor:pointer;transition:background 0.15s ease,color 0.15s ease;outline:none}
+.wx-button--primary{background:var(--wx-color-primary,#f19924);color:#fff;border:none}
+.wx-button--primary:hover{background:var(--wx-color-primary-hover,#e08916)}
+.wx-button--secondary{background:transparent;color:var(--wx-color-primary,#f19924);border:1px solid var(--wx-color-primary,#f19924)}
+.wx-button--secondary:hover{background:var(--wx-color-primary,#f19924);color:#fff}
+.wx-button--destructive{background:var(--wx-color-destructive,#dc2626);color:#fff;border:none}
+.wx-button--destructive:hover{background:var(--wx-color-destructive-hover,#b91c1c)}
+.wx-button--outline{background:transparent;color:var(--wx-color-text,#333);border:1px solid var(--wx-color-border,#ddd)}
+.wx-button--outline:hover{background:var(--wx-color-bg-subtle,#f5f5f5)}
+.wx-button--ghost{background:transparent;color:var(--wx-color-text,#333);border:none}
+.wx-button--ghost:hover{background:var(--wx-color-bg-subtle,#f5f5f5)}
+.wx-button:disabled{opacity:0.6;cursor:not-allowed}

package/dist/components/Checkbox/Checkbox.css

@@ -0,0 +1 @@
+.wx-checkbox-wrapper{display:flex;gap:8px;align-items:center}.wx-checkbox{width:16px;height:16px}

package/dist/components/DatePicker/DatePicker.css

@@ -0,0 +1,66 @@
+.wx-datepicker-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.wx-datepicker-label {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.wx-datepicker-input-wrapper {
+  position: relative;
+  display: block;
+}
+
+.wx-datepicker-react-wrapper {
+  display: block;
+  width: 100%;
+}
+
+.wx-datepicker-input {
+  width: 100%;
+  padding: 10px 36px 10px 10px !important;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  outline: none;
+  height: 40px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+
+.wx-datepicker-icon {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  width: 18px;
+  height: 18px;
+  color: #6b7280;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.wx-datepicker-input:focus {
+  border-color: var(--wx-color-primary, #f19924);
+}
+
+.wx-datepicker-input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.wx-datepicker-input-error {
+  border-color: var(--wx-color-error, #dc2626);
+}
+
+.wx-datepicker-hint {
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.wx-datepicker-error-text {
+  font-size: 12px;
+  color: #dc2626;
+}
+

package/dist/components/DateRangePicker/DateRangePicker.css

@@ -0,0 +1,68 @@
+.wx-daterangepicker-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.wx-daterangepicker-label {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.wx-daterangepicker-input-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+.wx-daterangepicker-react-wrapper {
+  display: block;
+  width: 100%;
+}
+
+.wx-daterangepicker-input {
+  width: 100%;
+  padding: 10px 36px 10px 10px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  outline: none;
+  height: 40px;
+  box-sizing: border-box;
+  font-size: 14px;
+}
+
+.wx-daterangepicker-icon {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 18px;
+  height: 18px;
+  color: #6b7280;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.wx-daterangepicker-input:focus {
+  border-color: var(--wx-color-primary, #f19924);
+}
+
+.wx-daterangepicker-input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.wx-daterangepicker-input-error {
+  border-color: var(--wx-color-error, #dc2626);
+}
+
+.wx-daterangepicker-hint {
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.wx-daterangepicker-error-text {
+  font-size: 12px;
+  color: #dc2626;
+}
+