@pie-lib/config-ui 12.0.0-beta.5 → 12.1.0-next.0

package/src/__tests__/tabs.test.jsx

@@ -0,0 +1,193 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Tabs } from '../tabs';
+
+describe('Tabs Component', () => {
+  it('renders tabs with correct titles', () => {
+    render(
+      <Tabs>
+        <div title="Tab 1">Content 1</div>
+        <div title="Tab 2">Content 2</div>
+        <div title="Tab 3">Content 3</div>
+      </Tabs>,
+    );
+
+    expect(screen.getByText('Tab 1')).toBeInTheDocument();
+    expect(screen.getByText('Tab 2')).toBeInTheDocument();
+    expect(screen.getByText('Tab 3')).toBeInTheDocument();
+  });
+
+  it('renders first tab content by default', () => {
+    render(
+      <Tabs>
+        <div title="Tab 1">Content 1</div>
+        <div title="Tab 2">Content 2</div>
+        <div title="Tab 3">Content 3</div>
+      </Tabs>,
+    );
+
+    expect(screen.getByText('Content 1')).toBeInTheDocument();
+    expect(screen.queryByText('Content 2')).not.toBeInTheDocument();
+    expect(screen.queryByText('Content 3')).not.toBeInTheDocument();
+  });
+
+  it('switches to selected tab when clicked', async () => {
+    const user = userEvent.setup();
+    render(
+      <Tabs>
+        <div title="Tab 1">Content 1</div>
+        <div title="Tab 2">Content 2</div>
+        <div title="Tab 3">Content 3</div>
+      </Tabs>,
+    );
+
+    const tab2 = screen.getByRole('tab', { name: 'Tab 2' });
+    await user.click(tab2);
+
+    expect(screen.queryByText('Content 1')).not.toBeInTheDocument();
+    expect(screen.getByText('Content 2')).toBeInTheDocument();
+    expect(screen.queryByText('Content 3')).not.toBeInTheDocument();
+  });
+
+  it('displays correct content when multiple tabs are clicked', async () => {
+    const user = userEvent.setup();
+    render(
+      <Tabs>
+        <div title="Tab 1">Content 1</div>
+        <div title="Tab 2">Content 2</div>
+        <div title="Tab 3">Content 3</div>
+      </Tabs>,
+    );
+
+    await user.click(screen.getByRole('tab', { name: 'Tab 2' }));
+    expect(screen.getByText('Content 2')).toBeInTheDocument();
+
+    await user.click(screen.getByRole('tab', { name: 'Tab 3' }));
+    expect(screen.getByText('Content 3')).toBeInTheDocument();
+
+    await user.click(screen.getByRole('tab', { name: 'Tab 1' }));
+    expect(screen.getByText('Content 1')).toBeInTheDocument();
+  });
+
+  it('applies custom className to root element', () => {
+    const { container } = render(
+      <Tabs className="custom-tabs-class">
+        <div title="Tab 1">Content 1</div>
+      </Tabs>,
+    );
+
+    const rootDiv = container.querySelector('.custom-tabs-class');
+    expect(rootDiv).toBeInTheDocument();
+  });
+
+
+  it('handles tabs without title prop gracefully', () => {
+    render(
+      <Tabs>
+        <div title="Tab 1">Content 1</div>
+        <div>No Title Child</div>
+        <div title="Tab 2">Content 2</div>
+      </Tabs>,
+    );
+
+    const tabs = screen.getAllByRole('tab');
+    // Should only have 2 tabs since one doesn't have a title
+    expect(tabs).toHaveLength(2);
+    expect(screen.getByText('Tab 1')).toBeInTheDocument();
+    expect(screen.getByText('Tab 2')).toBeInTheDocument();
+  });
+
+  it('handles null children gracefully', () => {
+    render(
+      <Tabs>
+        <div title="Tab 1">Content 1</div>
+        {null}
+        <div title="Tab 2">Content 2</div>
+      </Tabs>,
+    );
+
+    const tabs = screen.getAllByRole('tab');
+    expect(tabs).toHaveLength(2);
+  });
+
+  it('handles complex content in tabs', () => {
+    render(
+      <Tabs>
+        <div title="Tab 1">
+          <div>
+            <h2>Tab 1 Header</h2>
+            <p>Tab 1 description</p>
+            <button>Button in Tab 1</button>
+          </div>
+        </div>
+        <div title="Tab 2">
+          <div>
+            <h2>Tab 2 Header</h2>
+            <input type="text" placeholder="Input in Tab 2" />
+          </div>
+        </div>
+      </Tabs>,
+    );
+
+    expect(screen.getByText('Tab 1 Header')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Button in Tab 1' })).toBeInTheDocument();
+
+    const tab2 = screen.getByRole('tab', { name: 'Tab 2' });
+    expect(tab2).toBeInTheDocument();
+  });
+
+  it('renders all tabs in MuiTabs component', () => {
+    const { container } = render(
+      <Tabs>
+        <div title="Tab A">Content A</div>
+        <div title="Tab B">Content B</div>
+        <div title="Tab C">Content C</div>
+      </Tabs>,
+    );
+
+    const tabsComponent = container.querySelector('[role="tablist"]');
+    expect(tabsComponent).toBeInTheDocument();
+  });
+
+  it('applies correct value prop to MuiTabs', async () => {
+    const user = userEvent.setup();
+    render(
+      <Tabs>
+        <div title="Tab 1">Content 1</div>
+        <div title="Tab 2">Content 2</div>
+      </Tabs>,
+    );
+
+    // Initially first tab should be selected (value 0)
+    const tab1 = screen.getByRole('tab', { name: 'Tab 1' });
+    expect(tab1).toHaveAttribute('aria-selected', 'true');
+
+    // Click second tab
+    await user.click(screen.getByRole('tab', { name: 'Tab 2' }));
+    const tab2 = screen.getByRole('tab', { name: 'Tab 2' });
+    expect(tab2).toHaveAttribute('aria-selected', 'true');
+    expect(tab1).toHaveAttribute('aria-selected', 'false');
+  });
+
+  it('renders with empty children array', () => {
+    const { container } = render(<Tabs>{[]}</Tabs>);
+    expect(container).toBeInTheDocument();
+  });
+
+  it('handles long tab titles', () => {
+    render(
+      <Tabs>
+        <div title="This is a very long tab title that should still render correctly">
+          Content 1
+        </div>
+        <div title="Short">Content 2</div>
+      </Tabs>,
+    );
+
+    expect(
+      screen.getByText('This is a very long tab title that should still render correctly'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Short')).toBeInTheDocument();
+  });
+});

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,145 @@
+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,36 +1,58 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@material-ui/core';
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@mui/material';
+import { styled } from '@mui/material/styles';
 
-const AlertDialog = ({ text, title, onClose, onConfirm, open }) => (
-  <Dialog open={open} onClose={onClose}>
-    {title && <DialogTitle>{title}</DialogTitle>}
+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>
-        <DialogContentText>{text}</DialogContentText>
+        <StyledDialogContentText>{text}</StyledDialogContentText>
       </DialogContent>
     )}
     <DialogActions>
       {onClose && (
         <Button onClick={onClose} color="primary">
-          CANCEL
+          {onCloseText}
         </Button>
       )}
       {onConfirm && (
         <Button autoFocus onClick={onConfirm} color="primary">
-          OK
+          {onConfirmText}
         </Button>
       )}
     </DialogActions>
   </Dialog>
 );
 
+AlertDialog.defaultProps = {
+  onCloseText: 'CANCEL',
+  onConfirmText: 'OK',
+  disableAutoFocus: false,
+  disableEnforceFocus: false,
+  disableRestoreFocus: false,
+};
+
 AlertDialog.propTypes = {
-  text: PropTypes.string,
+  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,23 +1,50 @@
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import MuiCheckbox from '@material-ui/core/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import MuiCheckbox from '@mui/material/Checkbox';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
-import grey from '@material-ui/core/colors/grey';
+import { styled } from '@mui/material/styles';
+import { color } from '@pie-lib/render-ui';
+import { grey } from '@mui/material/colors';
 
-const Checkbox = ({ mini, checked, onChange, value, label, classes }) => (
-  <FormControlLabel
-    className={classNames(classes.mini)}
-    classes={{
-      label: classNames(classes.label, mini && classes.miniLabel),
-    }}
+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={
-      <MuiCheckbox
+      <StyledCheckbox
         checked={checked}
         onChange={onChange}
         value={value}
-        className={classNames(mini && classes.miniCheckbox)}
+        mini={mini}
+        error={error}
       />
     }
     label={label}
@@ -26,38 +53,17 @@ const Checkbox = ({ mini, checked, onChange, value, label, classes }) => (
 
 Checkbox.propTypes = {
   mini: PropTypes.bool,
-  classes: PropTypes.object.isRequired,
   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 withStyles((theme) => ({
-  label: {
-    fontSize: theme.typography.fontSize - 1,
-    transform: 'translate(-4%, 2%)',
-    color: 'rgba(0,0,0,1.0)',
-  },
-  miniCheckbox: {
-    margin: 0,
-    padding: 0,
-    width: theme.spacing.unit * 3,
-    height: theme.spacing.unit * 3,
-  },
-  miniLabel: {
-    marginLeft: theme.spacing.unit,
-    color: grey[700],
-    fontSize: theme.typography.fontSize - 3,
-  },
-  mini: {
-    margin: 0,
-    marginLeft: 0,
-    padding: 0,
-  },
-}))(Checkbox);
+export default Checkbox;