Merge pull request #16 from IBM/featture/final-code-changes

final changes

Author: bdjos1

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "custom-carbon-addons",
-  "version": "0.0.1",
-  "description": "Enable customers to develop the content within the package, Carbon Components, and GraphQl using the apollo client. It also enables customer to build and deploy this new package.",
+  "name": "spm-ui-addon-devenv",
+  "version": "1.0.0",
+  "description": "Enable the development of Carbon Components, and can be integrated with GraphQl and apollo client.",
   "main": "index.js",
   "husky": {
     "hooks": {
@@ -22,7 +22,7 @@
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
   },
-  "author": "Tom Delahunty",
+  "author": "",
   "license": "ISC",
   "devDependencies": {
     "@babel/cli": "^7.1.0",

packages/carbon-addons-devenv/sample_renderers/Renderer.js

@@ -24,10 +24,22 @@ export default class Renderer {
    *
    * @private
    */
-  static create = async (containerId, config, dataProvider) => {
+  static create = async (containerId, config, dataProvider, nameofUpdatedRendererList) => {
   window.spmcustom.requireCustomCarbonAddons()
     .then(async (RenderWithApolloClient) => {
-      RenderWithApolloClient[dataProvider](document.getElementById(containerId), {
+
+      let apolloClientDataProvider;
+      try {
+        const nameOfRendererList = nameofUpdatedRendererList ? nameofUpdatedRendererList : 'RendererListWithApolloClient';
+        const rendererList = RenderWithApolloClient[nameOfRendererList];
+        apolloClientDataProvider = rendererList[dataProvider];
+      } catch (e) {
+        throw new Error('The apollo data provider : ' + dataProvider + " does not exist. This is the list of available ones: " + rendererList);
+      }
+      if (!apolloClientDataProvider) {
+        throw new Error('The apollo data provider : ' + dataProvider + " does not exist. This is the list of available ones: " + rendererList);
+      }
+      apolloClientDataProvider(document.getElementById(containerId), {
         ...config,
         labels: {
           ...config.labels,

packages/carbon-addons-devenv/src/apollo-client-hooks/core/GraphqlContext.js

@@ -13,14 +13,16 @@ import { gql, useQuery } from '@apollo/client';
 
 const GetLogo = gql`
   query GetLogo {
-    logo(logoId: "id_2") {
+    logo(logoId: $logoId) {
       name
     }
   }
 `;
 
-const useGetLogo = () => {
-  return useQuery(GetLogo);
+const useGetLogo = (logoIdValue) => {
+  return useQuery(GetLogo, {
+    variables: { logoId: logoIdValue },
+  });
 }
 
 export {

packages/carbon-addons-devenv/src/apollo-client-hooks/hook_samples/Logo/LogoQuery.js

@@ -15,7 +15,7 @@ import PersonFolio  from '../../../react/component_samples/PersonFolio/PersonFol
 import ApolloClientQueryProvider from '../../core/ApolloClientQueryProvider';
 import { useGetPersons } from './PersonQuery';
 
-const PeopleQueryProvider = ({ configuration }) => {
+const PersonFolioQueryProvider = ({ configuration }) => {
 
   const { data } = useGetPersons();
   const personToRender = (<>{data && data.persons.map(person => (
@@ -32,8 +32,8 @@ const PeopleQueryProvider = ({ configuration }) => {
 
 };
 
-PeopleQueryProvider.propTypes = {
+PersonFolioQueryProvider.propTypes = {
   configuration: PropTypes.object.isRequired,
 };
 
-export default PeopleQueryProvider;
+export default PersonFolioQueryProvider;

packages/carbon-addons-devenv/src/apollo-client-hooks/hook_samples/Person/PeopleQueryProvider.js renamed to packages/carbon-addons-devenv/src/apollo-client-hooks/hook_samples/Person/PersonFolioQueryProvider.js

@@ -11,13 +11,13 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import PeopleQueryProvider from './PeopleQueryProvider';
+import PersonFolioQueryProvider from './PersonFolioQueryProvider';
 import ApolloClientDataProvider from '../../core/ApolloClientDataProvider';
 
 const PeopleDataProvider = ({ configuration, apolloClient }) => {
   return (
     <ApolloClientDataProvider apolloClient={apolloClient} >
-      <PeopleQueryProvider configuration={configuration}/>
+      <PersonFolioQueryProvider configuration={configuration}/>
     </ApolloClientDataProvider>
   );
 };

packages/carbon-addons-devenv/src/apollo-client-hooks/hook_samples/Person/index.js

@@ -14,6 +14,10 @@ import ReactDOM from 'react-dom';
 import PeopleDataProvider from './hook_samples/Person';
 import LogoDataProvider from './hook_samples/Logo';
 import ApolloClientConfig from './core/ApolloClientConfig';
+import ApolloClientDataProvider from './core/ApolloClientDataProvider';
+import ApolloClientQueryProvider from './core/ApolloClientQueryProvider';
+import Renderer from '../../sample_renderers/Renderer';
+import settings from '../react';
 
 const RenderWithApolloClient = (container, configuration, DataProvider) => {
   const apolloClient = ApolloClientConfig.getConfig(configuration);
@@ -36,4 +40,7 @@ const RenderPersonWithApolloClient = (container, configuration) => {
   RenderWithApolloClient(container, configuration, PeopleDataProvider);
 };
 
-export { RenderLogoWithApolloClient, RenderPersonWithApolloClient };
+// this is the the 2 sample apollo client compponents used
+const RendererListWithApolloClient = { RenderLogoWithApolloClient, RenderPersonWithApolloClient };
+
+export { RendererListWithApolloClient, RenderWithApolloClient, ApolloClientDataProvider, ApolloClientQueryProvider, Renderer, settings };

packages/carbon-addons-devenv/src/apollo-client-hooks/index.js

@@ -1,12 +1,12 @@
 
 import "../../custom-carbon-addons/src/scss/index.scss";
 import 'regenerator-runtime/runtime';
-import { renderers } from './staticExports';
+import { renderers, sampleRenderers } from './staticExports';
 
  import {
     requireCustomCarbonAddons,
   } from './dynamicExports';
 
-  export default  { requireCustomCarbonAddons, renderers };
+  export default  { requireCustomCarbonAddons, renderers, sampleRenderers };
 
 

packages/carbon-addons-devenv/src/index.js

@@ -12,7 +12,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import settings from '../../settings';
+import settings from '../../core/settings';
 
  /**
   * Example component.

packages/carbon-addons-devenv/src/react/component_samples/Logo/Logo.js

@@ -11,7 +11,7 @@
 
 import { mount } from 'enzyme';
 import React from 'react';import Logo from '../Logo';
-import settings from '../../../settings';
+import settings from '../../../core/settings';
 
 
 describe('Logo tests', () => {
@@ -43,7 +43,7 @@ describe('Logo tests', () => {
     expect(logoDiv.at(0).childAt(0).props().alt).toBe("small logo");  
   });
 
-  it('tests Logo all attributes', () => {
+  it('tests size and className attributes', () => {
     const largeLogo = mount(
       <Logo size="large" className="settings.prefix--logo--extraextra" id="logo_123">
           <img src="../sample-logo.jpg" alt="small logo" />
@@ -67,6 +67,18 @@ describe('Logo tests', () => {
     // child node already tested previoussly
   });
 
+  it('tests optional attributes', () => {
+    const logoWithImageName = mount(
+      <Logo size="large" imageName="image123.jpeg">
+        <span>child</span>
+       </Logo>
+    );
+
+    const logoDiv = logoWithImageName.find('div');
+    // check that the root div exists
+    expect(logoDiv.exists()).toBeTruthy();
+  });
+
 });