@designcrowd/fe-shared-lib 1.5.0-jj-4 → 1.5.1-icontranslation

package/.claude/settings.local.json

@@ -0,0 +1,17 @@
+{
+  "env": {
+    "CLAUDE_CODE_USE_BEDROCK": "1",
+    "AWS_PROFILE": "default",
+    "AWS_REGION": "us-east-1",
+    "ANTHROPIC_MODEL": "global.anthropic.claude-sonnet-4-5-20250929-v1:0",
+    "CLAUDE_CODE_MAX_OUTPUT_TOKENS": "10000",
+    "CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC": "1"
+  },
+  "outputStyle": "default",
+  "spinnerTipsEnabled": false,
+  "permissions": {
+    "allow": [
+      "Bash(mkdir:*)"
+    ]
+  }
+}

package/.claude/skills/publishing-test-versions.md

@@ -0,0 +1,285 @@
+---
+name: publishing-test-versions
+description: Use when you need to publish an experimental/test version of fe-shared-lib to NPM for testing in consuming applications before releasing a stable version
+---
+
+# Publishing Test Versions of fe-shared-lib
+
+This skill guides you through publishing experimental versions of `@designcrowd/fe-shared-lib` to NPM for testing in consuming applications (BrandCrowd.Net, DesignCrowd, Design.com, etc.) before cutting an official release.
+
+## When to Use This Skill
+
+Use this skill when:
+- You've implemented changes that need testing in a real consuming application
+- You want to share work-in-progress for integration testing
+- You're verifying a bug fix works in production-like environments
+- You need to test changes across multiple consuming apps before release
+
+**Do NOT use for:**
+- Final production releases (use standard release process instead)
+- Changes you haven't tested locally in Storybook
+- Untested or broken code
+
+## Pre-Publishing Checklist
+
+Before publishing a test version, create TodoWrite todos for these items:
+
+1. ☐ Verify all changes work correctly in Storybook (`npm start`)
+2. ☐ Run linting and fix any issues (`npm run lint:fix`)
+3. ☐ Ensure translations are bundled if you modified i18n files
+4. ☐ Check git status - know what changes you're publishing
+5. ☐ Verify NPM_TOKEN environment variable is set
+6. ☐ Verify you're on the correct git account (use `gh auth status`)
+
+**IMPORTANT:** NEVER run `npm run build` - it takes too long and isn't required for publishing.
+
+## Publishing Workflow
+
+### Step 1: Create Descriptive Test Version Number
+
+Test versions follow the format: `[current-version]-[description]`
+
+**Examples:**
+- `1.5.1-icon-lang-fix` - Testing icon language attribute fix
+- `1.5.1-spinner-variant` - Testing new spinner variant
+- `1.5.1-dcom-checkout` - Testing Design.com checkout changes
+- `1.5.1-test-GT-8753` - Testing specific Jira ticket
+
+**Rules:**
+- Use lowercase and hyphens (no spaces, underscores, or special chars)
+- Keep description short but meaningful (2-4 words)
+- Include ticket number if relevant (GT-1234, BP-5678)
+
+### Step 2: Update package.json Version
+
+1. Read the current version from package.json
+2. Edit package.json to set the test version number
+3. **Example:**
+   ```json
+   "version": "1.5.1-icon-lang-fix"
+   ```
+
+### Step 3: Update package-lock.json
+
+Run npm install to update the lock file with the new version:
+
+```bash
+npm i
+```
+
+**Important:** This MUST be done before building Docker image, or the lock file will be out of sync.
+
+### Step 4: Verify NPM_TOKEN Environment Variable
+
+Check that NPM_TOKEN is set:
+
+```bash
+echo $NPM_TOKEN
+```
+
+**If empty or undefined:**
+- STOP and ask the user to set NPM_TOKEN
+- The user will need to add it to their environment
+- Do NOT proceed without a valid token
+
+### Step 5: Build and Publish via Docker
+
+Run the Docker build command which will:
+1. Create a Node 20.11.0 container
+2. Install all dependencies
+3. Bundle translations
+4. Publish to NPM registry
+
+```bash
+npm run docker:publish
+```
+
+Or directly:
+```bash
+docker build . --build-arg NPM_TOKEN=$NPM_TOKEN
+```
+
+**Expected output:**
+- You should see npm install logs
+- Translation bundling messages
+- NPM publish success message
+- Final output: "Nothing to do."
+
+**If publish fails:**
+- Check Docker output for error messages
+- Common issues:
+  - NPM_TOKEN not set or invalid
+  - Version number already exists on NPM
+  - Network connectivity issues
+  - Authentication problems
+
+### Step 6: Verify Publication
+
+Check that the version was published to NPM:
+
+```bash
+npm view @designcrowd/fe-shared-lib versions --json | grep -i "[version-substring]"
+```
+
+**Example:**
+```bash
+npm view @designcrowd/fe-shared-lib versions --json | grep -i "icon-lang"
+```
+
+This confirms the test version is available for consumers to install.
+
+### Step 7: Document Test Version for Consumers
+
+Create a summary for the user explaining:
+1. The test version number that was published
+2. How to install it in consuming applications:
+   ```bash
+   npm install @designcrowd/fe-shared-lib@1.5.1-icon-lang-fix
+   ```
+3. What changes are included in this test version
+4. Any testing notes or known limitations
+
+**Example message:**
+```
+Successfully published test version: @designcrowd/fe-shared-lib@1.5.1-icon-lang-fix
+
+To test in consuming applications:
+npm install @designcrowd/fe-shared-lib@1.5.1-icon-lang-fix
+
+Changes in this version:
+- Added lang prop to DcomIcon component
+- Updated SVG title/desc to use dynamic lang attribute
+- Maintains backward compatibility (defaults to 'en')
+
+Testing notes:
+- Test with different locales (fr-FR, es-ES, pt-PT)
+- Verify screen readers announce correct language
+- Check that existing usage without lang prop still works
+```
+
+## Post-Publishing Workflow
+
+After publishing:
+
+1. **Do NOT commit the version change** to git yet - test versions are temporary
+2. Test in consuming application(s)
+3. If issues found:
+   - Fix the issues
+   - Publish a new test version (e.g., `1.5.1-icon-lang-fix-v2`)
+   - Repeat testing
+4. Once testing passes:
+   - Revert package.json back to stable version (e.g., `1.5.1`)
+   - Make a proper release with version bump (e.g., `1.5.2`)
+   - Commit and push the stable release
+
+## Git Account Verification
+
+**Before publishing, verify you're using the correct GitHub account:**
+
+```bash
+gh auth status
+```
+
+Expected output for DesignCrowd work:
+```
+Logged in to github.com as KnowlesZ
+```
+
+If you're on the wrong account:
+- STOP and inform the user
+- Ask them to switch accounts using `gh auth switch`
+
+## Common Pitfalls
+
+**Don't:**
+- ❌ Skip updating package-lock.json (causes version mismatch errors)
+- ❌ Commit test versions to git (they're temporary)
+- ❌ Publish with generic names like `1.5.1-test` (not descriptive)
+- ❌ Forget to bundle translations if you modified i18n files
+- ❌ Run `npm run build` (takes forever, not needed)
+- ❌ Publish without linting first
+- ❌ Use the same test version name twice (causes NPM conflicts)
+
+**Do:**
+- ✅ Use descriptive test version names
+- ✅ Update both package.json and package-lock.json
+- ✅ Verify NPM_TOKEN before starting
+- ✅ Test in Storybook before publishing
+- ✅ Document what's in the test version for consumers
+- ✅ Clean up by reverting version after testing
+
+## Understanding What Gets Published
+
+The `.npmignore` file excludes:
+- `node_modules/`
+- `./src` directory (source code is excluded!)
+- `.storybook-static/`
+- Logs, cache files, and IDE configs
+
+**What DOES get published:**
+- Compiled/built files in `dist/`
+- `index.js` and `index.cjs` (entry points)
+- Translation bundles
+- `package.json` and lock file
+
+This is why the Docker build bundles translations but doesn't require a full build - the source files are published directly.
+
+## Docker Build Process Explained
+
+The Dockerfile performs these steps:
+1. Creates Node 20.11.0 environment
+2. Copies package files and installs dependencies
+3. Copies the entire project
+4. Runs `npm run bundle-translation` (required for i18n)
+5. Runs `npm publish` (publishes to NPM registry)
+6. Copies package.json to artifacts for verification
+
+**Why Docker?**
+- Ensures consistent Node version (20.11.0)
+- Isolates publish environment from local machine
+- Handles NPM authentication securely via build arg
+- Creates reproducible builds
+
+## Troubleshooting
+
+### "npm publish failed"
+- Check if version already exists: `npm view @designcrowd/fe-shared-lib@[version]`
+- Verify NPM_TOKEN is valid
+- Check network connectivity
+- Look at Docker build output for specific error
+
+### "Cannot find NPM_TOKEN"
+- User needs to set environment variable: `export NPM_TOKEN=[token]`
+- Verify with: `echo $NPM_TOKEN`
+- Token must have publish permissions for @designcrowd scope
+
+### "Version already exists"
+- Choose a different test version name
+- Append `-v2`, `-v3`, etc. to your description
+- Example: `1.5.1-icon-lang-fix-v2`
+
+### Package-lock.json out of sync
+- Always run `npm i` after changing package.json version
+- Commit lock file changes along with package.json
+
+### Consumer can't install test version
+- Verify version published: `npm view @designcrowd/fe-shared-lib versions`
+- Check for typos in version string
+- Ensure consuming app has access to @designcrowd scoped packages
+
+## Summary Checklist
+
+Use TodoWrite to create todos for each step:
+
+1. ☐ Run linting (`npm run lint:fix`)
+2. ☐ Test changes in Storybook (`npm start`)
+3. ☐ Verify git account is correct (`gh auth status`)
+4. ☐ Create descriptive test version number
+5. ☐ Update package.json version
+6. ☐ Run `npm i` to update lock file
+7. ☐ Verify NPM_TOKEN is set (`echo $NPM_TOKEN`)
+8. ☐ Run `npm run docker:publish`
+9. ☐ Verify publication with `npm view`
+10. ☐ Document test version for user
+
+Remember: Test versions are temporary. Don't commit them to git. After testing succeeds, revert the version and create a proper release.

package/.eslintrc.js

@@ -20,6 +20,7 @@ module.exports = {
         devDependencies: true,
       },
     ],
+    'import/prefer-default-export': 'off',
     'vue/no-template-target-blank': 'off',
     'vuejs-accessibility/form-control-has-label': 'off',
     'vue/html-button-has-type': 'off',

package/.storybook/test.md

@@ -0,0 +1,3 @@
+![alt text](image.png)
+![alt text](image-1.png)
+![alt text](image-2.png)

package/APasking.md

@@ -0,0 +1,9 @@
+Ask brooke about the critical gap between speed curve and DD rum
+ - Missing data points like blocking time?
+
+
+Get questions together to give to DD solution architect before 
+ - How do we get metrics on the nuxt internals
+ - How can get get API calls made correlated?
+ - Would be good to just have the different types of processing that happens in the SSR/client tracked and mapped.
+ 

package/CLAUDE.md

@@ -2,70 +2,232 @@
 
 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
 
-### 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
+**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)