@capillarytech/creatives-library 1.0.1-alpha.0 → 1.0.2

package/app.js

@@ -8,13 +8,11 @@
 // Needed for redux-saga es6 generator support
 import '@babel/polyfill';
 import React from 'react';
-import { createRoot } from 'react-dom/client';
+import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import FontFaceObserver from 'fontfaceobserver';
-import { addLocizeSavedHandler, startStandalone } from 'locize';
 import Bugsnag from '@bugsnag/js';
 import BugsnagPluginReact from '@bugsnag/plugin-react';
-import { configureStore } from '@capillarytech/vulcan-react-sdk/utils';
 import 'sanitize.css/sanitize.css';
 
 import SomethingWentWrong from './components/molecules/SomethingWentWrong';
@@ -29,10 +27,9 @@ import '!file-loader?name=[name].[ext]!./favicon.ico';
 import 'file-loader?name=.htaccess!./.htaccess';
 /* eslint-enable import/no-unresolved, import/extensions */
 
+import configureStore from './configureStore';
 import initialState from './initialState';
 import { translationMessages } from './i18n';
-import { initialReducer } from './initialReducer';
-import history from './utils/history';
 
 const openSansObserver = new FontFaceObserver('Roboto', {});
 
@@ -48,7 +45,7 @@ openSansObserver
   });
 
 // Create redux store with history
