@mw-kit/mw-ui 0.3.4 → 1.0.3

package/src/stories/components/MwCard/argTypes.ts

@@ -0,0 +1,27 @@
+import { CardProps } from '../../../components/Card/interfaces'
+
+import { ArgTypes } from '../../interfaces'
+
+const argTypes: ArgTypes<CardProps> = {
+  size: {
+    defaultValue: 'small',
+    description: 'Specifies the size of the card.',
+    table: {
+      defaultValue: { summary: 'small' },
+    },
+    control: 'select',
+  },
+  borderType: {
+    defaultValue: 'info',
+    description: 'Specifies the border color',
+    table: {
+      defaultValue: { summary: 'info' },
+    },
+    control: 'select',
+  },
+  children: {
+    description: 'React children to fill the card',
+  },
+}
+
+export default argTypes

package/src/stories/components/MwIcon/MwIcon.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { MwIcon as MwIconComponent } from '../../..'
+import argTypes from './argTypes'
+
+const Story: ComponentMeta<typeof MwIconComponent> = {
+  id: 'MwIcon',
+  title: 'Components/MwIcon',
+  component: MwIconComponent,
+  argTypes: argTypes,
+}
+
+export const MwIcon: ComponentStory<typeof MwIconComponent> = (args) => (
+  <MwIconComponent {...args} />
+)
+
+MwIcon.storyName = 'MwIcon'
+
+export default Story

package/src/stories/components/MwIcon/argTypes.ts

@@ -0,0 +1,48 @@
+import { IconProps } from '../../../components/Icon/interfaces'
+import { ArgTypes } from '../../interfaces'
+
+const argTypes: ArgTypes<IconProps> = {
+  type: {
+    defaultValue: 'feather',
+    description: 'Icon type.',
+    table: {
+      type: {
+        summary: 'TypeOptions',
+        detail: ['semantic', 'feather', 'svg'].join('\n'),
+      },
+    },
+    control: 'select',
+  },
+  icon: {
+    defaultValue: 'activity',
+    description: 'Specifies the icon.',
+    table: {},
+    control: 'text',
+  },
+  color: {
+    defaultValue: 'green',
+    description: 'Specifies the icon color.',
+    table: {
+      defaultValue: { summary: '"black"' },
+    },
+    control: 'text',
+  },
+  width: {
+    defaultValue: '24px',
+    description: 'Specifies the icon width.',
+    table: {
+      defaultValue: { summary: '"24px"' },
+    },
+    control: 'text',
+  },
+  height: {
+    defaultValue: '24px',
+    description: 'Specifies the icon height.',
+    table: {
+      defaultValue: { summary: '"auto"' },
+    },
+    control: 'text',
+  },
+}
+
+export default argTypes

package/src/stories/components/MwIndicator/MwIndicator.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { MwIndicator as MwIndicatorComponent } from '../../../'
+import argTypes from './argTypes'
+
+const Story: ComponentMeta<typeof MwIndicatorComponent> = {
+  id: 'MwIndicator',
+  title: 'Components/MwIndicator',
+  component: MwIndicatorComponent,
+  argTypes: argTypes,
+}
+
+export const MwIndicator: ComponentStory<typeof MwIndicatorComponent> = (
+  args,
+) => <MwIndicatorComponent {...args} />
+
+MwIndicator.storyName = 'MwIndicator'
+
+export default Story

package/src/stories/components/MwIndicator/argTypes.ts

@@ -0,0 +1,38 @@
+import { IndicatorProps } from '../../../components/Indicator/interfaces'
+
+import { ArgTypes } from '../../interfaces'
+
+const argTypes: ArgTypes<IndicatorProps> = {
+  size: {
+    defaultValue: 'small',
+    description: 'Define size of the bullet',
+    table: {
+      defaultValue: { summary: 'small' },
+    },
+    control: 'select',
+  },
+  type: {
+    defaultValue: 'default',
+    description: 'Defines the type of the bullet ',
+    table: {
+      defaultValue: { summary: 'default' },
+    },
+    control: 'select',
+  },
+  description: {
+    defaultValue: 'Label',
+    description: 'Text that will be next to the indicator',
+    table: {
+      defaultValue: { summary: '' },
+    },
+  },
+  labelColor: {
+    defaultValue: '#000',
+    description: 'Define the label color',
+    table: {
+      defaultValue: { summary: '' },
+    },
+  },
+}
+
+export default argTypes

