@payfit/unity-components
Version:
56 lines (45 loc) • 2.02 kB
Markdown
---
name: unity-setup-feature-plugin
description: >
Wire Unity into a feature plugin in the hr-apps monorepo. Run the
setup-unity nx generator (installs packages, configures TailwindCSS 4,
sets up TS types, adds providers). Provider order at app root: IntlProvider
→ I18nProvider (react-aria-components) → UnityIconsProvider. Import
@payfit/unity-themes/css/unity.css once. Merge @payfit/unity-components/i18n
JSON into the IntlProvider messages, keyed by locale.
type: lifecycle
library: '@payfit/unity-components'
library_version: '2.x'
sources:
- 'PayFit/hr-apps:libs/shared/unity/components/src/docs/tutorials/Getting Started.mdx'
- 'PayFit/hr-apps:libs/shared/unity/icons/src/components/icons-provider/UnityIconsProvider.tsx'
- 'PayFit/hr-apps:libs/shared/unity/themes/docs/files/MIGRATION-v1.md'
- 'PayFit/hr-apps:libs/shared/unity/components/i18n/'
---
Bootstrap Unity for a feature plugin once. After this skill completes you
can import any export from `@payfit/unity-components` without further
wiring.
## If in hr-apps, use this generator
```bash
pnpm nx g @payfit/nx-tools:setup-unity \
--project=<YOUR_PROJECT> \
--withIcons --withIllustrations
```
The generator installs `@payfit/unity-components`, `@payfit/unity-themes`,
`@payfit/unity-icons`, and (with `--withIllustrations`)
`@payfit/unity-illustrations` from the workspace catalog; wires the
TailwindCSS 4 plugin with the Unity theme preset; adds the
`@payfit/unity-themes` reference to the project `tsconfig`; and
mounts the providers in the correct order at the project entry. Do not
hand-edit those files afterwards — re-run the generator.
Companion generators:
```bash
# Component dev sandbox
pnpm nx g @payfit/nx-tools:sandbox
# Storybook for the project
pnpm nx g @payfit/nx-tools:storybook
```
## Setup (manual fallback)
Use only when the generator cannot run (e.g. setting up a sample app
outside the monorepo).
All details in guide: libs/shared/unity/components/src/docs/tutorials/Getting Started.mdx