@designcrowd/fe-shared-lib 1.6.10 → 1.7.0

package/CLAUDE.md

@@ -1,94 +1,94 @@
-# CLAUDE.md
-
-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 shared Vue 3 component library and design system for DesignCrowd's frontend applications (BrandCrowd, Design.com, CrazyDomains, DesignCrowd, BrandPage). Published to NPM as a scoped package.
-
-- **Default branch**: `master`
-- **Node**: 20.x
-- **Framework**: Vue 3 + Vite + Storybook 9
-
-## Commands
-
-```bash
-npm start                 # Build Tailwind CSS + launch Storybook on port 6006
-npm run build             # Build production CSS (all themes)
-npm run build:storybook   # Build static Storybook for S3 deployment
-npm run lint              # ESLint check (src/ directory)
-npm run lint:fix          # ESLint auto-fix
-```
-
-**No test runner is configured.** Vue Test Utils (`@vue/test-utils`) is installed as a dev dependency but there is no Vitest/Jest setup and no `npm test` script. Do not attempt to run tests.
-
-## Architecture
-
-### Project Structure
-- **`src/atoms/`** — Reusable UI components (Button, Modal, Icon, Dropdown, TextInput, etc.)
-- **`src/experiences/`** — Complex business-specific components (AuthFlow, PaymentConfig, UploadLogo, etc.)
-- **`src/themes/`** — Tailwind CSS theme configurations per brand
-- **`src/css/`** — Global CSS and Tailwind entry point
-- **`src/bundles/`** — Generated i18n translation bundles
-
-### Theme System (5 brands)
-Each brand has its own Tailwind theme extending a shared base:
-- `bc.js` (BrandCrowd), `dcom.js` (Design.com), `dc.js` (DesignCrowd), `cd.js` (CrazyDomains), `bp.js` (BrandPage)
-
-Themes are compiled into separate CSS files via `tailwind.build.js` → `dist/css/tailwind-[theme].css`
-
-### Component Organization
-- **Atoms**: Simple, reusable UI primitives with Storybook stories
-- **Experiences**: Complex multi-atom components for specific workflows (auth, payments, uploads)
-- **Icons**: Extensive icon library in `src/atoms/components/Icon/` with brand-specific variants
-
-### Key Files
-- `index.js` / `index.cjs` — Main exports (dual ESM/CJS)
-- `tailwind.config.js` — Tailwind CSS configuration
-- `tailwind.build.js` — CSS build script (multi-theme)
-- `vite.config.ts` — Vite dev configuration
-
-## Coding Standards
-
-### Formatting (Prettier)
-- Single quotes (`singleQuote: true`)
-- Print width: 120 characters
-- Trailing commas: all
-- Arrow parens: always
-
-### Linting (ESLint)
-- Extends: `plugin:vue/recommended`, `@vue/airbnb`, `@vue/prettier`
-- `no-console`: warn in production
-- `import/prefer-default-export`: off
-
-### Styling
-- **Tailwind CSS** with `tw-` prefix for utility classes
-- No SCSS — PostCSS only
-- Theme-specific styles via the multi-brand theme system
-
-### Vue Components
-- Vue 3 Single File Components (`.vue`)
-- Stories co-located with components (`.stories.js` files)
-- Mixins in `src/atoms/mixin/` and `src/experiences/mixins/`
-
-## Storybook
-
-- Dev server: `npm start` → http://localhost:6006
-- Live: https://brandcrowd-storybook.s3.amazonaws.com/fe-shared-lib/live/index.html
-- Stories pattern: `src/**/components/**/*.stories.@(js|jsx|ts|tsx)`
-- Supports theme switching (5 brands) and locale switching (8 languages)
-
-## Local Development
-
-Use `npm link` for local development with consumer projects:
-```bash
-npm link                                           # in this directory
-npm link @designcrowd/fe-shared-lib                # in consumer project
-```
-
-## Publishing (UAT)
-
-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
+# CLAUDE.md
+
+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 shared Vue 3 component library and design system for DesignCrowd's frontend applications (BrandCrowd, Design.com, CrazyDomains, DesignCrowd, BrandPage). Published to NPM as a scoped package.
+
+- **Default branch**: `master`
+- **Node**: 20.x
+- **Framework**: Vue 3 + Vite + Storybook 9
+
+## Commands
+
+```bash
+npm start                 # Build Tailwind CSS + launch Storybook on port 6006
+npm run build             # Build production CSS (all themes)
+npm run build:storybook   # Build static Storybook for S3 deployment
+npm run lint              # ESLint check (src/ directory)
+npm run lint:fix          # ESLint auto-fix
+```
+
+**No test runner is configured.** Vue Test Utils (`@vue/test-utils`) is installed as a dev dependency but there is no Vitest/Jest setup and no `npm test` script. Do not attempt to run tests.
+
+## Architecture
+
+### Project Structure
+- **`src/atoms/`** — Reusable UI components (Button, Modal, Icon, Dropdown, TextInput, etc.)
+- **`src/experiences/`** — Complex business-specific components (AuthFlow, PaymentConfig, UploadLogo, etc.)
+- **`src/themes/`** — Tailwind CSS theme configurations per brand
+- **`src/css/`** — Global CSS and Tailwind entry point
+- **`src/bundles/`** — Generated i18n translation bundles
+
+### Theme System (5 brands)
+Each brand has its own Tailwind theme extending a shared base:
+- `bc.js` (BrandCrowd), `dcom.js` (Design.com), `dc.js` (DesignCrowd), `cd.js` (CrazyDomains), `bp.js` (BrandPage)
+
+Themes are compiled into separate CSS files via `tailwind.build.js` → `dist/css/tailwind-[theme].css`
+
+### Component Organization
+- **Atoms**: Simple, reusable UI primitives with Storybook stories
+- **Experiences**: Complex multi-atom components for specific workflows (auth, payments, uploads)
+- **Icons**: Extensive icon library in `src/atoms/components/Icon/` with brand-specific variants
+
+### Key Files
+- `index.js` / `index.cjs` — Main exports (dual ESM/CJS)
+- `tailwind.config.js` — Tailwind CSS configuration
+- `tailwind.build.js` — CSS build script (multi-theme)
+- `vite.config.ts` — Vite dev configuration
+
+## Coding Standards
+
+### Formatting (Prettier)
+- Single quotes (`singleQuote: true`)
+- Print width: 120 characters
+- Trailing commas: all
+- Arrow parens: always
+
+### Linting (ESLint)
+- Extends: `plugin:vue/recommended`, `@vue/airbnb`, `@vue/prettier`
+- `no-console`: warn in production
+- `import/prefer-default-export`: off
+
+### Styling
+- **Tailwind CSS** with `tw-` prefix for utility classes
+- No SCSS — PostCSS only
+- Theme-specific styles via the multi-brand theme system
+
+### Vue Components
+- Vue 3 Single File Components (`.vue`)
+- Stories co-located with components (`.stories.js` files)
+- Mixins in `src/atoms/mixin/` and `src/experiences/mixins/`
+
+## Storybook
+
+- Dev server: `npm start` → http://localhost:6006
+- Live: https://brandcrowd-storybook.s3.amazonaws.com/fe-shared-lib/live/index.html
+- Stories pattern: `src/**/components/**/*.stories.@(js|jsx|ts|tsx)`
+- Supports theme switching (5 brands) and locale switching (8 languages)
+
+## Local Development
+
+Use `npm link` for local development with consumer projects:
+```bash
+npm link                                           # in this directory
+npm link @designcrowd/fe-shared-lib                # in consumer project
+```
+
+## Publishing (UAT)
+
+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

