add stories

.storybook/main.js

@@ -1,10 +1,24 @@
 module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials"
-  ]
-}
+  webpackFinal: (config) => {
+    config.resolve.extensions.push('.svg')
+
+    config.module.rules = config.module.rules.map((data) => {
+      if (/svg\|/.test(String(data.test)))
+        data.test = /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani)(\?.*)?$/
+
+      return data
+    })
+
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: [
+        { loader: require.resolve('babel-loader') },
+        { loader: require.resolve('@svgr/webpack') },
+      ],
+    })
+
+    return config
+  },
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+}

src/Backdrop.tsx

@@ -2,9 +2,9 @@ import React, { useContext } from 'react'
 import classNames from 'classnames'
 import { ThemeContext } from './context/ThemeContext'
 
-interface Props extends React.HTMLAttributes<HTMLDivElement> {}
+export interface BackdropProps extends React.HTMLAttributes<HTMLDivElement> {}
 
-const Backdrop = React.forwardRef<HTMLDivElement, Props>(function Backdrop(props, ref) {
+const Backdrop = React.forwardRef<HTMLDivElement, BackdropProps>(function Backdrop(props, ref) {
   const { className, ...other } = props
   const {
     theme: { backdrop },

src/Badge.tsx

@@ -2,14 +2,14 @@ import React, { useContext } from 'react'
 import classNames from 'classnames'
 import { ThemeContext } from './context/ThemeContext'
 
-interface Props extends React.HTMLAttributes<HTMLSpanElement> {
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
   /**
    * The type of the badge
    */
   type?: 'success' | 'danger' | 'warning' | 'neutral' | 'primary'
 }
 
-const Badge = React.forwardRef<HTMLSpanElement, Props>(function Badge(props, ref) {
+const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(function Badge(props, ref) {
   const { className, children, type = 'primary', ...other } = props
 
   const {

src/Card.tsx

@@ -2,14 +2,14 @@ import React, { useContext } from 'react'
 import classNames from 'classnames'
 import { ThemeContext } from './context/ThemeContext'
 
-interface Props extends React.HTMLAttributes<HTMLDivElement> {
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Removes default styles (if true) so you can override with your own background styles
    */
   colored?: boolean
 }
 
-const Card = React.forwardRef<HTMLDivElement, Props>(function Card(props, ref) {
+const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {
   const { className, children, colored = false, ...other } = props
   const {
     theme: { card },

src/Dropdown.tsx

@@ -4,7 +4,7 @@ import { ThemeContext } from './context/ThemeContext'
 import Transition from './Transition'
 import FocusLock from 'react-focus-lock'
 
-interface Props extends React.HTMLAttributes<HTMLUListElement> {
+export interface DropdownProps extends React.HTMLAttributes<HTMLUListElement> {
   /**
    * Function executed when the dropdown is closed
    */
@@ -19,7 +19,7 @@ interface Props extends React.HTMLAttributes<HTMLUListElement> {
   align?: 'left' | 'right'
 }
 
-const Dropdown = React.forwardRef<HTMLDivElement, Props>(function Dropdown(props, ref) {
+const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(function Dropdown(props, ref) {
   const { children, onClose, isOpen, className, align = 'left', ...other } = props
   const {
     theme: { dropdown },

src/HelperText.tsx

@@ -2,14 +2,17 @@ import React, { useContext } from 'react'
 import classNames from 'classnames'
 import { ThemeContext } from './context/ThemeContext'
 
-interface Props extends React.HTMLAttributes<HTMLSpanElement> {
+export interface HelperTextProps extends React.HTMLAttributes<HTMLSpanElement> {
   /**
    * Defines the color of the helper text (the same as with Input, Select, etc.)
    */
   valid?: boolean
 }
 
-const HelperText = React.forwardRef<HTMLSpanElement, Props>(function HelperText(props, ref) {
+const HelperText = React.forwardRef<HTMLSpanElement, HelperTextProps>(function HelperText(
+  props,
+  ref
+) {
   const { children, valid, className, ...other } = props
   const {
     theme: { helperText },

src/Input.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react'
 import classNames from 'classnames'
 import { ThemeContext } from './context/ThemeContext'
 
-interface Props extends React.ComponentPropsWithRef<'input'> {
+export interface InputProps extends React.ComponentPropsWithRef<'input'> {
   /**
    * Defines the color of the input
    */
@@ -17,7 +17,7 @@ interface Props extends React.ComponentPropsWithRef<'input'> {
   type?: string
 }
 
-const Input = React.forwardRef<HTMLInputElement, Props>(function Input(props, ref) {
+const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(props, ref) {
   const { valid, disabled, className, type = 'text', ...other } = props
 
   const {

src/Label.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react'
 import classNames from 'classnames'
 import { ThemeContext } from './context/ThemeContext'
 
-interface Props extends React.HTMLAttributes<HTMLLabelElement> {
+export interface LabelProps extends React.HTMLAttributes<HTMLLabelElement> {
   /**
    * Applies specific styles for checkboxes
    */
@@ -17,7 +17,7 @@ interface Props extends React.HTMLAttributes<HTMLLabelElement> {
   disabled?: boolean
 }
 
-const Label = React.forwardRef<HTMLLabelElement, Props>(function Label(props, ref) {
+const Label = React.forwardRef<HTMLLabelElement, LabelProps>(function Label(props, ref) {
   const { children, check, radio, disabled, className, ...other } = props
   const {
     theme: { label },

src/Modal.tsx

@@ -6,7 +6,7 @@ import FocusLock from 'react-focus-lock'
 
 import { ThemeContext } from './context/ThemeContext'
 
-interface Props extends React.HTMLAttributes<HTMLDivElement> {
+export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Function executed when the dropdown is closed
    */
@@ -17,7 +17,7 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
   isOpen: boolean
 }
 
-const Modal = React.forwardRef<HTMLDivElement, Props>(function Modal(props, ref) {
+const Modal = React.forwardRef<HTMLDivElement, ModalProps>(function Modal(props, ref) {
   const { children, onClose, isOpen, ...other } = props
 
   const {

src/Pagination.tsx

@@ -76,7 +76,7 @@ export const PageButton: React.FC<PageButtonProps> = function PageButton({
 
 export const EmptyPageButton = () => <span className="px-2 py-1">...</span>
 
-interface PaginationProps {
+export interface PaginationProps {
   /**
    * The total number of results
    */

src/Select.tsx

@@ -2,14 +2,14 @@ import React, { useContext } from 'react'
 import classNames from 'classnames'
 import { ThemeContext } from './context/ThemeContext'
 
-interface Props extends React.ComponentPropsWithRef<'select'> {
+export interface SelectProps extends React.ComponentPropsWithRef<'select'> {
   /**
    * Defines the color of the select
    */
   valid?: boolean
 }
 
-const Select = React.forwardRef<HTMLSelectElement, Props>(function Select(props, ref) {
+const Select = React.forwardRef<HTMLSelectElement, SelectProps>(function Select(props, ref) {
   const { valid, children, className, multiple, disabled, ...other } = props
 
   const {
@@ -22,7 +22,6 @@ const Select = React.forwardRef<HTMLSelectElement, Props>(function Select(props,
   const invalidStyle = select.invalid
   const disabledStyle = select.disabled
   const selectStyle = select.select
-  const multipleStyle = select.multiple
 
   function hasValidation(valid: boolean | undefined) {
     return valid !== undefined
@@ -43,7 +42,6 @@ const Select = React.forwardRef<HTMLSelectElement, Props>(function Select(props,
     !hasValidation(valid) && disabled && disabledStyle,
     validationStyle(valid),
     !multiple && selectStyle,
-    multiple && multipleStyle,
     className
   )
 

src/Textarea.tsx

@@ -2,14 +2,17 @@ import React, { useContext } from 'react'
 import classNames from 'classnames'
 import { ThemeContext } from './context/ThemeContext'
 
-interface Props extends React.ComponentPropsWithRef<'textarea'> {
+export interface TextareaProps extends React.ComponentPropsWithRef<'textarea'> {
   /**
    * Defines the color of the textarea
    */
   valid?: boolean
 }
 
-const Textarea = React.forwardRef<HTMLTextAreaElement, Props>(function Textarea(props, ref) {
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
+  props,
+  ref
+) {
   const { valid, disabled, className, children, ...other } = props
 
   const {

src/stories/Alert.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 
 import { Story, Meta } from '@storybook/react/types-6-0'
 
@@ -11,33 +11,10 @@ export default {
 
 const Template: Story<AlertProps> = (args) => <Alert {...args} />
 
-export const Neutral = Template.bind({})
-Neutral.args = {
+export const Basic = Template.bind({})
+Basic.args = {
   children: 'This is a neutral alert.',
-}
-
-export const Success = Template.bind({})
-Success.args = {
-  children: 'Success! Check your email to validate your account.',
-  type: 'success',
-}
-
-export const Warning = Template.bind({})
-Warning.args = {
-  children: 'Oops! Looks like you forgot something.',
-  type: 'warning',
-}
-
-export const Danger = Template.bind({})
-Danger.args = {
-  children: 'Something went wrong. Try again later.',
-  type: 'danger',
-}
-
-export const Info = Template.bind({})
-Info.args = {
-  children: 'You can always change you name in your profile.',
-  type: 'info',
+  type: 'neutral',
 }
 
 export const WithoutClose = Template.bind({})

src/stories/Avatar.stories.tsx

@@ -13,22 +13,9 @@ export default {
 
 const Template: Story<AvatarProps> = (args) => <Avatar {...args} />
 
-export const Large = Template.bind({})
-Large.args = {
+export const Basic = Template.bind({})
+Basic.args = {
   size: 'large',
   src: avatarImage,
   alt: 'Profile image',
 }
-
-export const Regular = Template.bind({})
-Regular.args = {
-  src: avatarImage,
-  alt: 'Profile image',
-}
-
-export const Small = Template.bind({})
-Small.args = {
-  size: 'small',
-  src: avatarImage,
-  alt: 'Profile image',
-}

src/stories/Backdrop.stories.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+import { Story, Meta } from '@storybook/react/types-6-0'
+
+import Backdrop, { BackdropProps } from '../Backdrop'
+
+export default {
+  title: 'Backdrop',
+  component: Backdrop,
+} as Meta
+
+const Template: Story<BackdropProps> = (args) => <Backdrop {...args} />
+
+export const Basic = Template.bind({})

src/stories/Badge.stories.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import { Story, Meta } from '@storybook/react/types-6-0'
+
+import Badge, { BadgeProps } from '../Badge'
+
+export default {
+  title: 'Badge',
+  component: Badge,
+} as Meta
+
+const Template: Story<BadgeProps> = (args) => <Badge {...args} />
+
+export const Basic = Template.bind({})
+Basic.args = {
+  children: 'badge text',
+  type: 'neutral',
+}

src/stories/Button.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import { Story, Meta } from '@storybook/react/types-6-0'
+
+import Button, { ButtonProps } from '../Button'
+import HeartIcon from './static/heart.svg'
+
+export default {
+  title: 'Button',
+  component: Button,
+} as Meta
+
+const Template: Story<ButtonProps> = (args) => <Button {...args} />
+
+export const Basic = Template.bind({})
+Basic.args = {
+  children: 'Button',
+  layout: 'primary',
+  size: 'regular',
+}
+
+export const WithIcon = Template.bind({})
+WithIcon.args = {
+  children: 'Icon',
+  layout: 'primary',
+  icon: HeartIcon,
+}

src/stories/Card.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import { Story, Meta } from '@storybook/react/types-6-0'
+
+import Card, { CardProps } from '../Card'
+
+export default {
+  title: 'Card',
+  component: Card,
+} as Meta
+
+const Template: Story<CardProps> = (args) => <Card {...args} />
+
+// TODO: Add composed examples with CardBody
+export const Basic = Template.bind({})
+Basic.args = {
+  children: 'Hello',
+}
+
+export const Colored = Template.bind({})
+Colored.args = {
+  children: 'Hello',
+  colored: true,
+  className: 'bg-red-200',
+}