npm.io
0.11.3 • Published 5d ago

@docfira/design-system

Licence
UNLICENSED
Version
0.11.3
Deps
19
Size
2.7 MB
Vulns
0
Weekly
0
SummaryDependencyVersions

@docfira/design-system

Shared React UI, Tailwind CSS v4 tokens, TypeScript types, and Next.js-oriented helpers for Docfira healthcare products (patient, pro, admin, tenant, auth, landing, Scribe, and internal tools).

Source repository (GitLab, not GitHub)
https://gitlab.com/madocfira-group/packages-docfira · clone: https://gitlab.com/madocfira-group/packages-docfira.git
Issues: gitlab.com/madocfira-group/packages-docfira/-/issues

Install

pnpm add @docfira/design-system
# or
npm install @docfira/design-system

Peer dependencies

Package Range
next >=15.0.0
react ^18.2.0
react-dom ^18.2.0

next is optional for non-Next consumers; several entry points assume Next.js APIs (next/font, route handlers, middleware patterns).

Package layout (subpath exports)

The root entry @docfira/design-system is server-safe: types, functions, and tools only no React UI. This avoids pulling Radix and other client-only code into React Server Components during prerender.

Import path Use for
@docfira/design-system/components React UI (Button, Dialog, Toast, DatePicker, …). File is a client boundary ("use client").
@docfira/design-system/types Shared TypeScript types
@docfira/design-system/functions Server-safe helpers (dates, auth utils, middleware helpers, API-oriented code)
@docfira/design-system/functions/client Client-only hooks (useApiClient, …) do not import from Server Components
@docfira/design-system/functions/account-delete-api Shared account-deletion route handler logic (Request / Response)
@docfira/design-system/tools Validators and small pure utilities
@docfira/design-system/lightweight cn, LoadingSpinner, and other small pieces without the full components barrel
@docfira/design-system/fonts next/font–based fontClassNames / fontBrand / fontSans for <html className={…}>
@docfira/design-system/styles Global CSS (Tailwind v4, theme tokens, @theme) import once in the app root stylesheet
@docfira/design-system/postcss.config.cjs Optional PostCSS preset reference for Tailwind v4
Quick examples
// Client or files with "use client"
import { Button, ToastProvider } from '@docfira/design-system/components';

// Server Component / shared logic
import type { User } from '@docfira/design-system/types';
import { formatDate } from '@docfira/design-system/functions';

// Client-only hooks
import { useApiClient } from '@docfira/design-system/functions/client';

// Root layout (Next.js)
import { fontClassNames } from '@docfira/design-system/fonts';
// <html className={fontClassNames}> …

Next.js (App Router) checklist

  1. transpilePackages include the design system (and often @auth0/nextjs-auth0 + swr if you use Auth0 client hooks):

    // next.config.ts
transpilePackages: ['@docfira/design-system', '@auth0/nextjs-auth0', 'swr'],

  2. Global styles in app/globals.css (or your root CSS):

    @import '@docfira/design-system/styles';

/* Ensure Tailwind sees classes used inside the published package (popover, toast, calendar, …) */
@source "../../node_modules/@docfira/design-system/dist/**/*.js";

    Adjust the relative path if your globals.css lives somewhere other than src/app/.

  3. Fonts apply fontClassNames on <html> so --font-brand / --font-sans match Storybook and the design tokens.

  4. PostCSS use @tailwindcss/postcss in postcss.config (Tailwind v4), consistent with this package.

Private npm scope

The package is published under the @docfira scope. CI and local installs may need an .npmrc with registry auth (e.g. NPM_TOKEN) for private packages.

Development (from GitLab clone)

git clone https://gitlab.com/madocfira-group/packages-docfira.git
cd packages-docfira
pnpm install
pnpm run build      # produces dist/
pnpm run storybook  # UI dev at http://localhost:6006
pnpm run test
pnpm run typecheck

More detail in the repository:

License

UNLICENSED Docfira internal / commercial use. Redistribution terms are defined by your agreement with Docfira.

Links

Resource URL
GitLab repository madocfira-group/packages-docfira
Issues /-/issues
Homepage docfira.com

Keywords

design-systemreacttailwindtailwindcsshealthcaredocfirauicomponentsradix-uitypescriptnextjs