From 58dbcd5d83f13e53abeb9df35de63b2528d3eb67 Mon Sep 17 00:00:00 2001 From: Hensley Joo Date: Sat, 16 Aug 2025 19:18:27 +0900 Subject: [PATCH] =?UTF-8?q?[Bug]:=20=20react-heading=20=ED=8C=A8=ED=82=A4?= =?UTF-8?q?=EC=A7=80=20=EC=84=A4=EC=B9=98=20=ED=9B=84=20Module=20not=20fou?= =?UTF-8?q?nd=20=EC=98=A4=EB=A5=98=20=EB=B0=9C=EC=83=9D=20Fixes=20#34?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/violet-jars-invite.md | 25 ++++++++ CLAUDE.md | 76 ++++++++++++++++++++++++ packages/ui/react-heading/README.md | 12 ++-- packages/ui/react-heading/package.json | 4 +- packages/ui/react-heading/vite.config.ts | 4 +- 5 files changed, 111 insertions(+), 10 deletions(-) create mode 100644 .changeset/violet-jars-invite.md create mode 100644 CLAUDE.md diff --git a/.changeset/violet-jars-invite.md b/.changeset/violet-jars-invite.md new file mode 100644 index 0000000..4bc28cb --- /dev/null +++ b/.changeset/violet-jars-invite.md @@ -0,0 +1,25 @@ +--- +"@hensley-ui/react-heading": patch +--- + +fix: resolve Module not found error for react-heading package + +- Users encountered "Module not found: Error: Can't resolve 'react-heading'" +- Package name mismatch between documentation and actual package name +- Missing build files in dist directory +- Inconsistent module format (mixed ESM/CommonJS) + +- Fix package name: use @hensley-ui/react-heading instead of react-heading +- Convert to ESM-only build (remove CommonJS support) +- Update package.json exports configuration +- Regenerate build files with proper ESM format +- Update README.md with correct usage examples +- Fix vite.config.ts for ESM-only output + +- Package now exports only ESM format (removed CommonJS support) +- Users must use @hensley-ui/react-heading instead of react-heading + +- Install: npm install @hensley-ui/react-heading +- Import: import { Heading } from '@hensley-ui/react-heading' + +- Resolves GitHub issue #34 diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..ee7144a --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,76 @@ +# CLAUDE.md + +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. + +## Development Commands + +This is a monorepo using **pnpm workspaces** and **Turbo** for task orchestration. + +### Common Commands +- `pnpm dev` - Start development mode for all packages in parallel +- `pnpm build` - Build all packages (excludes playground) +- `pnpm test` - Run tests for all packages (excludes playground) +- `pnpm type-check` - Type check all packages (excludes playground) +- `pnpm clean` - Clean build artifacts across all packages + +### Package-specific Commands +- `pnpm --filter @hensley-ui/ui storybook` - Run Storybook for the main UI package +- `pnpm build-storybook` - Build Storybook static files + +### Publishing +- `pnpm version-packages` - Version packages using Changesets +- `pnpm ci:publish` - Publish packages to npm (used in CI) + +## Architecture Overview + +This is a **React UI component library** built on top of **Radix UI** and **ShadCN design system**. The project uses a monorepo structure with the following key packages: + +### Workspace Structure +- `packages/ui/` - Main UI library package (`@hensley-ui/ui`) + - Contains polymorphic components (Heading, Button, Dialog, etc.) + - Uses Radix UI primitives with ShadCN styling + - Built with Vite and bundled as ES modules + - Includes Storybook for component documentation + +- `packages/ui/react-button/` - Standalone button package (`@hensley-ui/react-button`) +- `packages/ui/react-heading/` - Standalone heading package +- `packages/typescript-config/` - Shared TypeScript configurations +- `playground/` - Development playground using Vite + React + +### Key Technologies +- **Build System**: Vite with TypeScript and DTS generation +- **Styling**: TailwindCSS with ShadCN design tokens +- **Component Architecture**: Polymorphic components using Radix Slot +- **Testing**: Vitest with React Testing Library +- **Documentation**: Storybook +- **Monorepo**: pnpm workspaces + Turbo + +### Component Philosophy +Components follow a **polymorphic pattern** allowing them to render as different HTML elements via the `as` prop. All components are built with accessibility-first approach using Radix UI primitives. + +Example: +```tsx +Main Title +Paragraph text +``` + +### Build Process +The main UI package builds with Vite, generating: +- ES modules in `dist/index.es.js` +- TypeScript declarations in `dist/index.d.ts` +- CSS bundle in `dist/styles.css` + +Individual component packages are built separately and can be consumed independently. + +## Testing Strategy + +- Unit tests use Vitest + React Testing Library + jsdom +- Run `pnpm test` to execute all tests +- Individual packages can run tests with `pnpm --filter test` + +## Linting and Type Checking + +- ESLint configuration extends from the monorepo root +- TypeScript configs extend from `@hensley-ui/typescript-config` +- Run `pnpm type-check` before building to catch type errors +- Turbo ensures type-checking happens before builds automatically \ No newline at end of file diff --git a/packages/ui/react-heading/README.md b/packages/ui/react-heading/README.md index a234545..3041f9a 100644 --- a/packages/ui/react-heading/README.md +++ b/packages/ui/react-heading/README.md @@ -1,11 +1,11 @@ -# @hensley-ui/heading +# @hensley-ui/react-heading A flexible and accessible heading component built with React and Tailwind CSS. This component provides semantic heading elements (h1-h6) with consistent styling and typography. ## Installation ```bash -npm install @hensley-ui/heading +npm install @hensley-ui/react-heading ``` **Note:** This package depends on `@hensley-ui/utils`. It will be installed automatically. @@ -13,7 +13,7 @@ npm install @hensley-ui/heading ## Usage ```tsx -import { Heading } from '@hensley-ui/heading' +import { Heading } from '@hensley-ui/react-heading' function App() { return ( @@ -55,7 +55,7 @@ Each heading level comes with predefined Tailwind CSS classes: ### Basic Usage ```tsx -import { Heading } from '@hensley-ui/heading' +import { Heading } from '@hensley-ui/react-heading' function Article() { return ( @@ -74,7 +74,7 @@ function Article() { ### Custom Styling ```tsx -import { Heading } from '@hensley-ui/heading' +import { Heading } from '@hensley-ui/react-heading' function CustomHeading() { return ( @@ -93,7 +93,7 @@ function CustomHeading() { The Heading component is polymorphic, meaning you can render it as any heading element: ```tsx -import { Heading } from '@hensley-ui/heading' +import { Heading } from '@hensley-ui/react-heading' function DynamicHeading({ level, children }) { return ( diff --git a/packages/ui/react-heading/package.json b/packages/ui/react-heading/package.json index e503c80..a0b0678 100644 --- a/packages/ui/react-heading/package.json +++ b/packages/ui/react-heading/package.json @@ -34,9 +34,9 @@ ], "exports": { ".": { + "types": "./dist/index.d.ts", "import": "./dist/index.mjs", - "require": "./dist/index.js", - "types": "./dist/index.d.ts" + "default": "./dist/index.mjs" } }, "scripts": { diff --git a/packages/ui/react-heading/vite.config.ts b/packages/ui/react-heading/vite.config.ts index 6e1dcaf..811d05a 100644 --- a/packages/ui/react-heading/vite.config.ts +++ b/packages/ui/react-heading/vite.config.ts @@ -7,8 +7,8 @@ export default defineConfig({ outDir: 'dist', lib: { entry: resolve(__dirname, 'src/index.ts'), - formats: ['es', 'cjs'], - fileName: (format) => `index.${format === 'es' ? 'mjs' : 'js'}`, + formats: ['es'], + fileName: () => 'index.mjs', }, rollupOptions: { external: ['react', 'react-dom', 'react/jsx-runtime'],