@spaced-out/ui-design-system 0.1.102 → 0.1.104

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.104](https://github.com/spaced-out/ui-design-system/compare/v0.1.103...v0.1.104) (2024-07-04)
+
+
+### Bug Fixes
+
+* 🪛 text wrap fix for text based shimmer ([#234](https://github.com/spaced-out/ui-design-system/issues/234)) ([50d4e6c](https://github.com/spaced-out/ui-design-system/commit/50d4e6c424b0675d1e761553cd8f2f652dd0f48e))
+
+### [0.1.103](https://github.com/spaced-out/ui-design-system/compare/v0.1.102...v0.1.103) (2024-07-03)
+
+
+### Features
+
+* ⭕️ shimmer component ([#233](https://github.com/spaced-out/ui-design-system/issues/233)) ([bad30af](https://github.com/spaced-out/ui-design-system/commit/bad30af1ca6b4b2b713b69b35dc3b78871eba6fe))
+
 ### [0.1.102](https://github.com/spaced-out/ui-design-system/compare/v0.1.101...v0.1.102) (2024-07-03)
 
 

package/lib/components/Shimmer/Shimmer.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ShimmerWrapper = exports.Shimmer = exports.SHIMMER_TYPE_TO_BORDER_RADIUS_MAP = exports.SHIMMER_TYPES = exports.KPIShimmer = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _border = require("../../styles/variables/_border");
+var _size = require("../../styles/variables/_size");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _string = require("../../utils/string");
+var _ShimmerModule = _interopRequireDefault(require("./Shimmer.module.css"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const SHIMMER_TYPES = Object.freeze({
+  text: 'text',
+  rounded: 'rounded',
+  circular: 'circular',
+  rectangular: 'rectangular'
+});
+exports.SHIMMER_TYPES = SHIMMER_TYPES;
+const SHIMMER_TYPE_TO_BORDER_RADIUS_MAP = Object.freeze({
+  text: _border.borderRadiusXSmall,
+  rounded: _border.borderRadiusMedium,
+  circular: _border.borderRadiusCircle,
+  rectangular: _border.borderRadiusNone
+});
+exports.SHIMMER_TYPE_TO_BORDER_RADIUS_MAP = SHIMMER_TYPE_TO_BORDER_RADIUS_MAP;
+/**
+ * Note(Nishant): ShimmerWrapper is a wrapper component for Shimmer component. This should only be used for Text based Shimmers
+ * This solves a very annoying problem with out text components where the display prop is set to flex.
+ * Genesis assumes that every element is flexible for simplicity and for text text shimmers to work in use cases
+ * where text wraps across multiple lines, we need to wrap the shimmer in a span element.
+ * to avoid the misuse where consumers use there own / other block level components, we have this wrapper.
+ * This would ensure the layout remains same even when you toggle the shimmer to show your actual content
+ * @param {React.Node} children - The children to be rendered
+ */
+const ShimmerWrapper = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement("span", null, children);
+};
+exports.ShimmerWrapper = ShimmerWrapper;
+const Shimmer = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    classNames,
+    show = true,
+    type = SHIMMER_TYPES.text,
+    children,
+    width = _size.size40,
+    height = _size.sizeFluid,
+    borderRadius
+  } = _ref2;
+  if (!show) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }
+  const borderRadiusValue = borderRadius ?? SHIMMER_TYPE_TO_BORDER_RADIUS_MAP[type];
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    "data-testid": "Shimmer",
+    className: (0, _classify.default)(_ShimmerModule.default.wrapper, _ShimmerModule.default[type], classNames?.wrapper),
+    style: {
+      '--width': (0, _string.appendPx)(width),
+      '--height': (0, _string.appendPx)(height),
+      '--border-radius': (0, _string.appendPx)(borderRadiusValue)
+    }
+  });
+});
+exports.Shimmer = Shimmer;
+const KPIShimmer = _ref3 => {
+  let {
+    textWidth = 150
+  } = _ref3;
+  return /*#__PURE__*/React.createElement("div", {
+    className: _ShimmerModule.default.kpiBox
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _ShimmerModule.default.section
+  }, /*#__PURE__*/React.createElement(Shimmer, {
+    type: "rounded",
+    width: 60,
+    height: 60
+  })), /*#__PURE__*/React.createElement("div", {
+    className: _ShimmerModule.default.section
+  }, /*#__PURE__*/React.createElement(Shimmer, {
+    type: "text",
+    width: textWidth,
+    height: 15
+  }), /*#__PURE__*/React.createElement(Shimmer, {
+    type: "text",
+    width: textWidth,
+    height: 25
+  }), /*#__PURE__*/React.createElement(Shimmer, {
+    type: "text",
+    width: textWidth,
+    height: 15
+  })));
+};
+exports.KPIShimmer = KPIShimmer;

