@designcrowd/fe-shared-lib 1.5.7-fix-icon → 1.5.8

package/.eslintrc.js

@@ -1,36 +1,36 @@
-module.exports = {
-  root: true,
-  env: {
-    browser: true,
-  },
-  extends: ['plugin:vue/recommended', '@vue/airbnb', '@vue/prettier', 'plugin:storybook/recommended'],
-  parser: 'vue-eslint-parser',
-  plugins: ['prettier', '@typescript-eslint'],
-  parserOptions: {
-    parser: '@typescript-eslint/parser',
-    ecmaVersion: 2020,
-    sourceType: 'module',
-  },
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'import/no-extraneous-dependencies': [
-      'error',
-      {
-        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',
-    'vue/no-reserved-component-names': 'off',
-    'vuejs-accessibility/click-events-have-key-events': 'off',
-  },
-  overrides: [
-    {
-      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.test.{j,t}s?(x)'],
-      env: {},
-    },
-  ],
-};
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+  },
+  extends: ['plugin:vue/recommended', '@vue/airbnb', '@vue/prettier', 'plugin:storybook/recommended'],
+  parser: 'vue-eslint-parser',
+  plugins: ['prettier', '@typescript-eslint'],
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    ecmaVersion: 2020,
+    sourceType: 'module',
+  },
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'import/no-extraneous-dependencies': [
+      'error',
+      {
+        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',
+    'vue/no-reserved-component-names': 'off',
+    'vuejs-accessibility/click-events-have-key-events': 'off',
+  },
+  overrides: [
+    {
+      files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.test.{j,t}s?(x)'],
+      env: {},
+    },
+  ],
+};

package/.github/workflows/auto-merge.yml

@@ -1,52 +1,52 @@
-name: Auto Merge PR for smartling-github-connector
-
-# Trigger the workflow when a pull request is opened or updated
-on:
-  pull_request:
-    types: [opened, synchronize, reopened]
-
-jobs:
-  auto-merge:
-    runs-on: ubuntu-latest
-
-    # Only run if the PR is from smartling-github-connector
-    if: contains(github.event.pull_request.user.login, 'smartling-github-connector')
-
-    steps:
-      # Checkout the repository
-      - name: Checkout repository
-        uses: actions/checkout@v3
-
-      # Set up GitHub CLI
-      - name: Setup GitHub CLI
-        run: |
-          echo "${{ secrets.GITHUB_TOKEN }}" | gh auth login --with-token
-
-      # Check if PR is mergeable
-      - name: Check PR status
-        id: check_pr
-        run: |
-          PR_NUMBER=${{ github.event.pull_request.number }}
-          MERGEABLE=$(gh pr view $PR_NUMBER --json mergeable | jq -r '.mergeable')
-          echo "Mergeable status: $MERGEABLE"
-          echo "mergeable=$MERGEABLE" >> $GITHUB_OUTPUT
-
-      # Auto-merge the PR if it's mergeable
-      - name: Auto-merge PR
-        if: steps.check_pr.outputs.mergeable == 'MERGEABLE'
-        run: |
-          gh pr merge ${{ github.event.pull_request.number }} \
-            --auto \
-            --squash \
-            --delete-branch
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      # Add a comment if PR can't be merged
-      - name: Comment on unmergeable PR
-        if: steps.check_pr.outputs.mergeable != 'MERGEABLE'
-        run: |
-          gh pr comment ${{ github.event.pull_request.number }} \
-            --body "PR cannot be automatically merged due to conflicts or other issues. Please resolve manually."
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+name: Auto Merge PR for smartling-github-connector
+
+# Trigger the workflow when a pull request is opened or updated
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  auto-merge:
+    runs-on: ubuntu-latest
+
+    # Only run if the PR is from smartling-github-connector
+    if: contains(github.event.pull_request.user.login, 'smartling-github-connector')
+
+    steps:
+      # Checkout the repository
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      # Set up GitHub CLI
+      - name: Setup GitHub CLI
+        run: |
+          echo "${{ secrets.GITHUB_TOKEN }}" | gh auth login --with-token
+
+      # Check if PR is mergeable
+      - name: Check PR status
+        id: check_pr
+        run: |
+          PR_NUMBER=${{ github.event.pull_request.number }}
+          MERGEABLE=$(gh pr view $PR_NUMBER --json mergeable | jq -r '.mergeable')
+          echo "Mergeable status: $MERGEABLE"
+          echo "mergeable=$MERGEABLE" >> $GITHUB_OUTPUT
+
+      # Auto-merge the PR if it's mergeable
+      - name: Auto-merge PR
+        if: steps.check_pr.outputs.mergeable == 'MERGEABLE'
+        run: |
+          gh pr merge ${{ github.event.pull_request.number }} \
+            --auto \
+            --squash \
+            --delete-branch
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      # Add a comment if PR can't be merged
+      - name: Comment on unmergeable PR
+        if: steps.check_pr.outputs.mergeable != 'MERGEABLE'
+        run: |
+          gh pr comment ${{ github.event.pull_request.number }} \
+            --body "PR cannot be automatically merged due to conflicts or other issues. Please resolve manually."
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/.prettierrc.js

