chore: add storybook (#17)

.babelrc

@@ -0,0 +1,3 @@
+{
+	"presets": ["next/babel"]
+}

.storybook/addons.js

@@ -0,0 +1,6 @@
+import '@storybook/addon-actions/register'
+import '@storybook/addon-links/register'
+import '@storybook/addon-knobs/register'
+import '@storybook/addon-viewport/register'
+import '@storybook/addon-storysource/register'
+import '@storybook/addon-backgrounds/register'

.storybook/config.jsx

@@ -0,0 +1,72 @@
+import { addDecorator, addParameters, configure } from '@storybook/react'
+import { withConsole } from '@storybook/addon-console'
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+import { RouterContext } from 'next/dist/next-server/lib/router-context'
+import { myRouter } from './mock-router'
+import 'styles/main.scss'
+import './styles.css'
+
+addDecorator((storyFn, context) => withConsole()(storyFn)(context))
+
+addParameters({
+	options: {
+		storySort: (a, b) => {
+			if (a[1].kind === 'Welcome') {
+				return -1
+			}
+
+			return a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, { numeric: true })
+		},
+	},
+})
+
+const customViewports = {
+	responsive: {
+		name: 'Responsive',
+		styles: {
+			height: '100%',
+			width: '100%',
+		},
+		type: 'desktop',
+	},
+	desktop1280: {
+		name: 'Desktop 1280px',
+		styles: {
+			height: '800px',
+			width: '1280px',
+		},
+		type: 'desktop',
+	},
+	desktop1440: {
+		name: 'Desktop 1440px',
+		styles: {
+			height: '900px',
+			width: '1440px',
+		},
+		type: 'desktop',
+	},
+}
+
+addParameters({
+	viewport: {
+		viewports: {
+			...INITIAL_VIEWPORTS,
+			...customViewports,
+		},
+		defaultViewport: 'responsive',
+	},
+	options: {
+		showPanel: true,
+	},
+})
+
+const Theme = (StoryFn) => (
+	<RouterContext.Provider value={myRouter}>
+		<StoryFn />
+	</RouterContext.Provider>
+)
+
+addDecorator(Theme)
+
+// automatically import all files ending in *.stories.tsx
+configure(require.context('../components', true, /\.stories\.tsx$/), module)

.storybook/main.js

@@ -0,0 +1,18 @@
+const path = require('path')
+
+// Export a function. Accept the base config as the only param.
+module.exports = {
+	webpackFinal: async (baseConfig) => {
+		const nextConfig = require('../next.config.js')
+
+		// Make whatever fine-grained changes you need
+		baseConfig.module.rules.push({
+			test: /\.scss$/,
+			use: ['style-loader', 'css-loader', 'sass-loader'],
+			include: path.resolve(__dirname, '../'),
+		})
+
+		// merge whatever from nextConfig into the webpack config storybook will use
+		return { ...baseConfig }
+	},
+}

.storybook/mock-router.js

@@ -0,0 +1,22 @@
+import Router from 'next/router'
+
+const commonRouterData = {
+	push: () => new Promise((resolve) => resolve(true)),
+	replace: () => new Promise((resolve) => resolve(true)),
+	prefetch: () => new Promise((resolve) => resolve()),
+	reload: () => {},
+	back: () => {},
+}
+
+Router.router = {
+	...commonRouterData,
+}
+
+export const myRouter = {
+	...commonRouterData,
+	pathname: '/',
+	route: '/',
+	query: {},
+	asPath: '/',
+	isFallback: false,
+}

.storybook/styles.css

@@ -0,0 +1,4 @@
+.sb-show-main {
+	margin: 0;
+	background: inherit;
+}

.storybook/webpack.config.js

@@ -0,0 +1,43 @@
+const path = require('path')
+const WebpackNotifierPlugin = require('webpack-notifier')
+
+module.exports = ({ config, mode }) => {
+	config.module.rules.push({
+		test: /\.stories\.tsx?$/,
+		loaders: [
+			{
+				loader: require.resolve('@storybook/source-loader'),
+				options: { parser: 'typescript' },
+			},
+		],
+		enforce: 'pre',
+	})
+
+	config.module.rules.push({
+		test: /\.(ts|tsx)$/,
+		loader: require.resolve('babel-loader'),
+		options: {
+			presets: [['react-app', { flow: false, typescript: true }]],
+		},
+	})
+
+	config.resolve.extensions.push('.ts', '.tsx')
+
+	config.resolve.alias['components'] = path.join(__dirname, '../components')
+	config.resolve.alias['pages'] = path.join(__dirname, '../pages')
+	config.resolve.alias['styles'] = path.join(__dirname, '../styles')
+	config.resolve.alias['hooks'] = path.join(__dirname, '../hooks')
+
+	if (mode === 'DEVELOPMENT') {
+		config.plugins.push(
+			new WebpackNotifierPlugin({
+				title: 'Favycon Storybook',
+				excludeWarnings: true,
+				alwaysNotify: true,
+				contentImage: path.join(__dirname, 'logo.png'),
+			})
+		)
+	}
+
+	return config
+}

