FCC Redesign

Design system and component library for FCC, built with React + Vite. It now supports both:

• local demo development via the Vite app
• packaged component-library builds for reuse in fccPRO and fccOPS

Getting Started

npm install
npm run dev

Library Build

Build the publishable component package:

npm run build

This emits:

• dist/index.js for ESM consumers
• dist/index.cjs for CommonJS consumers
• dist/styles.css for the shared FCC theme and component styles

If you still want a static build of the demo app, use:

npm run build:demo

Using In Other Projects

Install the published package in fccPRO or fccOPS, then import the styles and components:

import '@freedom-code-compliance/fcc-redesign/styles.css'
import { FCCDesignProvider, Button, Card } from '@freedom-code-compliance/fcc-redesign'

function App() {
  return (
    <FCCDesignProvider>
      <Card>
        <Button>Open inspection</Button>
      </Card>
    </FCCDesignProvider>
  )
}

FCCDesignProvider wraps ThemeProvider and ToastProvider so consuming apps can adopt the design system with a single provider. If an app needs custom theme wiring, ThemeProvider, useTheme, ToastProvider, and useToast are also exported individually.

Shared Calls Sidepanel

FCCCallsSidePanel is the reusable calls panel surface for fccPRO and fccOPS. It is data-driven, so each app can keep its own Twilio/Supabase logic and pass normalized call history, voicemail, callback, and handler props into the shared UI.

import { FCCCallsSidePanel } from '@freedom-code-compliance/fcc-redesign'

<FCCCallsSidePanel
  history={recentCalls}
  voicemails={voicemails}
  callbacks={callbacks}
  currentUserId={user.id}
  onDial={(number) => startOutboundCall(number)}
  onOpenTicket={(item) => openTicket(item.ticket)}
  onClose={closeCallsPanel}
/>

Shared App Shell

The library also exports a reusable FCC page shell for fccOPS and fccPRO:

• FCCAppShell
• FCCSidebar
• FCCMainWindow
• FCCWorkspaceHeader
• FCCBreadcrumbs
• FCCHeaderStatus
• FCCBrandLogo
• FCCThemeToggle

Example:

import '@freedom-code-compliance/fcc-redesign/styles.css'
import {
  FCCAppShell,
  FCCBrandLogo,
  FCCThemeToggle,
} from '@freedom-code-compliance/fcc-redesign'
import { LayoutGrid, ClipboardCheck } from 'lucide-react'

const navItems = [
  { key: 'dashboard', label: 'Dashboard', icon: <LayoutGrid size={18} /> },
  { key: 'inspections', label: 'Inspections', icon: <ClipboardCheck size={18} /> },
]

export function AppFrame({ page, onNavigate, children }) {
  return (
    <FCCAppShell
      appName="fccOPS"
      logo={<FCCBrandLogo darkSrc="/light-gradient-logo.png" lightSrc="/fccgradientlogodark.png" />}
      navItems={navItems}
      activeNavKey={page}
      onNavigate={(item) => onNavigate(item.key)}
      user={{ initials: 'PM', name: 'Piotr Malicki' }}
      breadcrumbs={[
        { label: 'FCC', onClick: () => onNavigate('dashboard') },
        { label: 'Inspections', current: true },
      ]}
      status={{ label: 'Available', tone: 'success' }}
      headerActions={<FCCThemeToggle />}
    >
      {children}
    </FCCAppShell>
  )
}

Publish Flow

1. Make component or theme changes in this repo.
2. Run npm run build and verify the package output.
3. Log in to the public npm registry with an account that can publish under the @freedom-code-compliance scope.
4. Publish a new package version.
5. Update the dependency version in fccPRO or fccOPS.
6. Reinstall dependencies in the consuming app to pick up the latest library release.

Publish commands:

npm login
npm publish

The package metadata is configured for the public npm registry and publishes as a scoped public package.