@acme/ui component library

---

A collection of samples of my work from the last couple years.

• various custom UI components based on radix primitives
• a form system with inputs & field wrappers using react-hook-form and zod (some based on adobe's react-aria-components)
• a data table system wrapping tanstack table
• alert & toast/snackbar notifications systems inlc. components & state/context hooks
• an <Icon> wrapper component using the react-feather icons library
• more! :)

acme-ui.vercel.app

---

written with React, TypeScript, TailwindCSS, & Storybook workshop for component development

a Tsup bundler setup shows how to export this components lib as a package (lib not currently published - this is a demo repo)

---

usage notes

linking locally

prod mode:

• in package.json add the path to the project in the dependencies:

"@acme/ui": "file:../acme"

^ this will pull the components lib from the /dist, so it requires building the library first (must rebuild after making changes)

dev mode:

• use npm link

  --- to link ---

  UI project: npm link

  end project: npm link @acme/ui

  --- to unlink ---

  end project: npm unlink @acme/ui

  UI project: npm unlink

  ^ this uses the components in dev mode, the visual result in dev may differ from the end/production result; will likely require browser refresh after changes

CSS config

if you've setup TW before you prob already know this

on the end project, in tailwind.config.ts

const tailwindPreset = require('@acme/ui/tailwind-config') or import * as tailwindPreset from '@acme/ui/tailwind-config'

then add it as a preset inside the config object presets: [tailwindPreset]

^ this imports the tailwind.config.ts from the UI library and merges it with the TW config of the project, so that the color palette and theme configuration are included in the tailwind build

in the content array of the config, add: './node_modules/@acme/ui/dist/**/*.{cjs,css,cts,ts,js}'

^ this is so that Tailwind classes used by the UI components are included in the css bundle of this project

---

a known issue when publishing a client components lib

so far the popular bundlers do not support this functionality:

they cannot preserve the 'use client' directive individually when exporting Client Components

in the tsup config example, banner adds 'use client' to the top of the bundled .js and .cjs files in the dist

info:

egoist/tsup#835

https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#advice-for-library-authors