diff --git a/readme.md b/readme.md index 66d3452..d20f0fe 100644 --- a/readme.md +++ b/readme.md @@ -12,14 +12,15 @@ npm install @design.estate/dees-catalog | Category | Components | |----------|------------| -| Core UI | `DeesButton`, `DeesBadge`, `DeesChips`, `DeesIcon`, `DeesLabel`, `DeesSpinner`, `DeesToast` | -| Forms | `DeesForm`, `DeesInputText`, `DeesInputCheckbox`, `DeesInputDropdown`, `DeesInputRadio`, `DeesInputFileupload`, `DeesInputIban`, `DeesInputPhone`, `DeesInputQuantitySelector`, `DeesInputMultitoggle`, `DeesFormSubmit` | -| Layout | `DeesAppuiBase`, `DeesAppuiMainmenu`, `DeesAppuiMainselector`, `DeesAppuiMaincontent`, `DeesAppuiAppbar`, `DeesMobileNavigation` | -| Data Display | `DeesTable`, `DeesDataviewCodebox`, `DeesDataviewStatusobject`, `DeesPdf`, `DeesStatsGrid` | +| Core UI | `DeesButton`, `DeesButtonExit`, `DeesButtonGroup`, `DeesBadge`, `DeesChips`, `DeesHeading`, `DeesHint`, `DeesIcon`, `DeesLabel`, `DeesPanel`, `DeesSearchbar`, `DeesSpinner`, `DeesToast`, `DeesWindowcontrols` | +| Forms | `DeesForm`, `DeesInputText`, `DeesInputCheckbox`, `DeesInputDropdown`, `DeesInputRadiogroup`, `DeesInputFileupload`, `DeesInputIban`, `DeesInputPhone`, `DeesInputQuantitySelector`, `DeesInputMultitoggle`, `DeesInputTags`, `DeesInputTypelist`, `DeesInputRichtext`, `DeesInputWysiwyg`, `DeesFormSubmit` | +| Layout | `DeesAppuiBase`, `DeesAppuiMainmenu`, `DeesAppuiMainselector`, `DeesAppuiMaincontent`, `DeesAppuiAppbar`, `DeesAppuiActivitylog`, `DeesAppuiProfiledropdown`, `DeesAppuiTabs`, `DeesAppuiView`, `DeesMobileNavigation` | +| Data Display | `DeesTable`, `DeesDataviewCodebox`, `DeesDataviewStatusobject`, `DeesPdf`, `DeesStatsGrid`, `DeesPagination` | | Visualization | `DeesChartArea`, `DeesChartLog` | | Dialogs & Overlays | `DeesModal`, `DeesContextmenu`, `DeesSpeechbubble`, `DeesWindowlayer` | -| Navigation | `DeesStepper`, `DeesProgressbar` | -| Development | `DeesEditor`, `DeesEditorMarkdown`, `DeesTerminal`, `DeesUpdater` | +| Navigation | `DeesStepper`, `DeesProgressbar`, `DeesMobileNavigation` | +| Development | `DeesEditor`, `DeesEditorMarkdown`, `DeesEditorMarkdownoutlet`, `DeesTerminal`, `DeesUpdater` | +| Auth & Utilities | `DeesSimpleAppdash`, `DeesSimpleLogin` | ## Detailed Component Documentation @@ -149,6 +150,93 @@ Key Features: - Theme-aware styling - Programmatic control +#### `DeesButtonExit` +Exit/close button component with consistent styling. + +```typescript + +``` + +#### `DeesButtonGroup` +Container for grouping related buttons together. + +```typescript + +``` + +#### `DeesHeading` +Consistent heading component with level and styling options. + +```typescript + +``` + +#### `DeesHint` +Hint/tooltip component for providing contextual help. + +```typescript + +``` + +#### `DeesPanel` +Container component for grouping related content with optional title and actions. + +```typescript + + + +``` + +#### `DeesSearchbar` +Search input component with suggestions and search handling. + +```typescript + +``` + +#### `DeesWindowcontrols` +Window control buttons (minimize, maximize, close) for desktop-like applications. + +```typescript + +``` + ### Form Components #### `DeesForm` @@ -207,22 +295,6 @@ Dropdown selection component with search and filtering capabilities. > ``` -#### `DeesInputRadio` -Radio button group for single-choice selections. - -```typescript - -``` - #### `DeesInputFileupload` File upload component with drag-and-drop support. @@ -293,6 +365,121 @@ Multi-state toggle button group. > ``` +#### `DeesInputRadiogroup` +Radio button group for single-choice selections with internal state management. + +```typescript + + +// With custom option objects + +``` + +#### `DeesInputTags` +Tag input component for managing lists of tags with auto-complete and validation. + +```typescript + +``` + +Key Features: +- Add tags by pressing Enter or typing comma/semicolon +- Remove tags with click or backspace +- Auto-complete suggestions with keyboard navigation +- Maximum tag limit support +- Full theme support +- Form validation integration + +#### `DeesInputTypelist` +Dynamic list input for managing arrays of typed values. + +```typescript + +``` + +#### `DeesInputRichtext` +Rich text editor with formatting toolbar powered by TipTap. + +```typescript + +``` + +Key Features: +- Full formatting toolbar (bold, italic, underline, strike, etc.) +- Heading levels (H1-H6) +- Lists (bullet, ordered) +- Links with URL editing +- Code blocks and inline code +- Blockquotes +- Horizontal rules +- Undo/redo support +- Word and character count +- HTML output + +#### `DeesInputWysiwyg` +Advanced block-based editor with slash commands and rich content blocks. + +```typescript + +``` + +Key Features: +- Slash commands for quick formatting +- Block-based editing (paragraphs, headings, lists, etc.) +- Drag and drop block reordering +- Multiple output formats +- Keyboard shortcuts +- Collaborative editing ready +- Extensible block types + #### `DeesFormSubmit` Submit button component specifically designed for `DeesForm`. @@ -622,6 +809,91 @@ Best Practices: - Test with screen readers - Maintain focus management +#### `DeesAppuiActivitylog` +Activity log component for displaying system events and user actions. + +```typescript + +``` + +#### `DeesAppuiProfiledropdown` +User profile dropdown component with status and menu options. + +```typescript + {} }, + { name: 'Settings', iconName: 'settings', action: async () => {} }, + { divider: true }, + { name: 'Logout', iconName: 'logOut', action: async () => {} } + ]} + @status-change=${handleStatusChange} +> +``` + +#### `DeesAppuiTabs` +Tab navigation component for organizing content sections. + +```typescript +Overview content` + }, + { + key: 'details', + label: 'Details', + icon: 'info', + content: html`
Details content
` + } + ]} + selectedTab="overview" + @tab-change=${handleTabChange} +>
+``` + +#### `DeesAppuiView` +View container component for consistent page layouts. + +```typescript + + + +``` + #### `DeesMobileNavigation` Responsive navigation component for mobile devices. @@ -982,6 +1254,27 @@ setInterval(() => { }, 3000); ``` +#### `DeesPagination` +Pagination component for navigating through large datasets. + +```typescript + +``` + +Key Features: +- Page number navigation +- Previous/next buttons +- Jump to first/last page +- Configurable items per page +- Responsive design +- Keyboard navigation support + ### Visualization Components #### `DeesChartArea` @@ -1306,52 +1599,6 @@ Key Features: - Animation support - Accessibility features -#### `DeesMobileNavigation` -Mobile-optimized navigation component with touch support. - -```typescript -// Programmatic usage -DeesMobilenavigation.createAndShow([ - { - name: 'Home', - action: async (nav) => { - // Handle navigation - return null; - } - }, - { - name: 'Settings', - action: async (nav) => { - // Handle navigation - return null; - } - } -]); - -// Component usage - handleNavigation('profile') - }, - { - name: 'Settings', - action: (nav) => handleNavigation('settings') - } - ]} -> -``` - -Key Features: -- Touch-friendly interface -- Slide-in animation -- Backdrop overlay -- Single instance management -- Custom menu items -- Responsive design - Best Practices: 1. Stepper Implementation @@ -1368,13 +1615,6 @@ Best Practices: - Performance monitoring - Error state handling -3. Mobile Navigation - - Touch-optimized targets - - Clear visual hierarchy - - Smooth animations - - Gesture support - - Responsive behavior - Common Use Cases: 1. Stepper @@ -1391,13 +1631,6 @@ Common Use Cases: - Task completion - Step progression -3. Mobile Navigation - - Responsive menus - - App navigation - - Settings access - - User actions - - Context switching - Accessibility Considerations: - Keyboard navigation support - ARIA labels and roles @@ -1461,6 +1694,26 @@ Key Features: - Spellcheck integration - Auto-save functionality +#### `DeesEditorMarkdownoutlet` +Markdown preview component for rendering markdown content. + +```typescript + +``` + +Key Features: +- Safe markdown rendering +- Multiple themes +- Plugin support (mermaid diagrams, syntax highlighting) +- XSS protection +- Custom CSS injection +- Responsive images + #### `DeesTerminal` Terminal emulator component for command-line interface. @@ -1606,6 +1859,60 @@ Accessibility Features: - Focus management - ARIA attributes +### Auth & Utilities Components + +#### `DeesSimpleAppdash` +Simple application dashboard component for quick prototyping. + +```typescript + + + +``` + +Key Features: +- Quick setup dashboard layout +- Built-in navigation +- User profile section +- Responsive design +- Minimal configuration + +#### `DeesSimpleLogin` +Simple login form component with validation and customization. + +```typescript + +``` + +Key Features: +- Customizable fields +- Built-in validation +- Remember me option +- Forgot password link +- Custom branding +- Responsive layout +- Loading states + ## License and Legal Information This repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the license file within this repository.