{"_id":"@blockydevs/arns-marketplace-ui","name":"@blockydevs/arns-marketplace-ui","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@blockydevs/arns-marketplace-ui","version":"0.1.0","description":"A reusable UI library for interacting with the ArNS Marketplace.","license":"MIT","sideEffects":false,"type":"module","publishConfig":{"access":"public"},"author":{"name":"BlockyDevs"},"main":"./dist/arns-marketplace-ui.cjs","module":"./dist/arns-marketplace-ui.js","types":"./dist/main.d.ts","engines":{"node":">=18"},"exports":{".":{"import":{"types":"./dist/main.d.ts","default":"./dist/arns-marketplace-ui.js"},"require":{"types":"./dist/main.d.ts","default":"./dist/arns-marketplace-ui.cjs"}},"./style.css":"./dist/arns-marketplace-ui.css"},"peerDependencies":{"@radix-ui/react-checkbox":"^1.3.3","@radix-ui/react-dialog":"^1.1.15","@radix-ui/react-label":"^2.1.7","@radix-ui/react-popover":"^1.1.15","@radix-ui/react-select":"^2.2.6","@radix-ui/react-slot":"^1.2.3","@radix-ui/react-tabs":"^1.1.12","@tanstack/react-table":"^8.21.3","class-variance-authority":"^0.7.1","clsx":"^2.1.1","date-fns":"^4.1.0","react":"^19.1.0","react-day-picker":"^9.8.1","react-dom":"^19.1.0"},"devDependencies":{"@changesets/cli":"^2.29.5","@chromatic-com/storybook":"^4.1.0","@commitlint/cli":"^19.8.1","@commitlint/config-conventional":"^19.8.1","@eslint/js":"^9.30.1","@ianvs/prettier-plugin-sort-imports":"^4.5.1","@radix-ui/react-checkbox":"^1.3.3","@radix-ui/react-dialog":"^1.1.15","@radix-ui/react-label":"^2.1.7","@radix-ui/react-popover":"^1.1.15","@radix-ui/react-select":"^2.2.6","@radix-ui/react-slot":"^1.2.3","@radix-ui/react-tabs":"^1.1.12","@storybook/addon-a11y":"^9.1.1","@storybook/addon-docs":"^9.1.1","@storybook/addon-onboarding":"^9.1.1","@storybook/addon-vitest":"^9.1.1","@storybook/react-vite":"^9.1.1","@tailwindcss/postcss":"^4.1.11","@tailwindcss/vite":"^4.1.11","@tanstack/react-table":"^8.21.3","@types/node":"^24.2.0","@types/react":"^19.1.8","@types/react-dom":"^19.1.6","@vitejs/plugin-react":"^4.6.0","@vitest/browser":"^3.2.4","@vitest/coverage-v8":"^3.2.4","autoprefixer":"^10.4.21","class-variance-authority":"^0.7.1","clsx":"^2.1.1","date-fns":"^4.1.0","eslint":"^9.30.1","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.3","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.20","eslint-plugin-storybook":"^9.1.1","eslint-plugin-unicorn":"^60.0.0","postcss":"^8.5.6","prettier":"^3.6.2","prettier-plugin-tailwindcss":"^0.6.14","react-day-picker":"^9.8.1","storybook":"^9.1.1","tailwind-merge":"^3.3.1","tailwindcss":"^4.1.11","typescript":"~5.8.3","typescript-eslint":"^8.35.1","vite":"^7.0.4","vite-plugin-dts":"^4.5.4","vite-plugin-svgr":"^4.3.0","vitest":"^3.2.4"},"scripts":{"build":"pnpm typecheck && vite build","lint":"eslint .","typecheck":"tsc --build --noEmit","storybook":"STORYBOOK=1 storybook dev -p 6006","storybook:public":"storybook dev -p 6006 --host 0.0.0.0","build-storybook":"storybook build","commitlint":"commitlint","changeset:add":"changeset add","changeset:version":"changeset version","changeset:publish":"changeset publish","quickrelease":"pnpm build && changeset add && changeset version && changeset publish"},"_id":"@blockydevs/arns-marketplace-ui@0.1.0","_integrity":"sha512-BP91LYrGuzlsiXjJq0WtTAd3dO1FYGPRp7fs3qjXf3GYlspnkYN+tSUJtvUCvAOefBXCGQNw3KFcJbh3M+8saw==","_resolved":"/tmp/d5ececa25f48c1594752c5180dc6ff98/blockydevs-arns-marketplace-ui-0.1.0.tgz","_from":"file:blockydevs-arns-marketplace-ui-0.1.0.tgz","_nodeVersion":"22.13.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-BP91LYrGuzlsiXjJq0WtTAd3dO1FYGPRp7fs3qjXf3GYlspnkYN+tSUJtvUCvAOefBXCGQNw3KFcJbh3M+8saw==","shasum":"140cf52d57547fd549823188756b4bc03bdaa976","tarball":"https://registry.npmjs.org/@blockydevs/arns-marketplace-ui/-/arns-marketplace-ui-0.1.0.tgz","fileCount":92,"unpackedSize":827729,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDlB67MyaPQV8JvF+eLDOszgMp4+Rl0+Mrybhu0hn5cwAIgfA0KVmxJoefUhjshYyXv2rxmLJvONcrMFKZt2zGwxog="}]},"_npmUser":{"name":"0xmmbd","email":"maciej.malik@blockydevs.com"},"directories":{},"maintainers":[{"name":"bartoszsolkabd","email":"bartosz.solka@blockydevs.com"},{"name":"0xmmbd","email":"maciej.malik@blockydevs.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/arns-marketplace-ui_0.1.0_1758570832089_0.967709155099175"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-22T19:53:52.016Z","0.1.0":"2025-09-22T19:53:52.400Z","modified":"2025-09-22T19:53:52.732Z"},"maintainers":[{"name":"bartoszsolkabd","email":"bartosz.solka@blockydevs.com"},{"name":"0xmmbd","email":"maciej.malik@blockydevs.com"}],"description":"A reusable UI library for interacting with the ArNS Marketplace.","author":{"name":"BlockyDevs"},"license":"MIT","readme":"# @blockydevs/arns-marketplace-ui\n\n### A reusable React UI library for building ArNS marketplace interfaces. It ships a set of accessible, themeable components and higher‑level templates (tables, cards, dialogs, inputs) designed to help you assemble marketplace UIs quickly.\n\n## Table of Contents\n\n<!-- toc -->\n\n- [Installation](#installation)\n- [Quick Start](#quick-start)\n- [Usage](#usage)\n    - [Styles and Theming](#styles-and-theming)\n    - [Components](#components)\n    - [Templates](#templates)\n- [Storybook](#storybook)\n- [Developers](#developers)\n    - [Requirements](#requirements)\n    - [Scripts](#scripts)\n    - [Testing](#testing)\n    - [Linting & Formatting](#linting--formatting)\n\n<!-- tocstop -->\n\n## Installation\n\nRequires node >= 18\n\nUsing pnpm (recommended):\n\n```sh\npnpm add @blockydevs/arns-marketplace-ui\n```\n\n## Quick Start\n\n1) Import the package CSS once in your app entry:\n\n```ts\n// main.tsx or App.tsx\nimport '@blockydevs/arns-marketplace-ui/style.css';\n```\n\n2) Use the components. For best results, wrap the UI area with the provided scope class (see [Styles and Theming](#styles-and-theming)):\n\n```tsx\nimport { Button, Card, Row } from '@blockydevs/arns-marketplace-ui';\n\nexport function Example() {\n  return (\n    <div className=\"arns-marketplace-ui\">\n      <Card className=\"ar:mx-auto ar:flex ar:w-2xl ar:max-w-full ar:flex-col ar:gap-8\">\n        <Row variant=\"large\" label=\"Domain name\" value=\"blockydevs.org\" />\n        <Row label=\"Type of listing\" value=\"Fixed price\" />\n        <Row label=\"Price\" value=\"500.000000 ARIO\" />\n        <Button variant=\"secondary\">Buy now</Button>\n      </Card>\n    </div>\n  );\n}\n```\n\n## Usage\n\n### Styles and Theming\n\n- CSS: The library ships compiled styles. Import once:\n    - `import '@blockydevs/arns-marketplace-ui/style.css';`\n- Scope: Base resets are applied inside an `.arns-marketplace-ui` wrapper to avoid affecting your whole app. Wrap either your entire app or the section that uses these components:\n    - `<div className=\"arns-marketplace-ui\">…</div>`\n- Design tokens: You can override CSS variables to theme the library (e.g. brand color, neutrals, font):\n\n```css\n/* In your global CSS (after the library CSS import) */\n.arns-marketplace-ui {\n  --color-primary: #ffb938; /* brand */\n  --font-base: 'Rubik', ui-sans-serif, system-ui, sans-serif;\n  /* see src/style/global.css for the rest of available tokens */\n}\n```\n\nNote: The internal classes use a Tailwind-style `ar:` prefix, but you do not need Tailwind in your app. The CSS you import already contains the compiled styles.\n\n### Components\n\nImport from the package root. Selected exports:\n\n- Building blocks: `Button`, `Card`, `Header`, `Paragraph`, `Row`, `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`, `Badge`, `Spinner`, `Skeleton`, `Popover`, `Dialog` (and subcomponents)\n- Form: `Input`, `SearchInput`, `Label`, `Checkbox`, `CheckboxWithLabel`, `Select` (and subcomponents), `DatePicker`\n- Navigation/data: `Pagination`\n- Utilities (types and helpers): `getIntervalInMs`, `getIntervalFromMs`, `calculateCurrentDutchListingPrice`, `getDutchListingSchedule`, `formatDate`, `formatDuration`, `formatMillisecondsToDate`, `shortenAddress`, `useCursorPagination`\n\nExample:\n\n```tsx\nimport '@blockydevs/arns-marketplace-ui/style.css';\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from '@blockydevs/arns-marketplace-ui';\n\nexport function TabsExample() {\n  return (\n    <div className=\"arns-marketplace-ui\">\n      <Tabs defaultValue=\"details\">\n        <TabsList>\n          <TabsTrigger value=\"details\">Details</TabsTrigger>\n          <TabsTrigger value=\"history\">History</TabsTrigger>\n        </TabsList>\n        <TabsContent value=\"details\">Domain details…</TabsContent>\n        <TabsContent value=\"history\">Bids history…</TabsContent>\n      </Tabs>\n    </div>\n  );\n}\n```\n\n### Templates\n\nHigher-level, opinionated UI blocks for marketplace flows. For example, `ActiveListingTable` renders responsive tabular data (mobile cards + desktop table):\n\n```tsx\nimport '@blockydevs/arns-marketplace-ui/style.css';\nimport { ActiveListingTable, type Domain } from '@blockydevs/arns-marketplace-ui';\n\nconst data: Domain[] = [\n  {\n    name: 'domain-example',\n    price: { type: 'buyout', value: 500000000, symbol: 'ARIO' },\n    type: { value: 'fixed' },\n    endDate: undefined,\n    action: () => console.log('Buy now')\n  }\n];\n\nexport function Listing() {\n  return (\n    <ActiveListingTable data={data} isPending={false} error={undefined} />\n  );\n}\n```\n\nOther templates include: `BidsTable`, `CompletedListingTable`, `DecreaseScheduleTable`, `MyANTsTable`, `DetailsCard`, `GoBackHeader`.\n\n## Storybook\n\nThis repository includes Storybook with examples for every component and template.\n\n- Start Storybook in dev mode:\n\n```sh\npnpm storybook\n# or: npm run storybook / yarn storybook\n```\n\nOpen http://localhost:6006\n\n- Build static Storybook:\n\n```sh\npnpm build-storybook\n```\n\nTip: See `src/stories/*.stories.tsx` for usage patterns.\n\n## Developers\n\n### Requirements\n\n- node >= 18\n- pnpm (or npm/yarn)\n\n### Scripts\n\n- `pnpm build` — typecheck and build the library with Vite\n- `pnpm storybook` — run Storybook locally on port 6006\n- `pnpm build-storybook` — build static Storybook\n- `pnpm lint` — run eslint\n- `pnpm typecheck` — run TypeScript project references build\n\n### Testing\n\nVitest is configured in the project. To add tests, colocate them near the code and run:\n\n```sh\npnpm test\n```\n\n### Linting & Formatting\n\n- ESLint config is in `eslint.config.js`\n- Prettier config is in `prettier.config.js`\n\nRun checks:\n\n```sh\npnpm lint\n```\n\nFormat:\n\n```sh\npnpm prettier --write .\n```\n","readmeFilename":"README.md","_rev":"1-45570e1159d181b9cd08f13964a7dcae"}