o8-lib

Library for commonly used components in Orchestr8 UI frontends.

How to use

1. Install the library:

   npm install o8-lib

2. Import the base css required for the components to work properly in you main.ts or similar start file.

   import "tailwindcss";
   import "o8-lib/o8-lib.css";

3. Import and use the components in your React application:

   import { Button, Input } from "@insertlogic/o8-lib/components";
   
   function App() {
     return (
       <div className="p-4">
         <Input placeholder="Enter text" />
         <Button onClick={() => alert("Button clicked!")}>Click Me</Button>
       </div>
     );
   }
   
   export default App;

Storybook

To view the components in isolation and see their documentation, you can run Storybook:

npm run storybook

Built on

• React
• Tailwind CSS
• Radix UI

Push new version

1. Update the version in package.json.
2. Check for errors:

   npm run build

3. Do a dry run:

   npm publish --dry-run

4. Commit changes to git
5. GitHub Actions will automatically build the package and publish it to npm.

Manually publish to npm

1. Build the package:

   npm run build

2. Do a dry run:

   npm publish --dry-run

3. Publish to npm:

   npm publish

Global CSS Utilities

The library ships with a set of base utilities and browser-specific overrides.
These are included globally — no import required.

Loader

.loader { ... }

• Displays a spinning circular loader.
• Uses CSS mask and animation.

No Scrollbar

.no-scrollbar { ... }

• Removes scrollbars across browsers.
• Supports Chrome, Safari, Opera, Firefox, IE, and Edge.

Hidden Scrollbar (WebKit-only)

.scrollbar-hidden::-webkit-scrollbar { ... }

Hides scrollbars in Chrome/Safari/Opera but keeps scrollable behavior.

Minimal Scrollbar

.scrollbar-ms { ... }

• Thin, styled scrollbar.
• Firefox: scrollbar-width: thin.
• WebKit: custom width, thumb color, rounded edges.

Clean Number Input

.input-number-clean { ... }

• Removes up/down spin buttons from .
• Works in WebKit and Firefox.

Toast Styles

.toaster .toast { ... }

Example - overwrite info variant

.toaster .toast.toast-info {
  background-color: Your Color;
  border-color: Your Color;
  color: Your Color;
}
.toaster .toast.toast-info .toast-description {
  color: Your Color;
}
.toaster .toast.toast-info .toast-action-button {
  background-color: Your Color;
  color: Your Color;
}

Base toast styles:

• Background: var(--primary)
• Border: var(--border)
• Shadow: subtle

Variants:

• .toast-success → green success
• .toast-error → red destructive
• .toast-warning → yellow warning
• .toast-info → neutral/info

Each variant also styles:

• .toast-description → secondary text
• .toast-action-button → inverse button inside toast