feat: remove storybook

.eslintrc.js

@@ -3,7 +3,6 @@ module.exports = {
     'airbnb-base/legacy',
     'prettier',
     'plugin:vue/recommended',
-    'plugin:storybook/recommended',
     'plugin:cypress/recommended',
   ],
   parserOptions: {

.gitignore

@@ -74,5 +74,3 @@ yalc.lock
 /yarn-error.log
 yarn-debug.log*
 .yarn-integrity
-
-/storybook-static

.storybook/main.js

@@ -1,56 +0,0 @@
-const path = require('path');
-const resolve = require('../config/webpack/resolve');
-
-// Chatwoot's webpack.config.js
-process.env.NODE_ENV = 'development';
-const custom = require('../config/webpack/environment');
-
-module.exports = {
-  stories: [
-    '../stories/**/*.stories.mdx',
-    '../app/javascript/**/*.stories.@(js|jsx|ts|tsx)',
-  ],
-  addons: [
-    {
-      name: '@storybook/addon-docs',
-      options: {
-        vueDocgenOptions: {
-          alias: {
-            '@': path.resolve(__dirname, '../'),
-          },
-        },
-      },
-    },
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    {
-      /**
-       * Fix Storybook issue with PostCSS@8
-       * @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085
-       */
-      name: '@storybook/addon-postcss',
-      options: {
-        postcssLoaderOptions: {
-          implementation: require('postcss'),
-        },
-      },
-    },
-  ],
-  webpackFinal: config => {
-    const newConfig = {
-      ...config,
-      resolve: {
-        ...config.resolve,
-        modules: custom.resolvedModules.map(i => i.value),
-      },
-    };
-
-    newConfig.module.rules.push({
-      test: /\.scss$/,
-      use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
-      include: path.resolve(__dirname, '../app/javascript'),
-    });
-
-    return newConfig;
-  },
-};

.storybook/preview.js

@@ -1,46 +0,0 @@
-import { addDecorator } from '@storybook/vue';
-import Vue from 'vue';
-import Vuex from 'vuex';
-import VueI18n from 'vue-i18n';
-import Multiselect from 'vue-multiselect';
-import VueDOMPurifyHTML from 'vue-dompurify-html';
-import FluentIcon from 'shared/components/FluentIcon/DashboardIcon';
-
-import WootUiKit from '../app/javascript/dashboard/components';
-import i18n from '../app/javascript/dashboard/i18n';
-import { domPurifyConfig } from 'shared/helpers/HTMLSanitizer';
-
-import '../app/javascript/dashboard/assets/scss/storybook.scss';
-
-Vue.use(VueI18n);
-Vue.use(WootUiKit);
-Vue.use(Vuex);
-Vue.use(VueDOMPurifyHTML, domPurifyConfig);
-
-Vue.component('multiselect', Multiselect);
-Vue.component('fluent-icon', FluentIcon);
-
-const store = new Vuex.Store({});
-const i18nConfig = new VueI18n({
-  locale: 'en',
-  messages: i18n,
-});
-
-addDecorator(() => ({
-  template: '<story/>',
-  i18n: i18nConfig,
-  store,
-  beforeCreate: function () {
-    this.$root._i18n = this.$i18n;
-  },
-}));
-
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-};

app/javascript/dashboard/assets/scss/storybook.scss

@@ -1,39 +0,0 @@
-@import 'shared/assets/fonts/inter';
-@import 'shared/assets/fonts/plus-jakarta';
-@import 'shared/assets/stylesheets/animations';
-@import 'shared/assets/stylesheets/colors';
-@import 'shared/assets/stylesheets/spacing';
-@import 'shared/assets/stylesheets/font-size';
-@import 'shared/assets/stylesheets/font-weights';
-@import 'shared/assets/stylesheets/shadows';
-@import 'shared/assets/stylesheets/border-radius';
-@import 'variables';
-
-@import 'vue-multiselect/dist/vue-multiselect.min.css';
-@import '~shared/assets/stylesheets/ionicons';
-
-@import 'mixins';
-@import 'helper-classes';
-
-@import 'typography';
-@import 'layout';
-@import 'animations';
-
-@import 'widgets/buttons';
-@import 'widgets/base';
-
-@import 'plugins/multiselect';
-
-@import 'widget/assets/scss/reset';
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
-@import 'widget/assets/scss/utilities';
-
-html,
-body {
-  font-family: 'PlusJakarta', sans-serif;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  height: 100%;
-}

app/javascript/dashboard/components/Accordion/AccordionItem.stories.js

