@designcrowd/fe-shared-lib 1.5.1-icontranslation → 1.5.1

package/CLAUDE.md

@@ -2,232 +2,70 @@
 
 This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 
-## Project Overview
-
-`@designcrowd/fe-shared-lib` is a Vue 3 component library and design system used across multiple DesignCrowd products: BrandCrowd, DesignCrowd, CrazyDomains, Design.com, and BrandPage. The library uses Tailwind CSS with a custom `tw-` prefix and features a sophisticated multi-theme system.
-
 ## Development Commands
 
-**Start Development:**
-```bash
-npm start  # Builds Tailwind for all themes + starts Storybook + watches translations
-```
-
-**Storybook:**
-```bash
-npm run storybook  # Starts Storybook dev server on port 6006
-```
-
-**Linting:**
-```bash
-npm run lint       # Lint Vue/JS files
-npm run lint:fix   # Auto-fix linting issues
-```
-
-**Translation Bundles:**
-```bash
-npm run bundle-translation    # Bundle translation files
-npm run watch:translation     # Watch translation files for changes
-```
-
-**Build CSS Only:**
-```bash
-npm run build:css  # Builds Tailwind CSS for all themes
-```
-
-**Testing Single Components:**
-- Use Storybook to develop and test individual components
-- Run `npm start` and navigate to the component's story
-
-## Architecture
-
-### Component Structure
-
-The library follows atomic design principles:
-
-```
-/src
-├── atoms/components/           # Atomic, reusable components
-│   ├── Button/
-│   ├── Icon/
-│   ├── Modal/
-│   ├── design-com/            # Design.com-specific components (DcomIcon, etc.)
-│   └── [30+ other components]
-├── experiences/               # Higher-level feature components
-│   ├── components/           # Auth flows, upload flows, payment config
-│   ├── mixins/
-│   ├── helpers/
-│   ├── clients/              # API clients
-│   └── constants/
-├── themes/                    # Theme configuration files
-├── css/                       # Base CSS and Tailwind setup
-└── bundles/                   # i18n translation bundles
-```
-
-### Multi-Theme System
-
-The library supports 5 product themes, each extending `themes/base.js`:
-
-1. **brandCrowd** (bc.js) - BrandCrowd
-2. **brandPage** (bp.js) - BrandPage
-3. **designCrowd** (dc.js) - DesignCrowd
-4. **crazyDomains** (cd.js) - CrazyDomains
-5. **designCom** (dcom.js) - Design.com
-
-**Theme Configuration:**
-- Each theme defines custom colors (primary, secondary, success, info, warning, error, grayscale, discount)
-- Custom fonts and spacing
-- Tailwind builds separate CSS files: `dist/css/tailwind-{themeName}.css`
-
-**Using Themes in Components:**
-- Components accept a `theme` prop (e.g., 'brandCrowd', 'designCom')
-- Use dynamic component selection: `:is="button-${theme}-${variant}"`
-- Ensure all theme variants are exported from component files
-
-### Internationalization
-
-The library uses i18next with @nuxtjs/i18n for multi-language support:
-
-**Supported Locales:**
-- en-US, de-DE, fr-FR, fr-CA, es-ES, pt-PT, pt-BR
-
-**Usage Pattern:**
-```javascript
-import { setSharedLibLocaleAsync, tr } from '@designcrowd/fe-shared-lib'
-
-// Set locale
-await setSharedLibLocaleAsync('en-US')
-
-// Translate
-const text = tr('translation.key')
-```
-
-**Development Workflow:**
-1. Edit translation files in appropriate directories
-2. Run `npm run bundle-translation` or `npm run watch:translation`
-3. Translations are bundled into `/src/bundles/`
-
-### Component Development Patterns
-
-**Creating New Components:**
-1. Add component to `/src/atoms/components/[ComponentName]/`
-2. Create `[ComponentName].vue` with proper theme support
-3. Create `[ComponentName].stories.js` for Storybook
-4. Export from `/src/atoms/components/index.js`
-5. If theme-specific, create variants in theme subdirectories
-
-**Component Guidelines:**
-- Use Tailwind classes with `tw-` prefix
-- Support all 5 themes or document theme restrictions
-- Include proper ARIA attributes for accessibility
-- Add `lang` prop to text-containing components for i18n
-- Follow variant patterns: primary, secondary, outlined, text, etc.
-
-**Icon System:**
-- Standard icons: Use `Icon.vue` component
-- Design.com specific: Use `design-com/DcomIcon.vue`
-- Icons defined in `Icon/icons/` and `design-com/icons/`
-- SVG icons should include `:lang` attribute when containing text
-
-## Storybook
-
-**Running Storybook:**
-```bash
-npm start  # Includes Storybook + CSS build + translation watch
-```
-
-**Story Files:**
-- Located alongside components: `ComponentName.stories.js`
-- Use `@storybook/vue3` format
-- Published to: https://brandcrowd-storybook.s3.amazonaws.com/fe-shared-lib/live/index.html
-
-**Writing Stories:**
-```javascript
-export default {
-  title: 'atoms/ComponentName',
-  component: ComponentName,
-  argTypes: {
-    theme: {
-      control: { type: 'select' },
-      options: ['brandCrowd', 'designCom', ...]
-    }
-  }
-}
-```
-
-## Build & Publishing
-
-**Version Bump:**
-1. Update version in `package.json`
-2. Run `npm i` to update lock file
-3. Commit changes
-
-**Publishing to NPM:**
-```bash
-npm run docker:publish  # Requires NPM_TOKEN environment variable
-```
-
-**Testing Experimental Versions:**
-1. Set version to `"[current]-[description]"` (e.g., "1.5.1-test-feature")
-2. Build Docker image
-3. Update consuming app's package.json reference
-
-**CI/CD:**
-- AWS CodeBuild auto-deploys Storybook to S3 on master commits
-- Uses Node 20.11.0
-- Configuration in `buildspec.yml`
-
-## ESLint & Code Style
-
-**ESLint Configuration:**
-- Extends Vue recommended, Airbnb, Prettier, and Storybook recommended
-- Console statements allowed in development, error in production
-- Prettier: 120 character line width
-
-**Git Hooks (Husky):**
-- Pre-commit/pre-push runs `lint-staged`
-- Auto-lints and stages `*.{js,jsx,vue}` files
-
-## Common Tasks
-
-**Adding a New Icon:**
-1. Add SVG to `src/atoms/components/Icon/icons/` or `design-com/icons/`
-2. Import in component's icon list
-3. Add story to `Icon.stories.js` or `DcomIcon.stories.js`
-4. If icon contains text, ensure `lang` attribute is properly bound
-
-**Adding a New Theme:**
-1. Create `themes/{themeName}.js` extending `base.js`
-2. Define color palette, fonts, spacing
-3. Update `tailwind.build.js` to include new theme
-4. Run `npm run build:css`
-5. Test in Storybook
-
-**Working with Translations:**
-1. Edit translation files in source directories
-2. Run `npm run watch:translation` during development
-3. Translations auto-bundle to `/src/bundles/`
-4. Use `setSharedLibLocaleAsync()` and `tr()` in components
-
-**Debugging Theme Issues:**
-1. Check that all theme variants exist for the component
-2. Verify CSS was built: `npm run build:css`
-3. Check component exports from `index.js`
-4. Inspect Storybook controls for theme selection
-
-## Technology Stack
-
-- **Framework:** Vue 3.5.15
-- **Build Tool:** Vite 6.3.5
-- **Styling:** TailwindCSS 3.4.1 (with `tw-` prefix)
-- **Documentation:** Storybook 9.0.4
-- **Internationalization:** i18next 25.2.1
-- **Linting:** ESLint (Airbnb + Vue + Prettier)
-- **Git Hooks:** Husky + lint-staged
-
-**Key Dependencies:**
-- Vue Router 4.5.0
-- axios (HTTP client)
-- cropperjs (image cropping)
-- swiper (carousels)
-- dropzone-vue3 (file uploads)
+### Starting Development
+- `npm start` - Builds Tailwind CSS files for all themes and launches Storybook development server on port 6006
+- `npm run storybook` - Same as `npm start` (alias)
+
+### Building
+- `npm run build` - Builds production CSS using Tailwind
+- `npm run build:css` - Builds CSS files using tailwind.build.js
+- `npm run build:storybook` - Builds static Storybook for deployment
+
+### Code Quality
+- `npm run lint` - Runs ESLint on TypeScript, JavaScript, and Vue files in src/
+- `npm run lint:fix` - Automatically fixes linting issues where possible
+
+### Testing in UAT Environment
+To test experimental versions without publishing to production:
+1. Update package.json version to `[current]-[description]`
+2. Run `docker build . --build-arg NPM_TOKEN=$NPM_TOKEN`
+3. Update consumer package reference to the new version
+
+## Architecture Overview
+
+This is a shared component library and design system for DesignCrowd's frontend applications, published as `@designcrowd/fe-shared-lib`.
+
+### Project Structure
+- **`src/atoms/`** - Reusable UI components (Button, Modal, Icon, etc.)
+- **`src/experiences/`** - Complex, business-specific components (AuthFlow, PaymentConfig, etc.)
+- **`src/themes/`** - Tailwind CSS theme configurations for different brands
+- **`src/css/`** - Global CSS and Tailwind configuration
+- **`public/css/`** - Generated CSS output files
+
+### Theme System
+The library supports multiple brand themes through Tailwind CSS:
+- **BrandCrowd** (`bc.js`)
+- **BrandPage** (`bp.js`) 
+- **CrazyDomains** (`cd.js`)
+- **DesignCrowd** (`dc.js`)
+- **Design.com** (`dcom.js`)
+
+Themes are built using `tailwind.themes.js` and exported via `src/themes/themes.js`.
+
+### Component Organization
+- **Atoms**: Basic UI components with stories in Storybook
+- **Experiences**: Complex components combining multiple atoms for specific workflows
+- **Icons**: Extensive icon library with brand-specific variants
+- **Mixins**: Reusable Vue.js mixins for common functionality
+
+### Key Files
+- `index.js` - Main export file exposing all components
+- `tailwind.config.js` - Tailwind CSS configuration
+- `vite.config.ts` - Vite build configuration for development
+
+### Local Development Workflow
+Use `npm link` in this directory and `npm link @designcrowd/fe-shared-lib` in consumer projects for local development.
+
+### Storybook
+- Development server runs on port 6006
+- Live Storybook: https://brandcrowd-storybook.s3.amazonaws.com/fe-shared-lib/live/index.html
+- Stories are co-located with components (`.stories.js` files)
+
+### Brand Page Integration
+For changes affecting BrandPage Tab in BC.NET:
+1. Update app.maker's reference to this library
+2. Bump app.maker version
+3. Run `npm run docker:publish:bp`
+4. Update BC.NET's reference to the new app.maker version