@pie-lib/config-ui 13.0.4-next.30 → 13.0.4-next.34

package/src/__tests__/two-choice.test.js

@@ -0,0 +1,110 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { NChoice } from '../two-choice';
+
+describe('NChoice', () => {
+  const onChange = jest.fn();
+
+  beforeEach(() => {
+    onChange.mockClear();
+  });
+
+  it('renders radio buttons with vertical direction', () => {
+    render(
+      <NChoice
+        direction="vertical"
+        header="n-choice-vertical"
+        value={'left'}
+        onChange={onChange}
+        opts={[
+          { label: 'left', value: 'left' },
+          { label: 'center', value: 'center' },
+          { label: 'right', value: 'right' },
+        ]}
+      />,
+    );
+
+    expect(screen.getByText('n-choice-vertical')).toBeInTheDocument();
+    expect(screen.getByLabelText('left')).toBeInTheDocument();
+    expect(screen.getByLabelText('center')).toBeInTheDocument();
+    expect(screen.getByLabelText('right')).toBeInTheDocument();
+  });
+
+  it('shows selected value as checked', () => {
+    render(
+      <NChoice
+        direction="vertical"
+        header="Options"
+        value={'center'}
+        onChange={onChange}
+        opts={[
+          { label: 'left', value: 'left' },
+          { label: 'center', value: 'center' },
+          { label: 'right', value: 'right' },
+        ]}
+      />,
+    );
+
+    const centerRadio = screen.getByLabelText('center');
+    expect(centerRadio).toBeChecked();
+    expect(screen.getByLabelText('left')).not.toBeChecked();
+    expect(screen.getByLabelText('right')).not.toBeChecked();
+  });
+
+  it('calls onChange when user selects a different option', async () => {
+    const user = userEvent.setup();
+    render(
+      <NChoice
+        direction="vertical"
+        header="Options"
+        value={'left'}
+        onChange={onChange}
+        opts={[
+          { label: 'left', value: 'left' },
+          { label: 'center', value: 'center' },
+          { label: 'right', value: 'right' },
+        ]}
+      />,
+    );
+
+    await user.click(screen.getByLabelText('center'));
+
+    expect(onChange).toHaveBeenCalledWith('center');
+  });
+
+  it('renders with horizontal direction', () => {
+    const { container } = render(
+      <NChoice
+        direction="horizontal"
+        header="Options"
+        value={'left'}
+        onChange={onChange}
+        opts={[
+          { label: 'left', value: 'left' },
+          { label: 'right', value: 'right' },
+        ]}
+      />,
+    );
+
+    // Check that all options are rendered
+    expect(screen.getByLabelText('left')).toBeInTheDocument();
+    expect(screen.getByLabelText('right')).toBeInTheDocument();
+  });
+
+  it('handles string options by converting them', () => {
+    render(
+      <NChoice
+        direction="vertical"
+        header="Options"
+        value={'option1'}
+        onChange={onChange}
+        opts={['option1', 'option2', 'option3']}
+      />,
+    );
+
+    expect(screen.getByLabelText('option1')).toBeInTheDocument();
+    expect(screen.getByLabelText('option2')).toBeInTheDocument();
+    expect(screen.getByLabelText('option3')).toBeInTheDocument();
+  });
+});

