Storybook and yarn updates for v4 (#719)

* Merge pull request #696 from teamsnap/update-storybook-6

Update storybook 6

* add netlify toml

Co-authored-by: Sara Lohr <sara.lohr@teamsnap.com>

.github/workflows/main.yml

@@ -16,10 +16,10 @@ jobs:
   build:
     # The type of runner that the job will run on
     runs-on: ubuntu-latest
-    
+
     strategy:
       matrix:
-        node-version: [10.x, 12.x]
+        node-version: [12.x, 14.x]
 
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
@@ -28,14 +28,16 @@ jobs:
         with:
           # Set always-auth in
             node-version: ${{ matrix.node-version }}
-        
+
       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
       - uses: actions/checkout@v2
 
       # Runs a single command using the runners shell
-      - name: NPM Install
-        run: npm install
-
-      - name: NPM build
-        run: npm run build
-#       - run: npm test -- Eventually.
+      - name: Yarn
+        run: yarn
+
+      - name: Yarn build
+        run: yarn run build
+
+      - name: Yarn Audit
+        run: yarn npm audit --severity high

.gitignore

@@ -1,3 +1,12 @@
 dist
 node_modules
 .DS_Store
+storybook-static
+
+.yarn/*
+!.yarn/patches
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
+.pnp.*

.storybook/main.js

@@ -0,0 +1,11 @@
+module.exports = {
+  stories: [
+    '../src/**/*.stories.@(tsx|js)',
+  ],
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-docs',
+    '@storybook/addon-knobs',
+    '@whitespace/storybook-addon-html',
+  ]
+};

.storybook/preview.js

@@ -0,0 +1,7 @@
+// Import css
+import "!style-loader!css-loader!sass-loader!../src/css/teamsnap-ui.scss";
+import "!style-loader!css-loader!sass-loader!./storybook.scss";
+
+export const parameters = {
+  viewMode: 'docs'
+}

.yarnrc.yml

@@ -0,0 +1,3 @@
+yarnPath: ".yarn/releases/yarn-berry.cjs"
+nodeLinker: node-modules
+enableGlobalCache: true

CHANGELOG.md

@@ -12,32 +12,60 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - `Fixed` for any bug fixes.
 - `Security`
 
-## [3.9.8] - 2021-05-02
-- https://github.com/teamsnap/teamsnap-ui/pull/614
-- `Fixed` active background color for ToggleCheckboxList component
-
-## [3.9.7] - 2021-04-29
-- https://github.com/teamsnap/teamsnap-ui/pull/610
-- `Fixed` unique key prop errors for Tabs & ToggleCheckboxList components
-
-## [3.9.6] - 2021-04-28
-- https://github.com/teamsnap/teamsnap-ui/pull/607
-- `Fixed` using `import * as React from 'react'` syntax
-
-## [3.9.5] - 2021-04-28
-- https://github.com/teamsnap/teamsnap-ui/pull/606
-- `Fixed` Forgot to export ListToggle, Pill, Tag, ToggleCheckboxList
-
-## [3.9.4] - 2021-04-26
-- https://github.com/teamsnap/teamsnap-ui/pull/589
-- `Added` Pill/AttachmentPill component
-- `Added` Pill/CheckboxPill component
-
-## [3.9.3] - 2021-04-22
-- https://github.com/teamsnap/teamsnap-ui/pull/593
-- `Added` Tag component
-- `Added` ListToggle component
-- `Added` ToggleCheckboxList component
+=======
+## [3.12.0] - 2021-06-28
+- https://github.com/teamsnap/teamsnap-ui/pull/706
+- `Changed` from npm to yarn
+
+## [3.11.0] - 2021-06-21
+- https://github.com/teamsnap/teamsnap-ui/pull/696
+- `Updated` dependencies to address vulnerabilities
+- `Updated` to Storybook 6
+
+## [3.10.10] - 2021-06-04
+- https://github.com/teamsnap/teamsnap-ui/pull/669
+- `Added` version control to npm and node
+
+## [3.10.9] - 2021-06-03
+- https://github.com/teamsnap/teamsnap-ui/pull/665
+- `Changed` style compilation to use `sass` and fixed soon to be deprecated scss syntax. Also upgraded `gulp-sass` and `sass-loader`
+
+## [3.10.8] - 2021-06-03
+- https://github.com/teamsnap/teamsnap-ui/pull/341
+- `Changed` font paths to teamsnap-ui CDN.
+
+## [3.10.7] - 2021-05-25
+- https://github.com/teamsnap/teamsnap-ui/pull/644
+- `Fixed` Updated to patch CVE-2021-27515, CVE-2021-23337, CVE-2020-7733, and CVE-2021-27292
+
+## [3.10.6] - 2021-04-06
+- https://github.com/teamsnap/teamsnap-ui/pull/581
+- `Updated` Center paginated table elements as a group
+
+## [3.10.5] - 2021-04-06
+- https://github.com/teamsnap/teamsnap-ui/pull/564
+- `Added` Allow paginated table to export placement options type
+
+## [3.10.4] - 2021-04-05
+- https://github.com/teamsnap/teamsnap-ui/pull/557
+- `Added` Allow paginated table to choose pagination placement via prop
+
+## [3.10.3] - 2021-03-30
+- https://github.com/teamsnap/teamsnap-ui/pull/538
+- `Updated` Allow paginated table to take in custom filter objects
+
+## [3.10.2] - 2021-02-26
+- https://github.com/teamsnap/teamsnap-ui/pull/504/files
+- `Updated` Table headers to be spans instead of anchors
+
+## [3.10.1] - 2020-12-08
+- https://github.com/teamsnap/teamsnap-ui/pull/429
+- `Updated` React to 17
+- `Fixed` event delegation in Popup components for breaking React 17 changes
+
+## [3.10.0] - 2020-11-04
+- https://github.com/teamsnap/teamsnap-ui/pull/366
+- `Added` more options to Popup component to make it more customizable.
 
 ## [3.9.2] - 2020-11-04
 - https://github.com/teamsnap/teamsnap-ui/pull/366