package/Dockerfile

@@ -1,43 +1,43 @@
-FROM node:20.11.0-slim
-
-RUN npm i -g npm@10.7.0
-
-RUN apt-get update \
-    && apt-get install -qq build-essential python3
-
-WORKDIR /app
-
-# First we copy only the things needed by gulp to preload the resources
-COPY package.json .
-COPY package-lock.json .
-
-# Import the token to access private npm packages
-COPY npmrc .
-
-# Copy the npmrc and rename it to .npmrc -- reason being if its present in the repository with the '.' then npm tries to use it.. ¯\_(ツ)_/¯
-RUN mv npmrc .npmrc
-
-ARG NPM_TOKEN
-RUN echo $NPM_TOKEN
-
-RUN npm i
-
-COPY . .
-
-COPY .npmignore ./
-
-RUN npm run bundle-translation
-
-RUN mkdir artifacts
-RUN npm publish || (touch artifacts/npm_publish_failed && exit 1)
-RUN cp package.json artifacts/
-
-ENTRYPOINT ["/bin/echo", "Nothing to do."]
-
-# Publish to NPM:
-#
-# Windows
-# docker build . --build-arg NPM_TOKEN=%NPM_TOKEN%
-#
-# Linux
-# docker build . --build-arg NPM_TOKEN=$NPM_TOKEN
+FROM node:20.11.0-slim
+
+RUN npm i -g npm@10.7.0
+
+RUN apt-get update \
+    && apt-get install -qq build-essential python3
+
+WORKDIR /app
+
+# First we copy only the things needed by gulp to preload the resources
+COPY package.json .
+COPY package-lock.json .
+
+# Import the token to access private npm packages
+COPY npmrc .
+
+# Copy the npmrc and rename it to .npmrc -- reason being if its present in the repository with the '.' then npm tries to use it.. ¯\_(ツ)_/¯
+RUN mv npmrc .npmrc
+
+ARG NPM_TOKEN
+RUN echo $NPM_TOKEN
+
+RUN npm i
+
+COPY . .
+
+COPY .npmignore ./
+
+RUN npm run bundle-translation
+
+RUN mkdir artifacts
+RUN npm publish || (touch artifacts/npm_publish_failed && exit 1)
+RUN cp package.json artifacts/
+
+ENTRYPOINT ["/bin/echo", "Nothing to do."]
+
+# Publish to NPM:
+#
+# Windows
+# docker build . --build-arg NPM_TOKEN=%NPM_TOKEN%
+#
+# Linux
+# docker build . --build-arg NPM_TOKEN=$NPM_TOKEN

