Merge branch 'main' into CNTO-7751-TeamNameTag

package.json

@@ -4,7 +4,7 @@
     "registry": "https://npm.pkg.github.com"
   },
   "repository": "git://github.com/contacto-io/contacto-console",
-  "version": "0.5.41",
+  "version": "0.5.60",
   "main": "build/index.js",
   "module": "build/index.es.js",
   "files": [
@@ -82,8 +82,8 @@
     "prop-types": "^15.7.2",
     "raw-loader": "^4.0.2",
     "rc-json-editor": "^2.0.33",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-scripts": "4.0.3",
     "react-sortable-hoc": "^2.0.0",
     "rollup": "^2.53.3",
@@ -103,8 +103,8 @@
     "libphonenumber-js": "^1.9.20",
     "prop-types": "^15.7.2",
     "rc-json-editor": "^2.0.33",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-sortable-hoc": "^2.0.0",
     "simplebar": "^5.3.5",
     "simplebar-react": "^2.3.5"

src/components/ChatLoader/index.js

@@ -0,0 +1,66 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import './styles.scss'
+
+export const ChatLoader = ({ height, width, color, dotRadius, dotPositions, className }) => {
+  return (
+    <svg height={height} width={width} className={`sg typing-loader ${className}`}>
+      {dotPositions.map((pos) => (
+        <circle
+          key={`${pos.cx}-${pos.cy}`}
+          className="dot"
+          cx={pos.cx}
+          cy={pos.cy}
+          r={dotRadius}
+          style={{ fill: color }}
+        />
+      ))}
+    </svg>
+  )
+}
+
+ChatLoader.defaultProps = {
+  className: '',
+  height: '8',
+  width: '36',
+  color: 'grey',
+  dotRadius: '4',
+  dotPositions: [
+    { cx: '4', cy: '4' },
+    { cx: '18', cy: '4' },
+    { cx: '32', cy: '4' },
+  ],
+}
+
+// Prop types for type checking (optional)
+ChatLoader.propTypes = {
+  /**
+   * Class to be added
+   */
+  className: PropTypes.string,
+  /**
+   * This indicates height of the chat loader
+   */
+  height: PropTypes.string,
+  /**
+   * This indicates width of the chat loader
+   */
+  width: PropTypes.string,
+  /**
+   * This indicates color of the cirlce
+   */
+  color: PropTypes.string,
+  /**
+   * This indicates radius of the circle
+   */
+  dotRadius: PropTypes.string,
+  /**
+   * This indicates dotPositions , cx and cy denoted x and y coordinated of the circle
+   */
+  dotPositions: PropTypes.arrayOf(
+    PropTypes.shape({
+      cx: PropTypes.string.isRequired,
+      cy: PropTypes.string.isRequired,
+    }),
+  ),
+}

src/components/ChatLoader/index.stories.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import { ChatLoader } from '.'
+
+export default {
+  title: 'Components/ChatLoader',
+  component: ChatLoader,
+  parameters: {},
+}
+
+const Template = (args) => <ChatLoader {...args} />
+
+export const Default = Template.bind({})

src/components/ChatLoader/styles.scss

@@ -0,0 +1,25 @@
+// Chat Loader.scss
+
+.sg.typing-loader {
+  background-color: #f1f1f1;
+  color: var(--gray-3);
+
+  .dot {
+    animation: 1s sg-typing-blink infinite;
+    fill: var(--gray-3);
+  }
+  .dot:nth-child(2) {
+    animation-delay: 250ms;
+  }
+
+  .dot:nth-child(3) {
+    animation-delay: 500ms;
+  }
+
+}
+
+@keyframes sg-typing-blink {
+  50% {
+    fill: transparent;
+  }
+}

src/components/Textfield/Textfield.stories.js

@@ -20,6 +20,7 @@ export default {
 
 const Template = (args) => <TextField {...args} />
 const WithValidation = (args) => <TextField.WithValidation {...args} />
+const InputWithErrorMsg = (args) => <TextField.InputWithErrorMsg {...args} />
 
 export const Default = Template.bind({})
 Default.args = {
@@ -142,3 +143,10 @@ CustomPassword.args = {
   readOnly: 'true',
   value: 'tests',
 }
+
+export const TextFieldWithValidation = InputWithErrorMsg.bind({})
+TextFieldWithValidation.args = {
+  label: 'AI Chatbot Name',
+  placeholder: '',
+  onSuffixClick: () => console.log('suffix clicked'),
+}

src/components/Textfield/index.js

@@ -135,7 +135,33 @@ const WithValidation = ({ wrapperClassName, errorMessage, validateFunction, ...p
   )
 }
 
+const InputWithErrorMsg = React.forwardRef(function InputWithValidation(
+  { otherError = true, className, name, onBlur, ...props },
+  ref,
+) {
+  const [touched, settouched] = useState(false)
+  const errorCondition = props.word?.length || (!props.value && otherError)
+  const hasError = touched && errorCondition
+
+  return (
+    <>
+      <TextField
+        ref={ref}
+        className={`textbox ${hasError ? 'has-error' : ''} ${className}`}
+        onBlur={(e) => settouched(true) || (onBlur && onBlur(e))}
+        {...props}
+      />
+      {touched && !props.value && otherError && (
+        <Text color="danger-color" type="caption">
+          {props.label || name} is required
+        </Text>
+      )}
+    </>
+  )
+})
+
 TextField.WithValidation = WithValidation
+TextField.InputWithErrorMsg = InputWithErrorMsg
 
 TextField.propTypes = {
   /**

src/components/Textfield/textfield.scss

@@ -198,3 +198,21 @@
     }
   }
 }
+
+.textbox {
+  &.has-error {
+    border: 1px solid var(--danger-color) !important;
+    .contacto-select:hover:not(.ant-select-disabled),
+    .contacto-select[class*='focused']:not(.ant-select-disabled) {
+      border: none;
+    }
+    .contacto-select {
+      border: none;
+      box-shadow: none;
+    }
+  }
+
+  .ant-input-password-icon {
+    color: var(--gray-1) !important;
+  }
+}

src/index.js

@@ -25,3 +25,5 @@ export * from './components/KeyValueEditor/index'
 export * from './components/TopBanner/index'
 export * from './components/TimeLeftBar/index'
 export * from './components/PhoneNumberInput/index'
+export * from './components/ChatLoader/index'
+