package/src/__tests__/with-stateful-model.test.jsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import withStatefulModel from '../with-stateful-model';
+
+const MockComponent = ({ model, onChange }) => (
+  <div>
+    <div data-testid="model-value">{JSON.stringify(model)}</div>
+    <button onClick={() => onChange({ ...model, updated: true })}>Update Model</button>
+  </div>
+);
+
+describe('withStatefulModel', () => {
+  it('wraps component and passes model and onChange', () => {
+    const WrappedComponent = withStatefulModel(MockComponent);
+    const model = { name: 'test' };
+    const onChange = jest.fn();
+
+    render(<WrappedComponent model={model} onChange={onChange} />);
+
+    expect(screen.getByTestId('model-value')).toBeInTheDocument();
+    expect(screen.getByText(JSON.stringify(model))).toBeInTheDocument();
+  });
+
+  it('manages local state with initial model prop', () => {
+    const WrappedComponent = withStatefulModel(MockComponent);
+    const model = { id: 1, name: 'test' };
+
+    render(<WrappedComponent model={model} onChange={jest.fn()} />);
+
+    expect(screen.getByText(JSON.stringify(model))).toBeInTheDocument();
+  });
+
+  it('calls onChange with updated model when component calls onChange', async () => {
+    const user = userEvent.setup();
+    const WrappedComponent = withStatefulModel(MockComponent);
+    const model = { name: 'test' };
+    const onChange = jest.fn();
+
+    render(<WrappedComponent model={model} onChange={onChange} />);
+
+    const updateButton = screen.getByRole('button', { name: /Update Model/i });
+    await user.click(updateButton);
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ updated: true }));
+  });
+
+  it('updates internal state when model prop changes', () => {
+    const WrappedComponent = withStatefulModel(MockComponent);
+    const initialModel = { name: 'initial' };
+    const updatedModel = { name: 'updated' };
+    const onChange = jest.fn();
+
+    const { rerender } = render(<WrappedComponent model={initialModel} onChange={onChange} />);
+
+    expect(screen.getByText(JSON.stringify(initialModel))).toBeInTheDocument();
+
+    rerender(<WrappedComponent model={updatedModel} onChange={onChange} />);
+
+    expect(screen.getByText(JSON.stringify(updatedModel))).toBeInTheDocument();
+  });
+
+  it('maintains state across multiple onChange calls', async () => {
+    const user = userEvent.setup();
+    const WrappedComponent = withStatefulModel(MockComponent);
+    const model = { count: 0 };
+    const onChange = jest.fn();
+
+    render(<WrappedComponent model={model} onChange={onChange} />);
+
+    const updateButton = screen.getByRole('button', { name: /Update Model/i });
+
+    await user.click(updateButton);
+    expect(onChange).toHaveBeenCalledTimes(1);
+
+    await user.click(updateButton);
+    expect(onChange).toHaveBeenCalledTimes(2);
+  });
+
+  it('passes updated model state to onChange callback', async () => {
+    const user = userEvent.setup();
+    const WrappedComponent = withStatefulModel(MockComponent);
+    const model = { value: 'original' };
+    const onChange = jest.fn();
+
+    render(<WrappedComponent model={model} onChange={onChange} />);
+
+    const updateButton = screen.getByRole('button', { name: /Update Model/i });
+    await user.click(updateButton);
+
+    const lastCall = onChange.mock.calls[onChange.mock.calls.length - 1];
+    expect(lastCall[0]).toHaveProperty('updated', true);
+    expect(lastCall[0]).toHaveProperty('value', 'original');
+  });
+
+  it('handles empty model object', () => {
+    const WrappedComponent = withStatefulModel(MockComponent);
+    const model = {};
+    const onChange = jest.fn();
+
+    render(<WrappedComponent model={model} onChange={onChange} />);
+
+    expect(screen.getByText(JSON.stringify(model))).toBeInTheDocument();
+  });
+
+  it('handles model with nested properties', () => {
+    const WrappedComponent = withStatefulModel(MockComponent);
+    const model = { user: { name: 'John', age: 30 }, settings: { theme: 'dark' } };
+    const onChange = jest.fn();
+
+    render(<WrappedComponent model={model} onChange={onChange} />);
+
+    expect(screen.getByText(JSON.stringify(model))).toBeInTheDocument();
+  });
+
+  it('requires model and onChange props', () => {
+    const WrappedComponent = withStatefulModel(MockComponent);
+
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+
+    render(<WrappedComponent model={{ test: 'data' }} onChange={jest.fn()} />);
+
+    expect(screen.getByTestId('model-value')).toBeInTheDocument();
+
+    consoleSpy.mockRestore();
+  });
+
+  it('renders wrapped component with correct props structure', () => {
+    const WrappedComponent = withStatefulModel(MockComponent);
+    const model = { id: 1 };
+    const onChange = jest.fn();
+
+    const { container } = render(<WrappedComponent model={model} onChange={onChange} />);
+
+    expect(container.querySelector('[data-testid="model-value"]')).toBeInTheDocument();
+    expect(container.querySelector('button')).toBeInTheDocument();
+  });
+});