@@ -1,7 +1,7 @@
-module.exports = {
-  singleQuote: true,
-  trailingComma: 'all',
-  arrowParens: 'always',
-  endOfLine: 'auto',
-  printWidth: 120,
-};
+module.exports = {
+  singleQuote: true,
+  trailingComma: 'all',
+  arrowParens: 'always',
+  endOfLine: 'auto',
+  printWidth: 120,
+};

package/.storybook/main.ts

@@ -1,36 +1,36 @@
-import { mergeConfig } from 'vite';
-
-module.exports = {
-  stories: ['../src/**/components/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: [
-    '@storybook/addon-a11y',
-    '@storybook/addon-links',
-    {
-      name: '@storybook/addon-themes',
-      options: {
-        postCss: true,
-      },
-    },
-  ],
-  framework: {
-    name: '@storybook/vue3-vite',
-    options: {},
-  },
-  staticDirs: ['../public'],
-  docs: {
-    autodocs: true,
-  },
-  async viteFinal(config, options) {
-    const configExtension = {
-      optimizeDeps: {
-        include: ['deepmerge'],
-      },
-      build: {
-        commonjsOptions: {
-          include: [/node_modules/],
-        },
-      },
-    };
-    return mergeConfig(config, configExtension);
-  },
-};
+import { mergeConfig } from 'vite';
+
+module.exports = {
+  stories: ['../src/**/components/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-a11y',
+    '@storybook/addon-links',
+    {
+      name: '@storybook/addon-themes',
+      options: {
+        postCss: true,
+      },
+    },
+  ],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {},
+  },
+  staticDirs: ['../public'],
+  docs: {
+    autodocs: true,
+  },
+  async viteFinal(config, options) {
+    const configExtension = {
+      optimizeDeps: {
+        include: ['deepmerge'],
+      },
+      build: {
+        commonjsOptions: {
+          include: [/node_modules/],
+        },
+      },
+    };
+    return mergeConfig(config, configExtension);
+  },
+};

package/.storybook/preview-head-master.html

@@ -1,4 +1,4 @@
-<link
-  rel="stylesheet"
-  href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap"
-/>
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap"
+/>

package/.storybook/preview-head-publish-master.html

@@ -1,4 +1,4 @@
-<link
-  rel="stylesheet"
-  href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap"
-/>
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap"
+/>

package/.storybook/preview-head-publish.html

@@ -1,10 +1,10 @@
-<link
-  rel="stylesheet"
-  href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap"
-/>
-
-<link rel="stylesheet" href="css/tailwind-brandCrowd.css">
-<link rel="stylesheet" href="css/tailwind-brandPage.css">
-<link rel="stylesheet" href="css/tailwind-crazyDomains.css">
-<link rel="stylesheet" href="css/tailwind-designCom.css">
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap"
+/>
+
+<link rel="stylesheet" href="css/tailwind-brandCrowd.css">
+<link rel="stylesheet" href="css/tailwind-brandPage.css">
+<link rel="stylesheet" href="css/tailwind-crazyDomains.css">
+<link rel="stylesheet" href="css/tailwind-designCom.css">
 <link rel="stylesheet" href="css/tailwind-designCrowd.css">

package/.storybook/preview-head.html

