@spaced-out/ui-design-system 0.3.11 → 0.3.13

package/.cspell/custom-words.txt

@@ -33,6 +33,7 @@ drilldown
 Drilldown
 dropzone
 Dumont
+EBITDA
 Efate
 Enderbury
 eqeqeq
@@ -43,6 +44,7 @@ flowtype
 fontawesome
 framename
 Gaurav
+Heatmaps
 highcharts
 Hovd
 innerref

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 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.3.13](https://github.com/spaced-out/ui-design-system/compare/v0.3.12...v0.3.13) (2024-12-18)
+
+
+### Bug Fixes
+
+* Removed stories that are not required in Chatbubble ([#308](https://github.com/spaced-out/ui-design-system/issues/308)) ([4b65c32](https://github.com/spaced-out/ui-design-system/commit/4b65c32e544f8c9953de78d375ee4959957670d1))
+
+### [0.3.12](https://github.com/spaced-out/ui-design-system/compare/v0.3.11...v0.3.12) (2024-12-18)
+
+
+### Bug Fixes
+
+* ai-components ([#307](https://github.com/spaced-out/ui-design-system/issues/307)) ([0ebf223](https://github.com/spaced-out/ui-design-system/commit/0ebf223719c8413a4c99e782be232f654cd2e637))
+* promptinput bug fix on height ([4c8b116](https://github.com/spaced-out/ui-design-system/commit/4c8b116543348da082b327e04536466ff96d2835))
+* some random prompting magic ([317d296](https://github.com/spaced-out/ui-design-system/commit/317d296cfebad106951153b5b34bf6a03c60a216))
+* tidy up the states ([27e4678](https://github.com/spaced-out/ui-design-system/commit/27e4678061cf3563db22d865ddc9fd63d0932977))
+
 ### [0.3.11](https://github.com/spaced-out/ui-design-system/compare/v0.3.10...v0.3.11) (2024-12-18)
 
 

package/lib/components/ChatBubble/ChatBubble.js

@@ -14,12 +14,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const getNamedComponent = (childrenArray, comp) => {
+const getNamedComponent = (childrenArray, componentDisplayName) => {
   const nodes = [];
   for (const child of childrenArray) {
     if (
     // $FlowFixMe
-    child?.type?.displayName === comp) {
+    child?.type?.displayName === componentDisplayName) {
       nodes.push(child);
     }
   }
@@ -44,7 +44,6 @@ const ChatBubble = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ref: ref,
     "data-testid": "ChatBubble",
     className: (0, _classify.default)(_ChatBubbleModule.default.chatBubbleWrapper, {
-      [_ChatBubbleModule.default.chatBubbleWrapperLeft]: isLeftAligned,
       [_ChatBubbleModule.default.chatBubbleWrapperRight]: !isLeftAligned
     }, classNames?.wrapper)
   }, anchorComponent, chatComponent);
@@ -65,8 +64,8 @@ const ChatAnchor = _ref2 => {
   }), isAI ? /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: "sparkle",
     color: "information",
-    type: "solid",
-    size: "large"
+    type: _Icon.ICON_TYPE.solid,
+    size: _Icon.ICON_SIZE.large
   }) : /*#__PURE__*/React.createElement(_Avatar.Avatar, avatarProps)));
 };
 exports.ChatAnchor = ChatAnchor;

package/lib/components/ChatBubble/ChatBubble.js.flow

@@ -3,9 +3,9 @@
 import * as React from 'react';
 
 import classify from '../../utils/classify';
+import type {AvatarProps} from '../Avatar';
 import {Avatar} from '../Avatar';
-import type {AvatarProps} from '../Avatar/Avatar.js';
-import {Icon} from '../Icon';
+import {Icon, ICON_SIZE, ICON_TYPE} from '../Icon';
 import type {BaseTooltipProps} from '../Tooltip';
 import {Tooltip} from '../Tooltip';
 
@@ -14,13 +14,13 @@ import css from './ChatBubble.module.css';
 
 const getNamedComponent = (
   childrenArray: Array<React.Node>,
-  comp: string,
-): React.Node | React.Node[] | null => {
+  componentDisplayName: string,
+): ?React.Node | React.Node[] => {
   const nodes: React.Node[] = [];
   for (const child of childrenArray) {
     if (
       // $FlowFixMe
-      child?.type?.displayName === comp
+      child?.type?.displayName === componentDisplayName
     ) {
       nodes.push(child);
     }
@@ -62,7 +62,6 @@ export const ChatBubble: React$AbstractComponent<
         className={classify(
           css.chatBubbleWrapper,
           {
-            [css.chatBubbleWrapperLeft]: isLeftAligned,
             [css.chatBubbleWrapperRight]: !isLeftAligned,
           },
           classNames?.wrapper,
@@ -94,7 +93,12 @@ export const ChatAnchor = ({
   >
     <Tooltip {...tooltip} hidden={!tooltip}>
       {isAI ? (
-        <Icon name="sparkle" color="information" type="solid" size="large" />
+        <Icon
+          name="sparkle"
+          color="information"
+          type={ICON_TYPE.solid}
+          size={ICON_SIZE.large}
+        />
       ) : (
         <Avatar {...avatarProps} />
       )}

package/lib/components/ChatBubble/ChatBubble.module.css

@@ -1,29 +1,41 @@
-@value (spaceNone,spaceXSmall,spaceSmall) from '../../styles/variables/_space.css';
-@value (colorBorderPrimary,
-colorBackgroundTertiary,
-colorNeutralLightest,
-colorFillPrimary,
-colorInformation) from '../../styles/variables/_color.css';
-@value (borderWidthNone,
-borderWidthPrimary,
-borderRadiusSmall
+@value (
+  spaceNone,
+  spaceXSmall,
+  spaceSmall
+) from '../../styles/variables/_space.css';
+@value (
+  colorBorderPrimary,
+  colorBackgroundTertiary,
+  colorNeutralLightest,
+  colorFillPrimary,
+  colorInformation
+) from '../../styles/variables/_color.css';
+@value (
+  borderWidthPrimary,
+  borderRadiusSmall,
+  borderRadiusCircle
 ) from '../../styles/variables/_border.css';
-@value (size2,size4,size12,size24,size42,size580,sizeFluid) from
-  '../../styles/variables/_size.css';
-@value (opacity100, opacity60,opacity80) from
-  '../../styles/variables/_opacity.css';
+@value (
+  size2,
+  size12,
+  size24,
+  size42,
+  size580
+) from '../../styles/variables/_size.css';
+@value (
+  opacity100, 
+  opacity60,
+  opacity80
+) from '../../styles/variables/_opacity.css';
 
 .chatBubbleWrapper {
   display: flex;
   gap: spaceSmall;
-}
-
-.chatBubbleWrapperLeft {
-  flex-direction: row; /* ChatAnchor comes first */
+  flex-direction: row;
 }
 
 .chatBubbleWrapperRight {
-  flex-direction: row-reverse; /* ChatContent comes first */
+  flex-direction: row-reverse;
 }
 
 .chatAnchorWrapper {
@@ -74,11 +86,7 @@ borderRadiusSmall
 .loadingText {
   composes: buttonTextMedium from '../../styles/typography.module.css';
   display: inline-flex;
-  background: linear-gradient(
-    90deg,
-    colorFillPrimary 0%,
-    colorInformation 100%
-  );
+  background: linear-gradient(90deg, colorFillPrimary, colorInformation);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
@@ -96,12 +104,8 @@ borderRadiusSmall
 .dot {
   width: calc(size12/4);
   height: calc(size12/4);
-  background: linear-gradient(
-    90deg,
-    colorFillPrimary 0%,
-    colorInformation 100%
-  );
-  border-radius: 50%; /* Makes dots circular */
+  background: linear-gradient(90deg, colorFillPrimary, colorInformation);
+  border-radius: borderRadiusCircle;
   opacity: opacity80;
 
   /* Bounce Animation */

package/lib/components/PromptInput/PromptInput.js

@@ -53,16 +53,21 @@ const PromptInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const handleInput = () => {
     const textarea = textareaRef.current;
     if (textarea) {
-      textarea.style.height = 'auto';
+      textarea.style.height = 'auto'; // Reset height to auto to shrink
       if (textarea.scrollHeight > parseInt(_size.size200)) {
-        textarea.style.height = _size.size200;
+        textarea.style.height = _size.size200; // Limit height to size200
         textarea.style.overflowY = 'auto';
       } else {
-        textarea.style.height = `${textarea.scrollHeight}px`;
+        textarea.style.height = `${textarea.scrollHeight}px`; // Adjust to content height
         textarea.style.overflowY = 'hidden';
       }
     }
   };
+
+  // Reset height on value change
+  React.useEffect(() => {
+    handleInput();
+  }, [value]);
   const textCountError = React.useMemo(() => {
     const charCount = value ? value.length : 0;
     return textCountLimit != null && charCount > textCountLimit;
@@ -81,7 +86,6 @@ const PromptInput = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       textarea: (0, _classify.default)(_PromptInputModule.default.textarea, classNames?.textarea)
     },
     ref: textareaRef,
-    onInput: handleInput,
     value: value,
     onChange: onInputChange,
     onFocus: onInputFocus,

package/lib/components/PromptInput/PromptInput.js.flow

@@ -102,17 +102,22 @@ export const PromptInput: React$AbstractComponent<
     const handleInput = () => {
       const textarea = textareaRef.current;
       if (textarea) {
-        textarea.style.height = 'auto';
+        textarea.style.height = 'auto'; // Reset height to auto to shrink
         if (textarea.scrollHeight > parseInt(size200)) {
-          textarea.style.height = size200;
+          textarea.style.height = size200; // Limit height to size200
           textarea.style.overflowY = 'auto';
         } else {
-          textarea.style.height = `${textarea.scrollHeight}px`;
+          textarea.style.height = `${textarea.scrollHeight}px`; // Adjust to content height
           textarea.style.overflowY = 'hidden';
         }
       }
     };
 
+    // Reset height on value change
+    React.useEffect(() => {
+      handleInput();
+    }, [value]);
+
     const textCountError = React.useMemo(() => {
       const charCount = value ? value.length : 0;
       return textCountLimit != null && charCount > textCountLimit;
@@ -135,7 +140,6 @@ export const PromptInput: React$AbstractComponent<
               textarea: classify(css.textarea, classNames?.textarea),
             }}
             ref={textareaRef}
-            onInput={handleInput}
             value={value}
             onChange={onInputChange}
             onFocus={onInputFocus}

package/lib/components/PromptInput/PromptInput.module.css

@@ -43,6 +43,7 @@
 .textarea {
   width: sizeFluid;
   max-height: size200;
+  min-height: 100%;
 }
 
 .secondaryRow {

package/package.json

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