@spaced-out/ui-design-system 0.5.37 → 0.5.39

package/lib/components/PreviewCard/PreviewCard.module.css

@@ -0,0 +1,216 @@
+@value (
+  spaceSmall,
+  spaceXSmall,
+  spaceXXSmall,
+  spaceXLarge,
+  spaceNone
+) from '../../styles/variables/_space.css';
+
+@value (
+  colorBorderPrimary,
+  colorBackgroundTertiary,
+  colorNeutralLightest,
+  colorFillSecondary,
+  colorInformationLightest,
+  colorFillPrimary,
+  colorInformation,
+  colorTextClickable,
+  colorFocusPrimary,
+  colorDataViz1,
+  colorDataViz2,
+  colorTextDisabled
+) from '../../styles/variables/_color.css';
+
+@value (
+  borderRadiusSmall,
+  borderRadiusMedium,
+  borderWidthPrimary,
+  borderWidthTertiary,
+  borderWidthNone
+) from '../../styles/variables/_border.css';
+
+@value (
+  shadowBoxShadow1X,
+  shadowBoxShadow1Y,
+  shadowBoxShadow1Blur,
+  shadowBoxShadow2X,
+  shadowBoxShadow2Y,
+  shadowBoxShadow2Blur,
+  shadowBoxShadow1Spread,
+  shadowBoxShadow1Color,
+  shadowBoxShadow4Spread
+) from '../../styles/variables/_shadow.css';
+
+@value (
+  sizeFluid,
+  size66,
+  size50,
+  size4,
+  size120,
+  size10
+) from '../../styles/variables/_size.css';
+
+@value (
+  motionDurationNormal,
+  motionDurationSlow,
+  motionEaseInEaseOut
+) from '../../styles/variables/_motion.css';
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: spaceXSmall;
+  width: sizeFluid;
+}
+
+.previewTextContainer {
+  display: flex;
+  align-items: center;
+  gap: spaceXXSmall;
+}
+
+.card {
+  background-color: colorBackgroundTertiary;
+  border: borderWidthPrimary solid colorBorderPrimary;
+  border-radius: borderRadiusMedium;
+  cursor: pointer;
+  outline: none;
+  transition: all motionDurationNormal motionEaseInEaseOut;
+  width: sizeFluid;
+  min-height: fit-content;
+  overflow: hidden;
+
+  &:focus {
+    border-color: colorTextClickable;
+    box-shadow: borderWidthNone borderWidthNone borderWidthNone
+      borderWidthTertiary colorFocusPrimary;
+  }
+
+  &:hover:not(:focus) {
+    box-shadow: shadowBoxShadow1X shadowBoxShadow1Y shadowBoxShadow1Blur
+      shadowBoxShadow1Spread shadowBoxShadow1Color;
+    background-color: colorNeutralLightest;
+    border-color: transparent;
+    background-image: linear-gradient(
+        colorNeutralLightest,
+        colorNeutralLightest
+      ),
+      linear-gradient(to right, colorDataViz2, colorDataViz1);
+    background-clip: content-box, border-box;
+    background-origin: border-box;
+  }
+
+  &:focus:hover {
+    box-shadow: borderWidthNone borderWidthNone borderWidthNone
+      borderWidthTertiary colorFocusPrimary;
+    background-color: colorNeutralLightest;
+  }
+
+  &.selected {
+    border: borderWidthPrimary solid transparent;
+    border-radius: borderRadiusMedium;
+    background-image: linear-gradient(
+        colorFillSecondary,
+        colorInformationLightest
+      ),
+      linear-gradient(to right, colorFillPrimary, colorInformation);
+    background-clip: content-box, border-box;
+    background-origin: border-box;
+    box-shadow: none;
+
+    &:focus {
+      box-shadow: borderWidthNone borderWidthNone borderWidthNone
+        borderWidthTertiary colorFocusPrimary;
+      border-color: colorTextClickable;
+    }
+
+    &:focus:hover {
+      background-image: linear-gradient(
+        colorNeutralLightest,
+        colorNeutralLightest
+      );
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+    background-color: colorBackgroundTertiary;
+    border: borderWidthPrimary solid colorBorderPrimary;
+  }
+}
+
+.cardContent {
+  display: flex;
+  align-items: flex-start;
+  padding: spaceSmall;
+  gap: spaceSmall;
+  position: relative;
+  min-height: size66;
+}
+
+.mainContent {
+  display: flex;
+  flex-direction: column;
+  gap: spaceXSmall;
+  flex: 1;
+  min-width: spaceNone;
+  padding-right: calc(spaceXLarge + spaceXSmall + spaceSmall);
+}
+
+.titleText {
+  width: sizeFluid;
+}
+
+.previewText {
+  width: fit-content;
+}
+
+.cardIconSection {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  height: calc(size120 + size10);
+  width: calc(size50 + size4);
+  flex-shrink: 0;
+  border-radius: borderRadiusSmall;
+  background-color: colorNeutralLightest;
+  border: borderWidthPrimary solid colorBorderPrimary;
+  transition: all motionDurationSlow motionEaseInEaseOut;
+  transform: rotate(-3deg);
+  padding-top: spaceSmall;
+  position: absolute;
+  right: spaceXSmall;
+  box-shadow: shadowBoxShadow2X shadowBoxShadow2Y shadowBoxShadow2Blur
+    shadowBoxShadow4Spread shadowBoxShadow1Color;
+}
+
+.card:hover .cardIconSection {
+  transform: rotate(5deg);
+}
+
+.card.selected .cardIconSection,
+.card:hover .cardIconSection {
+  border: borderWidthPrimary solid colorBorderPrimary;
+  background-image: linear-gradient(
+    colorBackgroundTertiary,
+    colorBackgroundTertiary
+  );
+  background-clip: border-box;
+  background-origin: border-box;
+}
+
+.card.selected .cardIconSection > div,
+.card:hover .cardIconSection > div {
+  color: colorTextClickable;
+}
+
+.card.disabled .cardIconSection > div {
+  color: colorTextDisabled;
+}
+
+.helperText {
+  display: flex;
+  align-items: center;
+  gap: spaceXXSmall;
+}

package/lib/components/PreviewCard/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../../components/PreviewCard/PreviewCard';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/PreviewCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewCard/index.ts"],"names":[],"mappings":"AAAA,cAAc,wCAAwC,CAAC"}

package/lib/components/PreviewCard/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _PreviewCard = require("./PreviewCard");
+Object.keys(_PreviewCard).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PreviewCard[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PreviewCard[key];
+    }
+  });
+});

