@pie-lib/config-ui 0.1.0

package/src/tags-input/index.tsx

@@ -0,0 +1,126 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/config-ui/src/tags-input/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 PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { uniq } from 'lodash-es';
+import Chip from '@mui/material/Chip';
+import MuiBox from '../mui-box/index.js';
+
+const ENTER = 13;
+
+const StyledChip: any = styled(Chip)(() => ({
+  padding: '0px',
+  margin: '1px',
+}));
+
+const Tag = ({ label, onDelete }) => <StyledChip label={label} onDelete={onDelete} />;
+
+Tag.propTypes = {
+  label: PropTypes.string.isRequired,
+  onDelete: PropTypes.func.isRequired,
+};
+
+const StyledTagsInput: any = styled('div')(({ theme }) => ({
+  border: `0px solid ${theme.palette.background.paper}`,
+  display: 'flex',
+  flexWrap: 'wrap',
+}));
+
+const StyledInput: any = styled('input')(({ theme }) => ({
+  padding: '2px',
+  margin: '1px',
+  minWidth: '30px',
+  width: '100%',
+  flex: '1',
+  border: `0px solid ${theme.palette.background.paper}`,
+  height: '28px',
+  fontSize: theme.typography.fontSize,
+  fontFamily: theme.typography.fontFamily,
+  outline: 'none',
+  '&:focus': {
+    outline: 'none',
+  },
+}));
+
+export class TagsInput extends React.Component {
+  static propTypes = {
+    tags: PropTypes.arrayOf(PropTypes.string).isRequired,
+    onChange: PropTypes.func.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: '',
+      focused: false,
+    };
+
+    this.onKeyDown = (event) => {
+      if (event.keyCode === ENTER && this.state.value !== '') {
+        const tag = this.state.value.trim();
+        const newTags = uniq(this.props.tags.concat([tag]));
+
+        if (newTags.length !== this.props.tags.length) {
+          this.props.onChange(newTags);
+          this.setState({ value: '' });
+        }
+      }
+    };
+
+    this.onChange = (event) => {
+      this.setState({ value: event.target.value });
+    };
+
+    this.deleteTag = (tag) => {
+      const { tags } = this.props;
+
+      const tagIndex = tags.indexOf(tag);
+      if (tagIndex !== -1) {
+        tags.splice(tagIndex, 1);
+        this.props.onChange(tags);
+        this.input.focus();
+      }
+    };
+  }
+
+  onFocus: any = () => {
+    this.setState({ focused: true });
+  };
+
+  onBlur: any = () => {
+    this.setState({ focused: false });
+  };
+
+  render() {
+    const { tags } = this.props;
+    return (
+      <MuiBox focused={this.state.focused}>
+        <StyledTagsInput>
+          {(tags || []).map((t, index) => (
+            <Tag key={index} label={t} onDelete={() => this.deleteTag(t)} />
+          ))}
+          <StyledInput
+            ref={(r) => (this.input = r)}
+            onKeyDown={this.onKeyDown}
+            onChange={this.onChange}
+            value={this.state.value}
+            onFocus={this.onFocus}
+            onBlur={this.onBlur}
+            type="text"
+          />
+        </StyledTagsInput>
+      </MuiBox>
+    );
+  }
+}
+
+export default TagsInput;

package/src/two-choice.tsx

