@designcrowd/fe-shared-lib 1.5.7-eng-3522-1 → 1.5.7-fix-icon

package/tailwind.build.js

@@ -1,83 +1,83 @@
-/* eslint-disable global-require */
-/*
-This file will compile tailwind.css files for each theme
-*/
-
-const fse = require('fs-extra');
-const postcss = require('postcss');
-const yargs = require('yargs/yargs');
-
-const { argv } = yargs(process.argv);
-
-const bcTheme = require("./src/themes/bc");
-const bpTheme = require("./src/themes/bp");
-const dcTheme = require("./src/themes/dc");
-const cdTheme = require("./src/themes/cd");
-const dcomTheme = require("./src/themes/dcom");
-const viewports = require("./src/viewports");
-
-const designSystemConfig = {
-  themes: {
-    brandCrowd: bcTheme,
-    brandPage: bpTheme,
-    crazyDomains: cdTheme,
-    designCrowd: dcTheme,
-    designCom: dcomTheme,
-  },
-  viewports,
-};
-
-
-fse.readFile(`${__dirname}/src/css/tailwind.css`, 'utf8', (err, data) => {
-  // Loop through the `design-system-configuration` themes
-  Object.keys(designSystemConfig.themes).forEach((theme) => {
-    const css = data;
-
-    // set the current theme in the environment so
-    // that Tailwind can compile the correct theme
-    // see tailwind.config.js for more info
-    process.env.tailwindTheme = theme;
-
-    // tailwind 3 caches the config context in memory, deleting cache here
-    Object.keys(require.cache)
-    .filter((key) => key.includes('tailwindcss'))
-    .forEach((key) => delete require.cache[key]);
-
-    postcss([
-      require('postcss-nested'),
-      require('autoprefixer'),
-      require('tailwindcss')(`${__dirname}/./tailwind.config.js`),
-    ])
-      .process(css, {
-        from: `${__dirname}/src/css/tailwind.css`,
-        to: `./tailwind-${theme}.css`,
-      })
-      .then((result) => {
-        const outputPath = `${__dirname}/dist/css/tailwind-${theme}.css`;
-        const outputPathForStoryBook = `${__dirname}/public/css/tailwind-${theme}.css`;
-
-        let { css: cssResult } = result;
-
-        if (!argv.storybook) {
-          fse.outputFile(outputPath, cssResult, () => {
-            console.log(`✅ Built Tailwind: ${outputPath}`);
-          });
-        } else {
-          // replace all `tw-` classes
-          cssResult = cssResult.replace(
-            /(\.[a-z]{2}-)/gm,
-            `.theme-${theme} .tw-`,
-          );
-          // replace all variant classes eg `.md\:tw-`
-          cssResult = cssResult.replace(
-            /^\s*(\.[a-zA-Z-]+\\:)/gm,
-            `.theme-${theme} $1`,
-          );
-
-          fse.outputFile(outputPathForStoryBook, cssResult, () => {
-            console.log(`✅ Built Tailwind: ${outputPathForStoryBook}`);
-          });
-        }
-      });
-  });
-});
+/* eslint-disable global-require */
+/*
+This file will compile tailwind.css files for each theme
+*/
+
+const fse = require('fs-extra');
+const postcss = require('postcss');
+const yargs = require('yargs/yargs');
+
+const { argv } = yargs(process.argv);
+
+const bcTheme = require("./src/themes/bc");
+const bpTheme = require("./src/themes/bp");
+const dcTheme = require("./src/themes/dc");
+const cdTheme = require("./src/themes/cd");
+const dcomTheme = require("./src/themes/dcom");
+const viewports = require("./src/viewports");
+
+const designSystemConfig = {
+  themes: {
+    brandCrowd: bcTheme,
+    brandPage: bpTheme,
+    crazyDomains: cdTheme,
+    designCrowd: dcTheme,
+    designCom: dcomTheme,
+  },
+  viewports,
+};
+
+
+fse.readFile(`${__dirname}/src/css/tailwind.css`, 'utf8', (err, data) => {
+  // Loop through the `design-system-configuration` themes
+  Object.keys(designSystemConfig.themes).forEach((theme) => {
+    const css = data;
+
+    // set the current theme in the environment so
+    // that Tailwind can compile the correct theme
+    // see tailwind.config.js for more info
+    process.env.tailwindTheme = theme;
+
+    // tailwind 3 caches the config context in memory, deleting cache here
+    Object.keys(require.cache)
+    .filter((key) => key.includes('tailwindcss'))
+    .forEach((key) => delete require.cache[key]);
+
+    postcss([
+      require('postcss-nested'),
+      require('autoprefixer'),
+      require('tailwindcss')(`${__dirname}/./tailwind.config.js`),
+    ])
+      .process(css, {
+        from: `${__dirname}/src/css/tailwind.css`,
+        to: `./tailwind-${theme}.css`,
+      })
+      .then((result) => {
+        const outputPath = `${__dirname}/dist/css/tailwind-${theme}.css`;
+        const outputPathForStoryBook = `${__dirname}/public/css/tailwind-${theme}.css`;
+
+        let { css: cssResult } = result;
+
+        if (!argv.storybook) {
+          fse.outputFile(outputPath, cssResult, () => {
+            console.log(`✅ Built Tailwind: ${outputPath}`);
+          });
+        } else {
+          // replace all `tw-` classes
+          cssResult = cssResult.replace(
+            /(\.[a-z]{2}-)/gm,
+            `.theme-${theme} .tw-`,
+          );
+          // replace all variant classes eg `.md\:tw-`
+          cssResult = cssResult.replace(
+            /^\s*(\.[a-zA-Z-]+\\:)/gm,
+            `.theme-${theme} $1`,
+          );
+
+          fse.outputFile(outputPathForStoryBook, cssResult, () => {
+            console.log(`✅ Built Tailwind: ${outputPathForStoryBook}`);
+          });
+        }
+      });
+  });
+});

