added storybook files to alert and breadcrumbs component (#15156)

* added storyblok files to alert and breadcrumbs component

* formatted the files

* added confusable, i18n, export, hextToDecimal stories

* replaced alert class component to functional component

* removed i18n story files

* added storyblok files to alert and breadcrumbs component

* formatted the files

* added confusable, i18n, export, hextToDecimal stories

* replaced alert class component to functional component

* removed i18n story files

* added README files to storybook elements and fixed lint issues

* added readme files

* updated README file for confusable

* fixed linting errors in test

* removed unwanted tests

ui/components/ui/alert/README.mdx

@@ -0,0 +1,15 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import Alert from '.';
+
+# Alert
+
+Alert element used to notify the user about some information or warning.
+
+<Canvas>
+  <Story id="ui-components-ui-alert-alert-stories-js--default-alert" />
+</Canvas>
+
+## Component API
+
+<ArgsTable of={Alert} />

ui/components/ui/alert/alert.stories.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import README from './README.mdx';
+import Alert from '.';
+
+export default {
+  title: 'Components/UI/Alert',
+  id: __filename,
+  component: Alert,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argsTypes: {
+    visible: {
+      control: 'boolean',
+    },
+    msg: {
+      control: 'text',
+    },
+  },
+};
+
+export const DefaultAlert = (args) => {
+  return <Alert {...args} />;
+};
+
+DefaultAlert.storyName = 'Default';
+DefaultAlert.args = {
+  visible: true,
+  msg: 'Alert',
+};

ui/components/ui/alert/index.js

@@ -1,56 +1,49 @@
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { useState, useEffect } from 'react';
+import { usePrevious } from '../../../hooks/usePrevious';
 import { MILLISECOND } from '../../../../shared/constants/time';
 
-class Alert extends Component {
+function Alert(props) {
-  state = {
+  const [visible, setVisible] = useState(false);
-    visible: false,
+  const [className, setClassName] = useState('');
-    msg: false,
+  const lastVisible = usePrevious(props.visible);
-    className: '',
-  };
 
-  UNSAFE_componentWillReceiveProps(nextProps) {
+  useEffect(() => {
-    if (!this.props.visible && nextProps.visible) {
+    const animateIn = () => {
-      this.animateIn(nextProps.msg);
+      setClassName('visible');
-    } else if (this.props.visible && !nextProps.visible) {
+      setVisible(true);
-      this.animateOut();
+    };
+
+    const animateOut = () => {
+      setClassName('hidden');
+
+      setTimeout((_) => {
+        setVisible(false);
+      }, MILLISECOND * 500);
+    };
+
+    if (!lastVisible && props.visible) {
+      animateIn(props.msg);
+    } else if (lastVisible && !props.visible) {
+      animateOut();
     }
-  }
+  }, [lastVisible, props.msg, props.visible]);
 
-  animateIn(msg) {
+  if (!visible) {
-    this.setState({
-      msg,
-      visible: true,
-      className: 'visible',
-    });
-  }
-
-  animateOut() {
-    this.setState({
-      msg: null,
-      className: 'hidden',
-    });
-
-    setTimeout((_) => {
-      this.setState({ visible: false });
-    }, MILLISECOND * 500);
-  }
-
-  render() {
-    if (this.state.visible) {
-      return (
-        <div className={classnames('global-alert', this.state.className)}>
-          <a className="msg">{this.state.msg}</a>
-        </div>
-      );
-    }
     return null;
   }
+
+  return (
+    <div className={classnames('global-alert', className)}>
+      <a className="msg">{props.msg}</a>
+    </div>
+  );
 }
 
 Alert.propTypes = {
   visible: PropTypes.bool.isRequired,
-  msg: PropTypes.string /* eslint-disable-line react/no-unused-prop-types */,
+  msg: PropTypes.string,
 };
+
 export default Alert;

ui/components/ui/alert/index.test.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import sinon from 'sinon';
 import { shallow } from 'enzyme';
 import Alert from '.';
 
@@ -14,27 +13,4 @@ describe('Alert', () => {
     const alert = wrapper.find('.global-alert');
     expect(alert).toHaveLength(0);
   });
-
-  it('renders when visible in state is true, and message', () => {
-    const errorMessage = 'Error Message';
-
-    wrapper.setState({ visible: true, msg: errorMessage });
-
-    const alert = wrapper.find('.global-alert');
-    expect(alert).toHaveLength(1);
-
-    const errorText = wrapper.find('.msg');
-    expect(errorText.text()).toStrictEqual(errorMessage);
-  });
-
-  it('calls component method when componentWillReceiveProps is called', () => {
-    const animateInSpy = sinon.stub(wrapper.instance(), 'animateIn');
-    const animateOutSpy = sinon.stub(wrapper.instance(), 'animateOut');
-
-    wrapper.setProps({ visible: true });
-    expect(animateInSpy.calledOnce).toStrictEqual(true);
-
-    wrapper.setProps({ visible: false });
-    expect(animateOutSpy.calledOnce).toStrictEqual(true);
-  });
 });

ui/components/ui/breadcrumbs/README.mdx

@@ -0,0 +1,16 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import Breadcrumbs from './breadcrumbs.component';
+
+
+# Breadcrumbs
+
+Breadcrumbs element is used to represent the current index out of total.
+
+<Canvas>
+  <Story id="ui-components-ui-breadcrumbs-breadcrumbs-stories-js--default-breadcrumbs" />
+</Canvas>
+
+## Component API
+
+<ArgsTable of={Breadcrumbs} />

ui/components/ui/breadcrumbs/breadcrumbs.stories.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import README from './README.mdx';
+import Breadcrumbs from './breadcrumbs.component';
+
+export default {
+  title: 'Components/UI/Breadcrumbs ',
+  id: __filename,
+  component: Breadcrumbs,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argsTypes: {
+    currentIndex: {
+      control: 'number',
+    },
+    total: {
+      control: 'number',
+    },
+    className: { control: 'text' },
+  },
+};
+
+export const DefaultBreadcrumbs = (args) => {
+  return <Breadcrumbs {...args} />;
+};
+
+DefaultBreadcrumbs.storyName = 'Default';
+DefaultBreadcrumbs.args = {
+  currentIndex: 1,
+  total: 3,
+};

ui/components/ui/confusable/README.mdx

@@ -0,0 +1,25 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import Confusable from './confusable.component';
+
+# Confusable
+
+Confusable allows to filter out any characters that look very similar to English language characters.
+
+<Canvas>
+  <Story id="ui-components-ui-confusable-confusable-stories-js--default-confusable" />
+</Canvas>
+
+## Component API
+
+| Name  | Description | Default |
+| ----- | ----------- | ------- |
+| input | string      | -       |
+
+## NonConfusable
+
+Not to detect emojis
+
+<Canvas>
+  <Story id="ui-components-ui-confusable-confusable-stories-js--non-confusable" />
+</Canvas>

ui/components/ui/confusable/confusable.stories.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import README from './README.mdx';
+import Confusable from './confusable.component';
+
+export default {
+  title: 'Components/UI/Confusable',
+  id: __filename,
+  component: Confusable,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argsTypes: {
+    input: {
+      control: 'text',
+    },
+  },
+};
+
+export const DefaultConfusable = (args) => {
+  return <Confusable {...args} />;
+};
+
+export const NonConfusable = (args) => {
+  return <Confusable {...args} />;
+};
+
+DefaultConfusable.storyName = 'Default';
+DefaultConfusable.args = {
+  input: 'vita‍lik.eth',
+};
+
+NonConfusable.storyName = 'NonConfusable';
+NonConfusable.args = {
+  input: '👻.eth',
+};

ui/components/ui/dialog/README.mdx

@@ -0,0 +1,15 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import Dialog from '.';
+
+# Dialog
+
+Dialog element is to create popup dialogs
+
+<Canvas>
+  <Story id="ui-components-ui-dialog-dialog-stories-js--default-dialog" />
+</Canvas>
+
+## Component API
+
+<ArgsTable of={Dialog} />

ui/components/ui/dialog/dialog.stories.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import README from './README.mdx';
+import Dialog from '.';
+
+export default {
+  title: 'Components/UI/Dialog',
+  id: __filename,
+  component: Dialog,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argsTypes: {
+    children: {
+      control: 'text',
+    },
+    type: { control: 'text' },
+  },
+};
+
+export const DefaultDialog = (args) => {
+  return <Dialog {...args} />;
+};
+
+DefaultDialog.storyName = 'Default';
+DefaultDialog.args = {
+  type: 'error',
+  children: 'Dialog Box',
+};

ui/components/ui/export-text-container/README.mdx

@@ -0,0 +1,15 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import ExportTextContainer from '.';
+
+# ExportTextContainer
+
+The ExportTextContainer component enables to copy the input text or save it as a CSV File
+
+<Canvas>
+  <Story id="ui-components-ui-export-text-container-export-text-stories-js--default-export-text-container" />
+</Canvas>
+
+## Component API
+
+<ArgsTable of={ExportTextContainer} />

ui/components/ui/export-text-container/export-text.stories.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import README from './README.mdx';
+import ExportTextContainer from '.';
+
+export default {
+  title: 'Components/UI/ExportTextContainer',
+  id: __filename,
+  component: ExportTextContainer,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argsTypes: {
+    text: {
+      control: 'text',
+    },
+  },
+};
+
+export const DefaultExportTextContainer = (args) => {
+  return <ExportTextContainer {...args} />;
+};
+
+DefaultExportTextContainer.storyName = 'Default';
+
+DefaultExportTextContainer.args = {
+  text: ' Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+};

ui/components/ui/hex-to-decimal/README.mdx

@@ -0,0 +1,15 @@
+import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+
+import HexToDecimal from './hex-to-decimal.component';
+
+# HexToDecimal
+
+The HexToDecimal component renders hex as a decimal
+
+<Canvas>
+  <Story id="ui-components-ui-hex-to-decimal-hex-to-decimal-stories-js--default-hex-to-decimal" />
+</Canvas>
+
+## Component API
+
+<ArgsTable of={HexToDecimal} />

ui/components/ui/hex-to-decimal/hex-to-decimal.stories.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import README from './README.mdx';
+import HexToDecimal from './hex-to-decimal.component';
+
+export default {
+  title: 'Components/UI/HexToDecimal',
+  id: __filename,
+  component: HexToDecimal,
+  parameters: {
+    docs: {
+      page: README,
+    },
+  },
+  argsTypes: {
+    text: {
+      control: 'text',
+    },
+    className: {
+      value: 'text',
+    },
+  },
+};
+
+export const DefaultHexToDecimal = (args) => {
+  return <HexToDecimal {...args} />;
+};
+
+DefaultHexToDecimal.storyName = 'Default';
+
+DefaultHexToDecimal.args = {
+  value: '0x3039',
+};