@@ -1,30 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import AccordionItemComponent from './AccordionItem';
-
-export default {
-  title: 'Components/Generic/Accordion',
-  component: AccordionItemComponent,
-  argTypes: {
-    title: {
-      control: {
-        type: 'string',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { AccordionItem: AccordionItemComponent },
-  template: `
-    <accordion-item v-bind="$props" @click="onClick">
-    This is a sample content you can pass as a slot
-    </accordion-item>
-  `,
-});
-
-export const AccordionItem = Template.bind({});
-AccordionItem.args = {
-  onClick: action('Added'),
-  title: 'Title of the accordion item',
-};

app/javascript/dashboard/components/ui/stories/AnnouncementPopup.stories.js

@@ -1,46 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import WootAnnouncementPopup from '../AnnouncementPopup.vue';
-
-export default {
-  title: 'Components/Popup/Announcement Popup',
-  argTypes: {
-    popupMessage: {
-      defaultValue:
-        'Now a new key shortcut (⌘ + ↵) is available to send messages. You can enable it in the',
-      control: {
-        type: 'text',
-      },
-    },
-    routeText: {
-      defaultValue: 'profile settings',
-      control: {
-        type: 'text',
-      },
-    },
-    hasCloseButton: {
-      defaultValue: true,
-      control: {
-        type: 'boolean',
-      },
-    },
-    closeButtonText: {
-      defaultValue: 'Got it',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { WootAnnouncementPopup },
-  template:
-    '<woot-announcement-popup v-bind="$props" @open="onClickOpenPath" @close="onClickClose"></woot-announcement-popup>',
-});
-
-export const AnnouncementPopup = Template.bind({});
-AnnouncementPopup.args = {
-  onClickOpenPath: action('opened path'),
-  onClickClose: action('closed the popup'),
-};

app/javascript/dashboard/components/ui/stories/Button.stories.js

@@ -1,50 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import WootButton from '../WootButton.vue';
-
-export default {
-  title: 'Components/Button',
-  component: WootButton,
-  argTypes: {
-    colorScheme: {
-      control: {
-        type: 'select',
-        options: ['primary', 'secondary', 'success', 'alert', 'warning'],
-      },
-    },
-    size: {
-      control: {
-        type: 'select',
-        options: ['tiny', 'small', 'medium', 'large', 'expanded'],
-      },
-    },
-    variant: {
-      control: {
-        type: 'select',
-        options: ['hollow', 'clear'],
-      },
-    },
-    isLoading: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    isDisabled: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { WootButton },
-  template:
-    '<woot-button v-bind="$props" @click="onClick">{{label}}</woot-button>',
-});
-
-export const Primary = Template.bind({});
-Primary.args = {
-  label: 'New message',
-  onClick: action('Hello'),
-};

app/javascript/dashboard/components/ui/stories/DateRangePicker.stories.js

@@ -1,38 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import WootDateRangePicker from '../DateRangePicker.vue';
-
-export default {
-  title: 'Components/Date Picker/Date Range Picker',
-  argTypes: {
-    confirmText: {
-      defaultValue: 'Apply',
-      control: {
-        type: 'text',
-      },
-    },
-    placeholder: {
-      defaultValue: 'Select date range',
-      control: {
-        type: 'text',
-      },
-    },
-    value: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { WootDateRangePicker },
-  template:
-    '<woot-date-range-picker v-bind="$props" @change="onChange"></woot-date-range-picker>',
-});
-
-export const DateRangePicker = Template.bind({});
-DateRangePicker.args = {
-  onChange: action('applied'),
-  value: new Date(),
-};

app/javascript/dashboard/components/ui/stories/DateTimePicker.stories.js

@@ -1,38 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import WootDateTimePicker from '../DateTimePicker.vue';
-
-export default {
-  title: 'Components/Date Picker/Date Time Picker',
-  argTypes: {
-    confirmText: {
-      defaultValue: 'Apply',
-      control: {
-        type: 'text',
-      },
-    },
-    placeholder: {
-      defaultValue: 'Select date time',
-      control: {
-        type: 'text',
-      },
-    },
-    value: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { WootDateTimePicker },
-  template:
-    '<woot-date-time-picker v-bind="$props" @change="onChange"></woot-date-time-picker>',
-});
-
-export const DateTimePicker = Template.bind({});
-DateTimePicker.args = {
-  onChange: action('applied'),
-  value: new Date(),
-};

app/javascript/dashboard/components/ui/stories/Label.stories.js

@@ -1,64 +0,0 @@
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Components/Label',
-  argTypes: {
-    title: {
-      defaultValue: 'sales',
-      control: {
-        type: 'text',
-      },
-    },
-    colorScheme: {
-      control: {
-        type: 'select',
-        options: ['primary', 'secondary', 'success', 'alert', 'warning'],
-      },
-    },
-    description: {
-      defaultValue: 'label',
-      control: {
-        type: 'text',
-      },
-    },
-    href: {
-      control: {
-        type: 'text',
-      },
-    },
-    bgColor: {
-      defaultValue: '#a83262',
-      control: {
-        type: 'text',
-      },
-    },
-    small: {
-      defaultValue: false,
-      control: {
-        type: 'boolean',
-      },
-    },
-    showClose: {
-      defaultValue: false,
-      control: {
-        type: 'boolean',
-      },
-    },
-    icon: {
-      defaultValue: 'ion-close',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  template: '<woot-label v-bind="$props" @click="onClick"></woot-label>',
-});
-
-export const DefaultLabel = Template.bind({});
-DefaultLabel.args = {
-  onClick: action('clicked'),
-};

app/javascript/dashboard/components/ui/stories/TimeAgo.stories.js

@@ -1,30 +0,0 @@
-import TimeAgo from 'dashboard/components/ui/TimeAgo';
-
-export default {
-  title: 'Components/TimeAgo',
-  component: TimeAgo,
-  argTypes: {
-    isAutoRefreshEnabled: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    timestamp: {
-      control: {
-        type: 'text, date, number',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { TimeAgo },
-  template: '<time-ago v-bind="$props"></time-ago>',
-});
-
-export const TimeAgoView = Template.bind({});
-TimeAgoView.args = {
-  timestamp: 1549843200,
-  isAutoRefreshEnabled: false,
-};

app/javascript/dashboard/components/widgets/InboxDropdownItem.stories.js

@@ -1,37 +0,0 @@
-import InboxDropdownItem from './InboxDropdownItem';
-
-export default {
-  title: 'Components/DropDowns/InboxDropdownItem',
-  component: InboxDropdownItem,
-  argTypes: {
-    name: {
-      defaultValue: 'My new inbox',
-      control: {
-        type: 'text',
-      },
-    },
-
-    inboxIdentifier: {
-      defaultValue: 'nithin@mail.com',
-      control: {
-        type: 'text',
-      },
-    },
-
-    channelType: {
-      defaultValue: 'email',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { InboxDropdownItem },
-  template: '<inbox-dropdown-item v-bind="$props" ></inbox-dropdown-item>',
-});
-
-export const Banner = Template.bind({});
-Banner.args = {};

app/javascript/dashboard/components/widgets/LabelSelector.stories.js

@@ -1,67 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import LabelSelector from './LabelSelector';
-
-export default {
-  title: 'Components/Label/Contact Label',
-  component: LabelSelector,
-  argTypes: {
-    contactId: {
-      control: {
-        type: 'text ,number',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { LabelSelector },
-  template:
-    '<label-selector v-bind="$props" @add="onAdd" @remove="onRemove"></label-selector>',
-});
-
-export const ContactLabel = Template.bind({});
-ContactLabel.args = {
-  onAdd: action('Added'),
-  onRemove: action('Removed'),
-  allLabels: [
-    {
-      id: '1',
-      title: 'sales',
-      description: '',
-      color: '#0a5dd1',
-    },
-    {
-      id: '2',
-      title: 'refund',
-      description: '',
-      color: '#8442f5',
-    },
-    {
-      id: '3',
-      title: 'testing',
-      description: '',
-      color: '#f542f5',
-    },
-    {
-      id: '4',
-      title: 'scheduled',
-      description: '',
-      color: '#42d1f5',
-    },
-  ],
-  savedLabels: [
-    {
-      id: '2',
-      title: 'refund',
-      description: '',
-      color: '#8442f5',
-    },
-    {
-      id: '4',
-      title: 'scheduled',
-      description: '',
-      color: '#42d1f5',
-    },
-  ],
-};

app/javascript/dashboard/components/widgets/SettingIntroBanner.stories.js

@@ -1,30 +0,0 @@
-import SettingIntroBanner from './SettingIntroBanner';
-
-export default {
-  title: 'Components/Settings/Banner',
-  component: SettingIntroBanner,
-  argTypes: {
-    headerTitle: {
-      defaultValue: 'Acme Support',
-      control: {
-        type: 'text',
-      },
-    },
-    headerContent: {
-      defaultValue:
-        'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { SettingIntroBanner },
-  template: '<setting-intro-banner v-bind="$props" ></setting-intro-banner>',
-});
-
-export const Banner = Template.bind({});
-Banner.args = {};

app/javascript/dashboard/components/widgets/Thumbnail.stories.js

@@ -1,61 +0,0 @@
-import Thumbnail from './Thumbnail.vue';
-
-export default {
-  title: 'Components/Thumbnail',
-  component: Thumbnail,
-  argTypes: {
-    src: {
-      control: {
-        type: 'text',
-      },
-    },
-    size: {
-      control: {
-        type: 'text',
-      },
-    },
-    badge: {
-      control: {
-        type: 'select',
-        options: ['fb', 'whatsapp', 'sms', 'twitter-tweet', 'twitter-dm'],
-      },
-    },
-    variant: {
-      control: {
-        type: 'select',
-        options: ['circle', 'square'],
-      },
-    },
-    username: {
-      defaultValue: 'John Doe',
-      control: {
-        type: 'text',
-      },
-    },
-    status: {
-      defaultValue: 'circle',
-      control: {
-        type: 'select',
-        options: ['online', 'busy'],
-      },
-    },
-    hasBorder: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    shouldShowStatusAlways: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Thumbnail },
-  template: '<thumbnail v-bind="$props" @click="onClick">{{label}}</thumbnail>',
-});
-
-export const Primary = Template.bind({});

app/javascript/dashboard/components/widgets/conversation/stories/ContactBubble.stories.js

@@ -1,28 +0,0 @@
-import ContactBubble from '../bubble/Contact.vue';
-
-export default {
-  title: 'Components/Messaging/ContactBubble',
-  component: ContactBubble,
-  argTypes: {
-    name: {
-      defaultValue: 'Eden Hazard',
-      control: {
-        type: 'string',
-      },
-    },
-    phoneNumber: {
-      defaultValue: '+517554433220',
-      control: {
-        type: 'string',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ContactBubble },
-  template: '<contact-bubble v-bind="$props" />',
-});
-
-export const ContactBubbleView = Template.bind({});

app/javascript/dashboard/components/widgets/conversation/stories/LocationBubble.stories.js

@@ -1,34 +0,0 @@
-import LocationBubble from '../bubble/Location.vue';
-
-export default {
-  title: 'Components/Help Center',
-  component: LocationBubble,
-  argTypes: {
-    latitude: {
-      defaultValue: 1,
-      control: {
-        type: 'number',
-      },
-    },
-    longitude: {
-      defaultValue: 1,
-      control: {
-        type: 'number',
-      },
-    },
-    name: {
-      defaultValue: '420, Dope street',
-      control: {
-        type: 'string',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { LocationBubble },
-  template: '<location-bubble v-bind="$props" />',
-});
-
-export const LocationBubbleView = Template.bind({});

app/javascript/dashboard/components/widgets/conversation/stories/ReplyEmailHead.stories.js

@@ -1,27 +0,0 @@
-import ReplyEmailHead from '../ReplyEmailHead';
-
-export default {
-  title: 'Components/ReplyBox/EmailHead',
-  component: ReplyEmailHead,
-  argTypes: {
-    ccEmails: {
-      control: {
-        type: 'string',
-      },
-    },
-    bccEmails: {
-      control: {
-        type: 'string',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ReplyEmailHead },
-  template:
-    '<reply-email-head v-bind="$props" @add="onAdd" @click="onClick"></reply-email-head>',
-});
-
-export const Add = Template.bind({});

app/javascript/dashboard/components/widgets/modal/WootKeyShortcutModal.stories.js

@@ -1,17 +0,0 @@
-import WootKeyboardShortcutModal from './WootKeyShortcutModal.vue';
-
-export default {
-  title: 'Components/Shortcuts/Keyboard Shortcut',
-  component: WootKeyboardShortcutModal,
-  argTypes: {},
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { WootKeyboardShortcutModal },
-  template:
-    '<woot-keyboard-shortcut-modal v-bind="$props"></woot-keyboard-shortcut-modal>',
-});
-
-export const KeyboardShortcut = Template.bind({});
-KeyboardShortcut.args = {};

app/javascript/dashboard/components/widgets/stories/ThumbnailGroup.stories.js

@@ -1,69 +0,0 @@
-import ThumbnailGroup from '../ThumbnailGroup.vue';
-
-export default {
-  title: 'Components/ThumbnailGroup',
-  component: ThumbnailGroup,
-  argTypes: {
-    usersList: {
-      defaultValue: [
-        {
-          name: 'John',
-          id: 1,
-          thumbnail: '',
-        },
-        {
-          name: 'John',
-          id: 2,
-          thumbnail: '',
-        },
-        {
-          name: 'John',
-          id: 3,
-          thumbnail: '',
-        },
-        {
-          name: 'John',
-          id: 4,
-          thumbnail: '',
-        },
-        {
-          name: 'John',
-          id: 5,
-          thumbnail: '',
-        },
-        {
-          name: 'John',
-          id: 6,
-          thumbnail: '',
-        },
-      ],
-      control: {
-        type: 'object',
-      },
-    },
-    size: {
-      control: {
-        type: 'text',
-      },
-    },
-    moreThumbnailsText: {
-      control: {
-        type: 'text',
-        default: '2 more',
-      },
-    },
-    showMoreThumbnailsCount: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ThumbnailGroup },
-  template: '<ThumbnailGroup v-bind="$props"/>',
-});
-
-export const Primary = Template.bind({});

app/javascript/dashboard/modules/contact/stories/AddCustomAttribute.stories.js

@@ -1,32 +0,0 @@
-import AddCustomAttribute from '../components/AddCustomAttribute';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Components/Contact/AddCustomAttribute',
-  component: AddCustomAttribute,
-  argTypes: {
-    show: {
-      defaultValue: true,
-      control: {
-        type: 'boolean',
-      },
-    },
-    isCreating: {
-      defaultValue: false,
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { AddCustomAttribute },
-  template: '<add-custom-attribute v-bind="$props" @create="onCreate" />',
-});
-
-export const DefaultAttribute = Template.bind({});
-DefaultAttribute.args = {
-  onCreate: action('edit'),
-};

app/javascript/dashboard/modules/contact/stories/ContactAttribute.stories.js

@@ -1,43 +0,0 @@
-import ContactAttribute from '../components/ContactAttribute';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Components/Contact/ContactAttribute',
-  component: ContactAttribute,
-  argTypes: {
-    label: {
-      defaultValue: 'Email',
-      control: {
-        type: 'text',
-      },
-    },
-    value: {
-      defaultValue: 'dwight@schrute.farms',
-      control: {
-        type: 'text',
-      },
-    },
-    icon: {
-      defaultValue: 'ion-email',
-      control: {
-        type: 'text',
-      },
-    },
-    showEdit: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ContactAttribute },
-  template: '<contact-attribute v-bind="$props" @update="onEdit" />',
-});
-
-export const DefaultAttribute = Template.bind({});
-DefaultAttribute.args = {
-  onEdit: action('edit'),
-};

app/javascript/dashboard/modules/contact/stories/ContactFields.stories.js

@@ -1,43 +0,0 @@
-import ContactFields from '../components/ContactFields';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Components/Contact/ContactFields',
-  component: ContactFields,
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ContactFields },
-  template:
-    '<contact-fields v-bind="$props" :contact="contact" @update="onUpdate" @create-attribute="onCreate" />',
-});
-
-export const DefaultContactFields = Template.bind({});
-DefaultContactFields.args = {
-  contact: {
-    id: 979442,
-    name: 'Eden Hazard',
-    title: 'Playmaker',
-    thumbnail: 'https://randomuser.me/api/portraits/men/19.jpg',
-    company: {
-      id: 10,
-      name: 'Chelsea',
-    },
-    email: 'hazard@chelsea.com',
-    availability_status: 'offline',
-    phone_number: '',
-    custom_attributes: {},
-    additional_attributes: {
-      description:
-        'Known for his dribbling, he is considered to be one of the best players in the world.',
-      social_profiles: {
-        twitter: 'hazardeden10',
-        facebook: 'hazardeden10',
-        linkedin: 'hazardeden10',
-      },
-    },
-  },
-  onUpdate: action('update'),
-  onCreate: action('create'),
-};

app/javascript/dashboard/modules/contact/stories/ContactIntro.stories.js

@@ -1,43 +0,0 @@
-import ContactIntro from '../components/ContactIntro';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Components/Contact/ContactIntro',
-  component: ContactIntro,
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ContactIntro },
-  template:
-    '<contact-intro v-bind="$props" @edit="onEdit" @message="onNewMessage" />',
-});
-
-export const DefaultContactIntro = Template.bind({});
-DefaultContactIntro.args = {
-  contact: {
-    id: 979442,
-    name: 'Eden Hazard',
-    title: 'Playmaker',
-    thumbnail: 'https://randomuser.me/api/portraits/men/19.jpg',
-    company: {
-      id: 10,
-      name: 'Chelsea',
-    },
-    email: 'hazard@chelsea.com',
-    availability_status: 'offline',
-    phone_number: '',
-    custom_attributes: {},
-    additional_attributes: {
-      description:
-        'Known for his dribbling, he is considered to be one of the best players in the world.',
-      social_profiles: {
-        twitter: 'hazardeden10',
-        facebook: 'hazardeden10',
-        linkedin: 'hazardeden10',
-      },
-    },
-  },
-  onEdit: action('edit'),
-  onNewMessage: action('new message 💬'),
-};

app/javascript/dashboard/modules/contact/stories/MergeContact.stories.js

@@ -1,32 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import MergeContact from 'dashboard/modules/contact/components/MergeContact';
-
-export default {
-  title: 'Components/Contact/MergeContacts',
-  component: MergeContact,
-  argTypes: {
-    'primary-contact': {
-      defaultValue: '{}',
-      control: {
-        type: 'object',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { MergeContact },
-  template:
-    '<merge-contact v-bind="$props" @submit="onSearch" @search="onSubmit"></merge-contact>',
-});
-
-export const List = Template.bind({});
-List.args = {
-  primaryContact: {
-    id: 12,
-    name: 'Mason Mount',
-  },
-  onSearch: action('Search'),
-  onSubmit: action('Submit'),
-};

app/javascript/dashboard/modules/notes/stories/AddNote.stories.js

@@ -1,19 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import AddNote from '../components/AddNote.vue';
-
-export default {
-  title: 'Components/Notes/Add',
-  component: AddNote,
-  argTypes: {},
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { AddNote },
-  template: '<add-note v-bind="$props" @add="onAdd"></add-note>',
-});
-
-export const Add = Template.bind({});
-Add.args = {
-  onAdd: action('Added'),
-};

app/javascript/dashboard/modules/notes/stories/ContactNote.stories.js

@@ -1,52 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import ContactNote from '../components/ContactNote.vue';
-
-export default {
-  title: 'Components/Notes/Note',
-  component: ContactNote,
-  argTypes: {
-    id: {
-      control: {
-        type: 'number',
-      },
-    },
-    note: {
-      defaultValue:
-        'A copy and paste musical notes symbols & music symbols collection for easy access.',
-      control: {
-        type: 'text',
-      },
-    },
-    userName: {
-      defaultValue: 'John Doe',
-      control: {
-        type: 'text',
-      },
-    },
-    timeStamp: {
-      defaultValue: 1618046084,
-      control: {
-        type: 'number',
-      },
-    },
-    thumbnail: {
-      defaultValue: 'https://randomuser.me/api/portraits/men/62.jpg',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ContactNote },
-  template:
-    '<contact-note v-bind="$props" @edit="onEdit" @delete="onDelete"></contact-note>',
-});
-
-export const Note = Template.bind({});
-Note.args = {
-  onEdit: action('Edit'),
-  onDelete: action('Delete'),
-};

app/javascript/dashboard/modules/notes/stories/NoteList.stories.js

@@ -1,45 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import NoteList from '../components/NoteList';
-
-export default {
-  title: 'Components/Notes/List',
-  component: NoteList,
-  argTypes: {},
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { NoteList },
-  template:
-    '<note-list v-bind="$props" @addNote="onAddNote" @editNote="onEditNote" @deleteNote="onDeleteNote" @show="onClick"></note-list>',
-});
-
-export const List = Template.bind({});
-List.args = {
-  onClick: action('show'),
-  onAddNote: action('added'),
-  onEditNote: action('edit'),
-  onDeleteNote: action('deleted'),
-  notes: [
-    {
-      id: '12345',
-      content:
-        'It is a long established fact that a reader will be distracted.',
-      user: {
-        name: 'John Doe',
-        thumbnail: 'https://randomuser.me/api/portraits/men/69.jpg',
-      },
-      created_at: 1618046084,
-    },
-    {
-      id: '12346',
-      content:
-        'It is simply dummy text of the printing and typesetting industry.',
-      user: {
-        name: 'Pearl Cruz',
-        thumbnail: 'https://randomuser.me/api/portraits/women/29.jpg',
-      },
-      created_at: 1616046076,
-    },
-  ],
-};

app/javascript/dashboard/modules/search/search.routes.js

@@ -1,4 +1,3 @@
-/* eslint-disable storybook/default-exports */
 import { frontendURL } from '../../helper/URLHelper';
 
 const SearchView = () => import('./components/SearchView.vue');

app/javascript/dashboard/modules/search/stories/MessageContent.stories.js

@@ -1,28 +0,0 @@
-import MessageContent from '../components/MessageContent.vue';
-
-export default {
-  title: 'Components/Search/MessageContent',
-  component: MessageContent,
-  argTypes: {
-    content: {
-      defaultValue: '123',
-      control: {
-        type: 'text',
-      },
-    },
-    author: {
-      defaultValue: 'John Doe',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { MessageContent },
-  template: '<message-content v-bind="$props"></message-content>',
-});
-
-export const MessageResultItem = Template.bind({});

app/javascript/dashboard/modules/search/stories/SearchResultContactItem.stories.js

@@ -1,53 +0,0 @@
-import SearchResultContactItem from '../components/SearchResultContactItem.vue';
-
-export default {
-  title: 'Components/Search/SearchResultContactItem',
-  component: SearchResultContactItem,
-  argTypes: {
-    id: {
-      defaultValue: '123',
-      control: {
-        type: 'text',
-      },
-    },
-    name: {
-      defaultValue: 'John Doe',
-      control: {
-        type: 'text',
-      },
-    },
-    email: {
-      defaultValue: 'johndoe@faster.com',
-      control: {
-        type: 'text',
-      },
-    },
-    phone: {
-      defaultValue: '+1 123 456 7890',
-      control: {
-        type: 'text',
-      },
-    },
-    accountId: {
-      defaultValue: '7890',
-      control: {
-        type: 'text',
-      },
-    },
-    thumbnail: {
-      defaultValue: 'https://randomuser.me/api/portraits/men/62.jpg',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { SearchResultContactItem },
-  template:
-    '<search-result-contact-item v-bind="$props"></search-result-contact-item>',
-});
-
-export const ResultContactItem = Template.bind({});

app/javascript/dashboard/modules/search/stories/SearchResultConversationItem.stories.js

@@ -1,50 +0,0 @@
-import SearchResultConversationItem from '../components/SearchResultConversationItem.vue';
-
-export default {
-  title: 'Components/Search/SearchResultConversationItem',
-  component: SearchResultConversationItem,
-  argTypes: {
-    id: {
-      defaultValue: '123',
-      control: {
-        type: 'text',
-      },
-    },
-    name: {
-      defaultValue: 'John Doe',
-      control: {
-        type: 'text',
-      },
-    },
-    inbox: {
-      defaultValue: {
-        name: 'Livechat',
-        channel_type: 'Channel::WebWidget',
-      },
-      control: {
-        type: 'object',
-      },
-    },
-    accountId: {
-      defaultValue: '7890',
-      control: {
-        type: 'text',
-      },
-    },
-    createdAt: {
-      defaultValue: '1677672962',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { SearchResultConversationItem },
-  template:
-    '<search-result-conversation-item v-bind="$props"></search-result-conversation-item>',
-});
-
-export const ResultConversationItem = Template.bind({});

app/javascript/dashboard/modules/widget-preview/stories/Widget.stories.js

@@ -1,29 +0,0 @@
-import Widget from '../components/Widget';
-
-const ReplyTime = {
-  'In a few minutes': 'in_a_few_minutes',
-  'In a few hours': 'in_a_few_hours',
-  'In a few day': 'in_a_day',
-};
-
-export default {
-  title: 'components/Widget',
-  component: Widget,
-  argTypes: {
-    replyTime: {
-      control: {
-        type: 'select',
-        options: ReplyTime,
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Widget },
-  template: '<Widget v-bind="$props" />',
-});
-
-export const DefaultWidget = Template.bind({});
-DefaultWidget.args = {};

app/javascript/dashboard/routes/dashboard/contacts/components/AddReminder.stories.js

@@ -1,41 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import AddReminder from './AddReminder';
-
-export default {
-  title: 'Components/Reminder/Add',
-  component: AddReminder,
-  argTypes: {
-    options: {
-      control: {
-        type: 'object',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { AddReminder },
-  template:
-    '<add-reminder v-bind="$props" @add="onAdd" @click="onClick"></add-reminder>',
-});
-
-export const Add = Template.bind({});
-Add.args = {
-  onAdd: action('Added'),
-  onClick: action('Label'),
-  options: [
-    {
-      id: '12345',
-      name: 'calls',
-    },
-    {
-      id: '12346',
-      name: 'meeting',
-    },
-    {
-      id: '12347',
-      name: 'review',
-    },
-  ],
-};

app/javascript/dashboard/routes/dashboard/contacts/components/ReminderItem.stories.js

@@ -1,52 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import ReminderItem from './ReminderItem';
-
-export default {
-  title: 'Components/Reminder/Item',
-  component: ReminderItem,
-  argTypes: {
-    id: {
-      control: {
-        type: 'number',
-      },
-    },
-    text: {
-      defaultValue:
-        'A copy and paste musical notes symbols & music symbols collection for easy access.',
-      control: {
-        type: 'text',
-      },
-    },
-    isCompleted: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    date: {
-      defaultValue: '03/06/2020',
-      control: {
-        type: 'text',
-      },
-    },
-    label: {
-      defaultValue: 'Call',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ReminderItem },
-  template:
-    '<reminder-item v-bind="$props" @completed="onClick" @edit="onEdit" @delete="onDelete"></reminder-item>',
-});
-
-export const Item = Template.bind({});
-Item.args = {
-  onClick: action('Marked'),
-  onEdit: action('Edit'),
-  onDelete: action('Delete'),
-};

app/javascript/dashboard/routes/dashboard/contacts/components/SectionHeader.stories.js

@@ -1,22 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import SectionHeader from './SectionHeader';
-
-export default {
-  title: 'Components/Events/Section',
-  component: SectionHeader,
-  argTypes: {},
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { SectionHeader },
-  template:
-    '<section-header v-bind="$props" @notes="onClickNotes" @events="onClickEvents" @conversation="onClickConversation"></section-header>',
-});
-
-export const Section = Template.bind({});
-Section.args = {
-  onClickNotes: action('notes'),
-  onClickEvents: action('events'),
-  onClickConversation: action('conversation'),
-};

app/javascript/dashboard/routes/dashboard/contacts/components/TimelineCard.stories.js

@@ -1,45 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import TimelineCard from './TimelineCard';
-
-export default {
-  title: 'Components/Events/Timeline',
-  component: TimelineCard,
-  argTypes: {
-    eventType: {
-      defaultValue: 'Commented',
-      control: {
-        type: 'text',
-      },
-    },
-    eventPath: {
-      defaultValue: 'chatwoot/chatwoot',
-      control: {
-        type: 'text',
-      },
-    },
-    eventBody: {
-      defaultValue:
-        'Commentedmany variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour',
-      control: {
-        type: 'text',
-      },
-    },
-    timeStamp: {
-      defaultValue: '1618046084',
-      control: {
-        type: 'number',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { TimelineCard },
-  template: '<timeline-card v-bind="$props" @more="onClick"></timeline-card>',
-});
-
-export const Timeline = Template.bind({});
-Timeline.args = {
-  onClick: action('more'),
-};

app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/AddCategory.stories.js

@@ -1,30 +0,0 @@
-import AddCategoryComponent from '../../pages/categories/AddCategory.vue';
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: 'Components/Help Center',
-  component: AddCategoryComponent,
-  argTypes: {
-    show: {
-      defaultValue: true,
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { AddCategoryComponent },
-  template:
-    '<add-category-component v-bind="$props" @create="onCreate" @cancel="onClose" />',
-});
-
-export const AddCategory = Template.bind({});
-AddCategory.args = {
-  portalName: 'Chatwoot help center',
-  locale: 'En-US',
-  onCreate: action('create'),
-  onClose: action('cancel'),
-};

app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleEditor.stories.js

@@ -1,34 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import ArticleEditor from '../../components/ArticleEditor.vue';
-
-export default {
-  title: 'Components/Help Center',
-  component: ArticleEditor,
-  argTypes: {
-    article: {
-      defaultValue: {},
-      control: {
-        type: 'object',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ArticleEditor },
-  template:
-    '<article-editor v-bind="$props" @focus="onFocus" @blur="onBlur"></article-editor>',
-});
-
-export const EditArticleView = Template.bind({});
-EditArticleView.args = {
-  article: {
-    id: '1',
-    title: 'Lorem ipsum',
-    content:
-      'L**orem ipsum** dolor sit amet, consectetur adipiscing elit. Congue diam orci tellus *varius per cras turpis aliquet commodo dolor justo* rutrum lorem venenatis aliquet orci curae hac. Sagittis ultrices felis **`ante placerat condimentum parturient erat consequat`** sollicitudin *sagittis potenti sollicitudin* quis velit at placerat mi torquent. Dignissim luctus nulla suspendisse purus cras commodo ipsum orci tempus morbi metus conubia et hac potenti quam suspendisse feugiat. Turpis eros dictum tellus natoque laoreet lacus dolor cras interdum **vitae gravida tincidunt ultricies tempor convallis tortor rhoncus suspendisse.** Nisi lacinia etiam vivamus tellus sed taciti potenti quam praesent congue euismod mauris est eu risus convallis taciti etiam. Inceptos iaculis turpis leo porta pellentesque dictum `bibendum blandit parturient nulla leo pretium` rhoncus litora dapibus fringilla hac litora.',
-  },
-  onFocus: action('focus'),
-  onBlur: action('blur'),
-};

app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleHeader.stories.js

@@ -1,44 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import ArticleHeader from '../Header/ArticleHeader';
-
-export default {
-  title: 'Components/Help Center/Header',
-  component: ArticleHeader,
-  argTypes: {
-    headerTitle: {
-      defaultValue: 'All articles',
-      control: {
-        type: 'text',
-      },
-    },
-    count: {
-      defaultValue: 112,
-      control: {
-        type: 'number',
-      },
-    },
-    selectedValue: {
-      defaultValue: 'Status',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ArticleHeader },
-  template:
-    '<article-header v-bind="$props" @openModal="openFilterModal" @open="openDropdown" @close="closeDropdown" ></article-header>',
-});
-
-export const ArticleHeaderView = Template.bind({});
-ArticleHeaderView.args = {
-  headerTitle: 'All articles',
-  count: 112,
-  selectedValue: 'Status',
-  openFilterModal: action('openedFilterModal'),
-  openDropdown: action('opened'),
-  closeDropdown: action('closed'),
-};

app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleItem.stories.js

@@ -1,63 +0,0 @@
-import ArticleItemComponent from '../ArticleItem.vue';
-const STATUS_LIST = {
-  published: 'published',
-  draft: 'draft',
-  archived: 'archived',
-};
-
-export default {
-  title: 'Components/Help Center',
-  component: ArticleItemComponent,
-  argTypes: {
-    title: {
-      defaultValue: 'Setup your account',
-      control: {
-        type: 'text',
-      },
-    },
-    views: {
-      defaultValue: 13,
-      control: {
-        type: 'number',
-      },
-    },
-    category: {
-      defaultValue: 'Getting started',
-      control: {
-        type: 'text',
-      },
-    },
-    status: {
-      defaultValue: 'Status',
-      control: {
-        type: 'select',
-        options: STATUS_LIST,
-      },
-    },
-    updatedAt: {
-      defaultValue: '1657255863',
-      control: {
-        type: 'number',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ArticleItemComponent },
-  template:
-    '<article-item-component v-bind="$props" ></article-item-component>',
-});
-
-export const ArticleItem = Template.bind({});
-ArticleItem.args = {
-  title: 'Setup your account',
-  author: {
-    name: 'John Doe',
-  },
-  category: 'Getting started',
-  views: 12,
-  status: 'published',
-  updatedAt: 1657255863,
-};

app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleSearchArticleView.stories.js

@@ -1,33 +0,0 @@
-import ArticleSearchArticleView from '../ArticleSearch/ArticleView';
-
-export default {
-  title: 'Components/Help Center/ArticleSearch/ArticleView',
-  component: ArticleSearchArticleView,
-  argTypes: {
-    title: {
-      defaultValue: 'Insert article',
-      control: {
-        type: 'text',
-      },
-    },
-    selectedValue: {
-      defaultValue: 'Status',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ArticleSearchArticleView },
-  template:
-    '<article-search-article-view v-bind="$props"></article-search-article-view>',
-});
-
-export const ArticleHeaderView = Template.bind({});
-ArticleHeaderView.args = {
-  title: 'Insert article',
-  url: 'https://staging.chatwoot.com/hc/home-rental-app/articles/filter-your-housing-search-results-0',
-};

app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleSearchHeader.stories.js

@@ -1,31 +0,0 @@
-import ArticleSearchHeader from '../ArticleSearch/Header';
-
-export default {
-  title: 'Components/Help Center/ArticleSearch/Header',
-  component: ArticleSearchHeader,
-  argTypes: {
-    title: {
-      defaultValue: 'Insert article',
-      control: {
-        type: 'text',
-      },
-    },
-    selectedValue: {
-      defaultValue: 'Status',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ArticleSearchHeader },
-  template: '<article-search-header v-bind="$props"></article-search-header>',
-});
-
-export const ArticleHeaderView = Template.bind({});
-ArticleHeaderView.args = {
-  title: 'Insert article',
-};

app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleSearchResultItem.stories.js

@@ -1,56 +0,0 @@
-import ArticleSearchResultItem from '../ArticleSearch/ArticleSearchResultItem.vue';
-
-export default {
-  title: 'Components/Help Center/ArticleSearchResultItem',
-  component: ArticleSearchResultItem,
-  argTypes: {
-    title: {
-      defaultValue: 'Setup your account',
-      control: {
-        type: 'text',
-      },
-    },
-    body: {
-      defaultValue:
-        'You can integrate your Chatwoot account with multiple conversation channels like website live-chat, email, Facebook page, Twitter handle, WhatsApp, etc. You can view all of your conversations from different channels on one dashboard. This helps in reducing the time and friction involved with switching between multiple tools.',
-      control: {
-        type: 'text',
-      },
-    },
-    category: {
-      defaultValue: 'Getting started',
-      control: {
-        type: 'text',
-      },
-    },
-    locale: {
-      defaultValue: 'en-US',
-      control: {
-        type: 'text',
-      },
-    },
-    url: {
-      defaultValue: '/app/accounts/1/conversations/23842',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ArticleSearchResultItem },
-  template:
-    '<ArticleSearchResultItem v-bind="$props" ></ArticleSearchResultItem>',
-});
-
-export const ArticleSearchResultItemStory = Template.bind({});
-ArticleSearchResultItemStory.args = {
-  title: 'Setup your account',
-  body: `You can integrate your Chatwoot account with multiple conversation channels like website live-chat, email, Facebook page, Twitter handle, WhatsApp, etc. You can view all of your conversations from different channels on one dashboard. This helps in reducing the time and friction involved with switching between multiple tools.
-
-You can manage your conversations and collaborate with your team on the go with Chatwoot mobile apps (available for Android and iOS).
-
-In this user guide, we’ve explained the features, capabilities, modes of operation, and step-by-step procedures for easily using the Chatwoot platform.`,
-};

app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/ArticleTable.stories.js

@@ -1,72 +0,0 @@
-import ArticleTableComponent from '../ArticleTable.vue';
-import { action } from '@storybook/addon-actions';
-export default {
-  title: 'Components/Help Center',
-  component: ArticleTableComponent,
-  argTypes: {
-    articles: {
-      defaultValue: [],
-      control: {
-        type: 'array',
-      },
-    },
-    articleCount: {
-      defaultValue: 10,
-      control: {
-        type: 'number',
-      },
-    },
-    currentPage: {
-      defaultValue: 1,
-      control: {
-        type: 'number',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ArticleTableComponent },
-  template:
-    '<article-table-component @onPageChange="onPageChange" v-bind="$props" ></article-table-component>',
-});
-
-export const ArticleTable = Template.bind({});
-ArticleTable.args = {
-  articles: [
-    {
-      title: 'Setup your account',
-      author: {
-        name: 'John Doe',
-      },
-      readCount: 13,
-      category: 'Getting started',
-      status: 'published',
-      updatedAt: 1657255863,
-    },
-    {
-      title: 'Docker Configuration',
-      author: {
-        name: 'Sam Manuel',
-      },
-      readCount: 13,
-      category: 'Engineering',
-      status: 'draft',
-      updatedAt: 1656658046,
-    },
-    {
-      title: 'Campaigns',
-      author: {
-        name: 'Sam Manuel',
-      },
-      readCount: 28,
-      category: 'Engineering',
-      status: 'archived',
-      updatedAt: 1657590446,
-    },
-  ],
-  articleCount: 10,
-  currentPage: 1,
-  onPageChange: action('onPageChange'),
-};

app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/EditArticleHeader.stories.js

@@ -1,39 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import EditArticleHeader from '../Header/EditArticleHeader';
-
-export default {
-  title: 'Components/Help Center/Header',
-  component: EditArticleHeader,
-  argTypes: {
-    backButtonLabel: {
-      defaultValue: 'Articles',
-      control: {
-        type: 'text',
-      },
-    },
-    draftState: {
-      defaultValue: 'saving',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { EditArticleHeader },
-  template:
-    '<edit-article-header v-bind="$props" @back="onClickGoBack" @show="showPreview" @add="onClickAdd" @open="openSidebar" @close="closeSidebar" ></edit-article-header>',
-});
-
-export const EditArticleHeaderView = Template.bind({});
-EditArticleHeaderView.args = {
-  backButtonLabel: 'Articles',
-  draftState: 'saving',
-  onClickGoBack: action('goBack'),
-  showPreview: action('previewOpened'),
-  onClickAdd: action('added'),
-  openSidebar: action('openedSidebar'),
-  closeSidebar: action('closedSidebar'),
-};

app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/PortalListItem.stories.js

@@ -1,145 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import PortalListItem from '../PortalListItem';
-
-export default {
-  title: 'Components/Help Center/Portal List',
-  component: PortalListItem,
-  argTypes: {
-    portals: { control: 'array' },
-    status: {
-      control: {
-        type: 'string',
-        options: ['archived', 'draft', 'published'],
-      },
-    },
-    selectedLocaleCode: { control: 'string' },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { PortalListItem },
-  template:
-    '<portal-list-item v-bind="$props" @add="addLocale" @open-site="openSite" @open="openSettings" @swap="swapLocale" @delete="deleteLocale" ></portal-list-item>',
-});
-
-export const PortalListItemView = Template.bind({});
-PortalListItemView.args = {
-  addLocale: action('addLocale'),
-  openSite: action('openSite'),
-  openSettings: action('openSettings'),
-  swapLocale: action('swapLocale'),
-  deleteLocale: action('deleteLocale'),
-  status: 'published',
-  selectedLocaleCode: 'en-US',
-  portals: [
-    {
-      name: 'Chatwoot Help Center',
-      id: 1,
-      color: 'red',
-      custom_domain: 'help-center.chatwoot.com',
-      articles_count: 123,
-      header_text: 'Help center',
-      homepage_link: null,
-      page_title: 'English',
-      slug: 'help-center',
-      archived: false,
-      config: {
-        allowed_locales: [
-          {
-            code: 'en-US',
-            name: 'English',
-            articles_count: 123,
-            categories_count: 42,
-          },
-          {
-            code: 'fr-FR',
-            name: 'Français',
-            articles_count: 23,
-            categories_count: 11,
-          },
-          {
-            code: 'de-DE',
-            name: 'Deutsch',
-            articles_count: 32,
-            categories_count: 12,
-          },
-          {
-            code: 'es-ES',
-            name: 'Español',
-            articles_count: 12,
-            categories_count: 4,
-          },
-        ],
-      },
-      locales: [
-        {
-          code: 'en-US',
-          name: 'English',
-          articles_count: 123,
-          categories_count: 42,
-        },
-        {
-          code: 'fr-FR',
-          name: 'Français',
-          articles_count: 23,
-          categories_count: 11,
-        },
-        {
-          code: 'de-DE',
-          name: 'Deutsch',
-          articles_count: 32,
-          categories_count: 12,
-        },
-        {
-          code: 'es-ES',
-          name: 'Español',
-          articles_count: 12,
-          categories_count: 4,
-        },
-      ],
-    },
-    {
-      name: 'Chatwoot Docs',
-      id: 2,
-      color: 'green',
-      custom_domain: 'doc-chatwoot.com',
-      articles_count: 67,
-      header_text: 'Docs',
-      homepage_link: null,
-      page_title: 'Portal',
-      slug: 'second_portal',
-      archived: false,
-      config: {
-        allowed_locales: [
-          {
-            name: 'English',
-            code: 'en-EN',
-            articles_count: 12,
-            categories_count: 66,
-          },
-          {
-            name: 'Mandarin',
-            code: 'ch-CH',
-            articles_count: 6,
-            categories_count: 23,
-          },
-        ],
-      },
-      locales: [
-        {
-          name: 'English',
-          code: 'en-EN',
-          articles_count: 12,
-          categories_count: 66,
-        },
-        {
-          name: 'Mandarin',
-          code: 'ch-CH',
-          articles_count: 6,
-          categories_count: 23,
-        },
-      ],
-    },
-  ],
-};

app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/PortalPopover.stories.js

@@ -1,154 +0,0 @@
-import PortalPopover from '../PortalPopover.vue';
-
-export default {
-  title: 'Components/Help Center/Portal Popover',
-  component: PortalPopover,
-  argTypes: {
-    active: {
-      defaultValue: false,
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { PortalPopover },
-  template:
-    '<PortalPopover v-bind="$props" @click="onClick">{{label}}</PortalPopover>',
-});
-
-export const Primary = Template.bind({});
-
-Primary.args = {
-  portals: [
-    {
-      name: 'Chatwoot Help Center',
-      id: 1,
-      color: null,
-      custom_domain: 'doc',
-      articles_count: 123,
-      header_text: null,
-      homepage_link: null,
-      page_title: null,
-      slug: 'first_portal',
-      archived: false,
-      config: {
-        allowed_locales: [
-          {
-            code: 'en',
-            name: 'English',
-            articles_count: 123,
-          },
-          {
-            code: 'fr',
-            name: 'Français',
-            articles_count: 123,
-          },
-          {
-            code: 'de',
-            name: 'Deutsch',
-            articles_count: 32,
-          },
-          {
-            code: 'es',
-            name: 'Español',
-            articles_count: 12,
-          },
-          {
-            code: 'it',
-            name: 'Italiano',
-            articles_count: 8,
-          },
-        ],
-      },
-      locales: [
-        {
-          name: 'English',
-          code: 'en',
-          articles_count: 12,
-        },
-        {
-          name: 'Español',
-          code: 'es',
-          articles_count: 42,
-        },
-        {
-          name: 'French',
-          code: 'fr',
-          articles_count: 29,
-        },
-        {
-          name: 'Italian',
-          code: 'it',
-          articles_count: 4,
-        },
-        {
-          name: 'German',
-          code: 'de',
-          articles_count: 66,
-        },
-      ],
-    },
-    {
-      name: 'Chatwoot Docs',
-      id: 2,
-      color: null,
-      custom_domain: 'doc',
-      articles_count: 124,
-      header_text: null,
-      homepage_link: null,
-      page_title: null,
-      slug: 'second_portal',
-      archived: false,
-      config: {
-        allowed_locales: [
-          {
-            code: 'en',
-            name: 'English',
-            articles_count: 123,
-          },
-          {
-            code: 'fr',
-            name: 'Français',
-            articles_count: 123,
-          },
-          {
-            code: 'de',
-            name: 'Deutsch',
-            articles_count: 32,
-          },
-          {
-            code: 'es',
-            name: 'Español',
-            articles_count: 12,
-          },
-          {
-            code: 'it',
-            name: 'Italiano',
-            articles_count: 8,
-          },
-        ],
-      },
-      locales: [
-        {
-          name: 'English',
-          code: 'en',
-          articles_count: 12,
-        },
-        {
-          name: 'Japanese',
-          code: 'jp',
-          articles_count: 4,
-        },
-        {
-          name: 'Mandarin',
-          code: 'CH',
-          articles_count: 6,
-        },
-      ],
-    },
-  ],
-};

app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/PortalSwitch.stories.js

@@ -1,58 +0,0 @@
-import PortalSwitch from '../PortalSwitch.vue';
-
-export default {
-  title: 'Components/Help Center/Portal Switch',
-  component: PortalSwitch,
-  argTypes: {
-    active: {
-      defaultValue: false,
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { PortalSwitch },
-  template:
-    '<PortalSwitch v-bind="$props" @click="onClick">{{label}}</PortalSwitch>',
-});
-
-export const Primary = Template.bind({});
-
-Primary.args = {
-  active: false,
-  portal: {
-    name: 'Chatwoot Help Center',
-    articles_count: 124,
-    locales: [
-      {
-        name: 'English',
-        code: 'en',
-        articles_count: 12,
-      },
-      {
-        name: 'Español',
-        code: 'es',
-        articles_count: 42,
-      },
-      {
-        name: 'French',
-        code: 'fr',
-        articles_count: 29,
-      },
-      {
-        name: 'Italian',
-        code: 'it',
-        articles_count: 4,
-      },
-      {
-        name: 'German',
-        code: 'de',
-        articles_count: 66,
-      },
-    ],
-  },
-};

app/javascript/dashboard/routes/dashboard/helpcenter/components/stories/Sidebar.stories.js

@@ -1,134 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import Sidebar from '../Sidebar/Sidebar';
-import Thumbnail from 'dashboard/components/widgets/Thumbnail';
-
-export default {
-  title: 'Components/Help Center/Sidebar',
-  component: { Sidebar, Thumbnail },
-  argTypes: {
-    thumbnailSrc: {
-      defaultValue: '',
-      control: {
-        type: 'text',
-      },
-    },
-    headerTitle: {
-      defaultValue: '',
-      control: {
-        type: 'text',
-      },
-    },
-    subTitle: {
-      defaultValue: '',
-      control: {
-        type: 'text',
-      },
-    },
-    accessibleMenuItems: [],
-    additionalSecondaryMenuItems: [],
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Sidebar },
-  template: '<sidebar v-bind="$props" @input="onSearch"></sidebar>',
-});
-
-export const HelpCenterSidebarView = Template.bind({});
-HelpCenterSidebarView.args = {
-  onSearch: action('search'),
-  thumbnailSrc: '',
-  headerTitle: 'Help Center',
-  subTitle: 'English',
-  accessibleMenuItems: [
-    {
-      icon: 'book',
-      label: 'HELP_CENTER.ALL_ARTICLES',
-      key: 'helpcenter_all',
-      count: 199,
-      toState: 'accounts/1/articles/all',
-      toolTip: 'All Articles',
-      toStateName: 'helpcenter_all',
-    },
-    {
-      icon: 'pen',
-      label: 'HELP_CENTER.MY_ARTICLES',
-      key: 'helpcenter_mine',
-      count: 112,
-      toState: 'accounts/1/articles/mine',
-      toolTip: 'My articles',
-      toStateName: 'helpcenter_mine',
-    },
-    {
-      icon: 'draft',
-      label: 'HELP_CENTER.DRAFT',
-      key: 'helpcenter_draft',
-      count: 32,
-      toState: 'accounts/1/articles/draft',
-      toolTip: 'Draft',
-      toStateName: 'helpcenter_draft',
-    },
-    {
-      icon: 'archive',
-      label: 'HELP_CENTER.ARCHIVED',
-      key: 'helpcenter_archive',
-      count: 10,
-      toState: 'accounts/1/articles/archived',
-      toolTip: 'Archived',
-      toStateName: 'helpcenter_archive',
-    },
-  ],
-  additionalSecondaryMenuItems: [
-    {
-      icon: 'folder',
-      label: 'HELP_CENTER.CATEGORY',
-      hasSubMenu: true,
-      key: 'category',
-      children: [
-        {
-          id: 1,
-          label: 'Getting started',
-          count: 12,
-          truncateLabel: true,
-          toState: 'accounts/1/articles/categories/new',
-        },
-        {
-          id: 2,
-          label: 'Channel',
-          count: 19,
-          truncateLabel: true,
-          toState: 'accounts/1/articles/categories/channel',
-        },
-        {
-          id: 3,
-          label: 'Feature',
-          count: 24,
-          truncateLabel: true,
-          toState: 'accounts/1/articles/categories/feature',
-        },
-        {
-          id: 4,
-          label: 'Advanced',
-          count: 8,
-          truncateLabel: true,
-          toState: 'accounts/1/articles/categories/advanced',
-        },
-        {
-          id: 5,
-          label: 'Mobile app',
-          count: 3,
-          truncateLabel: true,
-          toState: 'accounts/1/articles/categories/mobile-app',
-        },
-        {
-          id: 6,
-          label: 'Others',
-          count: 39,
-          truncateLabel: true,
-          toState: 'accounts/1/articles/categories/others',
-        },
-      ],
-    },
-  ],
-};

app/javascript/dashboard/routes/dashboard/settings/reports/components/ReportMetricCard.stories.js

@@ -1,43 +0,0 @@
-import Vue from 'vue';
-import VTooltip from 'v-tooltip';
-import ReportMetricCard from './ReportMetricCard';
-
-Vue.use(VTooltip, { defaultHtml: false });
-
-export default {
-  title: 'Components/CSAT/Metrics Card',
-  component: ReportMetricCard,
-  argTypes: {
-    label: {
-      defaultValue: '',
-      control: {
-        type: 'text',
-      },
-    },
-    value: {
-      defaultValue: '',
-      control: {
-        type: 'text',
-      },
-    },
-    infoText: {
-      defaultValue: '',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (_, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ReportMetricCard },
-  template: '<report-metric-card v-bind="$props" />',
-});
-
-export const ReportMetricCardTemplate = Template.bind({});
-ReportMetricCardTemplate.args = {
-  infoText: 'No. of responses / No. of survey messages sent * 100',
-  label: 'Satisfaction Score',
-  value: '98.5',
-};

app/javascript/shared/components/CustomerSatisfaction.stories.js

@@ -1,19 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import CustomerSatisfaction from './CustomerSatisfaction';
-
-export default {
-  title: 'Components/CustomerSatisfaction',
-  component: CustomerSatisfaction,
-  argTypes: {},
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { CustomerSatisfaction },
-  template: '<customer-satisfaction />',
-});
-
-export const Item = Template.bind({});
-Item.args = {
-  onClick: action('Selected'),
-};

app/javascript/shared/components/ui/MultiselectDropdown.stories.js

@@ -1,65 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import Dropdown from './MultiselectDropdown';
-
-export default {
-  title: 'Components/Dropdown/Multiselect Dropdown',
-  component: Dropdown,
-  argTypes: {
-    options: {
-      control: {
-        type: 'object',
-      },
-    },
-    selectedItem: {
-      control: {
-        type: 'object',
-      },
-    },
-    multiselectorTitle: {
-      control: {
-        type: 'text',
-      },
-    },
-    multiselectorPlaceholder: {
-      control: {
-        type: 'text',
-      },
-    },
-    noSearchResult: {
-      control: {
-        type: 'text',
-      },
-    },
-    inputPlaceholder: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Dropdown },
-  template: '<dropdown v-bind="$props" @click="onClick"></dropdown>',
-});
-
-export const MultiselectDropdown = Template.bind({});
-MultiselectDropdown.args = {
-  onClick: action('Opened'),
-  options: [
-    {
-      id: 1,
-      availability_status: 'online',
-      name: 'James Philip',
-      thumbnail: 'https://randomuser.me/api/portraits/men/4.jpg',
-    },
-  ],
-
-  selectedItem: {
-    id: 1,
-    availability_status: 'online',
-    name: 'James Philip',
-    thumbnail: 'https://randomuser.me/api/portraits/men/4.jpg',
-  },
-};

app/javascript/shared/components/ui/MultiselectDropdownItems.stories.js

@@ -1,67 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import DropdownItems from './MultiselectDropdownItems';
-
-export default {
-  title: 'Components/Dropdown/Multiselect Dropdown Items',
-  component: DropdownItems,
-  argTypes: {
-    options: {
-      control: {
-        type: 'object',
-      },
-    },
-    selectedItems: {
-      control: {
-        type: 'object',
-      },
-    },
-    inputPlaceholder: {
-      control: {
-        type: 'text',
-      },
-    },
-    noSearchResult: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { DropdownItems },
-  template:
-    '<dropdown-items v-bind="$props" @click="onClick"></dropdown-items>',
-});
-
-export const MultiselectDropdownItems = Template.bind({});
-MultiselectDropdownItems.args = {
-  onClick: action('Added'),
-  options: [
-    {
-      id: '0',
-      name: 'None',
-      thumbnail: '',
-    },
-    {
-      id: '1',
-      name: 'James Philip',
-      availability_status: 'online',
-      role: 'administrator',
-      thumbnail: 'https://randomuser.me/api/portraits/men/4.jpg',
-    },
-    {
-      id: '2',
-      name: 'Support Team',
-      thumbnail: '',
-    },
-    {
-      id: '3',
-      name: 'Agent',
-      thumbnail: '',
-    },
-  ],
-
-  selectedItems: [{ id: '1' }],
-};

app/javascript/shared/components/ui/dropdown/AddLabel.stories.js

@@ -1,19 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import AddLabel from './AddLabel';
-
-export default {
-  title: 'Components/Label/Add Button',
-  component: AddLabel,
-  argTypes: {},
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { AddLabel },
-  template: '<add-label v-bind="$props" @add="onClick"></add-label>',
-});
-
-export const AddButton = Template.bind({});
-AddButton.args = {
-  onClick: action('opened'),
-};

app/javascript/shared/components/ui/label/LabelDropdown.stories.js

@@ -1,58 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import LabelDropdown from './LabelDropdown';
-
-export default {
-  title: 'Components/Label/Dropdown',
-  component: LabelDropdown,
-  argTypes: {
-    conversationId: {
-      control: {
-        type: 'text',
-      },
-    },
-    accountLabels: {
-      defaultValue: [
-        {
-          color: '#555',
-          description: '',
-          id: 1,
-          title: 'sales',
-        },
-        {
-          color: '#c242f5',
-          description: '',
-          id: 1,
-          title: 'business',
-        },
-        {
-          color: '#4287f5',
-          description: '',
-          id: 1,
-          title: 'testing',
-        },
-      ],
-      control: {
-        type: 'object',
-      },
-    },
-    selectedLabels: {
-      defaultValue: 'sales, testing',
-      control: {
-        type: 'object',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { LabelDropdown },
-  template:
-    '<label-dropdown v-bind="$props" @add="onAdd" @remove="onRemove"></label-dropdown>',
-});
-
-export const Dropdown = Template.bind({});
-Dropdown.args = {
-  onAdd: action('added'),
-  onRemove: action('removed'),
-};

app/javascript/shared/components/ui/label/LabelDropdownItem.stories.js

@@ -1,39 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import LabelDropdownItem from './LabelDropdownItem';
-
-export default {
-  title: 'Components/Label/Item',
-  component: LabelDropdownItem,
-  argTypes: {
-    title: {
-      defaultValue: 'sales',
-      control: {
-        type: 'text',
-      },
-    },
-    color: {
-      defaultValue: '#555',
-      control: {
-        type: 'text',
-      },
-    },
-    selected: {
-      defaultValue: true,
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { LabelDropdownItem },
-  template:
-    '<label-dropdown-item v-bind="$props" @click="onClick"></label-dropdown-item>',
-});
-
-export const Item = Template.bind({});
-Item.args = {
-  onClick: action('Selected'),
-};

app/javascript/widget/components/Form/Input.stories.js

@@ -1,50 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import wootInput from './Input';
-
-export default {
-  title: 'Components/Form/Input',
-  component: wootInput,
-  argTypes: {
-    label: {
-      defaultValue: 'Email Address',
-      control: {
-        type: 'text',
-      },
-    },
-    type: {
-      defaultValue: 'email',
-      control: {
-        type: 'text',
-      },
-    },
-    placeholder: {
-      defaultValue: 'Please enter your email address',
-      control: {
-        type: 'text',
-      },
-    },
-    value: {
-      defaultValue: 'John12@ync.in',
-      control: {
-        type: 'text ,number',
-      },
-    },
-    error: {
-      defaultValue: '',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { wootInput },
-  template: '<woot-input v-bind="$props" @input="onClick"></woot-input>',
-});
-
-export const Input = Template.bind({});
-Input.args = {
-  onClick: action('Added'),
-};

app/javascript/widget/components/Form/TextArea.stories.js

@@ -1,51 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import wootTextArea from './TextArea';
-
-export default {
-  title: 'Components/Form/Text Area',
-  component: wootTextArea,
-  argTypes: {
-    label: {
-      defaultValue: 'Message',
-      control: {
-        type: 'text',
-      },
-    },
-    type: {
-      defaultValue: '',
-      control: {
-        type: 'text',
-      },
-    },
-    placeholder: {
-      defaultValue: 'Please enter your message',
-      control: {
-        type: 'text',
-      },
-    },
-    value: {
-      defaultValue: 'Lorem ipsum is a placeholder text commonly used',
-      control: {
-        type: 'text ,number',
-      },
-    },
-    error: {
-      defaultValue: '',
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { wootTextArea },
-  template:
-    '<woot-text-area v-bind="$props" @input="onClick"></woot-text-area>',
-});
-
-export const TextArea = Template.bind({});
-TextArea.args = {
-  onClick: action('Added'),
-};

app/javascript/widget/components/stories/ArticleHero.stories.js

@@ -1,30 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import ArticleHero from '../ArticleHero.vue'; // adjust this path to match your file's location
-
-export default {
-  title: 'Components/Widgets/ArticleHero',
-  component: ArticleHero,
-  argTypes: {
-    articles: { control: 'array', description: 'Array of articles' },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { ArticleHero },
-  template:
-    '<article-hero v-bind="$props" @view-all-articles="viewAllArticles" />',
-  methods: {
-    viewAllArticles: action('view-all-articles'),
-  },
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  articles: [
-    { title: 'Article 1', content: 'This is article 1.' },
-    { title: 'Article 2', content: 'This is article 2.' },
-    { title: 'Article 3', content: 'This is article 3.' },
-    { title: 'Article 4', content: 'This is article 4.' },
-  ],
-};

package.json

@@ -12,8 +12,6 @@
     "start:dev": "foreman start -f ./Procfile.dev",
     "start:test": "RAILS_ENV=test foreman start -f ./Procfile.test",
     "start:dev-overmind": "overmind start -f ./Procfile.dev",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
     "ruby:prettier": "bundle exec rubocop -a",
     "prepare": "husky install",
     "size": "size-limit"
@@ -109,13 +107,6 @@
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/preset-env": "7.13.15",
     "@size-limit/file": "^8.2.4",
-    "@storybook/addon-actions": "6.5.9",
-    "@storybook/addon-docs": "^6.5.9",
-    "@storybook/addon-essentials": "6.5.9",
-    "@storybook/addon-links": "6.5.9",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addons": "6.5.9",
-    "@storybook/vue": "6.5.9",
     "@vitejs/plugin-vue2": "^2.3.1",
     "@vitest/coverage-v8": "^2.0.1",
     "@vue/test-utils": "^1.3.6",
@@ -134,7 +125,6 @@
     "eslint-plugin-import": "2.28.1",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-prettier": "5.0.0",
-    "eslint-plugin-storybook": "^0.6.14",
     "eslint-plugin-vue": "^9.27.0",
     "fake-indexeddb": "^6.0.0",
     "husky": "^7.0.0",

stories/Sections/Button.stories.mdx

@@ -1,185 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-
-import WootButton from '../../app/javascript/dashboard/components/ui/WootButton.vue';
-
-<Meta title="Styleguide/Buttons" />
-
-# Buttons
-
-Buttons can be used by `woot-button` component in `vue`. You can play with all the props here 👉 [woot-button](/story/components-button--primary). The button component is made on top of [foundation button](https://get.foundation/sites/docs/button.html)
-so the style of button can be used outside of vue with `button` class.
-
-Other than declred props the `woot-button` can be customised by providing custom classnames through `class-names` prop.
-
-<Story name="default">
-  {{
-    template: `<woot-button size="" title="Press me">Default</woot-button>`,
-  }}
-</Story>
-
-- While naming button labels make sure to describe the action with some context.
-- For HTML forms use `<woot-button type="submit">` instead of `<input type="submit" />`
-- Provide title or tooltip if possible.
-
-## Button sizes
-
-Size of the buttons can be set with `size` to `woot-button`. By default medium is the default size of a button. Other sizes are `tiny, small, medium, large`.
-
-<Canvas>
-  <Story name="sizes">
-    {{
-      template: `<div class="row">
-          <div class="margin-horizontal-2">
-              <woot-button size="tiny">Tiny</woot-button> 
-          </div>
-          <div class="margin-horizontal-2">
-              <woot-button size="small">Small</woot-button> 
-          </div>
-          <div class="margin-horizontal-2">
-              <woot-button size="">Default</woot-button> 
-          </div>
-          <div class="margin-horizontal-2">
-              <woot-button size="large">Large</woot-button> 
-          </div>
-        </div>`,
-    }}
-  </Story>
-</Canvas>
-
-Buttons can expanded to full width by setting the `is-expanded` prop. For with by screen size or to make it responsive try with the classnames on
-[Responsive Expanded buttons](https://get.foundation/sites/docs/button.html#responsive-expanded-buttons) with foundation.
-
-<Canvas>
-  <Story name="expanded">
-    {{
-      template: `<div class="row">
-          <div class="columns">
-              <woot-button size="large" is-expanded title="Micheal Scott said the rest">This is buttons is very long</woot-button> 
-          </div>
-        </div>`,
-    }}
-  </Story>
-</Canvas>
-
-## Button colors
-
-Chatwoot comes with predefined set of colors for buttons. The color of the button can be set with `color-scheme` to `woot-button`.
-Default color scheme is `primary`, other color-schemes are `secondary, success, alert, warning`.
-
-<Canvas>
-  <Story name="colors">
-    {{
-      template: `<div class="row">
-          <div class="margin-horizontal-2">
-              <woot-button >Primary</woot-button> 
-          </div>
-          <div class="margin-horizontal-2">
-              <woot-button color-scheme="secondary">Secondary</woot-button> 
-          </div>
-          <div class="margin-horizontal-2">
-              <woot-button color-scheme="success">Success</woot-button> 
-          </div>
-          <div class="margin-horizontal-2">
-              <woot-button color-scheme="alert">Alert</woot-button> 
-          </div>
-          <div class="margin-horizontal-2">
-              <woot-button color-scheme="warning">Warning</woot-button> 
-          </div>
-        </div>`,
-    }}
-  </Story>
-</Canvas>
-
-## Button style variations
-
-There are diffrent styles that comes with chatwoot buttons. This can set with `variants` prop for `woot-button`. By deault the filled will be the style, other variations are `smooth, hollow, clear, link`
-
-- Primary form actions like Save details, Create campaign etc should use default style.
-- The Cancel action has to use the smooth style.
-
-<Canvas>
-  <Story name="variants">
-    {{
-      template: `<div class="row">
-          <div class="margin-horizontal-2">
-              <woot-button >Default</woot-button> 
-          </div>
-          <div class="margin-horizontal-2">
-              <woot-button variant="smooth" color-scheme="alert">Smooth</woot-button> 
-          </div>
-          <div class="margin-horizontal-2">
-              <woot-button color-scheme="secondary" variant="hollow">Hollow</woot-button> 
-          </div>
-          <div class="margin-horizontal-2">
-              <woot-button color-scheme="success" variant="clear">Success</woot-button> 
-          </div>
-          <div class="margin-horizontal-2">
-              <woot-button color-scheme="alert" variant="link">Link</woot-button> 
-          </div>
-        </div>`,
-    }}
-  </Story>
-</Canvas>
-
-## Button states
-
-The button can be disbaled with `is-disabled` which accepts a boolean value. The button can set to a loading state with `is-loading` which accepts a boolean value.
-
-These are states other than the default interaction states like hover, active, focused.
-
-<Canvas>
-  <Story name="states">
-    {{
-      template: `<div class="row">
-          <div class="margin-horizontal-2">
-              <woot-button color-scheme="alert" is-disabled>disabled :/</woot-button> 
-          </div>
-          <div class="margin-horizontal-2">
-              <woot-button variant="smooth" color-scheme="primary" is-loading>Loading...</woot-button> 
-          </div>
-        </div>`,
-    }}
-  </Story>
-</Canvas>
-
-## Button with icon and text
-
-Chatwoot currently use [IonIcons version 2](https://ionic.io/ionicons/v2) which are font-icons. The button position is fixed on the left.
-The prop `icon` can be used to pass the **ion icon classname** to render the icon.
-
-<Canvas>
-  <Story name="icons">
-    {{
-      template: `<div class="row">
-          <div class="margin-horizontal-2">
-              <woot-button color-scheme="alert" icon="ion-stop">Stop</woot-button> 
-          </div>
-          <div class="margin-horizontal-2">
-              <woot-button icon="ion-person" variant="hollow">Hollow man</woot-button>
-          </div>
-        </div>`,
-    }}
-  </Story>
-</Canvas>
-
-#### Buttons with only icon
-
-The `woot-button` can be used as an icon only button by keeping the button text empty.
-
-<Canvas>
-  <Story name="icononly">
-    {{
-      template: `<div class="row">
-          <div class="margin-horizontal-2">
-              <woot-button color-scheme="success" icon="ion-plus" size="tiny"></woot-button> 
-          </div>
-          <div class="margin-horizontal-2">
-              <woot-button color-scheme="secondary" icon="ion-plus" size="small" variant="smooth"></woot-button>
-          </div>
-          <div class="margin-horizontal-2">
-              <woot-button icon="ion-plus" variant="hollow"></woot-button>
-          </div>
-        </div>`,
-    }}
-  </Story>
-</Canvas>

stories/Sections/Introduction.stories.mdx

@@ -1,19 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Chatwoot/Introduction" />
-
-# Welcome to Chatwoot styleguide
-
-Chatwoot as an opensource project is growing every day. New features are getting added in every release. The number of contributors who are actively contributing to the project is also increasing. It has become a necessity to create a standard guideline to make the contribution experience easier. This style guide resides as a central repository for the best practices we follow, a set of recommended approaches and the design guidelines/components we use.
-
-Anyone willing to contribute to Chatwoot is encouraged to read this style guide. This style guide is also open source. If you feel that there are rooms for improvement, feel free to raise an issue or a pull request to the repository.
-
-Through this style guide we intent to create a document which can be used across the repositories in the organization and build a design system for the project.
-
-The document would split into 3 major sections
-
-- **Design**: This section would contain the design choices and the documentation for the components built using these design choices.
-
-- **Frontend**: Our frontend is built on [Vue.js](https://vuejs.org/). We follow [Airbnb guidelines for Javascript](https://github.com/airbnb/javascript) and there are a couple of choices we made in structuring the code. All those would be defined in this section.
-
-- **Backend**: Our backend is written on [Ruby on Rails](https://rubyonrails.org/). This section would cover the architectural patterns we have been following so far.

stories/Sections/Layout.stories.mdx

@@ -1,23 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Chatwoot/Layout" />
-
-# Layout guidelines
-
-Chatwoot follows a fixed-width sidebar on the left menu on all pages. The remaining space of the layout is where the layout changes according to what the page needs.
-
-### Normal Grid
-
-Chatwoot is built on top of [foundation](https://get.foundation/sites/docs/) and uses the **flex-grid** from Foundation. We insist to solve every possible layout with this grid.
-The docs for the grid can be found here on [foundation grid docs](https://get.foundation/sites/docs/grid.html).
-
-### 3 column layout
-
-We Recommend the use of this solution only when the normal grid fails to solve it or needs severe overriding. Some layouts need custom functionality where Foundation grid is not enough. The main conversation page is an example of this grid as a candidate.
-
-**Usage** - We have created a mixin `three-column-grid` which can be included by importing the file
-
-`@import '~dashboard/assets/scss/mixins';`
-
-There are 2 parameters for this mixin, The first one being the minimum possible width for the first column in `rem`. This value is usually a multiple of `8` when converted to `px`. Eg: `256px` will be used as `25.6rem`.
-Similarly, the second param is the minimum possible width of the third column.