package/tailwind.config.js

@@ -1,36 +1,36 @@
-const bcTheme = require('./src/themes/bc');
-const bpTheme = require('./src/themes/bp');
-const dcTheme = require('./src/themes/dc');
-const cdTheme = require('./src/themes/cd');
-const dcomTheme = require('./src/themes/dcom');
-const viewports = require('./src/viewports');
-
-const designSystemConfig = {
-  themes: {
-    brandCrowd: bcTheme,
-    brandPage: bpTheme,
-    crazyDomains: cdTheme,
-    designCrowd: dcTheme,
-    designCom: dcomTheme,
-  },
-  viewports,
-};
-
-const theme = designSystemConfig.themes[process.env.tailwindTheme]; // use the environment theme from functions/tailwind.js
-module.exports = {
-  prefix: 'tw-',
-  content: ['./src/**/components/**/*.vue'],
-  safelist: [{ pattern: /^!tw-p-/ }, { pattern: /^tw-overflow-y-auto$/ }, { pattern: /^tw-line-clamp-/ }],
-  theme: {
-    ...theme,
-    extend: {
-      maxWidth: {
-        300: '75rem',
-      },
-    },
-  },
-  plugins: [],
-  corePlugins: {
-    preflight: true,
-  },
-};
+const bcTheme = require('./src/themes/bc');
+const bpTheme = require('./src/themes/bp');
+const dcTheme = require('./src/themes/dc');
+const cdTheme = require('./src/themes/cd');
+const dcomTheme = require('./src/themes/dcom');
+const viewports = require('./src/viewports');
+
+const designSystemConfig = {
+  themes: {
+    brandCrowd: bcTheme,
+    brandPage: bpTheme,
+    crazyDomains: cdTheme,
+    designCrowd: dcTheme,
+    designCom: dcomTheme,
+  },
+  viewports,
+};
+
+const theme = designSystemConfig.themes[process.env.tailwindTheme]; // use the environment theme from functions/tailwind.js
+module.exports = {
+  prefix: 'tw-',
+  content: ['./src/**/components/**/*.vue'],
+  safelist: [{ pattern: /^!tw-p-/ }, { pattern: /^tw-overflow-y-auto$/ }, { pattern: /^tw-line-clamp-/ }],
+  theme: {
+    ...theme,
+    extend: {
+      maxWidth: {
+        300: '75rem',
+      },
+    },
+  },
+  plugins: [],
+  corePlugins: {
+    preflight: true,
+  },
+};

package/tailwind.themes.js

