{"_id":"@atfatanpmjs/react-dashboard","name":"@atfatanpmjs/react-dashboard","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@atfatanpmjs/react-dashboard","version":"0.1.0","description":"Accessible, themeable, application-agnostic React dashboard components.","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./dist/styles.css","./package.json":"./package.json"},"sideEffects":["**/*.css"],"engines":{"node":">=20"},"scripts":{"clean":"node scripts/clean.mjs","build":"npm run clean && rollup --config && node scripts/finalize-build.mjs","build:watch":"rollup --config --watch","typecheck":"tsc --project tsconfig.json --noEmit","lint":"eslint . --max-warnings 0","test":"vitest run","test:watch":"vitest","test:coverage":"vitest run --coverage","example":"npm run build && npm run dev --workspace @atfatanpmjs/react-dashboard-example","example:build":"npm run build && npm run build --workspace @atfatanpmjs/react-dashboard-example","validate":"npm run lint && npm run typecheck && npm run test:coverage && npm run build && npm pack --dry-run --workspaces=false --cache=.npm-cache","prepublishOnly":"npm run validate"},"peerDependencies":{"react":">=18.2.0 <20","react-dom":">=18.2.0 <20"},"devDependencies":{"@eslint/js":"^10.0.1","@rollup/plugin-commonjs":"^29.0.3","@rollup/plugin-node-resolve":"^16.0.3","@rollup/plugin-terser":"^1.0.0","@rollup/plugin-typescript":"^12.3.0","@testing-library/jest-dom":"^7.0.0","@testing-library/react":"^16.3.2","@types/node":"^26.1.2","@types/react":"^19.2.18","@types/react-dom":"^19.2.4","@vitest/coverage-v8":"^4.1.10","eslint":"^10.8.0","eslint-plugin-react-hooks":"^7.1.1","eslint-plugin-react-refresh":"^0.5.3","jsdom":"^29.0.1","react":"^19.2.8","react-dom":"^19.2.8","rollup":"^4.62.4","rollup-plugin-dts":"^6.5.0","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","tslib":"^2.8.1","typescript":"^6.0.3","typescript-eslint":"^8.66.0","vite":"^8.2.0","vitest":"^4.1.10"},"workspaces":["examples/*"],"keywords":["react","dashboard","typescript","component-library","design-system"],"license":"MIT","publishConfig":{"access":"public"},"gitHead":"76809f54d712b7158df5939bb7a5a186b1633d71","_id":"@atfatanpmjs/react-dashboard@0.1.0","_nodeVersion":"23.9.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-1oNfBYgyYQmH6kr+ZoQI3HlocfAXAe78DTWaCVANHWyGrVxbbhun0/yyiVP16ryDnutc2IaYnUDp6nLMAymcZQ==","shasum":"573a16921a2618291fa518b48ed9f0c0b7b501c5","tarball":"https://registry.npmjs.org/@atfatanpmjs/react-dashboard/-/react-dashboard-0.1.0.tgz","fileCount":10,"unpackedSize":139534,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDnF3IF0eDBeFIJx44V0PggSVjA2gUK3DRxQ+h3OLQkIgIhAOooKAJAen5tlrdia/K8xyt6b38AMdIdJBPrvgKMLESX"}]},"_npmUser":{"name":"atfatanpmjs","email":"rantef@pm.me"},"directories":{},"maintainers":[{"name":"atfatanpmjs","email":"rantef@pm.me"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-dashboard_0.1.0_1785832245917_0.23476436726125183"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-04T08:30:45.778Z","0.1.0":"2026-08-04T08:30:46.073Z","modified":"2026-08-04T08:30:46.259Z"},"maintainers":[{"name":"atfatanpmjs","email":"rantef@pm.me"}],"description":"Accessible, themeable, application-agnostic React dashboard components.","keywords":["react","dashboard","typescript","component-library","design-system"],"license":"MIT","readme":"# Universal React Dashboard\n\nAn accessible, responsive, and themeable dashboard component library for React applications. It ships ESM, CommonJS, TypeScript declarations, source maps, and one extracted CSS file.\n\n## Included\n\n- Responsive `DashboardShell`, `Sidebar`, `TopBar`, `PageHeader`, and grid layout\n- Light, dark, and system themes with typed token overrides\n- Buttons, badges, avatars, cards, stat cards, progress bars, tables, skeletons, and empty states\n- React 18 and React 19 peer support\n- Rollup library build, strict TypeScript, ESLint, Vitest, and coverage thresholds\n- Runnable Vite example and npm publishing workflow\n\n## Project structure\n\n```text\nsrc/\n├── components/\n│   ├── data/          # DataTable, ProgressBar, StatCard\n│   ├── feedback/      # EmptyState, Skeleton\n│   ├── layout/        # DashboardShell, Sidebar, TopBar, PageHeader, Grid\n│   └── primitives/    # Avatar, Badge, Button, Card, IconButton\n├── styles/            # Scoped component and token styles\n├── theme/             # Provider, context, defaults, theme factory\n├── test/              # Shared test setup\n├── index.ts           # Public package API\n└── types.ts           # Public theme and navigation types\nexamples/basic/        # Runnable consumer application\nrollup.config.mjs      # ESM, CJS, CSS, declarations, minification\n```\n\n## Local development\n\nRequirements: Node.js 20 or newer and npm 10 or newer.\n\n```bash\nnpm install\nnpm run validate\nnpm run example\n```\n\nThe final command builds the library and starts the example application. During component development, run `npm run build:watch` in one terminal and `npm run dev --workspace @atfatanpmjs/react-dashboard-example` in another.\n\n## Consumer installation\n\n```bash\nnpm install @atfatanpmjs/react-dashboard\n```\n\nImport the stylesheet once near the application entry point:\n\n```tsx\nimport \"@atfatanpmjs/react-dashboard/styles.css\";\n```\n\nThen compose a dashboard:\n\n```tsx\nimport {\n  Avatar,\n  Button,\n  DashboardGrid,\n  DashboardShell,\n  DashboardThemeProvider,\n  PageHeader,\n  StatCard,\n  useDashboardTheme,\n  type NavigationItem,\n} from \"@atfatanpmjs/react-dashboard\";\n\nconst navigation: NavigationItem[] = [\n  { id: \"home\", label: \"Overview\", href: \"/\", active: true },\n  { id: \"users\", label: \"Customers\", href: \"/customers\" },\n];\n\nfunction ThemeButton() {\n  const { resolvedMode, toggleMode } = useDashboardTheme();\n  return (\n    <Button onClick={toggleMode} variant=\"secondary\">\n      Use {resolvedMode === \"dark\" ? \"light\" : \"dark\"} mode\n    </Button>\n  );\n}\n\nexport function App() {\n  return (\n    <DashboardThemeProvider persistKey=\"app-theme\">\n      <DashboardShell\n        brand=\"atfatanpmjs\"\n        navigation={navigation}\n        headerActions={\n          <>\n            <ThemeButton />\n            <Avatar alt=\"Ada Lovelace\" initials=\"AL\" />\n          </>\n        }\n      >\n        <PageHeader title=\"Overview\" actions={<Button>New report</Button>} />\n        <DashboardGrid>\n          <StatCard label=\"Revenue\" value=\"€28,400\" />\n          <StatCard label=\"Customers\" value=\"1,482\" />\n        </DashboardGrid>\n      </DashboardShell>\n    </DashboardThemeProvider>\n  );\n}\n```\n\nFor client-side routers, omit `href` and provide `onSelect`, or handle every item through `DashboardShell.onNavigate`.\n\n## Theming\n\nThe provider scopes tokens to its wrapper, so multiple dashboard themes can coexist without mutating the document root.\n\n```tsx\nimport {\n  DashboardThemeProvider,\n  createDashboardTheme,\n} from \"@atfatanpmjs/react-dashboard\";\n\nconst theme = createDashboardTheme({\n  light: {\n    colorBrand: \"#0f766e\",\n    colorBrandHover: \"#115e59\",\n    radiusLarge: \"1.25rem\",\n  },\n  dark: {\n    colorBrand: \"#5eead4\",\n    colorBrandHover: \"#99f6e4\",\n  },\n});\n\n<DashboardThemeProvider defaultMode=\"system\" theme={theme}>\n  <App />\n</DashboardThemeProvider>;\n```\n\nThe provider can be controlled using `mode` and `onModeChange`, or uncontrolled using `defaultMode`. Set `persistKey` only when local preference persistence is wanted.\n\n## Build output\n\n`npm run build` produces:\n\n```text\ndist/index.js       # ESM\ndist/index.cjs      # CommonJS\ndist/index.d.ts     # Bundled declarations\ndist/styles.css     # Minified stylesheet\ndist/*.map          # Source maps\n```\n\nReact and React DOM remain external peer dependencies. Package exports prevent consumers from importing private implementation files, while `sideEffects` preserves the CSS asset during tree shaking.\n\n## Publishing\n\n1. Replace `@atfatanpmjs/react-dashboard` in the root and example `package.json` files with your available npm scope and package name.\n2. Replace the author/license placeholders and add `repository`, `homepage`, and `bugs` metadata.\n3. Commit the generated `package-lock.json`, then run `npm run validate`.\n4. Inspect the package using `npm pack --dry-run` and update the version with `npm version patch`, `minor`, or `major`.\n5. Sign in with `npm login`, confirm with `npm whoami`, then publish using `npm publish --access public`.\n\nFor automated releases, configure npm Trusted Publishing for the repository and keep `.github/workflows/publish.yml`. It validates every release and publishes with npm provenance. If you use a private registry, update `publishConfig`, the workflow registry URL, and its authentication method.\n\n## Release checklist\n\n- Public API changes are exported only through `src/index.ts`.\n- New components include keyboard behavior, labels, focus states, and reduced-motion handling.\n- `npm run validate` passes.\n- The example builds against the packaged public API.\n- The version and changelog follow semantic versioning.\n\n## License\n\nMIT. Replace the placeholder copyright holder before publishing.\n","readmeFilename":"README.md","_rev":"1-38f7333234560d2f087b46dfe97c00fd"}