@spaced-out/ui-design-system 0.5.9 → 0.5.11

package/lib/components/Toggle/Toggle.d.ts

@@ -24,6 +24,7 @@ export interface ToggleProps {
     value?: string;
     ariaLabel?: string;
     labelPosition?: 'left' | 'right';
+    testId?: string;
 }
 export declare const Toggle: Flow.AbstractComponent<ToggleProps, HTMLInputElement>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAMrD;;;;;GAKG;AACH,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAEH,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAC,KAAK,OAAO,CAAC;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAClC;AAED,eAAO,MAAM,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,WAAW,EAAE,gBAAgB,CAoFtE,CAAC"}
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../src/components/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAOrD;;;;;GAKG;AACH,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC,CAAC;AAEH,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAC,KAAK,OAAO,CAAC;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,MAAM,EAAE,IAAI,CAAC,iBAAiB,CAAC,WAAW,EAAE,gBAAgB,CA6FtE,CAAC"}

package/lib/components/Toggle/Toggle.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Toggle = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _ToggleModule = _interopRequireDefault(require("./Toggle.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -29,6 +30,7 @@ const Toggle = exports.Toggle = /*#__PURE__*/React.forwardRef((_ref, forwardRef)
     onChange,
     ariaLabel,
     labelPosition = 'right',
+    testId,
     ...props
   } = _ref;
   const toggleInput = /*#__PURE__*/React.createRef();
@@ -51,17 +53,29 @@ const Toggle = exports.Toggle = /*#__PURE__*/React.forwardRef((_ref, forwardRef)
     }
   }, [focused]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'toggle'
+    }),
     className: (0, _classify.default)(_ToggleModule.default.container, {
       [_ToggleModule.default.disabled]: disabled
     }, classNames?.wrapper),
     onClick: onWrapClickHandler,
     children: [labelPosition === 'left' && React.Children.count(children) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'label'
+      }),
       className: (0, _classify.default)(_ToggleModule.default.toggleLabel, classNames?.label),
       children: children
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
       className: _ToggleModule.default.toggleWrap,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
         type: "checkbox",
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'input'
+        }),
         name: name,
         value: value,
         checked: checked,
@@ -76,6 +90,10 @@ const Toggle = exports.Toggle = /*#__PURE__*/React.forwardRef((_ref, forwardRef)
         })
       })]
     }), labelPosition === 'right' && React.Children.count(children) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'label'
+      }),
       className: (0, _classify.default)(_ToggleModule.default.toggleLabel, classNames?.label),
       children: children
     })]

package/lib/components/Truncate/Truncate.d.ts

@@ -6,6 +6,7 @@ export interface TruncateProps {
     showFullTextOnHover?: boolean;
     wordBreak?: string;
     className?: string;
+    testId?: string;
 }
 export declare const BaseTruncate: Flow.AbstractComponent<TruncateProps, HTMLSpanElement>;
 export declare const Truncate: Flow.AbstractComponent<TruncateProps, HTMLSpanElement>;

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

@@ -1 +1 @@
-{"version":3,"file":"Truncate.d.ts","sourceRoot":"","sources":["../../../src/components/Truncate/Truncate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAcrD,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAC/C,aAAa,EACb,eAAe,CAqBhB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,aAAa,EAAE,eAAe,CA2CzE,CAAC"}
+{"version":3,"file":"Truncate.d.ts","sourceRoot":"","sources":["../../../src/components/Truncate/Truncate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAgBrD,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAC/C,aAAa,EACb,eAAe,CAuBhB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,IAAI,CAAC,iBAAiB,CAAC,aAAa,EAAE,eAAe,CA8CzE,CAAC"}

package/lib/components/Truncate/Truncate.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Truncate = exports.BaseTruncate = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = require("../../utils/classify");
+var _qa = require("../../utils/qa");
 var _TruncateModule = _interopRequireDefault(require("./Truncate.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -19,9 +20,14 @@ const BaseTruncate = exports.BaseTruncate = /*#__PURE__*/React.forwardRef((_ref,
     line = 1,
     showFullTextOnHover = false,
     wordBreak = 'break-all',
-    className
+    className,
+    testId
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'truncate'
+    }),
     className: (0, _classify.classify)(_TruncateModule.default.truncateLineClamp, className),
     style: {
       '--line-clamp': line,
@@ -38,7 +44,8 @@ const Truncate = exports.Truncate = /*#__PURE__*/React.forwardRef((_ref2, ref) =
     line = 1,
     showFullTextOnHover = false,
     wordBreak = 'break-all',
-    className: truncateClassName
+    className: truncateClassName,
+    testId
   } = _ref2;
   const arrayChildren = React.Children.toArray(children);
   if (arrayChildren.length) {
@@ -55,7 +62,8 @@ const Truncate = exports.Truncate = /*#__PURE__*/React.forwardRef((_ref2, ref) =
           '--word-break': wordBreak
         },
         title: showFullTextOnHover ? children : '',
-        ref
+        ref,
+        testId
       });
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(BaseTruncate, {
@@ -64,6 +72,7 @@ const Truncate = exports.Truncate = /*#__PURE__*/React.forwardRef((_ref2, ref) =
       ref: ref,
       wordBreak: wordBreak,
       className: truncateClassName,
+      testId: testId,
       children: children
     });
   }

package/lib/utils/index.d.ts

@@ -12,4 +12,5 @@ export * from '../utils/rating';
 export * from '../utils/score-bar';
 export * from '../utils/string';
 export * from '../utils/tokens';
+export * from '../utils/qa';
 //# sourceMappingURL=index.d.ts.map

package/lib/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kCAAkC,CAAC;AACjD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kCAAkC,CAAC;AACjD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC"}

package/lib/utils/index.js

@@ -156,4 +156,15 @@ Object.keys(_tokens).forEach(function (key) {
       return _tokens[key];
     }
   });
+});
+var _qa = require("./qa");
+Object.keys(_qa).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _qa[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _qa[key];
+    }
+  });
 });

