@designcrowd/fe-shared-lib 1.8.4-edge-fallback-4 → 1.8.5-edge-fallback-5

package/.nvmrc

@@ -0,0 +1 @@
+20

package/CLAUDE.md

@@ -123,7 +123,15 @@ 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
+Use `scripts/publish-uat.sh <suffix>` to publish a UAT build for testing in a consumer (e.g. BrandCrowd.Net). The script handles the version bump, bundle-translation, secret scanning of the tarball, and the commit. Examples:
+
+```bash
+./scripts/publish-uat.sh edge-fallback-0
+./scripts/publish-uat.sh edge-fallback-1   # next iteration
+```
+
+It refuses to run on `master`/`main`, refuses if the version is already published, aborts on dangerous filenames or token-shaped strings inside the tarball, and only commits the bump after the registry confirms upload.
+
+The npm publish token is read from `~/.config/designcrowd/npm-publish-token` (mode 600). Override with `NPM_PUBLISH_TOKEN_FILE` if it lives elsewhere. The token file is **not** stored anywhere in the repo.
+
+The legacy `docker build . --build-arg NPM_TOKEN=...` flow still works but is brittle — prefer the script.

package/README.md

@@ -29,19 +29,27 @@ To edit the design system locally whilst being using in a consumer you need to r
 
 ### 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:
+If you want to have an experimental version of your change in a UAT env without publishing to prod, run the publish script with a suffix:
 
-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
+```bash
+./scripts/publish-uat.sh edge-fallback-0       # first iteration
+./scripts/publish-uat.sh edge-fallback-1       # next iteration
+```
+
+The script bumps `package.json` to `<base>-<suffix>`, runs `bundle-translation`, scans the tarball for secrets and dangerous filenames, publishes via a temp `.npmrc`, and commits the version bump only after the registry confirms upload. It refuses to run on `master`/`main` and refuses already-published versions.
+
+The npm publish token is read from `~/.config/designcrowd/npm-publish-token` (mode 600). Override with `NPM_PUBLISH_TOKEN_FILE` if it lives elsewhere. The token is never written into the repo.
+
+Once published, update the consumer's package reference to the version you just built.
+
+The legacy `docker build . --build-arg NPM_TOKEN=$NPM_TOKEN` flow still works but is brittle — prefer the script.
 
 ### 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`
+4. From app.maker, run `npm run docker:publish:bp` (this script lives in app.maker, not in this repo)
 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>
@@ -100,4 +108,9 @@ New configuration styles can be added to the `themes/base.js` file which will be
 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.
