goobs-frontend 0.9.35 → 0.122.0

package/README.md

@@ -1,6 +1,6 @@
 # goobs-frontend
 
-goobs-frontend, is a React-based UI library built on Material-UI.
+goobs-frontend is a comprehensive React-based UI component library featuring a custom design system with 100+ components, built with TypeScript and modern React patterns.
 
 The NPM repo is available here - https://www.npmjs.com/package/goobs-frontend
 
@@ -46,343 +46,144 @@ export default nextConfig
 
 After this is done, you can import components from goobs-frontend into your project.
 
-## Components
-
-Below is a high-level overview of all components now available in goobs-frontend. For full usage instructions, code snippets, and best practices, see our Storybook.
-
-### Accordion
-
-Description: A collapsible container for toggling expanded/collapsed content.
-
-Features: Built on Material-UI’s Accordion.
-
-Combines Accordion, AccordionSummary, and AccordionDetails for a complete layout.
-
-### Button
-
-Description: A Material-UI Button wrapper with advanced customization—supporting icons, text alignment, and coloring.
-
-Features: Flexible icon positioning (left, right, above).
-
-Configurable background color, text color, dimensions, etc.
-
-### Card
-
-Description: A versatile container with multiple variants (inventory, pricing, product, tasks, etc.).
-
-Features: Displays images, stepper integration, and optional breadcrumbs.
-
-Ideal for product listings, tasks, or advanced pricing scenarios.
-
-### CodeCopy
-
-Description: Renders syntax-highlighted code blocks and offers a single-click “Copy to clipboard” button.
-
-Features: Uses highlight.js for syntax highlighting.
-
-Great for docs, tutorials, or developer portals.
-
-### ConfirmationCodeInputs
-
-Description: An OTP-style multi-digit input.
-
-Features: Automatically moves focus between fields, numeric-only.
-
-Visual valid/invalid status indicator.
-
-### ComplexTextEditor
-
-Description: A text editor capable of switching between modes (simple, markdown, or rich text) via a single toolbar.
-
-Features: Uses sub-editors (SimpleEditor, RichTextEditor, MarkdownEditor).
-
-Accepts label, min-rows, error text, etc.
-
-### Content
-
-Description: A catch-all container that can render multiple typed sub-components (typography, images, forms, etc.).
-
-Features: Allows dynamic rendering of sub-components in a structured layout.
-
-### CustomToolbar
-
-Description: A flexible toolbar with optional buttons, search bar, dropdowns, and management actions.
-
-Features:
-
-- Left: Renders an optional vertical divider and an array of buttons.
-- LeftCenter: Typically a search bar.
-- Right: Renders one or more Dropdown components.
-- RightCenter: Manages selected rows or data actions (duplicate, delete, etc.).
-
-### DataGrid
-
-Description: A table/grid with row selection, search, pagination, and advanced row management (duplicate, delete, etc.).
-
-Features:
-
-- Built-in search integration.
-- Custom toolbars, footers, and row selection.
-- Single or multiple row selection with checkboxes.
-
-### DataGridCheckbox
-
-Description: A specialized Checkbox for data grid usage, logging click/change events.
-
-Features:
-
-- Styled for grid contexts.
-- Allows debug logging or analytics.
-
-### DateField
-
-Description: A date picker that supports both manual text entry and a pop-up calendar (via react-datepicker).
-
-Features:
-
-- Arrow-key increments for day/month/year.
-- Partial manual editing (e.g., only day or month).
-
-### Dialog and Popup
-
-Description: Modal components for various form-based interactions.
-
-Features:
-
-- Popup for simpler modals; Dialog for more complex or multi-step forms.
-- Both can integrate with form controls or custom actions.
-
-### Dropdown
-
-Description: A select input with advanced styling (label above or on the outline) and typed options.
-
-Features:
-
-- Allows custom color overrides for background, outline, and font.
-- Works well in forms or toolbars.
-
-### FormDataGrid
-
-Description: A specialized DataGrid for form-based usage.
-
-Features:
-
-- Possibly merges form validation with row-based data editing.
-- Accepts typed definitions for columns, validation, or data transformations.
-
-### Grid
-
-Description: A flexible grid system for laying out UI components, wrapping Material-UI’s Grid.
-
-Features:
-
-- Row/column/cell configurations with advanced spacing and alignment.
-- Perfect for building complex multi-column forms or pages.
-
-### IncrementNumberField
-
-Description: A numeric input with dedicated increment/decrement buttons.
-
-Features:
-
-- Restricts input to digits.
-- Configurable label, background, outline, and text color.
-
-### MultiSelectChip
-
-Description: A multiple-selection dropdown that displays selected items as chips.
-
-Features:
-
-- Easy to handle multiple values.
-- Optional background, font, and label styling.
-
-### Nav (Vertical)
-
-Description: A vertical navigation component with expandable main/sub nav items, optional search, etc.
-
-Features:
-
-- Supports multiple levels: mainNav, subNav, and viewNav.
-- Collapsible sections and optional route-based or onClick triggers.
-
-### NumberField
-
-Description: A numeric text field with optional min/max constraints.
-
-Features:
-
-- Restricts non-numeric input.
-- Auto-corrects values outside allowable ranges.
-
-### PasswordField
-
-Description: A text field for secure passwords, featuring a show/hide toggle icon.
-
-Features:
-
-- Color overrides for background, outline, text.
-- Eye icon toggles between hidden and visible text.
-
-### PhoneNumberField
-
-Description: A phone number input that auto-formats values (e.g., +1-xxx-xxx-xxxx).
-
-Features:
-
-- Removes non-digit characters, ensures +1.
-- Great for US-based phone inputs, can be adapted for international usage.
-
-### PricingTable
-
-Description: A tabular display of multi-tier pricing data, toggling monthly/annual costs, etc.
-
-Features:
-
-- Compare multiple packages.
-- Checkmark-based feature lists.
-- Integrated CTA buttons, easily link to a router or checkout flow.
-
-### ProjectBoard
-
-Description: A kanban-like board for tasks, with drag-and-drop columns, search, and sub-forms (AddTask, ShowTask).
-
-Features:
-
-- Handles status/sub-status or severity-based columns.
-- Built-in search, comment, revision history, assigned user, etc.
-
-### QRCodeComponent
-
-Description: Dynamically generates a QR code from TOTP secrets (or any string).
-
-Features:
-
-- Integrates with otplib for generating or verifying TOTP secrets.
-- Accepts size, optional title, and callback for the generated secret.
-
-### RadioGroup
-
-Description: A group of radio buttons for single-option selection, built on Material-UI’s RadioGroup.
-
-Features:
-
-- Accepts typed RadioOption for label customizations.
-- Includes an optional overall label with custom font variants/colors.
-
-### RichTextEditor
-
-Description: A full WYSIWYG editor with optional Markdown toggles, link insertion, bold/italic, etc.
-
-Features:
-
-- Built on Slate or similar.
-- Separate toolbars for Rich Text vs. Markdown modes.
-
-### SearchableDropdown
-
-Description: A dropdown with real-time filtering, based on Material-UI’s Autocomplete.
-
-Features:
-
-- Additional attributes for each option (attribute1, attribute2).
-- Flexible color/label styling.
-
-### Searchbar
-
-Description: A stylized search input field, typically placed in a toolbar or nav.
-
-Features:
-
-- Icon, label positioning, and color customization.
-- Easy onChange event to handle filtering or searching.
-
-### ShowTask
-
-Description: A modal-based component that displays a single task, its fields, and a comment section with revision history.
-
-Features:
-
-- Edits or adds comments, optionally restricted to the original commenter.
-- Adjust sub-status, assigned user, next-action date, etc.
-
-### Stepper (CustomStepper)
-
-Description: A multi-step progress indicator for processes or wizards.
-
-Features:
-
-- Supports “completed”, “active”, “error”, or “inactive” steps.
-- Displays optional step descriptions or links.
-- Step icons can be customized (check, lock, error, etc.).
-
-### StyledTooltip
-
-Description: A Material-UI Tooltip extended with custom color, offsets, and arrow placement.
-
-Features:
-
-- Override background color, text color, arrow color.
-- Precisely position via offset props.
-
-### Tabs (Horizontal)
-
-Description: A horizontal tab navigation bar built with Material-UI’s Tabs.
-
-Features:
-
-- Route-based (trigger='route') or custom callback (trigger='onClick') tab switches.
-- Supports alignment (left, center, right, justify) and optional borders.
-
-### TextField
-
-Description: A Material-UI TextField wrapper with advanced color and label position overrides, plus optional end adornments.
-
-Features:
-
-- Label can shrink onto or above the outline for a unique UI.
-- Extended color styling for background, outline, font, placeholder, etc.
-
-### Toolbar
-
-Description: A flexible container for actions, often used atop tables or pages for filtering, button actions, and more.
-
-Features:
-
-- Extensible subcomponents (Left, LeftCenter, Right, RightCenter).
-- Adapts layout based on screen size (desktop, tablet, mobile).
-
-### Tooltip
-
-Description: A styled tooltip (see StyledTooltip).
-
-Features:
-
-- Enhanced theming, offsets, arrow customization.
-- Works with icons, text, or anything that needs a hover tooltip.
-
-### TransferList
-
-Description: A dual-list component for transferring items between left and right.
-
-Features:
-
-- “Move selected” or “Move all” controls.
-- Single or multiple selection variants.
-- Can pair with dropdowns for multi-collection contexts.
-
-### Typography
-
-Description: A text component supporting multiple font families (Arapey, Inter, Merriweather) and variant styles.
-
-Features:
-
-- Additional variants like paragraph, helperheader, helperfooter.
-- Flexible coloring and consistent text sizing across your app.
+## Component Library Overview
+
+goobs-frontend provides 100+ fully-featured React components organized into logical categories. All components are built with TypeScript, custom theming, and responsive design principles. For detailed documentation, examples, and interactive demos, visit our [Storybook](https://storybook.technologiesunlimited.net/).
+
+## Core Component Categories
+
+### 🎨 Layout & Structure
+- **Grid** - Responsive grid system with flexible row/column configurations
+- **Container** - Responsive content containers with consistent spacing
+- **Stack** - One-dimensional layout component for arranging items
+- **Paper** - Elevated surface container for content sections
+- **Divider** - Visual separators for content organization
+
+### 📝 Form Components
+**Text Inputs**
+- **TextField** - Versatile text input with advanced styling and label positioning
+- **PasswordField** - Secure password input with show/hide toggle functionality
+- **SearchField** - Search input with integrated search icons and styling
+- **ComplexTextEditor** - Multi-mode editor (simple, markdown, rich text) with integrated toolbar
+
+**Specialized Inputs**
+- **PhoneNumberField** - Auto-formatting phone number input (+1-xxx-xxx-xxxx)
+- **USDField** - Currency input with dollar formatting and validation
+- **PercentageField** - Percentage input with % symbol and range validation
+- **ConfirmationCodeInput** - OTP-style multi-digit input with auto-focus progression
+
+**Number Inputs**
+- **IncrementNumberField** - Number input with built-in increment/decrement controls
+- **AccountNumberField** - Bank account number input with validation
+- **RoutingNumberField** - Bank routing number input with format validation
+- **CreditCardField** - Credit card input with real-time formatting
+- **CVVField** - Secure CVV input for payment forms
+
+**Date & Time**
+- **DateField** - Date picker with calendar popup and keyboard navigation
+- **DateRangeField** - Start/end date selection with range validation
+- **TimeRangeField** - Time range selector with 12/24 hour support
+
+**Selection Components**
+- **Dropdown** - Customizable select component with advanced styling
+- **MultiSelectChip** - Multi-selection dropdown with chip display
+- **SearchableDropdown** - Real-time filtering dropdown with autocomplete
+- **RadioGroup** - Radio button groups with custom styling and TypeScript support
+- **Checkbox** - Enhanced checkbox with indeterminate state support
+- **Switch** - Toggle switch with smooth animations
+
+**IPAM & Network Fields**
+- **IPAddressField** - IP address input with validation
+- **CIDRField** - CIDR notation input with subnet validation
+- **SubnetField** - Subnet configuration input
+- **VLANField** - VLAN ID input with range validation
+- **MACAddressField** - MAC address input with auto-formatting
+
+### 🗂️ Data Display
+- **DataGrid** - Advanced data table with sorting, filtering, pagination, and row management
+- **Table** - Lightweight table component for simple data display
+- **Card** - Versatile card container with multiple variants (product, pricing, task, inventory)
+- **List** - Flexible list component with custom item rendering
+- **PricingTable** - Specialized pricing comparison table with feature highlights
+- **ProjectBoard** - Kanban-style board with drag-and-drop task management
+
+### 🧭 Navigation
+- **Tabs** - Horizontal tab navigation with route integration
+- **Breadcrumb** - Breadcrumb navigation with custom separators
+- **Stepper** - Step-by-step process indicator with customizable states
+- **TreeView** - Hierarchical tree navigation with expand/collapse
+- **Pagination** - Page navigation with customizable page size options
+
+### 🎯 Action Components
+- **Button** - Highly customizable button with icon support and flexible positioning
+- **IconButton** - Icon-only buttons with hover states and accessibility
+- **ToggleButton** - Toggle button with active/inactive states
+
+### 💬 Feedback & Overlays
+- **Alert** - Contextual alerts with multiple severity levels
+- **Dialog** - Modal dialogs for complex interactions
+- **Snackbar** - Toast notifications with action buttons
+- **Tooltip** - Enhanced tooltips with custom positioning and styling
+- **Popover** - Positioned popup containers
+
+### 🔧 Utility Components
+- **Accordion** - Collapsible content sections with smooth animations
+- **Badge** - Notification badges with custom positioning
+- **Chip** - Compact information chips with delete functionality
+- **Avatar** - User avatars with fallback text and image support
+- **ProgressBar** - Progress indicators with customizable styling
+- **CodeCopy** - Syntax-highlighted code blocks with one-click copying
+- **QRCode** - Dynamic QR code generator with TOTP integration
+- **TransferList** - Dual-list component for moving items between collections
+
+### 🎨 Design & Animation
+- **Typography** - Text component with multiple font families (Arapey, Inter, Merriweather)
+- **Fade**, **Slide**, **Zoom** - Smooth transition components for enhanced UX
+
+### 🏗️ Advanced Components
+- **Toolbar** - Flexible toolbar with multiple sections and responsive behavior
+- **Content** - Dynamic content renderer supporting multiple content types
+- **FormDataGrid** - Data grid with integrated form validation
+
+### 📱 Mobile-First Design
+All components are built with mobile-first responsive design principles, ensuring optimal performance across desktop, tablet, and mobile devices.
+
+### 🎨 Comprehensive Icon Library
+200+ carefully crafted icons covering:
+- Navigation (arrows, chevrons, menu controls)
+- Actions (add, delete, edit, save, settings)
+- Communication (email, phone, notifications)
+- Business (payment, store, analytics)
+- Technology (code, devices, security, networking)
+- Status indicators (success, error, warning, info)
+
+## Key Features
+
+### 🔧 Customization
+- **Advanced Theming** - Override colors, fonts, spacing, and component behavior
+- **Flexible Styling** - Custom CSS-in-JS with theme-aware styling system
+- **Component Variants** - Multiple pre-built variants for common use cases
+
+### 📋 Developer Experience
+- **Full TypeScript Support** - Complete type definitions with IntelliSense
+- **Comprehensive Documentation** - Interactive Storybook with live examples
+- **Consistent API** - Predictable prop patterns across all components
+
+### ♿ Accessibility & Performance
+- **ARIA Compliance** - Full accessibility support with proper ARIA labels
+- **Keyboard Navigation** - Complete keyboard support for all interactive components
+- **Performance Optimized** - Lazy loading, code splitting, and optimized bundle sizes
+
+### 🚀 Modern React Patterns
+- **Hooks-Based** - Built with modern React hooks and functional components
+- **State Management** - Integrated Jotai support for complex state scenarios
+- **Form Integration** - Seamless integration with popular form libraries
+
+*For complete component documentation, interactive examples, and implementation guides, visit the [Storybook documentation](https://storybook.technologiesunlimited.net/).*
 
 ### Feedback and Contributions
 
-We welcome contributions of all kinds:
+I welcome feedback and contributions of all kinds:
 
 - Issues: Report bugs or request features via GitHub Issues.
 - Pull Requests: Fork, create a branch, and open a PR for review.

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "goobs-frontend",
-  "version": "0.9.35",
+  "version": "0.122.0",
   "type": "module",
-  "description": "A comprehensive React-based libary that extends the functionality of Material-UI",
+  "description": "A comprehensive React-based libary for building modern web applications",
   "license": "MIT",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -18,17 +18,17 @@
     "serve": "next start",
     "start": "storybook dev -p 6006",
     "lint": "next lint",
+    "lint:fix": "next lint --fix --quiet --progress",
+    "lint:verbose": "eslint \"src/**/*.{js,mjs,cjs,jsx,ts,tsx}\" --fix --format=pretty --max-warnings=0 --debug",
+    "lint:progress": "eslint \"src/**/*.{js,mjs,cjs,jsx,ts,tsx}\" --fix --format=unix --max-warnings=0",
+    "lint:test": "eslint \"src/components/Button/Button.tsx\" --fix --format=stylish --debug",
+    "clean-unused": "bun run lint:progress && echo \"✅ Linting complete, now formatting...\" && bun run format",
+    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@emotion/cache": "^11",
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
-    "@mui/icons-material": "^7",
-    "@mui/material": "^7",
     "@storybook/addon-links": "^9",
-    "@storybook/test": "^8.6.14",
     "@types/lodash": "^4",
     "formik": "^2",
     "highlight.js": "^11",
@@ -37,34 +37,44 @@
     "next": "15",
     "otplib": "^12",
     "react-qr-code": "^2",
-    "slate": "^0.117",
-    "slate-dom": "^0.116",
+    "slate": "^0.118",
+    "slate-dom": "^0.117",
     "slate-history": "^0.113",
     "slate-react": "^0.117",
     "storybook": "^9",
-    "zod": "^3",
+    "zod": "^4",
     "zod-formik-adapter": "^1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4",
+    "@babel/core": "^7.28.0",
+    "@babel/generator": "^7.28.0",
+    "@babel/parser": "^7.28.0",
+    "@babel/traverse": "^7.28.0",
+    "@babel/types": "^7.28.0",
+    "@chromatic-com/storybook": "^4.0.1",
     "@next/eslint-plugin-next": "^15",
     "@storybook/addon-onboarding": "^9",
     "@storybook/nextjs": "^9",
     "@storybook/react": "^9",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "@typescript-eslint/eslint-plugin": "^8",
-    "@typescript-eslint/parser": "^8",
-    "chromatic": "^13",
-    "eslint": "^9",
-    "eslint-config-next": "^15",
-    "eslint-config-prettier": "^10",
-    "eslint-plugin-prettier": "^5",
-    "eslint-plugin-storybook": "^9",
-    "prettier": "^3",
-    "react": "^19",
-    "react-dom": "^19",
-    "typescript": "^5"
+    "@storybook/test": "^8",
+    "@types/babel__generator": "^7.27.0",
+    "@types/babel__traverse": "^7.20.7",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@typescript-eslint/eslint-plugin": "^8.37",
+    "@typescript-eslint/parser": "^8.37",
+    "autoprefixer": "^10.4.21",
+    "chromatic": "^13.1.2",
+    "eslint": "^9.30.1",
+    "eslint-config-next": "^15.3.5",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-plugin-prettier": "^5.5.1",
+    "eslint-plugin-storybook": "^9.0.15",
+    "eslint-plugin-unused-imports": "^4.1.4",
+    "prettier": "^3.6.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "typescript": "^5.8.3"
   },
   "files": [
     "src"