├── src
    ├── README.md
    ├── design
    │   ├── index.js
    │   ├── urls.js
    │   └── serial.js
    ├── AppContext.js
    ├── SelectionContext.js
    ├── Tree
    │   ├── DragDropContext.js
    │   ├── TreeContext.js
    │   ├── AddButton.js
    │   ├── Help.js
    │   ├── ScreenDropArea.js
    │   ├── AddMethod.js
    │   ├── ComponentDropArea.js
    │   ├── Export.js
    │   ├── GenerateCode.js
    │   ├── ConfirmDelete.js
    │   ├── Data.js
    │   ├── AddLibraries.js
    │   ├── Duplicate.js
    │   ├── AddTemplates.js
    │   ├── AddLocation.js
    │   ├── AddComponent.js
    │   ├── Screen.js
    │   ├── DesignSettings.js
    │   └── Tree.js
    ├── libraries
    │   ├── grommet
    │   │   ├── index.js
    │   │   ├── InlineOption.js
    │   │   ├── ReorderIcon.js
    │   │   ├── BackButton.js
    │   │   ├── DataViews.js
    │   │   ├── TextAreaValue.js
    │   │   ├── WeightState.js
    │   │   ├── TextInputSuggestions.js
    │   │   ├── SizeState.js
    │   │   ├── GridAlign.js
    │   │   ├── UndefinedOption.js
    │   │   ├── SizeOptions.js
    │   │   ├── VariedOption.js
    │   │   ├── BoxJustify.js
    │   │   ├── BoxDirection.js
    │   │   ├── BoxAlign.js
    │   │   ├── WeightOptions.js
    │   │   ├── EdgeSizeOptions.js
    │   │   ├── JsonData.js
    │   │   ├── TrueOption.js
    │   │   ├── ImageSrc.js
    │   │   ├── HeadingLevel.js
    │   │   ├── DataChartAxis.js
    │   │   ├── TextAlign.js
    │   │   ├── DataTablePrimaryKey.js
    │   │   ├── useDebounce.js
    │   │   ├── BoxBackgroundImage.js
    │   │   ├── InlineOptions.js
    │   │   ├── DropAlign.js
    │   │   ├── EdgeSizeState.js
    │   │   ├── GridGap.js
    │   │   ├── BoxGridArea.js
    │   │   ├── DataChartBounds.js
    │   │   ├── BoxHoverIndicator.js
    │   │   ├── ChartBounds.js
    │   │   ├── Dimension.js
    │   │   ├── DataChartSeries.js
    │   │   ├── ChartValues.js
    │   │   ├── HeadingMargin.js
    │   │   ├── BoxRound.js
    │   │   ├── structure.js
    │   │   ├── Edge.js
    │   │   ├── starters.js
    │   │   ├── LayoutState.js
    │   │   ├── SelectOptions.js
    │   │   ├── BoxPad.js
    │   │   ├── ObjectOfObjects.js
    │   │   └── MeterValues.js
    │   └── designer
    │   │   ├── Alternative.js
    │   │   ├── index.js
    │   │   ├── Icon.js
    │   │   └── IFrame.js
    ├── Loading.js
    ├── utils.js
    ├── DesignComponent.js
    ├── Properties
    │   ├── OptionsProperty.js
    │   ├── ComponentProperty.js
    │   ├── TextAreaField.js
    │   ├── TextInputField.js
    │   ├── StringProperty.js
    │   ├── ComponentCode.js
    │   ├── LinkLabel.js
    │   ├── BooleanProperty.js
    │   ├── DataPathField.js
    │   ├── StringOrComponentProperty.js
    │   ├── NumberProperty.js
    │   ├── LinkProperty.js
    │   ├── IconProperty.js
    │   ├── ReferenceProperty.js
    │   ├── ComponentInput.js
    │   ├── StringOrBooleanProperty.js
    │   ├── ColorProperty.js
    │   ├── ObjectProperty.js
    │   ├── LinkOptionsProperty.js
    │   ├── LinkPropertyOptions.js
    │   ├── FunctionProperty.js
    │   ├── ArrayProperty.js
    │   ├── ScreenDetails.js
    │   └── Replace.js
    ├── index.js
    ├── friendlyState.js
    ├── templates
    │   ├── blankPage.json
    │   ├── details.json
    │   ├── list.json
    │   ├── table.json
    │   └── dashboard.json
    ├── components
    │   ├── Field.js
    │   └── Action.js
    ├── Canvas2.js
    ├── Auth.js
    ├── ConfirmReplace.js
    ├── ErrorCatcher.js
    ├── NotFound.js
    ├── friendlyDate.js
    ├── App.test.js
    ├── useDebounce.js
    ├── AppSettings.js
    ├── Router.js
    ├── InlineEditInput.js
    ├── NewScreen.js
    ├── Space.js
    └── Data.js
├── public
    ├── _redirects
    ├── shortcut-icon.png
    ├── manifest.json
    └── index.html
├── .prettierrc
├── funcs
    └── designs
    │   └── package.json
├── .editorconfig
├── .gitignore
├── config-overrides.js
└── package.json


/src/README.md:
--------------------------------------------------------------------------------
1 | ../README.md