package/README.md

@@ -1,103 +1,103 @@
-# fe-shared-lib
-
-## Contents
-
-- [Start](#start)
-- [Local Development](#local-development)
-- [Testing in a UAT](#testing-uat)
-- [Storybook](#storybook)
-
-```
-npm install
-```
-
-### Start
-
-This command will build all of the necessary Tailwind files for each theme and setup the configuration for Storybook. Once complete, Storybook will open and you can preview the shared components.
-
-```
-npm start
-```
-
-<a id="local-development"></a>
-
-### Local Development
-
-To edit the design system locally whilst being using in a consumer you need to run `npm link` in this directory and then `npm link @designcrowd/fe-shared-lib` in the consumer.
-
-<a id="testing-uat"></a>
-
-### Testing in a UAT
-
-If you want to have an experimental version of your change, like have it in a uat env without publishing it to prod:
-
-1. Update package.json with `"version": "[current]-[short description of your work]"`
-2. Run npm i
-3. run `docker build . --build-arg NPM_TOKEN=$NPM_TOKEN` in the project directory (make sure you have $NPM_TOKEN properly set in your local env)
-4. Update package reference in the consumer to the version you have just built
-
-### If you are making changes to components used into the BrandPage Tab in BC.NET
-
-1. Get latest app.maker source code.
-2. Update its reference to `@designcrowd/fe-shared-lib` with the one you just built
-3. Bump its version (app.maker version)
-4. Run `npm run docker:publish:bp`
-5. IN BC.Net Update reference of `@designcrowd/library.brand-page` to use the version you just set in the app.maker
-
-<a id="storybook"></a>
-
-### Storybook
-
-Storybook is published with each new commit to `master` and can be found here:
-
-https://brandcrowd-storybook.s3.amazonaws.com/fe-shared-lib/live/index.html
-
-
-
-
-# atoms (formerly shared-component-library)
-
-This flow chart describes the workflow for the shared component library.
-https://app.diagrams.net/#G1TtCW8-zgVQz7bacsfQpqL5ZYCzeCGnXu
-
-
-## Project setup
-
-```
-npm i
-```
-
-### Start
-
-This command will build all necessary Tailwind files for each theme and set up the configuration for Storybook. Once complete, Storybook will open and you can preview the shared components.
-
-```
-npm start
-```
-
-### Local Development
-
-### Storybook
-
-Update Storybook: `npx storybook@latest upgrade`
-
-Writing stories: 
-
-* Storybook Vue 3 docs: https://storybook.js.org/docs/get-started/vue3-vite
-* Official examples: https://github.com/storybookjs/storybook/blob/next/test-storybooks/portable-stories-kitchen-sink/vue3/stories/Button.stories.ts
-
-
-
-# DesignCrowd Tailwind Configuration
-The purpose of the `themes` directory is to build up a library of themes for our different products in a single place. These themes are then exported and consumed into each product using a local Tailwind CSS setup specific to that product. This provides us with a consistent approach for our colours, fonts, spacing etc whilst also being able to control the Tailwind CSS styles across all of our products.
-
-TODO This repository is published as an NPM package and it's themes and helper functions are exposed in the `index.js` file.
-
-## Adding new configuration styles
-New configuration styles can be added to the `themes/base.js` file which will be shared by all child themes. If you want to add a new option only in a specific theme, then edit the `themes/xx.js` file. The format for the theme files follows the structure of the `tailwind.config.js` file. https://tailwindcss.com/docs/configuration
-
-## Adding new themes
-New themes can be added by creating a new xx.js file in the themes folder. Once the new theme has been configured, it will need to be made exportable in the `index.js` file.
-
-## Versioning
-Ensure to bump the version number in `package.json` followed by running `npm i` before each commit. And then run `npm run docker:publish` to publish the version to NPM.
+# fe-shared-lib
+
+## Contents
+
+- [Start](#start)
+- [Local Development](#local-development)
+- [Testing in a UAT](#testing-uat)
+- [Storybook](#storybook)
+
+```
+npm install
+```
+
+### Start
+
+This command will build all of the necessary Tailwind files for each theme and setup the configuration for Storybook. Once complete, Storybook will open and you can preview the shared components.
+
+```
+npm start
+```
+
+<a id="local-development"></a>
+
+### Local Development
+
+To edit the design system locally whilst being using in a consumer you need to run `npm link` in this directory and then `npm link @designcrowd/fe-shared-lib` in the consumer.
+
+<a id="testing-uat"></a>
+
+### Testing in a UAT
+
+If you want to have an experimental version of your change, like have it in a uat env without publishing it to prod:
+
+1. Update package.json with `"version": "[current]-[short description of your work]"`
+2. Run npm i
+3. run `docker build . --build-arg NPM_TOKEN=$NPM_TOKEN` in the project directory (make sure you have $NPM_TOKEN properly set in your local env)
+4. Update package reference in the consumer to the version you have just built
+
+### If you are making changes to components used into the BrandPage Tab in BC.NET
+
+1. Get latest app.maker source code.
+2. Update its reference to `@designcrowd/fe-shared-lib` with the one you just built
+3. Bump its version (app.maker version)
+4. Run `npm run docker:publish:bp`
+5. IN BC.Net Update reference of `@designcrowd/library.brand-page` to use the version you just set in the app.maker
+
+<a id="storybook"></a>
+
+### Storybook
+
+Storybook is published with each new commit to `master` and can be found here:
+
+https://brandcrowd-storybook.s3.amazonaws.com/fe-shared-lib/live/index.html
+
+
+
+
+# atoms (formerly shared-component-library)
+
+This flow chart describes the workflow for the shared component library.
+https://app.diagrams.net/#G1TtCW8-zgVQz7bacsfQpqL5ZYCzeCGnXu
+
+
+## Project setup
+
+```
+npm i
+```
+
+### Start
+
+This command will build all necessary Tailwind files for each theme and set up the configuration for Storybook. Once complete, Storybook will open and you can preview the shared components.
+
+```
+npm start
+```
+
+### Local Development
+
+### Storybook
+
+Update Storybook: `npx storybook@latest upgrade`
+
+Writing stories: 
+
+* Storybook Vue 3 docs: https://storybook.js.org/docs/get-started/vue3-vite
+* Official examples: https://github.com/storybookjs/storybook/blob/next/test-storybooks/portable-stories-kitchen-sink/vue3/stories/Button.stories.ts
+
+
+
+# DesignCrowd Tailwind Configuration
+The purpose of the `themes` directory is to build up a library of themes for our different products in a single place. These themes are then exported and consumed into each product using a local Tailwind CSS setup specific to that product. This provides us with a consistent approach for our colours, fonts, spacing etc whilst also being able to control the Tailwind CSS styles across all of our products.
+
+TODO This repository is published as an NPM package and it's themes and helper functions are exposed in the `index.js` file.
+
+## Adding new configuration styles
+New configuration styles can be added to the `themes/base.js` file which will be shared by all child themes. If you want to add a new option only in a specific theme, then edit the `themes/xx.js` file. The format for the theme files follows the structure of the `tailwind.config.js` file. https://tailwindcss.com/docs/configuration
+
+## Adding new themes
+New themes can be added by creating a new xx.js file in the themes folder. Once the new theme has been configured, it will need to be made exportable in the `index.js` file.
+
+## Versioning
+Ensure to bump the version number in `package.json` followed by running `npm i` before each commit. And then run `npm run docker:publish` to publish the version to NPM.

package/buildspec.yml

@@ -1,47 +1,47 @@
-version: 0.2
-environment_variables:
-  plaintext:
-    S3_KEY_PREFIX: 'brandcrowd-storybook/fe-shared-lib'
-    STATIC_PATH: './.storybook-static'
-env:
-  parameter-store:
-    NPM_TOKEN: 'publish-npm-designcrowd-token'
-    build_docker_username: 'build-docker-username'
-    build_docker_password: 'build-docker-password'
-phases:
-  install:
-    runtime-versions:
-      nodejs: 20
-    commands:
-      - npm i -g npm@10.4.0
-      - cp npmrc .npmrc
-      - npm install
-      - echo Installing yarn...
-      - npm install -g yarn
-  pre_build:
-    commands:
-      - IMAGE_TAG=$(echo $CODEBUILD_RESOLVED_SOURCE_VERSION | cut -c 1-7)
-  build:
-    commands:
-      - echo Build started on `date`
-      - echo Building the Docker image...
-      - docker login -u $build_docker_username -p $build_docker_password
-      - yarn build
-      - docker build -t $IMAGE_TAG --build-arg NPM_TOKEN=$NPM_TOKEN .
-      - echo Build started on `date`
-      - yarn bundle-translation
-      - yarn build:storybook
-  post_build:
-    commands:
-      - echo Build completed on `date`
-      - echo Extracting artifacts from Docker container...
-      - docker create --name "temp_library.fe-shared-lib_$IMAGE_TAG" $IMAGE_TAG
-      - docker cp temp_library.fe-shared-lib_$IMAGE_TAG:/app/artifacts .
-      - docker rm temp_library.fe-shared-lib_$IMAGE_TAG
-      - NPM_PUBLISH_FAILED=$(ls -1 ./artifacts/npm_publish_failed | wc -l)
-      - NPM_PUBLISH_VERSION=$(grep version ./artifacts/package.json | sed -En "s/\s+\"version\".\s+\"(.+)\",/\1/p")
-      - JSON="{\"npmPublishVersion\":{\"DataType\":\"String\",\"StringValue\":\"$NPM_PUBLISH_VERSION\"},\"npmPublishFailed\":{\"DataType\":\"String\",\"StringValue\":\"$NPM_PUBLISH_FAILED\"},\"gitRepoName\":{\"DataType\":\"String\",\"StringValue\":\"fe-shared-lib\"}, \"gitHash\":{\"DataType\":\"String\",\"StringValue\":\"${CODEBUILD_RESOLVED_SOURCE_VERSION}\"}, \"containerPath\":{\"DataType\":\"String\",\"StringValue\":\"${IMAGE_TAG}\"}}"
-      - aws sns publish --topic-arn "arn:aws:sns:us-east-1:104415087145:ci-libraryimagemaker-build" --message "Build Complete" --message-attributes "$JSON"
-      - aws s3 rm s3://${S3_KEY_PREFIX}/live --recursive
-      - aws s3 cp ${STATIC_PATH}/ s3://${S3_KEY_PREFIX}/live --recursive
-      - echo Build completed on `date`
+version: 0.2
+environment_variables:
+  plaintext:
+    S3_KEY_PREFIX: 'brandcrowd-storybook/fe-shared-lib'
+    STATIC_PATH: './.storybook-static'
+env:
+  parameter-store:
+    NPM_TOKEN: 'publish-npm-designcrowd-token'
+    build_docker_username: 'build-docker-username'
+    build_docker_password: 'build-docker-password'
+phases:
+  install:
+    runtime-versions:
+      nodejs: 20
+    commands:
+      - npm i -g npm@10.4.0
+      - cp npmrc .npmrc
+      - npm install
+      - echo Installing yarn...
+      - npm install -g yarn
+  pre_build:
+    commands:
+      - IMAGE_TAG=$(echo $CODEBUILD_RESOLVED_SOURCE_VERSION | cut -c 1-7)
+  build:
+    commands:
+      - echo Build started on `date`
+      - echo Building the Docker image...
+      - docker login -u $build_docker_username -p $build_docker_password
+      - yarn build
+      - docker build -t $IMAGE_TAG --build-arg NPM_TOKEN=$NPM_TOKEN .
+      - echo Build started on `date`
+      - yarn bundle-translation
+      - yarn build:storybook
+  post_build:
+    commands:
+      - echo Build completed on `date`
+      - echo Extracting artifacts from Docker container...
+      - docker create --name "temp_library.fe-shared-lib_$IMAGE_TAG" $IMAGE_TAG
+      - docker cp temp_library.fe-shared-lib_$IMAGE_TAG:/app/artifacts .
+      - docker rm temp_library.fe-shared-lib_$IMAGE_TAG
+      - NPM_PUBLISH_FAILED=$(ls -1 ./artifacts/npm_publish_failed | wc -l)
+      - NPM_PUBLISH_VERSION=$(grep version ./artifacts/package.json | sed -En "s/\s+\"version\".\s+\"(.+)\",/\1/p")
+      - JSON="{\"npmPublishVersion\":{\"DataType\":\"String\",\"StringValue\":\"$NPM_PUBLISH_VERSION\"},\"npmPublishFailed\":{\"DataType\":\"String\",\"StringValue\":\"$NPM_PUBLISH_FAILED\"},\"gitRepoName\":{\"DataType\":\"String\",\"StringValue\":\"fe-shared-lib\"}, \"gitHash\":{\"DataType\":\"String\",\"StringValue\":\"${CODEBUILD_RESOLVED_SOURCE_VERSION}\"}, \"containerPath\":{\"DataType\":\"String\",\"StringValue\":\"${IMAGE_TAG}\"}}"
+      - aws sns publish --topic-arn "arn:aws:sns:us-east-1:104415087145:ci-libraryimagemaker-build" --message "Build Complete" --message-attributes "$JSON"
+      - aws s3 rm s3://${S3_KEY_PREFIX}/live --recursive
+      - aws s3 cp ${STATIC_PATH}/ s3://${S3_KEY_PREFIX}/live --recursive
+      - echo Build completed on `date`