@pie-lib/config-ui 0.1.0

package/src/settings/index.ts

@@ -0,0 +1,93 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/config-ui/src/settings/index.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import Panel from './panel.js';
+
+export { Panel };
+
+export const textField = (label, isConfigProperty = true) => ({
+  label,
+  type: 'textField',
+  isConfigProperty,
+});
+
+export const toggle = (label, isConfigProperty = false, disabled = false) => ({
+  type: 'toggle',
+  label,
+  isConfigProperty,
+  disabled,
+});
+
+const toChoice = (opt) => {
+  if (typeof opt === 'string') {
+    return { label: opt, value: opt };
+  } else {
+    return opt;
+  }
+};
+
+export const radio = function () {
+  const args = Array.prototype.slice.call(arguments);
+  const [label, choices, isConfigProperty = false] = args;
+
+  return {
+    type: 'radio',
+    label,
+    choices: choices && choices.map((o) => toChoice(o)),
+    isConfigProperty,
+  };
+};
+
+export const dropdown = (label, choices, isConfigProperty = false) => {
+  return {
+    type: 'dropdown',
+    label,
+    choices,
+    isConfigProperty,
+  };
+};
+
+export const numberField = (label, options, isConfigProperty = false) => ({
+  ...options,
+  label,
+  type: 'numberField',
+  isConfigProperty,
+});
+
+export const numberFields = (label, fields, isConfigProperty = false) => {
+  Object.keys(fields).map((key) => {
+    fields[key] = numberField(fields[key].label, fields[key], isConfigProperty);
+  });
+
+  return {
+    type: 'numberFields',
+    label,
+    fields,
+  };
+};
+
+export const checkbox = (label, settings, isConfigProperty = false) => ({
+  ...settings,
+  label,
+  type: 'checkbox',
+  isConfigProperty,
+});
+
+export const checkboxes = (label, choices, isConfigProperty = false) => {
+  Object.keys(choices).map((key) => {
+    choices[key] = checkbox(choices[key].label, choices[key], isConfigProperty);
+  });
+
+  return {
+    type: 'checkboxes',
+    label,
+    choices,
+  };
+};

package/src/settings/panel.tsx

