@qoretechnologies/reqore 0.55.13 → 0.56.1

package/docs/docs/guides/getting-started.mdx

@@ -0,0 +1,164 @@
+---
+sidebar_position: 1
+---
+
+# Getting Started
+
+## Installation
+
+Install Reqore using your preferred package manager:
+
+```bash
+# Using npm
+npm install @qoretechnologies/reqore
+
+# Using yarn
+yarn add @qoretechnologies/reqore
+
+# Using pnpm
+pnpm add @qoretechnologies/reqore
+```
+
+## Peer Dependencies
+
+Reqore requires React 18.2.0 or higher:
+
+```bash
+npm install react@^18.2.0 react-dom@^18.2.0
+```
+
+## Basic Setup
+
+Wrap your application with `ReqoreUIProvider` to enable Reqore components:
+
+```tsx
+import React from 'react';
+import { ReqoreUIProvider, ReqoreButton } from '@qoretechnologies/reqore';
+
+export const App = () => (
+  <ReqoreUIProvider>
+    <ReqoreButton intent='success'>Hello Reqore</ReqoreButton>
+  </ReqoreUIProvider>
+);
+```
+
+## Provider Options
+
+The `ReqoreUIProvider` accepts several configuration options:
+
+```tsx
+import { ReqoreUIProvider } from '@qoretechnologies/reqore';
+
+function App() {
+  return (
+    <ReqoreUIProvider
+      theme={{
+        main: '#3b82f6',
+        text: {
+          color: '#ffffff',
+        },
+      }}
+      options={{
+        animations: {
+          buttons: true,
+          dialogs: true,
+        },
+        uiScale: 1.0,
+      }}
+    >
+      {/* Your app */}
+    </ReqoreUIProvider>
+  );
+}
+```
+
+### Provider Props
+
+- **theme**: Custom theme object (see [Theming](./theming) for details)
+- **options**: Configuration options
+  - `animations`: Enable/disable animations for different component types
+  - `uiScale`: Scale the entire UI (useful for accessibility)
+  - `customPortalId`: Custom portal element ID for modals and popovers
+
+## Using Components
+
+### Basic Button Example
+
+```tsx
+import { ReqoreButton } from '@qoretechnologies/reqore';
+
+function MyComponent() {
+  return (
+    <ReqoreButton intent='success' icon='CheckLine' onClick={() => console.log('Clicked!')}>
+      Click Me
+    </ReqoreButton>
+  );
+}
+```
+
+### Form Components
+
+```tsx
+import {
+  ReqoreInput,
+  ReqoreTextarea,
+  ReqoreCheckbox,
+  ReqoreControlGroup,
+} from '@qoretechnologies/reqore';
+
+function MyForm() {
+  return (
+    <ReqoreControlGroup vertical>
+      <ReqoreInput label='Name' placeholder='Enter your name' />
+      <ReqoreTextarea label='Description' placeholder='Enter description' />
+      <ReqoreCheckbox label='I agree to terms' />
+    </ReqoreControlGroup>
+  );
+}
+```
+
+### Layout Components
+
+```tsx
+import { ReqorePanel, ReqoreColumns, ReqoreColumn } from '@qoretechnologies/reqore';
+
+function MyLayout() {
+  return (
+    <ReqorePanel label='Dashboard'>
+      <ReqoreColumns>
+        <ReqoreColumn>Left column content</ReqoreColumn>
+        <ReqoreColumn>Right column content</ReqoreColumn>
+      </ReqoreColumns>
+    </ReqorePanel>
+  );
+}
+```
+
+## TypeScript Support
+
+Reqore is written in TypeScript and provides full type definitions:
+
+```tsx
+import { IReqoreButtonProps, IReqoreTheme } from '@qoretechnologies/reqore';
+
+const buttonProps: IReqoreButtonProps = {
+  intent: 'success',
+  icon: 'CheckLine',
+  disabled: false,
+};
+
+const customTheme: IReqoreTheme = {
+  main: '#3b82f6',
+  // ... other theme properties
+};
+```
+
+## Next Steps
+
+- Learn how to customize the appearance with [Theming](./theming)
+- Explore individual components:
+  - [Button](../components/button)
+  - [Panel](../components/panel)
+  - [Input](../components/input)
+  - [Table](../components/table)
+- Check out [Effects](./effects) for advanced visual styling

