{"_id":"@alfredogaliza/app-components","name":"@alfredogaliza/app-components","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@alfredogaliza/app-components","version":"0.1.0","description":"Reusable React datatable and filter bar components with a GitHub Pages demo.","type":"module","main":"./dist/index.cjs.js","module":"./dist/index.es.js","types":"./dist/types/index.d.ts","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/index.es.js","require":"./dist/index.cjs.js"}},"sideEffects":false,"publishConfig":{"access":"public"},"keywords":["react","datatable","table","filter","component","ui"],"scripts":{"dev":"vite","build":"tsc -p tsconfig.build.json && vite build --config vite.lib.config.ts","build:demo":"vite build --outDir docs","preview:demo":"vite preview --outDir docs","lint":"eslint .","prepublishOnly":"npm run build"},"peerDependencies":{"react":"^19.2.6","react-dom":"^19.2.6"},"devDependencies":{"@babel/core":"^7.29.0","@eslint/js":"^10.0.1","@rolldown/plugin-babel":"^0.2.3","@types/babel__core":"^7.20.5","@types/node":"^24.12.3","@types/react":"^19.2.14","@types/react-dom":"^19.2.3","@vitejs/plugin-react":"^6.0.1","babel-plugin-react-compiler":"^1.0.0","eslint":"^10.3.0","eslint-plugin-react-hooks":"^7.1.1","eslint-plugin-react-refresh":"^0.5.2","globals":"^17.6.0","react":"^19.2.6","react-dom":"^19.2.6","typescript":"~6.0.2","typescript-eslint":"^8.59.2","vite":"^8.0.12"},"gitHead":"a6c92325f4841fc76c09f3bdf31a06fd12330b2d","_id":"@alfredogaliza/app-components@0.1.0","_nodeVersion":"24.16.0","_npmVersion":"11.17.0","dist":{"integrity":"sha512-Bz6KefLreKMlG7prAubRl77Kfzcuf5eaxNREF82aB2nA8gqmSRZDmJyW7kirYQutBqCHHnfx4Rx6gbRt71H7+Q==","shasum":"23aa5b84d3b701f1bb4575b8538814e61bd55331","tarball":"https://registry.npmjs.org/@alfredogaliza/app-components/-/app-components-0.1.0.tgz","fileCount":8,"unpackedSize":189823,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIASbfwOvjQ+jjDQWTJ5RBVHI1NvddxssgOpHMQCZ3oTOAiEAouXP0T3vMvJ7fVpsx2zh7wVzTpv1Zitdtcp2AKuKsZA="}]},"_npmUser":{"name":"alfredogaliza","email":"alfredogaliza@gmail.com"},"directories":{},"maintainers":[{"name":"alfredogaliza","email":"alfredogaliza@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/app-components_0.1.0_1782093131351_0.7828078002182455"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-22T01:52:11.206Z","0.1.0":"2026-06-22T01:52:11.476Z","modified":"2026-06-22T01:52:11.687Z"},"maintainers":[{"name":"alfredogaliza","email":"alfredogaliza@gmail.com"}],"description":"Reusable React datatable and filter bar components with a GitHub Pages demo.","keywords":["react","datatable","table","filter","component","ui"],"readme":"# app-components\n\nReact components ready to publish on npm, with a demo app generated for GitHub Pages.\n\n## What is included\n\n- `Datatable`: sortable and paginated table with optional row actions and bulk actions\n- `FilterBar`: reusable filter form that works with the demo app or with your own state\n- `src/App.tsx`: live demo that shows how `FilterBar` and `Datatable` work together\n\n## Install\n\n```bash\nnpm install app-components react react-dom\n```\n\n## Usage\n\n```tsx\nimport { Datatable, FilterBar } from \"app-components\";\n```\n\n### Datatable\n\n`Datatable` can be used in two ways:\n\n- remote mode, when `onFetch` is provided\n- local mode, when `onFetch` is omitted and the component paginates and sorts the rows it receives\n\nOptional action props:\n\n- `onAction`\n- `onBatchAction`\n\nIf they are not provided, the action column and bulk action footer are hidden automatically.\n\n### FilterBar\n\n`FilterBar` emits the current filter values through `onFilter`. The parent decides how to apply them.\n\n## Demo flow\n\nThe main page of this project is the GitHub Pages demo:\n\n1. `FilterBar` updates the active filter values\n2. `App` filters an in-memory list\n3. `Datatable` renders the filtered rows with local sorting and pagination\n\n## Scripts\n\n- `npm run dev` - start the local demo\n- `npm run build` - build the npm package in `dist/`\n- `npm run build:demo` - build the GitHub Pages demo in `docs/`\n- `npm run preview:demo` - preview the demo build locally\n- `npm run lint` - run ESLint\n\n## Package entry points\n\nThe package exports the following from the root entry:\n\n- `Datatable`\n- `FilterBar`\n- all component types from `src/types`\n\n## Publishing notes\n\n- `dist/` is the npm bundle output\n- `docs/` is the GitHub Pages output\n- `react` and `react-dom` are peer dependencies\n\n## Build outputs\n\n- `dist/index.es.js`\n- `dist/index.cjs.js`\n- `dist/types/index.d.ts`\n\n## Example\n\n```tsx\nimport { useMemo, useState } from \"react\";\nimport { Datatable, FilterBar, type DatatableData, type Filter, type FilterValue } from \"app-components\";\n\nexport function UsersDemo() {\n  const [filterValues, setFilterValues] = useState<FilterValue[]>([]);\n\n  const filters = useMemo<Filter[]>(() => [\n    { label: \"Name\", type: \"text\" },\n    { label: \"Role\", type: \"select\", options: [{ label: \"Admin\", value: \"Admin\" }] },\n  ], []);\n\n  const data: DatatableData = {\n    headers: [\"name\", \"role\"],\n    rows: [],\n    total: 0,\n  };\n\n  return (\n    <>\n      <FilterBar filters={filters} onFilter={setFilterValues} />\n      <Datatable data={data} />\n    </>\n  );\n}\n```\n\n","readmeFilename":"README.md","_rev":"1-2bc4f5903166c6b4970715bfeeb03b55"}