jfs-components 0.1.0 → 0.1.8

package/lib/commonjs/components/docs/modeControls.js

@@ -0,0 +1,116 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.modeArgTypes = modeArgTypes;
+exports.modeDecorator = modeDecorator;
+exports.withModeControls = withModeControls;
+var _react = _interopRequireDefault(require("react"));
+var _figmaModes = require("../../design-tokens/figma-modes.generated");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Storybook helpers that turn a component's design-token collections into real,
+ * per-collection `select` controls and merge the picked values into the `modes`
+ * prop — so authors get the same enum-driven DX in the Storybook Controls panel
+ * that the typed `modes` prop gives them in code.
+ *
+ * Fully backward compatible:
+ *   - If nothing is picked, `modes` is left exactly as the story provided it.
+ *   - Any `modes` value the story already sets WINS over a control selection,
+ *     so existing stories render identically until someone touches a control.
+ *   - The synthetic control args are stripped before they reach the component,
+ *     so they never leak in as unknown props.
+ */const UNSET = '(default)';
+/**
+ * Resolve the list of collections to expose. Accepts a component name (looked up
+ * in the generated map), an explicit list, or both (merged + de-duplicated).
+ */
+function resolveCollections(componentOrCollections, extra = []) {
+  const fromName = typeof componentOrCollections === 'string' ? _figmaModes.FIGMA_COMPONENT_MODES[componentOrCollections] || [] : componentOrCollections;
+  const merged = new Set([...fromName, ...extra]);
+  // Only keep collections that actually have more than one mode to choose from.
+  return [...merged].filter(name => {
+    const modes = _figmaModes.FIGMA_MODES[name];
+    return Array.isArray(modes) && modes.length > 1;
+  });
+}
+
+/**
+ * Build `argTypes` entries — one `select` per multi-mode collection, grouped
+ * under a "Modes" category. Spread the result into your story `meta.argTypes`.
+ */
+function modeArgTypes(componentOrCollections, extra = []) {
+  const collections = resolveCollections(componentOrCollections, extra);
+  const argTypes = {};
+  for (const name of collections) {
+    const modes = _figmaModes.FIGMA_MODES[name];
+    argTypes[name] = {
+      name,
+      description: `\`${name}\` collection mode`,
+      control: {
+        type: 'select'
+      },
+      options: [UNSET, ...modes],
+      table: {
+        category: 'Modes'
+      }
+    };
+  }
+  return argTypes;
+}
+
+/**
+ * A decorator that merges the picked collection modes into `args.modes` and
+ * strips the synthetic control args before they reach the component.
+ */
+function modeDecorator(componentOrCollections, extra = []) {
+  const collections = resolveCollections(componentOrCollections, extra);
+  return function ModeControlsDecorator(Story, context) {
+    const args = context?.args || {};
+    const picked = {};
+    // Start from the real story args so nothing is dropped. Passing only the
+    // synthetic keys here would REPLACE the story args in this Storybook
+    // renderer, wiping out real props (e.g. `series`, slot nodes) and leaving
+    // the component to render empty/crash.
+    const override = {
+      ...args
+    };
+    for (const name of collections) {
+      const value = args[name];
+      if (value && value !== UNSET) {
+        picked[name] = value;
+      }
+      // Neutralise the synthetic arg so it is never spread onto the component.
+      override[name] = undefined;
+    }
+
+    // Explicit story-provided modes win over control selections.
+    override.modes = {
+      ...picked,
+      ...(args.modes || {})
+    };
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Story, {
+      args: override
+    });
+  };
+}
+
+/**
+ * Convenience: returns `{ argTypes, decorators }` to spread directly into a
+ * story `meta`.
+ *
+ * @example
+ * const meta = {
+ *   title: 'Components/Button',
+ *   component: Button,
+ *   ...withModeControls('Button'),
+ * }
+ */
+function withModeControls(componentOrCollections, extra = []) {
+  return {
+    argTypes: modeArgTypes(componentOrCollections, extra),
+    decorators: [modeDecorator(componentOrCollections, extra)]
+  };
+}

package/lib/commonjs/components/index.js

@@ -87,6 +87,12 @@ Object.defineProperty(exports, "Balance", {
     return _Balance.default;
   }
 });
