diff --git a/package-lock.json b/package-lock.json
index 2e70ff8..0db29f4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "@contacto-io/style-guide",
- "version": "0.5.40",
+ "version": "0.5.60",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -21895,54 +21895,12 @@
}
},
"react": {
- "version": "16.14.0",
- "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
- "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+ "version": "18.2.0",
+ "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
+ "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
"dev": true,
"requires": {
- "loose-envify": "^1.1.0",
- "object-assign": "^4.1.1",
- "prop-types": "^15.6.2"
- },
- "dependencies": {
- "js-tokens": {
- "version": "4.0.0",
- "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
- "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
- "dev": true
- },
- "loose-envify": {
- "version": "1.4.0",
- "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
- "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
- "dev": true,
- "requires": {
- "js-tokens": "^3.0.0 || ^4.0.0"
- }
- },
- "object-assign": {
- "version": "4.1.1",
- "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
- "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
- "dev": true
- },
- "prop-types": {
- "version": "15.8.1",
- "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
- "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
- "dev": true,
- "requires": {
- "loose-envify": "^1.4.0",
- "object-assign": "^4.1.1",
- "react-is": "^16.13.1"
- }
- },
- "react-is": {
- "version": "16.13.1",
- "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
- "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
- "dev": true
- }
+ "loose-envify": "^1.1.0"
}
},
"react-app-polyfill": {
@@ -22242,15 +22200,13 @@
}
},
"react-dom": {
- "version": "16.14.0",
- "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
- "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
+ "version": "18.2.0",
+ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+ "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
"dev": true,
"requires": {
"loose-envify": "^1.1.0",
- "object-assign": "^4.1.1",
- "prop-types": "^15.6.2",
- "scheduler": "^0.19.1"
+ "scheduler": "^0.23.0"
}
},
"react-draggable": {
@@ -24531,13 +24487,12 @@
}
},
"scheduler": {
- "version": "0.19.1",
- "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
- "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+ "version": "0.23.0",
+ "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
+ "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
"dev": true,
"requires": {
- "loose-envify": "^1.1.0",
- "object-assign": "^4.1.1"
+ "loose-envify": "^1.1.0"
}
},
"schema-utils": {
diff --git a/package.json b/package.json
index a7f869d..172b707 100644
--- a/package.json
+++ b/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"
diff --git a/src/components/ChatLoader/index.js b/src/components/ChatLoader/index.js
new file mode 100644
index 0000000..31f8fc5
--- /dev/null
+++ b/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 (
+
+ )
+}
+
+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,
+ }),
+ ),
+}
diff --git a/src/components/ChatLoader/index.stories.js b/src/components/ChatLoader/index.stories.js
new file mode 100644
index 0000000..bdbbc74
--- /dev/null
+++ b/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) =>
+
+export const Default = Template.bind({})
diff --git a/src/components/ChatLoader/styles.scss b/src/components/ChatLoader/styles.scss
new file mode 100644
index 0000000..de7365b
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/src/components/Textfield/Textfield.stories.js b/src/components/Textfield/Textfield.stories.js
index 512b25b..3e68533 100644
--- a/src/components/Textfield/Textfield.stories.js
+++ b/src/components/Textfield/Textfield.stories.js
@@ -20,6 +20,7 @@ export default {
const Template = (args) =>
const WithValidation = (args) =>
+const 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'),
+}
diff --git a/src/components/Textfield/index.js b/src/components/Textfield/index.js
index 13ec3b1..8bbf751 100644
--- a/src/components/Textfield/index.js
+++ b/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 (
+ <>
+ settouched(true) || (onBlur && onBlur(e))}
+ {...props}
+ />
+ {touched && !props.value && otherError && (
+
+ {props.label || name} is required
+
+ )}
+ >
+ )
+})
+
TextField.WithValidation = WithValidation
+TextField.InputWithErrorMsg = InputWithErrorMsg
TextField.propTypes = {
/**
diff --git a/src/components/Textfield/textfield.scss b/src/components/Textfield/textfield.scss
index 548318d..91fea6c 100644
--- a/src/components/Textfield/textfield.scss
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 880720a..a013cb9 100644
--- a/src/index.js
+++ b/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'
+