@silvia-health/client-dashboard

React Context providers for dashboard UI — Ant Design theme configuration and message notifications.

Installation

pnpm add @silvia-health/client-dashboard

Peer Dependencies

pnpm add antd @ant-design/cssinjs

Exports

Theme

| Export | Type | Description | |--------|------|-------------| | ThemeDashboardProvider | Component | Ant Design theme, locale, and style cache provider | | useThemeDashboard | Hook | Returns { token } with Ant Design GlobalToken and dashboard semantic tokens |

Message

| Export | Type | Description | |--------|------|-------------| | MessageDashboardProvider | Component | Ant Design message notification provider | | useMessageDashboard | Hook | Returns { showMessage } for displaying notifications |

Usage

import { ThemeDashboardProvider, useThemeDashboard } from '@silvia-health/client-dashboard/theme-dashboard';
import { MessageDashboardProvider, useMessageDashboard } from '@silvia-health/client-dashboard/message-dashboard';

const App = () => (
  <ThemeDashboardProvider language="ko">
    <MessageDashboardProvider>
      <Content />
    </MessageDashboardProvider>
  </ThemeDashboardProvider>
);

const Content = () => {
  const { token } = useThemeDashboard();
  const { showMessage } = useMessageDashboard();

  showMessage({ type: 'success', content: 'Saved!' });

  return (
    <div
      style={{ color: token.colorPositive, borderColor: token.colorCaution, outlineColor: token.colorNegative }}
    >
      Dashboard
    </div>
  );
};

The dashboard theme maps its Ant Design green1 through green10, orange1 through orange10, and red1 through red10 tokens directly to the matching Figma light-theme palettes. token.colorPositive aliases the resolved token.green6 value (#1ED45A), token.colorCaution aliases token.orange6 (#FF9200), and token.colorNegative aliases token.red6 (#FF4242).

Notes

• ThemeDashboardProvider accepts language prop ("ko", "en", "ja") for locale switching.
• colorPositive, colorCaution, and colorNegative are additive; Ant Design's built-in colorSuccess, colorWarning, and colorError tokens remain available for compatibility.
• Both hooks must be called within their respective providers.