@@ -1,59 +1,59 @@
-const fse = require('fs-extra');
-const bcTheme = require("./src/themes/bc");
-const bpTheme = require("./src/themes/bp");
-const dcTheme = require("./src/themes/dc");
-const cdTheme = require("./src/themes/cd");
-const dcomTheme = require("./src/themes/dcom");
-const viewports = require("./src/viewports");
-
-const designSystemConfig = {
-  themes: {
-    brandCrowd: bcTheme,
-    brandPage: bpTheme,
-    crazyDomains: cdTheme,
-    designCrowd: dcTheme,
-    designCom: dcomTheme,
-  },
-  viewports,
-};
-
-const { themes } = designSystemConfig;
-
-const previewHeadFiles = [
-  {
-    master: `${__dirname}/.storybook/preview-head-master.html`,
-    outputFile: `${__dirname}/.storybook/preview-head.html`,
-  },
-  {
-    master: `${__dirname}/.storybook/preview-head-publish-master.html`,
-    outputFile: `${__dirname}/.storybook/preview-head-publish.html`,
-  },
-];
-
-(async () => {
-  const results = previewHeadFiles.map(async (previewHeadFile) => {
-    const masterFile = previewHeadFile.master;
-    const { outputFile } = previewHeadFile;
-
-    const initialMarkup = await fse.readFile(masterFile, 'utf8');
-
-    // Create the initial preview-head.html file
-    await fse.outputFile(outputFile, initialMarkup);
-
-    // Loop through the `design-system-configuration` themes
-    const contents = Object.keys(themes)
-      .sort()
-      .reduce((prev, theme) => {
-        const filename = `tailwind-${theme}.css`;
-        return `${prev}\n<link rel="stylesheet" href="css/${filename}">`;
-      }, '');
-
-    // Append the theme <link to the preview-head.html
-    await fse.appendFile(outputFile, contents, (err) => {
-      if (err) throw err;
-      console.log(`✅ Added css file links to ${previewHeadFile.outputFile}`);
-    });
-  });
-
-  await Promise.all(results);
-})();
+const fse = require('fs-extra');
+const bcTheme = require("./src/themes/bc");
+const bpTheme = require("./src/themes/bp");
+const dcTheme = require("./src/themes/dc");
+const cdTheme = require("./src/themes/cd");
+const dcomTheme = require("./src/themes/dcom");
+const viewports = require("./src/viewports");
+
+const designSystemConfig = {
+  themes: {
+    brandCrowd: bcTheme,
+    brandPage: bpTheme,
+    crazyDomains: cdTheme,
+    designCrowd: dcTheme,
+    designCom: dcomTheme,
+  },
+  viewports,
+};
+
+const { themes } = designSystemConfig;
+
+const previewHeadFiles = [
+  {
+    master: `${__dirname}/.storybook/preview-head-master.html`,
+    outputFile: `${__dirname}/.storybook/preview-head.html`,
+  },
+  {
+    master: `${__dirname}/.storybook/preview-head-publish-master.html`,
+    outputFile: `${__dirname}/.storybook/preview-head-publish.html`,
+  },
+];
+
+(async () => {
+  const results = previewHeadFiles.map(async (previewHeadFile) => {
+    const masterFile = previewHeadFile.master;
+    const { outputFile } = previewHeadFile;
+
+    const initialMarkup = await fse.readFile(masterFile, 'utf8');
+
+    // Create the initial preview-head.html file
+    await fse.outputFile(outputFile, initialMarkup);
+
+    // Loop through the `design-system-configuration` themes
+    const contents = Object.keys(themes)
+      .sort()
+      .reduce((prev, theme) => {
+        const filename = `tailwind-${theme}.css`;
+        return `${prev}\n<link rel="stylesheet" href="css/${filename}">`;
+      }, '');
+
+    // Append the theme <link to the preview-head.html
+    await fse.appendFile(outputFile, contents, (err) => {
+      if (err) throw err;
+      console.log(`✅ Added css file links to ${previewHeadFile.outputFile}`);
+    });
+  });
+
+  await Promise.all(results);
+})();

package/vite.config.ts

