lcano-react-ui

A React UI component library for personal projects — built to standardize design and speed up interface development across multiple apps (Portuguese and English).

Requirements

Peer dependencies — install these in your project, they aren't bundled:

• react >= 16.8.0
• react-dom >= 16.8.0
• styled-components >= 5.0.0

Installation

npm install lcano-react-ui

yarn add lcano-react-ui

Ships ESM (dist/esm), CommonJS (dist/cjs), and TypeScript types (dist/types) — no extra bundler configuration needed.

Theming

Most components read colors from a styled-components theme shaped like AppTheme. Wrap your app in a ThemeProvider with the library's default theme, or your own:

import { ThemeProvider } from 'styled-components';
import { DEFAULT_THEME_SYSTEM } from 'lcano-react-ui';

<ThemeProvider theme={DEFAULT_THEME_SYSTEM}>
  <App />
</ThemeProvider>

interface AppTheme {
  title?: string;
  colors: {
    primary: string;
    secondary: string;
    tertiary: string;
    quaternary: string;
    white: string;
    // + black, gray, success, info, warning, and any custom keys
    [key: string]: string;
  };
}

Components with a variant/variantColor prop (VariantColor = 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'success' | 'info' | 'warning') resolve it against theme.colors at render time — any theme object with those keys works, including one built by your own app (see ThemeSelector for switching between several themes at runtime).

Quick start

import { ThemeProvider } from 'styled-components';
import { DEFAULT_THEME_SYSTEM, Button, Panel } from 'lcano-react-ui';

function App() {
  return (
    <ThemeProvider theme={DEFAULT_THEME_SYSTEM}>
      <Panel title="Welcome">
        <Button variant="success" description="Get started" onClick={() => {}} />
      </Panel>
    </ThemeProvider>
  );
}

Components

Each component has its own README with the full prop table, usage examples, and notes on gotchas/dependencies.

| Component | Description | | --- | --- | | AccountSummary | Signed-in user row: avatar, name, log-out button | | ActionButton | Floating action button with a hover-out options menu | | BadgeCard | Icon-tile list card for achievements/badges/collectibles | | Breadcrumb | Scrollable breadcrumb trail | | Button | Themed icon/label button | | ConfirmModal | Preconfigured confirm/cancel modal | | Container | Generic themed <div> layout primitive | | DragDropFile | Single-file drag-and-drop upload zone | | FieldTextArea | Labeled auto-growing textarea | | FieldValue | Labeled input adapting to string/number/boolean/date/select | | GoogleSignInButton | Google Identity Services sign-in button | | HighlightBox | Centered pill badge colored by variant | | IconButton | Circular icon-only button | | ImagePicker | Circular avatar with a file-picker overlay | | Loading | Fullscreen spinner overlay | | Modal | Generic centered modal dialog | | OptionGrid | Grid of selectable option cards, optional color swatch | | PaginatedGrid | CSS grid that paginates itself by row count | | Panel | Titled content card with header/body/footer | | QrCode | Inline SVG QR code | | RailTabsNav | App nav: icon rail on wide/landscape screens, labeled bottom tabs on narrow ones | | SearchFilterRSQL | RSQL filter builder | | SearchPagination | Pagination controls for a PagedResponse | | SearchSelectField | Async debounced search combobox | | SideNav | App nav: icon rail on wide screens, hamburger + drawer on narrow ones | | Stack | Flexbox row/column layout with dividers | | SummaryCard | Small KPI/metric card | | Table | Data table with columns, pagination, row actions, responsive stacking | | Tabs | Uncontrolled tab bar | | ThemeFavicon | Favicon that follows the active theme | | ThemeSelector | Theme picker grid | | ToastNotification | Single toast card | | ToastStack | Stacking, auto-dismissing notification queue | | ToggleSwitch | Two-option segmented control |

Hooks & contexts

• useConfirmModal, useCopyFeedback, useFullscreen, useMediaQuery, useSyncedPreference — imperative helpers for ConfirmModal and clipboard copy feedback, fullscreen toggling, media-query matching, and a local-first preference synced with a server endpoint.
• ContextMessageProvider / useMessage — app-wide toast queue.

Development

npm install
npm run build   # rm -rf dist && rollup -c → dist/esm, dist/cjs, dist/types

dist/ is build output and is not committed to this repo (see .gitignore) — it's generated by CI and published to npm on every v* tag push (.github/workflows/publish.yml). To cut a release:

npm version patch   # or minor / major
git push --follow-tags

A separate ci.yml workflow runs npm run build on every push/PR to main to catch a broken build before merge.

License

MIT