--------------------------------------------------------------------------------
/public/_redirects:
--------------------------------------------------------------------------------
1 | /*                        /index.html                       200
2 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "trailingComma": "all",
3 |   "singleQuote": true,
4 |   "printWidth": 80
5 | }
6 | 


--------------------------------------------------------------------------------
/public/shortcut-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/grommet/grommet-designer/HEAD/public/shortcut-icon.png


--------------------------------------------------------------------------------
/src/design/index.js:
--------------------------------------------------------------------------------
1 | export * from './urls';
2 | export * from './code';
3 | export * from './serial';
4 | export * from './upgrade';
5 | 


--------------------------------------------------------------------------------
/src/AppContext.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 | 
3 | const AppContext = createContext(undefined);
4 | 
5 | export default AppContext;
6 | 


--------------------------------------------------------------------------------
/src/SelectionContext.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 | 
3 | const SelectionContext = createContext(undefined);
4 | 
5 | export default SelectionContext;
6 | 


--------------------------------------------------------------------------------
/src/Tree/DragDropContext.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 | 
3 | const DragDropContext = createContext(undefined);
4 | 
5 | export default DragDropContext;
6 | 


--------------------------------------------------------------------------------
/src/Tree/TreeContext.js:
--------------------------------------------------------------------------------
1 | import { createContext } from 'react';
2 | 
3 | // TODO: remove file
4 | const TreeContext = createContext(undefined);
5 | 
6 | export default TreeContext;
7 | 


--------------------------------------------------------------------------------
/src/design/urls.js:
--------------------------------------------------------------------------------
1 | export const apiUrl =
2 |   'https://us-central1-grommet-designer.cloudfunctions.net/designs';
3 | // export const apiUrl = 'http://localhost:8080';
4 | export const themeApiUrl =
5 |   'https://us-central1-grommet-designer.cloudfunctions.net/themes';
6 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/index.js:
--------------------------------------------------------------------------------
 1 | import { components } from './components';
 2 | import { starters } from './starters';
 3 | import { structure } from './structure';
 4 | 
 5 | const index = {
 6 |   name: 'grommet',
 7 |   components,
 8 |   starters,
 9 |   structure,
10 | };
11 | 
12 | export default index;
13 | 


--------------------------------------------------------------------------------
/funcs/designs/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "designs",
 3 |   "version": "1.0.0",
 4 |   "dependencies": {
 5 |     "@google-cloud/functions-framework": "^3.0.0",
 6 |     "@google-cloud/storage": "^5.12.0",
 7 |     "node-fetch": "^3.2.1"
 8 |   },
 9 |   "scripts": {
10 |     "start": "functions-framework --target=designs"
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/src/Loading.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, Text } from 'grommet';
 3 | 
 4 | const Loading = () => (
 5 |   <Box height="100vh" pad="large" align="center" justify="center">
 6 |     <Box animation="pulse">
 7 |       <Text size="xlarge">loading</Text>
 8 |     </Box>
 9 |   </Box>
10 | );
11 | 
12 | export default Loading;
13 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | end_of_line = lf
 7 | indent_size = 2
 8 | indent_style = space
 9 | max_line_length = 80
10 | trim_trailing_whitespace = true
11 | 
12 | [*.md]
13 | max_line_length = 0
14 | trim_trailing_whitespace = false
15 | 
16 | [COMMIT_EDITMSG]
17 | max_line_length = 0
18 | 


--------------------------------------------------------------------------------
/src/Tree/AddButton.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, Button } from 'grommet';
 3 | 
 4 | const AddButton = ({ label, onClick }) => (
 5 |   <Button hoverIndicator onClick={onClick} aria-label={`Add ${label}`}>
 6 |     <Box pad={{ horizontal: 'small', vertical: 'xsmall' }}>{label}</Box>
 7 |   </Button>
 8 | );
 9 | 
10 | export default AddButton;
11 | 


--------------------------------------------------------------------------------
/src/libraries/designer/Alternative.js:
--------------------------------------------------------------------------------
 1 | import { Children } from 'react';
 2 | 
 3 | const Alternative = ({ active, children }) => {
 4 |   if (Array.isArray(active)) {
 5 |     return Children.toArray(children).filter((_, i) => active.includes(i + 1));
 6 |   }
 7 |   return Children.toArray(children)[active - 1] || null;
 8 | };
 9 | 
10 | export default Alternative;
11 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     }
10 |   ],
11 |   "start_url": ".",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/InlineOption.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, Tip } from 'grommet';
 3 | 
 4 | const InlineOption = ({ border, children, label, pad }) => {
 5 |   return (
 6 |     <Tip content={label}>
 7 |       <Box border={border} pad={pad || 'xsmall'}>
 8 |         {children}
 9 |       </Box>
10 |     </Tip>
11 |   );
12 | };
13 | 
14 | export default InlineOption;
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/ReorderIcon.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Blank } from 'grommet-icons';
 3 | 
 4 | const ReorderIcon = () => (
 5 |   <Blank>
 6 |     <g strokeWidth={2} strokeLinecap="square">
 7 |       <path d="M 3,6 L 7,2 L 11,6 M 7,2 L 7,22" fill="none" stroke={2} />
 8 |       <path d="M 13,18 L 17,22 L 21,18 M 17,22 L 17,2" fill="none" stroke={2} />
 9 |     </g>
10 |   </Blank>
11 | );
12 | 
13 | export default ReorderIcon;
14 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/BackButton.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Button } from 'grommet';
 3 | import { Previous } from 'grommet-icons';
 4 | 
 5 | const BackButton = ({ onClick, title }) => (
 6 |   <Button
 7 |     icon={<Previous />}
 8 |     hoverIndicator
 9 |     tip={{
10 |       content: title,
11 |       dropProps: { align: { left: 'right' } },
12 |     }}
13 |     onClick={onClick}
14 |   />
15 | );
16 | 
17 | export default BackButton;
18 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/DataViews.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ArrayOfObjects from './ArrayOfObjects';
 3 | import DataViewProp from './DataView';
 4 | 
 5 | const DataViews = ({ value, onChange, ...rest }) => (
 6 |   <ArrayOfObjects
 7 |     name="views"
 8 |     itemKey="name"
 9 |     labelKey="name"
10 |     value={value}
11 |     Edit={DataViewProp}
12 |     onChange={onChange}
13 |     {...rest}
14 |   />
15 | );
16 | 
17 | export default DataViews;
18 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
 1 | export const parseUrlParams = (url) => {
 2 |   const params = {};
 3 |   (url.split('?')[1] || '').split('&').forEach((p) => {
 4 |     const [k, v] = p.split('=');
 5 |     params[k] = decodeURIComponent(v);
 6 |   });
 7 |   return params;
 8 | };
 9 | 
10 | export const pushUrl = (url) => {
11 |   window.history.pushState(undefined, undefined, url);
12 | };
13 | 
14 | export const pushPath = (path) => {
15 |   pushUrl(path + window.location.search);
16 | };
17 | 


--------------------------------------------------------------------------------
/src/design/serial.js:
--------------------------------------------------------------------------------
 1 | export const serialize = (design, selected) => {
 2 |   const result = { components: {} };
 3 | 
 4 |   const addComponent = id => {
 5 |     const component = design.components[id];
 6 |     result.components[id] = component;
 7 |     if (component.children) {
 8 |       component.children.forEach(i => addComponent(i));
 9 |     }
10 |   };
11 | 
12 |   addComponent(selected.component);
13 | 
14 |   return JSON.stringify({ design: result, selected });
15 | };
16 | 


--------------------------------------------------------------------------------
/src/libraries/designer/index.js:
--------------------------------------------------------------------------------
 1 | import { Blank } from 'grommet-icons';
 2 | import { components } from './components';
 3 | 
 4 | const structure = [
 5 |   {
 6 |     name: 'Design',
 7 |     Icon: Blank,
 8 |     components: [
 9 |       'Alternative',
10 |       'Icon',
11 |       'IFrame',
12 |       'Repeater',
13 |       'Reference',
14 |       'Screen',
15 |     ],
16 |   },
17 | ];
18 | 
19 | const index = {
20 |   name: 'designer',
21 |   components,
22 |   structure,
23 | };
24 | 
25 | export default index;
26 | 


--------------------------------------------------------------------------------
/src/DesignComponent.js:
--------------------------------------------------------------------------------
 1 | import { createElement } from 'react';
 2 | import useDesignComponent from './useDesignComponent';
 3 | 
 4 | // pass style so selection of a Reference shows the selection indicator
 5 | const DesignComponent = ({ id, datum, style }) => {
 6 |   const { Component, props, children } = useDesignComponent(id, datum, style);
 7 | 
 8 |   if (!Component) return null;
 9 | 
10 |   return createElement(Component, { key: id, id: id, ...props }, children);
11 | };
12 | 
13 | export default DesignComponent;
14 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/TextAreaValue.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, TextArea } from 'grommet';
 3 | 
 4 | const TextAreaValue = ({ value, onChange }) => {
 5 |   return (
 6 |     <Box>
 7 |       <TextArea
 8 |         rows={20}
 9 |         cols={80}
10 |         value={value}
11 |         onChange={(event) => {
12 |           const nextValue = event.target.value;
13 |           onChange(nextValue);
14 |         }}
15 |       />
16 |     </Box>
17 |   );
18 | };
19 | 
20 | export default TextAreaValue;
21 | 


--------------------------------------------------------------------------------
/src/Properties/OptionsProperty.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ArrayProperty from './ArrayProperty';
 3 | 
 4 | const OptionsProperty = React.forwardRef(
 5 |   ({ multiple, name, onChange, options, value }, ref) => {
 6 |     return (
 7 |       <ArrayProperty
 8 |         ref={ref}
 9 |         name={name}
10 |         multiple={multiple}
11 |         options={options}
12 |         value={value}
13 |         onChange={onChange}
14 |       />
15 |     );
16 |   },
17 | );
18 | 
19 | export default OptionsProperty;
20 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { createRoot } from 'react-dom/client';
 3 | import App from './App';
 4 | import * as serviceWorker from './serviceWorker';
 5 | 
 6 | const container = document.getElementById('root');
 7 | const root = createRoot(container);
 8 | root.render(<App />);
 9 | 
10 | // If you want your app to work offline and load faster, you can change
11 | // unregister() to register() below. Note this comes with some pitfalls.
12 | // Learn more about service workers: https://bit.ly/CRA-PWA
13 | serviceWorker.unregister();
14 | 


--------------------------------------------------------------------------------
/src/friendlyState.js:
--------------------------------------------------------------------------------
 1 | const friendlyState = (key, design) => {
 2 |   const designs = JSON.parse(localStorage.getItem('designs') || '[]');
 3 |   if (!design.name) return 'unknown';
 4 |   if (!designs.find((des) => des.id === design.id || des.name === design.name))
 5 |     return 'orphaned';
 6 |   if (key === design.id) return 'cached';
 7 |   if (key === design.name) {
 8 |     if (!design.id) return 'unpublished';
 9 |     if (design.date !== design.publishedDate) return 'changed';
10 |     return 'published';
11 |   }
12 |   return 'unknown';
13 | };
14 | 
15 | export default friendlyState;
16 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/WeightState.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Text } from 'grommet';
 3 | import InlineOption from './InlineOption';
 4 | 
 5 | const short = {
 6 |   bold: 'B',
 7 |   normal: 'N',
 8 | };
 9 | 
10 | const WeightState = ({ checked, weight }) => {
11 |   return (
12 |     <InlineOption checked={checked} label={weight}>
13 |       <Text
14 |         weight={weight === 'bold' ? 'bold' : undefined}
15 |         color={checked ? 'selected-background' : 'border'}
16 |       >
17 |         {short[weight] || 'x'}
18 |       </Text>
19 |     </InlineOption>
20 |   );
21 | };
22 | 
23 | export default WeightState;
24 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/TextInputSuggestions.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, Paragraph, TextArea } from 'grommet';
 3 | 
 4 | const TextInputSuggestions = ({ value, onChange }) => {
 5 |   return (
 6 |     <Box>
 7 |       <Paragraph margin="none">One per line</Paragraph>
 8 |       <TextArea
 9 |         rows={4}
10 |         cols={20}
11 |         value={value ? value.join('\n') : ''}
12 |         onChange={(event) => {
13 |           const nextValue = event.target.value;
14 |           onChange(nextValue ? nextValue.split('\n') : '');
15 |         }}
16 |       />
17 |     </Box>
18 |   );
19 | };
20 | 
21 | export default TextInputSuggestions;
22 | 


--------------------------------------------------------------------------------
/src/Properties/ComponentProperty.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Field from '../components/Field';
 3 | import ComponentInput from './ComponentInput';
 4 | 
 5 | const ComponentProperty = React.forwardRef(
 6 |   ({ name, onChange, value, ...rest }, ref) => {
 7 |     const htmlId = `component-${name}`;
 8 |     return (
 9 |       <Field key={name} label={name} htmlFor={htmlId}>
10 |         <ComponentInput
11 |           htmlId={htmlId}
12 |           name={name}
13 |           value={value}
14 |           onChange={onChange}
15 |           {...rest}
16 |         />
17 |       </Field>
18 |     );
19 |   },
20 | );
21 | 
22 | export default ComponentProperty;
23 | 


--------------------------------------------------------------------------------
/src/templates/blankPage.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "blank page",
 3 |   "theme": "grommet",
 4 |   "screens": {
 5 |     "1": {
 6 |       "id": 1,
 7 |       "name": "empty page",
 8 |       "root": 2,
 9 |       "path": "/"
10 |     }
11 |   },
12 |   "screenOrder": [1],
13 |   "components": {
14 |     "2": {
15 |       "id": 2,
16 |       "type": "grommet.Page",
17 |       "props": {},
18 |       "children": [3]
19 |     },
20 |     "3": {
21 |       "id": 3,
22 |       "type": "grommet.PageContent",
23 |       "props": {}
24 |     }
25 |   },
26 |   "nextId": 4,
27 |   "date": "2022-05-06T00:48:05.000Z",
28 |   "created": "2022-05-06T00:48:05.646Z",
29 |   "imports": [],
30 |   "version": 3.7
31 | }
32 | 


--------------------------------------------------------------------------------
/src/Properties/TextAreaField.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { TextArea } from 'grommet';
 3 | import Field from '../components/Field';
 4 | import useDebounce from '../useDebounce';
 5 | 
 6 | const TextAreaField = ({ onChange, name, value: valueProp }) => {
 7 |   const [value, setValue] = useDebounce(valueProp, onChange);
 8 |   return (
 9 |     <Field label={name} htmlFor={name}>
10 |       <TextArea
11 |         id={name}
12 |         name={name}
13 |         plain
14 |         value={value}
15 |         onChange={(event) => setValue(event.target.value)}
16 |         style={{ textAlign: 'end' }}
17 |       />
18 |     </Field>
19 |   );
20 | };
21 | 
22 | export default TextAreaField;
23 | 


--------------------------------------------------------------------------------
/src/Properties/TextInputField.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { TextInput } from 'grommet';
 3 | import Field from '../components/Field';
 4 | import useDebounce from '../useDebounce';
 5 | 
 6 | const TextInputField = ({ onChange, name, value: valueProp }) => {
 7 |   const [value, setValue] = useDebounce(valueProp, onChange);
 8 |   return (
 9 |     <Field label={name} htmlFor={name}>
10 |       <TextInput
11 |         id={name}
12 |         name={name}
13 |         plain
14 |         value={value || ''}
15 |         onChange={(event) => setValue(event.target.value)}
16 |         style={{ textAlign: 'end' }}
17 |       />
18 |     </Field>
19 |   );
20 | };
21 | 
22 | export default TextInputField;
23 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/SizeState.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Text } from 'grommet';
 3 | import InlineOption from './InlineOption';
 4 | 
 5 | const short = {
 6 |   xxsmall: 'xxS',
 7 |   xsmall: 'xS',
 8 |   small: 'S',
 9 |   medium: 'M',
10 |   large: 'L',
11 |   xlarge: 'xL',
12 |   xxlarge: 'xxL',
13 | };
14 | 
15 | const SizeState = ({ checked, size }) => {
16 |   return (
17 |     <InlineOption checked={checked} label={size}>
18 |       <Text
19 |         size={size}
20 |         weight={checked ? 'bold' : undefined}
21 |         color={checked ? 'selected-background' : 'border'}
22 |       >
23 |         {short[size] || 'x'}
24 |       </Text>
25 |     </InlineOption>
26 |   );
27 | };
28 | 
29 | export default SizeState;
30 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/GridAlign.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import InlineOptions from './InlineOptions';
 3 | import LayoutState from './LayoutState';
 4 | 
 5 | const options = ['stretch', 'start', 'center', 'end'];
 6 | 
 7 | const GridAlign = ({ props, ...rest }) => {
 8 |   const { justify } = props;
 9 |   return (
10 |     <InlineOptions name="align" options={options} {...rest}>
11 |       {(option, { checked }) => (
12 |         <LayoutState
13 |           align={option.value}
14 |           axis="cross"
15 |           direction="column"
16 |           justify={justify}
17 |           label={option.label}
18 |           checked={checked}
19 |         />
20 |       )}
21 |     </InlineOptions>
22 |   );
23 | };
24 | 
25 | GridAlign.inline = true;
26 | 
27 | export default GridAlign;
28 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/UndefinedOption.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Blank } from 'grommet-icons';
 3 | import InlineOption from './InlineOption';
 4 | 
 5 | const stroke = {
 6 |   strokeWidth: 1,
 7 |   strokeLinecap: 'square',
 8 | };
 9 | 
10 | export const undefinedOption = {
11 |   label: 'undefined',
12 |   value: undefined,
13 |   domValue: '-',
14 | };
15 | 
16 | const UndefinedOption = ({ checked }) => (
17 |   <InlineOption checked={checked} label={undefinedOption.label}>
18 |     <Blank color={checked ? 'selected-text' : 'border'}>
19 |       <g {...stroke}>
20 |         <line key="1" x1={8} y1={8} x2={16} y2={16} />
21 |         <line key="2" x1={8} y1={16} x2={16} y2={8} />
22 |       </g>
23 |     </Blank>
24 |   </InlineOption>
25 | );
26 | 
27 | export default UndefinedOption;
28 | 


--------------------------------------------------------------------------------
/src/Properties/StringProperty.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { TextInput } from 'grommet';
 3 | import Field from '../components/Field';
 4 | import useDebounce from '../useDebounce';
 5 | 
 6 | const StringProperty = React.forwardRef(
 7 |   ({ name, onChange, value: valueProp }, ref) => {
 8 |     const [value, setValue] = useDebounce(valueProp, onChange);
 9 |     return (
10 |       <Field key={name} label={name} htmlFor={name}>
11 |         <TextInput
12 |           ref={ref}
13 |           id={name}
14 |           name={name}
15 |           plain
16 |           value={value || ''}
17 |           onChange={(event) => setValue(event.target.value || undefined)}
18 |           style={{ textAlign: 'end' }}
19 |         />
20 |       </Field>
21 |     );
22 |   },
23 | );
24 | 
25 | export default StringProperty;
26 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/SizeOptions.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import InlineOptions from './InlineOptions';
 3 | import SizeState from './SizeState';
 4 | import { undefinedOption } from './UndefinedOption';
 5 | 
 6 | const SizeOptions = ({ options }) => {
 7 |   const SizeOptions = (props) => {
 8 |     const adjustedOptions = props.value
 9 |       ? options.concat(undefinedOption)
10 |       : options;
11 |     return (
12 |       <InlineOptions name={props.name} options={adjustedOptions} {...props}>
13 |         {(option, { checked }) => {
14 |           return (
15 |             <SizeState {...props.props} size={option.value} checked={checked} />
16 |           );
17 |         }}
18 |       </InlineOptions>
19 |     );
20 |   };
21 | 
22 |   SizeOptions.inline = true;
23 | 
24 |   return SizeOptions;
25 | };
26 | 
27 | export default SizeOptions;
28 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/VariedOption.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Blank } from 'grommet-icons';
 3 | import InlineOption from './InlineOption';
 4 | 
 5 | const stroke = {
 6 |   strokeWidth: 1,
 7 |   strokeLinecap: 'square',
 8 | };
 9 | 
10 | export const variedOption = { label: 'varied', value: {}, domValue: '{}' };
11 | 
12 | const VariedOption = ({ checked }) => (
13 |   <InlineOption checked={checked} label={variedOption.label}>
14 |     <Blank color={checked ? 'selected-text' : 'border'}>
15 |       <g {...stroke}>
16 |         <line key="1" x1={8} y1={2} x2={16} y2={2} />
17 |         <line key="2" x1={22} y1={8} x2={22} y2={16} />
18 |         <line key="3" x1={16} y1={22} x2={8} y2={22} />
19 |         <line key="4" x1={2} y1={16} x2={2} y2={8} />
20 |       </g>
21 |     </Blank>
22 |   </InlineOption>
23 | );
24 | 
25 | export default VariedOption;
26 | 


--------------------------------------------------------------------------------
/src/Properties/ComponentCode.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from 'react';
 2 | import { Button, Header, Heading, Layer, TextArea } from 'grommet';
 3 | import { Close } from 'grommet-icons';
 4 | import { generateJSX } from '../design';
 5 | 
 6 | const ComponentCode = ({ id, onDone }) => {
 7 |   const [code, setCode] = useState();
 8 |   useEffect(() => setCode(generateJSX(id)), [id]);
 9 |   return (
10 |     <Layer onClickOutside={onDone} onEsc={onDone}>
11 |       <Header>
12 |         <Heading
13 |           level={2}
14 |           size="small"
15 |           margin={{ vertical: 'none', horizontal: 'medium' }}
16 |         >
17 |           code
18 |         </Heading>
19 |         <Button icon={<Close />} onClick={onDone} />
20 |       </Header>
21 |       <TextArea value={code} rows={20} cols={40} readOnly />
22 |     </Layer>
23 |   );
24 | };
25 | 
26 | export default ComponentCode;
27 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/BoxJustify.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { useComponent } from '../../design2';
 3 | import InlineOptions from './InlineOptions';
 4 | import LayoutState from './LayoutState';
 5 | 
 6 | const options = ['start', 'center', 'end', 'between'];
 7 | 
 8 | const BoxJustify = ({ id, ...rest }) => {
 9 |   const component = useComponent(id);
10 |   const { align, direction } = component.props;
11 |   return (
12 |     <InlineOptions name="justify" options={options} {...rest}>
13 |       {(option, { checked }) => (
14 |         <LayoutState
15 |           align={align}
16 |           axis="main"
17 |           direction={direction}
18 |           justify={option.value}
19 |           label={option.value}
20 |           checked={checked}
21 |         />
22 |       )}
23 |     </InlineOptions>
24 |   );
25 | };
26 | 
27 | BoxJustify.inline = true;
28 | 
29 | export default BoxJustify;
30 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/BoxDirection.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { useComponent } from '../../design2';
 3 | import InlineOptions from './InlineOptions';
 4 | import LayoutState from './LayoutState';
 5 | 
 6 | const options = ['column', 'row', 'row-responsive'];
 7 | 
 8 | const BoxDirection = ({ id, ...rest }) => {
 9 |   const component = useComponent(id);
10 |   const { align, justify } = component.props;
11 |   return (
12 |     <InlineOptions name="direction" options={options} {...rest}>
13 |       {(option, { checked }) => (
14 |         <LayoutState
15 |           align={align}
16 |           axis="main"
17 |           direction={option.value}
18 |           justify={justify}
19 |           label={option.label}
20 |           checked={checked}
21 |         />
22 |       )}
23 |     </InlineOptions>
24 |   );
25 | };
26 | 
27 | BoxDirection.inline = true;
28 | 
29 | export default BoxDirection;
30 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/BoxAlign.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { useComponent } from '../../design2';
 3 | import InlineOptions from './InlineOptions';
 4 | import LayoutState from './LayoutState';
 5 | 
 6 | const options = ['stretch', 'start', 'center', 'end', 'baseline'];
 7 | 
 8 | const BoxAlign = ({ id, ...rest }) => {
 9 |   const component = useComponent(id);
10 |   const { direction, justify } = component.props;
11 |   return (
12 |     <InlineOptions name="align" options={options} {...rest}>
13 |       {(option, { checked }) => (
14 |         <LayoutState
15 |           align={option.value}
16 |           axis="cross"
17 |           direction={direction}
18 |           justify={justify}
19 |           label={option.label}
20 |           checked={checked}
21 |         />
22 |       )}
23 |     </InlineOptions>
24 |   );
25 | };
26 | 
27 | BoxAlign.inline = true;
28 | 
29 | export default BoxAlign;
30 | 


--------------------------------------------------------------------------------
/src/Properties/LinkLabel.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, Text } from 'grommet';
 3 | import { getName } from '../design2';
 4 | 
 5 | const LinkLabel = ({ selected, value }) => {
 6 |   let label;
 7 |   if (!value || value.length === 0) {
 8 |     label = '';
 9 |   } else if (value.component) {
10 |     label = getName(value.component);
11 |   } else if (value.screen) {
12 |     label = getName(value.screen);
13 |   } else if (value.label) {
14 |     label = value.label;
15 |   } else if (Array.isArray(value)) {
16 |     label = value.map((v) => v.label).join(', ');
17 |   } else if (typeof value === 'string') {
18 |     // defensive
19 |     label = value;
20 |   } else {
21 |     label = JSON.stringify(value);
22 |   }
23 |   return (
24 |     <Box pad="small">
25 |       <Text weight={selected ? 'bold' : undefined}>{label}&nbsp;</Text>
26 |     </Box>
27 |   );
28 | };
29 | 
30 | export default LinkLabel;
31 | 


--------------------------------------------------------------------------------
/src/components/Field.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, Paragraph, Text } from 'grommet';
 3 | 
 4 | const Field = React.forwardRef(
 5 |   ({ children, label, help, htmlFor, ...rest }, ref) => (
 6 |     <Box
 7 |       ref={ref}
 8 |       direction="row"
 9 |       align="center"
10 |       justify="between"
11 |       border="bottom"
12 |       pad={{ horizontal: 'xsmall' }}
13 |       {...rest}
14 |     >
15 |       <Box
16 |         as="label"
17 |         flex={false}
18 |         pad={{ vertical: 'xsmall', horizontal: 'xsmall' }}
19 |         htmlFor={htmlFor}
20 |       >
21 |         <Text>{label}</Text>
22 |         {help && (
23 |           <Box>
24 |             <Paragraph color="text-xweak" margin="none">
25 |               {help}
26 |             </Paragraph>
27 |           </Box>
28 |         )}
29 |       </Box>
30 |       {children}
31 |     </Box>
32 |   ),
33 | );
34 | 
35 | export default Field;
36 | 


--------------------------------------------------------------------------------
/src/Tree/Help.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from 'react';
 2 | import { Box, Markdown } from 'grommet';
 3 | import Action from '../components/Action';
 4 | import readmePath from '../README.md';
 5 | 
 6 | const Help = ({ onClose }) => {
 7 |   const [readme, setReadme] = useState();
 8 | 
 9 |   useEffect(() => {
10 |     fetch(readmePath)
11 |       .then((response) => {
12 |         if (response.ok) {
13 |           response
14 |             .text()
15 |             .then((text) => setReadme(text.split('\n').splice(8).join('\n')));
16 |         }
17 |       })
18 |       .catch();
19 |   }, []);
20 | 
21 |   return (
22 |     <Action label="help" onClose={onClose}>
23 |       <Box flex={false}>
24 |         {readme && (
25 |           <Box flex={false}>
26 |             <Markdown>{readme}</Markdown>
27 |           </Box>
28 |         )}
29 |       </Box>
30 |     </Action>
31 |   );
32 | };
33 | 
34 | export default Help;
35 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/WeightOptions.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import InlineOptions from './InlineOptions';
 3 | import WeightState from './WeightState';
 4 | import { undefinedOption } from './UndefinedOption';
 5 | 
 6 | const WeightOption = ({ options }) => {
 7 |   const WeightOptions = (props) => {
 8 |     const adjustedOptions = props.value
 9 |       ? options.concat(undefinedOption)
10 |       : options;
11 |     return (
12 |       <InlineOptions name={props.name} options={adjustedOptions} {...props}>
13 |         {(option, { checked }) => {
14 |           return (
15 |             <WeightState
16 |               {...props.props}
17 |               weight={option.value}
18 |               checked={checked}
19 |             />
20 |           );
21 |         }}
22 |       </InlineOptions>
23 |     );
24 |   };
25 | 
26 |   WeightOptions.inline = true;
27 | 
28 |   return WeightOptions;
29 | };
30 | 
31 | export default WeightOption;
32 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/EdgeSizeOptions.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import InlineOptions from './InlineOptions';
 3 | import EdgeSizeState from './EdgeSizeState';
 4 | import { undefinedOption } from './UndefinedOption';
 5 | 
 6 | const EdgeSizeOptions = ({ options, direction }) => {
 7 |   const EdgeSizeOptions = (props) => {
 8 |     const adjustedOptions = props.value
 9 |       ? options.concat(undefinedOption)
10 |       : options;
11 |     return (
12 |       <InlineOptions name={props.name} options={adjustedOptions} {...props}>
13 |         {(option, { checked }) => (
14 |           <EdgeSizeState
15 |             {...props}
16 |             size={option.label}
17 |             checked={checked}
18 |             direction={direction || props.direction}
19 |           />
20 |         )}
21 |       </InlineOptions>
22 |     );
23 |   };
24 | 
25 |   EdgeSizeOptions.inline = true;
26 | 
27 |   return EdgeSizeOptions;
28 | };
29 | 
30 | export default EdgeSizeOptions;
31 | 


--------------------------------------------------------------------------------
/src/Properties/BooleanProperty.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, CheckBox } from 'grommet';
 3 | import { FormClose } from 'grommet-icons';
 4 | import Field from '../components/Field';
 5 | 
 6 | const BooleanProperty = React.forwardRef(({ name, onChange, value }, ref) => (
 7 |   <Field key={name} label={name} htmlFor={name}>
 8 |     <Box pad="small" direction="row" align="center" gap="small">
 9 |       <CheckBox
10 |         ref={ref}
11 |         id={name}
12 |         name={name}
13 |         checked={!!value}
14 |         onChange={(event) => onChange(event.target.checked)}
15 |       />
16 |       {value === false && (
17 |         <Box
18 |           title="undefine"
19 |           pad="xsmall"
20 |           round="xsmall"
21 |           hoverIndicator
22 |           onClick={() => onChange(undefined)}
23 |         >
24 |           <FormClose />
25 |         </Box>
26 |       )}
27 |     </Box>
28 |   </Field>
29 | ));
30 | 
31 | export default BooleanProperty;
32 | 


--------------------------------------------------------------------------------
/src/libraries/designer/Icon.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, Text } from 'grommet';
 3 | import * as icons from 'grommet-icons';
 4 | import metadata from 'grommet-icons/metadata';
 5 | 
 6 | const exp = new RegExp(/^[A-Z]/);
 7 | export const names = Object.keys(icons).filter((n) => exp.test(n));
 8 | export const aliases = metadata;
 9 | 
10 | // map size to align with font sizes better, empirically determined,
11 | // maybe work into grommet someday?
12 | const sizes = {
13 |   small: '20px',
14 |   large: '32px',
15 | };
16 | 
17 | export const SelectLabel = ({ selected, value }) => (
18 |   <Box pad="xsmall" direction="row" gap="small" align="center">
19 |     <Icon icon={value} />
20 |     <Text weight={selected ? 'bold' : undefined}>{value}</Text>
21 |   </Box>
22 | );
23 | 
24 | const Icon = ({ icon, size, ...rest }) => {
25 |   const Icon = icons[icon] || icons.Blank;
26 |   return <Icon {...rest} size={size ? sizes[size] || size : undefined} />;
27 | };
28 | 
29 | export default Icon;
30 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/JsonData.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, Text, TextArea } from 'grommet';
 3 | 
 4 | const JsonData = ({ value, onChange }) => {
 5 |   const [text, setText] = React.useState(JSON.stringify(value, null, 2));
 6 |   const [error, setError] = React.useState(false);
 7 |   return (
 8 |     <Box width="medium">
 9 |       <TextArea
10 |         rows={20}
11 |         value={text}
12 |         onChange={(event) => {
13 |           const value = event.target.value;
14 |           setText(value);
15 |           if (value) {
16 |             try {
17 |               const t = JSON.parse(value);
18 |               setError(false);
19 |               onChange(t);
20 |             } catch (e) {
21 |               setError(e.message);
22 |             }
23 |           } else {
24 |             onChange(undefined);
25 |           }
26 |         }}
27 |       />
28 |       {error && <Text color="status-critical">{error}</Text>}
29 |     </Box>
30 |   );
31 | };
32 | 
33 | export default JsonData;
34 | 


--------------------------------------------------------------------------------
/src/libraries/designer/IFrame.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useRef, useState } from 'react';
 2 | import styled from 'styled-components';
 3 | 
 4 | const StyledIFrame = styled.iframe`
 5 |   border: none;
 6 | `;
 7 | 
 8 | const IFrame = ({ src, title }) => {
 9 |   const [dimensions, setDimensions] = useState([100, 100]);
10 |   const ref = useRef();
11 |   useEffect(() => {
12 |     const align = () => {
13 |       const { width, height } = ref.current.parentNode.getBoundingClientRect();
14 |       if (width !== dimensions[0] || height !== dimensions[1]) {
15 |         setDimensions([width, height]);
16 |       }
17 |     };
18 | 
19 |     window.addEventListener('resize', align);
20 |     align();
21 |     return () => window.removeEventListener('resize', align);
22 |   }, [dimensions]);
23 | 
24 |   return (
25 |     <StyledIFrame
26 |       ref={ref}
27 |       title={title}
28 |       width={dimensions[0]}
29 |       height={dimensions[1]}
30 |       src={src}
31 |     />
32 |   );
33 | };
34 | 
35 | export default IFrame;
36 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/TrueOption.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Blank } from 'grommet-icons';
 3 | import InlineOption from './InlineOption';
 4 | 
 5 | const stroke = {
 6 |   strokeWidth: 1,
 7 |   strokeLinecap: 'square',
 8 | };
 9 | 
10 | export const trueOption = { label: 'true', value: true, domValue: 'true' };
11 | 
12 | const TrueOption = ({ checked }) => (
13 |   <InlineOption checked={checked} label={trueOption.label}>
14 |     <Blank color={checked ? 'selected-text' : 'border'}>
15 |       <g {...stroke}>
16 |         <line x1={2} y1={2} x2={22} y2={2} />
17 |         <line x1={22} y1={2} x2={22} y2={22} />
18 |         <line x1={22} y1={22} x2={2} y2={22} />
19 |         <line x1={2} y1={22} x2={2} y2={2} />
20 |       </g>
21 |       {checked && (
22 |         <g strokeWidth={2} strokeLinecap="round">
23 |           <line x1={7} y1={12} x2={12} y2={17} />
24 |           <line x1={12} y1={17} x2={17} y2={7} />
25 |         </g>
26 |       )}
27 |     </Blank>
28 |   </InlineOption>
29 | );
30 | 
31 | export default TrueOption;
32 | 


--------------------------------------------------------------------------------
/src/Canvas2.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from 'react';
 2 | import { Box, Grommet, Paragraph } from 'grommet';
 3 | import { useTheme } from './design2';
 4 | import AppContext from './AppContext';
 5 | import DesignComponent from './DesignComponent';
 6 | 
 7 | const Canvas = ({ root }) => {
 8 |   const { direction, grommetThemeMode } = useContext(AppContext);
 9 |   const theme = useTheme();
10 | 
11 |   const content = root ? (
12 |     <DesignComponent id={root} />
13 |   ) : (
14 |     <Box align="center">
15 |       <Paragraph size="large" textAlign="center" color="placeholder">
16 |         This is currently empty. Add a layout component to start building it
17 |         out.
18 |       </Paragraph>
19 |     </Box>
20 |   );
21 | 
22 |   return (
23 |     <Grommet
24 |       id="designer-canvas"
25 |       theme={theme}
26 |       themeMode={grommetThemeMode}
27 |       dir={direction}
28 |       full="min"
29 |       // style={{ height: '1px' }}
30 |     >
31 |       {content}
32 |     </Grommet>
33 |   );
34 | };
35 | 
36 | export default Canvas;
37 | 


--------------------------------------------------------------------------------
/src/Tree/ScreenDropArea.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext, useState } from 'react';
 2 | import { Box } from 'grommet';
 3 | import { moveScreen } from '../design2';
 4 | import DragDropContext from './DragDropContext';
 5 | 
 6 | const ScreenDropArea = ({ id, where }) => {
 7 |   const [dragging] = useContext(DragDropContext);
 8 |   const [dragOver, setDragOver] = useState();
 9 | 
10 |   return (
11 |     <Box
12 |       pad="xxsmall"
13 |       background={(dragOver && 'focus') || undefined}
14 |       onDragEnter={(event) => {
15 |         if (dragging && dragging !== id) {
16 |           event.preventDefault();
17 |           setDragOver(true);
18 |         }
19 |       }}
20 |       onDragOver={(event) => {
21 |         if (dragOver) event.preventDefault();
22 |       }}
23 |       onDragLeave={() => setDragOver(false)}
24 |       onDrop={() => {
25 |         if (dragOver) {
26 |           moveScreen(dragging, { [where]: id });
27 |           setDragOver(false);
28 |         }
29 |       }}
30 |     />
31 |   );
32 | };
33 | 
34 | export default ScreenDropArea;
35 | 


--------------------------------------------------------------------------------
/config-overrides.js:
--------------------------------------------------------------------------------
 1 | const {
 2 |   override,
 3 |   addWebpackExternals,
 4 |   addWebpackPlugin,
 5 | } = require('customize-cra');
 6 | const CopyWebpackPlugin = require('copy-webpack-plugin');
 7 | 
 8 | module.exports = override(
 9 |   addWebpackExternals({
10 |     react: 'React',
11 |     'react-dom': 'ReactDOM',
12 |     grommet: 'Grommet',
13 |     'grommet-icons': 'GrommetIcons',
14 |     'styled-components': 'styled',
15 |   }),
16 |   addWebpackPlugin(
17 |     new CopyWebpackPlugin({
18 |       patterns: [
19 |         { from: './node_modules/grommet/grommet.min.js' },
20 |         { from: './node_modules/grommet-icons/grommet-icons.min.js' },
21 |         { from: './node_modules/react/umd/react.production.min.js' },
22 |         { from: './node_modules/react-dom/umd/react-dom.production.min.js' },
23 |         { from: './node_modules/react-is/umd/react-is.production.min.js' },
24 |         {
25 |           from:
26 |             './node_modules/styled-components/dist/styled-components.min.js',
27 |         },
28 |       ],
29 |     }),
30 |   ),
31 | );
32 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/ImageSrc.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, Paragraph, TextArea } from 'grommet';
 3 | 
 4 | const svgPrefix = 'data:image/svg+xml;utf8,';
 5 | 
 6 | const stripPrefix = (value) => {
 7 |   if (value && value.slice(0, svgPrefix.length) === svgPrefix) {
 8 |     return value.slice(svgPrefix.length);
 9 |   }
10 |   return value || '';
11 | };
12 | 
13 | const ImageSrc = ({ value, onChange }) => {
14 |   return (
15 |     <Box>
16 |       <Paragraph margin="none" fill>
17 |         URL or &lt;svg&gt; markup. If using SVG, you must convert '#' to '%23'.
18 |       </Paragraph>
19 |       <TextArea
20 |         rows={4}
21 |         cols={80}
22 |         value={stripPrefix(value)}
23 |         onChange={(event) => {
24 |           const nextValue = event.target.value;
25 |           if (nextValue[0] === '<') {
26 |             onChange(`${svgPrefix}${nextValue}`);
27 |           } else {
28 |             onChange(nextValue);
29 |           }
30 |         }}
31 |       />
32 |     </Box>
33 |   );
34 | };
35 | 
36 | export default ImageSrc;
37 | 


--------------------------------------------------------------------------------
/src/Auth.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, Button, Form, Header, Text, TextInput } from 'grommet';
 3 | import { Next } from 'grommet-icons';
 4 | 
 5 | const Auth = ({ onCancel, onChange }) => (
 6 |   <Box height="100vh">
 7 |     <Header justify="center" background="background-contrast">
 8 |       <Button href="/" hoverIndicator onClick={onCancel}>
 9 |         <Box pad={{ horizontal: 'medium', vertical: 'small' }}>
10 |           <Text>grommet designer</Text>
11 |         </Box>
12 |       </Button>
13 |     </Header>
14 |     <Box flex align="center" justify="center">
15 |       <Form
16 |         onSubmit={({ value: { password } }) => {
17 |           onChange(password);
18 |         }}
19 |       >
20 |         <Box direction="row" gap="medium">
21 |           <TextInput
22 |             size="large"
23 |             name="password"
24 |             placeholder="password"
25 |             type="password"
26 |           />
27 |           <Button type="submit" icon={<Next />} hoverIndicator />
28 |         </Box>
29 |       </Form>
30 |     </Box>
31 |   </Box>
32 | );
33 | 
34 | export default Auth;
35 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/HeadingLevel.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Text } from 'grommet';
 3 | import InlineOptions from './InlineOptions';
 4 | import InlineOption from './InlineOption';
 5 | 
 6 | const options = ['1', '2', '3', '4'];
 7 | 
 8 | const size = {
 9 |   1: 'xlarge',
10 |   2: 'large',
11 |   3: 'medium',
12 |   4: 'small',
13 | };
14 | 
15 | const HeadingLevel = (props) => {
16 |   return (
17 |     <InlineOptions name={props.name} options={options} {...props}>
18 |       {(option, { checked }) => {
19 |         return (
20 |           <InlineOption
21 |             checked={checked}
22 |             pad={{ vertical: 'xsmall', horizontal: 'small' }}
23 |           >
24 |             <Text
25 |               size={size[option.value]}
26 |               weight={checked ? 'bold' : undefined}
27 |               color={checked ? 'selected-background' : 'border'}
28 |             >
29 |               {option.label}
30 |             </Text>
31 |           </InlineOption>
32 |         );
33 |       }}
34 |     </InlineOptions>
35 |   );
36 | };
37 | 
38 | HeadingLevel.inline = true;
39 | 
40 | export default HeadingLevel;
41 | 


--------------------------------------------------------------------------------
/src/ConfirmReplace.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, Button, Layer, Paragraph, Text } from 'grommet';
 3 | 
 4 | const ConfirmReplace = ({ design, nextDesign, onDone }) => (
 5 |   <Layer
 6 |     position="top"
 7 |     margin="medium"
 8 |     modal
 9 |     onEsc={() => onDone(undefined)}
10 |     onClickOutside={() => onDone(undefined)}
11 |   >
12 |     <Box pad="large">
13 |       <Paragraph>
14 |         You already have a design named <Text weight="bold">{design.name}</Text>
15 |         . If you make a change, you will replace your local copy. If you do not
16 |         want to replace your copy, you should rename this design.
17 |       </Paragraph>
18 |       <Box direction="row" align="center" gap="medium">
19 |         <Button
20 |           label={`Replace my ${design.name}`}
21 |           onClick={() => {
22 |             nextDesign.derivedFromId = design.id;
23 |             nextDesign.local = true;
24 |             onDone(nextDesign);
25 |           }}
26 |         />
27 |         <Button label="Discard change" onClick={() => onDone(undefined)} />
28 |       </Box>
29 |     </Box>
30 |   </Layer>
31 | );
32 | 
33 | export default ConfirmReplace;
34 | 


--------------------------------------------------------------------------------
/src/components/Action.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, Button, Heading, Layer } from 'grommet';
 3 | import { Close } from 'grommet-icons';
 4 | 
 5 | const Action = ({ children, label, onClose, ...rest }) => (
 6 |   <Layer
 7 |     position="top"
 8 |     margin="medium"
 9 |     modal
10 |     {...rest}
11 |     onEsc={onClose}
12 |     onClickOutside={onClose}
13 |   >
14 |     <Box flex elevation="medium">
15 |       <Box flex={false} direction="row" align="center" justify="between">
16 |         <Button
17 |           title="close"
18 |           tip="close"
19 |           icon={<Close />}
20 |           hoverIndicator
21 |           onClick={onClose}
22 |         />
23 |         {label && (
24 |           <Heading
25 |             level={2}
26 |             size="small"
27 |             margin={{ vertical: 'none', horizontal: 'large' }}
28 |           >
29 |             {label}
30 |           </Heading>
31 |         )}
32 |       </Box>
33 |       <Box flex pad={{ horizontal: 'large', bottom: 'large' }} overflow="auto">
34 |         <Box flex={false}>{children}</Box>
35 |       </Box>
36 |     </Box>
37 |   </Layer>
38 | );
39 | 
40 | export default Action;
41 | 


--------------------------------------------------------------------------------
/src/Tree/AddMethod.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, RadioButtonGroup, Tip } from 'grommet';
 3 | import { Copy, Link } from 'grommet-icons';
 4 | 
 5 | const methods = ['copy', 'reference'];
 6 | 
 7 | const methodIcons = {
 8 |   copy: Copy,
 9 |   reference: Link,
10 | };
11 | 
12 | const AddMethod = ({ id, value, onChange }) => {
13 |   React.useEffect(() => {
14 |     if (!value) onChange(methods[0]);
15 |   }, [value, onChange]);
16 | 
17 |   const Option = ({ option, checked }) => {
18 |     const Icon = methodIcons[option];
19 |     return (
20 |       <Tip content={option}>
21 |         <Box pad="xsmall">
22 |           <Icon color={checked ? 'selected-text' : 'border'} />
23 |         </Box>
24 |       </Tip>
25 |     );
26 |   };
27 | 
28 |   return (
29 |     <RadioButtonGroup
30 |       id={id}
31 |       name={`${id}-add-method`}
32 |       options={methods}
33 |       value={value || methods[0]}
34 |       onChange={(event) => onChange(event.target.value)}
35 |       direction="row"
36 |     >
37 |       {(option, { checked }) => <Option option={option} checked={checked} />}
38 |     </RadioButtonGroup>
39 |   );
40 | };
41 | 
42 | export default AddMethod;
43 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/DataChartAxis.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, Button, CheckBox } from 'grommet';
 3 | import { FormDown } from 'grommet-icons';
 4 | 
 5 | const DataChartAxis = (props) => {
 6 |   const { value, onChange } = props;
 7 |   return (
 8 |     <Box direction="row" margin={{ end: 'small' }} gap="small">
 9 |       <CheckBox checked={!!value} onChange={() => onChange(!value)} />
10 |       {value && (
11 |         <Button
12 |           icon={<FormDown />}
13 |           hoverIndicator
14 |           onClick={() => {
15 |             if (typeof value === 'object') onChange(true);
16 |             else onChange({});
17 |           }}
18 |         />
19 |       )}
20 |     </Box>
21 |   );
22 | };
23 | 
24 | DataChartAxis.inline = true;
25 | 
26 | DataChartAxis.dynamicProperty = ({ value }) => {
27 |   if (typeof value === 'object') {
28 |     return {
29 |       x: {
30 |         property: '',
31 |         granularity: ['coarse', 'medium', 'fine'],
32 |       },
33 |       y: {
34 |         property: '',
35 |         granularity: ['coarse', 'medium', 'fine'],
36 |       },
37 |     };
38 |   }
39 |   return DataChartAxis;
40 | };
41 | 
42 | export default DataChartAxis;
43 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/TextAlign.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, Text } from 'grommet';
 3 | import InlineOptions from './InlineOptions';
 4 | import InlineOption from './InlineOption';
 5 | 
 6 | const options = ['start', 'center', 'end'];
 7 | 
 8 | const TextAlign = (props) => {
 9 |   return (
10 |     <InlineOptions name={props.name} options={options} {...props}>
11 |       {(option, { checked }) => {
12 |         const pad = {};
13 |         const { label, value } = option;
14 |         if (value === 'start') pad.right = 'small';
15 |         else if (value === 'center') pad.horizontal = 'xsmall';
16 |         else if (value === 'end') pad.left = 'small';
17 |         return (
18 |           <InlineOption checked={checked} label={label}>
19 |             <Box pad={pad} border="vertical">
20 |               <Text
21 |                 weight={checked ? 'bold' : undefined}
22 |                 color={checked ? 'selected-background' : 'border'}
23 |               >
24 |                 a
25 |               </Text>
26 |             </Box>
27 |           </InlineOption>
28 |         );
29 |       }}
30 |     </InlineOptions>
31 |   );
32 | };
33 | 
34 | TextAlign.inline = true;
35 | 
36 | export default TextAlign;
37 | 


--------------------------------------------------------------------------------
/src/ErrorCatcher.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import ReactGA from 'react-ga';
 3 | import { Box, Text } from 'grommet';
 4 | import { Alert } from 'grommet-icons';
 5 | 
 6 | // have to use a class to use componentDidCatch()
 7 | class ErrorCatcher extends Component {
 8 |   static getDerivedStateFromProps(nextProps, prevState) {
 9 |     if (prevState.error && prevState.error !== nextProps.design) {
10 |       return { error: undefined };
11 |     }
12 |     return null;
13 |   }
14 | 
15 |   state = {};
16 | 
17 |   componentDidCatch() {
18 |     this.setState({ error: this.props.design });
19 |     ReactGA.exception({
20 |       description: 'failed to render design',
21 |     });
22 |   }
23 | 
24 |   render() {
25 |     const { children } = this.props;
26 |     const { error } = this.state;
27 |     if (error) {
28 |       return (
29 |         <Box align="center" justify="center" background="white" gap="medium">
30 |           <Alert color="status-critical" size="large" />
31 |           <Text color="status-critical" size="large">
32 |             something broke
33 |           </Text>
34 |         </Box>
35 |       );
36 |     }
37 |     return children;
38 |   }
39 | }
40 | 
41 | export default ErrorCatcher;
42 | 


--------------------------------------------------------------------------------
/src/NotFound.js:
--------------------------------------------------------------------------------
 1 | import React, { useMemo } from 'react';
 2 | import { Box, Button, Text } from 'grommet';
 3 | import { DocumentMissing, Trash } from 'grommet-icons';
 4 | import { removeDesign, useDesigns } from './design2';
 5 | 
 6 | const NotFound = ({ id, onDone }) => {
 7 |   const designs = useDesigns();
 8 | 
 9 |   const indexed = useMemo(
10 |     () => designs.find((d) => d.id === id) && true,
11 |     [designs, id],
12 |   );
13 | 
14 |   return (
15 |     <Box
16 |       height="100vh"
17 |       pad="large"
18 |       align="center"
19 |       justify="center"
20 |       background="linear-gradient(#66666600, #66666633)"
21 |       animation="fadeIn"
22 |     >
23 |       <Box gap="medium" align="center">
24 |         <Text size="xlarge">bummer, we cannot find it</Text>
25 |         <DocumentMissing size="large" />
26 |         {indexed && (
27 |           <Button
28 |             icon={<Trash />}
29 |             title="remove from index of designs we know about"
30 |             hoverIndicator
31 |             onClick={() => {
32 |               removeDesign(id);
33 |               onDone();
34 |             }}
35 |           />
36 |         )}
37 |       </Box>
38 |     </Box>
39 |   );
40 | };
41 | 
42 | export default NotFound;
43 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/DataTablePrimaryKey.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, Select, Text } from 'grommet';
 3 | 
 4 | const OptionLabel = ({ selected, value }) => (
 5 |   <Box pad="small">
 6 |     <Text weight={selected ? 'bold' : undefined}>
 7 |       {(typeof value !== 'string' ? JSON.stringify(value) : value) || ''}
 8 |     </Text>
 9 |   </Box>
10 | );
11 | 
12 | const PrimaryKey = ({ dropTarget, onChange, value }) => {
13 |   return (
14 |     <Select
15 |       plain
16 |       dropTarget={dropTarget}
17 |       id="primary"
18 |       name="primary"
19 |       options={['false', 'undefined']}
20 |       value={typeof value === 'boolean' ? value.toString() : value || ''}
21 |       valueLabel={<OptionLabel value={value} selected />}
22 |       onChange={({ option }) => {
23 |         let nextValue = option;
24 |         if (option === 'undefined') nextValue = undefined;
25 |         if (option === 'false') nextValue = false;
26 |         onChange(nextValue);
27 |       }}
28 |     >
29 |       {(option, index, options, { selected }) => (
30 |         <OptionLabel value={option} selected={selected} />
31 |       )}
32 |     </Select>
33 |   );
34 | };
35 | 
36 | PrimaryKey.inline = true;
37 | 
38 | export default PrimaryKey;
39 | 


--------------------------------------------------------------------------------
/src/Properties/DataPathField.js:
--------------------------------------------------------------------------------
 1 | import React, { forwardRef, useEffect, useState } from 'react';
 2 | import { Button, TextInput } from 'grommet';
 3 | import { FormClose } from 'grommet-icons';
 4 | import Field from '../components/Field';
 5 | 
 6 | const DataPathField = forwardRef(({ name, onChange, value }, ref) => {
 7 |   const [dataPath, setDataPath] = useState(value);
 8 | 
 9 |   useEffect(() => {
10 |     if (document.activeElement === ref.current)
11 |       ref.current.setSelectionRange(1, 1);
12 |   }, [ref]);
13 | 
14 |   return (
15 |     <Field label={name} htmlFor={name}>
16 |       <TextInput
17 |         ref={ref}
18 |         id={name}
19 |         name={name}
20 |         plain
21 |         value={dataPath}
22 |         onChange={(event) => {
23 |           const { value: nextValue } = event.target;
24 |           setDataPath(nextValue);
25 |           if (nextValue[0] === '{') onChange(nextValue);
26 |         }}
27 |         style={{ textAlign: 'end' }}
28 |       />
29 | 
30 |       <Button
31 |         icon={<FormClose />}
32 |         onClick={() => {
33 |           setDataPath(undefined);
34 |           onChange(undefined);
35 |         }}
36 |       />
37 |     </Field>
38 |   );
39 | });
40 | 
41 | export default DataPathField;
42 | 


--------------------------------------------------------------------------------
/src/Properties/StringOrComponentProperty.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, TextInput } from 'grommet';
 3 | import Field from '../components/Field';
 4 | import useDebounce from '../useDebounce';
 5 | import ComponentInput from './ComponentInput';
 6 | 
 7 | const StringOrComponentProperty = React.forwardRef(
 8 |   (
 9 |     { name, onChange, value: valueProp, ...rest },
10 |     ref,
11 |   ) => {
12 |     const [value, setValue] = useDebounce(valueProp, onChange);
13 |     return (
14 |       <Field key={name} label={name} htmlFor={name}>
15 |         <Box direction="row" gap="small">
16 |           <ComponentInput
17 |             name={name}
18 |             value={value}
19 |             onChange={onChange}
20 |             {...rest}
21 |           />
22 |           {typeof value !== 'number' && (
23 |             <TextInput
24 |               ref={ref}
25 |               id={name}
26 |               name={name}
27 |               plain
28 |               value={value || ''}
29 |               onChange={(event) => setValue(event.target.value)}
30 |               style={{ textAlign: 'end' }}
31 |             />
32 |           )}
33 |         </Box>
34 |       </Field>
35 |     );
36 |   },
37 | );
38 | 
39 | export default StringOrComponentProperty;
40 | 


--------------------------------------------------------------------------------
/src/Tree/ComponentDropArea.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext, useState } from 'react';
 2 | import { Box } from 'grommet';
 3 | import { getComponent, moveComponent } from '../design2';
 4 | import DragDropContext from './DragDropContext';
 5 | 
 6 | const ComponentDropArea = ({ id, where }) => {
 7 |   const [dragging] = useContext(DragDropContext);
 8 |   const [dragOver, setDragOver] = useState();
 9 | 
10 |   return (
11 |     <Box direction="row" pad={{ left: 'xsmall' }} margin={{ left: 'medium' }}>
12 |       <Box
13 |         flex
14 |         pad="xxsmall"
15 |         background={(dragOver && 'focus') || undefined}
16 |         onDragEnter={(event) => {
17 |           if (dragging && dragging !== id && getComponent(dragging)) {
18 |             event.preventDefault();
19 |             setDragOver(true);
20 |           }
21 |         }}
22 |         onDragOver={(event) => {
23 |           if (dragOver) event.preventDefault();
24 |         }}
25 |         onDragLeave={() => setDragOver(false)}
26 |         onDrop={() => {
27 |           if (dragOver) {
28 |             moveComponent(dragging, { [where]: id });
29 |             setDragOver(false);
30 |           }
31 |         }}
32 |       />
33 |     </Box>
34 |   );
35 | };
36 | 
37 | export default ComponentDropArea;
38 | 


--------------------------------------------------------------------------------
/src/friendlyDate.js:
--------------------------------------------------------------------------------
 1 | const dayFormatter = new Intl.DateTimeFormat([], {
 2 |   month: 'short',
 3 |   day: 'numeric',
 4 | });
 5 | 
 6 | const monthFormatter = new Intl.DateTimeFormat([], {
 7 |   year: 'numeric',
 8 |   month: 'long',
 9 | });
10 | 
11 | const friendlyDate = (iso8601) => {
12 |   if (!iso8601) return undefined;
13 |   const date = new Date(Date.parse(iso8601));
14 |   const now = new Date();
15 | 
16 |   const deltaMilliseconds = now - date;
17 |   const deltaSeconds = Math.floor(deltaMilliseconds / 1000);
18 |   const deltaMinutes = Math.floor(deltaSeconds / 60);
19 |   const deltaHours = Math.floor(deltaMinutes / 60);
20 | 
21 |   if (deltaSeconds < 5) {
22 |     return 'just now';
23 |   } else if (deltaSeconds < 60) {
24 |     return deltaSeconds + ' seconds ago';
25 |   } else if (deltaMinutes === 1) {
26 |     return '1 minute ago';
27 |   } else if (deltaMinutes < 60) {
28 |     return deltaMinutes + ' minutes ago';
29 |   } else if (deltaHours === 1) {
30 |     return '1 hour ago';
31 |   } else if (deltaHours < 6) {
32 |     return deltaHours + ' hours ago';
33 |   } else if (date.getYear() === now.getYear()) {
34 |     return dayFormatter.format(date);
35 |   } else {
36 |     return monthFormatter.format(date);
37 |   }
38 | };
39 | 
40 | export default friendlyDate;
41 | 


--------------------------------------------------------------------------------
/src/Tree/Export.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactGA from 'react-ga';
 3 | import { Button, Paragraph } from 'grommet';
 4 | import { useDesign } from '../design2';
 5 | import Action from '../components/Action';
 6 | 
 7 | const Export = ({ onClose }) => {
 8 |   const design = useDesign();
 9 |   return (
10 |     <Action label="export" animation="fadeIn" onClose={onClose}>
11 |       <Paragraph>
12 |         Export the design to a JSON file. You can use this as a separate backup
13 |         copy, inspect and transform it with a program, or share it with someone
14 |         else. You can import it via the top left control that shows all of your
15 |         designs.
16 |       </Paragraph>
17 |       <Button
18 |         label="Export"
19 |         primary
20 |         hoverIndicator
21 |         alignSelf="start"
22 |         href={`data:application/json;charset=utf-8,${encodeURIComponent(
23 |           JSON.stringify(design),
24 |         )}`}
25 |         download={`${design.name || 'design'}.json`}
26 |         onClick={() => {
27 |           onClose();
28 |           ReactGA.event({
29 |             category: 'share',
30 |             action: 'export design',
31 |           });
32 |         }}
33 |       />
34 |     </Action>
35 |   );
36 | };
37 | 
38 | export default Export;
39 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render, screen } from '@testing-library/react';
 3 | import userEvent from '@testing-library/user-event';
 4 | import App from './App';
 5 | 
 6 | // for README
 7 | global.fetch = () =>
 8 |   Promise.resolve({
 9 |     ok: true,
10 |     text: () => Promise.resolve(''),
11 |   });
12 | 
13 | describe('App', () => {
14 |   test('create', async () => {
15 |     const user = userEvent.setup();
16 |     const { asFragment } = await render(<App />);
17 |     expect(asFragment()).toMatchSnapshot();
18 | 
19 |     await user.click(screen.getByTitle('start a new design'));
20 |     expect(asFragment()).toMatchSnapshot();
21 | 
22 |     await user.type(screen.getByLabelText('name'), 'test design');
23 |     expect(asFragment()).toMatchSnapshot();
24 | 
25 |     await user.click(screen.getByTitle('create design'));
26 |     expect(asFragment()).toMatchSnapshot();
27 | 
28 |     await user.click(screen.getByTitle('Use selected screen template'));
29 |     expect(asFragment()).toMatchSnapshot();
30 | 
31 |     // await user.click(screen.getByText('PageContent'));
32 |     // expect(asFragment()).toMatchSnapshot();
33 | 
34 |     // await user.click(screen.getByText('PageContent'));
35 |     // expect(asFragment()).toMatchSnapshot();
36 | 
37 |     // await user.click(screen.getByTitle('add a component'));
38 |     // expect(asFragment()).toMatchSnapshot();
39 |   });
40 | });
41 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/useDebounce.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | const useDebounce = (valueProp, onChange) => {
 4 |   const [value, setValue] = React.useState(valueProp);
 5 | 
 6 |   // setting tracks when we're between setValue() and onChange().
 7 |   // When the user is typing, we set it to true. When he stops typing and
 8 |   // we call onChange, we clear it.
 9 |   // When the user changes the valueProp, we'll update our
10 |   // value only if setting isn't true.
11 |   // This is so we don't throw out subsequent characters that the user has typed
12 |   // since we called onChange() but haven't received via valueProp yet.
13 |   const [setting, setSetting] = React.useState(false);
14 |   React.useEffect(() => {
15 |     if (!setting) setValue(valueProp);
16 |   }, [setting, valueProp]);
17 | 
18 |   const set = React.useCallback((nextValue) => {
19 |     setSetting(true);
20 |     setValue(nextValue);
21 |   }, []);
22 | 
23 |   React.useEffect(() => {
24 |     if (value !== valueProp && setting) {
25 |       // lazily update, so we don't slow down typing
26 |       const timer = setTimeout(() => {
27 |         onChange(value);
28 |         setSetting(false);
29 |       }, 500); // 500, just empirical
30 |       return () => clearTimeout(timer);
31 |     }
32 |     return undefined;
33 |   }, [onChange, setting, value, valueProp]);
34 |   return [value, set];
35 | };
36 | 
37 | export default useDebounce;
38 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/BoxBackgroundImage.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, Paragraph, TextArea } from 'grommet';
 3 | 
 4 | const dataUrlPrefix = "url('";
 5 | const dataUrlSuffix = "')";
 6 | const svgPrefix = 'data:image/svg+xml;utf8,';
 7 | 
 8 | const stripToText = (value) => {
 9 |   if (value && value.slice(0, dataUrlPrefix.length) === dataUrlPrefix) {
10 |     const deDataUrl = value
11 |       .slice(dataUrlPrefix.length)
12 |       .slice(0, -dataUrlSuffix.length);
13 |     if (deDataUrl.slice(0, svgPrefix.length) === svgPrefix) {
14 |       return deDataUrl.slice(svgPrefix.length);
15 |     } else {
16 |       return deDataUrl;
17 |     }
18 |   }
19 |   return value || '';
20 | };
21 | 
22 | const BoxBackgroundImage = ({ value, onChange }) => {
23 |   return (
24 |     <Box>
25 |       <Paragraph margin="none">URL or &lt;svg&gt; markup.</Paragraph>
26 |       <TextArea
27 |         rows={4}
28 |         cols={80}
29 |         value={stripToText(value)}
30 |         onChange={(event) => {
31 |           const nextValue = event.target.value;
32 |           if (nextValue[0] === '<') {
33 |             onChange(
34 |               `${dataUrlPrefix}${svgPrefix}${nextValue}${dataUrlSuffix}`,
35 |             );
36 |           } else {
37 |             onChange(`${dataUrlPrefix}${nextValue}${dataUrlSuffix}`);
38 |           }
39 |         }}
40 |       />
41 |     </Box>
42 |   );
43 | };
44 | 
45 | export default BoxBackgroundImage;
46 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/InlineOptions.js:
--------------------------------------------------------------------------------
 1 | import React, { useMemo } from 'react';
 2 | import { RadioButtonGroup } from 'grommet';
 3 | 
 4 | const InlineOptions = ({ children, name, options, value, onChange, gap }) => {
 5 |   const buttonGroupOptions = useMemo(
 6 |     () =>
 7 |       options.map(o => {
 8 |         const label = o.label || o;
 9 |         let val = o.domValue || o.value || o;
10 |         if (typeof val === 'boolean') val = val.toString();
11 |         return { label, value: val, id: `${name}-${label}` };
12 |       }),
13 |     [name, options],
14 |   );
15 |   const valueIndex = options.findIndex(
16 |     o => (typeof o === 'object' ? o.value : o) === value,
17 |   );
18 |   const buttonGroupOption = buttonGroupOptions[valueIndex];
19 | 
20 |   return (
21 |     <RadioButtonGroup
22 |       id={name}
23 |       name={name}
24 |       direction="row"
25 |       gap={gap || 'none'}
26 |       margin={{ horizontal: 'small' }}
27 |       options={buttonGroupOptions}
28 |       value={buttonGroupOption ? buttonGroupOption.value : ''}
29 |       onChange={event => {
30 |         const index = buttonGroupOptions.findIndex(
31 |           o => o.value === event.target.value,
32 |         );
33 |         const option = options[index];
34 |         onChange(typeof option === 'object' ? option.value : option);
35 |       }}
36 |     >
37 |       {(option, state) => children(option, state)}
38 |     </RadioButtonGroup>
39 |   );
40 | };
41 | 
42 | export default InlineOptions;
43 | 


--------------------------------------------------------------------------------
/src/useDebounce.js:
--------------------------------------------------------------------------------
 1 | import { useCallback, useEffect, useState } from 'react';
 2 | 
 3 | // Performs updates from Properties but accomodates updates from Canvas.
 4 | const useDebounce = (valueProp, onChange) => {
 5 |   const [value, setValue] = useState(valueProp);
 6 | 
 7 |   // setting tracks when we're between setValue() and onChange().
 8 |   // When the user is typing, we set it to true. When he stops typing and
 9 |   // we call onChange, we clear it.
10 |   // When the user changes the value from the Canvas, we'll update our
11 |   // value if setting isn't true.
12 |   // This is so we don't throw out subsequent characters that user has typed
13 |   // since we called onChange() but haven't received it via valueProp yet.
14 |   const [setting, setSetting] = useState(false);
15 | 
16 |   const set = useCallback((nextValue) => {
17 |     setSetting(true);
18 |     setValue(nextValue);
19 |   }, []);
20 | 
21 |   useEffect(() => {
22 |     if (!setting) setValue(valueProp);
23 |   }, [setting, valueProp]);
24 | 
25 |   useEffect(() => {
26 |     if (value !== valueProp && setting) {
27 |       // lazily update, so we don't slow down typing
28 |       const timer = setTimeout(() => {
29 |         onChange(value);
30 |         setSetting(false);
31 |       }, 500); // 500, just empirical
32 |       return () => clearTimeout(timer);
33 |     }
34 |     return undefined;
35 |   }, [onChange, setting, value, valueProp]);
36 | 
37 |   return [value, set];
38 | };
39 | 
40 | export default useDebounce;
41 | 


--------------------------------------------------------------------------------
/src/Properties/NumberProperty.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { MaskedInput } from 'grommet';
 3 | import Field from '../components/Field';
 4 | import useDebounce from '../useDebounce';
 5 | 
 6 | const NumberProperty = React.forwardRef(
 7 |   ({ name, onChange, value: valueProp }, ref) => {
 8 |     const [value, setValue] = useDebounce(valueProp, onChange);
 9 |     return (
10 |       <Field key={name} label={name} htmlFor={name}>
11 |         <MaskedInput
12 |           ref={ref}
13 |           id={name}
14 |           name={name}
15 |           plain
16 |           mask={[
17 |             {
18 |               regexp: /^-?\d*$|^\{|^\{.+/,
19 |             },
20 |           ]}
21 |           value={value !== undefined && value !== null ? value : ''}
22 |           onChange={(event) => {
23 |             let nextValue;
24 |             // data reference
25 |             if (event.target.value[0] === '{') nextValue = event.target.value;
26 |             else if (event.target.value === '-') nextValue = event.target.value;
27 |             else {
28 |               nextValue = parseInt(event.target.value, 10);
29 |               // NaN check
30 |               // eslint-disable-next-line no-self-compare
31 |               if (nextValue !== nextValue) nextValue = undefined;
32 |             }
33 |             setValue(nextValue);
34 |           }}
35 |           style={{ textAlign: 'end' }}
36 |         />
37 |       </Field>
38 |     );
39 |   },
40 | );
41 | 
42 | export default NumberProperty;
43 | 


--------------------------------------------------------------------------------
/src/AppSettings.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from 'react';
 2 | import { Box, CheckBox, RadioButtonGroup } from 'grommet';
 3 | import AppContext from './AppContext';
 4 | import Action from './components/Action';
 5 | import Field from './components/Field';
 6 | 
 7 | const AppSettings = ({ onClose }) => {
 8 |   const { direction, setDirection, themeMode, setThemeMode } =
 9 |     useContext(AppContext);
10 |   return (
11 |     <Action label="settings" onClose={onClose}>
12 |       <Box flex={false} gap="medium">
13 |         <Field label="Appearance" htmlFor="themeMode">
14 |           <RadioButtonGroup
15 |             id="themeMode"
16 |             name="themeMode"
17 |             direction="row"
18 |             gap="medium"
19 |             options={['dark', 'light', 'auto']}
20 |             pad="medium"
21 |             value={themeMode || ''}
22 |             onChange={(event) => setThemeMode(event.target.value)}
23 |           />
24 |         </Field>
25 | 
26 |         <Field label="Direction" htmlFor="direction">
27 |           <CheckBox
28 |             id="direction"
29 |             name="direction"
30 |             label="right to left"
31 |             toggle
32 |             pad="medium"
33 |             checked={direction === 'rtl' || false}
34 |             onChange={(event) =>
35 |               setDirection(event.target.checked ? 'rtl' : undefined)
36 |             }
37 |           />
38 |         </Field>
39 |       </Box>
40 |     </Action>
41 |   );
42 | };
43 | 
44 | export default AppSettings;
45 | 


--------------------------------------------------------------------------------
/src/Router.js:
--------------------------------------------------------------------------------
 1 | // NOTE: our routing needs are so simple, we roll our own
 2 | // to avoid dependencies on react-router, to stay leaner.
 3 | 
 4 | import React, { Children } from 'react';
 5 | 
 6 | export const RouterContext = React.createContext({});
 7 | 
 8 | export const Router = ({ children }) => {
 9 |   const [path, setPath] = React.useState();
10 | 
11 |   React.useEffect(() => {
12 |     const onPopState = () => setPath(document.location.pathname);
13 |     window.addEventListener('popstate', onPopState);
14 |     return () => window.removeEventListener('popstate', onPopState);
15 |   }, []);
16 | 
17 |   const push = nextPath => {
18 |     if (nextPath !== path) {
19 |       window.history.pushState(
20 |         undefined,
21 |         undefined,
22 |         nextPath + window.location.search,
23 |       );
24 |       setPath(nextPath);
25 |       window.scrollTo(0, 0);
26 |     }
27 |   };
28 | 
29 |   return (
30 |     <RouterContext.Provider value={{ path, push }}>
31 |       {children}
32 |     </RouterContext.Provider>
33 |   );
34 | };
35 | 
36 | export const Routes = ({ children }) => {
37 |   const { path: contextPath } = React.useContext(RouterContext);
38 |   let found;
39 |   Children.forEach(children, child => {
40 |     if (!found && contextPath === child.props.path) found = child;
41 |   });
42 |   return found;
43 | };
44 | 
45 | export const Route = ({ Component, path }) => {
46 |   const { path: contextPath } = React.useContext(RouterContext);
47 |   return contextPath === path ? <Component /> : null;
48 | };
49 | 
50 | export default Router;
51 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/DropAlign.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, FormField, Select } from 'grommet';
 3 | 
 4 | const DropAlign = ({ name, value, onChange }) => {
 5 |   return (
 6 |     <Box>
 7 |       {['top', 'bottom'].map((side) => (
 8 |         <FormField key={side} label={side}>
 9 |           <Select
10 |             options={['top', 'bottom', 'undefined']}
11 |             value={(value || {})[side] || ''}
12 |             onChange={({ option }) => {
13 |               const nextValue = JSON.parse(JSON.stringify(value || {}));
14 |               if (option === 'undefined') {
15 |                 delete nextValue[side];
16 |               } else {
17 |                 nextValue[side] = option;
18 |               }
19 |               onChange(nextValue);
20 |             }}
21 |           />
22 |         </FormField>
23 |       ))}
24 |       {['left', 'right'].map((side) => (
25 |         <FormField key={side} label={side}>
26 |           <Select
27 |             options={['left', 'right', 'undefined']}
28 |             value={(value || {})[side] || ''}
29 |             onChange={({ option }) => {
30 |               const nextValue = JSON.parse(JSON.stringify(value || {}));
31 |               if (option === 'undefined') {
32 |                 delete nextValue[side];
33 |               } else {
34 |                 nextValue[side] = option;
35 |               }
36 |               onChange(nextValue);
37 |             }}
38 |           />
39 |         </FormField>
40 |       ))}
41 |     </Box>
42 |   );
43 | };
44 | 
45 | export default DropAlign;
46 | 


--------------------------------------------------------------------------------
/src/Properties/LinkProperty.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext, useMemo } from 'react';
 2 | import { Box, Text } from 'grommet';
 3 | import { getLinkOptions, getName } from '../design2';
 4 | import SelectionContext from '../SelectionContext';
 5 | import ArrayProperty from './ArrayProperty';
 6 | 
 7 | const LinkLabel = ({ selected, value }) => {
 8 |   let label;
 9 |   if (!value || value.length === 0) {
10 |     label = '';
11 |   } else if (value.component) {
12 |     label = getName(value.component);
13 |   } else if (value.screen) {
14 |     label = getName(value.screen);
15 |   } else if (value.label) {
16 |     label = value.label;
17 |   } else if (Array.isArray(value)) {
18 |     label = value.map((v) => v.label).join(', ');
19 |   } else if (typeof value === 'string') {
20 |     // defensive
21 |     label = value;
22 |   } else {
23 |     label = JSON.stringify(value);
24 |   }
25 |   return (
26 |     <Box pad="xsmall">
27 |       <Text weight={selected ? 'bold' : undefined}>{label}</Text>
28 |     </Box>
29 |   );
30 | };
31 | 
32 | const LinkProperty = React.forwardRef(({ name, onChange, value }, ref) => {
33 |   const [selection] = useContext(SelectionContext);
34 |   const linkOptions = useMemo(() => getLinkOptions(selection), [selection]);
35 |   return (
36 |     <ArrayProperty
37 |       ref={ref}
38 |       name={name}
39 |       Label={LinkLabel}
40 |       options={linkOptions}
41 |       multiple
42 |       value={value}
43 |       labelKey="label"
44 |       valueKey="key"
45 |       onChange={onChange}
46 |     />
47 |   );
48 | });
49 | 
50 | export default LinkProperty;
51 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/EdgeSizeState.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Blank } from 'grommet-icons';
 3 | import InlineOption from './InlineOption';
 4 | 
 5 | const edgeCoords = ({ direction = 'column', size }) => {
 6 |   let b;
 7 |   if (size === 'none') b = [12, 12];
 8 |   else if (size === 'xxsmall') b = [10, 14];
 9 |   else if (size === 'xsmall') b = [9, 15];
10 |   else if (size === 'small') b = [8, 16];
11 |   else if (size === 'medium') b = [7, 17];
12 |   else if (size === 'large') b = [6, 18];
13 |   else if (size === 'xlarge') b = [4, 20];
14 |   else if (size === 'xxlarge') b = [1, 23];
15 |   else
16 |     return [
17 |       [8, 8, 16, 16],
18 |       [8, 16, 16, 8],
19 |     ];
20 |   if (direction === 'row') {
21 |     return [
22 |       [b[0], 0, b[0], 24],
23 |       [b[1], 0, b[1], 24],
24 |     ];
25 |   } else {
26 |     return [
27 |       [0, b[0], 24, b[0]],
28 |       [0, b[1], 24, b[1]],
29 |     ];
30 |   }
31 | };
32 | 
33 | const Edge = ({ coords }) => (
34 |   <line
35 |     x1={coords[0]}
36 |     y1={coords[1]}
37 |     x2={coords[2]}
38 |     y2={coords[3]}
39 |     stroke="#000"
40 |     strokeWidth="1"
41 |     strokeLinecap="square"
42 |   />
43 | );
44 | 
45 | const EdgeSizeState = ({ checked, direction, size }) => {
46 |   const e = edgeCoords({ direction, size });
47 |   return (
48 |     <InlineOption checked={checked} label={size}>
49 |       <Blank color={checked ? 'selected-text' : 'border'}>
50 |         <Edge coords={e[0]} />
51 |         <Edge coords={e[1]} />
52 |       </Blank>
53 |     </InlineOption>
54 |   );
55 | };
56 | 
57 | export default EdgeSizeState;
58 | 


--------------------------------------------------------------------------------
/src/InlineEditInput.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useRef, useState } from 'react';
 2 | import styled from 'styled-components';
 3 | 
 4 | const InlineInput = styled.input`
 5 |   box-sizing: border-box;
 6 |   font-size: inherit;
 7 |   font-family: inherit;
 8 |   line-height: inherit;
 9 |   border: none;
10 |   -webkit-appearance: none;
11 |   background: transparent;
12 |   color: inherit;
13 |   font-weight: inherit;
14 |   text-align: inherit;
15 |   margin: 0;
16 |   padding: 0;
17 |   ::-webkit-search-decoration {
18 |     -webkit-appearance: none;
19 |   }
20 | `;
21 | 
22 | const InlineEditInput = ({
23 |   as,
24 |   placeholder,
25 |   defaultValue,
26 |   onChange,
27 |   onDone,
28 |   size,
29 | }) => {
30 |   const [value, setValue] = useState(defaultValue);
31 |   const inputRef = useRef();
32 | 
33 |   // set focus when editing inline
34 |   useEffect(() => {
35 |     if (inputRef.current) inputRef.current.focus();
36 |   }, []);
37 | 
38 |   return (
39 |     <InlineInput
40 |       ref={inputRef}
41 |       as={as}
42 |       placeholder={placeholder}
43 |       value={value}
44 |       onChange={(event) => {
45 |         setValue(event.target.value);
46 |         onChange(event.target.value);
47 |       }}
48 |       onClick={(event) => event.stopPropagation()}
49 |       // don't let Enter trigger onClick in ancestors
50 |       onKeyDown={(event) => event.stopPropagation()}
51 |       onBlur={() => onDone()}
52 |       style={{
53 |         width: size.width,
54 |         height: size.height,
55 |         minWidth: 48,
56 |       }}
57 |     />
58 |   );
59 | };
60 | 
61 | export default InlineEditInput;
62 | 


--------------------------------------------------------------------------------
/src/Properties/IconProperty.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useRef, useState } from 'react';
 2 | import { Button, Text } from 'grommet';
 3 | import { aliases, names, SelectLabel } from '../libraries/designer/Icon';
 4 | import ArrayProperty from './ArrayProperty';
 5 | import DataPathField from './DataPathField';
 6 | 
 7 | const IconProperty = React.forwardRef(({ name, onChange, value }, ref) => {
 8 |   const [focusDataPath, setFocusDataPath] = useState();
 9 |   const dpRef = useRef();
10 | 
11 |   useEffect(() => {
12 |     if (focusDataPath) {
13 |       dpRef.current.focus();
14 |       setFocusDataPath(false);
15 |     }
16 |   }, [focusDataPath]);
17 | 
18 |   if (value === '' || value?.[0] === '{')
19 |     return (
20 |       <DataPathField
21 |         ref={dpRef}
22 |         name={name}
23 |         onChange={onChange}
24 |         value={value}
25 |       />
26 |     );
27 | 
28 |   return (
29 |     <ArrayProperty
30 |       ref={ref}
31 |       name={name}
32 |       Label={SelectLabel}
33 |       options={names}
34 |       value={value}
35 |       searchTest={(option, searchExp) =>
36 |         aliases &&
37 |         aliases[option] &&
38 |         aliases[option].filter((a) => searchExp.test(a)).length > 0
39 |       }
40 |       onChange={onChange}
41 |     >
42 |       {!value && (
43 |         <Button
44 |           onClick={() => {
45 |             onChange('{}');
46 |             setFocusDataPath(true);
47 |           }}
48 |         >
49 |           <Text color="text-weak">{'{}'}</Text>
50 |         </Button>
51 |       )}
52 |     </ArrayProperty>
53 |   );
54 | });
55 | 
56 | export default IconProperty;
57 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/GridGap.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import InlineOptions from './InlineOptions';
 3 | import UndefinedOption, { undefinedOption } from './UndefinedOption';
 4 | import VariedOption, { variedOption } from './VariedOption';
 5 | import EdgeSizeState from './EdgeSizeState';
 6 | 
 7 | const options = [
 8 |   'xxsmall',
 9 |   'xsmall',
10 |   'small',
11 |   'medium',
12 |   'large',
13 |   'xlarge',
14 |   variedOption,
15 | ];
16 | 
17 | const GridGap = (props) => {
18 |   const { name, value } = props;
19 |   const adjustedOptions = options.filter(
20 |     (o) => name === 'gap' || typeof o === 'string',
21 |   );
22 |   if (value) adjustedOptions.push(undefinedOption);
23 |   return (
24 |     <InlineOptions name={name} options={adjustedOptions} {...props}>
25 |       {(option, { checked }) => {
26 |         if (option.label === undefinedOption.label) {
27 |           return <UndefinedOption checked={checked} />;
28 |         } else if (option.label === variedOption.label) {
29 |           return <VariedOption checked={checked} />;
30 |         }
31 |         return (
32 |           <EdgeSizeState
33 |             {...props.props}
34 |             size={option.label}
35 |             checked={checked}
36 |             direction={name === 'row' ? 'column' : 'row'}
37 |           />
38 |         );
39 |       }}
40 |     </InlineOptions>
41 |   );
42 | };
43 | 
44 | GridGap.inline = true;
45 | 
46 | GridGap.dynamicProperty = ({ value }) => {
47 |   if (typeof value === 'object') {
48 |     return {
49 |       row: GridGap,
50 |       column: GridGap,
51 |     };
52 |   }
53 |   return GridGap;
54 | };
55 | 
56 | export default GridGap;
57 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/BoxGridArea.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, FormField, Paragraph, Select } from 'grommet';
 3 | import { getComponent, getParent } from '../../design2';
 4 | 
 5 | const BoxGridArea = ({ id, value, onChange }) => {
 6 |   let message;
 7 |   const parentId = getParent(id);
 8 |   let areas;
 9 |   if (!parentId) {
10 |     message = `
11 |       Well, gridArea only does anything when the parent component is a Grid.
12 |       Currently, this Box has no parent.
13 |     `;
14 |   } else {
15 |     const parent = getComponent(parentId);
16 |     areas = parent.props.areas && parent.props.areas.map((a) => a.name);
17 |     if (parent.type !== 'grommet.Grid') {
18 |       message = `
19 |         Well, gridArea only does anything when the parent component is a Grid.
20 |         Currently, the parent of this component is a ${parent.type}
21 |       `;
22 |     } else if (!areas) {
23 |       message = `
24 |         Alas, no areas have been defined in the parent component.
25 |         You will have to define some there first in order to set a gridArea.
26 |       `;
27 |     } else {
28 |       areas.push('undefined');
29 |     }
30 |   }
31 |   return (
32 |     <Box>
33 |       {message ? (
34 |         <Paragraph>{message}</Paragraph>
35 |       ) : (
36 |         <FormField label="gridArea">
37 |           <Select
38 |             value={value ? value : ''}
39 |             options={areas}
40 |             onChange={({ option }) => {
41 |               onChange(option === 'undefined' ? undefined : option);
42 |             }}
43 |           />
44 |         </FormField>
45 |       )}
46 |     </Box>
47 |   );
48 | };
49 | 
50 | export default BoxGridArea;
51 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/DataChartBounds.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, FormField, RadioButtonGroup, TextInput } from 'grommet';
 3 | 
 4 | const DataChartBounds = ({ value, onChange }) => {
 5 |   return (
 6 |     <Box>
 7 |       <RadioButtonGroup
 8 |         direction="row"
 9 |         options={['align', 'y', 'undefined']}
10 |         value={
11 |           (value === 'align' && 'align') || (value?.y && 'y') || 'undefined'
12 |         }
13 |         gap="medium"
14 |         onChange={({ target: { value: option } }) => {
15 |           if (option === 'align') onChange('align');
16 |           else if (option === 'y') onChange({ y: [0, 100] });
17 |           else onChange(undefined);
18 |         }}
19 |       />
20 |       {typeof value === 'object' && (
21 |         <>
22 |           <FormField label="max">
23 |             <TextInput
24 |               value={value.y[1]}
25 |               onChange={(event) => {
26 |                 const nextValue = JSON.parse(JSON.stringify(value));
27 |                 nextValue.y[1] = parseInt(event.target.value, 10);
28 |                 onChange(nextValue);
29 |               }}
30 |             />
31 |           </FormField>
32 |           <FormField label="min">
33 |             <TextInput
34 |               value={value.y[0]}
35 |               onChange={(event) => {
36 |                 const nextValue = JSON.parse(JSON.stringify(value));
37 |                 nextValue.y[0] = parseInt(event.target.value, 10);
38 |                 onChange(nextValue);
39 |               }}
40 |             />
41 |           </FormField>
42 |         </>
43 |       )}
44 |     </Box>
45 |   );
46 | };
47 | 
48 | export default DataChartBounds;
49 | 


--------------------------------------------------------------------------------
/src/Tree/GenerateCode.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import ReactGA from 'react-ga';
 3 | import { Box, Button, Markdown, Paragraph, TextArea } from 'grommet';
 4 | import { dependencies, generateJSX } from '../design';
 5 | import Action from '../components/Action';
 6 | 
 7 | const GenerateCode = ({ onClose }) => {
 8 |   const [code, setCode] = useState();
 9 |   return (
10 |     <Action label="generate code" animation="fadeIn" onClose={onClose}>
11 |       <Paragraph>
12 |         Turn your design into real code that you can use to create a live site.
13 |         While some development knowledge is required, here is some guidance to
14 |         get you started.
15 |       </Paragraph>
16 |       {!code && (
17 |         <Button
18 |           label="Generate Code"
19 |           primary
20 |           hoverIndicator
21 |           alignSelf="start"
22 |           onClick={() => {
23 |             setCode(generateJSX());
24 |             ReactGA.event({
25 |               category: 'share',
26 |               action: 'generate code',
27 |             });
28 |           }}
29 |         />
30 |       )}
31 |       {code && (
32 |         <Box>
33 |           <Markdown>
34 |             {`
35 | * install nodejs, npm, yarn, and create-react-app (if needed)
36 | * \`# npx create-react-app my-app\`
37 | * \`# cd my-app\`
38 | * \`# yarn add ${dependencies().join(' ')}\`
39 | * replace the contents of \`src/App.js\` with the text below
40 | * \`# yarn start\`
41 |             `}
42 |           </Markdown>
43 |           <TextArea value={code} rows={20} cols={40} readOnly />
44 |         </Box>
45 |       )}
46 |     </Action>
47 |   );
48 | };
49 | 
50 | export default GenerateCode;
51 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "grommet-designer",
 3 |   "version": "0.2.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "lz-string": "^1.5.0",
 7 |     "react-ga": "^3.2.0"
 8 |   },
 9 |   "scripts": {
10 |     "start": "react-app-rewired start",
11 |     "build": "react-app-rewired build",
12 |     "lint": "eslint './src/**/*.js'",
13 |     "test": "react-app-rewired test",
14 |     "test:nowatch": "react-app-rewired test --watchAll=false",
15 |     "e2e": "testcafe firefox cafe-test.js --debug-on-fail",
16 |     "prettier": "pretty-quick --staged"
17 |   },
18 |   "pre-commit": [
19 |     "prettier",
20 |     "test:nowatch"
21 |   ],
22 |   "eslintConfig": {
23 |     "extends": "react-app"
24 |   },
25 |   "browserslist": {
26 |     "production": [
27 |       ">0.2%",
28 |       "not dead",
29 |       "not op_mini all"
30 |     ],
31 |     "development": [
32 |       "last 1 chrome version",
33 |       "last 1 firefox version",
34 |       "last 1 safari version"
35 |     ]
36 |   },
37 |   "devDependencies": {
38 |     "@testing-library/dom": "^10.4.0",
39 |     "@testing-library/react": "^16.2.0",
40 |     "@testing-library/user-event": "^14.6.1",
41 |     "copy-webpack-plugin": "^12.0.2",
42 |     "customize-cra": "^1.0.0",
43 |     "grommet": "https://github.com/grommet/grommet/tarball/stable",
44 |     "grommet-icons": "https://github.com/grommet/grommet-icons/tarball/stable",
45 |     "pre-commit": "^1.2.2",
46 |     "prettier": "^3.5.0",
47 |     "pretty-quick": "^4.0.0",
48 |     "react": "^18.3.1",
49 |     "react-app-rewired": "^2.2.1",
50 |     "react-dom": "^18.3.1",
51 |     "react-is": "18.3.1",
52 |     "react-scripts": "5.0.1",
53 |     "styled-components": "^6.1.15",
54 |     "testcafe": "^3.7.1"
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/src/Properties/ReferenceProperty.js:
--------------------------------------------------------------------------------
 1 | import React, { forwardRef, useContext, useMemo } from 'react';
 2 | import { Box, Button, Text } from 'grommet';
 3 | import { Location } from 'grommet-icons';
 4 | import SelectionContext from '../SelectionContext';
 5 | import { useDesign } from '../design2';
 6 | import ArrayProperty from './ArrayProperty';
 7 | 
 8 | const ReferenceLabel = ({ selected, option }) => {
 9 |   return (
10 |     <Box pad="small">
11 |       <Text weight={selected ? 'bold' : undefined} truncate>
12 |         {(option === 'undefined' && 'undefined') ||
13 |           (option &&
14 |             (option.name || option.text || `${option.type} ${option.id}`)) ||
15 |           ''}
16 |       </Text>
17 |     </Box>
18 |   );
19 | };
20 | 
21 | const ReferenceProperty = forwardRef(({ name, onChange, value }, ref) => {
22 |   const [, setSelection] = useContext(SelectionContext);
23 |   const design = useDesign();
24 |   const options = useMemo(
25 |     () =>
26 |       Object.values(design.components).filter(
27 |         (c) => c.type !== 'designer.Reference' && c.name,
28 |       ),
29 |     [design],
30 |   );
31 | 
32 |   return (
33 |     <ArrayProperty
34 |       ref={ref}
35 |       name={name}
36 |       Label={ReferenceLabel}
37 |       options={options}
38 |       value={value}
39 |       valueKey={{ key: 'id', reduce: true }}
40 |       searchTest={(option, searchExp) => searchExp.test(option.name)}
41 |       onChange={onChange}
42 |     >
43 |       {value && (
44 |         <Button
45 |           icon={<Location />}
46 |           tip="go to"
47 |           hoverIndicator
48 |           onClick={() => setSelection(value)}
49 |         />
50 |       )}
51 |     </ArrayProperty>
52 |   );
53 | });
54 | 
55 | export default ReferenceProperty;
56 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/BoxHoverIndicator.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, Button, CheckBox, Tip } from 'grommet';
 3 | import BoxBackgroundImage from './BoxBackgroundImage';
 4 | import UndefinedOption, { undefinedOption } from './UndefinedOption';
 5 | import VariedOption, { variedOption } from './VariedOption';
 6 | 
 7 | const BoxHoverIndicator = (props) => {
 8 |   const { name, value, onChange } = props;
 9 |   // The extra Box fixes an issue with Tip not placing itself correctly
10 |   // with CheckBox
11 |   const content = [
12 |     <Tip key="check" content={value !== true ? 'true' : 'false'}>
13 |       <Box>
14 |         <CheckBox
15 |           name={name}
16 |           checked={value === true}
17 |           onChange={(event) => onChange(event.target.checked)}
18 |         />
19 |       </Box>
20 |     </Tip>,
21 |   ];
22 |   if (value !== undefined) {
23 |     content.push(
24 |       <Button key="varied" onClick={() => onChange(variedOption.value)}>
25 |         <VariedOption />
26 |       </Button>,
27 |     );
28 |     content.push(
29 |       <Button key="undefined" onClick={() => onChange(undefinedOption.value)}>
30 |         <UndefinedOption />
31 |       </Button>,
32 |     );
33 |   }
34 |   return (
35 |     <Box direction="row" align="center" pad={{ horizontal: 'small' }}>
36 |       {content}
37 |     </Box>
38 |   );
39 | };
40 | 
41 | BoxHoverIndicator.inline = true;
42 | 
43 | BoxHoverIndicator.dynamicProperty = ({ value }) => {
44 |   if (typeof value === 'object') {
45 |     return {
46 |       color: ['-color-'],
47 |       dark: false,
48 |       opacity: ['weak', 'medium', 'strong'],
49 |       image: BoxBackgroundImage,
50 |     };
51 |   }
52 |   return BoxHoverIndicator;
53 | };
54 | 
55 | export default BoxHoverIndicator;
56 | 