@@ -0,0 +1,343 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/config-ui/src/settings/panel.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { get, set } from 'lodash-es';
+import { styled } from '@mui/material/styles';
+import Select from '@mui/material/Select';
+import Input from '@mui/material/Input';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
+import debug from 'debug';
+
+import Toggle from './toggle.js';
+import { NChoice } from '../two-choice.js';
+import SettingsRadioLabel from './settings-radio-label.js';
+import NumberTextField from '../number-text-field.js';
+import Checkbox from '../checkbox.js';
+
+const log = debug('pie-lib:config-ui:settings:panel');
+
+const labelValue = {
+  label: PropTypes.string,
+  value: PropTypes.string,
+};
+
+const baseTypes = {
+  label: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+};
+
+const CheckboxChoice = ({ label, value, onChange }) => {
+  return (
+    <Checkbox
+      checked={value}
+      label={label}
+      onChange={(event) => {
+        onChange(event.target.checked);
+      }}
+    />
+  );
+};
+
+CheckboxChoice.propTypes = {
+  label: PropTypes.string,
+  value: PropTypes.bool,
+  onChange: PropTypes.func,
+};
+
+const StyledNChoice: any = styled(NChoice)(({ theme }) => ({
+  marginTop: theme.spacing(0.5),
+  paddingBottom: theme.spacing(0.5),
+  width: '100%',
+  '& > label': {
+    color: 'rgba(0, 0, 0, 0.89)',
+    transform: 'translate(0, 10px) scale(1)',
+    fontSize: '18px',
+    marginTop: theme.spacing(2.5),
+  },
+  '& > div': {
+    marginTop: theme.spacing(2.5),
+  },
+}));
+
+const Radio = ({ label, value, onChange, choices }) => {
+  return (
+    <StyledNChoice
+      direction="horizontal"
+      customLabel={SettingsRadioLabel}
+      value={value}
+      header={label}
+      opts={choices}
+      onChange={onChange}
+    />
+  );
+};
+
+Radio.propTypes = { ...baseTypes, choices: PropTypes.arrayOf(PropTypes.shape(labelValue)) };
+
+const StyledRadio = Radio;
+
+const StyledLabel: any = styled('p')(({ theme }) => ({
+  margin: 0,
+  fontSize: theme.typography.fontSize,
+}));
+
+const StyledSelect: any = styled(Select)(({ theme }) => ({
+  marginTop: theme.spacing(0.5),
+  border: '2px solid lightgrey',
+  padding: `0 ${theme.spacing(1)}`,
+  borderRadius: '4px',
+}));
+
+const Dropdown = ({ label, value, onChange, choices = [] }) => {
+  const getItemLabel = (l) => (typeof l === 'string' ? l : l.label);
+  const getItemValue = (l) => (typeof l === 'string' ? l : l.value);
+  return (
+    <div>
+      {label && <StyledLabel>{label}</StyledLabel>}
+      <StyledSelect
+        value={value || (choices && choices[0])}
+        onChange={({ target }) => onChange(target.value)}
+        input={<Input id={`dropdown-${label}`} />}
+        disableUnderline
+        MenuProps={{ transitionDuration: { enter: 225, exit: 195 } }}
+      >
+        {choices.map((l, index) => (
+          <MenuItem key={index} value={getItemValue(l)}>
+            {getItemLabel(l)}
+          </MenuItem>
+        ))}
+      </StyledSelect>
+    </div>
+  );
+};
+
+Dropdown.propTypes = { ...baseTypes, choices: PropTypes.arrayOf(PropTypes.string) };
+
+const StyledTypography: any = styled(Typography)(({ theme }) => ({
+  marginRight: theme.spacing(3),
+  marginTop: theme.spacing(1),
+}));
+
+const TextField = ({ label }) => {
+  return <StyledTypography>{label}</StyledTypography>;
+};
+
+const StyledNumberTextField: any = styled(NumberTextField)(({ theme }) => ({
+  width: '35%',
+  marginRight: theme.spacing(3),
+  marginTop: theme.spacing(1),
+  '& .MuiInputBase-root': {
+    marginTop: theme.spacing(0.5),
+    border: '2px solid lightgrey',
+    borderRadius: '4px',
+    padding: `0 ${theme.spacing(1)}`,
+    backgroundColor: 'transparent',
+  },
+}));
+
+const NumberField = ({ label, value, onChange = () => {}, suffix, min, max }) => {
+  return (
+    <StyledNumberTextField
+      variant={'standard'}
+      label={label || 'Label'}
+      value={value}
+      max={max}
+      min={min}
+      onChange={(ev, value) => onChange(value)}
+      suffix={suffix}
+      showErrorWhenOutsideRange
+      disableUnderline
+    />
+  );
+};
+
+NumberField.propTypes = {
+  ...baseTypes,
+  suffix: PropTypes.string,
+  min: PropTypes.number,
+  max: PropTypes.number,
+  value: PropTypes.number,
+};
+
+TextField.propTypes = {
+  ...baseTypes,
+};
+
+const ToggleWrapper = ({ disabled, label, value, onChange }) => (
+  <Toggle label={label} checked={!!value} disabled={!!disabled} toggle={onChange} />
+);
+
+ToggleWrapper.propTypes = { ...baseTypes, value: PropTypes.bool };
+
+const tagMap = {
+  toggle: ToggleWrapper,
+  radio: StyledRadio,
+  dropdown: Dropdown,
+  numberField: NumberField,
+  checkbox: CheckboxChoice,
+  textField: TextField,
+};
+
+const StyledGroup: any = styled('div')(({ theme }) => ({
+  margin: `0 0 ${theme.spacing(2)} 0`,
+}));
+
+const StyledGroupHeader: any = styled('div')(({ theme }) => ({
+  color: '#495B8F',
+  fontSize: theme.typography.fontSize + 2,
+  fontWeight: 600,
+  marginBottom: theme.spacing(1),
+}));
+
+const StyledNumberFields: any = styled('p')(({ theme }) => ({
+  fontSize: theme.typography.fontSize,
+  marginBottom: 0,
+}));
+
+const Group = (props) => {
+  const { model, label, group, configuration, onChange } = props;
+
+  /**
+   * @param group - the group of settings
+   * @param key - the key(or path) to be used to set or get from model or configuration
+   * @param innerKey - the key(or path) to be used to get from the group (used only for numberField type)
+   * @returns tag that corresponds to element type */
+  const getTag = (group, key, innerKey) => {
+    const { isConfigProperty, ...properties } = get(group, innerKey || key);
+    const value = isConfigProperty ? get(configuration, key) : get(model, key);
+    const tagProps = { ...properties, key, value };
+    const Tag = tagMap[tagProps.type];
+
+    return <Tag key={key} {...tagProps} onChange={(v) => onChange(key, v, isConfigProperty)} />;
+  };
+
+  const content = (group, key) => {
+    const currentGroup = group[key];
+
+    if (!currentGroup) {
+      return null;
+    }
+
+    const { type, label, fields, choices } = currentGroup;
+
+    if (type === 'numberFields') {
+      return (
+        <div key={`numberField-${label}`}>
+          <StyledNumberFields>{label}</StyledNumberFields>
+          {Object.keys(fields).map((fieldKey) => {
+            return getTag(group, `${key}.${fieldKey}`, `${key}.fields.${fieldKey}`);
+          })}
+        </div>
+      );
+    }
+
+    if (type === 'checkboxes') {
+      return (
+        <div key={`checkbox-${label}`}>
+          <p>{label}</p>
+          {Object.keys(choices).map((choiceKey) => {
+            return getTag(group, `${key}.${choiceKey}`, `${key}.choices.${choiceKey}`);
+          })}
+        </div>
+      );
+    }
+
+    // if type is toggle, radio, dropdown, numberField or numberText
+    return getTag(group, key);
+  };
+
+  return (
+    <StyledGroup>
+      <StyledGroupHeader>{label}</StyledGroupHeader>
+
+      {Object.keys(group).map((key) => {
+        return content(group, key);
+      })}
+    </StyledGroup>
+  );
+};
+
+Group.propTypes = {
+  model: PropTypes.object,
+  label: PropTypes.string,
+  group: PropTypes.object,
+  configuration: PropTypes.object,
+  onChange: PropTypes.func,
+};
+
+export class Panel extends React.Component {
+  static propTypes = {
+    model: PropTypes.object,
+    configuration: PropTypes.object,
+    groups: PropTypes.object,
+    onChangeModel: PropTypes.func,
+    onChangeConfiguration: PropTypes.func,
+    modal: PropTypes.object,
+  };
+
+  static defaultProps = {
+    onChangeModel: () => {},
+    onChangeConfiguration: () => {},
+  };
+
+  change: any = (key, value, isConfigProperty = false) => {
+    log('[changeModel]', key, value);
+
+    const { onChangeModel, onChangeConfiguration } = this.props;
+    const model = { ...this.props.model };
+    const configuration = { ...this.props.configuration };
+
+    if (isConfigProperty) {
+      set(configuration, key, value);
+      onChangeConfiguration(configuration, key);
+    } else {
+      set(model, key, value);
+      onChangeModel(model, key);
+    }
+  };
+
+  render() {
+    const { groups, model, configuration, modal } = this.props;
+
+    log('render:', model);
+
+    const renderedGroups = Object.keys(groups || {}).map((group) => {
+      const showGroup = Object.entries(groups[group]).some(([, propVal]) => !!propVal);
+
+      if (showGroup) {
+        return (
+          <Group
+            label={group}
+            key={group}
+            model={model}
+            configuration={configuration}
+            group={groups[group]}
+            onChange={this.change}
+          />
+        );
+      }
+
+      return null;
+    });
+
+    return (
+      <div>
+        {renderedGroups}
+        {modal}
+      </div>
+    );
+  }
+}
+
+export default Panel;