package/lib/components/Shimmer/Shimmer.js.flow

@@ -0,0 +1,114 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {
+  borderRadiusCircle,
+  borderRadiusMedium,
+  borderRadiusNone,
+  borderRadiusXSmall,
+} from '../../styles/variables/_border';
+import {size40, sizeFluid} from '../../styles/variables/_size';
+import classify from '../../utils/classify';
+import {appendPx} from '../../utils/string';
+
+import css from './Shimmer.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export const SHIMMER_TYPES = Object.freeze({
+  text: 'text',
+  rounded: 'rounded',
+  circular: 'circular',
+  rectangular: 'rectangular',
+});
+
+export const SHIMMER_TYPE_TO_BORDER_RADIUS_MAP = Object.freeze({
+  text: borderRadiusXSmall,
+  rounded: borderRadiusMedium,
+  circular: borderRadiusCircle,
+  rectangular: borderRadiusNone,
+});
+
+export type ShimmerType = $Values<typeof SHIMMER_TYPES>;
+
+export type ShimmerProps = {
+  classNames?: ClassNames,
+  show?: boolean,
+  type?: ShimmerType,
+  width?: number | string,
+  height?: number | string,
+  borderRadius?: number | string,
+  children?: React.Node,
+};
+
+export type ShimmerWrapperProps = {
+  children?: React.Node,
+};
+
+/**
+ * Note(Nishant): ShimmerWrapper is a wrapper component for Shimmer component. This should only be used for Text based Shimmers
+ * This solves a very annoying problem with out text components where the display prop is set to flex.
+ * Genesis assumes that every element is flexible for simplicity and for text text shimmers to work in use cases
+ * where text wraps across multiple lines, we need to wrap the shimmer in a span element.
+ * to avoid the misuse where consumers use there own / other block level components, we have this wrapper.
+ * This would ensure the layout remains same even when you toggle the shimmer to show your actual content
+ * @param {React.Node} children - The children to be rendered
+ */
+export const ShimmerWrapper = ({
+  children,
+}: ShimmerWrapperProps): React$Element<'span'> => <span>{children}</span>;
+
+export const Shimmer: React$AbstractComponent<ShimmerProps, HTMLSpanElement> =
+  React.forwardRef<ShimmerProps, HTMLSpanElement>(
+    (
+      {
+        classNames,
+        show = true,
+        type = SHIMMER_TYPES.text,
+        children,
+        width = size40,
+        height = sizeFluid,
+        borderRadius,
+      }: ShimmerProps,
+      ref,
+    ) => {
+      if (!show) {
+        return <>{children}</>;
+      }
+
+      const borderRadiusValue =
+        borderRadius ?? SHIMMER_TYPE_TO_BORDER_RADIUS_MAP[type];
+
+      return (
+        <span
+          ref={ref}
+          data-testid="Shimmer"
+          className={classify(css.wrapper, css[type], classNames?.wrapper)}
+          style={{
+            '--width': appendPx(width),
+            '--height': appendPx(height),
+            '--border-radius': appendPx(borderRadiusValue),
+          }}
+        ></span>
+      );
+    },
+  );
+
+export type KPIShimmerProps = {
+  textWidth?: number | string,
+};
+
+export const KPIShimmer = ({textWidth = 150}: KPIShimmerProps): React.Node => (
+  <div className={css.kpiBox}>
+    <div className={css.section}>
+      <Shimmer type="rounded" width={60} height={60}></Shimmer>
+    </div>
+    <div className={css.section}>
+      <Shimmer type="text" width={textWidth} height={15}></Shimmer>
+      <Shimmer type="text" width={textWidth} height={25}></Shimmer>
+      <Shimmer type="text" width={textWidth} height={15}></Shimmer>
+    </div>
+  </div>
+);