package/src/stories/components/MwLoader/MwLoader.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { MwLoader as MwLoaderComponent } from '../../..'
+import argTypes from './argTypes'
+
+const Story: ComponentMeta<typeof MwLoaderComponent> = {
+  id: 'MwLoader',
+  title: 'Components/MwLoader',
+  component: MwLoaderComponent,
+  argTypes: argTypes,
+}
+
+export const MwLoader: ComponentStory<typeof MwLoaderComponent> = (args) => (
+  <MwLoaderComponent {...args} />
+)
+
+MwLoader.storyName = 'MwLoader'
+
+export default Story

package/src/stories/components/MwLoader/argTypes.ts

@@ -0,0 +1,33 @@
+import { LoaderProps } from '../../../components/Loader/interfaces'
+import { ArgTypes } from '../../interfaces'
+
+const argTypes: ArgTypes<LoaderProps> = {
+  color: {
+    defaultValue: 'blue',
+    description: 'Specifies the icon color.',
+    table: {
+      defaultValue: { summary: '"white"' },
+    },
+    control: 'text',
+  },
+  bgColor: {
+    defaultValue: 'blue',
+    description: 'Specifies the icon color.',
+    table: {
+      defaultValue: { summary: '"white"' },
+    },
+    control: 'text',
+  },
+  size: {
+    defaultValue: '43px',
+    description: 'Specifies the icon width.',
+    control: 'text',
+  },
+  borderSize: {
+    defaultValue: '2px',
+    description: 'Specifies the icon width.',
+    control: 'text',
+  },
+}
+
+export default argTypes

package/src/stories/components/MwModal/MwModal.stories.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { MwModal as MwModalComponent, MwButton } from '../../../components'
+import argTypes from './argTypes'
+
+const Story: ComponentMeta<typeof MwModalComponent> = {
+  id: 'MwModal',
+  title: 'Components/MwModal',
+  component: MwModalComponent,
+  argTypes: argTypes,
+}
+
+export const Default: ComponentStory<typeof MwModalComponent> = (args) => {
+  const [open, setOpen] = useState<boolean>(false)
+
+  return (
+    <React.Fragment>
+      <MwButton content='Open modal' onClick={() => setOpen(true)} />
+
+      <MwModalComponent {...args} openState={[open, setOpen]} />
+    </React.Fragment>
+  )
+}
+
+export const Audit: ComponentStory<typeof MwModalComponent.Audit> = (args) => {
+  const [open, setOpen] = useState<boolean>(false)
+
+  return (
+    <React.Fragment>
+      <MwButton content='Open modal' onClick={() => setOpen(true)} />
+
+      <MwModalComponent.Audit
+        {...args}
+        openState={[open, setOpen]}
+        cancelAction={() => alert('Cancelar')}
+        confirmAction={() => alert('Confirmado')}
+      />
+    </React.Fragment>
+  )
+}
+
+export const ConfirmDelete: ComponentStory<
+  typeof MwModalComponent.ConfirmDelete
+> = (args) => {
+  const [open, setOpen] = useState<boolean>(false)
+
+  return (
+    <React.Fragment>
+      <MwButton content='Open modal' onClick={() => setOpen(true)} />
+
+      <MwModalComponent.ConfirmDelete
+        {...args}
+        openState={[open, setOpen]}
+        cancelAction={() => alert('Cancelar')}
+        confirmAction={() => alert('Confirmado')}
+      />
+    </React.Fragment>
+  )
+}
+
+export const ConfirmEdit: ComponentStory<
+  typeof MwModalComponent.ConfirmEdit
+> = (args) => {
+  const [open, setOpen] = useState<boolean>(false)
+
+  return (
+    <React.Fragment>
+      <MwButton content='Open modal' onClick={() => setOpen(true)} />
+
+      <MwModalComponent.ConfirmEdit
+        {...args}
+        openState={[open, setOpen]}
+        homeAction={() => alert('Go Home')}
+        cancelAction={() => alert('Cancelar')}
+        confirmAction={() => alert('Confirmado')}
+      />
+    </React.Fragment>
+  )
+}
+
+export default Story