package/lib/components/ScrollingLoader/ScrollingLoader.d.ts

@@ -0,0 +1,35 @@
+import type { Flow } from 'flow-to-typescript-codemod';
+export declare const SCROLLING_LOADER_SIZE: Readonly<{
+    medium: "medium";
+    large: "large";
+    fluid: "fluid";
+}>;
+export type ScrollingLoaderSize = (typeof SCROLLING_LOADER_SIZE)[keyof typeof SCROLLING_LOADER_SIZE];
+type ClassNames = Readonly<{
+    wrapper?: string;
+    skeletonContainer?: string;
+    textContainer?: string;
+}>;
+export interface IconItem {
+    name: string;
+    type?: 'regular' | 'solid' | 'duotone' | 'brands';
+}
+export interface ScrollingLoaderProps {
+    /** List of icons to display in skeleton rows */
+    iconList: IconItem[];
+    /** List of text messages to cycle through */
+    textList: string[];
+    /** Size variant of the loader */
+    size?: ScrollingLoaderSize;
+    /** Custom class names for styling */
+    classNames?: ClassNames;
+    /** Test ID for the component */
+    testId?: string;
+    /** Animation duration in ms for each text item (default: 2500) */
+    textAnimationDuration?: number;
+    /** Whether to loop through texts or stop at the last one (default: false) */
+    loopTexts?: boolean;
+}
+export declare const ScrollingLoader: Flow.AbstractComponent<ScrollingLoaderProps, HTMLDivElement>;
+export {};
+//# sourceMappingURL=ScrollingLoader.d.ts.map

