chore: update demo app

Author: themgoncalves

demo/components/formatter/formatter.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactJson from 'react-json-view';
-import is from "@cookbook/dot-notation/utils/is";
+import is from '@cookbook/mapper-js/utils/is';
 
 interface Formatter {
   title?: string;

demo/screens/playground/demos/mapper.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import data from '@cookbook/mapper-js/__mocks__/data'
+
+import Formatter from '../../../components/formatter';
+import styles from '../../shared/styles';
+
+import mapping from './mapping';
+
+const Playground: React.FunctionComponent<Record<string, unknown>> = () => {
+
+  return (
+    <div style={styles.row}>
+      <div style={styles.col}>
+        <div style={styles.row}>
+          <Formatter title="Data source" source={data} />
+        </div>
+      </div>
+      <div style={styles.col}>
+        <Formatter title="Output" source={mapping(data)} />
+      </div>
+    </div>
+  );
+};
+
+export default Playground;

demo/screens/playground/demos/mapping.ts

@@ -0,0 +1,11 @@
+import mapper from '@cookbook/mapper-js';
+
+const mapping = mapper((map) => ({
+  active: map<boolean>('isActive').value,
+  'account.balance': map<string>('balance').value,
+  'person.age': map<string>('age').value,
+  'person.address': map('address').value,
+  commonFriends: map('commonFriends').value,
+}));
+
+export default mapping;

demo/screens/playground/demos/parse-key.tsx

@@ -2,26 +2,18 @@ import React from 'react';
 
 import Menu from '../shared/menu';
 
-import Pick from './demos/pick';
-import Parse from './demos/parse';
-import ParseKey from './demos/parse-key';
+import Mapper from './demos/mapper';
 
 const selectView = (state: string, action: string ): React.ReactNode => {
   switch (action) {
-    case 'parse':
-      return Parse;
-
-    case 'parse-key':
-      return ParseKey;
-
-    case 'pick':
+    case 'mapper':
     default:
-      return Pick;
+      return Mapper;
   }
 }
 
 const Playground: React.FunctionComponent<Record<string, unknown>> = () => {
-  const [View, dispatch] = React.useReducer(selectView, Pick);
+  const [View, dispatch] = React.useReducer(selectView, Mapper);
 
   const handleOnClick = (value: string): void => {
     dispatch(value);
@@ -37,6 +29,7 @@ const Playground: React.FunctionComponent<Record<string, unknown>> = () => {
           color: '#fff',
           height: '100%',
           padding: 22,
+          overflow: 'auto',
         }}
         className="bg-pan-left"
       >

demo/screens/playground/demos/parse.tsx

@@ -8,16 +8,8 @@ interface Category {
 
 const menu: Category[] = [
   {
-    label: 'Pick',
-    value: 'pick'
-  },
-  {
-    label: 'Parse',
-    value: 'parse'
-  },
-  {
-    label: 'Parse key',
-    value: 'parse-key'
+    label: 'Default',
+    value: 'mapper'
   },
 ];