package/docs/docs/guides/theming.mdx

@@ -0,0 +1,252 @@
+---
+sidebar_position: 2
+---
+
+# Theming
+
+Reqore provides a powerful theming system that allows you to customize the appearance of all components from a single place.
+
+## Basic Theme Customization
+
+The simplest way to theme Reqore is by passing a theme object to the `ReqoreUIProvider`:
+
+```tsx
+import { ReqoreUIProvider, ReqoreButton } from '@qoretechnologies/reqore';
+
+const theme = {
+  main: '#3b82f6', // Primary color
+  text: {
+    color: '#ffffff', // Text color
+  },
+};
+
+function App() {
+  return (
+    <ReqoreUIProvider theme={theme}>
+      <ReqoreButton>Themed Button</ReqoreButton>
+    </ReqoreUIProvider>
+  );
+}
+```
+
+## Theme Structure
+
+### Main Colors
+
+```tsx
+const theme = {
+  main: '#3b82f6', // Primary brand color
+  originalMain: '#1e40af', // Fallback main color
+  sidebar: {
+    main: '#1e293b', // Sidebar background
+  },
+  popover: {
+    main: '#1e293b', // Popover background
+  },
+};
+```
+
+### Intent Colors
+
+Intent colors provide semantic meaning to components:
+
+```tsx
+const theme = {
+  intents: {
+    info: '#3b82f6', // Information
+    success: '#10b981', // Success states
+    warning: '#f59e0b', // Warnings
+    danger: '#ef4444', // Errors and dangerous actions
+    pending: '#8b5cf6', // Pending states
+    muted: '#6b7280', // Muted/disabled states
+  },
+};
+```
+
+### Text Styling
+
+```tsx
+const theme = {
+  text: {
+    color: '#f9fafb', // Default text color
+    dim: '#9ca3af', // Dimmed text
+  },
+};
+```
+
+## Using Intents
+
+Most components support the `intent` prop for semantic coloring:
+
+```tsx
+import { ReqoreButton, ReqoreControlGroup } from '@qoretechnologies/reqore';
+
+function IntentExample() {
+  return (
+    <ReqoreControlGroup>
+      <ReqoreButton intent='info'>Info</ReqoreButton>
+      <ReqoreButton intent='success'>Success</ReqoreButton>
+      <ReqoreButton intent='warning'>Warning</ReqoreButton>
+      <ReqoreButton intent='danger'>Danger</ReqoreButton>
+    </ReqoreControlGroup>
+  );
+}
+```
+
+## Component-Specific Theming
+
+Some components support their own theme customization:
+
+```tsx
+const theme = {
+  main: '#3b82f6',
+  buttons: {
+    effect: {
+      gradient: {
+        colors: 'info:darken:2:1',
+        animate: 'active',
+      },
+    },
+  },
+};
+```
+
+## Custom Themes Per Component
+
+Components can override the global theme using the `customTheme` prop:
+
+```tsx
+import { ReqoreButton } from '@qoretechnologies/reqore';
+
+function CustomThemedButton() {
+  return (
+    <ReqoreButton
+      customTheme={{
+        main: '#ec4899',
+        text: {
+          color: '#ffffff',
+        },
+      }}
+    >
+      Custom Theme
+    </ReqoreButton>
+  );
+}
+```
+
+## Dark Mode
+
+Reqore's default theme works well in dark mode. You can create your own dark theme:
+
+```tsx
+const darkTheme = {
+  main: '#1e40af',
+  text: {
+    color: '#f9fafb',
+    dim: '#6b7280',
+  },
+  intents: {
+    info: '#60a5fa',
+    success: '#34d399',
+    warning: '#fbbf24',
+    danger: '#f87171',
+  },
+};
+```
+
+## Effects and Gradients
+
+Components support advanced visual effects:
+
+```tsx
+import { ReqoreButton } from '@qoretechnologies/reqore';
+
+function EffectButton() {
+  return (
+    <ReqoreButton
+      effect={{
+        gradient: {
+          colors: {
+            0: '#3b82f6',
+            100: '#8b5cf6',
+          },
+          animate: 'hover',
+        },
+        spaced: 2,
+        uppercase: true,
+        weight: 'bold',
+      }}
+    >
+      Gradient Button
+    </ReqoreButton>
+  );
+}
+```
+
+### Effect Properties
+
+- **gradient**: Define color gradients
+  - `colors`: Color stops (0-100)
+  - `type`: 'linear' or 'radial'
+  - `direction`: Gradient direction
+  - `animate`: Animation trigger ('hover', 'active', 'always')
+- **spaced**: Letter spacing
+- **uppercase**: Transform text to uppercase
+- **weight**: Font weight
+- **textSize**: Custom text size
+- **glow**: Add glow effects
+
+## Theme Helper Functions
+
+Reqore provides helper functions for working with colors:
+
+```tsx
+import { changeLightness, getReadableColor } from '@qoretechnologies/reqore';
+
+// Lighten or darken a color
+const lighter = changeLightness('#3b82f6', 0.2);
+const darker = changeLightness('#3b82f6', -0.2);
+
+// Get readable text color for a background
+const textColor = getReadableColor(theme, '#3b82f6');
+```
+
+## Best Practices
+
+1. **Consistency**: Use intent colors consistently across your application
+2. **Contrast**: Ensure sufficient contrast for accessibility
+3. **Test**: Test your theme in both light and dark environments
+4. **Gradual**: Start with main colors and add intent colors as needed
+5. **Component Props**: Use `customTheme` sparingly for one-off customizations
+
+## Complete Theme Example
+
+```tsx
+import { ReqoreUIProvider, IReqoreTheme } from '@qoretechnologies/reqore';
+
+const myTheme: IReqoreTheme = {
+  main: '#3b82f6',
+  text: {
+    color: '#f9fafb',
+    dim: '#9ca3af',
+  },
+  intents: {
+    info: '#3b82f6',
+    success: '#10b981',
+    warning: '#f59e0b',
+    danger: '#ef4444',
+    pending: '#8b5cf6',
+    muted: '#6b7280',
+  },
+  sidebar: {
+    main: '#1e293b',
+  },
+  popover: {
+    main: '#1e293b',
+  },
+};
+
+function App() {
+  return <ReqoreUIProvider theme={myTheme}>{/* Your app */}</ReqoreUIProvider>;
+}
+```

