@atlaskit/reactions 21.8.1 → 22.0.0

package/docs/5-graphql-support.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import { md, code, Props } from '@atlaskit/docs';
+import SectionMessage from '@atlaskit/section-message';
+
+export default md`
+
+  ### How to get reactions support GraphQL?
+
+  The pre-built \`ReactionClient\` is supporting REST APIs, if you want to support GraphQL, please follow best practice below.
+
+  We have a \`ReactionClient\` interface which can be extended to support integrating with Graphql APIs.
+
+  You can simply create your own \`ReactionGraphQLClient\` to extend our \`ReactionClient\` interface, and implement each method from interface by using your own GraphQL queries or mutations. Just ensure the payload is matched with the type defined from interface. You may need the data transformation before return the promise.
+
+  #### 1. Create your own \`ReactionsGraphQLClient\` to support your own GraphQL APIs:
+
+  ${code`
+  import type { ReactionClient } from "@atlaskit/reactions"
+
+  /**
+  * demo purpose, assume apolloClient has initialized in 'graphqlClient'
+  */
+  import apolloClient from 'graphqlClient'
+
+  export class ReactionsGraphQLClient implements ReactionClient {
+      private clientConfig: ClientConfig;
+      // optional, you can set up a clientConfig if you need some extra options that params from methods of ReactionClient doesn't provide.
+      constructor(clientConfig: ClientConfig) {
+          this.clientConfig = clientConfig;
+      }
+      getReactions(containerAri: string, aris: string[]) {
+          return apolloClient.
+              .query({
+                  query: GET_REACTIONS_QUERY, // your own query to fetch reactions
+                  variables: {
+                    containerAri,
+                    aris,
+                  })
+              .then((response) => {
+                  // transform data if needed to match return type from interface
+                  return response.data; // type needs to be Reactions
+              });
+      }
+      getDetailedReaction(containerAri: string, ari: string, emojiId: string) {
+          return apolloClient.
+              .query({
+                  query: GET_DETAILED_REACTION, // your own query to fetch detailed reaction
+                  variables: {
+                    containerAri,
+                    aris,
+                  })
+              .then((response) => {
+                  // transform data if needed to match return type from interface
+                  return response.data; // type needs to be Reactions
+              });
+      }
+      addReaction(containerAri: string, ari: string, emojiId: string) {
+          return apolloClient.
+              .mutate({
+                  mutation: ADD_REACTION, // your own mutation to add reaction
+                  variables: {
+                    containerAri,
+                    ari,
+                    emojiId,
+                  })
+              .then((response) => {
+                  // transform data if needed to match return type from interface
+                  return response.data; // type needs to be Reactions
+              });
+      }
+      deleteReaction(containerAri: string, ari: string, emojiId: string) {
+          return apolloClient.
+              .mutate({
+                  mutation: REMOVE_REACTION, // your own mutation to delete reaction
+                  variables: {
+                    containerAri,
+                    ari,
+                    emojiId,
+                  })
+              .then((response) => {
+                  // transform data if needed to match return type from interface
+                  return response.data; // type needs to be Reactions
+              });
+      }
+  }
+  `}
+
+  #### 2. Set up ReactionsStore with \`ReactionGraphQLClient\`:
+
+  ${code`
+  const intialState: State = {
+      reactions: {},
+      flash: {}
+  };
+
+  const reactionsStore = useMemo(() => {
+      return new MemoryReactionsStore(
+          new ReactionsGraphQLClient(
+              clientConfig, // client config from your own to provie extra options for your GraphQL APIs
+          ),
+          initialState,
+          {
+              subproduct: 'atlaskit', // e.g. jira, confluence, etc
+          }
+      );
+  }, [clientConfig]);
+  `}
+
+  #### 3. Consume your reactionsStore in your ConnectedReactionsView
+
+  ${code`
+  ReactDOM.render(
+    <ConnectedReactionsView
+      store={reactionsStore}
+      containerAri={containerAri}
+      ari={demoAri}
+      emojiProvider={Promise.resolve(emojiResource)}
+    />
+    container,
+  };`}
+
+${(
+  <>
+    <br />
+    <SectionMessage
+      appearance="information"
+      title="There should be only one instance of EmojiResource in your application"
+    >
+      <p>
+        Above examples show the best practice to integrate Graphql APIs. By
+        extending from our `ReactionsClient` interface, you are free to use any
+        GrapqhQL client, any queries or mutations, as long as they return the
+        same type as defined in the interface.
+      </p>
+    </SectionMessage>
+    <br />
+    <SectionMessage appearance="warning">
+      Use base UI Components `Reactions` from `@atlaskit/reactions` directly
+      with your own implementation around to support GraphQL or custom behavior
+      is at your own risk. Without using ReactionsStore, we can't track the
+      operations of reactions, please add your own tracking to measure. The
+      custom implementation will lead to limited support from us.
+    </SectionMessage>
+  </>
+)}
+
+${(
+  <Props
+    heading="ReactionClient type"
+    props={require('!!extract-react-types-loader!../extract-react-type/reactionClient')}
+  />
+)}
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/reactions",
-  "version": "21.8.1",
+  "version": "22.0.0",
   "description": "Reactions component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,12 +28,16 @@
     "@atlaskit/analytics-gas-types": "^5.0.0",
     "@atlaskit/analytics-namespaced-context": "^6.5.0",
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/button": "^16.4.0",
+    "@atlaskit/avatar": "^21.0.0",
+    "@atlaskit/button": "^16.5.0",
     "@atlaskit/ds-lib": "^2.1.0",
-    "@atlaskit/emoji": "^66.0.0",
+    "@atlaskit/emoji": "^66.1.0",
     "@atlaskit/icon": "^21.11.0",
+    "@atlaskit/modal-dialog": "^12.2.0",
     "@atlaskit/motion": "^1.3.0",
-    "@atlaskit/popper": "^5.0.0",
+    "@atlaskit/popper": "^5.4.0",
+    "@atlaskit/spinner": "^15.3.0",
+    "@atlaskit/tabs": "^13.2.12",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.11.0",
     "@atlaskit/tooltip": "^17.6.0",
@@ -64,8 +68,6 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.4.3",
     "dotenv": "^8.2.0",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.15.1",
     "es6-promise": "^4.0.5",
     "fetch-mock": "^8.0.0",
     "react": "^16.8.0",