package/src/stories/components/MwModal/argTypes.ts

@@ -0,0 +1,71 @@
+import { ModalProps } from '../../../components/Modal/interfaces'
+import { colors } from '../../../theme/constants'
+
+import { ArgTypes } from '../../interfaces'
+
+const argTypes: ArgTypes<ModalProps> = {
+  size: {
+    defaultValue: 'small',
+    description: 'Specifies the modal size.',
+    table: {
+      defaultValue: { summary: '"small"' },
+    },
+    control: 'select',
+  },
+  color: {
+    defaultValue: 'blue',
+    description: 'Define the color of header and default confirm button.',
+    table: {
+      type: {
+        summary: 'ColorOptions',
+        detail: Object.keys(colors)
+          .map((e) => `"${e}"`)
+          .join('\n'),
+      },
+      defaultValue: { summary: '"blue"' },
+    },
+    control: 'select',
+  },
+  title: {
+    defaultValue: 'Modal',
+    description: 'Title on header of modal.',
+    table: {
+      defaultValue: { summary: '"Modal"' },
+    },
+    control: 'string',
+  },
+  inverted: {
+    defaultValue: false,
+    description: 'Define if header of modal is inverted.',
+    table: {
+      defaultValue: { summary: 'false' },
+    },
+  },
+  loading: {
+    defaultValue: false,
+    description: 'Define if the button is loading.',
+    table: {
+      defaultValue: { summary: 'false' },
+    },
+  },
+  closeOnClickOutside: {
+    defaultValue: false,
+    description: 'Close modal if click outside of container.',
+    table: {
+      defaultValue: { summary: 'false' },
+    },
+  },
+  closeOnEsc: {
+    defaultValue: false,
+    description: 'Close modal if type ESC key.',
+    table: {
+      defaultValue: { summary: 'false' },
+    },
+  },
+  footer: { control: false },
+  content: { control: false },
+  children: { control: false },
+  openState: { control: false },
+}
+
+export default argTypes

package/src/stories/components/MwPlaceholder/Template1/MwTemplate1.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { MwPlaceholder as MwPlaceholderComponent } from '../../../..'
+import Template1 from '../../../../components/Placeholder/components/Template1'
+
+import argTypes from './argTypes'
+
+const Story: ComponentMeta<typeof MwPlaceholderComponent> = {
+  id: 'MwTemplate1',
+  title: 'Components/Placeholder/type="template1"',
+  component: Template1,
+  argTypes: argTypes,
+}
+
+export const MwPlaceholder: ComponentStory<typeof MwPlaceholderComponent> = (
+  args,
+) => {
+  return <MwPlaceholderComponent {...args} />
+}
+
+MwPlaceholder.storyName = 'type="template1"'
+
+export default Story

package/src/stories/components/MwPlaceholder/Template1/argTypes.ts

@@ -0,0 +1,22 @@
+import { PlaceholderProps } from '../../../../components/Placeholder/interfaces'
+
+import { ArgTypes } from '../../../interfaces'
+
+const argTypes: ArgTypes<PlaceholderProps> = {
+  type: {
+    defaultValue: 'template1',
+    description: 'template type.',
+    table: {
+      defaultValue: { summary: 'template1' },
+    },
+  },
+  loading: {
+    defaultValue: true,
+    description: 'Verify is loading is running',
+    table: {
+      defaultValue: { summary: 'true' },
+    },
+  },
+}
+
+export default argTypes