README.md

@@ -5,6 +5,7 @@ Favicon generator tool
 ![Release](https://github.com/ruisaraiva19/favycon/workflows/Release/badge.svg)
 ![Lint](https://github.com/ruisaraiva19/favycon/workflows/Lint/badge.svg)
 ![Commitlint](https://github.com/ruisaraiva19/favycon/workflows/Commitlint/badge.svg)
+[![Netlify Status](https://api.netlify.com/api/v1/badges/d2e6694d-1f2c-4b50-ad21-ff5c3fcbc3c4/deploy-status)](https://app.netlify.com/sites/favycon/deploys)
 
 ## Browser favicon formats supported
 

components/index.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+export default {
+	title: 'Welcome',
+}
+
+export const toStorybook = () => (
+	<article className="welcome">
+		<h1>Welcome to Favycon Storybook.</h1>
+		<p>This is a development environment for the application UI components.</p>
+		<p>
+			A story is a unique state one or more components. You can have as many stories as you want. Basically a story is
+			virtual test case.
+		</p>
+		<style jsx>{`
+			.welcome {
+				padding: 15px;
+				line-height: 1.4;
+				font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif;
+				background-color: rgb(255, 255, 255);
+				color: rgb(0, 0, 0);
+			}
+		`}</style>
+	</article>
+)
+
+toStorybook.story = {
+	name: 'to Storybook',
+}

package.json

@@ -33,6 +33,8 @@
 		"lint:types": "tsc",
 		"lint:scripts": "eslint './**/*.tsx' './**/*.ts' './**/*.js'",
 		"lint:css": "stylelint './**/*.css' './**/*.scss'",
+		"storybook": "start-storybook -s ./public -p 6006",
+		"storybook:build": "build-storybook -s ./public",
 		"commit": "git-cz"
 	},
 	"dependencies": {
@@ -46,14 +48,27 @@
 		"react-dom": "16.13.1"
 	},
 	"devDependencies": {
+		"@babel/core": "7.9.0",
 		"@commitlint/cli": "8.3.5",
 		"@commitlint/config-conventional": "8.3.4",
+		"@storybook/addon-actions": "5.3.18",
+		"@storybook/addon-backgrounds": "5.3.18",
+		"@storybook/addon-console": "1.2.1",
+		"@storybook/addon-knobs": "5.3.18",
+		"@storybook/addon-links": "5.3.18",
+		"@storybook/addon-storysource": "5.3.18",
+		"@storybook/addon-viewport": "5.3.18",
+		"@storybook/addons": "5.3.18",
+		"@storybook/react": "5.3.18",
+		"@storybook/source-loader": "5.3.18",
 		"@types/classnames": "2.2.10",
 		"@types/node": "13.11.1",
 		"@types/react": "16.9.34",
 		"@typescript-eslint/eslint-plugin": "2.27.0",
 		"@typescript-eslint/parser": "2.27.0",
 		"babel-eslint": "10.1.0",
+		"babel-loader": "8.1.0",
+		"babel-preset-react-app": "9.1.2",
 		"commitizen": "4.0.4",
 		"cz-conventional-changelog": "3.1.0",
 		"dotenv": "8.2.0",
@@ -71,14 +86,17 @@
 		"lint-staged": "10.1.3",
 		"npm-run-all": "4.1.5",
 		"prettier": "2.0.4",
+		"regenerator-runtime": "0.13.5",
 		"sass": "1.26.3",
+		"sass-loader": "8.0.2",
 		"semantic-release": "17.0.4",
 		"stylelint": "13.3.1",
 		"stylelint-config-prettier": "8.0.1",
 		"stylelint-config-recess-order": "2.0.4",
 		"stylelint-config-standard": "20.0.0",
 		"stylelint-prettier": "1.1.2",
-		"typescript": "3.8.3"
+		"typescript": "3.8.3",
+		"webpack-notifier": "1.8.0"
 	},
 	"config": {
 		"commitizen": {