Small fixups: Run tsc over storybook snippets, update storybook snipp…

…et refs to meta package, convert images to svg, fix social cover image, add github banner image, add content to contributing file (#354)

CONTRIBUTING.md

@@ -1 +1,50 @@
-# Contributing
+# Contributing to Azure Communication Services UI Library
+
+## Getting started
+
+To get up and running making changes in the repo, check out our [guide on making a contribution](<./docs/contributing-guide/1. getting-set-up.md>)
+
+## Contribution policy
+
+A “Contribution” is work voluntarily submitted to a project. This submitted work can include code, documentation, design, answering questions, or submitting and triaging issues.
+
+Many contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to grant and do grant the rights to use your contribution. For details, visit [https://cla.microsoft.com](https://cla.microsoft.com).
+
+When you submit a pull request, a CLA-bot automatically determines if you need to provide a CLA and decorates the pull request appropriately (e.g., label, comment). Follow the instructions provided by the bot. You only need to do this once across all repositories using our CLA.
+
+## Acceptance and consensus seeking process
+
+Acceptance of contributions follows the consensus-seeking process.
+
+All pull requests must be approved by a *collaborator* before the pull request can be accepted.
+
+Before a pull request is accepted, time should be given to receive input from *collaborators* or *code owners* with the expertise to evaluate the changes. The amount of time can vary but at least 3 days during the typical working week and 5 days over weekends should be given to account for international time differences and work schedules.
+
+When a pull request : (a) has a significant impact on the project, (b) is inherently controversial, or (c) has not reached consensus with *collaborators*; add a "controversial" label to the pull request for the *steering committee* to review the pull request. Pull requests labeled with "controversial" are not approved until the *steering committee* reviews the issue and makes a decision.
+
+Additionally, *owners*, can temporarily enable [interaction limits](https://help.github.com/articles/limiting-interactions-with-your-repository/) to allow a "cool-down" period when hot topics become disruptive.
+
+Specific *collaborators* or *code owners*  can be added to a pull request by including their user alias.
+
+## Stability policy
+
+An essential consideration in every pull request is its impact on the system. To manage impacts, we work collectively to ensure that we do not introduce unnecessary breaking changes, performance or functional regressions, or negative impacts on usability for users or supported partners.
+
+## Developer's Certificate of Origin 1.1
+
+By making a contribution to this project, I certify that:
+
+* a. The contribution was created in whole or in part by me and I have the right to submit it under the open source license indicated in the file; or
+* b. The contribution is based upon previous work that, to the best of my knowledge, is covered under an appropriate open source license and I have the right under that license to submit that work with modifications, whether created in whole or in part by me, under the same open source license (unless I am permitted to submit under a different license), as indicated in the file; or
+* c. The contribution was provided directly to me by some other person who certified (a), (b) or (c) and I have not modified it.
+* d. I understand and agree that this project and the contribution are public and that a record of the contribution (including all personal information I submit with it, including my sign-off) is maintained indefinitely and may be redistributed consistent with this project or the open source license(s) involved.
+
+## Resources
+
+Several open source projects have influenced our contribution policy:
+
+* [Microsoft FAST](https://github.com/microsoft/fast)
+* [Project Governance @Node](https://nodejs.org/en/about/governance/)
+* [Contributions @Node](https://github.com/nodejs/node/blob/master/CONTRIBUTING.md)
+* [Open Source @GitHub](https://github.com/blog/2039-adopting-the-open-code-of-conduct)
+* [Open Source examples @todogroup](https://github.com/todogroup/policies)

README.md

@@ -1,3 +1,5 @@
+![ui-library-banner-image.png](./docs/images/ui-library-banner-image.png)
+
 # Azure Communication Services UI Library
 
 [![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg)](https://azure.github.io/communication-ui-sdk)

packages/storybook/.storybook/manager.tsx

@@ -10,7 +10,7 @@ addons.setConfig({
   theme: create({
     base: 'light',
     brandTitle: 'Azure Communication Services - UI Library',
-    brandImage: './images/sidebar-header.png'
+    brandImage: './images/logo.svg'
   }),
   enableShortcuts: false
 });

packages/storybook/package.json

@@ -7,8 +7,9 @@
     "build": "build-storybook -s stories,public,.storybook  --quiet --loglevel warn",
     "start": "start-storybook -p 6006 -s stories,./public --no-manager-cache --quiet --loglevel warn",
     "deploy-storybook": "storybook-to-ghpages --script build",
-    "test": "rush build -T storybook && jest",
+    "test": "rush build -T storybook && npm run test:snippets && jest",
     "test:coverage": "npm run test -- --coverage",
+    "test:snippets": "tsc --p tsconfig.snippets.json",
     "snapshot:update": "npm run test -- --update-snapshot",
     "prettier": "prettier --write --config ../../.prettierrc \"**/*.js\" \"**/*.ts\"",
     "prettier:check": "prettier --check --config ../../.prettierrc \"**/*.js\" \"**/*.ts\"",

packages/storybook/stories/CallComposite/CallComposite.stories.tsx

@@ -1,11 +1,11 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
+import { CallComposite } from '@azure/communication-react';
 import { Title, Description, Heading, Source } from '@storybook/addon-docs/blocks';
 import { Meta } from '@storybook/react/types-6-0';
 import React from 'react';
 // also exported from '@storybook/react' if you can deal with breaking changes in 6.1
-import { CallComposite } from 'react-composites';
 
 import { COMPOSITE_FOLDER_PREFIX } from '../constants';
 

packages/storybook/stories/CallComposite/snippets/Container.snippet.tsx

@@ -1,5 +1,5 @@
+import { CallComposite, CallAdapter, createAzureCommunicationCallAdapter } from '@azure/communication-react';
 import React, { useState, useEffect } from 'react';
-import { CallComposite, CallAdapter, createAzureCommunicationCallAdapter } from 'react-composites';
 
 export type ContainerProps = {
   token: string;

packages/storybook/stories/CallComposite/snippets/CustomDataModelExampleContainer.snippet.tsx

@@ -1,6 +1,10 @@
-import { PlaceholderProps } from '@azure/communication-react';
+import {
+  CallComposite,
+  CallAdapter,
+  createAzureCommunicationCallAdapter,
+  PlaceholderProps
+} from '@azure/communication-react';
 import React, { useCallback, useState, useEffect } from 'react';
-import { CallComposite, CallAdapter, createAzureCommunicationCallAdapter } from 'react-composites';
 
 export type ContainerProps = {
   endpointUrl: string;

packages/storybook/stories/ChatComposite/ChatComposite.stories.tsx

@@ -1,10 +1,10 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
+import { ChatComposite } from '@azure/communication-react';
 import { Title, Description, Heading, Source } from '@storybook/addon-docs/blocks';
 import { Meta } from '@storybook/react/types-6-0';
 import React from 'react';
-import { ChatComposite } from 'react-composites';
 import { COMPOSITE_FOLDER_PREFIX } from '../constants';
 
 const containerText = require('!!raw-loader!./snippets/Container.snippet.tsx').default;

packages/storybook/stories/ChatComposite/__snapshots__/ChatComposite.stories.storyshot

@@ -1,51 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`storybook snapshot tests Storyshots Composites/Chat Basic Canvas 1`] = `
-<div
-  className="css-80 root-0 body-1"
->
-  <div
-    className="css-80"
-    data-uses-unhanded-props={true}
-    dir="ltr"
-  >
-    <div
-      style={
-        Object {
-          "alignItems": "center",
-          "display": "flex",
-          "height": "100vh",
-          "justifyContent": "center",
-        }
-      }
-    >
-      <div
-        style={
-          Object {
-            "height": "90vh",
-            "width": "90vw",
-          }
-        }
-      >
-        <div
-          className="ms-Stack css-2"
-          style={
-            Object {
-              "height": "100%",
-              "width": "100%",
-            }
-          }
-        >
-          <span>
-            Please provide the connection string and display name to use.
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`storybook snapshot tests Storyshots Composites/Chat Basic Example 1`] = `
 <div
   className="css-80 root-0 body-1"
@@ -184,98 +138,6 @@ exports[`storybook snapshot tests Storyshots Composites/Chat Custom Data Model E
 </div>
 `;
 
-exports[`storybook snapshot tests Storyshots Composites/Chat Customization Canvas 1`] = `
-<div
-  className="css-80 root-0 body-1"
->
-  <div
-    className="css-80"
-    data-uses-unhanded-props={true}
-    dir="ltr"
-  >
-    <div
-      style={
-        Object {
-          "alignItems": "center",
-          "display": "flex",
-          "height": "100vh",
-          "justifyContent": "center",
-        }
-      }
-    >
-      <div
-        style={
-          Object {
-            "height": "90vh",
-            "width": "90vw",
-          }
-        }
-      >
-        <div
-          className="ms-Stack css-2"
-          style={
-            Object {
-              "height": "100%",
-              "width": "100%",
-            }
-          }
-        >
-          <span>
-            Please provide the connection string and display name to use.
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`storybook snapshot tests Storyshots Composites/Chat Data Model Canvas 1`] = `
-<div
-  className="css-80 root-0 body-1"
->
-  <div
-    className="css-80"
-    data-uses-unhanded-props={true}
-    dir="ltr"
-  >
-    <div
-      style={
-        Object {
-          "alignItems": "center",
-          "display": "flex",
-          "height": "100vh",
-          "justifyContent": "center",
-        }
-      }
-    >
-      <div
-        style={
-          Object {
-            "height": "90vh",
-            "width": "90vw",
-          }
-        }
-      >
-        <div
-          className="ms-Stack css-2"
-          style={
-            Object {
-              "height": "100%",
-              "width": "100%",
-            }
-          }
-        >
-          <span>
-            Please provide the connection string and display name to use.
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
 exports[`storybook snapshot tests Storyshots Composites/Chat Join Existing Chat Thread 1`] = `
 <div
   className="css-80 root-0 body-1"
@@ -376,58 +238,3 @@ exports[`storybook snapshot tests Storyshots Composites/Chat Theme Example 1`] =
   </div>
 </div>
 `;
-
-exports[`storybook snapshot tests Storyshots Composites/Chat Themes Canvas 1`] = `
-<div
-  className="css-80 root-0 body-1"
->
-  <div
-    className="css-80"
-    data-uses-unhanded-props={true}
-    dir="ltr"
-  >
-    <div
-      style={
-        Object {
-          "alignItems": "center",
-          "display": "flex",
-          "height": "100vh",
-          "justifyContent": "center",
-        }
-      }
-    >
-      <div
-        style={
-          Object {
-            "height": "90vh",
-            "width": "90vw",
-          }
-        }
-      >
-        <div
-          className="css-80 root-2 body-1"
-        >
-          <div
-            className="css-80"
-            data-uses-unhanded-props={true}
-          >
-            <div
-              className="ms-Stack css-3"
-              style={
-                Object {
-                  "height": "100%",
-                  "width": "100%",
-                }
-              }
-            >
-              <span>
-                Please provide the connection string and display name to use.
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;

packages/storybook/stories/ChatComposite/snippets/Container.snippet.tsx

@@ -1,5 +1,5 @@
+import { ChatAdapter, ChatComposite, createAzureCommunicationChatAdapter } from '@azure/communication-react';
 import React, { useState, useEffect } from 'react';
-import { ChatAdapter, ChatComposite, createAzureCommunicationChatAdapter } from 'react-composites';
 
 export type ContainerProps = {
   token: string;

packages/storybook/stories/ChatComposite/snippets/Server.snippet.tsx

@@ -3,7 +3,13 @@
 import { ChatClient } from '@azure/communication-chat';
 import { AzureCommunicationTokenCredential } from '@azure/communication-common';
 import { CommunicationIdentityClient } from '@azure/communication-identity';
-import { ChatConfig } from '../ChatConfig';
+
+type ChatConfig = {
+  token: string;
+  endpointUrl: string;
+  displayName: string;
+  threadId: string;
+};
 
 export const createUserAndThread = async (
   resourceConnectionString: string,
@@ -22,8 +28,8 @@ export const createUserAndThread = async (
 
   return {
     token: user.token,
-    endpointUrl: endpointUrl,
-    displayName: displayName,
+    endpointUrl,
+    displayName,
     threadId
   };
 };