@kindly/react-chat 2.41.6 → 2.42.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kindly/react-chat",
-  "version": "2.41.6",
+  "version": "2.42.1",
   "description": "Kindly Chat react component",
   "repository": "https://github.com/kindly-ai/kindly-chat/tree/main/packages/react-chat",
   "main": "dist/index.js",
@@ -18,8 +18,8 @@
     "test": "jest src",
     "test:storybook": "test-storybook",
     "update:browserslist": "npx browserslist@latest --update-db",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "scriptsComments": {
     "test-a11y": "Runs the storybook test-runner. Currently running only axe-core for a11y tests."
@@ -69,17 +69,17 @@
     "@babel/plugin-transform-runtime": "^7.21.0",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
-    "@storybook/addon-a11y": "^6.5.16",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-interactions": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/builder-webpack5": "^6.5.16",
-    "@storybook/jest": "^0.0.10",
-    "@storybook/manager-webpack5": "^6.5.16",
-    "@storybook/react": "^6.5.16",
-    "@storybook/test-runner": "^0.9.4",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/addon-a11y": "^7.0.4",
+    "@storybook/addon-actions": "^7.0.4",
+    "@storybook/addon-essentials": "^7.0.4",
+    "@storybook/addon-interactions": "^7.0.4",
+    "@storybook/addon-links": "^7.0.4",
+    "@storybook/addon-mdx-gfm": "^7.0.4",
+    "@storybook/jest": "^0.1.0",
+    "@storybook/react": "^7.0.4",
+    "@storybook/react-webpack5": "^7.0.4",
+    "@storybook/test-runner": "^0.10.0",
+    "@storybook/testing-library": "^0.1.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^11.2.7",
     "@types/react": "^16.14.35",
@@ -112,7 +112,8 @@
     "react-svg-loader": "^3.0.3",
     "react-test-renderer": "16.14.0",
     "resolve-url-loader": "^5.0.0",
-    "storybook-addon-mock": "^3.2.0",
+    "storybook": "^7.0.4",
+    "storybook-addon-mock": "^4.0.0",
     "url-loader": "^4.1.1",
     "wait-on": "^6.0.1",
     "webpack": "^5.76.1",
@@ -129,5 +130,5 @@
       "pusher-js": "8.0.1"
     }
   },
-  "gitHead": "11707d313e234c7b0869451b803288221d198030"
+  "gitHead": "b2f0e79ce5be18782b4c66075d1b9830205d4de9"
 }

package/stories/screens.stories/Chat/FormStates.stories.jsx

@@ -154,7 +154,9 @@ FormActive.parameters = {
                 validators: [
                   {
                     max_length: 30,
-                    text: 'Maximum number of length is 30',
+                    texts: {
+                      text: 'Maximum number of length is 30',
+                    },
                   },
                 ],
               },
