Chore #49- Upgrade Storybook and dependencies (#50)

* Chore #49 - Upgrade sb and deps to 6.0.10

* Chore #49 - Bump up version 0.1.7 --> 0.1.8

* Chore #49 - Add react-jss & update linkColor

* Chore #49 - Add normalize.css

Co-authored-by: Parth Shah <[email protected]>

.github/workflows/chromatic.yml

@@ -12,7 +12,11 @@ jobs:
         # the list of steps that the action will go through
         steps:
             - uses: actions/checkout@v1
-            - run: yarn
+            - name: Run npm install & delete tsconfig.rollup.json
+              run: |
+                  rm -rf tsconfig.rollup.json
+                  npm install
+
             - uses: chromaui/action@v1
               # options required to the GitHub chromatic action
               with:

.storybook/main.js

@@ -1,17 +1,9 @@
 module.exports = {
 	stories: ['../src/**/*.stories.(ts|tsx|js|jsx|mdx)'],
 	addons: [
-		'@storybook/preset-create-react-app',
-		'@storybook/addon-actions',
 		'@storybook/addon-links',
-		'@storybook/addon-knobs',
-		{
-			name: '@storybook/addon-docs',
-			options: {
-				configureJSX: true,
-				babelOptions: {},
-				sourceLoaderOptions: null
-			}
-		}
+		'@storybook/addon-essentials',
+		'@storybook/addon-actions',
+		'@storybook/preset-create-react-app'
 	]
 }

.storybook/manager.js

@@ -0,0 +1,15 @@
+import { addons } from '@storybook/addons'
+
+addons.setConfig({
+	isFullscreen: false,
+	showNav: true,
+	showPanel: true,
+	panelPosition: 'bottom',
+	sidebarAnimations: true,
+	enableShortcuts: true,
+	isToolshown: true,
+	theme: undefined,
+	selectedPanel: 'Controls',
+	initialActive: 'sidebar',
+	showRoots: false
+})

.storybook/preview.ts

@@ -0,0 +1,24 @@
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+import 'normalize.css'
+import '../src/styles/index.css'
+
+export const parameters = {
+	actions: { argTypesRegex: '^on[A-Z].*' },
+	// controls: { expanded: true }, // uncomment to display controls with description and defaults
+	viewport: {
+		viewports: INITIAL_VIEWPORTS
+	},
+	backgrounds: {
+		default: 'light',
+		values: [
+			{
+				name: 'dark',
+				value: '#212121'
+			},
+			{
+				name: 'light',
+				value: '#ffffff'
+			}
+		]
+	}
+}