package/src/stories/components/MwPlaceholder/Template10/MwTemplate1.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { MwPlaceholder as MwPlaceholderComponent } from '../../../..'
+import Template10 from '../../../../components/Placeholder/components/Template10'
+
+import argTypes from './argTypes'
+
+const Story: ComponentMeta<typeof MwPlaceholderComponent> = {
+  id: 'MwTemplate10',
+  title: 'Components/Placeholder/type="template10"',
+  component: Template10,
+  argTypes: argTypes,
+}
+
+export const MwPlaceholder: ComponentStory<typeof MwPlaceholderComponent> = (
+  args,
+) => {
+  return <MwPlaceholderComponent {...args} />
+}
+
+MwPlaceholder.storyName = 'type="template10"'
+
+export default Story

package/src/stories/components/MwPlaceholder/Template10/argTypes.ts

@@ -0,0 +1,22 @@
+import { PlaceholderProps } from '../../../../components/Placeholder/interfaces'
+
+import { ArgTypes } from '../../../interfaces'
+
+const argTypes: ArgTypes<PlaceholderProps> = {
+  type: {
+    defaultValue: 'template10',
+    description: 'template type.',
+    table: {
+      defaultValue: { summary: 'template1' },
+    },
+  },
+  loading: {
+    defaultValue: true,
+    description: 'Verify is loading is running',
+    table: {
+      defaultValue: { summary: 'true' },
+    },
+  },
+}
+
+export default argTypes

package/src/stories/components/MwPlaceholder/Template2/MwTemplate1.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { MwPlaceholder as MwPlaceholderComponent } from '../../../..'
+import Template2 from '../../../../components/Placeholder/components/Template2'
+
+import argTypes from './argTypes'
+
+const Story: ComponentMeta<typeof MwPlaceholderComponent> = {
+  id: 'MwTemplate2',
+  title: 'Components/Placeholder/type="template2"',
+  component: Template2,
+  argTypes: argTypes,
+}
+
+export const MwPlaceholder: ComponentStory<typeof MwPlaceholderComponent> = (
+  args,
+) => {
+  return <MwPlaceholderComponent {...args} />
+}
+
+MwPlaceholder.storyName = 'type="template2"'
+
+export default Story

package/src/stories/components/MwPlaceholder/Template2/argTypes.ts

@@ -0,0 +1,22 @@
+import { PlaceholderProps } from '../../../../components/Placeholder/interfaces'
+
+import { ArgTypes } from '../../../interfaces'
+
+const argTypes: ArgTypes<PlaceholderProps> = {
+  type: {
+    defaultValue: 'template2',
+    description: 'template type.',
+    table: {
+      defaultValue: { summary: 'template2' },
+    },
+  },
+  loading: {
+    defaultValue: true,
+    description: 'Verify is loading is running',
+    table: {
+      defaultValue: { summary: 'true' },
+    },
+  },
+}
+
+export default argTypes

package/src/stories/components/MwPlaceholder/Template3/MwTemplate1.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { MwPlaceholder as MwPlaceholderComponent } from '../../../..'
+import Template3 from '../../../../components/Placeholder/components/Template3'
+
+import argTypes from './argTypes'
+
+const Story: ComponentMeta<typeof MwPlaceholderComponent> = {
+  id: 'MwTemplate3',
+  title: 'Components/Placeholder/type="template3"',
+  component: Template3,
+  argTypes: argTypes,
+}
+
+export const MwPlaceholder: ComponentStory<typeof MwPlaceholderComponent> = (
+  args,
+) => {
+  return <MwPlaceholderComponent {...args} />
+}
+
+MwPlaceholder.storyName = 'type="template3"'
+
+export default Story

package/src/stories/components/MwPlaceholder/Template3/argTypes.ts

