Updated contributor guide and added start:storybook script

Author: nmetulev

CONTRIBUTING.md

@@ -22,170 +22,10 @@ Please use [GitHub Issues](https://github.com/microsoftgraph/microsoft-graph-too
 
 We highly recommend you browse existing issues first.
 
-## Setting up the project
+## Contributing to the project
 
-- Install [nodejs](https://nodejs.org) if you don't already have it.
-- We recommend using [VS Code](https://code.visualstudio.com/) as your editor
-- We also recommend installing the recommended extensions (recommended by VS Code once the folder is opened)
+[See our wiki](https://github.com/microsoftgraph/microsoft-graph-toolkit/wiki)
 
-Clone the repo and run the following in the terminal/command line/powershell:
-
-```bash
-# If you haven't already, install yarn globally
-npm i -g yarn
-
-# Install dependencies in node_modules
-yarn
-
-# Build
-yarn build
-
-# Watch and serve
-yarn start
-```
-
-## Creating a new component (quick start)
-
-The best way to get started with a new component is to use our snippets for scaffolding:
-
-> Note: The steps below assume you are using Visual Studio Code and you've installed all the recommended extensions.
-
-1. Chose a name for your component. The component must be prefixed with `mgt`. For example `mgt-component`
-
-1. Create a new folder for your new component under `src` \ `components` and name it with the name of your component.
-
-1. Create a new typescript file in your new folder with the same name. Ex: `mgt-component.ts`
-
-1. Open the file and use the `mgtnew` snippet to scaffold the new component.
-
-    > To use a snippet, start typing the name of the snippet (`mgtnew`) and press `tab`
-
-1. Tab through the generated code to set the name of your component. 
-
-1. Add your code!
-
-<!-- ## Testing the preview NPM package
-
-If you want to install the preview package just once, run this command:
-
-```bash
-npm install @microsoft/mgt --registry https://pkgs.dev.azure.com/microsoft-graph-toolkit/_packaging/MGT/npm/registry/
-```
-
-If you want to be able to do it again later, by running `npm install`, add the preview feed to your project's '.npmrc' file (create a '.npmrc' file if you don't have one already):
-
-```
-registry=https://pkgs.dev.azure.com/microsoft-graph-toolkit/_packaging/MGT/npm/registry/
-always-auth=true
-```
-
-Then just install the package:
-
-```bash
-npm install @microsoft/mgt
-```
-
-[TODO: Make sure everybody can access this feed publicly.] -->
-
-## Contributing
-
-### Finding issues you can help with
-
-Looking for something to work on?
-[Issues marked _good first issue_](https://github.com/microsoftgraph/microsoft-graph-toolkit/labels/good%20first%20issue)
-are a good place to start.
-
-You can also check [the _help wanted_ tag](https://github.com/microsoftgraph/microsoft-graph-toolkit/labels/help%20wanted)
-to find other issues to help with.
-
-### Git workflow
-
-The Microsoft Graph Toolkit uses the [GitHub flow](https://guides.github.com/introduction/flow/) where most development happens directly on the `main` branch. The `main` branch should always be in a healthy state which is ready for release.
-
-If your change is complex, please clean up the branch history before submitting a pull request.
-You can use [git rebase](https://docs.microsoft.com/en-us/azure/devops/repos/git/rebase#squash-local-commits) to group your changes into a small number of commits which we can review one at a time.
-
-When completing a pull request, we will generally squash your changes into a single commit. Please let us know if your pull request needs to be merged as separate commits.
-
-### Submitting a pull request and participating in code review
-
-Writing a good description for your pull request is crucial to help reviewers and future maintainers understand your change. Make sure to complete the pull request template to avoid delays. More detail is better.
-
-- [Link the issue you're addressing in the pull request](https://github.com/blog/957-introducing-issue-mentions). Each pull request must be linked to an issue.
-- Describe _why_ the change is being made and _why_ you've chosen a particular solution.
-- Describe any manual testing you performed to validate your change.
-- Ensure the appropriate tests and [documentation](https://github.com/microsoftgraph/microsoft-graph-docs/tree/main/concepts/toolkit) have been added
-
-Please submit one pull request per issue. Large pull requests which have unrelated changes can be difficult to review.
-
-After submitting a pull request, core members of the project will review your code. Each pull request must be validated by at least two core members before being merged
-
-Often, multiple iterations will be needed to responding to feedback from reviewers.
-
-### Quality assurance for new features
-
-We encourage developers to follow the following guidance when submitting new features:
-
-1. Ensure the appropriate tests have been added in the `src\test` folder. Run the tests and make sure they all pass.
-1. Ensure the code is properly documented following the [tsdoc](https://github.com/Microsoft/tsdoc) syntax
-1. Update the [documentation](https://github.com/microsoftgraph/microsoft-graph-docs/tree/main/concepts/toolkit) when necessary
-1. Follow the [accessibility guidance](https://developer.mozilla.org/en-US/docs/Web/Accessibility) for web development
-
-
-### Accessibility Guidelines
-
-New features and components should folow the following accessibility implementation guidelines:
-
-(for ease of use)
-1. Visit the following location: https://accessibilityinsights.io/en/
-2. Install the extension, and test
-
-**required**:
-- [ ] `aria-label` | *string*: "Login Button", "Megan Bowen" | - meaningful text should have identifiable labels for screen readers
-  
-*example (mgt-login):*
-
-```html
-    <button 
-        class="popup-command"
-        @click=${this.logout} 
-        aria-label="Sign Out">       
-        Sign Out
-    </button>
-```
-
-- [ ] `tab-index/focus` | *string*: "0", "-1" | - components that are interactive or display information should be **visibilly** navigatable by `tab` key control. Additional information in the aria label should be displayed when this feature is used.
-
-*example (mgt-people):*
-
-```html
-<mgt-person tabindex="0" ></mgt-person>
-```
-```css
-mgt-person:focus{
-    border-color: blue;
-}
-```
-
-- [ ] `alt` | *string*: "person icon" | - any `<img>` tag should contain `alt` text as well
-
-*example (mgt-person):*
-
-```html
-    <img
-        title=${this.personDetails.displayName}
-        aria-label=${this.personDetails.displayName}
-        alt=${this.personDetails.displayName}
-        src=${this.personDetails.image as string}
-    />
-```
-
-
-<!-- ### Testing
-
-Your changes should include tests to verify new functionality wherever possible.
-
-[[TODO - how to add and run tests]] -->
 
 ## Code of Conduct
 

package.json

@@ -26,6 +26,7 @@
     "serve": "es-dev-server --port 3000 --node-resolve --open --watch --compatibility none --app-index index.html",
     "serve:https": "es-dev-server --http2 --port 3000 --node-resolve --open --watch --compatibility none --app-index index.html",
     "start": "npm-run-all prettier:check watch:serve",
+    "start:storybook": "npm-run-all storybook:dev storybook:watch",
     "start:https": "npm-run-all prettier:check build:esm watch:serve:https",
     "watch": "lerna run --parallel --stream --scope @microsoft/* build:watch ",
     "watch:serve": "npm-run-all --parallel watch serve",
@@ -34,10 +35,11 @@
     "prettier:check": "npm run prettier:base -- --list-different \"packages/**/*.{ts,tsx}\"",
     "prettier:write": "npm run prettier:base -- --write \"packages/**/*.{ts,tsx}\"",
     "storybook": "start-storybook -p 6006 -s assets",
-    "storybook:dev": "npm run build:compile && npm run storybook:bundle && wca analyze packages --format json --outFile custom-elements.json",
+    "storybook:dev": "npm run build:compile && wca analyze packages --format json --outFile custom-elements.json",
+    "storybook:watch": "npm-run-all --parallel watch storybook:bundle:watch storybook",
+    "storybook:bundle:watch": "rollup -c ./.storybook/rollup.config.js --watch",
     "storybook:build": "npm run storybook:dev && build-storybook -s assets && cpx .storybook/CNAME storybook-static",
     "storybook:deploy": "npm run storybook:build && storybook-to-ghpages -e storybook-static",
-    "storybook:bundle": "rollup -c ./.storybook/rollup.config.js",
     "setLicense": "gulp setLicense"
   },
   "storybook-deployer": {

readme.md

@@ -136,7 +136,7 @@ To workaround this, use samples that are known to be compatible with a specific
 
 ## Contribute
 
-We enthusiastically welcome contributions and feedback. Please read the [contributing guide](CONTRIBUTING.md) before you begin.
+We enthusiastically welcome contributions and feedback. Please read our [wiki](https://github.com/microsoftgraph/microsoft-graph-toolkit/wiki) and the [contributing guide](CONTRIBUTING.md) before you begin.
 
 ### Code Contribution Challenge
 There are many exciting new features or interesting bugs that have been left behind because our team is small with limited capacity. We would love your help! We have tagged these issues with 'help wanted' and/or 'good first issue'. We added them into project board [Community Love](https://github.com/microsoftgraph/microsoft-graph-toolkit/projects/29) for easy tracking. If you see anything you would like to contribute to, you can reach out to  [email protected] or tag one of us ([Beth](https://github.com/beth-panx), [Elise](https://github.com/elisenyang), [Nick](https://github.com/vogtn), [Nikola](https://github.com/nmetulev), and [Shane](https://github.com/shweaver-MSFT)) in the issue for help or further discussion. By submitting a PR to solve an issue mentioned above, you can enter to win some exciting prizes! We have some cool socks and t-shirts waiting for you. Check out the official rules for [Code Contribution Challenge](contest.md). The contest will continue until March 2021 where prizes are awarded every month from now on.