--------------------------------------------------------------------------------
/src/Tree/ConfirmDelete.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Anchor, Box, Button, Footer, Layer, Paragraph, Text } from 'grommet';
 3 | import { getDesign, removeDesign } from '../design2';
 4 | 
 5 | const ConfirmDelete = ({ onClose, onDone }) => {
 6 |   const { date, name, publishedDate, publishedUrl } = getDesign();
 7 | 
 8 |   let publishedState;
 9 |   if (!publishedUrl) publishedState = 'This design has never been published.';
10 |   else if (date !== publishedDate)
11 |     publishedState = 'The local design has unpublished changes.';
12 |   else
13 |     publishedState = (
14 |       <>
15 |         The <Anchor href={publishedUrl}>published copy</Anchor> of this design
16 |         will still be available.
17 |       </>
18 |     );
19 | 
20 |   return (
21 |     <Layer
22 |       position="center"
23 |       margin="medium"
24 |       animation="fadeIn"
25 |       onEsc={onClose}
26 |       onClickOutside={onClose}
27 |     >
28 |       <Box flex elevation="medium" pad="large" gap="small">
29 |         <Paragraph margin="none">
30 |           Just checking, are you sure you want to delete
31 |           <br />
32 |           <Text weight="bold"> {name}</Text>?
33 |         </Paragraph>
34 |         <Paragraph margin="none">{publishedState}</Paragraph>
35 |         <Footer justify="start" margin={{ top: 'medium' }}>
36 |           <Button
37 |             label="Yes, delete"
38 |             primary
39 |             onClick={() => {
40 |               localStorage.removeItem(`${name}--state`);
41 |               removeDesign();
42 |               onDone();
43 |             }}
44 |           />
45 |           <Button label="No, cancel" onClick={onClose} />
46 |         </Footer>
47 |       </Box>
48 |     </Layer>
49 |   );
50 | };
51 | 
52 | export default ConfirmDelete;
53 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/ChartBounds.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, FormField, TextInput } from 'grommet';
 3 | 
 4 | const ChartBounds = ({ value, onChange }) => {
 5 |   const normalizedValue = value || [
 6 |     [0, 10],
 7 |     [0, 100],
 8 |   ];
 9 |   return (
10 |     <Box>
11 |       <FormField label="minX">
12 |         <TextInput
13 |           value={normalizedValue[0][0]}
14 |           onChange={(event) => {
15 |             const nextValue = JSON.parse(JSON.stringify(normalizedValue));
16 |             nextValue[0][0] = parseInt(event.target.value, 10);
17 |             onChange(nextValue);
18 |           }}
19 |         />
20 |       </FormField>
21 |       <FormField label="maxX">
22 |         <TextInput
23 |           value={normalizedValue[0][1]}
24 |           onChange={(event) => {
25 |             const nextValue = JSON.parse(JSON.stringify(normalizedValue));
26 |             nextValue[0][1] = parseInt(event.target.value, 10);
27 |             onChange(nextValue);
28 |           }}
29 |         />
30 |       </FormField>
31 |       <FormField label="minY">
32 |         <TextInput
33 |           value={normalizedValue[1][0]}
34 |           onChange={(event) => {
35 |             const nextValue = JSON.parse(JSON.stringify(normalizedValue));
36 |             nextValue[1][0] = parseInt(event.target.value, 10);
37 |             onChange(nextValue);
38 |           }}
39 |         />
40 |       </FormField>
41 |       <FormField label="maxY">
42 |         <TextInput
43 |           value={normalizedValue[1][1]}
44 |           onChange={(event) => {
45 |             const nextValue = JSON.parse(JSON.stringify(normalizedValue));
46 |             nextValue[1][1] = parseInt(event.target.value, 10);
47 |             onChange(nextValue);
48 |           }}
49 |         />
50 |       </FormField>
51 |     </Box>
52 |   );
53 | };
54 | 
55 | export default ChartBounds;
56 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/Dimension.js:
--------------------------------------------------------------------------------
 1 | import React, { Fragment } from 'react';
 2 | import { Box, FormField, Select } from 'grommet';
 3 | 
 4 | const options = [
 5 |   'xxsmall',
 6 |   'xsmall',
 7 |   'small',
 8 |   'medium',
 9 |   'large',
10 |   'xlarge',
11 |   'xxlarge',
12 |   '100%',
13 |   'min/max',
14 |   'undefined',
15 | ];
16 | 
17 | const Dimension = ({ name, value, onChange }) => {
18 |   return (
19 |     <Box>
20 |       <Box>
21 |         {typeof value === 'object' ? (
22 |           <Fragment>
23 |             {['min', 'max', name].map((threshold) => (
24 |               <FormField key={threshold} label={threshold}>
25 |                 <Select
26 |                   options={options.filter((o) => o !== 'min/max')}
27 |                   value={(value || {})[threshold] || ''}
28 |                   onChange={({ option }) => {
29 |                     let nextValue = JSON.parse(JSON.stringify(value));
30 |                     if (option === 'undefined') {
31 |                       delete nextValue[threshold];
32 |                       if (!nextValue.min && !nextValue.max && !nextValue.width)
33 |                         nextValue = undefined;
34 |                     } else {
35 |                       nextValue[threshold] = option;
36 |                     }
37 |                     onChange(nextValue);
38 |                   }}
39 |                 />
40 |               </FormField>
41 |             ))}
42 |           </Fragment>
43 |         ) : (
44 |           <FormField>
45 |             <Select
46 |               options={options}
47 |               value={value || ''}
48 |               onChange={({ option }) => {
49 |                 let nextValue = option;
50 |                 if (nextValue === 'undefined') nextValue = undefined;
51 |                 else if (nextValue === 'min/max') nextValue = {};
52 |                 onChange(nextValue);
53 |               }}
54 |             />
55 |           </FormField>
56 |         )}
57 |       </Box>
58 |     </Box>
59 |   );
60 | };
61 | 
62 | export default Dimension;
63 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 6 |     <meta name="mobile-web-app-capable" content="yes" />
 7 |     <meta name="theme-color" content="#111111" />
 8 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 9 |     <link rel="shortcut icon" href="%PUBLIC_URL%/shortcut-icon.png" />
