Use Storybook, get rid of Next.js

.babelrc

@@ -6,4 +6,4 @@
     "@babel/plugin-transform-arrow-functions",
     "@babel/plugin-transform-flow-strip-types"
   ]
-}
+}

.gitignore

@@ -11,3 +11,4 @@ pom.xml.asc
 src-cljs/eventum-ui-components
 target
 test/node_modules
+storybook-static

.storybook/.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": [
+    "next/babel"
+  ],
+  "plugins": [
+    "@babel/plugin-transform-arrow-functions",
+    "@babel/plugin-transform-flow-strip-types"
+  ]
+}

.storybook/main.js

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

.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

.storybook/webpack.config.js

@@ -0,0 +1,22 @@
+const path = require('path');
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.(jsx?|css)$/,
+        exclude: /node_modules/,
+        loader: 'babel-loader',
+      },
+      {
+        test: /\.css$/,
+        include: path.resolve(__dirname, '../'),
+        use: [
+          {
+            loader: require('styled-jsx/webpack').loader,
+          },
+        ],
+      },
+    ],
+  },
+};

README.md

@@ -6,9 +6,9 @@
 
 ```sh
 yarn
-yarn dev
+yarn storybook
 ```
-Go to: http://localhost:3000
+Go to: http://localhost:6006
 
 
 ## Use as npm package

next.config.js

@@ -1,3 +1,3 @@
 const withImages = require('next-images')
-
 module.exports = withImages();
+

package.json

@@ -2,20 +2,25 @@
   "name": "eventum-ui-components",
   "description": "Eventum React based UI components",
   "main": "./src/index.js",
-  "version": "4.6.7",
+  "version": "5.0.0",
   "scripts": {
     "build": "babel src/ -d dist/",
     "lint": "eslint src",
     "flow": "flow",
-    "dev": "next"
+    "dev": "next",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "dependencies": {
     "dateformat": "^3.0.3",
     "is-touch-device": "^1.0.1",
     "lodash": "^4.17.11",
+    "next": "^12.1.5",
+    "next-images": "^1.8.4",
     "react": "^16.5.0",
     "react-dom": "^16.5.0",
-    "react-responsive": "^6.0.1"
+    "react-responsive": "^6.0.1",
+    "storybook-addon-state": "^1.0.3"
   },
   "peerDependencies": {
     "react": "^16.5.0",
@@ -26,19 +31,27 @@
     "@babel/core": "^7.1.0",
     "@babel/plugin-transform-arrow-functions": "^7.0.0",
     "@babel/plugin-transform-flow-strip-types": "^7.0.0",
-    "babel-eslint": "^9.0.0",
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/runtime-corejs2": "^7.17.2",
+    "@storybook/addon-actions": "^6.4.22",
+    "@storybook/addon-essentials": "^6.4.22",
+    "@storybook/addon-links": "^6.4.22",
+    "@storybook/react": "^6.4.22",
+    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.0.2",
-    "eslint": "^5.6.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-flowtype": "^2.50.1",
+    "babel-plugin-react-require": "^3.1.3",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+    "eslint": "^8.13.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jsx-a11y": "^6.1.1",
     "eslint-plugin-react": "^7.11.1",
     "externs-generator": "^0.3.3",
-    "flow-bin": "^0.81.0",
-    "next": "^7.0.0",
-    "next-images": "^1.0.4",
-    "url-loader": "^1.1.1",
+    "flow-bin": "^0.176.2",
+    "styled-jsx": "^5.0.0",
+    "url-loader": "^4.1.1",
     "webpack": "3.0.0"
   },
   "license": "UNLICENSED",