package/lib/components/Shimmer/Shimmer.module.css

@@ -0,0 +1,64 @@
+@value (colorFillPrimary, colorNeutralLightest, colorNeutralLight, colorBackgroundTertiary) from '../../styles/variables/_color.css';
+@value (spaceXSmall,spaceXXSmall, spaceNone, spaceLarge, spaceMedium, spaceSmall) from '../../styles/variables/_space.css';
+@value (sizeFluid, size40, size252) from '../../styles/variables/_size.css';
+@value (borderRadiusXSmall, borderRadiusMedium) from '../../styles/variables/_border.css';
+@value (opacity20, opacity40, opacity60) from '../../styles/variables/_opacity.css';
+@value (motionDurationSlowest) from '../../styles/variables/_motion.css';
+
+@value backgroundSizeInitial: calc(sizeFluid * 2);
+@value backgroundSizeFinal: calc(sizeFluid * -2);
+@value motionDuration: calc(motionDurationSlowest * 1.5);
+
+.wrapper {
+  --width: size40;
+  --border-radius: borderRadiusXSmall;
+  --height: sizeFluid;
+  height: var(--height);
+  width: var(--width);
+  border-radius: var(--border-radius);
+  background: linear-gradient(
+    to right,
+    colorNeutralLightest opacity20,
+    colorNeutralLight opacity40,
+    colorNeutralLightest opacity60
+  );
+  background-size: backgroundSizeInitial sizeFluid;
+  animation: shimmer motionDuration infinite linear;
+  vertical-align: middle;
+
+  &.text {
+    margin-right: spaceXXSmall;
+    width: initial;
+    padding-left: var(--width);
+  }
+}
+
+.kpiBox {
+  display: flex;
+  composes: borderPrimary from '../../styles/border.module.css';
+  min-width: size252;
+  width: fit-content;
+  height: fit-content;
+  align-items: center;
+  gap: spaceSmall;
+  background-color: colorBackgroundTertiary;
+  border-radius: borderRadiusMedium;
+  padding: spaceLarge spaceMedium;
+}
+
+.section {
+  display: flex;
+  width: sizeFluid;
+  flex-flow: column;
+  gap: spaceXSmall;
+  align-items: center;
+}
+
+@keyframes shimmer {
+  from {
+    background-position: backgroundSizeInitial spaceNone;
+  }
+  to {
+    background-position: backgroundSizeFinal spaceNone;
+  }
+}

package/lib/components/Shimmer/index.js

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

package/lib/components/Shimmer/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './Shimmer';

package/lib/components/index.js

@@ -454,6 +454,17 @@ Object.keys(_SearchInput).forEach(function (key) {
     }
   });
 });
+var _Shimmer = require("./Shimmer");
+Object.keys(_Shimmer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Shimmer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Shimmer[key];
+    }
+  });
+});
 var _SideMenuLink = require("./SideMenuLink");
 Object.keys(_SideMenuLink).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/components/index.js.flow

@@ -41,6 +41,7 @@ export * from './Pagination';
 export * from './Panel';
 export * from './RadioButton';
 export * from './SearchInput';
+export * from './Shimmer';
 export * from './SideMenuLink';
 export * from './StatusIndicator';
 export * from './Stepper';

package/lib/utils/string/string.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.truncateString = exports.formatWord = exports.escapeRegExp = exports.capitalize = void 0;
+exports.truncateString = exports.formatWord = exports.escapeRegExp = exports.capitalize = exports.appendPx = void 0;
 
 const capitalize = word => {
   if (!word) {
@@ -22,4 +22,11 @@ const truncateString = (inputString, maxLength) => {
   }
   return inputString;
 };
-exports.truncateString = truncateString;
+exports.truncateString = truncateString;
+const appendPx = value => {
+  if (typeof value === 'number') {
+    return `${value}px`;
+  }
+  return value ?? '';
+};
+exports.appendPx = appendPx;

package/lib/utils/string/string.js.flow

@@ -24,3 +24,10 @@ export const truncateString = (
   }
   return inputString;
 };
+
+export const appendPx = (value?: number | string): string => {
+  if (typeof value === 'number') {
+    return `${value}px`;
+  }
+  return value ?? '';
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.102",
+  "version": "0.1.104",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {