chore(deps-dev): upgrade to Storybook v6 (#362)

* chore(deps): upgrade Storybook dependencies to v6

* refactor(stories): update stories to Component Story Format (CSF)

* refactor(stories): update to zero-config TypeScript setup with main.js

* refactor(stories): remove unused addons and useless configuration

* chore(stories): configure panel to be on the right

Author: arthurdenner

.storybook/addons.js

@@ -0,0 +1,4 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.tsx'],
+  addons: ['@storybook/addon-knobs'],
+};

.storybook/config.js

@@ -14,7 +14,7 @@
     "test": "tsdx test --env=jsdom",
     "validate": "npm run lint && npm run test -- --coverage && npm run build",
     "now-build": "npm run storybook:build",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "start-storybook --ci -p 6006",
     "storybook:build": "build-storybook"
   },
   "husky": {
@@ -45,18 +45,15 @@
   },
   "devDependencies": {
     "@babel/core": "7.11.1",
-    "@storybook/addon-actions": "5.3.19",
-    "@storybook/addon-knobs": "5.3.19",
-    "@storybook/addon-links": "5.3.19",
-    "@storybook/addons": "5.3.19",
-    "@storybook/react": "5.3.19",
+    "@storybook/addon-knobs": "6.0.12",
+    "@storybook/addons": "6.0.12",
+    "@storybook/react": "6.0.12",
     "@testing-library/jest-dom": "5.11.3",
     "@testing-library/react": "10.4.8",
     "@testing-library/user-event": "12.1.0",
     "@types/jest": "26.0.10",
     "@types/storybook__react": "5.2.1",
     "autoprefixer": "9.8.6",
-    "awesome-typescript-loader": "5.2.1",
     "babel-loader": "8.1.0",
     "cssnano": "4.1.10",
     "eslint-plugin-prettier": "3.1.4",

.storybook/main.js

@@ -1,13 +1,5 @@
 import React from 'react';
-import {
-  withKnobs,
-  boolean,
-  date,
-  number,
-  select,
-  text,
-} from '@storybook/addon-knobs';
-import { storiesOf } from '@storybook/react';
+import { boolean, date, number, select, text } from '@storybook/addon-knobs';
 import { Form, SemanticICONS } from 'semantic-ui-react';
 import 'semantic-ui-css/semantic.min.css';
 import SemanticDatepicker from '../src';
@@ -21,19 +13,14 @@ import {
   typeMap,
 } from './common';
 
-const stories = storiesOf('Datepickers', module);
-
-stories.addDecorator(withKnobs);
-stories.addParameters({
-  info: {
-    disable: true,
-  },
-  options: {
-    panelPosition: 'right',
+export default {
+  title: 'Datepickers',
+  parameters: {
+    options: { panelPosition: 'right' },
   },
-});
+};
 
-stories.add('Basic usage', () => {
+export const basicUsage = () => {
   const type = select('Type', typeMap, typeMap.basic);
   const inline = boolean('Inline (without input)', false);
   const allowOnlyNumbers = boolean('Allow only numbers', false);
@@ -94,9 +81,9 @@ stories.add('Basic usage', () => {
       />
     </Content>
   );
-});
+};
 
-stories.add('With custom icons', () => {
+export const withCustomIcons = () => {
   const icon = select('Icon (without value)', iconMap, iconMap.calendar);
   const clearIcon = select('Clear icon (with value)', iconMap, iconMap.close);
   const useCustomIcon = boolean('Custom icon', false);
@@ -114,9 +101,9 @@ stories.add('With custom icons', () => {
       />
     </Content>
   );
-});
+};
 
-stories.add('Usage with Form', () => {
+export const usageWithForm = () => {
   return (
     <Content>
       <Form>
@@ -136,4 +123,4 @@ stories.add('Usage with Form', () => {
       </Form>
     </Content>
   );
-});
+};