-const store = configureStore(initialState, initialReducer, history);
+const store = configureStore(initialState, history);
 const MOUNT_NODE = document.getElementById('loyalty-app');
 
 const bugSnagErrorCallback = event => {
@@ -108,16 +105,16 @@ export const BugsnagClient = Bugsnag;
 
 const ErrorScreen = () => <SomethingWentWrong />;
 
-const root = createRoot(MOUNT_NODE);
 const render = messages => {
-  root.render(
+  ReactDOM.render(
     <Provider store={store}>
       <ErrorBoundary FallbackComponent={ErrorScreen}>
         <LanguageProvider messages={messages}>
           <App />
         </LanguageProvider>
       </ErrorBoundary>
-    </Provider>
+    </Provider>,
+    MOUNT_NODE,
   );
 };
 
@@ -126,23 +123,11 @@ if (module.hot) {
   // modules.hot.accept does not accept dynamic dependencies,
   // have to be constants at compile-time
   module.hot.accept(['./i18n', 'components/pages/App'], () => {
+    ReactDOM.unmountComponentAtNode(MOUNT_NODE);
     render(translationMessages);
   });
 }
 
-// for auto render UI on locize saved, since we cache the translations in redis it can't be update on real time as of now
-// need to comment as of now
-// addLocizeSavedHandler(res => {
-//   res.updated.forEach(item => {
-//     const { lng, ns, key, data } = item
-//     // load the translations somewhere...
-//     // and maybe rerender your UI
-//   })
-// })
-
-// start
-startStandalone();
-
 // Chunked polyfill for browsers without Intl support
 if (!window.Intl) {
   new Promise(resolve => {
@@ -156,3 +141,10 @@ if (!window.Intl) {
 } else {
   render(translationMessages);
 }
+
+// Install ServiceWorker and AppCache in the end since
+// it's not most important operation and if main code fails,
+// we do not want it installed
+if (process.env.NODE_ENV === 'production') {
+  require('offline-plugin/runtime').install(); // eslint-disable-line global-require
+}

package/components/atoms/AvatarIcon/stories/AvatarIcon.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import AvatarIcon from '../AvatarIcon';
+
+storiesOf('AvatarIcon', module).add('default', () => (
+  <AvatarIcon
+    text="AV"
+    className="class-name"
+    backgroundColor="red"
+    textColor="#ffff"
+  />
+));

package/components/atoms/EllipsisText/EllipsisText.js

@@ -2,12 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-const EllipsisText = ({ title, className, style }) => (
-  <span
-    className={classnames('truncate-text', className)}
-    title={title}
-    style={style}
-  >
+const EllipsisText = ({ title, className }) => (
+  <span className={classnames('truncate-text', className)} title={title}>
     {title}
   </span>
 );

package/components/atoms/EllipsisText/index.js

@@ -1 +1,2 @@
-export { default } from './EllipsisText';
+export {default} from './EllipsisText';
+

package/components/atoms/GroupItemLabel/GroupItemLabel.js

@@ -0,0 +1,45 @@
+/**
+ *
+ * GroupItemLabel
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import withStyles from 'utils/withStyles';
+
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+
+import styles from './style';
+
+export const GroupItemLabel = ({ className, label, onClick, itemId }) => {
+  const onGroupItemClick = () => onClick(itemId);
+
+  return (
+    <CapHeading
+      type="h5"
+      onClick={onGroupItemClick}
+      title={typeof label === 'string' && label}
+      className={classnames(className, 'group-item')}
+    >
+      {label}
+    </CapHeading>
+  );
+};
+
+GroupItemLabel.propTypes = {
+  label: PropTypes.string,
+  onClick: PropTypes.func,
+  className: PropTypes.string,
+  itemId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+};
+
+GroupItemLabel.defaultProps = {
+  label: '',
+  itemId: '',
+  className: '',
+  onClick: () => {},
+};
+
+export default withStyles(GroupItemLabel, styles);

package/components/atoms/GroupItemLabel/style.js

@@ -0,0 +1,15 @@
+import { css } from 'styled-components';
+import StyledVars from '@capillarytech/cap-ui-library/styled';
+
+const { CAP_SPACE_08, CAP_SPACE_40 } = StyledVars;
+
+export default css`
+  &.group-item {
+    display: flex;
+    align-items: center;
+    padding: 0 ${CAP_SPACE_08};
+    height: ${CAP_SPACE_40};
+    color: inherit;
+    font-weight: inherit;
+  }
+`;

package/components/atoms/GroupItemLabel/tests/__snapshots__/index.test.js.snap

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<GroupItemLabel /> atoms should render the GroupItemLabel 1`] = `
+<CapHeading
+  className="group-item"
+  onClick={[Function]}
+  title=""
+  type="h5"
+/>
+`;
+
+exports[`<GroupItemLabel /> atoms should render the GroupItemLabel with label 1`] = `
+<CapHeading
+  className="group-item"
+  onClick={[Function]}
+  title="new Label"
+  type="h5"
+>
+  new Label
+</CapHeading>
+`;
+
+exports[`<GroupItemLabel /> atoms should render the GroupItemLabel with tooltip skipped 1`] = `
+<CapHeading
+  className="group-item"
+  onClick={[Function]}
+  title={false}
+  type="h5"
+>
+  123
+</CapHeading>
+`;

package/components/atoms/GroupItemLabel/tests/index.test.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { GroupItemLabel } from '../GroupItemLabel';
+// import GroupItemLabel from '../index';
+
+describe('<GroupItemLabel /> atoms', () => {
+  it('should render the GroupItemLabel', () => {
+    const renderedComponent = shallow(<GroupItemLabel />);
+    expect(renderedComponent).toMatchSnapshot();
+  });
+  it('should render the GroupItemLabel with label', () => {
+    const renderedComponent = shallow(<GroupItemLabel label="new Label" />);
+    expect(renderedComponent).toMatchSnapshot();
+  });
+  it('should render the GroupItemLabel with tooltip skipped', () => {
+    const renderedComponent = shallow(<GroupItemLabel label={123} />);
+    expect(renderedComponent).toMatchSnapshot();
+  });
+  it('should render the GroupItemLabel with click action called once', () => {
+    const mockCallBack = jest.fn();
+    const renderedComponent = shallow(
+      <GroupItemLabel label="new Label" onClick={mockCallBack} />,
+    );
+    renderedComponent.simulate('click');
+    expect(mockCallBack.mock.calls.length).toEqual(1);
+  });
+  it('should render the GroupItemLabel with click action return correct result', () => {
+    const mockCallBack = jest.fn(x => x + 10);
+    const renderedComponent = shallow(
+      <GroupItemLabel label="new Label" onClick={() => mockCallBack(43)} />,
+    );
+    renderedComponent.simulate('click');
+    expect(mockCallBack.mock.results[0].value).toEqual(53);
+  });
+});

package/components/atoms/PrimaryInput/PrimaryInput.js

@@ -23,8 +23,6 @@ export const PrimaryInput = ({
   inductiveText,
   placeholder,
   value,
-  isError,
-  errorMessage,
   ...rest
 }) => {
   const Input = inputType === TYPE_NUMBER ? CapInput.Number : CapInput;
@@ -35,8 +33,6 @@ export const PrimaryInput = ({
       inductiveText={inductiveText}
       placeholder={placeholder}
       value={value}
-      isError={isError}
-      errorMessage={errorMessage}
       {...rest}
     />
   );

package/components/atoms/PrimarySelect/PrimarySelect.js

@@ -19,20 +19,22 @@ const PrimarySelect = ({
   value,
   onChange,
   ...rest
-}) => (
-  <CapSelect
-    className={className}
-    showArrow={showArrow}
-    showSearch={showSearch}
-    label={label}
-    placeholder={placeholder}
-    options={options}
-    value={value}
-    style={{ width: '166px' }}
-    onChange={onChange}
-    {...rest}
-  />
-);
+}) => {
+  return (
+    <CapSelect
+      className={className}
+      showArrow={showArrow}
+      showSearch={showSearch}
+      label={label}
+      placeholder={placeholder}
+      options={options}
+      value={value}
+      style={{ width: '166px' }}
+      onChange={onChange}
+      {...rest}
+    />
+  );
+};
 
 PrimarySelect.defaultProps = {
   className: '',

package/components/atoms/RenderRoute/tests/__snapshots__/index.test.js.snap

@@ -2,7 +2,11 @@
 
 exports[`<RenderRoute /> atoms should render the RenderRoute 1`] = `
 <MemoryRouter
-  keyLength={0}
+  initialEntries={
+    Array [
+      "/",
+    ]
+  }
 >
   <Router
     history={
@@ -14,6 +18,7 @@ exports[`<RenderRoute /> atoms should render the RenderRoute 1`] = `
         "entries": Array [
           Object {
             "hash": "",
+            "key": "mwii1x",
             "pathname": "/",
             "search": "",
             "state": undefined,
@@ -27,6 +32,7 @@ exports[`<RenderRoute /> atoms should render the RenderRoute 1`] = `
         "listen": [Function],
         "location": Object {
           "hash": "",
+          "key": "mwii1x",
           "pathname": "/",
           "search": "",
           "state": undefined,
@@ -44,23 +50,23 @@ exports[`<RenderRoute /> atoms should render the RenderRoute 1`] = `
             "className": "",
           },
           "attrs": Array [],
-          "componentStyle": e {
-            "baseHash": -1271465428,
-            "baseStyle": undefined,
+          "componentStyle": ComponentStyle {
             "componentId": "withStyles__StyledComponent-lzchdo-0",
             "isStatic": false,
+            "lastClassName": "hQXXx",
             "rules": Array [
               "font-size:1.5em;color:#000;",
               ";",
             ],
-            "staticRulesId": "",
           },
-          "foldedComponentIds": "",
+          "displayName": "withStyles__StyledComponent",
+          "foldedComponentIds": Array [],
           "render": [Function],
-          "shouldForwardProp": undefined,
           "styledComponentId": "withStyles__StyledComponent-lzchdo-0",
           "target": [Function],
+          "toString": [Function],
           "warnTooManyClasses": [Function],
+          "withComponent": [Function],
         }
       }
       path="/"
@@ -80,6 +86,7 @@ exports[`<RenderRoute /> atoms should render the RenderRoute 1`] = `
               "entries": Array [
                 Object {
                   "hash": "",
+                  "key": "mwii1x",
                   "pathname": "/",
                   "search": "",
                   "state": undefined,
@@ -93,6 +100,7 @@ exports[`<RenderRoute /> atoms should render the RenderRoute 1`] = `
               "listen": [Function],
               "location": Object {
                 "hash": "",
+                "key": "mwii1x",
                 "pathname": "/",
                 "search": "",
                 "state": undefined,
@@ -104,6 +112,7 @@ exports[`<RenderRoute /> atoms should render the RenderRoute 1`] = `
           location={
             Object {
               "hash": "",
+              "key": "mwii1x",
               "pathname": "/",
               "search": "",
               "state": undefined,
@@ -118,8 +127,35 @@ exports[`<RenderRoute /> atoms should render the RenderRoute 1`] = `
             }
           }
         >
-          <Heading
-            className="withStyles__StyledComponent-lzchdo-0 gUONsO"
+          <StyledComponent
+            className=""
+            forwardedComponent={
+              Object {
+                "$$typeof": Symbol(react.forward_ref),
+                "_foldedDefaultProps": Object {
+                  "className": "",
+                },
+                "attrs": Array [],
+                "componentStyle": ComponentStyle {
+                  "componentId": "withStyles__StyledComponent-lzchdo-0",
+                  "isStatic": false,
+                  "lastClassName": "hQXXx",
+                  "rules": Array [
+                    "font-size:1.5em;color:#000;",
+                    ";",
+                  ],
+                },
+                "displayName": "withStyles__StyledComponent",
+                "foldedComponentIds": Array [],
+                "render": [Function],
+                "styledComponentId": "withStyles__StyledComponent-lzchdo-0",
+                "target": [Function],
+                "toString": [Function],
+                "warnTooManyClasses": [Function],
+                "withComponent": [Function],
+              }
+            }
+            forwardedRef={null}
             history={
               Object {
                 "action": "POP",
@@ -129,6 +165,7 @@ exports[`<RenderRoute /> atoms should render the RenderRoute 1`] = `
                 "entries": Array [
                   Object {
                     "hash": "",
+                    "key": "mwii1x",
                     "pathname": "/",
                     "search": "",
                     "state": undefined,
@@ -142,6 +179,7 @@ exports[`<RenderRoute /> atoms should render the RenderRoute 1`] = `
                 "listen": [Function],
                 "location": Object {
                   "hash": "",
+                  "key": "mwii1x",
                   "pathname": "/",
                   "search": "",
                   "state": undefined,
@@ -153,6 +191,7 @@ exports[`<RenderRoute /> atoms should render the RenderRoute 1`] = `
             location={
               Object {
                 "hash": "",
+                "key": "mwii1x",
                 "pathname": "/",
                 "search": "",
                 "state": undefined,
@@ -167,10 +206,63 @@ exports[`<RenderRoute /> atoms should render the RenderRoute 1`] = `
               }
             }
           >
-            <h2
-              className="withStyles__StyledComponent-lzchdo-0 gUONsO"
-            />
-          </Heading>
+            <Heading
+              className="withStyles__StyledComponent-lzchdo-0 hQXXx"
+              history={
+                Object {
+                  "action": "POP",
+                  "block": [Function],
+                  "canGo": [Function],
+                  "createHref": [Function],
+                  "entries": Array [
+                    Object {
+                      "hash": "",
+                      "key": "mwii1x",
+                      "pathname": "/",
+                      "search": "",
+                      "state": undefined,
+                    },
+                  ],
+                  "go": [Function],
+                  "goBack": [Function],
+                  "goForward": [Function],
+                  "index": 0,
+                  "length": 1,
+                  "listen": [Function],
+                  "location": Object {
+                    "hash": "",
+                    "key": "mwii1x",
+                    "pathname": "/",
+                    "search": "",
+                    "state": undefined,
+                  },
+                  "push": [Function],
+                  "replace": [Function],
+                }
+              }
+              location={
+                Object {
+                  "hash": "",
+                  "key": "mwii1x",
+                  "pathname": "/",
+                  "search": "",
+                  "state": undefined,
+                }
+              }
+              match={
+                Object {
+                  "isExact": true,
+                  "params": Object {},
+                  "path": "/",
+                  "url": "/",
+                }
+              }
+            >
+              <h2
+                className="withStyles__StyledComponent-lzchdo-0 hQXXx"
+              />
+            </Heading>
+          </StyledComponent>
         </withStyles__StyledComponent>
       </Route>
     </RenderRoute>

package/components/atoms/RenderRoute/tests/index.test.js

@@ -7,7 +7,7 @@ import Heading from '../../Heading';
 describe('<RenderRoute /> atoms', () => {
   it('should render the RenderRoute', () => {
     const renderedComponent = mount(
-      <MemoryRouter keyLength={0}>
+      <MemoryRouter initialEntries={['/']}>
         <RenderRoute path="/" component={Heading} />
       </MemoryRouter>,
     );

package/components/atoms/ReonNotEnabled/ReonNotEnabled.js

@@ -101,7 +101,11 @@ const ReonNotEnabled = () => (
             </tspan>
           </text>
         </g>
-        <g id="Group" transform="translate(23.000000, 99.000000)" fontSize="14">
+        <g
+          id="Group"
+          transform="translate(23.000000, 99.000000)"
+          fontSize="14"
+        >
           <text
             id="Increase-your-program’s-impact-with-data-reporting"
             fill="#5E6C84"

package/components/atoms/SelectOptionLabelWithInfo/SelectOptionLabelWithInfo.js

@@ -16,12 +16,11 @@ import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 
 export const SelectOptionLabelWithInfo = ({
   className,
-  title,
-  tooltipText,
-  tooltipPlacement,
-  additionalClassName,
-  additionalRequiredAstrick,
-  additionalIconClassName,
+  title = '',
+  tooltipText = '',
+  additionalClassName = '',
+  additionalRequiredAstrick = '',
+  additionalIconClassName = '',
 }) => (
   <CapRow className={className}>
     <CapColumn span={23}>
@@ -39,13 +38,12 @@ export const SelectOptionLabelWithInfo = ({
       </CapHeading>
     </CapColumn>
     <CapColumn span={1}>
-      <CapTooltip title={tooltipText} placement={tooltipPlacement}>
+      <CapTooltip title={tooltipText}>
         <CapIcon
           type="info"
           size="s"
           className={classnames(
             'tooltip-info-icon-select',
-            'tree-search-icon',
             additionalIconClassName,
           )}
         />
@@ -61,7 +59,6 @@ SelectOptionLabelWithInfo.defaultProps = {
   additionalClassName: '',
   additionalRequiredAstrick: '',
   additionalIconClassName: '',
-  tooltipPlacement: 'top',
 };
 
 SelectOptionLabelWithInfo.propTypes = {
@@ -71,7 +68,6 @@ SelectOptionLabelWithInfo.propTypes = {
   additionalClassName: PropTypes.string,
   additionalRequiredAstrick: PropTypes.string,
   additionalIconClassName: PropTypes.string,
-  tooltipPlacement: PropTypes.string,
 };
 
 export default SelectOptionLabelWithInfo;

package/components/atoms/SelectOptionLabelWithInfo/tests/__snapshots__/index.test.js.snap

@@ -19,11 +19,10 @@ exports[`<SelectOptionLabelWithInfo /> atoms should render the SelectOptionLabel
     span={1}
   >
     <CapTooltip
-      placement="top"
       title=""
     >
       <CapIcon
-        className="tooltip-info-icon-select tree-search-icon"
+        className="tooltip-info-icon-select"
         size="s"
         type="info"
       />
@@ -53,11 +52,10 @@ exports[`<SelectOptionLabelWithInfo /> atoms should render the SelectOptionLabel
     span={1}
   >
     <CapTooltip
-      placement="top"
       title="tooltipText"
     >
       <CapIcon
-        className="tooltip-info-icon-select tree-search-icon additionalIconClassName"
+        className="tooltip-info-icon-select additionalIconClassName"
         size="s"
         type="info"
       />

package/components/atoms/TriggerAction/TriggerAction.js

@@ -16,7 +16,7 @@ export const TriggerAction = ({
   <CapButton
     id={id}
     className={className}
-    type="primary"
+    type={isDisabled ? 'secondary' : 'primary'}
     disabled={isDisabled}
     onClick={triggerAction}
   >
@@ -27,6 +27,7 @@ export const TriggerAction = ({
 TriggerAction.defaultProps = {
   className: '',
   title: '',
+  triggerAction: () => {},
   isDisabled: true,
   id: '',
 };

package/components/atoms/TriggerAction/index.js

@@ -1 +1 @@
-export { default } from './TriggerAction';
+export {default} from './TriggerAction';

package/components/atoms/TriggerAction/tests/__snapshots__/index.test.js.snap

@@ -6,7 +6,8 @@ exports[`<TriggerAction /> atoms should render the TriggerAction 1`] = `
   disabled={true}
   id=""
   isAddBtn={false}
-  type="primary"
+  onClick={[Function]}
+  type="secondary"
 />
 `;
 
@@ -16,7 +17,8 @@ exports[`<TriggerAction /> atoms should render the TriggerAction with isDisabled
   disabled={true}
   id=""
   isAddBtn={false}
-  type="primary"
+  onClick={[Function]}
+  type="secondary"
 >
   Save Workflow
 </CapButton>
@@ -28,7 +30,8 @@ exports[`<TriggerAction /> atoms should render the TriggerAction with title 1`]
   disabled={true}
   id="saveWorkflow"
   isAddBtn={false}
-  type="primary"
+  onClick={[Function]}
+  type="secondary"
 >
   Save Workflow
 </CapButton>