10 |     <title>Grommet Designer</title>
11 |     <style type="text/css">
12 |       html {
13 |         min-height: 100vh;
14 |       }
15 |       body {
16 |         margin: 0;
17 |         height: 1px;
18 |         min-height: 100vh;
19 |       }
20 |       #loadingLogo {
21 |         position: absolute;
22 |         top: 50%;
23 |         left: 50%;
24 |         transform: translate(-50%, -50%);
25 |         color: #7d4cdb;
26 |         font-family: Helvetica, sans-serif;
27 |         display: flex;
28 |         flex-direction: column;
29 |         align-items: center;
30 |       }
31 |       #loadingLogo h1 {
32 |         font-weight: normal;
33 |       }
34 |     </style>
35 |   </head>
36 |   <body>
37 |     <noscript>You need to enable JavaScript to run this app.</noscript>
38 |     <div id="root">
39 |       <div id="loadingLogo">
40 |         <svg width="96" height="96">
41 |           <circle
42 |             cx="48"
43 |             cy="48"
44 |             r="42"
45 |             stroke="#fff"
46 |             stroke-width="12"
47 |             fill="none"
48 |           />
49 |         </svg>
50 |         <h1>grommet designer</h1>
51 |       </div>
52 |     </div>
53 |     <script crossorigin src="/react.production.min.js"></script>
54 |     <script crossorigin src="/react-dom.production.min.js"></script>
55 |     <script crossorigin src="/react-is.production.min.js"></script>
56 |     <script crossorigin src="/styled-components.min.js"></script>
57 |     <script crossorigin src="/grommet-icons.min.js"></script>
58 |     <script crossorigin src="/grommet.min.js"></script>
59 |   </body>
60 | </html>
61 | 


--------------------------------------------------------------------------------
/src/Properties/ComponentInput.js:
--------------------------------------------------------------------------------
 1 | import React, { useCallback, useContext } from 'react';
 2 | import { Box, Button } from 'grommet';
 3 | import { Add, Close, Edit } from 'grommet-icons';
 4 | import { getComponent, removeComponent } from '../design2';
 5 | import SelectionContext from '../SelectionContext';
 6 | 
 7 | const ComponentInput = ({ id, htmlId, name, onChange, value }) => {
 8 |   const [, setSelection, { setLocation }] = useContext(SelectionContext);
 9 | 
10 |   const onChangeAndSet = useCallback(
11 |     (nextValue) => {
12 |       onChange(nextValue);
13 |       // update location so Tree knows about the new value to start with
14 |       setLocation({ property: { id, value: nextValue, onChangeAndSet } });
15 |     },
16 |     [id, onChange, setLocation],
17 |   );
18 | 
19 |   if (value && typeof value === 'string') return null;
20 |   // if we have a value ensure we have a component there. if not, clear it
21 |   if (value && !getComponent(value)) onChange(undefined);
22 | 
23 |   return (
24 |     <Box direction="row">
25 |       {value ? (
26 |         <>
27 |           <Button
28 |             id={htmlId}
29 |             aria-label={`Edit ${name}`}
30 |             icon={<Edit />}
31 |             onClick={() => {
32 |               setLocation({
33 |                 property: { id, value, onChange: onChangeAndSet },
34 |               });
35 |               setSelection(value);
36 |             }}
37 |           />
38 |           <Button
39 |             icon={<Close />}
40 |             onClick={() => {
41 |               onChange(undefined);
42 |               removeComponent(value);
43 |             }}
44 |           />
45 |         </>
46 |       ) : (
47 |         <Button
48 |           id={htmlId}
49 |           aria-label={`Add ${name}`}
50 |           icon={<Add />}
51 |           onClick={() => {
52 |             setLocation({ property: { id, onChange: onChangeAndSet } });
53 |             setSelection(value);
54 |           }}
55 |         />
56 |       )}
57 |     </Box>
58 |   );
59 | };
60 | 
61 | export default ComponentInput;
62 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/DataChartSeries.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, FormField, TextInput } from 'grommet';
 3 | import ArrayOfObjects from './ArrayOfObjects';
 4 | 
 5 | const Series = ({ value, onChange }) => {
 6 |   const setField = (name, fieldValue) => {
 7 |     const nextValue = JSON.parse(JSON.stringify(value));
 8 |     if (fieldValue) nextValue[name] = fieldValue;
 9 |     else delete nextValue[name];
10 |     onChange(nextValue);
11 |   };
12 | 
13 |   return (
14 |     <Box flex="grow" align="end">
15 |       <Box flex="grow">
16 |         <FormField label="property">
17 |           <TextInput
18 |             value={value.property || ''}
19 |             onChange={(event) => setField('property', event.target.value)}
20 |           />
21 |         </FormField>
22 |         <FormField label="label">
23 |           <TextInput
24 |             value={value.label || ''}
25 |             onChange={(event) => setField('label', event.target.value)}
26 |           />
27 |         </FormField>
28 |         <FormField label="prefix">
29 |           <TextInput
30 |             value={value.prefix || ''}
31 |             onChange={(event) => setField('prefix', event.target.value)}
32 |           />
33 |         </FormField>
34 |         <FormField label="suffix">
35 |           <TextInput
36 |             value={value.suffix || ''}
37 |             onChange={(event) => setField('suffix', event.target.value)}
38 |           />
39 |         </FormField>
40 |       </Box>
41 |     </Box>
42 |   );
43 | };
44 | 
45 | // convert array of strings to be an object for editing, back if can be
46 | const DataChartSeries = ({ value = [], onChange, ...rest }) => (
47 |   <ArrayOfObjects
48 |     value={value.map((v) => (typeof v === 'string' ? { property: v } : v))}
49 |     name="series"
50 |     labelKey="property"
51 |     Edit={Series}
52 |     onChange={(nextValue) =>
53 |       onChange(
54 |         nextValue.map((v) => (Object.keys(v).length === 1 ? v.property : v)),
55 |       )
56 |     }
57 |     {...rest}
58 |   />
59 | );
60 | 
61 | export default DataChartSeries;
62 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/ChartValues.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, Button, FormField, TextInput } from 'grommet';
 3 | import { Add, Trash } from 'grommet-icons';
 4 | 
 5 | const ChartValues = ({ value, onChange }) => {
 6 |   return (
 7 |     <Box direction="row" gap="medium">
 8 |       {(value || [])
 9 |         .filter((item) => item)
10 |         .map((item, i) => (
11 |           <Box basis="xsmall" flex="grow" key={i}>
12 |             <Box flex="grow">
13 |               <FormField label="label">
14 |                 <TextInput
15 |                   value={item.label || ''}
16 |                   onChange={(event) => {
17 |                     const nextValue = JSON.parse(JSON.stringify(value));
18 |                     nextValue[i].label = event.target.value;
19 |                     onChange(nextValue);
20 |                   }}
21 |                 />
22 |               </FormField>
23 |               <FormField label="value">
24 |                 <TextInput
25 |                   value={item.value[1]}
26 |                   onChange={(event) => {
27 |                     const nextValue = JSON.parse(JSON.stringify(value));
28 |                     nextValue[i].value = [i, parseInt(event.target.value, 10)];
29 |                     onChange(nextValue);
30 |                   }}
31 |                 />
32 |               </FormField>
33 |             </Box>
34 |             <Button
35 |               icon={<Trash />}
36 |               onClick={() => {
37 |                 const nextValue = JSON.parse(JSON.stringify(value));
38 |                 nextValue.splice(i, 1);
39 |                 // prune empty values
40 |                 onChange(nextValue.filter((i) => i));
41 |               }}
42 |             />
43 |           </Box>
44 |         ))}
45 |       <Button
46 |         icon={<Add />}
47 |         hoverIndicator
48 |         onClick={() => {
49 |           const nextValue = JSON.parse(JSON.stringify(value || []));
50 |           nextValue.push({ value: [] });
51 |           onChange(nextValue);
52 |         }}
53 |       />
54 |     </Box>
55 |   );
56 | };
57 | 
58 | export default ChartValues;
59 | 


--------------------------------------------------------------------------------
/src/Tree/Data.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from 'react';
 2 | import { Box, Button, Header, Heading, Text } from 'grommet';
 3 | import { Add } from 'grommet-icons';
 4 | import { addData, useAllData } from '../design2';
 5 | import SelectionContext from '../SelectionContext';
 6 | 
 7 | const Data = () => {
 8 |   const [selection, setSelection, { setLocation }] =
 9 |     useContext(SelectionContext);
10 |   const allData = useAllData();
11 | 
12 |   return (
13 |     <Box flex={false} border="top">
14 |       <Header>
15 |         <Heading level={3} size="xsmall" margin="small" color="selected-text">
16 |           Data
17 |         </Heading>
18 |         <Button
19 |           icon={<Add />}
20 |           tip="add a data source"
21 |           hoverIndicator
22 |           onClick={() => {
23 |             const newData = addData();
24 |             setLocation({ data: newData.id });
25 |             setSelection(newData.id);
26 |           }}
27 |         />
28 |       </Header>
29 |       {Object.keys(allData)
30 |         .map((id) => parseInt(id, 10))
31 |         .map((id) => (
32 |           <Box key={id} flex={false}>
33 |             <Button
34 |               fill
35 |               hoverIndicator
36 |               aria-label={`Select ${allData[id].name}`}
37 |               onClick={() => {
38 |                 setLocation({ data: id });
39 |                 setSelection(id);
40 |               }}
41 |             >
42 |               <Box
43 |                 direction="row"
44 |                 align="center"
45 |                 gap="medium"
46 |                 pad={{ vertical: 'xsmall', horizontal: 'small' }}
47 |                 background={
48 |                   selection === id ? 'selected-background' : undefined
49 |                 }
50 |               >
51 |                 <Text
52 |                   size="medium"
53 |                   truncate
54 |                   color={(selection === id && 'selected-text') || undefined}
55 |                 >
56 |                   {allData[id].name}
57 |                 </Text>
58 |               </Box>
59 |             </Button>
60 |           </Box>
61 |         ))}
62 |     </Box>
63 |   );
64 | };
65 | 
66 | export default Data;
67 | 


--------------------------------------------------------------------------------
/src/Properties/StringOrBooleanProperty.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, Button, CheckBox, Text, TextInput } from 'grommet';
 3 | import { FormClose } from 'grommet-icons';
 4 | import Field from '../components/Field';
 5 | import useDebounce from '../useDebounce';
 6 | 
 7 | const StringOrBooleanProperty = React.forwardRef(
 8 |   ({ name, onChange, value: valueProp, ...rest }, ref) => {
 9 |     const [value, setValue] = useDebounce(valueProp, onChange);
10 |     return (
11 |       <Field key={name} label={name} htmlFor={name}>
12 |         <Box direction="row" gap="small">
13 |           {value === undefined && (
14 |             <Button title="set data reference" onClick={() => onChange('{}')}>
15 |               <Text color="text-weak">{'{}'}</Text>
16 |             </Button>
17 |           )}
18 |           {typeof value === 'string' ? (
19 |             <>
20 |               <TextInput
21 |                 ref={ref}
22 |                 id={name}
23 |                 name={name}
24 |                 plain
25 |                 value={value || ''}
26 |                 onChange={(event) => setValue(event.target.value)}
27 |                 style={{ textAlign: 'end' }}
28 |               />
29 |               <Button
30 |                 title="clear"
31 |                 icon={<FormClose />}
32 |                 hoverIndicator
33 |                 onClick={() => onChange(undefined)}
34 |               />
35 |             </>
36 |           ) : (
37 |             <Box direction="row" pad="small">
38 |               <CheckBox
39 |                 ref={ref}
40 |                 id={name}
41 |                 name={name}
42 |                 checked={!!value}
43 |                 onChange={(event) => onChange(event.target.checked)}
44 |               />
45 |               {value === false && (
46 |                 <Box
47 |                   title="undefine"
48 |                   pad="xsmall"
49 |                   round="xsmall"
50 |                   hoverIndicator
51 |                   onClick={() => onChange(undefined)}
52 |                 >
53 |                   <FormClose />
54 |                 </Box>
55 |               )}
56 |             </Box>
57 |           )}
58 |         </Box>
59 |       </Field>
60 |     );
61 |   },
62 | );
63 | 
64 | export default StringOrBooleanProperty;
65 | 