@@ -1,10 +1,10 @@
-<link
-  rel="stylesheet"
-  href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap"
-/>
-
-<link rel="stylesheet" href="css/tailwind-brandCrowd.css">
-<link rel="stylesheet" href="css/tailwind-brandPage.css">
-<link rel="stylesheet" href="css/tailwind-crazyDomains.css">
-<link rel="stylesheet" href="css/tailwind-designCom.css">
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900&display=swap"
+/>
+
+<link rel="stylesheet" href="css/tailwind-brandCrowd.css">
+<link rel="stylesheet" href="css/tailwind-brandPage.css">
+<link rel="stylesheet" href="css/tailwind-crazyDomains.css">
+<link rel="stylesheet" href="css/tailwind-designCom.css">
 <link rel="stylesheet" href="css/tailwind-designCrowd.css">

package/.storybook/preview.js

@@ -1,53 +1,53 @@
-import { withThemeByClassName } from '@storybook/addon-themes';
-import { setSharedLibLocaleAsync } from '../src/useSharedLibTranslate';
-
-setSharedLibLocaleAsync('en-US');
-
-const LOCALES = {
-  'en-US': '🇺🇸 English (US)',
-  'fr-FR': '🇫🇷 Français (France)',
-  'es-ES': '🇪🇸 Español (Spain)',
-  'pt-PT': '🇵🇹 Português (Portugal)',
-  'de-DE': '🇩🇪 Deutsch (Germany)',
-  'fr-CA': '🇨🇦 Français (Canada)',
-  'pt-BR': '🇧🇷 Português (Brazil)',
-};
-
-const globalLocaleLoader = async (context) => {
-  const locale = context.globals.locale || 'en-US';
-  await setSharedLibLocaleAsync(locale);
-  return { locale };
-};
-
-
-export const globalTypes = {
-  locale: {
-    name: 'Locale',
-    description: 'Internationalization locale',
-    defaultValue: 'en-US',
-    toolbar: {
-      icon: 'globe',
-      items: Object.entries(LOCALES).map(([key, value]) => ({
-        value: key,
-        title: value,
-      })),
-      showName: true,
-      dynamicTitle: true,
-    },
-  },
-};
-
-export const decorators = [
-  withThemeByClassName({
-    themes: {
-      designCom: 'theme-designCom',
-      brandCrowd: 'theme-brandCrowd',
-      crazyDomain: 'theme-crazyDomains',
-      designCrowd: 'theme-designCrowd',
-      brandPage: 'theme-brandPage',
-    },
-    defaultTheme: 'brandCrowd',
-  }),
-];
-
-export const loaders = [globalLocaleLoader];
+import { withThemeByClassName } from '@storybook/addon-themes';
+import { setSharedLibLocaleAsync } from '../src/useSharedLibTranslate';
+
+setSharedLibLocaleAsync('en-US');
+
+const LOCALES = {
+  'en-US': '🇺🇸 English (US)',
+  'fr-FR': '🇫🇷 Français (France)',
+  'es-ES': '🇪🇸 Español (Spain)',
+  'pt-PT': '🇵🇹 Português (Portugal)',
+  'de-DE': '🇩🇪 Deutsch (Germany)',
+  'fr-CA': '🇨🇦 Français (Canada)',
+  'pt-BR': '🇧🇷 Português (Brazil)',
+};
+
+const globalLocaleLoader = async (context) => {
+  const locale = context.globals.locale || 'en-US';
+  await setSharedLibLocaleAsync(locale);
+  return { locale };
+};
+
+
+export const globalTypes = {
+  locale: {
+    name: 'Locale',
+    description: 'Internationalization locale',
+    defaultValue: 'en-US',
+    toolbar: {
+      icon: 'globe',
+      items: Object.entries(LOCALES).map(([key, value]) => ({
+        value: key,
+        title: value,
+      })),
+      showName: true,
+      dynamicTitle: true,
+    },
+  },
+};
+
+export const decorators = [
+  withThemeByClassName({
+    themes: {
+      designCom: 'theme-designCom',
+      brandCrowd: 'theme-brandCrowd',
+      crazyDomain: 'theme-crazyDomains',
+      designCrowd: 'theme-designCrowd',
+      brandPage: 'theme-brandPage',
+    },
+    defaultTheme: 'brandCrowd',
+  }),
+];
+
+export const loaders = [globalLocaleLoader];

package/CLAUDE.md

@@ -0,0 +1,71 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## 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

package/Dockerfile

@@ -1,40 +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
-ARG NPM_TOKEN
-ENV NPM_TOKEN=$NPM_TOKEN
-RUN echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > .npmrc
-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