feat: Button component (#1)

* Remove node versions that we don't support

* Add MUI and Emotion global styles support to Storybook

* Add Button component

* Change node version for github workflow

.github/workflows/main.yml

@@ -7,7 +7,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node: ['10.x', '12.x', '14.x']
+        node: ['14.8.0']
         os: [ubuntu-latest, windows-latest, macOS-latest]
 
     steps:

.storybook/preview-head.html

@@ -0,0 +1,7 @@
+<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons|Roboto:300,400" />
+<script src="https://kit.fontawesome.com/bcd6c71157.js" crossorigin="anonymous"></script>
+<style>
+  #root {
+    transform: translateX(0);
+  }
+</style>

.storybook/preview.js

@@ -1,5 +1,33 @@
+import React from 'react';
+import { Global, css } from '@emotion/react';
+import { muiTheme, globalStyles } from '../';
+import { StylesProvider, ThemeProvider as MuiThemeProvider } from '@material-ui/styles';
+import { CssBaseline } from '@material-ui/core';
+
 // https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters
 export const parameters = {
   // https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args
   actions: { argTypesRegex: '^on.*' },
+  options: {
+    // Order stories in alphabetical order
+    storySort: (a, b) => (a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true })),
+  },
 };
+
+// https://storybook.js.org/docs/react/writing-stories/decorators#global-decorators
+export const decorators = [
+  (Story) => (
+    // injects MUI styles first, so emotion styles will override them
+    <StylesProvider injectFirst>
+      <MuiThemeProvider theme={muiTheme}>
+        <Global
+          styles={css`
+            ${globalStyles}
+          `}
+        />
+        <CssBaseline />
+        <Story />
+      </MuiThemeProvider>
+    </StylesProvider>
+  ),
+];