@designcrowd/fe-shared-lib 1.2.8 → 1.2.9-icon-remove-title-desc

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

@@ -29,7 +29,7 @@ COPY .npmignore ./
 RUN npm run bundle-translation
 
 RUN mkdir artifacts
-RUN npm publish || touch artifacts/npm_publish_failed
+RUN npm publish || (touch artifacts/npm_publish_failed && exit 1)
 RUN cp package.json artifacts/
 
 ENTRYPOINT ["/bin/echo", "Nothing to do."]

package/dist/css/tailwind-brandCrowd.css

@@ -643,10 +643,6 @@ video {
   margin-top: 0px;
   margin-bottom: 0px;
 }
-.tw-my-1 {
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-}
 .tw-my-10 {
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
@@ -723,9 +719,6 @@ video {
 .tw-ml-auto {
   margin-left: auto;
 }
-.tw-mr-1 {
-  margin-right: 0.25rem;
-}
 .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -834,10 +827,6 @@ video {
 .tw-h-auto {
   height: auto;
 }
-.tw-h-fit {
-  height: -moz-fit-content;
-  height: fit-content;
-}
 .tw-h-full {
   height: 100%;
 }
@@ -853,6 +842,9 @@ video {
 .tw-max-h-screen {
   max-height: 100vh;
 }
+.tw-w-1\/3 {
+  width: 33.333333%;
+}
 .tw-w-10 {
   width: 2.5rem;
 }
@@ -1454,17 +1446,6 @@ video {
 .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
-.tw-bg-gradient-to-t {
-  background-image: linear-gradient(to top, var(--tw-gradient-stops));
-}
-.tw-from-\[\#d946ef\] {
-  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-.tw-to-\[\#8b5cf6\] {
-  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
-}
 .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -2042,10 +2023,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(0 121 172 / var(--tw-bg-opacity));
 }
-.hover\:tw-bg-primary-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(252 209 217 / var(--tw-bg-opacity));
-}
 .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(245 73 101 / var(--tw-bg-opacity));
@@ -2110,10 +2087,6 @@ video {
   --tw-shadow-color: #0097D7 !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
-.hover\:tw-brightness-\[0\.85\]:hover {
-  --tw-brightness: brightness(0.85);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
 .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(194 22 50 / var(--tw-border-opacity));
@@ -2256,10 +2229,6 @@ video {
     margin-left: 1rem;
   }
 
-  .md\:tw-mr-2 {
-    margin-right: 0.5rem;
-  }
-
   .md\:tw-mt-0 {
     margin-top: 0px;
   }

package/dist/css/tailwind-brandPage.css

@@ -643,10 +643,6 @@ video {
   margin-top: 0px;
   margin-bottom: 0px;
 }
-.tw-my-1 {
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-}
 .tw-my-10 {
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
@@ -723,9 +719,6 @@ video {
 .tw-ml-auto {
   margin-left: auto;
 }
-.tw-mr-1 {
-  margin-right: 0.25rem;
-}
 .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -834,10 +827,6 @@ video {
 .tw-h-auto {
   height: auto;
 }
-.tw-h-fit {
-  height: -moz-fit-content;
-  height: fit-content;
-}
 .tw-h-full {
   height: 100%;
 }
@@ -853,6 +842,9 @@ video {
 .tw-max-h-screen {
   max-height: 100vh;
 }
+.tw-w-1\/3 {
+  width: 33.333333%;
+}
 .tw-w-10 {
   width: 2.5rem;
 }
@@ -1302,17 +1294,6 @@ video {
 .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
-.tw-bg-gradient-to-t {
-  background-image: linear-gradient(to top, var(--tw-gradient-stops));
-}
-.tw-from-\[\#d946ef\] {
-  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-.tw-to-\[\#8b5cf6\] {
-  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
-}
 .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -1810,10 +1791,6 @@ video {
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.hover\:tw-brightness-\[0\.85\]:hover {
-  --tw-brightness: brightness(0.85);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
 .focus\:tw-border-grayscale-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(94 94 94 / var(--tw-border-opacity));
@@ -1940,10 +1917,6 @@ video {
     margin-left: 1rem;
   }
 
-  .md\:tw-mr-2 {
-    margin-right: 0.5rem;
-  }
-
   .md\:tw-mt-0 {
     margin-top: 0px;
   }

package/dist/css/tailwind-crazyDomains.css

@@ -643,10 +643,6 @@ video {
   margin-top: 0px;
   margin-bottom: 0px;
 }
-.tw-my-1 {
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-}
 .tw-my-10 {
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
@@ -723,9 +719,6 @@ video {
 .tw-ml-auto {
   margin-left: auto;
 }
-.tw-mr-1 {
-  margin-right: 0.25rem;
-}
 .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -834,10 +827,6 @@ video {
 .tw-h-auto {
   height: auto;
 }
-.tw-h-fit {
-  height: -moz-fit-content;
-  height: fit-content;
-}
 .tw-h-full {
   height: 100%;
 }
@@ -853,6 +842,9 @@ video {
 .tw-max-h-screen {
   max-height: 100vh;
 }
+.tw-w-1\/3 {
+  width: 33.333333%;
+}
 .tw-w-10 {
   width: 2.5rem;
 }
@@ -1454,17 +1446,6 @@ video {
 .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
-.tw-bg-gradient-to-t {
-  background-image: linear-gradient(to top, var(--tw-gradient-stops));
-}
-.tw-from-\[\#d946ef\] {
-  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-.tw-to-\[\#8b5cf6\] {
-  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
-}
 .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -2042,10 +2023,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(0 129 191 / var(--tw-bg-opacity));
 }
-.hover\:tw-bg-primary-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(226 238 213 / var(--tw-bg-opacity));
-}
 .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(140 189 89 / var(--tw-bg-opacity));
@@ -2110,10 +2087,6 @@ video {
   --tw-shadow-color: #00A1EF !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
-.hover\:tw-brightness-\[0\.85\]:hover {
-  --tw-brightness: brightness(0.85);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
 .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(186 24 79 / var(--tw-border-opacity));
@@ -2256,10 +2229,6 @@ video {
     margin-left: 1rem;
   }
 
-  .md\:tw-mr-2 {
-    margin-right: 0.5rem;
-  }
-
   .md\:tw-mt-0 {
     margin-top: 0px;
   }

package/dist/css/tailwind-designCom.css

@@ -643,10 +643,6 @@ video {
   margin-top: 0px;
   margin-bottom: 0px;
 }
-.tw-my-1 {
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-}
 .tw-my-10 {
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
@@ -723,9 +719,6 @@ video {
 .tw-ml-auto {
   margin-left: auto;
 }
-.tw-mr-1 {
-  margin-right: 0.25rem;
-}
 .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -834,10 +827,6 @@ video {
 .tw-h-auto {
   height: auto;
 }
-.tw-h-fit {
-  height: -moz-fit-content;
-  height: fit-content;
-}
 .tw-h-full {
   height: 100%;
 }
@@ -853,6 +842,9 @@ video {
 .tw-max-h-screen {
   max-height: 100vh;
 }
+.tw-w-1\/3 {
+  width: 33.333333%;
+}
 .tw-w-10 {
   width: 2.5rem;
 }
@@ -1454,17 +1446,6 @@ video {
 .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
-.tw-bg-gradient-to-t {
-  background-image: linear-gradient(to top, var(--tw-gradient-stops));
-}
-.tw-from-\[\#d946ef\] {
-  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-.tw-to-\[\#8b5cf6\] {
-  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
-}
 .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -2042,10 +2023,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(50 71 197 / var(--tw-bg-opacity));
 }
-.hover\:tw-bg-primary-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(236 238 254 / var(--tw-bg-opacity));
-}
 .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(121 139 249 / var(--tw-bg-opacity));
@@ -2110,10 +2087,6 @@ video {
   --tw-shadow-color: #3f59f6 !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
-.hover\:tw-brightness-\[0\.85\]:hover {
-  --tw-brightness: brightness(0.85);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
 .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(182 58 42 / var(--tw-border-opacity));
@@ -2256,10 +2229,6 @@ video {
     margin-left: 1rem;
   }
 
-  .md\:tw-mr-2 {
-    margin-right: 0.5rem;
-  }
-
   .md\:tw-mt-0 {
     margin-top: 0px;
   }

package/dist/css/tailwind-designCrowd.css

@@ -643,10 +643,6 @@ video {
   margin-top: 0px;
   margin-bottom: 0px;
 }
-.tw-my-1 {
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-}
 .tw-my-10 {
   margin-top: 2.5rem;
   margin-bottom: 2.5rem;
@@ -723,9 +719,6 @@ video {
 .tw-ml-auto {
   margin-left: auto;
 }
-.tw-mr-1 {
-  margin-right: 0.25rem;
-}
 .tw-mr-2 {
   margin-right: 0.5rem;
 }
@@ -834,10 +827,6 @@ video {
 .tw-h-auto {
   height: auto;
 }
-.tw-h-fit {
-  height: -moz-fit-content;
-  height: fit-content;
-}
 .tw-h-full {
   height: 100%;
 }
@@ -853,6 +842,9 @@ video {
 .tw-max-h-screen {
   max-height: 100vh;
 }
+.tw-w-1\/3 {
+  width: 33.333333%;
+}
 .tw-w-10 {
   width: 2.5rem;
 }
@@ -1454,17 +1446,6 @@ video {
 .tw-bg-opacity-80 {
   --tw-bg-opacity: 0.8;
 }
-.tw-bg-gradient-to-t {
-  background-image: linear-gradient(to top, var(--tw-gradient-stops));
-}
-.tw-from-\[\#d946ef\] {
-  --tw-gradient-from: #d946ef var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(217 70 239 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-.tw-to-\[\#8b5cf6\] {
-  --tw-gradient-to: #8b5cf6 var(--tw-gradient-to-position);
-}
 .tw-bg-no-repeat {
   background-repeat: no-repeat;
 }
@@ -2042,10 +2023,6 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(14 121 188 / var(--tw-bg-opacity));
 }
-.hover\:tw-bg-primary-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(207 234 251 / var(--tw-bg-opacity));
-}
 .hover\:tw-bg-primary-400:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(65 172 239 / var(--tw-bg-opacity));
@@ -2110,10 +2087,6 @@ video {
   --tw-shadow-color: #1197EB !important;
   --tw-shadow: var(--tw-shadow-colored) !important;
 }
-.hover\:tw-brightness-\[0\.85\]:hover {
-  --tw-brightness: brightness(0.85);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
 .focus\:tw-border-error-600:focus {
   --tw-border-opacity: 1;
   border-color: rgb(195 50 48 / var(--tw-border-opacity));
@@ -2256,10 +2229,6 @@ video {
     margin-left: 1rem;
   }
 
-  .md\:tw-mr-2 {
-    margin-right: 0.5rem;
-  }
-
   .md\:tw-mt-0 {
     margin-top: 0px;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.2.8",
+  "version": "1.2.9-icon-remove-title-desc",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",
@@ -113,4 +113,4 @@
   "overrides": {
     "storybook": "$storybook"
   }
-}
+}