--------------------------------------------------------------------------------
/src/Tree/AddLibraries.js:
--------------------------------------------------------------------------------
 1 | import React, { useCallback, useContext } from 'react';
 2 | import ReactGA from 'react-ga';
 3 | import { Box, Heading } from 'grommet';
 4 | import { addComponent, addScreen, getLibraries } from '../design2';
 5 | import SelectionContext from '../SelectionContext';
 6 | import AddButton from './AddButton';
 7 | 
 8 | const AddLibraries = ({ addOptions, onClose, searchExp }) => {
 9 |   const [selection, setSelection, { setLocation }] =
10 |     useContext(SelectionContext);
11 |   const libraries = getLibraries();
12 | 
13 |   const onAdd = useCallback(
14 |     (typeName) => {
15 |       if (typeName === 'designer.Screen') {
16 |         const screen = addScreen(selection);
17 |         setLocation({ screen: screen.id });
18 |         setSelection(screen.id);
19 |       } else {
20 |         const component = addComponent(typeName, addOptions);
21 |         setSelection(component.id);
22 |       }
23 | 
24 |       ReactGA.event({
25 |         category: 'edit',
26 |         action: 'add component',
27 |         label: typeName,
28 |       });
29 | 
30 |       onClose();
31 |     },
32 |     [addOptions, onClose, selection, setLocation, setSelection],
33 |   );
34 | 
35 |   return libraries.map((library) => {
36 |     const { components, name: libraryName, structure } = library;
37 | 
38 |     return structure
39 |       .filter(
40 |         ({ components: names }) =>
41 |           !searchExp || names.some((name) => name.match(searchExp)),
42 |       )
43 |       .map(({ name, Icon, components: names }) => (
44 |         <Box key={name} flex={false}>
45 |           <Box
46 |             direction="row"
47 |             gap="medium"
48 |             align="center"
49 |             justify="between"
50 |             pad={{ horizontal: 'small', vertical: 'xsmall' }}
51 |           >
52 |             <Heading level={4} size="small" margin="none">
53 |               {name}
54 |             </Heading>
55 |             {Icon && <Icon color="text-xweak" />}
56 |           </Box>
57 |           {names
58 |             ?.filter((name) => !searchExp || name.match(searchExp))
59 |             .map((name) => {
60 |               let content = (
61 |                 <AddButton
62 |                   key={name}
63 |                   label={components[name].name}
64 |                   onClick={() => onAdd(`${libraryName}.${name}`)}
65 |                 />
66 |               );
67 |               return content;
68 |             })}
69 |         </Box>
70 |       ));
71 |   });
72 | };
73 | 
74 | export default AddLibraries;
75 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/HeadingMargin.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, FormField, Select, RadioButtonGroup } from 'grommet';
 3 | 
 4 | const flavors = ['all sides the same', 'varied'];
 5 | 
 6 | const HeadingMargin = ({ name, value, onChange }) => {
 7 |   return (
 8 |     <Box>
 9 |       <Box pad="small">
10 |         <RadioButtonGroup
11 |           name="flavor"
12 |           options={flavors}
13 |           value={typeof value === 'object' ? flavors[1] : flavors[0]}
14 |           onChange={(event) => {
15 |             const choice = event.target.value;
16 |             const nextValue = choice === flavors[1] ? {} : undefined;
17 |             onChange(nextValue);
18 |           }}
19 |         />
20 |       </Box>
21 |       {typeof value === 'object' ? (
22 |         <Box>
23 |           {['horizontal', 'vertical', 'top', 'bottom', 'left', 'right'].map(
24 |             (side) => (
25 |               <FormField key={side} label={side}>
26 |                 <Select
27 |                   options={[
28 |                     'none',
29 |                     'xsmall',
30 |                     'small',
31 |                     'medium',
32 |                     'large',
33 |                     'xlarge',
34 |                     'undefined',
35 |                   ]}
36 |                   value={(value || {})[side] || ''}
37 |                   onChange={({ option }) => {
38 |                     const nextValue = JSON.parse(JSON.stringify(value));
39 |                     if (option === 'undefined') {
40 |                       delete nextValue[side];
41 |                     } else {
42 |                       nextValue[side] = option;
43 |                     }
44 |                     onChange(nextValue);
45 |                   }}
46 |                 />
47 |               </FormField>
48 |             ),
49 |           )}
50 |         </Box>
51 |       ) : (
52 |         <Box>
53 |           <FormField label={name}>
54 |             <Select
55 |               options={[
56 |                 'none',
57 |                 'xsmall',
58 |                 'small',
59 |                 'medium',
60 |                 'large',
61 |                 'xlarge',
62 |                 'undefined',
63 |               ]}
64 |               value={value || ''}
65 |               onChange={({ option }) =>
66 |                 onChange(option === 'undefined' ? undefined : option)
67 |               }
68 |             />
69 |           </FormField>
70 |         </Box>
71 |       )}
72 |     </Box>
73 |   );
74 | };
75 | 
76 | export default HeadingMargin;
77 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/BoxRound.js:
--------------------------------------------------------------------------------
 1 | import React, { Fragment } from 'react';
 2 | import { Box, FormField, Select, RadioButtonGroup } from 'grommet';
 3 | 
 4 | const flavors = ['all corners the same', 'varied'];
 5 | 
 6 | const sizes = ['xsmall', 'small', 'medium', 'large', 'xlarge', 'full'];
 7 | 
 8 | const corners = [
 9 |   'top',
10 |   'left',
11 |   'bottom',
12 |   'right',
13 |   'top-left',
14 |   'top-right',
15 |   'bottom-left',
16 |   'bottom-right',
17 | ];
18 | 
19 | const BoxRound = ({ name, value, onChange }) => {
20 |   return (
21 |     <Box>
22 |       <Box margin={{ vertical: 'medium' }}>
23 |         <RadioButtonGroup
24 |           name="flavor"
25 |           options={flavors}
26 |           value={typeof value === 'object' ? flavors[1] : flavors[0]}
27 |           onChange={(event) => {
28 |             const choice = event.target.value;
29 |             const nextValue = choice === flavors[1] ? {} : undefined;
30 |             onChange(nextValue);
31 |           }}
32 |         />
33 |       </Box>
34 |       <Box>
35 |         {typeof value === 'object' ? (
36 |           <Fragment>
37 |             <FormField label="corner">
38 |               <Select
39 |                 options={value.corner ? [...corners, 'undefined'] : corners}
40 |                 value={value.corner || ''}
41 |                 onChange={({ option }) =>
42 |                   onChange({
43 |                     ...value,
44 |                     corner: option === 'undefined' ? undefined : option,
45 |                   })
46 |                 }
47 |               />
48 |             </FormField>
49 |             <FormField label="size">
50 |               <Select
51 |                 options={value.size ? [...sizes, 'undefined'] : sizes}
52 |                 value={value.size || ''}
53 |                 onChange={({ option }) =>
54 |                   onChange({
55 |                     ...value,
56 |                     size: option === 'undefined' ? undefined : option,
57 |                   })
58 |                 }
59 |               />
60 |             </FormField>
61 |           </Fragment>
62 |         ) : (
63 |           <FormField label={name}>
64 |             <Select
65 |               options={value ? [...sizes, 'undefined'] : sizes}
66 |               value={value || ''}
67 |               onChange={({ option }) =>
68 |                 onChange(option === 'undefined' ? undefined : option)
69 |               }
70 |             />
71 |           </FormField>
72 |         )}
73 |       </Box>
74 |     </Box>
75 |   );
76 | };
77 | 
78 | export default BoxRound;
79 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/structure.js:
--------------------------------------------------------------------------------
  1 | import {
  2 |   BarChart,
  3 |   Bold,
  4 |   Capacity,
  5 |   CheckboxSelected,
  6 |   Image,
  7 |   Navigate,
  8 | } from 'grommet-icons';
  9 | 
 10 | export const structure = [
 11 |   {
 12 |     name: 'Layout',
 13 |     Icon: Capacity,
 14 |     components: [
 15 |       'Box',
 16 |       'Grid',
 17 |       'Page',
 18 |       'PageContent',
 19 |       'PageHeader',
 20 |       'Main',
 21 |       'Nav',
 22 |       'Header',
 23 |       'Footer',
 24 |       'Sidebar',
 25 |       'Card',
 26 |       'CardHeader',
 27 |       'CardBody',
 28 |       'CardFooter',
 29 |       'Stack',
 30 |       'Layer',
 31 |     ],
 32 |   },
 33 |   {
 34 |     name: 'Typography',
 35 |     Icon: Bold,
 36 |     components: ['Heading', 'Paragraph', 'Text', 'Markdown'],
 37 |   },
 38 |   {
 39 |     name: 'Controls',
 40 |     Icon: Navigate,
 41 |     components: [
 42 |       'Accordion',
 43 |       'AccordionPanel',
 44 |       'Anchor',
 45 |       'Button',
 46 |       'DropButton',
 47 |       'Menu',
 48 |       'Tabs',
 49 |       'Tab',
 50 |       'Tip',
 51 |       'ToggleGroup',
 52 |     ],
 53 |   },
 54 |   {
 55 |     name: 'Input',
 56 |     Icon: CheckboxSelected,
 57 |     components: [
 58 |       'CheckBox',
 59 |       'CheckBoxGroup',
 60 |       'DateInput',
 61 |       'FileInput',
 62 |       'Form',
 63 |       'FormField',
 64 |       'MaskedInput',
 65 |       'RadioButtonGroup',
 66 |       'RangeInput',
 67 |       'Select',
 68 |       'SelectMultiple',
 69 |       'StarRating',
 70 |       'TextArea',
 71 |       'TextInput',
 72 |       'ThumbsRating',
 73 |     ],
 74 |   },
 75 |   {
 76 |     name: 'Visualizations',
 77 |     Icon: BarChart,
 78 |     components: [
 79 |       'Avatar',
 80 |       'Calendar',
 81 |       'Cards',
 82 |       'Chart',
 83 |       'Clock',
 84 |       'Data',
 85 |       'DataChart',
 86 |       'DataClearFilters',
 87 |       'DataFilter',
 88 |       'DataFilters',
 89 |       'DataSearch',
 90 |       'DataSort',
 91 |       'DataSummary',
 92 |       'DataTable',
 93 |       'DataTableColumns',
 94 |       'DataTableGroupBy',
 95 |       'DataView',
 96 |       'Diagram',
 97 |       'Distribution',
 98 |       'List',
 99 |       'Meter',
100 |       'NameValueList',
101 |       'NameValuePair',
102 |       'Notification',
103 |       'Pagination',
104 |       'Spinner',
105 |       'Tag',
106 |       'Toolbar',
107 |       'WorldMap',
108 |     ],
109 |   },
110 |   {
111 |     name: 'Media',
112 |     Icon: Image,
113 |     components: ['Carousel', 'Image', 'Video'],
114 |   },
115 | ];
116 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/Edge.js:
--------------------------------------------------------------------------------
 1 | import React, { Fragment } from 'react';
 2 | import { Box, FormField, Select, RadioButtonGroup } from 'grommet';
 3 | 
 4 | const flavors = ['all sides the same', 'varied'];
 5 | 
 6 | const Edge = ({ name, value, onChange }) => {
 7 |   return (
 8 |     <Box>
 9 |       <Box margin={{ vertical: 'medium' }}>
10 |         <RadioButtonGroup
11 |           name="flavor"
12 |           options={flavors}
13 |           value={typeof value === 'object' ? flavors[1] : flavors[0]}
14 |           onChange={(event) => {
15 |             const choice = event.target.value;
16 |             const nextValue = choice === flavors[1] ? {} : undefined;
17 |             onChange(nextValue);
18 |           }}
19 |         />
20 |       </Box>
21 |       <Box>
22 |         {typeof value === 'object' ? (
23 |           <Fragment>
24 |             {['horizontal', 'vertical', 'top', 'bottom', 'left', 'right'].map(
25 |               (side) => (
26 |                 <FormField key={side} label={side}>
27 |                   <Select
28 |                     options={[
29 |                       'none',
30 |                       'xsmall',
31 |                       'small',
32 |                       'medium',
33 |                       'large',
34 |                       'xlarge',
35 |                       'undefined',
36 |                     ]}
37 |                     value={(value || {})[side] || ''}
38 |                     onChange={({ option }) => {
39 |                       const nextValue = JSON.parse(JSON.stringify(value));
40 |                       if (option === 'undefined') {
41 |                         delete nextValue[side];
42 |                       } else {
43 |                         nextValue[side] = option;
44 |                       }
45 |                       onChange(nextValue);
46 |                     }}
47 |                   />
48 |                 </FormField>
49 |               ),
50 |             )}
51 |           </Fragment>
52 |         ) : (
53 |           <FormField label={name}>
54 |             <Select
55 |               options={[
56 |                 'none',
57 |                 'xsmall',
58 |                 'small',
59 |                 'medium',
60 |                 'large',
61 |                 'xlarge',
62 |                 'undefined',
63 |               ]}
64 |               value={value || ''}
65 |               onChange={({ option }) =>
66 |                 onChange(option === 'undefined' ? undefined : option)
67 |               }
68 |             />
69 |           </FormField>
70 |         )}
71 |       </Box>
72 |     </Box>
73 |   );
74 | };
75 | 
76 | export default Edge;
77 | 


--------------------------------------------------------------------------------
/src/Tree/Duplicate.js:
--------------------------------------------------------------------------------
 1 | import React, { useRef } from 'react';
 2 | import ReactGA from 'react-ga';
 3 | import {
 4 |   Box,
 5 |   Button,
 6 |   Form,
 7 |   FormField,
 8 |   Footer,
 9 |   Header,
10 |   Heading,
11 |   Layer,
12 |   TextInput,
13 | } from 'grommet';
14 | import { Close } from 'grommet-icons';
15 | import { close, getDesign, load, useDesigns } from '../design2';
16 | 
17 | const Duplicate = ({ onClose }) => {
18 |   // just local to check for duplicate name
19 |   const designs = useDesigns({ localOnly: true });
20 |   const nameRef = useRef();
21 | 
22 |   // useEffect(() => nameRef.current.focus(), []);
23 | 
24 |   return (
25 |     <Layer
26 |       position="top-left"
27 |       margin="medium"
28 |       animation="fadeIn"
29 |       onEsc={onClose}
30 |       onClickOutside={onClose}
31 |     >
32 |       <Box flex elevation="medium" pad="medium">
33 |         <Header>
34 |           <Heading level={2} size="small" margin="none">
35 |             duplicate
36 |           </Heading>
37 |           <Button
38 |             tip="cancel duplicate"
39 |             icon={<Close />}
40 |             hoverIndicator
41 |             onClick={onClose}
42 |           />
43 |         </Header>
44 |         <Form
45 |           validate="change"
46 |           onSubmit={({ value }) => {
47 |             const design = JSON.parse(JSON.stringify(getDesign()));
48 |             // if current design isn't local, free up some local storage
49 |             // space first
50 |             close();
51 |             design.name = value.name;
52 |             delete design.id;
53 |             delete design.publishedUrl;
54 |             delete design.publishedDate;
55 |             delete design.publishedVersions;
56 |             delete design.email;
57 |             delete design.password;
58 |             design.local = true;
59 |             load({ design });
60 |             ReactGA.event({ category: 'switch', action: 'duplicate design' });
61 |             onClose();
62 |           }}
63 |         >
64 |           <FormField
65 |             label="name"
66 |             htmlFor="name"
67 |             name="name"
68 |             required
69 |             validate={(name) =>
70 |               designs.find(({ name: n, local }) => local && n === name)
71 |                 ? 'existing'
72 |                 : undefined
73 |             }
74 |           >
75 |             <TextInput ref={nameRef} id="name" name="name" />
76 |           </FormField>
77 |           <Footer margin={{ top: 'medium' }}>
78 |             <Button label="duplicate" type="submit" primary />
79 |           </Footer>
80 |         </Form>
81 |       </Box>
82 |     </Layer>
83 |   );
84 | };
85 | 
86 | export default Duplicate;
87 | 


--------------------------------------------------------------------------------
/src/Properties/ColorProperty.js:
--------------------------------------------------------------------------------
 1 | import React, {
 2 |   forwardRef,
 3 |   useContext,
 4 |   useEffect,
 5 |   useMemo,
 6 |   useRef,
 7 |   useState,
 8 | } from 'react';
 9 | import { Box, Button, Text, ThemeContext } from 'grommet';
10 | import { deepMerge } from 'grommet/utils';
11 | import { getTheme } from '../design2';
12 | import ArrayProperty from './ArrayProperty';
13 | import DataPathField from './DataPathField';
14 | 
15 | // input is due to a bug in grommet-theme-hpe v1.0.5
16 | const internalColors = [
17 |   'focus',
18 |   'icon',
19 |   'placeholder',
20 |   'selected',
21 |   'selected-background',
22 |   'selected-text',
23 |   'input',
24 | ];
25 | 
26 | const ColorLabel =
27 |   (theme) =>
28 |   ({ selected, value }) =>
29 |     (
30 |       <Box pad="xsmall" direction="row" gap="small" align="center">
31 |         <ThemeContext.Extend value={theme}>
32 |           <Box pad="small" background={value} />
33 |         </ThemeContext.Extend>
34 |         <Text weight={selected ? 'bold' : undefined}>{value}</Text>
35 |       </Box>
36 |     );
37 | 
38 | const ColorProperty = forwardRef(
39 |   ({ first, name, onChange, sub, value }, ref) => {
40 |     const theme = getTheme();
41 |     const baseTheme = useContext(ThemeContext);
42 |     const options = useMemo(() => {
43 |       const merged = deepMerge(baseTheme.global.colors, theme.global.colors);
44 |       return Object.keys(merged)
45 |         .filter((c) => merged[c] && !internalColors.includes(c))
46 |         .sort();
47 |     }, [baseTheme.global.colors, theme.global.colors]);
48 | 
49 |     const [focusDataPath, setFocusDataPath] = useState();
50 |     const dpRef = useRef();
51 | 
52 |     useEffect(() => {
53 |       if (focusDataPath) {
54 |         dpRef.current.focus();
55 |         setFocusDataPath(false);
56 |       }
57 |     }, [focusDataPath]);
58 | 
59 |     if (value === '' || value?.[0] === '{')
60 |       return (
61 |         <DataPathField
62 |           ref={dpRef}
63 |           name={name}
64 |           onChange={onChange}
65 |           value={value}
66 |         />
67 |       );
68 | 
69 |     return (
70 |       <ArrayProperty
71 |         ref={ref}
72 |         name={name}
73 |         sub={sub}
74 |         first={first}
75 |         Label={ColorLabel(theme)}
76 |         options={options}
77 |         value={value}
78 |         onChange={onChange}
79 |       >
80 |         {!value && (
81 |           <Button
82 |             onClick={() => {
83 |               onChange('{}');
84 |               setFocusDataPath(true);
85 |             }}
86 |           >
87 |             <Text color="text-weak">{'{}'}</Text>
88 |           </Button>
89 |         )}
90 |       </ArrayProperty>
91 |     );
92 |   },
93 | );
94 | 
95 | export default ColorProperty;
96 | 


--------------------------------------------------------------------------------
/src/Properties/ObjectProperty.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Box, Button, Text } from 'grommet';
 3 | import { FormClose, FormDown, FormUp } from 'grommet-icons';
 4 | import Field from '../components/Field';
 5 | 
 6 | const jsonValue = (value) =>
 7 |   typeof value === 'string' ? value : JSON.stringify(value);
 8 | 
 9 | const ObjectProperty = React.forwardRef(
10 |   ({ name, onChange, definition, Property, value }, ref) => {
11 |     const [expand, setExpand] = React.useState();
12 |     return (
13 |       <Box key={name}>
14 |         <Box direction="row">
15 |           <Box flex>
16 |             <Button ref={ref} hoverIndicator onClick={() => setExpand(!expand)}>
17 |               <Field label={name}>
18 |                 <Box direction="row" align="center" gap="small">
19 |                   {value && (
20 |                     <Text weight="bold" truncate>
21 |                       {jsonValue(value)}
22 |                     </Text>
23 |                   )}
24 |                   <Box
25 |                     flex={false}
26 |                     pad={{ vertical: 'xsmall', horizontal: 'small' }}
27 |                   >
28 |                     {expand ? (
29 |                       <FormUp color="control" />
30 |                     ) : (
31 |                       <FormDown color="control" />
32 |                     )}
33 |                   </Box>
34 |                 </Box>
35 |               </Field>
36 |             </Button>
37 |           </Box>
38 |           {value && (
39 |             <Box border={{ side: 'horizontal' }}>
40 |               <Button
41 |                 icon={<FormClose />}
42 |                 tip={`clear ${name}`}
43 |                 hoverIndicator
44 |                 onClick={() => onChange(undefined)}
45 |               />
46 |             </Box>
47 |           )}
48 |         </Box>
49 |         {expand && (
50 |           <Box pad={{ left: 'small' }} border="bottom">
51 |             {Object.keys(definition).map((key) => (
52 |               <Property
53 |                 key={key}
54 |                 name={key}
55 |                 definition={definition[key]}
56 |                 value={(value || {})[key]}
57 |                 onChange={(subValue) => {
58 |                   let nextValue = { ...(value || {}) };
59 |                   if (subValue !== undefined && subValue !== '')
60 |                     nextValue[key] = subValue;
61 |                   else delete nextValue[key];
62 |                   onChange(
63 |                     Object.keys(nextValue).length > 0 ? nextValue : undefined,
64 |                   );
65 |                 }}
66 |               />
67 |             ))}
68 |           </Box>
69 |         )}
70 |       </Box>
71 |     );
72 |   },
73 | );
74 | 
75 | export default ObjectProperty;
76 | 


--------------------------------------------------------------------------------
/src/Tree/AddTemplates.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext, useMemo } from 'react';
 2 | import { Anchor, Box, Heading } from 'grommet';
 3 | import { duplicateComponent, useDesign } from '../design2';
 4 | import SelectionContext from '../SelectionContext';
 5 | import AddButton from './AddButton';
 6 | 
 7 | const AddTemplates = ({ addOptions, onClose, searchExp }) => {
 8 |   const [, setSelection] = useContext(SelectionContext);
 9 | 
10 |   const design = useDesign();
11 |   const templates = useMemo(() => {
12 |     const buildTemplates = (design) => {
13 |       const result = {};
14 |       Object.values(design.components)
15 |         .filter((component) => component.name) // must have a name
16 |         .forEach((component) => {
17 |           if (!result[component.name]) result[component.name] = component;
18 |         });
19 |       return { design, templates: result };
20 |     };
21 | 
22 |     const result = [];
23 |     result.push(buildTemplates(design));
24 | 
25 |     if (design.includes) {
26 |       design.includes.forEach(({ id, name }) => {
27 |         const stored = localStorage.getItem(id) || localStorage.getItem(name);
28 |         if (stored) result.push(buildTemplates(JSON.parse(stored)));
29 |       });
30 |     }
31 | 
32 |     return result;
33 |   }, [design]);
34 | 
35 |   return templates
36 |     .filter((template) =>
37 |       Object.keys(template.templates).some(
38 |         (n) => !searchExp || n.match(searchExp),
39 |       ),
40 |     )
41 |     .map((template) => {
42 |       const { design, templates, url } = template;
43 |       const { name } = design;
44 | 
45 |       return (
46 |         <Box key={name} flex={false} border="top">
47 |           <Box
48 |             pad={{ horizontal: 'small', vertical: 'xsmall' }}
49 |             margin={{ top: 'small' }}
50 |           >
51 |             <Heading level="3" size="small" margin="none">
52 |               {url ? (
53 |                 <Anchor
54 |                   target="_blank"
55 |                   href={`${url}&mode=edit`}
56 |                   label={name}
57 |                 />
58 |               ) : (
59 |                 name
60 |               )}
61 |             </Heading>
62 |           </Box>
63 |           {Object.keys(templates)
64 |             .filter((name) => !searchExp || name.match(searchExp))
65 |             .map((name) => (
66 |               <AddButton
67 |                 key={name}
68 |                 label={name}
69 |                 onClick={(event) => {
70 |                   const templateId = templates[name].id;
71 |                   const id = duplicateComponent(templateId, {
72 |                     ...addOptions,
73 |                     template: design,
74 |                   });
75 |                   if (id) setSelection(id);
76 |                   onClose();
77 |                 }}
78 |               />
79 |             ))}
80 |         </Box>
81 |       );
82 |     });
83 | };
84 | 
85 | export default AddTemplates;
86 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/starters.js:
--------------------------------------------------------------------------------
  1 | export const starters = {
  2 |   screens: {
  3 |     '1': { id: 1, name: 'App 2 column', path: '/app-2-column', root: 6 },
  4 |   },
  5 |   screenOrder: [1],
  6 |   components: {
  7 |     '6': {
  8 |       type: 'grommet.Grid',
  9 |       id: 6,
 10 |       props: { columns: [['xxsmall', 'auto'], 'flex'], fill: 'vertical' },
 11 |       children: [7, 8],
 12 |     },
 13 |     '7': {
 14 |       type: 'grommet.Box',
 15 |       id: 7,
 16 |       props: {
 17 |         align: 'start',
 18 |         justify: 'between',
 19 |         background: { color: 'brand' },
 20 |       },
 21 |       children: [14, 15],
 22 |       name: 'Sidebar',
 23 |       collapsed: true,
 24 |     },
 25 |     '8': {
 26 |       type: 'grommet.Box',
 27 |       id: 8,
 28 |       props: { align: 'stretch', justify: 'start' },
 29 |       children: [17, 18],
 30 |     },
 31 |     '10': {
 32 |       type: 'grommet.Nav',
 33 |       id: 10,
 34 |       props: {
 35 |         align: 'center',
 36 |         flex: false,
 37 |         direction: 'column',
 38 |         gap: 'xxsmall',
 39 |       },
 40 |       children: [11, 13],
 41 |     },
 42 |     '11': {
 43 |       type: 'grommet.Button',
 44 |       id: 11,
 45 |       props: { label: '', icon: 'Apps' },
 46 |     },
 47 |     '12': {
 48 |       type: 'grommet.Button',
 49 |       id: 12,
 50 |       props: { label: '', icon: 'Ad' },
 51 |     },
 52 |     '13': {
 53 |       type: 'grommet.Button',
 54 |       id: 13,
 55 |       props: { label: '', icon: 'Escalator' },
 56 |     },
 57 |     '14': {
 58 |       type: 'grommet.Box',
 59 |       id: 14,
 60 |       props: { align: 'center', justify: 'center' },
 61 |       children: [12, 10],
 62 |     },
 63 |     '15': {
 64 |       type: 'grommet.Box',
 65 |       id: 15,
 66 |       props: { align: 'center', justify: 'center' },
 67 |       children: [16],
 68 |     },
 69 |     '16': {
 70 |       type: 'grommet.Button',
 71 |       id: 16,
 72 |       props: { label: '', icon: 'User' },
 73 |     },
 74 |     '17': {
 75 |       type: 'grommet.Header',
 76 |       id: 17,
 77 |       props: {
 78 |         align: 'center',
 79 |         direction: 'row',
 80 |         flex: false,
 81 |         justify: 'between',
 82 |         gap: 'medium',
 83 |         pad: { left: 'medium', vertical: 'xsmall', right: 'xsmall' },
 84 |       },
 85 |       children: [19, 22],
 86 |     },
 87 |     '18': {
 88 |       type: 'grommet.Main',
 89 |       id: 18,
 90 |       props: { fill: 'vertical', flex: 'grow', overflow: 'auto' },
 91 |     },
 92 |     '19': {
 93 |       type: 'grommet.Heading',
 94 |       id: 19,
 95 |       props: { margin: 'none', size: 'small' },
 96 |     },
 97 |     '22': { type: 'grommet.Menu', id: 22, props: { label: 'Actions' } },
 98 |   },
 99 |   theme: 'grommet',
100 |   imports: [],
101 |   name: 'App Starters',
102 |   nextId: 23,
103 |   version: 3.4,
104 |   created: '2020-03-21T05:50:12.208Z',
105 |   date: '2020-03-21T15:49:31.000Z',
106 | };
107 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/LayoutState.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Blank } from 'grommet-icons';
  3 | import InlineOption from './InlineOption';
  4 | 
  5 | const contentCoords = ({ align, direction, justify }) => {
  6 |   if (direction === 'row' || direction === 'row-responsive') {
  7 |     let x;
  8 |     let y;
  9 |     if (justify === 'start' || !justify) x = [3, 10];
 10 |     else if (justify === 'center') x = [9, 15];
 11 |     else if (justify === 'end') x = [14, 21];
 12 |     else if (justify === 'between') x = [3, 21];
 13 |     else x = [3, 3];
 14 |     if (align === 'stretch' || !align) y = [3, 21];
 15 |     else if (align === 'start') y = [3, 11];
 16 |     else if (align === 'center') y = [8, 17];
 17 |     else if (align === 'end') y = [13, 21];
 18 |     else if (align === 'baseline')
 19 |       return [
 20 |         [x[0], 10, x[0], 12],
 21 |         [x[1], 7, x[1], 12],
 22 |       ];
 23 |     else y = [3, 3];
 24 |     return [
 25 |       [x[0], y[0], x[0], y[1]],
 26 |       [x[1], y[0], x[1], y[1]],
 27 |     ];
 28 |   } else {
 29 |     let x;
 30 |     let y;
 31 |     if (justify === 'start' || !justify) y = [4, 10];
 32 |     else if (justify === 'center') y = [9, 15];
 33 |     else if (justify === 'end') y = [14, 20];
 34 |     else if (justify === 'between') y = [4, 20];
 35 |     else y = [4, 4];
 36 |     if (align === 'stretch' || !align) x = [4, 20];
 37 |     else if (align === 'start' || align === 'baseline') x = [4, 11];
 38 |     else if (align === 'center') x = [8, 17];
 39 |     else if (align === 'end') x = [13, 20];
 40 |     else x = [4, 4];
 41 |     return [
 42 |       [x[0], y[0], x[1], y[0]],
 43 |       [x[0], y[1], x[1], y[1]],
 44 |     ];
 45 |   }
 46 | };
 47 | 
 48 | const edgeCoords = ({ axis, direction = 'column' }) => {
 49 |   if (
 50 |     (direction === 'row' && axis === 'cross') ||
 51 |     (direction === 'column' && axis === 'main')
 52 |   ) {
 53 |     return [
 54 |       [0, 0, 24, 0],
 55 |       [0, 24, 24, 24],
 56 |     ];
 57 |   } else {
 58 |     return [
 59 |       [0, 0, 0, 24],
 60 |       [24, 0, 24, 24],
 61 |     ];
 62 |   }
 63 | };
 64 | 
 65 | const Edge = ({ coords }) => (
 66 |   <line
 67 |     x1={coords[0]}
 68 |     y1={coords[1]}
 69 |     x2={coords[2]}
 70 |     y2={coords[3]}
 71 |     stroke="#000"
 72 |     strokeWidth="1"
 73 |     strokeLinecap="square"
 74 |   />
 75 | );
 76 | 
 77 | const Line = ({ coords }) => (
 78 |   <line
 79 |     x1={coords[0]}
 80 |     y1={coords[1]}
 81 |     x2={coords[2]}
 82 |     y2={coords[3]}
 83 |     stroke="#000"
 84 |     strokeWidth="5"
 85 |     strokeLinecap="square"
 86 |   />
 87 | );
 88 | 
 89 | const LayoutState = ({ align, axis, checked, direction, justify, label }) => {
 90 |   const c = contentCoords({ align, direction, justify });
 91 |   const e = edgeCoords({ axis, direction });
 92 |   return (
 93 |     <InlineOption label={label}>
 94 |       <Blank color={checked ? 'selected-background' : 'border'}>
 95 |         <Edge coords={e[0]} />
 96 |         <Edge coords={e[1]} />
 97 |         <Line coords={c[0]} />
 98 |         <Line coords={c[1]} />
 99 |       </Blank>
100 |     </InlineOption>
101 |   );
102 | };
103 | 
104 | export default LayoutState;
105 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/SelectOptions.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import { Box, Button, Footer, FormField, List, Text, TextInput } from 'grommet';
 3 | import { Add, Trash } from 'grommet-icons';
 4 | import BackButton from './BackButton';
 5 | import ReorderIcon from './ReorderIcon';
 6 | import useDebounce from './useDebounce';
 7 | 
 8 | const SelectOptions = ({ value: valueProp = [], onChange: onChangeProp }) => {
 9 |   const [value, onChange] = useDebounce(valueProp, onChangeProp);
10 |   const [reorder, setReorder] = useState();
11 | 
12 |   if (reorder)
13 |     return (
14 |       <Box pad={{ bottom: 'small' }} gap="small">
15 |         <List data={value} pad="none" onOrder={onChange}>
16 |           {(option) => (
17 |             <Box>
18 |               <Text>{option}</Text>
19 |             </Box>
20 |           )}
21 |         </List>
22 |         <Footer>
23 |           <BackButton
24 |             title="back to options"
25 |             onClick={() => setReorder(false)}
26 |           />
27 |         </Footer>
28 |       </Box>
29 |     );
30 | 
31 |   return (
32 |     <Box gap="medium">
33 |       <List
34 |         // convert to objects so key doesn't change when editing
35 |         data={value.map((option, id) => ({ id, option }))}
36 |         primaryKey="id"
37 |         border={false}
38 |         pad="none"
39 |       >
40 |         {(item, i) => (
41 |           <Box key={i} direction="row" align="center" justify="end" flex="grow">
42 |             <FormField>
43 |               <TextInput
44 |                 value={item.option || ''}
45 |                 onChange={(event) => {
46 |                   const nextValue = JSON.parse(JSON.stringify(value));
47 |                   nextValue[i] = event.target.value;
48 |                   onChange(nextValue);
49 |                 }}
50 |               />
51 |             </FormField>
52 |             <Button
53 |               icon={<Trash />}
54 |               hoverIndicator
55 |               onClick={() => {
56 |                 const nextValue = JSON.parse(JSON.stringify(value));
57 |                 nextValue.splice(i, 1);
58 |                 onChange(nextValue);
59 |               }}
60 |             />
61 |           </Box>
62 |         )}
63 |       </List>
64 |       <Footer>
65 |         <Button
66 |           icon={<Add />}
67 |           tip={{
68 |             content: 'Add option',
69 |             dropProps: { align: { left: 'right' } },
70 |           }}
71 |           hoverIndicator
72 |           onClick={() => {
73 |             const nextValue = JSON.parse(JSON.stringify(value));
74 |             // start with a reasonable value, we do this so components like
75 |             // CheckBoxGroup don't have duplicate key issues
76 |             let suffix = 1;
77 |             while (nextValue.includes(`option ${suffix}`)) suffix += 1;
78 |             nextValue.push(`option ${suffix}`);
79 |             onChange(nextValue);
80 |           }}
81 |         />
82 |         <Button
83 |           icon={<ReorderIcon />}
84 |           tip={{
85 |             content: 'Re-order items',
86 |             dropProps: { align: { right: 'left' } },
87 |           }}
88 |           hoverIndicator
89 |           onClick={() => setReorder(true)}
90 |         />
91 |       </Footer>
92 |     </Box>
93 |   );
94 | };
95 | 
96 | export default SelectOptions;
97 | 