package/lib/components/ScrollingLoader/ScrollingLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollingLoader.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollingLoader/ScrollingLoader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAUrD,eAAO,MAAM,qBAAqB;;;;EAIhC,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAC7B,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,OAAO,qBAAqB,CAAC,CAAC;AAErE,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC,CAAC;AAEH,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;CACnD;AAED,MAAM,WAAW,oBAAoB;IACnC,gDAAgD;IAChD,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,iCAAiC;IACjC,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,qCAAqC;IACrC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kEAAkE;IAClE,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,6EAA6E;IAC7E,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,eAAe,EAAE,IAAI,CAAC,iBAAiB,CAClD,oBAAoB,EACpB,cAAc,CAqOf,CAAC"}

package/lib/components/ScrollingLoader/ScrollingLoader.js

@@ -0,0 +1,205 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScrollingLoader = exports.SCROLLING_LOADER_SIZE = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
+var _SemanticIcon = require("../Icon/SemanticIcon");
+var _ScrollingLoaderModule = _interopRequireDefault(require("./ScrollingLoader.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+const SCROLLING_LOADER_SIZE = exports.SCROLLING_LOADER_SIZE = Object.freeze({
+  medium: 'medium',
+  large: 'large',
+  fluid: 'fluid'
+});
+const ScrollingLoader = exports.ScrollingLoader = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    iconList,
+    textList,
+    size = SCROLLING_LOADER_SIZE.medium,
+    classNames,
+    testId,
+    textAnimationDuration = 2500,
+    loopTexts = false
+  } = _ref;
+  // Track active and exiting text indices for animation
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  const [exitingIndex, setExitingIndex] = React.useState(null);
+
+  // Ref to track active index for interval callback (avoids stale closure)
+  const activeIndexRef = React.useRef(0);
+
+  // Ref to track textList length for interval callback (supports streaming without restart)
+  const textListLengthRef = React.useRef(textList.length);
+
+  // Ref to track loopTexts for interval callback (avoids stale closure)
+  const loopTextsRef = React.useRef(loopTexts);
+
+  // Ref to track the timeout for clearing exiting state
+  const exitingTimeoutRef = React.useRef(null);
+
+  // Create extended icon list for infinite scroll effect with unique IDs
+  const extendedIconList = React.useMemo(() =>
+  // Duplicate the list to create seamless looping
+  [...iconList, ...iconList].map((icon, idx) => ({
+    ...icon,
+    id: `${icon.name}-${idx < iconList.length ? 'a' : 'b'}-${idx % iconList.length}`
+  })), [iconList]);
+  const skeletonAnimationDuration = iconList.length * 1.5;
+
+  // Create text items with unique IDs
+  const textItems = React.useMemo(() => textList.map((text, idx) => ({
+    text,
+    id: `text-${idx}-${text.slice(0, 10).replace(/\s/g, '')}`,
+    index: idx
+  })), [textList]);
+
+  // Keep textList length ref in sync (supports streaming without restarting interval)
+  React.useEffect(() => {
+    textListLengthRef.current = textList.length;
+  }, [textList.length]);
+
+  // Keep loopTexts ref in sync
+  React.useEffect(() => {
+    loopTextsRef.current = loopTexts;
+  }, [loopTexts]);
+
+  // Reset indices when textList length decreases and current index is out of bounds
+  // This prevents invisible text when switching to a shorter list
+  React.useEffect(() => {
+    if (activeIndexRef.current >= textList.length) {
+      activeIndexRef.current = 0;
+      setActiveIndex(0);
+      setExitingIndex(null);
+    }
+  }, [textList.length]);
+
+  // Animation interval - uses refs to support streaming without restart
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      const currentLength = textListLengthRef.current;
+      const shouldLoop = loopTextsRef.current;
+
+      // Only animate if we have multiple items
+      if (currentLength <= 1) {
+        return;
+      }
+      const currentIndex = activeIndexRef.current;
+      const isAtLastItem = currentIndex === currentLength - 1;
+
+      // If not looping and at the last item, don't advance
+      if (!shouldLoop && isAtLastItem) {
+        return;
+      }
+      const nextIndex = (currentIndex + 1) % currentLength;
+
+      // Set exiting index to current
+      setExitingIndex(currentIndex);
+
+      // Clear any existing timeout before creating a new one
+      if (exitingTimeoutRef.current !== null) {
+        clearTimeout(exitingTimeoutRef.current);
+      }
+
+      // Clear exiting state after animation completes
+      exitingTimeoutRef.current = setTimeout(() => {
+        setExitingIndex(null);
+      }, 350);
+
+      // Update ref and state
+      activeIndexRef.current = nextIndex;
+      setActiveIndex(nextIndex);
+    }, textAnimationDuration);
+    return () => {
+      clearInterval(interval);
+      // Clean up any pending timeout on unmount
+      if (exitingTimeoutRef.current !== null) {
+        clearTimeout(exitingTimeoutRef.current);
+      }
+    };
+  }, [textAnimationDuration]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: ref,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'wrapper'
+    }),
+    className: (0, _classify.default)(_ScrollingLoaderModule.default.wrapper, {
+      [_ScrollingLoaderModule.default.medium]: size === SCROLLING_LOADER_SIZE.medium,
+      [_ScrollingLoaderModule.default.large]: size === SCROLLING_LOADER_SIZE.large,
+      [_ScrollingLoaderModule.default.fluid]: size === SCROLLING_LOADER_SIZE.fluid
+    }, classNames?.wrapper),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'skeleton'
+      }),
+      className: (0, _classify.default)(_ScrollingLoaderModule.default.skeletonContainer, classNames?.skeletonContainer),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _ScrollingLoaderModule.default.skeletonScroller,
+        style: {
+          '--animation-duration': `${skeletonAnimationDuration}s`
+        },
+        children: extendedIconList.map(icon => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _classify.default)(_ScrollingLoaderModule.default.skeletonRow, {
+            [_ScrollingLoaderModule.default.skeletonRowSmall]: size === SCROLLING_LOADER_SIZE.medium,
+            [_ScrollingLoaderModule.default.skeletonRowLarge]: size === SCROLLING_LOADER_SIZE.large || size === SCROLLING_LOADER_SIZE.fluid
+          }),
+          "data-testid": (0, _qa.generateTestId)({
+            base: testId,
+            slot: `skeleton-row-${icon.id}`
+          }),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SemanticIcon.SemanticIcon, {
+            name: icon.name,
+            type: icon.type || 'regular',
+            size: size === SCROLLING_LOADER_SIZE.medium ? 'small' : 'medium',
+            semantic: "neutral",
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: `icon-${icon.id}`
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: _ScrollingLoaderModule.default.skeletonBars,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: _ScrollingLoaderModule.default.skeletonBarTitle
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: _ScrollingLoaderModule.default.skeletonBarSubtitle
+            })]
+          })]
+        }, icon.id))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _ScrollingLoaderModule.default.gradientTop
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _ScrollingLoaderModule.default.gradientBottom
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'text'
+      }),
+      className: (0, _classify.default)(_ScrollingLoaderModule.default.textContainer, classNames?.textContainer),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _ScrollingLoaderModule.default.textScroller,
+        children: textItems.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classify.default)(_ScrollingLoaderModule.default.textItem, {
+            [_ScrollingLoaderModule.default.textItemMedium]: size === SCROLLING_LOADER_SIZE.medium,
+            [_ScrollingLoaderModule.default.textItemLarge]: size === SCROLLING_LOADER_SIZE.large || size === SCROLLING_LOADER_SIZE.fluid,
+            [_ScrollingLoaderModule.default.textItemStatic]: textList.length <= 1,
+            [_ScrollingLoaderModule.default.textItemActive]: textList.length > 1 && item.index === activeIndex,
+            [_ScrollingLoaderModule.default.textItemExiting]: textList.length > 1 && item.index === exitingIndex
+          }),
+          "data-testid": (0, _qa.generateTestId)({
+            base: testId,
+            slot: `text-item-${item.id}`
+          }),
+          children: item.text
+        }, item.id))
+      })
+    })]
+  });
+});