@@ -171,7 +173,9 @@ FormActive.parameters = {
                 validators: [
                   {
                     min_length: 5,
-                    text: 'This field should be at least 5 characters long',
+                    texts: {
+                      text: 'This field should be at least 5 characters long',
+                    },
                   },
                   {
                     max_length: 15,
@@ -400,6 +404,102 @@ FormActive2.play = async ({ canvasElement }) => {
   fireEvent.scroll(chatBody, { target: { scrollTop: chatBody.clientHeight } });
 };
 
+export const FormActive3 = Template.bind({});
+FormActive3.parameters = {
+  ...defaultParameters,
+  initialStateModifier: {
+    ...defaultParameters.initialStateModifier,
+    messages: {
+      chatMessages: [
+        {
+          chat_source: 'web',
+          chat_language_code: 'en',
+          from_bot: true,
+          sender: 'BOT',
+          message: '',
+          message_format: 'txt',
+          buttons: [],
+          created: '2022-06-15T19:03:46.186495Z',
+          id: '1',
+          form: {
+            submission_id: 'submissionId',
+            id: 'formId',
+            dialogue_id: '2',
+            submit_dialogue_id: 'c0d685d3-3f11-41b8-9cfd-e35d54df2c95',
+            abandon_dialogue_id: 'b1cde0f3-0715-48eb-8482-a9355fa11ba8',
+            languageCode: 'en',
+            texts: {
+              title: 'This is a form',
+              error_text: 'There was an error around here',
+              submit_button_text: 'Submit',
+              cancel_button_text: 'Exit',
+              unanswered_text: 'You failed to answer this form',
+              cancel_text: 'You have cancelled/exited this form',
+            },
+            fields: [
+              {
+                input_type: FIELDS.RADIO,
+                order: 1,
+                required: true,
+                slug: 'radui-icecream-option',
+                attributes: {
+                  options: [
+                    {
+                      value: 'chocolate',
+                      label: 'Chocolate',
+                    },
+                    {
+                      value: 'vanilla',
+                      label: 'Vanilla',
+                    },
+                  ],
+                },
+                texts: {
+                  label: 'Please select an icecream flavour.',
+                },
+                validators: [],
+              },
+              {
+                input_type: FIELDS.RADIO,
+                order: 2,
+                required: true,
+                slug: 'radui-payment-method',
+                attributes: {
+                  options: [
+                    {
+                      value: 'paypal',
+                      label: 'Paypal',
+                    },
+                    {
+                      value: 'Debit',
+                      label: 'Debit',
+                    },
+                  ],
+                },
+                texts: {
+                  label: 'Please select a way to pay.',
+                },
+                validators: [],
+              },
+            ],
+          },
+        },
+      ],
+    },
+  },
+};
+FormActive3.play = async ({ canvasElement }) => {
+  await within(canvasElement).findByText('Submit', undefined, { timeout: 5000 });
+  await fireEvent(await within(canvasElement).getByRole('button', { name: /submit/i }), new MouseEvent('click'));
+
+  const checkboxTerms = await within(canvasElement).findByLabelText('Debit');
+  await userEvent.click(checkboxTerms);
+
+  const chatBody = await within(canvasElement).findByTestId('chat-body-container');
+  await wait(300); // wait for the autoscroll to finish, so we can bottom for the Chromatic snapshot
+  fireEvent.scroll(chatBody, { target: { scrollTop: chatBody.clientHeight } });
+};
+
 export const FormWithoutTitle = Template.bind({});
 FormWithoutTitle.parameters = {
   ...defaultParameters,

package/stories/screens.stories/Chat/index.stories.jsx

@@ -178,6 +178,24 @@ Maintenance.parameters = {
   },
 };
 
+export const Announcement = Template.bind({});
+Announcement.parameters = {
+  botSettings: defaultBotSettings,
+  initialStateModifier: {
+    chatbubble: {
+      active: true,
+      chatHasStarted: true,
+      currentLanguage: 'en',
+    },
+    announcement: {
+      show: true,
+      text: 'Maintenance mode!',
+      url: 'https://example.com',
+      type: 'WARNING',
+    },
+  },
+};
+
 export const HiddenInput = Template.bind({});
 HiddenInput.parameters = {
   botSettings: defaultBotSettings,

package/.storybook/test-runner.js

@@ -1,35 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const { getStoryContext } = require('@storybook/test-runner');
-const { injectAxe, checkA11y } = require('axe-playwright');
-
-/*
- * See https://storybook.js.org/docs/react/writing-tests/test-runner#test-hook-api-experimental
- * to learn more about the test-runner hooks API.
- */
-module.exports = {
-  async preRender(page) {
-    await injectAxe(page);
-  },
-  async postRender(page, context) {
-    const storyContext = await getStoryContext(page, context);
-    // Do not test a11y for stories that disable a11y
-    if (storyContext.parameters?.a11y?.disable) {
-      return;
-    }
-
-    await page.waitForLoadState('domcontentloaded');
-
-    await checkA11y(page, '#root', {
-      detailedReport: true,
-      detailedReportOptions: {
-        html: true,
-      },
-      axeOptions: {
-        rules: storyContext.parameters?.a11y?.config.rules.reduce(
-          (previousValue, currentValue) => ({ ...previousValue, [currentValue.id]: currentValue }),
-          {},
-        ),
-      },
-    });
-  },
-};