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 ( + + {dotPositions.map((pos) => ( + + ))} + + ) +} + +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' +