package/src/alert-dialog.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+const StyledDialogTitle = styled(DialogTitle)(() => ({
+  fontSize: 'max(1.25rem, 18px)',
+}));
+
+const StyledDialogContentText = styled(DialogContentText)(() => ({
+  fontSize: 'max(1rem, 14px)',
+}));
+
+const AlertDialog = ({
+  text,
+  title,
+  onClose,
+  onConfirm,
+  open,
+  onCloseText,
+  onConfirmText,
+  disableAutoFocus,
+  disableEnforceFocus,
+  disableRestoreFocus,
+}) => (
+  <Dialog
+    open={open}
+    disableAutoFocus={disableAutoFocus}
+    disableEnforceFocus={disableEnforceFocus}
+    disableRestoreFocus={disableRestoreFocus}
+    onClose={onClose}
+  >
+    {title && <StyledDialogTitle>{title}</StyledDialogTitle>}
+    {text && (
+      <DialogContent>
+        <StyledDialogContentText>{text}</StyledDialogContentText>
+      </DialogContent>
+    )}
+    <DialogActions>
+      {onClose && (
+        <Button onClick={onClose} color="primary">
+          {onCloseText}
+        </Button>
+      )}
+      {onConfirm && (
+        <Button autoFocus onClick={onConfirm} color="primary">
+          {onConfirmText}
+        </Button>
+      )}
+    </DialogActions>
+  </Dialog>
+);
+
+AlertDialog.defaultProps = {
+  onCloseText: 'CANCEL',
+  onConfirmText: 'OK',
+  disableAutoFocus: false,
+  disableEnforceFocus: false,
+  disableRestoreFocus: false,
+};
+
+AlertDialog.propTypes = {
+  text: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  title: PropTypes.string,
+  onClose: PropTypes.func,
+  onConfirm: PropTypes.func,
+  open: PropTypes.bool,
+  onConfirmText: PropTypes.string,
+  onCloseText: PropTypes.string,
+  disableAutoFocus: PropTypes.bool,
+  disableEnforceFocus: PropTypes.bool,
+  disableRestoreFocus: PropTypes.bool,
+};
+
+export default AlertDialog;

package/src/checkbox.jsx

@@ -0,0 +1,61 @@
+import FormControlLabel from '@mui/material/FormControlLabel';
+import MuiCheckbox from '@mui/material/Checkbox';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import { color } from '@pie-lib/render-ui';
+import { grey } from '@mui/material/colors';
+
+const StyledFormControlLabel = styled(FormControlLabel)(({ theme, mini }) => ({
+  margin: 0,
+  marginLeft: 0,
+  padding: 0,
+  '& .MuiFormControlLabel-label': {
+    fontSize: theme.typography.fontSize - 1,
+    transform: 'translate(-4%, 2%)',
+    color: 'rgba(0,0,0,1.0)',
+    ...(mini && {
+      marginLeft: theme.spacing(1),
+      color: grey[700],
+      fontSize: theme.typography.fontSize - 3,
+    }),
+  },
+}));
+
+const StyledCheckbox = styled(MuiCheckbox)(({ theme, mini, error }) => ({
+  color: `${color.tertiary()} !important`,
+  ...(mini && {
+    margin: 0,
+    padding: 0,
+    width: theme.spacing(3),
+    height: theme.spacing(3),
+  }),
+  ...(error && {
+    color: `${theme.palette.error.main} !important`,
+  }),
+}));
+
+const Checkbox = ({ mini, checked, onChange, value, label, error }) => (
+  <StyledFormControlLabel
+    mini={mini}
+    control={<StyledCheckbox checked={checked} onChange={onChange} value={value} mini={mini} error={error} />}
+    label={label}
+  />
+);
+
+Checkbox.propTypes = {
+  mini: PropTypes.bool,
+  checked: PropTypes.bool.isRequired,
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  error: PropTypes.bool,
+};
+
+Checkbox.defaultProps = {
+  value: '',
+  mini: false,
+  error: false,
+};
+
+export default Checkbox;

package/src/choice-configuration/__tests__/feedback-menu.test.jsx

