docs(storybook): add storybook

.storybook/main.js

@@ -0,0 +1,10 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials"
+  ]
+}

.storybook/preview.js

@@ -0,0 +1,5 @@
+import '../style/output.css'
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+}

package.json

@@ -26,7 +26,9 @@
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "prerelease": "npm run build",
-    "release": "release-it"
+    "release": "release-it",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -50,6 +52,10 @@
     "@babel/preset-react": "7.10.1",
     "@babel/preset-typescript": "7.10.4",
     "@release-it/conventional-changelog": "2.0.0",
+    "@storybook/addon-actions": "6.1.0-alpha.31",
+    "@storybook/addon-essentials": "6.1.0-alpha.31",
+    "@storybook/addon-links": "6.1.0-alpha.31",
+    "@storybook/react": "6.1.0-alpha.31",
     "@types/classnames": "2.2.10",
     "@types/enzyme": "3.10.5",
     "@types/enzyme-adapter-react-16": "1.0.6",
@@ -74,12 +80,14 @@
     "eslint-plugin-promise": "4.2.1",
     "eslint-plugin-react": "7.20.0",
     "eslint-plugin-standard": "4.0.1",
+    "html-webpack-plugin": "5.0.0-alpha.7",
     "husky": "4.2.5",
     "jest": "26.0.1",
     "jest-svg-transformer": "1.0.0",
     "prettier": "2.0.5",
     "react": "16.13.1",
     "react-dom": "16.13.1",
+    "react-is": "17.0.1",
     "react-styleguidist": "11.0.8",
     "release-it": "14.2.0",
     "rimraf": "3.0.2",
@@ -133,11 +141,13 @@
   "jest": {
     "preset": "ts-jest",
     "testPathIgnorePatterns": [
-      ".*\\.d\\.ts"
+      ".*\\.d\\.ts",
+      "/node_modules/"
     ],
     "collectCoverageFrom": [
-      "src/**/*.tsx?$",
-      "!src/Transition.js"
+      "src/**/*.{ts,tsx}",
+      "!src/{Transition,index}.{ts,tsx}",
+      "!src/{stories,utils}/*"
     ],
     "setupFilesAfterEnv": [
       "./setupTests.ts"
@@ -159,5 +169,10 @@
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"
     }
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run lint && npm run test:coverage"
+    }
   }
 }

src/stories/Alert.stories.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react'
+
+import { Story, Meta } from '@storybook/react/types-6-0'
+
+import Alert, { AlertProps } from '../Alert'
+
+export default {
+  title: 'Alert',
+  component: Alert,
+} as Meta
+
+const Template: Story<AlertProps> = (args) => <Alert {...args} />
+
+export const Neutral = Template.bind({})
+Neutral.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',
+}
+
+export const WithoutClose = Template.bind({})
+WithoutClose.args = {
+  type: 'success',
+  children: "This alert doesn't have a close button.",
+  onClose: undefined,
+}

style/tailwind.config.js

@@ -0,0 +1,10 @@
+const windmill = require('../config')
+
+module.exports = windmill({
+  purge: [],
+  theme: {
+    extend: {},
+  },
+  variants: {},
+  plugins: [],
+})

style/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;