@scalably/ui 0.3.0 → 0.4.1

package/README.md

@@ -11,9 +11,12 @@ A modern, accessible, and fully isolated React component library built with Type
 - **TypeScript First**: Full type safety with comprehensive prop interfaces
 - **Accessible**: Built with accessibility best practices and WCAG compliance
 - **Modern**: Uses latest React patterns and modern build tools (tsup, Vite, Storybook)
+- **Rich Text Editing**: TipTap-based editor with character counting, media embeds, and formatting toolbar
 - **Customizable**: Flexible variant system with class-variance-authority
 - **Comprehensive**: 20+ production-ready components with full documentation
 - **Production Ready**: Complete build pipeline with CommonJS and ES modules
+- **Icons & Assets**: First-class icon set, avatar placeholders, and logo assets
+- **Utilities & Helpers**: Shared date helpers, form helpers, and utility functions (`cn`, `debounce`, `throttle`, `scopeClass`)
 
 ## 📦 Installation
 
@@ -100,26 +103,33 @@ import type { SVGProps } from "react";
 ```
 
 ### Helper Functions
-- Date helpers: `addMonths`, `clampDate`, `daysGrid`, `endOfMonth`, `formatDateLocalized`, `isSameDay`, `monthsForLocale`, `startOfMonth`, `toDateKey`, `weekdaysForLocale`
-- Form helpers: `fieldErrorToProps`, `zodErrorsToSummary` and `type FieldErrorLike`
+- **Date helpers**: `addMonths`, `clampDate`, `daysGrid`, `endOfMonth`, `formatDateLocalized`, `isSameDay`, `monthsForLocale`, `startOfMonth`, `toDateKey`, `weekdaysForLocale`
+- **Form helpers**: `fieldErrorToProps`, `zodErrorsToSummary` and `type FieldErrorLike`
+- **Utilities**: `cn` (Tailwind-aware className helper), `debounce`, `throttle`, `scopeClass` for safely building `sui-*` class strings
 
 ### Example Usage
 
 ```tsx
-import { 
-  Button, 
-  Input, 
-  Select, 
+import {
+  AuthPrompt,
+  BackToTop,
+  Button,
   CheckboxGroup,
   DatePicker,
+  FileUpload,
+  Input,
+  Pagination,
+  RichTextEditor,
+  Select,
   Toast,
-  Pagination 
-} from '@scalably/ui'
+  ToastContainer,
+  ViewToggle,
+} from '@scalably/ui';
 
 // Button with variants
-<Button variant="destructive">Delete</Button>
-<Button variant="outline">Cancel</Button>
-<Button loading>Loading...</Button>
+<Button variant="destructive">Delete</Button>;
+<Button variant="outline">Cancel</Button>;
+<Button loading>Loading...</Button>;
 
 // Input with validation
 <Input
@@ -127,23 +137,61 @@ import {
   type="email"
   placeholder="Enter your email"
   error="Please enter a valid email"
-/>
+/>;
 
 // Date picker
 <DatePicker
   mode="single"
   placeholder="Select a date"
   onChange={(date) => console.log(date)}
-/>
-
-// Toast notifications
-<Toast
-  status="success"
-  title="Success!"
-  description="Your changes have been saved."
-/>
+/>;
+
+// Toast notifications (declarative)
+<ToastContainer>
+  <Toast
+    status="success"
+    title="Success!"
+    description="Your changes have been saved."
+  />
+</ToastContainer>;
+
+// Rich text editor
+<RichTextEditor
+  value="<p>Start writing...</p>"
+  onChange={(value) => console.log(value)}
+  maxCharacters={5000}
+/>;
+
+// Marketing-style auth prompt card
+<AuthPrompt
+  title="Welcome back"
+  description="Log in to manage your campaigns."
+  primaryActionLabel="Log in"
+  onPrimaryAction={() => console.log('login')}
+/>;
+
+// Toggle between list and grid views
+<ViewToggle view="list" onViewChange={(v) => console.log(v)} />;
+
+// Scroll-to-top helper
+<BackToTop />;
 ```
 
+## 🧩 Components & APIs Overview
+
+This library exposes a set of composable, production-ready primitives. The full list of exports is available in `src/index.ts`, but the main groups are:
+
+- **Form primitives**: `Form`, `FormField`, `FormErrorSummary`, `Input`, `SearchInput`, `QuantityInput`, `CheckBox`, `CheckBoxGroup`, `Radio`, `RadioGroup`, `Select`, `Switch`, `FileUpload`, `DateInput`, `DatePicker`, `TimePicker`
+- **Feedback & status**: `StatusBadge`, `Toast`, `ToastContainer`, `Skeleton`, `SkeletonText`, `Countdown`
+- **Layout & navigation**: `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`, `Pagination`, `BackToTop`, `ViewToggle`, `Divider`
+- **Content & rich text**: `RichTextEditor`, `RichTextViewer`, `Tooltip`, `AuthPrompt`, `LoadingScreen`, `WelcomeBackground`
+- **Media & brand**: `AvatarPlaceholder`, `Logo`, `logoAssets`, `defaultAssets`, `welcomeAssets` (all inline React SVGs—no static paths required)
+- **Icons**: All icons from `@/icons` and `@/icons/company` are re-exported, e.g. `SearchIcon`, `CalendarIcon`, `SuccessIcon`, `ErrorIcon`, `DiscordIcon`, `FacebookIcon`, `XIcon`, `YoutubeIcon`, and more.
+
+## 🖼️ Assets
+
+All library assets are inline React SVG components (welcome background, logos, avatar placeholders). You can use them directly via the exported asset maps (`welcomeAssets`, `logoAssets`, `defaultAssets`) or override props (size, className, aria-label). If you prefer external URLs (e.g., CDN), pass your own `backgroundImage`, `ellipsesData`, or `linesSrc` to `WelcomeBackground`.
+
 ## 🎨 Styling
 
 ### Style Isolation
@@ -223,6 +271,8 @@ Visit our Storybook documentation for:
 - Accessibility testing with axe-core
 - Design tokens and theming
 
+You can access the latest published Storybook at: `https://scalably.com/dev/storybook`.
+
 ## 🎨 Design System
 
 ### Colors
@@ -244,6 +294,10 @@ Visit our Storybook documentation for:
 
 ## 🔧 Configuration
 
+### Fonts
+
+The library uses the **Poppins** font family (with **Inter** and system fonts as fallbacks) and loads Poppins via Google Fonts from within the bundled CSS. In most setups you do **not** need to add additional font imports, but if your build pipeline blocks remote `@import` rules, you can alternatively include Poppins yourself (e.g., via Google Fonts or `@fontsource/poppins`) to ensure consistent typography.
+
 ### Tailwind Config
 
 The library uses a custom Tailwind configuration with:
@@ -327,6 +381,8 @@ The library includes comprehensive testing setup:
 - `date-fns` - Date manipulation utilities
 - `clsx` - Conditional class names
 - `tailwind-merge` - Tailwind class merging
+- `@tiptap/react` & `@tiptap/starter-kit` - Rich text editor foundation
+- `@tiptap/extension-*` - Rich text extensions (character count, image, alignment, placeholder, YouTube, etc.)
 
 ---