+Object.defineProperty(exports, "BenefitCard", {
+  enumerable: true,
+  get: function () {
+    return _BenefitCard.default;
+  }
+});
 Object.defineProperty(exports, "BottomNav", {
   enumerable: true,
   get: function () {
@@ -183,6 +189,12 @@ Object.defineProperty(exports, "Carousel", {
     return _Carousel.default;
   }
 });
+Object.defineProperty(exports, "CcCard", {
+  enumerable: true,
+  get: function () {
+    return _CcCard.default;
+  }
+});
 Object.defineProperty(exports, "Checkbox", {
   enumerable: true,
   get: function () {
@@ -237,6 +249,18 @@ Object.defineProperty(exports, "ClusterBubble", {
     return _ClusterBubble.default;
   }
 });
+Object.defineProperty(exports, "CompareTable", {
+  enumerable: true,
+  get: function () {
+    return _CompareTable.default;
+  }
+});
+Object.defineProperty(exports, "ComparisonBar", {
+  enumerable: true,
+  get: function () {
+    return _ComparisonBar.default;
+  }
+});
 Object.defineProperty(exports, "CoverageBarComparison", {
   enumerable: true,
   get: function () {
@@ -513,6 +537,12 @@ Object.defineProperty(exports, "OTPResend", {
     return _OTP.OTPResend;
   }
 });
+Object.defineProperty(exports, "Overlay", {
+  enumerable: true,
+  get: function () {
+    return _Overlay.default;
+  }
+});
 Object.defineProperty(exports, "PageHero", {
   enumerable: true,
   get: function () {
@@ -525,6 +555,12 @@ Object.defineProperty(exports, "PaymentFeedback", {
     return _PaymentFeedback.default;
   }
 });
+Object.defineProperty(exports, "PdpCcCard", {
+  enumerable: true,
+  get: function () {
+    return _PdpCcCard.default;
+  }
+});
 Object.defineProperty(exports, "PlanComparisonCard", {
   enumerable: true,
   get: function () {
@@ -555,6 +591,12 @@ Object.defineProperty(exports, "ProductLabel", {
     return _ProductLabel.default;
   }
 });
+Object.defineProperty(exports, "ProductMerchandisingCard", {
+  enumerable: true,
+  get: function () {
+    return _ProductMerchandisingCard.default;
+  }
+});
 Object.defineProperty(exports, "ProductOverview", {
   enumerable: true,
   get: function () {
@@ -567,6 +609,12 @@ Object.defineProperty(exports, "ProgressBadge", {
     return _ProgressBadge.default;
   }
 });
+Object.defineProperty(exports, "ProjectionMarker", {
+  enumerable: true,
+  get: function () {
+    return _ProjectionMarker.default;
+  }
+});
 Object.defineProperty(exports, "Radio", {
   enumerable: true,
   get: function () {
@@ -627,6 +675,12 @@ Object.defineProperty(exports, "SegmentedTrackSegment", {
     return _SegmentedTrack.SegmentedTrackSegment;
   }
 });
+Object.defineProperty(exports, "Slider", {
+  enumerable: true,
+  get: function () {
+    return _Slider.default;
+  }
+});
 Object.defineProperty(exports, "Slot", {
   enumerable: true,
   get: function () {
@@ -741,6 +795,12 @@ Object.defineProperty(exports, "TextInput", {
     return _TextInput.default;
   }
 });
+Object.defineProperty(exports, "TextSegment", {
+  enumerable: true,
+  get: function () {
+    return _TextSegment.default;
+  }
+});
 Object.defineProperty(exports, "ThreadHero", {
   enumerable: true,
   get: function () {
@@ -868,6 +928,7 @@ var _AppBar = _interopRequireDefault(require("./AppBar/AppBar"));
 var _Avatar = _interopRequireDefault(require("./Avatar/Avatar"));
 var _AvatarGroup = _interopRequireDefault(require("./AvatarGroup/AvatarGroup"));
 var _Badge = _interopRequireDefault(require("./Badge/Badge"));
+var _BenefitCard = _interopRequireDefault(require("./BenefitCard/BenefitCard"));
 var _BottomNav = _interopRequireDefault(require("./BottomNav/BottomNav"));
 var _BottomNavItem = _interopRequireDefault(require("./BottomNavItem/BottomNavItem"));
 var _BrandChip = _interopRequireDefault(require("./BrandChip/BrandChip"));
@@ -882,6 +943,7 @@ var _CheckboxGroup = _interopRequireDefault(require("./CheckboxGroup/CheckboxGro
 var _CardFeedback = _interopRequireDefault(require("./CardFeedback/CardFeedback"));
 var _CardFinancialCondition = _interopRequireDefault(require("./CardFinancialCondition/CardFinancialCondition"));
 var _CardInsight = _interopRequireDefault(require("./CardInsight/CardInsight"));
+var _CcCard = _interopRequireDefault(require("./CcCard/CcCard"));
 var _Disclaimer = _interopRequireDefault(require("./Disclaimer/Disclaimer"));
 var _Divider = _interopRequireDefault(require("./Divider/Divider"));
 var _Drawer = _interopRequireDefault(require("./Drawer/Drawer"));
@@ -899,6 +961,7 @@ var _CircularProgressBarDoted = _interopRequireDefault(require("./CircularProgre
 var _CircularRating = _interopRequireDefault(require("./CircularRating/CircularRating"));
 var _CoverageRing = _interopRequireDefault(require("./CoverageRing/CoverageRing"));
 var _CoverageBarComparison = _interopRequireDefault(require("./CoverageBarComparison/CoverageBarComparison"));
+var _ComparisonBar = _interopRequireDefault(require("./ComparisonBar/ComparisonBar"));
 var _AllocationComparisonChart = _interopRequireDefault(require("./AllocationComparisonChart/AllocationComparisonChart"));
 var _MonthlyStatusGrid = _interopRequireWildcard(require("./MonthlyStatusGrid/MonthlyStatusGrid"));
 var _Gauge = _interopRequireDefault(require("./Gauge/Gauge"));
@@ -924,9 +987,11 @@ var _NoteInput = _interopRequireDefault(require("./NoteInput/NoteInput"));
 var _Nudge = _interopRequireDefault(require("./Nudge/Nudge"));
 var _NavArrow = _interopRequireDefault(require("./NavArrow/NavArrow"));
 var _Numpad = _interopRequireDefault(require("./Numpad/Numpad"));
+var _Overlay = _interopRequireDefault(require("./Overlay/Overlay"));
 var _Title = _interopRequireDefault(require("./Title/Title"));
 var _Screen = _interopRequireDefault(require("./Screen/Screen"));
 var _Section = _interopRequireDefault(require("./Section/Section"));
+var _Slider = _interopRequireDefault(require("./Slider/Slider"));
 var _Slot = _interopRequireDefault(require("./Slot/Slot"));
 var _Spinner = _interopRequireDefault(require("./Spinner/Spinner"));
 var _Stepper = _interopRequireDefault(require("./Stepper/Stepper"));
@@ -973,12 +1038,16 @@ var _ToastProvider = _interopRequireDefault(require("./Toast/ToastProvider"));
 var _useToast = require("./Toast/useToast");
 var _AmountInput = _interopRequireDefault(require("./AmountInput/AmountInput"));
 var _PageHero = _interopRequireDefault(require("./PageHero/PageHero"));
+var _PdpCcCard = _interopRequireDefault(require("./PdpCcCard/PdpCcCard"));
 var _Popup = _interopRequireDefault(require("./Popup/Popup"));
 var _PortfolioHero = _interopRequireDefault(require("./PortfolioHero/PortfolioHero"));
 var _PlanComparisonCard = _interopRequireDefault(require("./PlanComparisonCard/PlanComparisonCard"));
+var _CompareTable = _interopRequireDefault(require("./CompareTable/CompareTable"));
 var _PoweredByLabel = _interopRequireDefault(require("./PoweredByLabel/PoweredByLabel"));
 var _ProductLabel = _interopRequireDefault(require("./ProductLabel/ProductLabel"));
+var _ProductMerchandisingCard = _interopRequireDefault(require("./ProductMerchandisingCard/ProductMerchandisingCard"));
 var _ProductOverview = _interopRequireDefault(require("./ProductOverview/ProductOverview"));
+var _ProjectionMarker = _interopRequireDefault(require("./ProjectionMarker/ProjectionMarker"));
 var _ProgressBadge = _interopRequireDefault(require("./ProgressBadge/ProgressBadge"));
 var _SwappableAmount = _interopRequireDefault(require("./SwappableAmount/SwappableAmount"));
 var _OTP = _interopRequireWildcard(require("./OTP/OTP"));
@@ -989,6 +1058,7 @@ var _StrengthIndicator = _interopRequireDefault(require("./StrengthIndicator/Str
 var _SummaryTile = _interopRequireDefault(require("./SummaryTile/SummaryTile"));
 var _TestimonialsCard = _interopRequireDefault(require("./TestimonialsCard/TestimonialsCard"));
 var _Text = _interopRequireDefault(require("./Text/Text"));
+var _TextSegment = _interopRequireDefault(require("./TextSegment/TextSegment"));
 var _SegmentedControl = _interopRequireDefault(require("./SegmentedControl/SegmentedControl"));
 var _Toggle = _interopRequireDefault(require("./Toggle/Toggle"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }