OWM UI Components

A React component library with separate CSS loading for better compatibility with sandboxed environments like HubSpot modules.

Installation

npm install owm-ui-components

Usage

1. Import Components

import { Button, Card, TextInput } from 'owm-ui-components';

2. Import CSS

You have several options for loading the CSS:

Option A: Import CSS using the css export (Recommended for React apps)

// In your main App.tsx or index.tsx
import 'owm-ui-components/css';

Option B: Import CSS directly from the dist folder (Recommended for HubSpot modules)

// Import the CSS file directly
import 'owm-ui-components/dist/owm-ui-components.css';

3. Use Components

import React from 'react';
import { Button } from 'owm-ui-components';

function App() {
  return (
    <div>
      <Button variant="primary">Click me</Button>
      <Button variant="secondary" size="small">Small Button</Button>
    </div>
  );
}

HubSpot Modules

For HubSpot React modules, use Option B above to import the CSS directly. This ensures the styles are properly loaded in the sandboxed environment.

// In your HubSpot module
import React from 'react';
import { Button } from 'owm-ui-components';
import 'owm-ui-components/dist/owm-ui-components.css';

export default function MyHubSpotModule() {
  return (
    <div>
      <Button variant="primary">HubSpot Button</Button>
    </div>
  );
}

Available Components

• Button - Various button variants and sizes
• Card - Container component
• TextInput - Form input component
• ProgressBar - Progress indicator
• Stepper - Step-by-step navigation
• TagCheckBox - Checkbox with tag styling
• TagCheckBoxGroup - Group of tag checkboxes

CSS Variables

The library uses CSS custom properties for theming. Make sure your app has the ds-theme class or the CSS variables are available in your global scope.

.ds-theme {
  --color-primary: #2c3b4e;
  --color-secondary: #5e8081;
  /* ... other variables */
}

Troubleshooting

If you're experiencing issues with styles not loading in HubSpot modules:

1. Make sure you're importing the CSS file directly: import 'owm-ui-components/dist/owm-ui-components.css'
2. Ensure the CSS variables are available in your global scope
3. Check that the ds-theme class is applied to your container element