package/docs/docs/intro.md

@@ -0,0 +1,98 @@
+---
+sidebar_position: 1
+---
+
+# Introduction to Reqore
+
+Reqore is a comprehensive, highly customizable UI library for React applications. Built with TypeScript and styled-components, it provides a complete set of components for building modern, theme-able user interfaces.
+
+## Key Features
+
+- 🎨 **Fully Theme-able**: Deep theming system with support for custom colors, effects, and gradients
+- 🧩 **Modular Components**: 40+ production-ready components for every use case
+- ♿ **Accessible**: Built with accessibility in mind
+- 📱 **Responsive**: Components work seamlessly across all device sizes
+- 🎭 **Intent System**: Built-in semantic color system (success, warning, danger, info, etc.)
+- ✨ **Visual Effects**: Advanced gradient effects, animations, and styling options
+- 📦 **TypeScript First**: Full TypeScript support with comprehensive type definitions
+- 🔧 **Customizable**: Extensive props for fine-tuning component behavior and appearance
+
+## Component Categories
+
+### Layout & Structure
+
+- **Panels**: Container components with headers, footers, and collapsible sections
+- **Columns**: Flexible column layouts
+- **ControlGroup**: Group related controls with automatic spacing
+- **Tabs**: Tabbed interfaces with customizable styling
+
+### Forms & Inputs
+
+- **Input**: Text inputs with validation and icons
+- **Textarea**: Multi-line text inputs
+- **Checkbox**: Single and grouped checkboxes with switch variants
+- **RadioGroup**: Radio button groups
+- **Dropdown**: Customizable dropdown menus
+- **MultiSelect**: Multiple selection with tags
+- **DatePicker**: Date and time selection
+- **Slider**: Range sliders
+
+### Data Display
+
+- **Table**: Feature-rich tables with sorting, filtering, and pagination
+- **Collection**: Display collections of items in various layouts
+- **Tree**: Hierarchical data display
+- **KeyValueTable**: Display key-value pairs
+
+### Navigation
+
+- **Menu**: Vertical navigation menus
+- **Navbar**: Top navigation bars
+- **Breadcrumbs**: Breadcrumb navigation
+- **Pagination**: Page navigation controls
+
+### Feedback & Overlays
+
+- **Modal**: Dialog boxes and popups
+- **Drawer**: Side panel drawers
+- **Popover**: Contextual popovers and tooltips
+- **Message**: Alert and notification messages
+- **Notifications**: Toast notifications system
+
+### Content & Typography
+
+- **Headings**: H1-H6 heading components
+- **Paragraph**: Styled paragraph text
+- **Span**: Inline text with effects
+- **Tag**: Label tags and badges
+
+## Quick Example
+
+```tsx
+import {
+  ReqoreUIProvider,
+  ReqoreButton,
+  ReqorePanel,
+  ReqoreControlGroup,
+} from '@qoretechnologies/reqore';
+
+function App() {
+  return (
+    <ReqoreUIProvider>
+      <ReqorePanel label='Welcome to Reqore'>
+        <ReqoreControlGroup>
+          <ReqoreButton intent='success'>Success</ReqoreButton>
+          <ReqoreButton intent='warning'>Warning</ReqoreButton>
+          <ReqoreButton intent='danger'>Danger</ReqoreButton>
+        </ReqoreControlGroup>
+      </ReqorePanel>
+    </ReqoreUIProvider>
+  );
+}
+```
+
+## Next Steps
+
+- Follow the [Getting Started](./guides/getting-started) guide to install and set up Reqore
+- Learn about [Theming](./guides/theming) to customize the look and feel
+- Explore individual [Components](./components/button) to see what's available