--------------------------------------------------------------------------------
/src/Properties/LinkOptionsProperty.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext, useMemo } from 'react';
 2 | import { Box, Grid, Select, Text } from 'grommet';
 3 | import { getComponent, getDataByPath, getLinkOptions } from '../design2';
 4 | import SelectionContext from '../SelectionContext';
 5 | 
 6 | const specialNames = {
 7 |   '-any-': '<any option>',
 8 |   '-none-': '<no option>',
 9 | };
10 | 
11 | const LinkOptionsProperty = ({ value, onChange }) => {
12 |   const [selection] = useContext(SelectionContext);
13 |   const component = getComponent(selection);
14 |   const linkOptions = useMemo(() => getLinkOptions(selection), [selection]);
15 |   const [searchText, setSearchText] = React.useState('');
16 |   const searchExp = React.useMemo(
17 |     () => searchText && new RegExp(`${searchText}`, 'i'),
18 |     [searchText],
19 |   );
20 |   const selectOptions = searchExp
21 |     ? linkOptions.filter((o) => searchExp.test(o.label || o))
22 |     : linkOptions;
23 | 
24 |   const LinkLabel = ({ selected, value }) => (
25 |     <Box pad="small">
26 |       <Text weight={selected ? 'bold' : undefined}>
27 |         {(typeof value === 'string' && value) ||
28 |           (typeof value === 'object' && value?.label) ||
29 |           (Array.isArray(value) && value.map((v) => v?.label).join(', '))}
30 |         &nbsp;
31 |       </Text>
32 |     </Box>
33 |   );
34 | 
35 |   // options could be explicit or driven by dataPath
36 |   const names = Object.keys(specialNames);
37 |   if (component?.designProps?.dataPath) {
38 |     let data = getDataByPath(component.designProps.dataPath);
39 |     // apply valueKey if needed
40 |     if (component.props.valueKey)
41 |       data = data.map(
42 |         (d) => d[component.props.valueKey?.key || component.props.valueKey],
43 |       );
44 |     names.push.apply(names, data);
45 |   } else {
46 |     names.push.apply(names, component.props.options);
47 |   }
48 | 
49 |   return (
50 |     <Grid
51 |       gap="small"
52 |       columns={['1/2', '1/2']}
53 |       align="center"
54 |       margin={{ horizontal: 'medium' }}
55 |     >
56 |       {names.map((name) => [
57 |         <Text key="name" textAlign="end">
58 |           {specialNames[name] || name}
59 |         </Text>,
60 |         <Select
61 |           key="value"
62 |           options={[...selectOptions, { label: 'undefined', key: 0 }]}
63 |           multiple
64 |           valueKey="key"
65 |           value={value?.[name] || ''}
66 |           onChange={({ option, value: nextValueArg }) => {
67 |             const nextValue =
68 |               (value && JSON.parse(JSON.stringify(value))) || {};
69 |             if (option?.label === 'undefined') delete nextValue[name];
70 |             else nextValue[name] = nextValueArg;
71 |             onChange(nextValue);
72 |           }}
73 |           onSearch={
74 |             linkOptions.length > 10 || searchExp
75 |               ? (nextSearchText) => setSearchText(nextSearchText)
76 |               : undefined
77 |           }
78 |           onClose={() => setSearchText('')}
79 |           valueLabel={<LinkLabel selected value={value?.[name]} />}
80 |         >
81 |           {(option, index, options, { selected }) => (
82 |             <LinkLabel value={option} selected={selected} />
83 |           )}
84 |         </Select>,
85 |       ])}
86 |     </Grid>
87 |   );
88 | };
89 | 
90 | export default LinkOptionsProperty;
91 | 


--------------------------------------------------------------------------------
/src/templates/details.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "details",
  3 |   "theme": "grommet",
  4 |   "screens": {
  5 |     "1": {
  6 |       "id": 1,
  7 |       "name": "Details",
  8 |       "path": "/",
  9 |       "root": 2
 10 |     }
 11 |   },
 12 |   "screenOrder": [1],
 13 |   "components": {
 14 |     "2": {
 15 |       "id": 2,
 16 |       "type": "grommet.Page",
 17 |       "props": {},
 18 |       "children": [3, 7]
 19 |     },
 20 |     "3": {
 21 |       "type": "grommet.PageContent",
 22 |       "id": 3,
 23 |       "props": {
 24 |         "border": {
 25 |           "side": "bottom"
 26 |         }
 27 |       },
 28 |       "children": [4]
 29 |     },
 30 |     "4": {
 31 |       "type": "grommet.Header",
 32 |       "id": 4,
 33 |       "props": {
 34 |         "align": "center",
 35 |         "direction": "row",
 36 |         "flex": false,
 37 |         "justify": "between",
 38 |         "gap": "medium"
 39 |       },
 40 |       "children": [5, 6],
 41 |       "collapsed": true
 42 |     },
 43 |     "5": {
 44 |       "type": "grommet.Text",
 45 |       "id": 5,
 46 |       "props": {
 47 |         "weight": "bold"
 48 |       },
 49 |       "text": "Title"
 50 |     },
 51 |     "6": {
 52 |       "type": "grommet.Menu",
 53 |       "id": 6,
 54 |       "props": {
 55 |         "label": "",
 56 |         "icon": "User",
 57 |         "items": [
 58 |           {
 59 |             "label": "sign out"
 60 |           }
 61 |         ]
 62 |       }
 63 |     },
 64 |     "7": {
 65 |       "id": 7,
 66 |       "type": "grommet.PageContent",
 67 |       "props": {},
 68 |       "children": [8, 16]
 69 |     },
 70 |     "8": {
 71 |       "type": "grommet.PageHeader",
 72 |       "id": 8,
 73 |       "props": {
 74 |         "title": "{name}",
 75 |         "margin": {
 76 |           "vertical": "medium"
 77 |         },
 78 |         "actions": 22
 79 |       },
 80 |       "name": "",
 81 |       "propComponents": [22]
 82 |     },
 83 |     "16": {
 84 |       "type": "grommet.NameValueList",
 85 |       "id": 16,
 86 |       "props": {
 87 |         "layout": "column"
 88 |       },
 89 |       "children": [17, 18]
 90 |     },
 91 |     "17": {
 92 |       "type": "grommet.NameValuePair",
 93 |       "id": 17,
 94 |       "props": {
 95 |         "name": "name"
 96 |       },
 97 |       "designProps": {
 98 |         "value": "{name}"
 99 |       }
100 |     },
101 |     "18": {
102 |       "type": "grommet.NameValuePair",
103 |       "id": 18,
104 |       "props": {
105 |         "name": "count"
106 |       },
107 |       "designProps": {
108 |         "value": "{count}"
109 |       }
110 |     },
111 |     "20": {
112 |       "type": "grommet.Box",
113 |       "id": 20,
114 |       "props": {
115 |         "align": "center",
116 |         "justify": "center"
117 |       },
118 |       "children": [19]
119 |     },
120 |     "22": {
121 |       "type": "grommet.Menu",
122 |       "id": 22,
123 |       "props": {
124 |         "label": "Actions",
125 |         "items": [
126 |           {
127 |             "label": "edit"
128 |           },
129 |           {
130 |             "label": "delete"
131 |           }
132 |         ]
133 |       }
134 |     }
135 |   },
136 |   "nextId": 23,
137 |   "local": true,
138 |   "date": "2022-05-07T22:48:08.000Z",
139 |   "created": "2022-05-07T22:36:42.343Z",
140 |   "imports": [],
141 |   "version": 3.7
142 | }
143 | 


--------------------------------------------------------------------------------
/src/Tree/AddLocation.js:
--------------------------------------------------------------------------------
  1 | import React, { useContext, useEffect, useMemo } from 'react';
  2 | import { Box, RadioButtonGroup, Tip } from 'grommet';
  3 | import { Blank } from 'grommet-icons';
  4 | import SelectionContext from '../SelectionContext';
  5 | import { getName, getParent, getType, useComponent } from '../design2';
  6 | 
  7 | const locationVisuals = {
  8 |   after: [
  9 |     <rect
 10 |       key="top"
 11 |       x={0}
 12 |       y={0}
 13 |       width={24}
 14 |       height={1}
 15 |       strokeWidth={1}
 16 |       stroke="#666"
 17 |     />,
 18 |     <rect
 19 |       key="bottom"
 20 |       x={4}
 21 |       y={20}
 22 |       width={16}
 23 |       height={1}
 24 |       strokeWidth={8}
 25 |       stroke="#000"
 26 |     />,
 27 |   ],
 28 |   before: [
 29 |     <rect
 30 |       key="top"
 31 |       x={4}
 32 |       y={4}
 33 |       width={16}
 34 |       height={1}
 35 |       strokeWidth={8}
 36 |       stroke="#000"
 37 |     />,
 38 |     <rect
 39 |       key="bottom"
 40 |       x={0}
 41 |       y={24}
 42 |       width={24}
 43 |       height={1}
 44 |       strokeWidth={1}
 45 |       stroke="#666"
 46 |     />,
 47 |   ],
 48 |   containing: [
 49 |     <rect
 50 |       key="out"
 51 |       x={2}
 52 |       y={2}
 53 |       width={20}
 54 |       height={20}
 55 |       strokeWidth={4}
 56 |       stroke="#000"
 57 |     />,
 58 |     <rect
 59 |       key="in"
 60 |       x={8}
 61 |       y={8}
 62 |       width={8}
 63 |       height={8}
 64 |       strokeWidth={1}
 65 |       stroke="#666"
 66 |     />,
 67 |   ],
 68 |   within: [
 69 |     <rect
 70 |       key="out"
 71 |       x={0}
 72 |       y={0}
 73 |       width={24}
 74 |       height={24}
 75 |       strokeWidth={1}
 76 |       stroke="#000"
 77 |     />,
 78 |     <rect key="in" x={6} y={6} width={12} height={12} fill="#000" />,
 79 |   ],
 80 | };
 81 | 
 82 | const AddLocation = ({ value, onChange }) => {
 83 |   const [selection] = useContext(SelectionContext);
 84 |   const component = useComponent(selection);
 85 |   const type = useMemo(() => getType(component.type), [component]);
 86 | 
 87 |   const locations = useMemo(() => {
 88 |     const parent = getParent(selection);
 89 |     if (!parent) return ['within', 'containing'];
 90 |     if (type?.container) return ['within', 'after', 'before', 'containing'];
 91 |     return ['after', 'before', 'containing'];
 92 |   }, [selection, type]);
 93 | 
 94 |   useEffect(
 95 |     () => onChange(locations[type?.container === 'rarely' ? 1 : 0]),
 96 |     [locations, onChange, type],
 97 |   );
 98 | 
 99 |   const Option = ({ option, checked }) => {
100 |     return (
101 |       <Tip content={`${option} ${getName(selection)}`}>
102 |         <Box pad="xsmall">
103 |           <Blank color={checked ? 'selected-background' : 'border'}>
104 |             <g>{locationVisuals[option]}</g>
105 |           </Blank>
106 |         </Box>
107 |       </Tip>
108 |     );
109 |   };
110 | 
111 |   return (
112 |     <RadioButtonGroup
113 |       name="add-location"
114 |       options={locations}
115 |       disabled={locations.length === 1}
116 |       value={value}
117 |       onChange={(event) => onChange(event.target.value)}
118 |       direction="row"
119 |     >
120 |       {(option, { checked }) => <Option option={option} checked={checked} />}
121 |     </RadioButtonGroup>
122 |   );
123 | };
124 | 
125 | export default AddLocation;
126 | 


--------------------------------------------------------------------------------
/src/Tree/AddComponent.js:
--------------------------------------------------------------------------------
  1 | import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
  2 | import { Box, Button, Heading, Layer, TextInput } from 'grommet';
  3 | import { Close } from 'grommet-icons';
  4 | import SelectionContext from '../SelectionContext';
  5 | import { useComponent } from '../design2';
  6 | import AddLibraries from './AddLibraries';
  7 | import AddLocation from './AddLocation';
  8 | import AddTemplates from './AddTemplates';
  9 | 
 10 | const AddComponent = ({ onClose, property }) => {
 11 |   const [selection] = useContext(SelectionContext);
 12 |   const component = useComponent(selection);
 13 |   const onlyScreen = !selection && !property;
 14 |   const [addLocation, setAddLocation] = useState();
 15 | 
 16 |   // addOptions is what eventually gets passed to addComponent()
 17 |   const addOptions = useMemo(() => {
 18 |     // property
 19 |     if (property?.onChange)
 20 |       return { id: property.id, onChange: property.onChange };
 21 |     // screen
 22 |     if (!component) return { within: selection };
 23 |     // component
 24 |     if (addLocation) return { [addLocation]: selection };
 25 |     return {};
 26 |   }, [property, component, addLocation, selection]);
 27 |   const [search, setSearch] = useState(onlyScreen ? 'screen' : '');
 28 |   const inputRef = useRef();
 29 | 
 30 |   useEffect(() => {
 31 |     inputRef.current?.focus();
 32 |     return undefined;
 33 |   }, [addOptions]);
 34 | 
 35 |   const searchExp = search ? new RegExp(search, 'i') : undefined;
 36 | 
 37 |   return (
 38 |     <Layer
 39 |       position="top-left"
 40 |       modal={false}
 41 |       animation={false}
 42 |       margin="medium"
 43 |       full="vertical"
 44 |       onEsc={onClose}
 45 |       onClickOutside={onClose}
 46 |     >
 47 |       <Box flex elevation="medium">
 48 |         <Box flex={false} direction="row" justify="between" align="center">
 49 |           <Button
 50 |             title="close"
 51 |             tip="close"
 52 |             icon={<Close />}
 53 |             onClick={onClose}
 54 |           />
 55 |           <Heading
 56 |             level={2}
 57 |             size="small"
 58 |             margin={{ vertical: 'none', horizontal: 'small' }}
 59 |           >
 60 |             add
 61 |           </Heading>
 62 |         </Box>
 63 |         {component && (
 64 |           <Box flex={false} pad="small">
 65 |             <AddLocation value={addLocation} onChange={setAddLocation} />
 66 |           </Box>
 67 |         )}
 68 |         <Box flex overflow="auto">
 69 |           {!onlyScreen && (
 70 |             <Box flex={false} pad="small">
 71 |               <TextInput
 72 |                 ref={inputRef}
 73 |                 placeholder="search ..."
 74 |                 value={search}
 75 |                 onChange={(event) => setSearch(event.target.value)}
 76 |               />
 77 |             </Box>
 78 |           )}
 79 | 
 80 |           <AddLibraries
 81 |             addOptions={addOptions}
 82 |             onClose={onClose}
 83 |             property={property}
 84 |             searchExp={searchExp}
 85 |           />
 86 | 
 87 |           <AddTemplates
 88 |             addOptions={addOptions}
 89 |             onClose={onClose}
 90 |             property={property}
 91 |             searchExp={searchExp}
 92 |           />
 93 |         </Box>
 94 |       </Box>
 95 |     </Layer>
 96 |   );
 97 | };
 98 | 
 99 | export default AddComponent;
100 | 


--------------------------------------------------------------------------------
/src/NewScreen.js:
--------------------------------------------------------------------------------
  1 | import React, { useContext, useMemo, useState } from 'react';
  2 | import { Box, Button, Footer, Form, FormField, Select, Text } from 'grommet';
  3 | import { duplicateComponent, useDesign } from './design2';
  4 | import SelectionContext from './SelectionContext';
  5 | import blankPage from './templates/blankPage';
  6 | import dashboard from './templates/dashboard';
  7 | import details from './templates/details';
  8 | import list from './templates/list';
  9 | import table from './templates/table';
 10 | 
 11 | const builtInTemplates = {
 12 |   'empty page': blankPage,
 13 |   dashboard,
 14 |   details,
 15 |   list,
 16 |   table,
 17 | };
 18 | 
 19 | const label = (option) => (
 20 |   <Box direction="row" justify="between" pad="small" gap="medium">
 21 |     <Text weight="bold">{option.name}</Text>
 22 |     <Text color="text-weak">{option.contextName}</Text>
 23 |   </Box>
 24 | );
 25 | 
 26 | const addTemplates = (include, name) =>
 27 |   Object.values(include.screens).map((s) => ({
 28 |     name: s.name,
 29 |     root: s.root,
 30 |     contextName: name || include.name,
 31 |     include,
 32 |   }));
 33 | 
 34 | const NewScreen = () => {
 35 |   const [selection, setSelection, { setLocation }] =
 36 |     useContext(SelectionContext);
 37 |   const design = useDesign();
 38 | 
 39 |   const templates = useMemo(() => {
 40 |     const result = [];
 41 |     if (design.includes) {
 42 |       design.includes.forEach(({ id, name }) => {
 43 |         let stored = localStorage.getItem(name);
 44 |         if (!stored) stored = localStorage.getItem(id);
 45 |         if (stored) {
 46 |           const include = JSON.parse(stored);
 47 |           result.push(...addTemplates(include));
 48 |         }
 49 |       });
 50 |     }
 51 |     Object.values(builtInTemplates).forEach((include) =>
 52 |       result.push(...addTemplates(include, 'generic')),
 53 |     );
 54 |     return result;
 55 |   }, [design.includes]);
 56 | 
 57 |   const [value, setValue] = useState({ template: templates[0] });
 58 | 
 59 |   return (
 60 |     <Box fill direction="row" justify="center">
 61 |       <Box
 62 |         pad="large"
 63 |         height={{ min: '100vh' }}
 64 |         width={{ max: 'large', min: 'medium' }}
 65 |         gap="medium"
 66 |       >
 67 |         <Form
 68 |           value={value}
 69 |           onChange={setValue}
 70 |           onSubmit={() => {
 71 |             const { root, include } = value.template;
 72 |             const id = duplicateComponent(root, {
 73 |               within: selection,
 74 |               template: include,
 75 |             });
 76 |             setLocation({ screen: selection });
 77 |             setSelection(id);
 78 |           }}
 79 |         >
 80 |           <FormField label="screen template" htmlFor="template" name="template">
 81 |             <Select
 82 |               id="template"
 83 |               name="template"
 84 |               options={templates}
 85 |               valueKey="name"
 86 |               valueLabel={label}
 87 |             >
 88 |               {label}
 89 |             </Select>
 90 |           </FormField>
 91 |           <Footer margin={{ top: 'medium' }}>
 92 |             <Button
 93 |               title="Use selected screen template"
 94 |               type="submit"
 95 |               primary
 96 |               label="Use Template"
 97 |             />
 98 |           </Footer>
 99 |         </Form>
100 |       </Box>
101 |     </Box>
102 |   );
103 | };
104 | 
105 | export default NewScreen;
106 | 


--------------------------------------------------------------------------------
/src/Tree/Screen.js:
--------------------------------------------------------------------------------
  1 | import React, { useContext } from 'react';
  2 | import { Box, Button, Heading } from 'grommet';
  3 | import { FormDown, FormNext } from 'grommet-icons';
  4 | import { getName, toggleCollapsed, useScreen } from '../design2';
  5 | import SelectionContext from '../SelectionContext';
  6 | import Component from './Component';
  7 | import DragDropContext from './DragDropContext';
  8 | import ScreenDropArea from './ScreenDropArea';
  9 | 
 10 | const Screen = ({ first, id }) => {
 11 |   const [selection, setSelection, { setLocation, selectionPath }] =
 12 |     useContext(SelectionContext);
 13 |   const [dragging, setDragging] = useContext(DragDropContext);
 14 | 
 15 |   const screen = useScreen(id);
 16 | 
 17 |   if (!screen) return null;
 18 | 
 19 |   const name = getName(id);
 20 |   const selectionAncestor = selectionPath.includes(id);
 21 | 
 22 |   const CollapseIcon = screen.collapsed ? FormNext : FormDown;
 23 | 
 24 |   return (
 25 |     <Box flex={false} border={first ? undefined : 'top'}>
 26 |       {first && <ScreenDropArea id={id} where="before" />}
 27 |       <Box direction="row">
 28 |         {screen.root && (
 29 |           <Button
 30 |             title={`toggle collapse ${name}`}
 31 |             hoverIndicator
 32 |             onClick={() => toggleCollapsed(id)}
 33 |           >
 34 |             <Box pad="xxsmall">
 35 |               <CollapseIcon color="border" />
 36 |             </Box>
 37 |           </Button>
 38 |         )}
 39 |         <Box
 40 |           flex
 41 |           draggable
 42 |           onDragStart={(event) => {
 43 |             event.dataTransfer.setData('text/plain', ''); // for Firefox
 44 |             setDragging(id);
 45 |           }}
 46 |           onDragEnd={() => {
 47 |             if (dragging === id) setDragging(undefined);
 48 |           }}
 49 |         >
 50 |           <Button
 51 |             fill
 52 |             hoverIndicator
 53 |             aria-label={`Select ${name}`}
 54 |             onClick={(event) => {
 55 |               if (event.shiftKey) setSelection(undefined);
 56 |               else {
 57 |                 setLocation({ screen: id });
 58 |                 setSelection(id);
 59 |               }
 60 |             }}
 61 |           >
 62 |             <Box
 63 |               pad={{ vertical: 'xsmall', horizontal: 'small' }}
 64 |               background={
 65 |                 (selection === id && 'selected-background') ||
 66 |                 (selectionAncestor && 'active-background') ||
 67 |                 undefined
 68 |               }
 69 |             >
 70 |               <Heading
 71 |                 level={3}
 72 |                 size="xsmall"
 73 |                 margin="none"
 74 |                 color={
 75 |                   (selection === id && 'selected-text') ||
 76 |                   (selectionAncestor && 'active-text') ||
 77 |                   undefined
 78 |                 }
 79 |               >
 80 |                 {name}
 81 |               </Heading>
 82 |             </Box>
 83 |           </Button>
 84 |         </Box>
 85 |       </Box>
 86 | 
 87 |       {!screen.collapsed && screen.root && (
 88 |         <Box
 89 |           flex={false}
 90 |           pad={{ left: 'xsmall' }}
 91 |           tabIndex="-1"
 92 |           onClick={() => setLocation({ screen: id })}
 93 |         >
 94 |           <Box pad="xxsmall" />
 95 |           <Component id={screen.root} />
 96 |         </Box>
 97 |       )}
 98 |       <ScreenDropArea id={id} where="after" />
 99 |     </Box>
100 |   );
101 | };
102 | 
103 | export default Screen;
104 | 


--------------------------------------------------------------------------------
/src/Tree/DesignSettings.js:
--------------------------------------------------------------------------------
  1 | import React, { useState } from 'react';
  2 | import {
  3 |   Anchor,
  4 |   Box,
  5 |   RadioButtonGroup,
  6 |   Select,
  7 |   Text,
  8 |   TextInput,
  9 | } from 'grommet';
 10 | import { setDesignProperty, setTheme, useDesign, useDesigns } from '../design2';
 11 | import useDebounce from '../useDebounce';
 12 | import Action from '../components/Action';
 13 | import Field from '../components/Field';
 14 | 
 15 | const DesignSettings = ({ onClose }) => {
 16 |   const designs = useDesigns({ localOnly: true });
 17 |   const design = useDesign();
 18 |   const [name, setName] = useDebounce(design.name || '', (nextName) =>
 19 |     setDesignProperty('name', nextName),
 20 |   );
 21 |   const [themeOther, setThemeOther] = useState(design.theme.startsWith('http'));
 22 | 
 23 |   return (
 24 |     <Action label="design" onClose={onClose}>
 25 |       <Box flex={false} gap="medium">
 26 |         <Field label="name" htmlFor="name">
 27 |           <TextInput
 28 |             id="name"
 29 |             name="name"
 30 |             plain
 31 |             value={name}
 32 |             onChange={(event) => setName(event.target.value)}
 33 |             style={{ textAlign: 'end' }}
 34 |           />
 35 |         </Field>
 36 |         {design.derivedFromId && (
 37 |           <Box
 38 |             align="end"
 39 |             margin={{ vertical: 'xsmall', horizontal: 'medium' }}
 40 |           >
 41 |             <Text size="small">
 42 |               derived from{' '}
 43 |               <Anchor
 44 |                 size="small"
 45 |                 label={design.derivedFromId}
 46 |                 href={`//designer.grommet.io?${design.derivedFromId}`}
 47 |               />
 48 |             </Text>
 49 |           </Box>
 50 |         )}
 51 | 
 52 |         <Field label="theme" htmlFor="theme" align="center" gap="large">
 53 |           <RadioButtonGroup
 54 |             name="theme"
 55 |             direction="row"
 56 |             gap="medium"
 57 |             options={['grommet', 'hpe', 'hpe-next', 'other']}
 58 |             value={design.theme.startsWith('http') ? 'other' : design.theme}
 59 |             onChange={(event) => {
 60 |               if (event.target.value === 'other') {
 61 |                 setTheme('https://theme-designer.grommet.io/');
 62 |                 setThemeOther(true);
 63 |               } else {
 64 |                 setTheme(event.target.value);
 65 |                 setThemeOther(false);
 66 |               }
 67 |             }}
 68 |           />
 69 |         </Field>
 70 |         {themeOther && (
 71 |           <Field label="theme url" htmlFor="themeUrl">
 72 |             <TextInput
 73 |               id="themeUrl"
 74 |               name="themeUrl"
 75 |               plain
 76 |               value={design.theme}
 77 |               onChange={(event) => setTheme(event.target.value)}
 78 |               style={{ textAlign: 'end' }}
 79 |             />
 80 |           </Field>
 81 |         )}
 82 |         <Field label="includes" htmlFor="includes" name="includes">
 83 |           <Select
 84 |             name="includes"
 85 |             placeholder="none"
 86 |             multiple
 87 |             plain
 88 |             options={designs}
 89 |             value={design.includes || []}
 90 |             labelKey="name"
 91 |             valueKey={(option) => option.id || option.name}
 92 |             onChange={({ value }) => setDesignProperty('includes', value)}
 93 |           />
 94 |         </Field>
 95 |       </Box>
 96 |     </Action>
 97 |   );
 98 | };
 99 | 
