@domino/base-components

A React component library for building Domino web applications and base-components. Bundles components and utilities from the Domino design system into a single distributable package.

Quick steps

1. Install the package from the tarball provided by the Domino team:

yarn add file:/path/to/domino-base-components-<version>.tgz

2. Install peer dependencies:

yarn add [email protected] [email protected] [email protected] react-router-dom@^5.3.0

3. Wrap your app with the theme provider:

import { DominoThemeProviderDecorator } from '@domino/base-components';

function App() {
  return (
    <DominoThemeProviderDecorator>
      <HashRouter>
        <YourApp />
      </HashRouter>
    </DominoThemeProviderDecorator>
  );
}

Standalone usage (no Domino backend)

By default DominoThemeProviderDecorator tries to fetch user and white-label data from the Domino backend. Pass a useStoreHook to avoid those requests:

function useStaticStore() {
  return {
    formattedPrincipal: undefined,
    whiteLabelSettings: undefined,
  };
}

function App() {
  return (
    <DominoThemeProviderDecorator useStoreHook={useStaticStore}>
      <YourApp />
    </DominoThemeProviderDecorator>
  );
}

Available exports

Extensions

• DominoThemeProviderDecorator — theme provider wrapper; accepts optional useStoreHook prop
• useStoreExtension — hook for accessing principal, current user, and white-label settings

Core utilities

• themeHelper, useGetThemeValue, Theme — theme utilities from @domino/core/styled

UI components (from @domino/base-components)

• Buttons: Button, IconButton, ButtonWithTooltip
• Forms: TextInput, TextArea, Checkbox, Radio, Switch, Select, DatePicker
• Layout: Row, Col, Space, Card
• Navigation: Tabs, NavTabs, Breadcrumb, Link, RouterLink
• Data display: DominoTable, Badge, Tag, Tree, Collapse
• Feedback: Modal, Drawer, Tooltip, Popover, Toastr, SpinnerWrapper
• And many more — see dist/index.d.ts for the full list

Peer dependencies

Must be installed in the consuming application:

| Package | Version | | ------------------ | -------- | | react | 18.2.0 | | react-dom | 18.2.0 | | react-router | 5.3.4 | | react-router-dom | ^5.3.0 |

Building the package

yarn build   # builds dist/
yarn pack    # creates the .tgz tarball

License

Private package for Domino Data Lab internal use.