@@ -0,0 +1,22 @@
+import { PlaceholderProps } from '../../../../components/Placeholder/interfaces'
+
+import { ArgTypes } from '../../../interfaces'
+
+const argTypes: ArgTypes<PlaceholderProps> = {
+  type: {
+    defaultValue: 'template3',
+    description: 'template type.',
+    table: {
+      defaultValue: { summary: 'template2' },
+    },
+  },
+  loading: {
+    defaultValue: true,
+    description: 'Verify is loading is running',
+    table: {
+      defaultValue: { summary: 'true' },
+    },
+  },
+}
+
+export default argTypes

package/src/stories/components/MwPlaceholder/Template4/MwTemplate1.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { MwPlaceholder as MwPlaceholderComponent } from '../../../..'
+import Template4 from '../../../../components/Placeholder/components/Template4'
+
+import argTypes from './argTypes'
+
+const Story: ComponentMeta<typeof MwPlaceholderComponent> = {
+  id: 'MwTemplate4',
+  title: 'Components/Placeholder/type="template4"',
+  component: Template4,
+  argTypes: argTypes,
+}
+
+export const MwPlaceholder: ComponentStory<typeof MwPlaceholderComponent> = (
+  args,
+) => {
+  return <MwPlaceholderComponent {...args} />
+}
+
+MwPlaceholder.storyName = 'type="template4"'
+
+export default Story

package/src/stories/components/MwPlaceholder/Template4/argTypes.ts

@@ -0,0 +1,22 @@
+import { PlaceholderProps } from '../../../../components/Placeholder/interfaces'
+
+import { ArgTypes } from '../../../interfaces'
+
+const argTypes: ArgTypes<PlaceholderProps> = {
+  type: {
+    defaultValue: 'template4',
+    description: 'template type.',
+    table: {
+      defaultValue: { summary: 'template4' },
+    },
+  },
+  loading: {
+    defaultValue: true,
+    description: 'Verify is loading is running',
+    table: {
+      defaultValue: { summary: 'true' },
+    },
+  },
+}
+
+export default argTypes

package/src/stories/components/MwPlaceholder/Template5/MwTemplate1.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { MwPlaceholder as MwPlaceholderComponent } from '../../../..'
+import Template5 from '../../../../components/Placeholder/components/Template5'
+
+import argTypes from './argTypes'
+
+const Story: ComponentMeta<typeof MwPlaceholderComponent> = {
+  id: 'MwTemplate5',
+  title: 'Components/Placeholder/type="template5"',
+  component: Template5,
+  argTypes: argTypes,
+}
+
+export const MwPlaceholder: ComponentStory<typeof MwPlaceholderComponent> = (
+  args,
+) => {
+  return <MwPlaceholderComponent {...args} />
+}
+
+MwPlaceholder.storyName = 'type="template5"'
+
+export default Story

package/src/stories/components/MwPlaceholder/Template5/argTypes.ts

@@ -0,0 +1,22 @@
+import { PlaceholderProps } from '../../../../components/Placeholder/interfaces'
+
+import { ArgTypes } from '../../../interfaces'
+
+const argTypes: ArgTypes<PlaceholderProps> = {
+  type: {
+    defaultValue: 'template5',
+    description: 'template type.',
+    table: {
+      defaultValue: { summary: 'template4' },
+    },
+  },
+  loading: {
+    defaultValue: true,
+    description: 'Verify is loading is running',
+    table: {
+      defaultValue: { summary: 'true' },
+    },
+  },
+}
+
+export default argTypes

package/src/stories/components/MwPlaceholder/Template6/MwTemplate1.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { MwPlaceholder as MwPlaceholderComponent } from '../../../..'
+import Template6 from '../../../../components/Placeholder/components/Template6'
+
+import argTypes from './argTypes'
+
+const Story: ComponentMeta<typeof MwPlaceholderComponent> = {
+  id: 'MwTemplate6',
+  title: 'Components/Placeholder/type="template6"',
+  component: Template6,
+  argTypes: argTypes,
+}
+
+export const MwPlaceholder: ComponentStory<typeof MwPlaceholderComponent> = (
+  args,
+) => {
+  return <MwPlaceholderComponent {...args} />
+}
+
+MwPlaceholder.storyName = 'type="template6"'
+
+export default Story