jfs-components 0.1.0 → 0.1.8

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

@@ -0,0 +1,111 @@
+"use strict";
+
+import React from 'react';
+import { FIGMA_MODES, FIGMA_COMPONENT_MODES } from '../../design-tokens/figma-modes.generated';
+
+/**
+ * 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.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+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' ? 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 = 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`.
+ */
+export function modeArgTypes(componentOrCollections, extra = []) {
+  const collections = resolveCollections(componentOrCollections, extra);
+  const argTypes = {};
+  for (const name of collections) {
+    const modes = 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.
+ */
+export 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__*/_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'),
+ * }
+ */
+export function withModeControls(componentOrCollections, extra = []) {
+  return {
+    argTypes: modeArgTypes(componentOrCollections, extra),
+    decorators: [modeDecorator(componentOrCollections, extra)]
+  };
+}

package/lib/module/components/index.js

@@ -7,6 +7,7 @@ export { default as AppBar } from './AppBar/AppBar';
 export { default as Avatar } from './Avatar/Avatar';
 export { default as AvatarGroup } from './AvatarGroup/AvatarGroup';
 export { default as Badge } from './Badge/Badge';
+export { default as BenefitCard } from './BenefitCard/BenefitCard';
 export { default as BottomNav } from './BottomNav/BottomNav';
 export { default as BottomNavItem } from './BottomNavItem/BottomNavItem';
 export { default as BrandChip } from './BrandChip/BrandChip';
@@ -21,6 +22,7 @@ export { default as CheckboxGroup } from './CheckboxGroup/CheckboxGroup';
 export { default as CardFeedback } from './CardFeedback/CardFeedback';
 export { default as CardFinancialCondition } from './CardFinancialCondition/CardFinancialCondition';
 export { default as CardInsight } from './CardInsight/CardInsight';
+export { default as CcCard } from './CcCard/CcCard';
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
 export { default as Divider } from './Divider/Divider';
 export { default as Drawer } from './Drawer/Drawer';
@@ -39,6 +41,7 @@ export { default as CircularProgressBarDoted } from './CircularProgressBarDoted/
 export { default as CircularRating } from './CircularRating/CircularRating';
 export { default as CoverageRing } from './CoverageRing/CoverageRing';
 export { default as CoverageBarComparison } from './CoverageBarComparison/CoverageBarComparison';
+export { default as ComparisonBar } from './ComparisonBar/ComparisonBar';
 export { default as AllocationComparisonChart } from './AllocationComparisonChart/AllocationComparisonChart';
 export { default as MonthlyStatusGrid, CalendarGlyph } from './MonthlyStatusGrid/MonthlyStatusGrid';
 export { default as Gauge } from './Gauge/Gauge';
@@ -64,9 +67,11 @@ export { default as NoteInput } from './NoteInput/NoteInput';
 export { default as Nudge } from './Nudge/Nudge';
 export { default as NavArrow } from './NavArrow/NavArrow';
 export { default as Numpad } from './Numpad/Numpad';
+export { default as Overlay } from './Overlay/Overlay';
 export { default as Title } from './Title/Title';
 export { default as Screen } from './Screen/Screen';
 export { default as Section } from './Section/Section';
+export { default as Slider } from './Slider/Slider';
 export { default as Slot } from './Slot/Slot';
 export { default as Spinner } from './Spinner/Spinner';
 export { default as Stepper } from './Stepper/Stepper';
@@ -117,12 +122,16 @@ export { default as ToastProvider } from './Toast/ToastProvider';
 export { useToast, addToast, closeToast, closeAll } from './Toast/useToast';
 export { default as AmountInput } from './AmountInput/AmountInput';
 export { default as PageHero } from './PageHero/PageHero';
+export { default as PdpCcCard } from './PdpCcCard/PdpCcCard';
 export { default as Popup } from './Popup/Popup';
 export { default as PortfolioHero } from './PortfolioHero/PortfolioHero';
 export { default as PlanComparisonCard } from './PlanComparisonCard/PlanComparisonCard';
+export { default as CompareTable } from './CompareTable/CompareTable';
 export { default as PoweredByLabel } from './PoweredByLabel/PoweredByLabel';
 export { default as ProductLabel } from './ProductLabel/ProductLabel';
+export { default as ProductMerchandisingCard } from './ProductMerchandisingCard/ProductMerchandisingCard';
 export { default as ProductOverview } from './ProductOverview/ProductOverview';
+export { default as ProjectionMarker } from './ProjectionMarker/ProjectionMarker';
 export { default as ProgressBadge } from './ProgressBadge/ProgressBadge';
 export { default as SwappableAmount } from './SwappableAmount/SwappableAmount';
 export { default as OTP, OTPResend, useOtpResend } from './OTP/OTP';
@@ -133,5 +142,6 @@ export { default as StrengthIndicator } from './StrengthIndicator/StrengthIndica
 export { default as SummaryTile } from './SummaryTile/SummaryTile';
 export { default as TestimonialsCard } from './TestimonialsCard/TestimonialsCard';
 export { default as Text } from './Text/Text';
+export { default as TextSegment } from './TextSegment/TextSegment';
 export { default as SegmentedControl } from './SegmentedControl/SegmentedControl';
 export { default as Toggle } from './Toggle/Toggle';