+
+Two flows depending on what you're publishing:
+
+- **Test / UAT versions** (suffixed, e.g. `1.8.4-edge-fallback-0`) — use `./scripts/publish-uat.sh <suffix>`. The script bumps `package.json`, runs `bundle-translation`, scans the tarball for secrets and dangerous filenames, publishes via a temp `.npmrc`, and only commits the bump after the registry confirms upload. See [Testing in a UAT](#testing-uat).
+
+- **Final releases to NPM** (no suffix, e.g. `1.8.4`) — bump the version in `package.json`, run `npm i`, then `npm run docker:publish`. This is the legacy docker flow; it does **not** run the secret scan that the UAT script does, so review the tarball contents before pushing. (Folding final releases into the script is a planned follow-up.)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.8.4-edge-fallback-4",
+  "version": "1.8.5-edge-fallback-5",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",

package/scripts/publish-uat.sh

@@ -0,0 +1,149 @@
+#!/usr/bin/env bash
+#
+# publish-uat.sh — publish a UAT-suffixed version of @designcrowd/fe-shared-lib
+#
+# Usage:   ./scripts/publish-uat.sh <suffix>
+# Example: ./scripts/publish-uat.sh edge-fallback-2
+#
+# Reads the npm publish token from $NPM_PUBLISH_TOKEN_FILE
+# (default ~/.config/designcrowd/npm-publish-token, mode 600).
+# The token is never written into the repo.
+#
+# Workflow:
+#   1. Validate branch (refuse master) and suffix.
+#   2. Compute new version = <base>-<suffix>, refuse if already published.
+#   3. Bump package.json, run bundle-translation.
+#   4. npm pack — produces a tarball.
+#   5. Secret scan: dangerous filenames + token-shaped strings + the
+#      literal token bytes from the token file (if it leaked into the
+#      tree somehow, this catches it).
+#   6. npm publish <tarball> via a temp .npmrc in /tmp (mode 600,
+#      removed on exit).
+#   7. git add + commit the version bump.
+#
+# Anything in steps 4-6 that fails leaves the working tree dirty so you
+# can investigate. The commit only lands after the registry confirms
+# the upload.
+
+set -euo pipefail
+
+PKG="@designcrowd/fe-shared-lib"
+TOKEN_FILE="${NPM_PUBLISH_TOKEN_FILE:-$HOME/.config/designcrowd/npm-publish-token}"
+
+abort() { echo "ABORT: $*" >&2; exit 1; }
+
+# --- args ---
+SUFFIX="${1:-}"
+[[ -z "$SUFFIX" ]] && abort "usage: $0 <suffix>  e.g. $0 edge-fallback-2"
+# Semver pre-release identifiers are [0-9A-Za-z-], dot-separated. Reject underscores etc.
+# so we fail before npm rejects the version mid-flight with a dirty tree.
+[[ "$SUFFIX" =~ ^[A-Za-z0-9-]+(\.[A-Za-z0-9-]+)*$ ]] || abort "suffix must match semver pre-release: alphanumerics/hyphens, optionally dot-separated"
+
+# --- repo state ---
+cd "$(git rev-parse --show-toplevel)"
+BRANCH=$(git symbolic-ref --short HEAD)
+[[ "$BRANCH" == "master" || "$BRANCH" == "main" ]] && abort "refusing to publish from $BRANCH"
+
+# --- preconditions: files we'll commit must be clean, so unrelated edits don't get swept into the version-bump commit ---
+[[ -z "$(git status --porcelain -- package.json)" ]] || abort "package.json has uncommitted changes; commit or stash before publishing"
+if [[ -d src/bundles ]] && [[ -n "$(git status --porcelain -- src/bundles)" ]]; then
+  abort "src/bundles has uncommitted changes; commit or stash before publishing"
+fi
+
+# --- token ---
+[[ -f "$TOKEN_FILE" ]] || abort "no token at $TOKEN_FILE (set NPM_PUBLISH_TOKEN_FILE to override)"
+TOKEN=$(tr -d '[:space:]' < "$TOKEN_FILE")
+[[ -n "$TOKEN" ]] || abort "token file is empty: $TOKEN_FILE"
+
+# --- toolchain version check ---
+NODE_V=$(node -v)
+NPM_V=$(npm -v)
+echo "==> node $NODE_V, npm $NPM_V"
+if [[ -f .nvmrc ]]; then
+  WANT=$(tr -d '[:space:]v' < .nvmrc)
+  WANT_MAJOR="${WANT%%.*}"
+  HAVE_MAJOR=$(echo "${NODE_V#v}" | cut -d. -f1)
+  if [[ "$WANT_MAJOR" != "$HAVE_MAJOR" ]]; then
+    echo "WARNING: .nvmrc wants Node $WANT (major $WANT_MAJOR), you're on $NODE_V. Consider 'nvm use'." >&2
+  fi
+fi
+
+# --- compute version ---
+BASE=$(node -p "require('./package.json').version.replace(/-.*/, '')")
+NEW="$BASE-$SUFFIX"
+
+if npm view "$PKG@$NEW" version >/dev/null 2>&1; then
+  abort "$PKG@$NEW already published — pick a new suffix"
+fi
+
+echo "==> publishing $PKG@$NEW from branch $BRANCH"
+
+# --- bump + bundle ---
+node -e "const fs=require('fs');const p=require('./package.json');p.version='$NEW';fs.writeFileSync('./package.json', JSON.stringify(p, null, 2)+'\n');"
+echo "==> running bundle-translation"
+npm run --silent bundle-translation >/dev/null
+
+# --- cleanup trap: registered before any artifacts so a failed mktemp/pack still tidies up ---
+SCAN_DIR=""; TMP_NPMRC=""; TARBALL=""
+cleanup() {
+  [[ -n "$SCAN_DIR" ]] && rm -rf "$SCAN_DIR"
+  [[ -n "$TMP_NPMRC" ]] && rm -f "$TMP_NPMRC"
+  [[ -n "$TARBALL" ]] && rm -f "$TARBALL"
+  return 0
+}
+trap cleanup EXIT
+
+SCAN_DIR=$(mktemp -d)
+TMP_NPMRC=$(mktemp /tmp/fe-shared-lib-publish.XXXXXX.npmrc)
+chmod 600 "$TMP_NPMRC"
+
+# --- pack ---
+echo "==> packing"
+TARBALL=$(npm pack --silent)
+[[ -f "$TARBALL" ]] || abort "npm pack did not produce a tarball"
+
+# --- secret scan: filenames ---
+echo "==> scanning $TARBALL"
+DANGEROUS_PATHS='(^|/)(\.env(\..+)?|\.npmrc|\.npm-publish-token|id_rsa.*|id_ed25519.*|.*\.pem|.*\.key|.*[._-]token([._-].*)?|.*[._-]secret([._-].*)?|.*[._-]credentials?([._-].*)?)$|(^|/)\.(aws|ssh|gnupg)/'
+if BAD=$(tar tzf "$TARBALL" | grep -E -i "$DANGEROUS_PATHS" || true); [[ -n "$BAD" ]]; then
+  echo "$BAD" >&2
+  abort "dangerous filenames in tarball"
+fi
+
+# --- secret scan: contents ---
+tar xzf "$TARBALL" -C "$SCAN_DIR"
+
+# Token-shaped patterns. Length floors (e.g. {30,}) keep documentation placeholders
+# like 'npm_TOKEN' or '${NPM_TOKEN}' from tripping the check.
+SECRET_PATTERNS='(npm_[A-Za-z0-9]{30,}|AKIA[0-9A-Z]{16}|ASIA[0-9A-Z]{16}|gh[pousr]_[A-Za-z0-9]{20,}|xox[baprs]-[A-Za-z0-9-]{10,}|sk_live_[A-Za-z0-9]{20,}|-----BEGIN [A-Z ]*PRIVATE KEY-----)'
+if HITS=$(grep -REn -I -E "$SECRET_PATTERNS" "$SCAN_DIR" 2>/dev/null || true); [[ -n "$HITS" ]]; then
+  echo "$HITS" >&2
+  abort "secret-shaped string in tarball"
+fi
+
+# Belt-and-braces: the token's own bytes. If our publish token ever
+# lands in a tracked file by accident, this catches it regardless of
+# pattern-matching. Pass the token via stdin (-f -) so it doesn't appear
+# in the process arglist (visible to other users via `ps`).
+if printf '%s' "$TOKEN" | grep -RFqf - "$SCAN_DIR" 2>/dev/null; then
+  abort "publish token bytes appear in tarball — DO NOT publish"
+fi
+
+FILES=$(tar tzf "$TARBALL" | wc -l | tr -d ' ')
+SIZE=$(du -h "$TARBALL" | cut -f1)
+echo "==> scan clean. $FILES files, $SIZE"
+
+# --- publish ---
+printf '//registry.npmjs.org/:_authToken=%s\n' "$TOKEN" > "$TMP_NPMRC"
+echo "==> publishing"
+npm publish "$TARBALL" --userconfig "$TMP_NPMRC"
+
+# --- commit bump ---
+git add -- package.json
+[[ -d src/bundles ]] && git add -- src/bundles
+git commit -m "bump version to $NEW" >/dev/null
+echo
+echo "Published $PKG@$NEW (commit $(git rev-parse --short HEAD))"
+echo
+echo "Install in BrandCrowd.Net:"
+echo "  npm i $PKG@$NEW"

package/src/atoms/components/AiPoweredLoader/AiPoweredLoader.vue

@@ -1,21 +1,21 @@
 <template>
   <div class="sparkle-loader" role="status" :aria-label="alt">
     <svg :width="size" :height="size" viewBox="-100 -100 200 200" xmlns="http://www.w3.org/2000/svg">
-      <g id="bottom-star">
+      <g class="bottom-star">
         <path
           d="M39.286883,33.960772c-6.044693,2.417601-7.991402,4.376919-10.393442,10.460772C26.491402,38.337691,24.544694,36.378373,18.5,33.960772C24.544694,31.543171,26.491402,29.583852,28.893441,23.5c2.402041,6.083852,4.348749,8.043171,10.393442,10.460772Z"
           transform="matrix(1 0 0 1 -5 -6)"
           fill="#8b5cf6"
         ></path>
       </g>
-      <g id="top-star">
+      <g class="top-star">
         <path
           d="M39.056802,33.844967c-5.977787,2.390837-7.902948,4.328466-10.278401,10.344967C26.402949,38.173434,24.477787,36.235805,18.5,33.844967C24.477787,31.454131,26.402949,29.516502,28.778401,23.5c2.375453,6.016502,4.300614,7.954131,10.278401,10.344967Z"
           transform="matrix(1 0 0 1 -5 -61)"
           fill="#8b5cf6"
         ></path>
       </g>
-      <g id="primary">
+      <g class="primary">
         <path
           d="M65.653886,47.229432c-13.71205,5.484135-18.128049,9.928695-23.576943,23.729431C36.62805,57.158127,32.212051,52.713567,18.5,47.229432C32.212051,41.745296,36.62805,37.300736,42.076943,23.5c5.448894,13.800736,9.864893,18.245296,23.576943,23.729432Z"
           transform="matrix(1.595951 0.008736 -0.00868 1.585695 -77.344676 -75.246035)"
@@ -26,14 +26,14 @@
         <path
           d="M 0 -90
       A 90 90 0 0 1 85 -30"
-          stroke="url(#sparkle-grad-2)"
+          :stroke="`url(#${gradientId})`"
           stroke-width="16"
           stroke-linecap="round"
           fill="transparent"
         ></path>
       </g>
       <defs>
-        <linearGradient id="sparkle-grad-2" x1="0" y1="-90" x2="85" y2="-30" gradientUnits="userSpaceOnUse">
+        <linearGradient :id="gradientId" x1="0" y1="-90" x2="85" y2="-30" gradientUnits="userSpaceOnUse">
           <stop stop-color="#E3E3E3" stop-opacity="0"></stop>
           <stop offset="0.33" stop-color="#E3E3E3" stop-opacity="0.3"></stop>
           <stop offset="0.66" stop-color="#8b5cf6" stop-opacity="0.5"></stop>
@@ -45,6 +45,8 @@
 </template>
 
 <script setup lang="ts">
+import { useId } from 'vue';
+
 interface Props {
   size?: number;
   alt?: string;
@@ -54,6 +56,8 @@ withDefaults(defineProps<Props>(), {
   size: 96,
   alt: 'loading',
 });
+
+const gradientId = useId();
 </script>
 
 <style scoped>
@@ -70,7 +74,7 @@ withDefaults(defineProps<Props>(), {
   }
 }
 
-#primary {
+.primary {
   animation: ai-loader-primary 2000ms infinite ease-in-out;
 }
 
@@ -86,11 +90,11 @@ withDefaults(defineProps<Props>(), {
   }
 }
 
-#top-star {
+.top-star {
   animation: ai-loader-secondary-top 2000ms infinite ease-in-out;
 }
 
-#bottom-star {
+.bottom-star {
   animation: ai-loader-secondary-bottom 2000ms infinite ease-in-out;
 }