100 | export default DesignSettings;
101 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/BoxPad.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Blank } from 'grommet-icons';
  3 | import InlineOptions from './InlineOptions';
  4 | import InlineOption from './InlineOption';
  5 | import UndefinedOption, { undefinedOption } from './UndefinedOption';
  6 | import VariedOption, { variedOption } from './VariedOption';
  7 | 
  8 | const options = ['xsmall', 'small', 'medium', 'large', 'xlarge', variedOption];
  9 | 
 10 | const deltas = {
 11 |   xsmall: 1,
 12 |   small: 2,
 13 |   medium: 3,
 14 |   large: 4,
 15 |   xlarge: 6,
 16 | };
 17 | 
 18 | const stroke = {
 19 |   strokeWidth: 1,
 20 |   strokeLinecap: 'square',
 21 | };
 22 | 
 23 | const PadState = ({ checked, name, option }) => {
 24 |   let content;
 25 |   if (name === 'pad') {
 26 |     const d = deltas[option.value];
 27 |     const d2 = 24 - d;
 28 |     content = (
 29 |       <path
 30 |         fillRule="evenodd"
 31 |         d={`M 0 0 H 24 V 24 H 0 Z
 32 |       M ${d} ${d} V ${d2} H ${d2} V ${d} Z`}
 33 |       />
 34 |     );
 35 |   } else if (name === 'horizontal') {
 36 |     const d = deltas[option.value];
 37 |     content = [
 38 |       <rect key="1" x={0} y={0} width={d} height={24} />,
 39 |       <rect key="2" x={24 - d} y={0} width={d} height={24} />,
 40 |     ];
 41 |   } else if (name === 'vertical') {
 42 |     const d = deltas[option.value];
 43 |     content = [
 44 |       <rect key="1" x={0} y={0} width={24} height={d} />,
 45 |       <rect key="2" x={0} y={24 - d} width={24} height={d} />,
 46 |     ];
 47 |   } else if (name === 'top') {
 48 |     const d = deltas[option.value];
 49 |     content = <rect x={0} y={0} width={24} height={d} />;
 50 |   } else if (name === 'bottom') {
 51 |     const d = deltas[option.value];
 52 |     content = <rect x={0} y={24 - d} width={24} height={d} />;
 53 |   } else if (name === 'left') {
 54 |     const d = deltas[option.value];
 55 |     content = <rect x={0} y={0} width={d} height={24} />;
 56 |   } else if (name === 'right') {
 57 |     const d = deltas[option.value];
 58 |     content = <rect x={24 - d} y={0} width={d} height={24} />;
 59 |   }
 60 | 
 61 |   return (
 62 |     <InlineOption checked={checked} label={option.label}>
 63 |       <Blank color={checked ? 'selected-background' : 'border'}>
 64 |         <g {...stroke}>{content}</g>
 65 |       </Blank>
 66 |     </InlineOption>
 67 |   );
 68 | };
 69 | 
 70 | const BoxPad = (props) => {
 71 |   const { name, value } = props;
 72 |   const adjustedOptions = options.filter(
 73 |     (o) => name === 'pad' || typeof o === 'string',
 74 |   );
 75 |   if (value) adjustedOptions.push(undefinedOption);
 76 |   return (
 77 |     <InlineOptions name={name} options={adjustedOptions} {...props}>
 78 |       {(option, { checked }) => {
 79 |         if (option.label === undefinedOption.label) {
 80 |           return <UndefinedOption checked={checked} />;
 81 |         } else if (option.label === variedOption.label) {
 82 |           return <VariedOption checked={checked} />;
 83 |         }
 84 |         return (
 85 |           <PadState
 86 |             name={name}
 87 |             option={option}
 88 |             checked={checked}
 89 |             {...props.props}
 90 |           />
 91 |         );
 92 |       }}
 93 |     </InlineOptions>
 94 |   );
 95 | };
 96 | 
 97 | BoxPad.inline = true;
 98 | 
 99 | BoxPad.dynamicProperty = ({ value }) => {
100 |   if (typeof value === 'object') {
101 |     return {
102 |       horizontal: BoxPad,
103 |       vertical: BoxPad,
104 |       top: BoxPad,
105 |       bottom: BoxPad,
106 |       left: BoxPad,
107 |       right: BoxPad,
108 |     };
109 |   }
110 |   return BoxPad;
111 | };
112 | 
113 | export default BoxPad;
114 | 


--------------------------------------------------------------------------------
/src/Properties/LinkPropertyOptions.js:
--------------------------------------------------------------------------------
  1 | import React, { useContext, useMemo, useState } from 'react';
  2 | import { Grid, Select, Text } from 'grommet';
  3 | import { getLinkOptions } from '../design2';
  4 | import SelectionContext from '../SelectionContext';
  5 | import LinkLabel from './LinkLabel';
  6 | 
  7 | const optionValue = (options) => (option) => {
  8 |   let result;
  9 |   options.some((o) => {
 10 |     if (o === option) result = o;
 11 |     else if (o.control && o.control === option.control) result = o;
 12 |     else if (
 13 |       o.screen &&
 14 |       o.component &&
 15 |       o.screen === option.screen &&
 16 |       o.component === option.component
 17 |     )
 18 |       result = o;
 19 |     else if (
 20 |       !o.component &&
 21 |       !option.component &&
 22 |       o.screen &&
 23 |       o.screen === option.screen
 24 |     )
 25 |       result = o;
 26 |     return result;
 27 |   });
 28 |   return result;
 29 | };
 30 | 
 31 | const LinkPropertySelect = ({ linkOptions, onChange, value }) => {
 32 |   const [searchText, setSearchText] = useState('');
 33 |   const searchExp = useMemo(
 34 |     () => searchText && new RegExp(`${searchText}`, 'i'),
 35 |     [searchText],
 36 |   );
 37 |   let filteredOptions = searchExp
 38 |     ? linkOptions.filter((o) => searchExp.test(o.label || o))
 39 |     : linkOptions;
 40 |   if (value !== undefined) {
 41 |     filteredOptions = [...filteredOptions, 'undefined'];
 42 |   }
 43 | 
 44 |   return (
 45 |     <Select
 46 |       multiple
 47 |       options={filteredOptions}
 48 |       value={value || ''}
 49 |       onChange={({ option: selectedOption, value: nextValue }) => {
 50 |         setSearchText(undefined);
 51 |         onChange(selectedOption === 'undefined' ? undefined : nextValue);
 52 |       }}
 53 |       onSearch={
 54 |         linkOptions.length > 20 || searchExp
 55 |           ? (nextSearchText) => setSearchText(nextSearchText)
 56 |           : undefined
 57 |       }
 58 |       valueLabel={<LinkLabel selected value={value} />}
 59 |       valueKey={optionValue(linkOptions)}
 60 |     >
 61 |       {(option, index, options, { selected }) => (
 62 |         <LinkLabel selected={selected} value={option} />
 63 |       )}
 64 |     </Select>
 65 |   );
 66 | };
 67 | 
 68 | const LinkPropertyOptions = ({
 69 |   options, // [string | { label: string, value: string }, ...]
 70 |   value,
 71 |   onChange,
 72 | }) => {
 73 |   const [selection] = useContext(SelectionContext);
 74 |   const linkOptions = useMemo(() => getLinkOptions(selection), [selection]);
 75 |   return (
 76 |     <Grid
 77 |       gap="small"
 78 |       columns={['1/2', '1/2']}
 79 |       align="center"
 80 |       margin={{ horizontal: 'medium' }}
 81 |     >
 82 |       {options.map((option) => {
 83 |         const label = option.label || option;
 84 |         const name = option.value || option;
 85 |         return [
 86 |           <Text key="name" textAlign="end">
 87 |             {label}
 88 |           </Text>,
 89 |           <LinkPropertySelect
 90 |             key="value"
 91 |             linkOptions={linkOptions}
 92 |             value={value && value[name]}
 93 |             onChange={(nextOptionValue) => {
 94 |               let nextValue =
 95 |                 (value && JSON.parse(JSON.stringify(value))) || {};
 96 |               if (nextOptionValue === undefined) {
 97 |                 delete nextValue[name];
 98 |                 if (!Object.keys(nextValue)) nextValue = undefined;
 99 |               } else nextValue[name] = nextOptionValue;
100 |               onChange(nextValue);
101 |             }}
102 |           />,
103 |         ];
104 |       })}
105 |     </Grid>
106 |   );
107 | };
108 | 
109 | export default LinkPropertyOptions;
110 | 


--------------------------------------------------------------------------------
/src/templates/list.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "list",
  3 |   "theme": "grommet",
  4 |   "screens": {
  5 |     "1": {
  6 |       "id": 1,
  7 |       "name": "List",
  8 |       "path": "/",
  9 |       "root": 2
 10 |     }
 11 |   },
 12 |   "screenOrder": [1],
 13 |   "components": {
 14 |     "2": {
 15 |       "id": 2,
 16 |       "type": "grommet.Page",
 17 |       "props": {},
 18 |       "children": [18, 3]
 19 |     },
 20 |     "3": {
 21 |       "id": 3,
 22 |       "type": "grommet.PageContent",
 23 |       "props": {},
 24 |       "children": [4, 24, 23]
 25 |     },
 26 |     "4": {
 27 |       "type": "grommet.PageHeader",
 28 |       "id": 4,
 29 |       "props": {
 30 |         "title": "Items",
 31 |         "margin": {
 32 |           "vertical": "medium"
 33 |         }
 34 |       },
 35 |       "name": "",
 36 |       "children": []
 37 |     },
 38 |     "18": {
 39 |       "type": "grommet.PageContent",
 40 |       "id": 18,
 41 |       "props": {
 42 |         "border": {
 43 |           "side": "bottom"
 44 |         }
 45 |       },
 46 |       "children": [20]
 47 |     },
 48 |     "20": {
 49 |       "type": "grommet.Header",
 50 |       "id": 20,
 51 |       "props": {
 52 |         "align": "center",
 53 |         "direction": "row",
 54 |         "flex": false,
 55 |         "justify": "between",
 56 |         "gap": "medium"
 57 |       },
 58 |       "children": [21, 22],
 59 |       "collapsed": true
 60 |     },
 61 |     "21": {
 62 |       "type": "grommet.Text",
 63 |       "id": 21,
 64 |       "props": {
 65 |         "weight": "bold"
 66 |       },
 67 |       "text": "Title"
 68 |     },
 69 |     "22": {
 70 |       "type": "grommet.Menu",
 71 |       "id": 22,
 72 |       "props": {
 73 |         "label": "",
 74 |         "icon": "User",
 75 |         "items": [
 76 |           {
 77 |             "label": "sign out"
 78 |           }
 79 |         ]
 80 |       }
 81 |     },
 82 |     "23": {
 83 |       "type": "grommet.List",
 84 |       "id": 23,
 85 |       "props": {
 86 |         "data": [
 87 |           {
 88 |             "name": "Alpha",
 89 |             "count": 5
 90 |           },
 91 |           {
 92 |             "name": "Beta",
 93 |             "count": 7
 94 |           },
 95 |           {
 96 |             "name": "Gamma",
 97 |             "count": 2
 98 |           }
 99 |         ]
100 |       }
101 |     },
102 |     "24": {
103 |       "type": "grommet.Header",
104 |       "id": 24,
105 |       "props": {
106 |         "align": "center",
107 |         "direction": "row",
108 |         "flex": false,
109 |         "justify": "between",
110 |         "gap": "medium",
111 |         "margin": {
112 |           "bottom": "small"
113 |         }
114 |       },
115 |       "children": [25, 26],
116 |       "collapsed": true
117 |     },
118 |     "25": {
119 |       "type": "grommet.Box",
120 |       "id": 25,
121 |       "props": {
122 |         "align": "center",
123 |         "justify": "center",
124 |         "direction": "row"
125 |       },
126 |       "children": [27, 28]
127 |     },
128 |     "26": {
129 |       "type": "grommet.Button",
130 |       "id": 26,
131 |       "props": {
132 |         "label": "Add Item"
133 |       }
134 |     },
135 |     "27": {
136 |       "type": "grommet.TextInput",
137 |       "id": 27,
138 |       "props": {
139 |         "icon": "Search",
140 |         "reverse": true
141 |       }
142 |     },
143 |     "28": {
144 |       "type": "grommet.Button",
145 |       "id": 28,
146 |       "props": {
147 |         "label": "",
148 |         "icon": "Filter",
149 |         "tip": "filter"
150 |       }
151 |     }
152 |   },
153 |   "nextId": 29,
154 |   "local": true,
155 |   "date": "2022-05-07T22:27:30.000Z",
156 |   "created": "2022-05-07T18:37:42.954Z",
157 |   "imports": [],
158 |   "version": 3.7
159 | }
160 | 


--------------------------------------------------------------------------------
/src/Properties/FunctionProperty.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Box, Button, Heading, Layer, Text } from 'grommet';
  3 | import { Close, FormClose, FormDown } from 'grommet-icons';
  4 | import Field from '../components/Field';
  5 | 
  6 | const jsonValue = (value) =>
  7 |   typeof value === 'string' ? value : JSON.stringify(value);
  8 | 
  9 | const FunctionProperty = React.forwardRef(
 10 |   ({ definition, name, value, ...rest }, ref) => {
 11 |     const [expand, setExpand] = React.useState();
 12 |     const CustomProperty = definition;
 13 | 
 14 |     if (definition.inline) {
 15 |       return (
 16 |         <Field key={name} ref={ref} label={name} htmlFor={name}>
 17 |           <CustomProperty
 18 |             name={name}
 19 |             value={value}
 20 |             dropTarget={ref && ref.current}
 21 |             {...rest}
 22 |           />
 23 |         </Field>
 24 |       );
 25 |     }
 26 | 
 27 |     return (
 28 |       <Box key={name} direction="row" fill="horizontal">
 29 |         <Box flex>
 30 |           <Button ref={ref} hoverIndicator onClick={() => setExpand(!expand)}>
 31 |             <Field label={name}>
 32 |               <Box direction="row" align="center" gap="small">
 33 |                 {value && (
 34 |                   <Text weight="bold" truncate>
 35 |                     {jsonValue(value)}
 36 |                   </Text>
 37 |                 )}
 38 |                 <Box
 39 |                   flex={false}
 40 |                   pad={{ vertical: 'xsmall', horizontal: 'small' }}
 41 |                 >
 42 |                   <FormDown color="control" />
 43 |                 </Box>
 44 |               </Box>
 45 |             </Field>
 46 |           </Button>
 47 |         </Box>
 48 |         {expand && (
 49 |           <Layer
 50 |             position="right"
 51 |             modal={false}
 52 |             margin="medium"
 53 |             animation="fadeIn"
 54 |             onEsc={() => setExpand(false)}
 55 |             onClickOutside={() => setExpand(false)}
 56 |           >
 57 |             <Box flex elevation="medium" round="xsmall">
 58 |               <Box
 59 |                 direction="row"
 60 |                 align="center"
 61 |                 justify="between"
 62 |                 gap="medium"
 63 |                 pad="small"
 64 |                 flex={false}
 65 |               >
 66 |                 <Heading margin={{ left: 'small', vertical: 'none' }} level={3}>
 67 |                   {name}
 68 |                 </Heading>
 69 |                 <Button
 70 |                   tip={{
 71 |                     content: 'close',
 72 |                     dropProps: { align: { right: 'left' } },
 73 |                   }}
 74 |                   icon={<Close />}
 75 |                   onClick={() => setExpand(false)}
 76 |                 />
 77 |               </Box>
 78 |               <Box
 79 |                 overflow="auto"
 80 |                 pad={{ horizontal: 'medium', bottom: 'medium' }}
 81 |               >
 82 |                 <Box flex={false}>
 83 |                   <CustomProperty name={name} value={value} {...rest} />
 84 |                 </Box>
 85 |               </Box>
 86 |             </Box>
 87 |           </Layer>
 88 |         )}
 89 |         {value && (
 90 |           <Box flex={false} border={{ side: 'bottom' }}>
 91 |             <Button
 92 |               tip={`clear`}
 93 |               hoverIndicator
 94 |               onClick={() => rest.onChange(undefined)}
 95 |             >
 96 |               <Box pad={{ vertical: 'xsmall', horizontal: 'small' }}>
 97 |                 <FormClose />
 98 |               </Box>
 99 |             </Button>
100 |           </Box>
101 |         )}
102 |       </Box>
103 |     );
104 |   },
105 | );
106 | 
107 | export default FunctionProperty;
108 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/ObjectOfObjects.js:
--------------------------------------------------------------------------------
  1 | import React, { useState, useLayoutEffect, useRef } from 'react';
  2 | import { Box, Button, Footer, Header, List, Text, TextInput } from 'grommet';
  3 | import { Add, FormNext, Trash } from 'grommet-icons';
  4 | import BackButton from './BackButton';
  5 | 
  6 | const ObjectOfObjects = ({
  7 |   defaultObject = {},
  8 |   name,
  9 |   value = {},
 10 |   messages = { single: 'item', plural: 'items' },
 11 |   onChange,
 12 |   Edit,
 13 |   ...rest
 14 | }) => {
 15 |   const [active, setActive] = useState(); // key in value
 16 |   const [addName, setAddName] = useState();
 17 |   const editRef = useRef();
 18 |   const [headerBack, setHeaderBack] = useState();
 19 | 
 20 |   // eslint-disable-next-line react-hooks/exhaustive-deps
 21 |   useLayoutEffect(() => {
 22 |     if (editRef.current) {
 23 |       // if the Edit is longer than the window, put a back control up top
 24 |       const { top, bottom } = editRef.current.getBoundingClientRect();
 25 |       const { innerHeight: height } = window;
 26 |       setHeaderBack(top < 0 || bottom > height);
 27 |     }
 28 |   });
 29 | 
 30 |   if (active !== undefined) {
 31 |     const item = value[active];
 32 |     return (
 33 |       <Box ref={editRef}>
 34 |         {headerBack && (
 35 |           <Header>
 36 |             <BackButton
 37 |               title={`back to ${name}`}
 38 |               onClick={() => setActive(undefined)}
 39 |             />
 40 |           </Header>
 41 |         )}
 42 |         <Edit
 43 |           value={item}
 44 |           onChange={(nextItem, nextDesign) => {
 45 |             const nextValue = JSON.parse(JSON.stringify(value));
 46 |             nextValue[active] = nextItem;
 47 |             onChange(nextValue, nextDesign);
 48 |           }}
 49 |           {...rest}
 50 |         />
 51 |         <Footer>
 52 |           <BackButton
 53 |             title={`back to ${name}`}
 54 |             onClick={() => setActive(undefined)}
 55 |           />
 56 |           <Button
 57 |             icon={<Trash />}
 58 |             hoverIndicator
 59 |             tip={{
 60 |               content: `Delete ${messages.single}`,
 61 |               dropProps: { align: { right: 'left' } },
 62 |             }}
 63 |             onClick={() => {
 64 |               const nextValue = JSON.parse(JSON.stringify(value));
 65 |               delete nextValue[active];
 66 |               onChange(nextValue);
 67 |               setActive(undefined);
 68 |             }}
 69 |           />
 70 |         </Footer>
 71 |       </Box>
 72 |     );
 73 |   }
 74 | 
 75 |   return (
 76 |     <Box gap="small" pad={{ vertical: 'small' }}>
 77 |       <List
 78 |         data={Object.keys(value)}
 79 |         pad="small"
 80 |         onClickItem={({ item }) => setActive(item)}
 81 |       >
 82 |         {(item, i) => (
 83 |           <Box
 84 |             key={i}
 85 |             flex="grow"
 86 |             direction="row"
 87 |             align="center"
 88 |             justify="between"
 89 |             gap="medium"
 90 |           >
 91 |             <Text weight="bold">{item}</Text>
 92 |             <FormNext />
 93 |           </Box>
 94 |         )}
 95 |       </List>
 96 |       <Footer justify="start">
 97 |         <TextInput
 98 |           placeholder={`add ${messages.single} name`}
 99 |           value={addName}
100 |           onChange={(event) => setAddName(event.target.value)}
101 |         />
102 |         <Button
103 |           icon={<Add />}
104 |           tip={{
105 |             content: `Add ${messages.single}`,
106 |             dropProps: { align: { right: 'left' } },
107 |           }}
108 |           hoverIndicator
109 |           onClick={() => {
110 |             const nextValue = JSON.parse(JSON.stringify(value || {}));
111 |             nextValue[addName] = defaultObject;
112 |             onChange(nextValue);
113 |             setActive(addName);
114 |             setAddName('');
115 |           }}
116 |         />
117 |       </Footer>
118 |     </Box>
119 |   );
120 | };
121 | 
122 | export default ObjectOfObjects;
123 | 


--------------------------------------------------------------------------------
/src/libraries/grommet/MeterValues.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { ThemeContext } from 'styled-components';
  3 | import { Box, CheckBox, FormField, Select, Text, TextInput } from 'grommet';
  4 | import { getTheme } from '../../design2';
  5 | import ArrayOfObjects from './ArrayOfObjects';
  6 | 
  7 | const ColorLabel = ({ color, theme }) => (
  8 |   <Box pad="small" direction="row" gap="small" align="center">
  9 |     <ThemeContext.Extend value={theme}>
 10 |       <Box pad="small" background={color || undefined} />
 11 |     </ThemeContext.Extend>
 12 |     <Text weight="bold">{color}</Text>
 13 |   </Box>
 14 | );
 15 | 
 16 | const Value = ({ value, onChange }) => {
 17 |   const baseTheme = React.useContext(ThemeContext);
 18 |   const theme = getTheme();
 19 |   const [searchText, setSearchText] = React.useState('');
 20 |   const searchExp = searchText && new RegExp(searchText, 'i');
 21 |   const colors = Object.keys({
 22 |     ...baseTheme.global.colors,
 23 |     ...theme.global.colors,
 24 |   }).sort();
 25 | 
 26 |   return (
 27 |     <Box flex="grow" align="end">
 28 |       <Box flex="grow">
 29 |         <FormField label="value">
 30 |           <TextInput
 31 |             value={value.value !== undefined ? value.value : ''}
 32 |             onChange={(event) => {
 33 |               const nextValue = JSON.parse(JSON.stringify(value));
 34 |               nextValue.value =
 35 |                 // allow for data references
 36 |                 event.target.value[0] === '{'
 37 |                   ? event.target.value
 38 |                   : parseInt(event.target.value, 10);
 39 |               // eslint-disable-next-line no-self-compare
 40 |               if (nextValue.value !== nextValue.value)
 41 |                 // NaN check
 42 |                 nextValue.value = undefined;
 43 |               onChange(nextValue);
 44 |             }}
 45 |           />
 46 |         </FormField>
 47 |         <FormField label="label">
 48 |           <TextInput
 49 |             value={value.label || ''}
 50 |             onChange={(event) => {
 51 |               const nextValue = JSON.parse(JSON.stringify(value));
 52 |               nextValue.label = event.target.value;
 53 |               onChange(nextValue);
 54 |             }}
 55 |           />
 56 |         </FormField>
 57 |         <FormField label="color">
 58 |           <Select
 59 |             plain
 60 |             id="color"
 61 |             name="color"
 62 |             options={
 63 |               searchExp
 64 |                 ? [...colors.filter((c) => searchExp.test(c)), 'undefined']
 65 |                 : [...colors, 'undefined']
 66 |             }
 67 |             value={value.color || ''}
 68 |             valueLabel={<ColorLabel color={value.color} theme={theme} />}
 69 |             onChange={({ option }) => {
 70 |               setSearchText(undefined);
 71 |               const nextValue = JSON.parse(JSON.stringify(value));
 72 |               nextValue.color = option === 'undefined' ? undefined : option;
 73 |               onChange(nextValue);
 74 |             }}
 75 |             onSearch={
 76 |               colors.length > 20
 77 |                 ? (nextSearchText) => setSearchText(nextSearchText)
 78 |                 : undefined
 79 |             }
 80 |           >
 81 |             {(option) => <ColorLabel color={option} theme={theme} />}
 82 |           </Select>
 83 |         </FormField>
 84 |         <FormField label="highlight">
 85 |           <Box pad="small">
 86 |             <CheckBox
 87 |               checked={value.highlight || false}
 88 |               onChange={(event) => {
 89 |                 const nextValue = JSON.parse(JSON.stringify(value));
 90 |                 nextValue.highlight = event.target.checked;
 91 |                 onChange(nextValue);
 92 |               }}
 93 |             />
 94 |           </Box>
 95 |         </FormField>
 96 |       </Box>
 97 |     </Box>
 98 |   );
 99 | };
100 | 
101 | const MeterValues = (props) => (
102 |   <ArrayOfObjects name="values" labelKey="value" Edit={Value} {...props} />
103 | );
104 | 
105 | export default MeterValues;
106 | 


--------------------------------------------------------------------------------
/src/templates/table.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "table",
  3 |   "theme": "grommet",
  4 |   "screens": {
  5 |     "1": {
  6 |       "id": 1,
  7 |       "name": "Table",
  8 |       "path": "/",
  9 |       "root": 2
 10 |     }
 11 |   },
 12 |   "screenOrder": [1],
 13 |   "components": {
 14 |     "2": {
 15 |       "id": 2,
 16 |       "type": "grommet.Page",
 17 |       "props": {},
 18 |       "children": [3, 7]
 19 |     },
 20 |     "3": {
 21 |       "type": "grommet.PageContent",
 22 |       "id": 3,
 23 |       "props": {
 24 |         "border": {
 25 |           "side": "bottom"
 26 |         }
 27 |       },
 28 |       "children": [4]
 29 |     },
 30 |     "4": {
 31 |       "type": "grommet.Header",
 32 |       "id": 4,
 33 |       "props": {
 34 |         "align": "center",
 35 |         "direction": "row",
 36 |         "flex": false,
 37 |         "justify": "between",
 38 |         "gap": "medium"
 39 |       },
 40 |       "children": [5, 6],
 41 |       "collapsed": true
 42 |     },
 43 |     "5": {
 44 |       "type": "grommet.Text",
 45 |       "id": 5,
 46 |       "props": {
 47 |         "weight": "bold"
 48 |       },
 49 |       "text": "Title"
 50 |     },
 51 |     "6": {
 52 |       "type": "grommet.Menu",
 53 |       "id": 6,
 54 |       "props": {
 55 |         "label": "",
 56 |         "icon": "User",
 57 |         "items": [
 58 |           {
 59 |             "label": "sign out"
 60 |           }
 61 |         ]
 62 |       }
 63 |     },
 64 |     "7": {
 65 |       "id": 7,
 66 |       "type": "grommet.PageContent",
 67 |       "props": {},
 68 |       "children": [8, 9, 15]
 69 |     },
 70 |     "8": {
 71 |       "type": "grommet.PageHeader",
 72 |       "id": 8,
 73 |       "props": {
 74 |         "title": "Items",
 75 |         "margin": {
 76 |           "vertical": "medium"
 77 |         }
 78 |       },
 79 |       "name": "",
 80 |       "children": []
 81 |     },
 82 |     "9": {
 83 |       "type": "grommet.Header",
 84 |       "id": 9,
 85 |       "props": {
 86 |         "align": "center",
 87 |         "direction": "row",
 88 |         "flex": false,
 89 |         "justify": "between",
 90 |         "gap": "medium",
 91 |         "margin": {
 92 |           "bottom": "small"
 93 |         }
 94 |       },
 95 |       "children": [10, 13],
 96 |       "collapsed": true
 97 |     },
 98 |     "10": {
 99 |       "type": "grommet.Box",
100 |       "id": 10,
101 |       "props": {
102 |         "align": "center",
103 |         "justify": "center",
104 |         "direction": "row"
105 |       },
106 |       "children": [11, 12]
107 |     },
108 |     "11": {
109 |       "type": "grommet.TextInput",
110 |       "id": 11,
111 |       "props": {
112 |         "icon": "Search",
113 |         "reverse": true
114 |       }
115 |     },
116 |     "12": {
117 |       "type": "grommet.Button",
118 |       "id": 12,
119 |       "props": {
120 |         "label": "",
121 |         "icon": "Filter",
122 |         "tip": "filter"
123 |       }
124 |     },
125 |     "13": {
126 |       "type": "grommet.Button",
127 |       "id": 13,
128 |       "props": {
129 |         "label": "Add Item"
130 |       }
131 |     },
132 |     "15": {
133 |       "type": "grommet.DataTable",
134 |       "id": 15,
135 |       "props": {
136 |         "columns": [
137 |           {
138 |             "header": "Name",
139 |             "property": "name",
140 |             "primary": true
141 |           },
142 |           {
143 |             "header": "Count",
144 |             "property": "count",
145 |             "align": "end"
146 |           }
147 |         ],
148 |         "data": [
149 |           {
150 |             "name": "Alpha",
151 |             "count": 5
152 |           },
153 |           {
154 |             "name": "Beta",
155 |             "count": 7
156 |           },
157 |           {
158 |             "name": "Gamma",
159 |             "count": 2
160 |           }
161 |         ]
162 |       }
163 |     }
164 |   },
165 |   "nextId": 16,
166 |   "local": true,
167 |   "date": "2022-05-07T22:31:55.000Z",
168 |   "created": "2022-05-07T22:31:02.545Z",
169 |   "imports": [],
170 |   "version": 3.7
171 | }
172 | 