package/src/settings/settings-radio-label.tsx

@@ -0,0 +1,42 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/config-ui/src/settings/settings-radio-label.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Radio from '@mui/material/Radio';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { color } from '@pie-lib/render-ui';
+
+const StyledFormControlLabel: any = styled(FormControlLabel)(({ theme }) => ({
+  '& .MuiFormControlLabel-label': {
+    color: 'rgba(0, 0, 0, 0.89)',
+    fontSize: theme.typography.fontSize - 2,
+    left: '-5px',
+    position: 'relative',
+  },
+}));
+
+const StyledRadio: any = styled(Radio)(() => ({
+  color: `${color.tertiary()} !important`,
+}));
+
+const SettingsRadioLabel = ({ label, value, checked, onChange }) => (
+  <StyledFormControlLabel value={value} control={<StyledRadio checked={checked} onChange={onChange} />} label={label} />
+);
+
+SettingsRadioLabel.propTypes = {
+  label: PropTypes.string,
+  value: PropTypes.string,
+  checked: PropTypes.bool,
+  onChange: PropTypes.func,
+};
+
+export default SettingsRadioLabel;

package/src/settings/toggle.tsx

@@ -0,0 +1,56 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/config-ui/src/settings/toggle.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import InputLabel from '@mui/material/InputLabel';
+import { styled } from '@mui/material/styles';
+import Switch from '@mui/material/Switch';
+import { color } from '@pie-lib/render-ui';
+
+const StyledToggle: any = styled('div')(() => ({
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'space-between',
+}));
+
+const StyledInputLabel: any = styled(InputLabel)(({ theme }) => ({
+  color: 'rgba(0, 0, 0, 0.89)',
+  fontSize: theme.typography.fontSize,
+  paddingTop: theme.spacing(2),
+}));
+
+const StyledSwitch: any = styled(Switch)(({ checked }) => ({
+  '&.Mui-checked .MuiSwitch-thumb': {
+    color: `${color.tertiary()} !important`,
+  },
+  '&.Mui-checked .MuiSwitch-track': {
+    backgroundColor: `${color.tertiaryLight()} !important`,
+  },
+  '& .MuiSwitch-track': {
+    backgroundColor: checked ? `${color.tertiaryLight()} !important` : undefined,
+  },
+}));
+
+const Toggle = ({ checked, disabled, label, toggle }) => (
+  <StyledToggle>
+    <StyledInputLabel>{label}</StyledInputLabel>
+    <StyledSwitch checked={checked} disabled={disabled} onChange={(e) => toggle(e.target.checked)} />
+  </StyledToggle>
+);
+
+Toggle.propTypes = {
+  checked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  label: PropTypes.string.isRequired,
+  toggle: PropTypes.func.isRequired,
+};
+
+export default Toggle;

package/src/tabs/index.tsx

@@ -0,0 +1,57 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/config-ui/src/tabs/index.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+
+import MuiTabs from '@mui/material/Tabs';
+import MuiTab from '@mui/material/Tab';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+
+const StyledMuiTab: any = styled(MuiTab)(() => ({}));
+
+export class Tabs extends React.Component {
+  static propTypes = {
+    className: PropTypes.string,
+    contentClassName: PropTypes.string,
+    contentStyle: PropTypes.object,
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = { value: 0 };
+  }
+
+  handleChange: any = (event, value) => {
+    this.setState({ value });
+  };
+
+  render() {
+    const { value } = this.state;
+    const { children, className, contentClassName, contentStyle = {} } = this.props;
+
+    return (
+      <div className={className}>
+        <MuiTabs indicatorColor="primary" value={value} onChange={this.handleChange}>
+          {React.Children.map(children, (c, index) =>
+            c && c.props.title ? <StyledMuiTab key={index} label={c.props.title} /> : null,
+          )}
+        </MuiTabs>
+
+        <div className={contentClassName} style={contentStyle}>
+          {children[value]}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Tabs;