@@ -0,0 +1,151 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import FeedbackMenu from '../feedback-menu';
+
+describe('feedback-menu', () => {
+  const onChange = jest.fn();
+
+  beforeEach(() => {
+    onChange.mockClear();
+  });
+
+  describe('rendering', () => {
+    it('renders feedback menu with default options', () => {
+      const { container } = render(<FeedbackMenu onChange={onChange} classes={{}} />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders menu with feedback type selector', () => {
+      render(<FeedbackMenu onChange={onChange} value={{ type: 'default' }} classes={{}} />);
+      // Menu button should be in the document
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('renders with no feedback type', () => {
+      render(<FeedbackMenu onChange={onChange} value={{ type: 'none' }} classes={{}} />);
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('renders with custom feedback type', () => {
+      render(<FeedbackMenu onChange={onChange} value={{ type: 'custom' }} classes={{}} />);
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('renders feedback icon button', () => {
+      render(<FeedbackMenu onChange={onChange} classes={{}} />);
+      const button = screen.getByRole('button');
+      expect(button).toBeInTheDocument();
+    });
+  });
+
+  describe('user interactions', () => {
+    it('opens menu when button is clicked', async () => {
+      const user = userEvent.setup();
+      render(<FeedbackMenu onChange={onChange} value={{ type: 'default' }} classes={{}} />);
+
+      const button = screen.getByRole('button');
+      await user.click(button);
+
+      // Menu items should appear
+      expect(screen.getByText('No Feedback')).toBeInTheDocument();
+      expect(screen.getByText('Default')).toBeInTheDocument();
+      expect(screen.getByText('Custom')).toBeInTheDocument();
+    });
+
+    it('calls onChange with "none" when No Feedback is selected', async () => {
+      const user = userEvent.setup();
+      render(<FeedbackMenu onChange={onChange} value={{ type: 'default' }} classes={{}} />);
+
+      const button = screen.getByRole('button');
+      await user.click(button);
+
+      const noFeedbackOption = screen.getByText('No Feedback');
+      await user.click(noFeedbackOption);
+
+      expect(onChange).toHaveBeenCalledWith('none');
+    });
+
+    it('calls onChange with "default" when Default is selected', async () => {
+      const user = userEvent.setup();
+      render(<FeedbackMenu onChange={onChange} value={{ type: 'none' }} classes={{}} />);
+
+      const button = screen.getByRole('button');
+      await user.click(button);
+
+      const defaultOption = screen.getByText('Default');
+      await user.click(defaultOption);
+
+      expect(onChange).toHaveBeenCalledWith('default');
+    });
+
+    it('calls onChange with "custom" when Custom is selected', async () => {
+      const user = userEvent.setup();
+      render(<FeedbackMenu onChange={onChange} value={{ type: 'none' }} classes={{}} />);
+
+      const button = screen.getByRole('button');
+      await user.click(button);
+
+      const customOption = screen.getByText('Custom');
+      await user.click(customOption);
+
+      expect(onChange).toHaveBeenCalledWith('custom');
+    });
+
+    it('closes menu after selection', async () => {
+      const user = userEvent.setup();
+      render(<FeedbackMenu onChange={onChange} value={{ type: 'default' }} classes={{}} />);
+
+      const button = screen.getByRole('button');
+      await user.click(button);
+
+      expect(screen.getByText('No Feedback')).toBeInTheDocument();
+
+      const noFeedbackOption = screen.getByText('No Feedback');
+      await user.click(noFeedbackOption);
+
+      // Menu should close after selection
+      expect(onChange).toHaveBeenCalledWith('none');
+    });
+  });
+
+  describe('feedback type indicators', () => {
+    it('shows correct icon color for default feedback', () => {
+      const { container } = render(<FeedbackMenu onChange={onChange} value={{ type: 'default' }} classes={{}} />);
+      // Icon should be present with primary color
+      expect(container.querySelector('svg')).toBeInTheDocument();
+    });
+
+    it('shows correct icon color for custom feedback', () => {
+      const { container } = render(<FeedbackMenu onChange={onChange} value={{ type: 'custom' }} classes={{}} />);
+      // Icon should be present with primary color
+      expect(container.querySelector('svg')).toBeInTheDocument();
+    });
+
+    it('shows correct icon color for disabled feedback', () => {
+      const { container } = render(<FeedbackMenu onChange={onChange} value={{ type: 'none' }} classes={{}} />);
+      // Icon should be present with disabled color
+      expect(container.querySelector('svg')).toBeInTheDocument();
+    });
+  });
+
+  describe('aria labels', () => {
+    it('has aria-label on button for default feedback', () => {
+      render(<FeedbackMenu onChange={onChange} value={{ type: 'default' }} classes={{}} />);
+      const button = screen.getByRole('button', { name: /Default Feedback/i });
+      expect(button).toBeInTheDocument();
+    });
+
+    it('has aria-label on button for custom feedback', () => {
+      render(<FeedbackMenu onChange={onChange} value={{ type: 'custom' }} classes={{}} />);
+      const button = screen.getByRole('button', { name: /Custom Feedback/i });
+      expect(button).toBeInTheDocument();
+    });
+
+    it('has aria-label on button for disabled feedback', () => {
+      render(<FeedbackMenu onChange={onChange} value={{ type: 'none' }} classes={{}} />);
+      const button = screen.getByRole('button', { name: /Feedback disabled/i });
+      expect(button).toBeInTheDocument();
+    });
+  });
+});