CONTRIBUTING.md

@@ -10,6 +10,9 @@ Once your user is created and added to the org this guide details the steps to p
 
 * rebase and get  your branch ahead of master
 * then from your working branch
+* run `yarn npm audit` to ensure there are no vulnerabilities with level high or critical.
+* run `yarn run build` to ensure the package builds with no errors
+* As necessary, update packages to resolve npm audit failures for level high or critical vulnerabilities.
 * Update the package.json version number `npm version [major|minor|patch] -m "commit message"`
 * Update CHANGELOG.md with new npm version and release notes
 * Commit CHANGELOG

README.md

@@ -3,54 +3,69 @@
 TeamSnaps UI framework. Built with sass and react.
 
 ![CI](https://github.com/teamsnap/teamsnap-ui/workflows/CI/badge.svg)
-### Installation
 
-Installs the @teamsnap/teamsnap-ui node module and builds the dist directory.
+
+### To run locally:
+
+Make sure you using the [correct version of node](./.nvmrc).
 
 ```
-npm install
+nvm use
+```
+
+Install dependencies:
+
+```
+yarn
 ```
 
 To build the dist folder for css, js and icons
 
-`npm run build`
+`yarn run build`
 
 Each item can also be build independently
 
-`npm run build:css`
+`yarn run build:css`
+
+`yarn run build:js`
+
+### Storybook
+
+React components are documented with Storybook.
+
+To run storybook locally:
+
+`yarn run storybook`
 
-`npm run build:js`
+To access on Netlify:
+
+https://ts-ui-storybook.netlify.com
+
+Netlify makes our Storybook accessible without having to run it locally. Each PR runs a test deploy with a preview, and every merge to master automatically updates the Netlify site.
+
+
+### Linters
 
 All styles are linted using `sass-lint` and the config `.sass-lint.yml` is available to customize rules as needed.
 
 The linter is also run automatically before publishing updates to npm. For full details see [the contributing guide](CONTRIBUTING.md).
 
 To lint both css and js
 
-`npm run lint`
+`yarn run lint`
 
 To run the linters manually use:
 
-`npm run lint:css`
+`yarn run lint:css`
 
-`npm run lint:js`
+`yarn run lint:js`
 
 ### TODO:
 
 - Update docs with full process for working locally with TeamSnap-UI
 - Update scripts to use webpack for css management and serving locally
 
-### Storybook
-
-React components are documented with Storybook.
-
-https://teamsnap-ui-storybook.netlify.com
-
-Netlify makes our Storybook accessible without having to run it locally. Each PR runs a test deploy with a preview, and every merge to master automatically updates the Netlify site.
-
-To run storybook locally:
 
-`npm run storybook`
 
 ### CSS Components
 

netlify.toml

@@ -0,0 +1,20 @@
+# netlify.toml -> https://www.netlify.com/docs/netlify-toml-reference/
+
+# Settings in build context are global and applied to all unless otherwise overridden by other contextx
+[build]
+	# Directory to change to before starting a build, location of package.json
+	base = "/"
+
+# Specific branch context, all deploys from this specific branch will inherit these settings.
+
+# Production context: all deploys from the Production branch set in your site's
+# deploy contexts will inherit these settings.
+[context.v4]
+  publish = "dist/"
+  command = "yarn deploy"
+
+# Route redirects for Netlify
+[[redirects]]
+	from = "/*"
+	to = "/index.html"
+	status = 200