@@ -1,37 +1,37 @@
-import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-import eslint from 'vite-plugin-eslint';
-import vueDevTools from 'vite-plugin-vue-devtools';
-import path from 'path';
-
-export default defineConfig({
-  root: './src/client',
-  publicDir: '/dist/',
-  define: {
-    process: JSON.stringify({
-      client: true,
-    }),
-  },
-  build: {
-    sourcemap: true,
-    ssr: false,
-    emptyOutDir: false,
-    minify: false,
-    commonjsOptions: {
-      include: [/node_modules/],
-    },
-  },
-  plugins: [
-    vue(),
-    eslint({
-      include: ['./src/client/**/*.[js|ts|vue]'],
-    }),
-    process.env.NODE_ENV === 'development' ? vueDevTools() : false,
-  ],
-  resolve: {
-    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
-    alias: {
-      '@': path.resolve(__dirname, './src'),
-    },
-  },
-});
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import eslint from 'vite-plugin-eslint';
+import vueDevTools from 'vite-plugin-vue-devtools';
+import path from 'path';
+
+export default defineConfig({
+  root: './src/client',
+  publicDir: '/dist/',
+  define: {
+    process: JSON.stringify({
+      client: true,
+    }),
+  },
+  build: {
+    sourcemap: true,
+    ssr: false,
+    emptyOutDir: false,
+    minify: false,
+    commonjsOptions: {
+      include: [/node_modules/],
+    },
+  },
+  plugins: [
+    vue(),
+    eslint({
+      include: ['./src/client/**/*.[js|ts|vue]'],
+    }),
+    process.env.NODE_ENV === 'development' ? vueDevTools() : false,
+  ],
+  resolve: {
+    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+});

package/CLAUDE.md

@@ -1,71 +0,0 @@
-# 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/src/atoms/components/Icon/icons/shield-tick.vue

@@ -1,6 +0,0 @@
-<template>
-  <path
-    d="M12.5837 4.81128C12.5837 4.21729 12.5719 4.11868 12.5456 4.04956C12.5119 3.96109 12.4564 3.88266 12.3854 3.82007C12.3299 3.77117 12.2424 3.72494 11.6862 3.51636L8.11101 2.17554C8.07578 2.16233 8.04852 2.15286 8.02507 2.14429C8.01522 2.14069 8.00685 2.13706 7.99968 2.13452C7.99266 2.13701 7.98481 2.1408 7.97527 2.14429C7.9517 2.1529 7.92384 2.16223 7.88835 2.17554L4.31413 3.51636C3.75767 3.72503 3.66943 3.77116 3.61394 3.82007C3.54313 3.88259 3.48839 3.96129 3.45476 4.04956C3.42846 4.11868 3.41668 4.21729 3.41667 4.81128V7.99976C3.41667 9.3566 4.16012 10.5923 5.15495 11.6287C6.14141 12.6563 7.29201 13.4003 7.91277 13.7625C7.95012 13.7842 7.97682 13.7994 7.99968 13.8123C8.0227 13.7993 8.04982 13.7845 8.08757 13.7625C8.70836 13.4003 9.8589 12.6564 10.8454 11.6287C11.8402 10.5923 12.5837 9.3566 12.5837 7.99976V4.81128ZM9.80339 5.46948C10.0963 5.17687 10.5711 5.17668 10.8639 5.46948C11.1567 5.76228 11.1565 6.23713 10.8639 6.53003L7.86394 9.53003C7.72336 9.6706 7.53246 9.74967 7.33366 9.74976C7.13477 9.74976 6.94404 9.67065 6.80339 9.53003L5.46941 8.19702C5.1767 7.90419 5.17676 7.42934 5.46941 7.13647C5.76226 6.84362 6.23705 6.8437 6.52995 7.13647L7.33269 7.93921L9.80339 5.46948ZM14.0837 7.99976C14.0837 9.91521 13.0419 11.5067 11.9274 12.6677C10.8048 13.8372 9.52137 14.6618 8.84343 15.0574C8.71957 15.1296 8.54012 15.2426 8.29753 15.2947C8.11304 15.3342 7.88729 15.3342 7.7028 15.2947C7.46005 15.2426 7.28081 15.1297 7.15691 15.0574C6.47906 14.6619 5.19566 13.8373 4.07292 12.6677C2.95843 11.5067 1.91667 9.91521 1.91667 7.99976V4.4646C1.9203 4.12537 1.94148 3.80797 2.05241 3.51636C2.17274 3.20015 2.3689 2.91779 2.62273 2.69409C2.93499 2.419 3.34627 2.27762 3.78777 2.11206L7.36198 0.77124C7.47044 0.73057 7.62746 0.667886 7.79753 0.643311L7.99968 0.628662L8.2028 0.643311L8.32683 0.667725C8.44787 0.697738 8.55694 0.740711 8.63835 0.77124L12.2126 2.11206C12.6541 2.27763 13.0654 2.41893 13.3776 2.69409C13.6314 2.91777 13.8266 3.20018 13.9469 3.51636C14.0949 3.90527 14.0837 4.33983 14.0837 4.81128V7.99976Z"
-    fill="evenodd"
-  />
-</template>