goobs-frontend

goobs-frontend, is a React-based UI library built on Material-UI.

The NPM repo is available here - https://www.npmjs.com/package/goobs-frontend

This entire repository is written in TypeScript, and there is no need for a separate types installation.

Storybook

See component design and documentation in Storybook available here - https://storybook.technologiesunlimited.net/

Integrating goobs-frontend with Next.js

This guide explains how to integrate goobs-frontend with a Next.js project

Step 1: Install the project

In your Next.js project directory, run the following command to install goobs-frontend

npm

npm i goobs-frontend

yarn

yarn add goobs-frontend

Step 2: Update next.config.js

You must then transpile the package in next.config

/** @type {import('next').NextConfig} */

const nextConfig = {
  transpilePackages: ['goobs-frontend'],
}

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.

Feedback and Contributions

We welcome 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.
• Custom Requests: If you need special features or want these components ported to a different design system, reach out.

License

goobs-frontend is licensed under the MIT License.

Contact

For questions, support, or further details, please contact Matthew Goluba

Email: mkgoluba@technologiesunlimited.net

Enjoy building with goobs-frontend!