@@ -0,0 +1,128 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/config-ui/src/two-choice.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 { InputContainer as InputContainerImport } from '@pie-lib/render-ui';
+
+function isRenderableReactInteropType(value: any) {
+  return (
+    typeof value === 'function' ||
+    (typeof value === 'object' && value !== null && typeof value.$$typeof === 'symbol')
+  );
+}
+
+function unwrapReactInteropSymbol(maybeSymbol: any, namedExport?: string) {
+  if (!maybeSymbol) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol)) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol.default)) return maybeSymbol.default;
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport])) {
+    return maybeSymbol[namedExport];
+  }
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport]?.default)) {
+    return maybeSymbol[namedExport].default;
+  }
+  return maybeSymbol;
+}
+const InputContainer = unwrapReactInteropSymbol(InputContainerImport, 'InputContainer') || unwrapReactInteropSymbol(renderUi.InputContainer, 'InputContainer');
+import * as RenderUiNamespace from '@pie-lib/render-ui';
+const renderUiNamespaceAny = RenderUiNamespace as any;
+const renderUiDefaultMaybe = renderUiNamespaceAny['default'];
+const renderUi =
+  renderUiDefaultMaybe && typeof renderUiDefaultMaybe === 'object'
+    ? renderUiDefaultMaybe
+    : renderUiNamespaceAny;
+import PropTypes from 'prop-types';
+import RadioWithLabel from './radio-with-label.js';
+import React from 'react';
+import { styled } from '@mui/material/styles';
+
+const StyledGroup: any = styled('div')(({ theme, direction }) => ({
+  display: 'flex',
+  flexWrap: 'wrap',
+  paddingLeft: 0,
+  marginTop: theme.spacing(1),
+  ...(direction === 'vertical' && {
+    flexDirection: 'column',
+  }),
+}));
+
+class NChoice extends React.Component {
+  static propTypes = {
+    header: PropTypes.string.isRequired,
+    className: PropTypes.string,
+    customLabel: PropTypes.func,
+    opts: PropTypes.array.isRequired,
+    value: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+    direction: PropTypes.oneOf(['horizontal', 'vertical']),
+  };
+
+  handleChange: any = (event) => {
+    this.props.onChange(event.currentTarget.value);
+  };
+
+  render() {
+    const { header, className, customLabel, opts, value, direction } = this.props;
+
+    const preppedOpts = opts.map((o) => {
+      return typeof o === 'string' ? { label: o, value: o } : o;
+    });
+    const LabelComponent = customLabel || RadioWithLabel;
+
+    return (
+      <InputContainer label={header} className={className}>
+        <StyledGroup direction={direction}>
+          {preppedOpts.map((o, index) => (
+            <LabelComponent
+              value={o.value}
+              key={index}
+              checked={o.value === value}
+              onChange={this.handleChange}
+              label={o.label}
+            />
+          ))}
+        </StyledGroup>
+      </InputContainer>
+    );
+  }
+}
+
+export { NChoice };
+
+const labelValue = PropTypes.shape({ label: PropTypes.string, value: PropTypes.string });
+
+class TwoChoice extends React.Component {
+  static propTypes = {
+    header: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    one: PropTypes.oneOfType([labelValue, PropTypes.string]),
+    two: PropTypes.oneOfType([labelValue, PropTypes.string]),
+    className: PropTypes.string,
+    customLabel: PropTypes.func,
+  };
+
+  render() {
+    const { one, two, header, className, customLabel, value, onChange } = this.props;
+    const opts = [one, two];
+
+    return (
+      <NChoice
+        customLabel={customLabel}
+        header={header}
+        className={className}
+        opts={opts}
+        value={value}
+        onChange={onChange}
+      />
+    );
+  }
+}
+
+export default TwoChoice;

package/src/with-stateful-model.tsx

@@ -0,0 +1,46 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/config-ui/src/with-stateful-model.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';
+
+const withStatefulModel = (Component) => {
+  class Stateful extends React.Component {
+    static propTypes = {
+      model: PropTypes.object.isRequired,
+      onChange: PropTypes.func.isRequired,
+    };
+
+    constructor(props) {
+      super(props);
+      this.state = {
+        model: props.model,
+      };
+    }
+
+    UNSAFE_componentWillReceiveProps(props) {
+      this.setState({ model: props.model });
+    }
+
+    onChange: any = (model) => {
+      this.setState({ model }, () => {
+        this.props.onChange(this.state.model);
+      });
+    };
+
+    render() {
+      return <Component model={this.state.model} onChange={this.onChange} />;
+    }
+  }
+
+  return Stateful;
+};
+
+export default withStatefulModel;