package/lib/utils/qa/index.d.ts

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

package/lib/utils/qa/index.d.ts.map

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

package/lib/utils/qa/index.js

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

package/lib/utils/qa/qa.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Generate a stable `data-testid` string.
+ *
+ * Format:
+ *   <base>[__<slot>][--<index>][--<modifierA>--<modifierB>...]
+ *
+ * Examples:
+ *   generateTestId({ base: "profile__email", slot: "input" })
+ *   // "profile__email__input"
+ *
+ *   generateTestId({ base: "users", slot: "item", index: "u-100" })
+ *   // "users__item--u-100"
+ *
+ *   generateTestId({ base: "filters", slot: "chip", modifiers: ["selected", "lg"] })
+ *   // "filters__chip--selected--lg"
+ *
+ * Guidance:
+ * - Keep `base` stable and human-readable (don’t derive from user text or use UUIDs).
+ * - For repeated items, prefer stable business keys for `index` (e.g., `user.id`).
+ * - Use `modifiers` to encode state/variants cleanly in selectors.
+ */
+export interface GenerateTestIdParams {
+    base?: string;
+    slot?: string;
+    index?: number | string;
+    modifiers?: ReadonlyArray<string | number | boolean | null | undefined>;
+}
+/** Returns the composed id, or `undefined` if `base` is missing. */
+export declare function generateTestId(params: GenerateTestIdParams): string | undefined;
+//# sourceMappingURL=qa.d.ts.map

package/lib/utils/qa/qa.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"qa.d.ts","sourceRoot":"","sources":["../../../src/utils/qa/qa.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,WAAW,oBAAoB;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,SAAS,CAAC,EAAE,aAAa,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;CACzE;AAKD,oEAAoE;AACpE,wBAAgB,cAAc,CAC5B,MAAM,EAAE,oBAAoB,GAC3B,MAAM,GAAG,SAAS,CAsBpB"}

package/lib/utils/qa/qa.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateTestId = generateTestId;
+/**
+ * Generate a stable `data-testid` string.
+ *
+ * Format:
+ *   <base>[__<slot>][--<index>][--<modifierA>--<modifierB>...]
+ *
+ * Examples:
+ *   generateTestId({ base: "profile__email", slot: "input" })
+ *   // "profile__email__input"
+ *
+ *   generateTestId({ base: "users", slot: "item", index: "u-100" })
+ *   // "users__item--u-100"
+ *
+ *   generateTestId({ base: "filters", slot: "chip", modifiers: ["selected", "lg"] })
+ *   // "filters__chip--selected--lg"
+ *
+ * Guidance:
+ * - Keep `base` stable and human-readable (don’t derive from user text or use UUIDs).
+ * - For repeated items, prefer stable business keys for `index` (e.g., `user.id`).
+ * - Use `modifiers` to encode state/variants cleanly in selectors.
+ */
+
+const SLOT_SEP = '__';
+const MOD_SEP = '--';
+
+/** Returns the composed id, or `undefined` if `base` is missing. */
+function generateTestId(params) {
+  const {
+    base,
+    slot,
+    index,
+    modifiers = []
+  } = params;
+  if (!base) {
+    return undefined;
+  }
+  let id = slot ? `${base}${SLOT_SEP}${slot}` : base;
+  if (typeof index !== 'undefined') {
+    id += `${MOD_SEP}${String(index)}`;
+  }
+  const mods = modifiers.filter(m => Boolean(m)).map(String);
+  if (mods.length > 0) {
+    id += `${MOD_SEP}${mods.join(MOD_SEP)}`;
+  }
+  return id;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.5.9",
+  "version": "0.5.11",
   "description": "Sense UI components library",
   "author": {
     "name": "Spaced Out"
@@ -143,6 +143,7 @@
     "husky": "2.1.0",
     "invariant": "^2.2.4",
     "jest": "^29.3.1",
+    "jscodeshift": "^17.3.0",
     "lint-staged": "^10.5.1",
     "paths.macro": "^3.0.1",
     "prettier": "^2.5.1",