import React, { useEffect, useReducer, useRef } from 'react';
import { storiesOf } from '@storybook/react';
import styled from 'styled-components';
import { MaskText } from '.';

const css = styled.div;

const Style = css`
   background: white !important;
`;

storiesOf('Components/MaskText', module)
   .add('RG', () => (
      <Style>
         <MaskText value="365882021" mask="RG" />
      </Style>
   ))
   .add('CPF', () => (
      <Style>
         <MaskText value="11281519114" mask="CPF" />
      </Style>
   ))
   .add('Numero', () => (
      <Style>
         <MaskText value="11a28151911d- 412" mask="number" />
      </Style>
   ))
   .add('CEP', () => (
      <Style>
         <MaskText value="01717115" mask="CEP" />
      </Style>
   ))
   .add('CNPJ', () => (
      <Style>
         <MaskText value="26576255000191" mask="CNPJ" />
      </Style>
   ))
   .add('NoSpace', () => (
      <Style>
         <MaskText value="265 76 25 50 00191" mask="no-spaces" />
      </Style>
   ))
   .add('Phone', () => (
      <Style>
         <MaskText value="11913617518" mask="phone" />
      </Style>
   ));
