@ez/ez-tag

Replace standard HTML tags (div, section, header, etc.) with a flexible and stylized React component.
Designed for internal and public use across all EZ projects.

🚀 Features

• One single tag to rule them all: EzTag
• Tailwind-based semantic variants per HTML tag
• IntelliSense and type safety (TS)
• Lightweight & framework-agnostic (usable in Next.js, Vite, etc.)

📦 Dev vs Prod usage

🔧 In development (monorepo local only)

You consume the non-transpiled EzTag.tsx directly via a TypeScript paths alias.

In your project’s tsconfig.json:

{
  "compilerOptions": {
    "paths": {
      "@ez/ez-tag": ["../ez-libs/ez-tag/components/EzTag.tsx"]
    }
  }
}

This allows you to edit the lib and get instant updates in the consuming project without building.

📦 In production (after NPM publish)

You consume the transpiled version from NPM:

import { EzTag } from '@ez/ez-tag';

As long as you publish the same version as the one declared in your consuming project's package.json, everything will work automatically (no extra config needed in CI or production).

🧪 Dev locally

You consume the transpiled version from NPM:

# From the monorepo root
pnpm install
# Edit the code inside ez-tag/components, all projects using the alias will update in real time

📤 Publish to npm

⚠️ Make sure you're logged in first.

1. Log into NPM

npm login

2. Bump version, build & publish

# Choose one:
pnpm version patch   # Fix
pnpm version minor   # Feature
pnpm version major   # Breaking

# Then:
pnpm build
pnpm publish --access public

2. (bis) Alternatively

cd ez-libs/ez-tag
pnpm version minor && pnpm build && pnpm publish --access public

📂 Structure

ez-tag/
├── src/
│   ├── components/
│   │   └── EzTag.tsx // Main React component. Renders a polymorphic HTML tag (`as` prop)
│   ├── utils/
│   │   ├── twMerge.ts // Utility that composes Tailwind class strings by running `clsx` and then merging with `tailwind-merge` to eliminate conflicting styles.
│   ├── styles/
│   │   ├── default-variants.ts // Exports `EzTagDefaultVariants`: a map from each `LayoutTag` to its default Tailwind CSS class string.
│   │   ├── themed-variants.ts // (Optional) Exports `EzTagThemedVariants`: per-tag variant class overrides used when you apply a theme.
│   │   └── index.ts // Combines default and themed variants into a single `EzTagVariants` object and exports the `VariantKey<T>` type.
│   ├── types/
│   │   ├── index.ts // Barrel file that re-exports all public types (`LayoutTag`, `EzTagProps`, `IntrinsicProps`, etc.).
│   │   ├── props.ts // Defines the generic `EzTagProps<T>` interface, merging your `as`/`variant` props with the correct intrinsic HTML props and conditional `children`.
│   │   ├── supported-tags.ts // Single source-of-truth for supported HTML tags. Exports the arrays `TAGS_WITH_CHILDREN`, `TAGS_WITHOUT_CHILDREN`, the `ALL_LAYOUT_TAGS` tuple, and the `LayoutTag` union.
│   │   ├── accessibility.ts //  Maps each `LayoutTag` to its default ARIA attributes (roles, aria-level, etc.) in `EzTagA11y`.
│   │   └── overrides.ts // Declares `EzTagOverrides`: for tags like `img` or `input`, forces specific props (e.g. `alt`, `src`, `type`) to be required.
│   ├── runtime-checks/
│   │   ├── index.ts
│   │   └── imageCheck.ts
│   └── index.ts
├── dist/                      ➜ Fichiers compilés (CJS + ESM + `.d.ts`)
├── package.json               ➜ Métadonnées, scripts, deps, exports
├── tsconfig.json              ➜ Config TypeScript pour build
└── README.md                  ➜ Documentation générale

✅ Notes

• @ez/ez-tag is not built automatically. Always run pnpm build before publishing.
• Don't forget to align the version in consumers (package.json) once published.
• Internal usage is resolved via tsconfig.json → paths

MIT License — EZ ✨