package/docs/sidebars.js

@@ -0,0 +1,23 @@
+/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
+const sidebars = {
+  docs: [
+    'docs/intro',
+    {
+      type: 'category',
+      label: 'Guides',
+      items: ['docs/guides/getting-started', 'docs/guides/theming', 'docs/guides/effects'],
+    },
+    {
+      type: 'category',
+      label: 'Components',
+      items: [
+        'docs/components/button',
+        'docs/components/panel',
+        'docs/components/input',
+        'docs/components/table',
+      ],
+    },
+  ],
+};
+
+module.exports = sidebars;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.55.13",
+  "version": "0.56.1",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -16,7 +16,10 @@
     "lint": "yarn run eslint ./src/",
     "storybook": "storybook dev -p 6007",
     "init-storybook": "yarn test:ci && yarn storybook",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "docs:dev": "docusaurus start",
+    "docs:build": "docusaurus build",
+    "docs:api": "typedoc --options typedoc.json"
   },
   "repository": {
     "type": "git",
@@ -89,7 +92,12 @@
     "ts-jest": "^29.0.5",
     "ts-node": "^9.1.1",
     "typescript": "^4.7.3",
-    "viteshot": "^0.3.1"
+    "viteshot": "^0.3.1",
+    "@docusaurus/core": "^3.6.0",
+    "@docusaurus/preset-classic": "^3.6.0",
+    "docusaurus-plugin-typedoc": "^1.0.4",
+    "typedoc": "^0.26.6",
+    "typedoc-plugin-markdown": "^4.1.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",