@pie-lib/config-ui 13.1.0-beta.7 → 14.0.0-next.35

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

@@ -1,110 +0,0 @@
-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

@@ -1,139 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

@@ -1,151 +0,0 @@
-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();
-    });
-  });
-});