--------------------------------------------------------------------------------
/src/Properties/ArrayProperty.js:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useRef, useState } from 'react';
  2 | import { Box, Button, Select, Text } from 'grommet';
  3 | import Field from '../components/Field';
  4 | import DataPathField from './DataPathField';
  5 | 
  6 | const OptionLabel = ({ selected, value }) => (
  7 |   <Box pad="xsmall">
  8 |     <Text weight={selected ? 'bold' : undefined}>
  9 |       {(typeof value !== 'string' ? JSON.stringify(value) : value) || ''}
 10 |     </Text>
 11 |   </Box>
 12 | );
 13 | 
 14 | const ArrayProperty = React.forwardRef(
 15 |   (
 16 |     {
 17 |       children,
 18 |       dataPath,
 19 |       Label,
 20 |       multiple,
 21 |       name,
 22 |       onChange,
 23 |       options = [],
 24 |       searchTest,
 25 |       value,
 26 |       valueKey,
 27 |     },
 28 |     ref,
 29 |   ) => {
 30 |     const SelectLabel = React.useMemo(() => Label || OptionLabel, [Label]);
 31 |     const [dropTarget, setDropTarget] = React.useState();
 32 |     const fieldRef = React.useCallback((node) => setDropTarget(node), []);
 33 |     const [searchText, setSearchText] = React.useState('');
 34 |     const searchExp = React.useMemo(
 35 |       () => searchText && new RegExp(`${searchText}`, 'i'),
 36 |       [searchText],
 37 |     );
 38 |     let selectOptions = options;
 39 |     if (searchExp) {
 40 |       selectOptions = options.filter(
 41 |         (o) =>
 42 |           searchExp.test(o.label || o) ||
 43 |           (searchTest && searchTest(o, searchExp)),
 44 |       );
 45 |     }
 46 |     if (value !== undefined) {
 47 |       selectOptions = [...selectOptions, 'undefined'];
 48 |     }
 49 |     let option;
 50 |     if (value !== undefined) {
 51 |       if (valueKey?.reduce)
 52 |         option = options.find((o) => o[valueKey.key] === value);
 53 |       else if (!valueKey) option = value;
 54 |     }
 55 | 
 56 |     const [focusDataPath, setFocusDataPath] = useState();
 57 |     const dpRef = useRef();
 58 | 
 59 |     useEffect(() => {
 60 |       if (focusDataPath) {
 61 |         dpRef.current.focus();
 62 |         setFocusDataPath(false);
 63 |       }
 64 |     }, [focusDataPath]);
 65 | 
 66 |     if (dataPath && (value === '' || value?.[0] === '{'))
 67 |       return (
 68 |         <DataPathField
 69 |           ref={dpRef}
 70 |           name={name}
 71 |           onChange={onChange}
 72 |           value={value}
 73 |         />
 74 |       );
 75 | 
 76 |     return (
 77 |       <Field key={name} ref={ref || fieldRef} label={name} htmlFor={name}>
 78 |         {(dataPath && !value && (
 79 |           <Button
 80 |             onClick={() => {
 81 |               onChange('{}');
 82 |               setFocusDataPath(true);
 83 |             }}
 84 |           >
 85 |             <Text color="text-weak">{'{}'}</Text>
 86 |           </Button>
 87 |         )) ||
 88 |           children}
 89 |         <Select
 90 |           ref={ref}
 91 |           plain
 92 |           dropTarget={dropTarget}
 93 |           id={name}
 94 |           name={name}
 95 |           options={selectOptions}
 96 |           multiple={multiple}
 97 |           value={typeof value === 'boolean' ? value.toString() : value || ''}
 98 |           valueLabel={<SelectLabel option={option} value={value} selected />}
 99 |           valueKey={valueKey}
100 |           onChange={({ option, value: nextValue }) => {
101 |             setSearchText(undefined);
102 |             if (multiple || valueKey?.reduce) {
103 |               onChange(option === 'undefined' ? undefined : nextValue);
104 |             } else {
105 |               onChange(option === 'undefined' ? undefined : option);
106 |             }
107 |           }}
108 |           onSearch={
109 |             options.length > 20 || searchExp
110 |               ? (nextSearchText) => setSearchText(nextSearchText)
111 |               : undefined
112 |           }
113 |         >
114 |           {(option, index, options, { selected }) => (
115 |             <SelectLabel option={option} value={option} selected={selected} />
116 |           )}
117 |         </Select>
118 |       </Field>
119 |     );
120 |   },
121 | );
122 | 
123 | export default ArrayProperty;
124 | 


--------------------------------------------------------------------------------
/src/Properties/ScreenDetails.js:
--------------------------------------------------------------------------------
  1 | import React, { useContext } from 'react';
  2 | import ReactGA from 'react-ga';
  3 | import { Box, Button, Keyboard, Menu, Text } from 'grommet';
  4 | import { Duplicate, Trash } from 'grommet-icons';
  5 | import SelectionContext from '../SelectionContext';
  6 | import {
  7 |   duplicateScreen,
  8 |   removeScreen,
  9 |   setScreenProperty,
 10 |   useScreen,
 11 | } from '../design2';
 12 | // import { addScreen, deleteScreen, newFrom, slugify } from '../design';
 13 | import TextInputField from './TextInputField';
 14 | 
 15 | const ScreenDetails = () => {
 16 |   const [selection, setSelection, { setLocation }] =
 17 |     useContext(SelectionContext);
 18 |   const screen = useScreen(selection);
 19 | 
 20 |   if (!screen) return null;
 21 | 
 22 |   const delet = () => {
 23 |     removeScreen(selection);
 24 |     setSelection(undefined);
 25 |   };
 26 | 
 27 |   const duplicate = () => {
 28 |     // empty object prevents trying to add as a child
 29 |     const nextScreenId = duplicateScreen(selection);
 30 |     setLocation({ screen: nextScreenId });
 31 |     setSelection(nextScreenId);
 32 | 
 33 |     ReactGA.event({
 34 |       category: 'edit',
 35 |       action: 'duplicate screen',
 36 |     });
 37 |   };
 38 | 
 39 |   // const newDesignFrom = () => {
 40 |   //   const [nextDesign, nextSelected] = newFrom({
 41 |   //     design,
 42 |   //     externalReferences: false,
 43 |   //     imports,
 44 |   //     libraries,
 45 |   //     selected,
 46 |   //   });
 47 |   //   changeDesign(nextDesign);
 48 |   //   setSelected(nextSelected);
 49 | 
 50 |   //   ReactGA.event({ category: 'switch', action: 'new design from' });
 51 |   // };
 52 | 
 53 |   const onKeyDown = (event) => {
 54 |     if (event.metaKey) {
 55 |       if (event.keyCode === 8) {
 56 |         // delete
 57 |         event.preventDefault();
 58 |         delet();
 59 |       }
 60 |     }
 61 |   };
 62 | 
 63 |   const menuItems = [
 64 |     {
 65 |       label: `create new design using this Screen`,
 66 |       // onClick: newDesignFrom,
 67 |     },
 68 |   ].filter((i) => i);
 69 | 
 70 |   if (!screen) return null;
 71 |   return (
 72 |     <Keyboard target="document" onKeyDown={onKeyDown}>
 73 |       <Box border="left">
 74 |         <Box
 75 |           flex={false}
 76 |           direction="row"
 77 |           align="center"
 78 |           justify="between"
 79 |           border="bottom"
 80 |         >
 81 |           <Menu
 82 |             hoverIndicator
 83 |             label={
 84 |               <Text weight="bold" truncate>
 85 |                 Screen
 86 |               </Text>
 87 |             }
 88 |             dropProps={{ align: { top: 'bottom', left: 'left' } }}
 89 |             items={menuItems}
 90 |           />
 91 |           <Box flex={false} direction="row" align="center">
 92 |             <Button
 93 |               title="duplicate"
 94 |               tip="duplicate"
 95 |               icon={<Duplicate />}
 96 |               hoverIndicator
 97 |               onClick={duplicate}
 98 |             />
 99 |             {/* {design.screenOrder.length > 1 && ( */}
100 |             <Button
101 |               title="delete"
102 |               tip="delete"
103 |               icon={<Trash />}
104 |               hoverIndicator
105 |               onClick={delet}
106 |             />
107 |             {/* )} */}
108 |           </Box>
109 |         </Box>
110 |         <Box flex overflow="auto">
111 |           <Box flex={false}>
112 |             <TextInputField
113 |               name="name"
114 |               value={screen.name || ''}
115 |               onChange={(value) => setScreenProperty(selection, 'name', value)}
116 |             />
117 |             <TextInputField
118 |               name="path"
119 |               value={screen.path || ''}
120 |               onChange={(value) => setScreenProperty(selection, 'path', value)}
121 |             />
122 |           </Box>
123 |         </Box>
124 |         <Text alignSelf="end" color="text-weak">
125 |           {selection}
126 |         </Text>
127 |       </Box>
128 |     </Keyboard>
129 |   );
130 | };
131 | 
132 | export default ScreenDetails;
133 | 


--------------------------------------------------------------------------------
/src/Space.js:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useMemo, useState } from 'react';
  2 | import { Box, Header, Heading, Meter, Text, Tip } from 'grommet';
  3 | import friendlyState from './friendlyState';
  4 | 
  5 | const starter = {
  6 |   cached: { value: 0, color: 'graph-0', label: 'Cached' },
  7 |   unpublished: { value: 0, color: 'graph-1', label: 'Unpublished' },
  8 |   changed: { value: 0, color: 'status-warning', label: 'Unpublished changes' },
  9 |   published: { value: 0, color: 'graph-2', label: 'Published' },
 10 |   orphaned: { value: 0, color: 'status-critical', label: 'Orphaned' },
 11 |   designer: { value: 0, color: 'text-xweak', label: 'Designer internal' },
 12 |   unknown: { value: 0, color: 'status-unknown', label: 'Unknown' },
 13 | };
 14 | 
 15 | const Space = () => {
 16 |   const [values, setValues] = useState(
 17 |     Object.values(JSON.parse(JSON.stringify(starter))),
 18 |   );
 19 |   const [active, setActive] = useState();
 20 | 
 21 |   useEffect(() => {
 22 |     const next = JSON.parse(JSON.stringify(starter));
 23 |     Object.keys(localStorage).forEach((key) => {
 24 |       const stored = localStorage.getItem(key);
 25 |       const size = stored.length;
 26 |       let sizeKey = 'unknown';
 27 |       if (key === 'designs') sizeKey = 'designer';
 28 |       else if (key.endsWith('--state') || key.endsWith('--identity'))
 29 |         sizeKey = 'designer';
 30 |       else {
 31 |         try {
 32 |           const design = JSON.parse(stored);
 33 |           sizeKey = friendlyState(key, design) || 'unknown';
 34 |         } catch (e) {
 35 |           sizeKey = 'unknown';
 36 |         }
 37 |       }
 38 |       next[sizeKey].value += size;
 39 | 
 40 |       if (size > 1024 * 100) {
 41 |         if (!next[sizeKey].big) next[sizeKey].big = [];
 42 |         next[sizeKey].big.push({ key, size });
 43 |       }
 44 |     });
 45 | 
 46 |     // convert to K and add interaction
 47 |     Object.values(next)
 48 |       .filter((v) => v.value)
 49 |       .forEach((v) => {
 50 |         v.value = Math.round(v.value / 1024);
 51 |         v.onHover = (over) => setActive((over && v) || undefined);
 52 |       });
 53 | 
 54 |     setValues(Object.values(next));
 55 |   }, []);
 56 | 
 57 |   const max = useMemo(() => {
 58 |     let total = 0;
 59 |     values.forEach((v) => (total += v.value));
 60 |     return total;
 61 |   }, [values]);
 62 | 
 63 |   return (
 64 |     <Box margin={{ vertical: 'medium' }} gap="medium">
 65 |       <Heading level={2} size="small" margin="none">
 66 |         storage
 67 |       </Heading>
 68 |       <Box direction="row" gap="medium" align="center">
 69 |         <Tip
 70 |           dropProps={{ align: { bottom: 'top' } }}
 71 |           content={
 72 |             active ? (
 73 |               <Box pad="small" gap="small" flex={false}>
 74 |                 <Header>
 75 |                   <Box direction="row" gap="small" align="center">
 76 |                     <Box pad="xsmall" background={active.color} />
 77 |                     <Heading level={3} size="small" margin="none">
 78 |                       {active.label}
 79 |                     </Heading>
 80 |                   </Box>
 81 |                   <Text>{active.value} K</Text>
 82 |                 </Header>
 83 |                 <Box pad={{ start: 'medium' }}>
 84 |                   {active.big?.map((b) => (
 85 |                     <Box
 86 |                       direction="row"
 87 |                       gap="medium"
 88 |                       justify="between"
 89 |                       align="top"
 90 |                     >
 91 |                       <Text weight="bold">{b.key}</Text>
 92 |                       <Text wordBreak="keep-all">
 93 |                         {Math.round(b.size / 1024)} K
 94 |                       </Text>
 95 |                     </Box>
 96 |                   ))}
 97 |                 </Box>
 98 |               </Box>
 99 |             ) : undefined
100 |           }
101 |         >
102 |           <Meter values={values} max={max} />
103 |         </Tip>
104 |         <Text>{`${max} K total`}</Text>
105 |       </Box>
106 |     </Box>
107 |   );
108 | };
109 | 
110 | export default Space;
111 | 


--------------------------------------------------------------------------------
/src/Properties/Replace.js:
--------------------------------------------------------------------------------
  1 | import React, { useMemo, useState } from 'react';
  2 | import {
  3 |   Box,
  4 |   Button,
  5 |   CheckBox,
  6 |   Footer,
  7 |   Form,
  8 |   FormField,
  9 |   Header,
 10 |   Heading,
 11 |   Layer,
 12 |   Select,
 13 |   Text,
 14 | } from 'grommet';
 15 | import { Close } from 'grommet-icons';
 16 | import { replace, getComponent, getDesign, getName } from '../design2';
 17 | 
 18 | const Replace = ({ targetId, onDone }) => {
 19 |   const design = getDesign();
 20 |   const { type } = getComponent(targetId);
 21 | 
 22 |   // other components having the same type, in this design and any includes
 23 |   const allOptions = useMemo(() => {
 24 |     const sameType = (components, template) =>
 25 |       Object.keys(components)
 26 |         .map((id) => parseInt(id, 10))
 27 |         .filter((id) => id !== targetId && components[id].type === type)
 28 |         .map((id) => ({ id, name: getName(id, { template }), template }));
 29 | 
 30 |     const result = [];
 31 |     result.push(...sameType(design.components));
 32 | 
 33 |     if (design.includes) {
 34 |       design.includes.forEach((name) => {
 35 |         const stored = localStorage.getItem(name);
 36 |         if (stored) {
 37 |           const include = JSON.parse(stored);
 38 |           result.push(...sameType(include.components, include));
 39 |         }
 40 |       });
 41 |     }
 42 | 
 43 |     return result;
 44 |   }, [design, targetId, type]);
 45 |   const [options, setOptions] = useState(allOptions);
 46 | 
 47 |   const OptionLabel = ({ option: { id, template }, selected }) => (
 48 |     <Box pad="small">
 49 |       <Text weight={selected ? 'bold' : undefined}>
 50 |         {getName(id, { template })}
 51 |       </Text>
 52 |     </Box>
 53 |   );
 54 | 
 55 |   return (
 56 |     <Layer
 57 |       position="top-right"
 58 |       margin="medium"
 59 |       animation="fadeIn"
 60 |       onClickOutside={onDone}
 61 |       onEsc={onDone}
 62 |     >
 63 |       <Box flex elevation="medium" pad="medium" gap="medium">
 64 |         <Header>
 65 |           <Heading level={2} size="small" margin="none">
 66 |             copy properties from
 67 |           </Heading>
 68 |           <Button icon={<Close />} onClick={onDone} />
 69 |         </Header>
 70 |         <Form
 71 |           onSubmit={({
 72 |             value: {
 73 |               template: { id, template },
 74 |               includeChildren,
 75 |             },
 76 |           }) => {
 77 |             replace(id, targetId, { includeChildren, template });
 78 |             onDone();
 79 |           }}
 80 |         >
 81 |           <FormField
 82 |             label="template"
 83 |             htmlFor="template"
 84 |             name="template"
 85 |             required
 86 |           >
 87 |             <Select
 88 |               id="template"
 89 |               name="template"
 90 |               options={options}
 91 |               placeholder="component ..."
 92 |               valueLabel={(option) => <OptionLabel option={option} selected />}
 93 |               onSearch={
 94 |                 options.length > 10
 95 |                   ? (text) => {
 96 |                       const exp = new RegExp(`${text}`, 'i');
 97 |                       setOptions(
 98 |                         allOptions.filter(({ id, template }) =>
 99 |                           exp.test(getName(id, { template })),
100 |                         ),
101 |                       );
102 |                     }
103 |                   : undefined
104 |               }
105 |             >
106 |               {(option, i, o, { selected }) => (
107 |                 <OptionLabel option={option} selected={selected} />
108 |               )}
109 |             </Select>
110 |           </FormField>
111 |           <FormField htmlFor="includeChildren" name="includeChildren">
112 |             <CheckBox
113 |               id="includeChildren"
114 |               name="includeChildren"
115 |               label="include children?"
116 |             />
117 |           </FormField>
118 |           <Footer margin={{ top: 'medium' }}>
119 |             <Button label="copy" type="submit" primary />
120 |           </Footer>
121 |         </Form>
122 |       </Box>
123 |     </Layer>
124 |   );
125 | };
126 | 
127 | export default Replace;
128 | 


--------------------------------------------------------------------------------
/src/Tree/Tree.js:
--------------------------------------------------------------------------------
  1 | import React, {
  2 |   // useCallback,
  3 |   useContext,
  4 |   // useEffect,
  5 |   useMemo,
  6 |   useRef,
  7 |   useState,
  8 | } from 'react';
  9 | import { Box, Button, Keyboard, Paragraph, Text } from 'grommet';
 10 | import { Previous } from 'grommet-icons';
 11 | import {
 12 |   duplicateComponent,
 13 |   getName,
 14 |   getRoot,
 15 |   setScreenProperty,
 16 |   useScreens,
 17 | } from '../design2';
 18 | import SelectionContext from '../SelectionContext';
 19 | import DragDropContext from './DragDropContext';
 20 | import Header from './Header';
 21 | import Screen from './Screen';
 22 | import Component from './Component';
 23 | import Data from './Data';
 24 | 
 25 | const PropertyComponent = ({ id, value }) => {
 26 |   const [, setSelection, { setLocation }] = useContext(SelectionContext);
 27 | 
 28 |   return (
 29 |     <>
 30 |       <Button
 31 |         hoverIndicator
 32 |         onClick={() => {
 33 |           setLocation({ screen: getRoot(id) });
 34 |           setSelection(id);
 35 |         }}
 36 |       >
 37 |         <Box direction="row" pad="small" gap="small" border="bottom">
 38 |           <Previous />
 39 |           <Text>back to {getName(id)}</Text>
 40 |         </Box>
 41 |       </Button>
 42 |       {value && <Component id={value} />}
 43 |     </>
 44 |   );
 45 | };
 46 | 
 47 | const within = (node, container) => {
 48 |   if (!node) return false;
 49 |   if (node === container) return true;
 50 |   return within(node.parentNode, container);
 51 | };
 52 | 
 53 | // root is either undefined for all screens
 54 | // or { id, value, onChange } for property components
 55 | const Tree = ({ onClose, root, setMode }) => {
 56 |   const [selection, setSelection] = useContext(SelectionContext);
 57 |   const screens = useScreens();
 58 |   const [copied, setCopied] = useState();
 59 |   const treeRef = useRef();
 60 | 
 61 |   const [dragging, setDragging] = useState();
 62 |   const dragDropContext = useMemo(() => [dragging, setDragging], [dragging]);
 63 | 
 64 |   const onKey = (event) => {
 65 |     if (
 66 |       document.activeElement === document.body ||
 67 |       within(event.target, treeRef.current)
 68 |     ) {
 69 |       if (event.key === 'c' && (event.metaKey || event.ctrlKey)) {
 70 |         setCopied(selection);
 71 |         // if (navigator.clipboard && navigator.clipboard.writeText) {
 72 |         //   navigator.clipboard.writeText(serialize(design, selected));
 73 |         // }
 74 |       } else if (
 75 |         event.key === 'v' &&
 76 |         event.shiftKey &&
 77 |         (event.metaKey || event.ctrlKey)
 78 |       ) {
 79 |         // 'V' -> after
 80 |         if (copied && copied !== selection) {
 81 |           setSelection(duplicateComponent(copied, { after: selection }));
 82 |         }
 83 |       } else if (event.key === 'v' && (event.metaKey || event.ctrlKey)) {
 84 |         // 'v' -> within
 85 |         if (copied && copied !== selection) {
 86 |           setSelection(duplicateComponent(copied, { within: selection }));
 87 |         }
 88 |       } else if (event.key === 's') {
 89 |         screens.forEach((id) => setScreenProperty(id, 'collapsed', true));
 90 |       }
 91 |     }
 92 |   };
 93 | 
 94 |   return (
 95 |     <Keyboard target="document" onKeyDown={onKey}>
 96 |       <DragDropContext.Provider value={dragDropContext}>
 97 |         <Box ref={treeRef} height="100vh" border="right">
 98 |           <Header
 99 |             setMode={setMode}
100 |             onClose={onClose}
101 |             property={selection ? undefined : root}
102 |           />
103 | 
104 |           <Box flex overflow="auto">
105 |             <Box flex="grow">
106 |               {(root && <PropertyComponent {...root} />) ||
107 |                 screens.map((id, index) => (
108 |                   <Screen key={id} id={id} first={index === 0} />
109 |                 )) || (
110 |                   <Paragraph margin="small" color="placeholder" textAlign="end">
111 |                     Add a screen using the '+' above.
112 |                   </Paragraph>
113 |                 )}
114 |             </Box>
115 |             <Data />
116 |           </Box>
117 |         </Box>
118 |       </DragDropContext.Provider>
119 |     </Keyboard>
120 |   );
121 | };
122 | 
123 | export default Tree;
124 | 


--------------------------------------------------------------------------------
/src/templates/dashboard.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "dashboard",
  3 |   "theme": "grommet",
  4 |   "screens": {
  5 |     "1": {
  6 |       "id": 1,
  7 |       "name": "Dashboard",
  8 |       "path": "/",
  9 |       "root": 2
 10 |     }
 11 |   },
 12 |   "screenOrder": [1],
 13 |   "components": {
 14 |     "2": {
 15 |       "id": 2,
 16 |       "type": "grommet.Page",
 17 |       "props": {},
 18 |       "children": [18, 3]
 19 |     },
 20 |     "3": {
 21 |       "id": 3,
 22 |       "type": "grommet.PageContent",
 23 |       "props": {},
 24 |       "children": [4, 5]
 25 |     },
 26 |     "4": {
 27 |       "type": "grommet.PageHeader",
 28 |       "id": 4,
 29 |       "props": {
 30 |         "title": "Dashboard",
 31 |         "margin": {
 32 |           "vertical": "medium"
 33 |         }
 34 |       },
 35 |       "name": ""
 36 |     },
 37 |     "5": {
 38 |       "type": "grommet.Grid",
 39 |       "id": 5,
 40 |       "props": {
 41 |         "columns": "small",
 42 |         "gap": "medium"
 43 |       },
 44 |       "children": [6]
 45 |     },
 46 |     "6": {
 47 |       "type": "designer.Repeater",
 48 |       "id": 6,
 49 |       "props": {
 50 |         "count": 6
 51 |       },
 52 |       "children": [7]
 53 |     },
 54 |     "7": {
 55 |       "type": "grommet.Card",
 56 |       "id": 7,
 57 |       "props": {},
 58 |       "children": [8, 9]
 59 |     },
 60 |     "8": {
 61 |       "type": "grommet.CardHeader",
 62 |       "id": 8,
 63 |       "props": {
 64 |         "align": "center",
 65 |         "direction": "row",
 66 |         "flex": false,
 67 |         "justify": "between",
 68 |         "gap": "medium",
 69 |         "pad": "small"
 70 |       },
 71 |       "children": [11]
 72 |     },
 73 |     "9": {
 74 |       "type": "grommet.CardBody",
 75 |       "id": 9,
 76 |       "props": {
 77 |         "pad": "small"
 78 |       },
 79 |       "children": [14]
 80 |     },
 81 |     "11": {
 82 |       "type": "grommet.Text",
 83 |       "id": 11,
 84 |       "props": {
 85 |         "weight": "bold",
 86 |         "size": "large"
 87 |       },
 88 |       "text": "Card title"
 89 |     },
 90 |     "12": {
 91 |       "type": "grommet.Meter",
 92 |       "id": 12,
 93 |       "props": {
 94 |         "type": "circle",
 95 |         "size": "full",
 96 |         "value": 40
 97 |       }
 98 |     },
 99 |     "14": {
100 |       "type": "grommet.Stack",
101 |       "id": 14,
102 |       "props": {
103 |         "anchor": "center"
104 |       },
105 |       "children": [12, 17]
106 |     },
107 |     "15": {
108 |       "type": "grommet.Text",
109 |       "id": 15,
110 |       "props": {
111 |         "weight": "bold",
112 |         "size": "3xl"
113 |       },
114 |       "text": "40"
115 |     },
116 |     "16": {
117 |       "type": "grommet.Text",
118 |       "id": 16,
119 |       "props": {},
120 |       "text": "units"
121 |     },
122 |     "17": {
123 |       "type": "grommet.Box",
124 |       "id": 17,
125 |       "props": {
126 |         "align": "center",
127 |         "justify": "center"
128 |       },
129 |       "children": [15, 16]
130 |     },
131 |     "18": {
132 |       "type": "grommet.PageContent",
133 |       "id": 18,
134 |       "props": {
135 |         "border": {
136 |           "side": "bottom"
137 |         }
138 |       },
139 |       "children": [20]
140 |     },
141 |     "20": {
142 |       "type": "grommet.Header",
143 |       "id": 20,
144 |       "props": {
145 |         "align": "center",
146 |         "direction": "row",
147 |         "flex": false,
148 |         "justify": "between",
149 |         "gap": "medium"
150 |       },
151 |       "children": [21, 22]
152 |     },
153 |     "21": {
154 |       "type": "grommet.Text",
155 |       "id": 21,
156 |       "props": {
157 |         "weight": "bold"
158 |       },
159 |       "text": "Title"
160 |     },
161 |     "22": {
162 |       "type": "grommet.Menu",
163 |       "id": 22,
164 |       "props": {
165 |         "label": "",
166 |         "icon": "User",
167 |         "items": [
168 |           {
169 |             "label": "sign out"
170 |           }
171 |         ]
172 |       }
173 |     }
174 |   },
175 |   "nextId": 23,
176 |   "local": true,
177 |   "date": "2022-05-07T21:47:42.000Z",
178 |   "created": "2022-05-07T18:37:42.954Z",
179 |   "imports": [],
180 |   "version": 3.7
181 | }
182 | 


--------------------------------------------------------------------------------
/src/Data.js:
--------------------------------------------------------------------------------
  1 | import React, {
  2 |   useCallback,
  3 |   useContext,
  4 |   useEffect,
  5 |   useRef,
  6 |   useState,
  7 | } from 'react';
  8 | import {
  9 |   Box,
 10 |   Button,
 11 |   CheckBox,
 12 |   Header,
 13 |   Page,
 14 |   PageContent,
 15 |   TextArea,
 16 |   TextInput,
 17 | } from 'grommet';
 18 | import { Trash } from 'grommet-icons';
 19 | import Field from './components/Field';
 20 | import { getData, removeData, setDataProperty, useData } from './design2';
 21 | import SelectionContext from './SelectionContext';
 22 | 
 23 | const dataToString = (data) => JSON.stringify(data?.data, null, 2) || '';
 24 | 
 25 | const Data = ({ id }) => {
 26 |   const [, setSelection] = useContext(SelectionContext);
 27 |   const data = useData(id);
 28 | 
 29 |   // we keep the latest text in a ref so parseAndSet can use it lazily
 30 |   const text = useRef(dataToString(data));
 31 | 
 32 |   // dataText tracks what the TextArea contains, which might not be valid JSON
 33 |   // as the user types
 34 |   const [dataText, setDataText] = useState(text.current);
 35 | 
 36 |   // any errors parsing the JSON are save here so they can be shown to the user
 37 |   const [error, setError] = useState(false);
 38 | 
 39 |   const parseAndSet = useCallback(() => {
 40 |     if (text.current) {
 41 |       try {
 42 |         const nextValue = JSON.parse(text.current);
 43 |         setError(false);
 44 |         setDataProperty(id, 'data', nextValue);
 45 |       } catch (e) {
 46 |         setError(e.message);
 47 |       }
 48 |     } else {
 49 |       setDataProperty(id, 'data', undefined);
 50 |     }
 51 |   }, [id]);
 52 | 
 53 |   // when data changes, set and reset. This could be due to the user navigating
 54 |   // between different data ids.
 55 |   useEffect(() => {
 56 |     setDataText(dataToString(getData(id)));
 57 |     return () => parseAndSet();
 58 |   }, [id, parseAndSet]);
 59 | 
 60 |   // lazily parse and set to ride out user typing
 61 |   useEffect(() => {
 62 |     text.current = dataText;
 63 |     const timer = setTimeout(() => parseAndSet(), 500);
 64 |     return () => clearTimeout(timer);
 65 |   }, [dataText, parseAndSet]);
 66 | 
 67 |   if (!data) return null;
 68 | 
 69 |   return (
 70 |     <Page margin={{ vertical: 'medium' }}>
 71 |       <PageContent>
 72 |         <Header>
 73 |           <Field label="name" htmlFor="name" flex="grow">
 74 |             <TextInput
 75 |               id="name"
 76 |               name="name"
 77 |               plain
 78 |               value={data.name || ''}
 79 |               onChange={(event) =>
 80 |                 setDataProperty(id, 'name', event.target.value)
 81 |               }
 82 |             />
 83 |           </Field>
 84 |           <CheckBox
 85 |             name="source"
 86 |             label="remote"
 87 |             checked={data.url !== undefined}
 88 |             onChange={(event) => {
 89 |               setDataProperty(id, 'url', event.target.checked ? '' : undefined);
 90 |             }}
 91 |           />
 92 |           <Button
 93 |             icon={<Trash />}
 94 |             hoverIndicator
 95 |             tip={`delete ${data.name}`}
 96 |             onClick={() => {
 97 |               removeData(id);
 98 |               setSelection(undefined);
 99 |             }}
100 |           />
101 |         </Header>
102 | 
103 |         <Box margin={{ top: 'medium' }}>
104 |           {data.url !== undefined ? (
105 |             <Field label="url" htmlFor="url">
106 |               <TextInput
107 |                 id="url"
108 |                 name="url"
109 |                 plain
110 |                 value={data.url || ''}
111 |                 onChange={(event) =>
112 |                   setDataProperty(id, 'url', event.target.value)
113 |                 }
114 |               />
115 |             </Field>
116 |           ) : (
117 |             <TextArea
118 |               id="data"
119 |               name="data"
120 |               value={dataText}
121 |               rows={40}
122 |               onChange={(event) => setDataText(event.target.value)}
123 |             />
124 |           )}
125 |           {error && (
126 |             <Box
127 |               background={{ color: 'status-critical', opacity: 'medium' }}
128 |               pad="small"
129 |             >
130 |               {error}
131 |             </Box>
132 |           )}
133 |         </Box>
134 |       </PageContent>
135 |     </Page>
136 |   );
137 | };
138 | 
139 | export default Data;
140 | 


--------------------------------------------------------------------------------