@pie-lib/config-ui 13.0.21 → 13.0.22-beta.1

package/src/feedback-config/feedback-selector.jsx

@@ -1,5 +1,5 @@
 import EditableHtml from '@pie-lib/editable-html-tip-tap';
-import { InputContainer, color } from '@pie-lib/render-ui';
+import { InputContainer } from '@pie-lib/render-ui';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { styled } from '@mui/material/styles';
@@ -24,11 +24,9 @@ const StyledInputContainer = styled(InputContainer)(() => ({
   paddingBottom: 0,
 }));
 
-// A fill is meant to sit close to the page, so `--pie-background-dark` rather
-// than a stroke token; MUI's grey[300] held #e0e0e0 under every scheme.
 const StyledCustomHolder = styled('div')(({ theme }) => ({
   marginTop: '0px',
-  background: color.backgroundDark(),
+  background: theme.palette.grey[300],
   padding: 0,
   marginBottom: theme.spacing(2),
   borderRadius: '4px',
@@ -36,7 +34,7 @@ const StyledCustomHolder = styled('div')(({ theme }) => ({
 
 const StyledDefaultHolder = styled('div')(({ theme }) => ({
   marginTop: '0px',
-  background: color.backgroundDark(),
+  background: theme.palette.grey[300],
   padding: theme.spacing(2),
   marginBottom: theme.spacing(2),
   borderRadius: '4px',

package/src/help.jsx

@@ -10,14 +10,10 @@ import HelpIcon from '@mui/icons-material/Help';
 import IconButton from '@mui/material/IconButton';
 import React from 'react';
 import { styled } from '@mui/material/styles';
-import { color } from '@pie-lib/render-ui';
 
-const StyledIconButton = styled(IconButton)(() => ({
+const StyledIconButton = styled(IconButton)(({ theme }) => ({
   '&:hover': {
-    // A decorative de-emphasis on hover -- the icon's resting state carries the
-    // affordance, so this does not need the 3:1 non-text minimum. MUI's grey[300]
-    // did not follow `--pie-*`, so it stayed #e0e0e0 on a dark scheme's surface.
-    color: color.borderLight(),
+    color: theme.palette.grey[300],
   },
 }));
 

package/src/layout/settings-box.jsx

@@ -1,18 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
-import { color } from '@pie-lib/render-ui';
 
-const StyledSettingsBox = styled('div')(() => ({
-  /*
-   * Surface and stroke have to move together. `background.paper` is MUI's #fff
-   * regardless of scheme, so tokenising the stroke alone would put a scheme's
-   * border colour on a fixed white panel -- under white-on-black that is a white
-   * stroke on white. `--pie-white` inverts with the scheme, which is what the
-   * panel wanted from `background.paper` in the first place.
-   */
-  backgroundColor: color.white(),
-  border: `2px solid ${color.border()}`,
+const StyledSettingsBox = styled('div')(({ theme }) => ({
+  backgroundColor: theme.palette.background.paper,
+  border: `2px solid ${theme.palette.grey[200]}`,
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'flex-start',

package/LICENSE.md

@@ -1,5 +0,0 @@
-Copyright 2019 CoreSpring Inc
-
-Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/src/__tests__/alert-dialog.test.jsx

@@ -1,183 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import AlertDialog from '../alert-dialog';
-
-describe('AlertDialog Component', () => {
-  const onClose = jest.fn();
-  const onConfirm = jest.fn();
-
-  beforeEach(() => {
-    onClose.mockClear();
-    onConfirm.mockClear();
-  });
-
-  describe('Rendering when open', () => {
-    it('should render dialog when open is true', () => {
-      render(<AlertDialog open={true} title="Confirm" text="Are you sure?" onClose={onClose} onConfirm={onConfirm} />);
-
-      expect(screen.getByText('Confirm')).toBeInTheDocument();
-      expect(screen.getByText('Are you sure?')).toBeInTheDocument();
-    });
-
-    it('should not render dialog when open is false', () => {
-      const { container } = render(
-        <AlertDialog open={false} title="Confirm" text="Are you sure?" onClose={onClose} onConfirm={onConfirm} />,
-      );
-
-      const dialogs = container.querySelectorAll('[role="dialog"]');
-      expect(dialogs.length).toBe(0);
-    });
-  });
-
-  describe('Title and Text', () => {
-    it('should handle both title and text', () => {
-      render(
-        <AlertDialog
-          open={true}
-          title="Important"
-          text="This is an important message"
-          onClose={onClose}
-          onConfirm={onConfirm}
-        />,
-      );
-
-      expect(screen.getByText('Important')).toBeInTheDocument();
-      expect(screen.getByText('This is an important message')).toBeInTheDocument();
-    });
-
-    it('should handle text as object', () => {
-      const textObj = <div>Rich text content</div>;
-      render(<AlertDialog open={true} title="Rich Content" text={textObj} onClose={onClose} onConfirm={onConfirm} />);
-
-      expect(screen.getByText('Rich text content')).toBeInTheDocument();
-    });
-  });
-
-  describe('Buttons', () => {
-    it('should render close button when onClose is provided', () => {
-      render(<AlertDialog open={true} title="Dialog" text="Content" onClose={onClose} onConfirm={onConfirm} />);
-
-      expect(screen.getByRole('button', { name: 'CANCEL' })).toBeInTheDocument();
-    });
-
-    it('should render confirm button when onConfirm is provided', () => {
-      render(<AlertDialog open={true} title="Dialog" text="Content" onClose={onClose} onConfirm={onConfirm} />);
-
-      expect(screen.getByRole('button', { name: 'OK' })).toBeInTheDocument();
-    });
-
-    it('should have default button text', () => {
-      render(<AlertDialog open={true} title="Dialog" text="Content" onClose={onClose} onConfirm={onConfirm} />);
-
-      expect(screen.getByRole('button', { name: 'CANCEL' })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'OK' })).toBeInTheDocument();
-    });
-  });
-
-  describe('User interactions', () => {
-    it('should call onClose when close button is clicked', async () => {
-      const user = userEvent.setup();
-      render(<AlertDialog open={true} title="Dialog" text="Content" onClose={onClose} onConfirm={onConfirm} />);
-
-      const closeButton = screen.getByRole('button', { name: 'CANCEL' });
-      await user.click(closeButton);
-
-      expect(onClose).toHaveBeenCalled();
-    });
-
-    it('should call onConfirm when confirm button is clicked', async () => {
-      const user = userEvent.setup();
-      render(<AlertDialog open={true} title="Dialog" text="Content" onClose={onClose} onConfirm={onConfirm} />);
-
-      const confirmButton = screen.getByRole('button', { name: 'OK' });
-      await user.click(confirmButton);
-
-      expect(onConfirm).toHaveBeenCalled();
-    });
-  });
-
-  describe('Focus management', () => {
-    it('should have autoFocus on confirm button by default', () => {
-      render(<AlertDialog open={true} title="Dialog" text="Content" onClose={onClose} onConfirm={onConfirm} />);
-
-      const confirmButton = screen.getByRole('button', { name: 'OK' });
-      expect(confirmButton).toBeInTheDocument();
-    });
-
-    it('should disable auto focus when disableAutoFocus is true', () => {
-      render(
-        <AlertDialog
-          open={true}
-          title="Dialog"
-          text="Content"
-          onClose={onClose}
-          onConfirm={onConfirm}
-          disableAutoFocus={true}
-        />,
-      );
-
-      expect(screen.getByText('Dialog')).toBeInTheDocument();
-    });
-
-    it('should disable enforce focus when disableEnforceFocus is true', () => {
-      render(
-        <AlertDialog
-          open={true}
-          title="Dialog"
-          text="Content"
-          onClose={onClose}
-          onConfirm={onConfirm}
-          disableEnforceFocus={true}
-        />,
-      );
-
-      expect(screen.getByText('Dialog')).toBeInTheDocument();
-    });
-
-    it('should disable restore focus when disableRestoreFocus is true', () => {
-      render(
-        <AlertDialog
-          open={true}
-          title="Dialog"
-          text="Content"
-          onClose={onClose}
-          onConfirm={onConfirm}
-          disableRestoreFocus={true}
-        />,
-      );
-
-      expect(screen.getByText('Dialog')).toBeInTheDocument();
-    });
-  });
-
-  describe('Edge cases', () => {
-    it('should handle very long title', () => {
-      const longTitle = 'This is a very long title that should wrap properly in the dialog';
-      render(<AlertDialog open={true} title={longTitle} text="Content" onClose={onClose} onConfirm={onConfirm} />);
-
-      expect(screen.getByText(longTitle)).toBeInTheDocument();
-    });
-
-    it('should handle very long text', () => {
-      const longText = 'This is a very long text that should wrap properly in the dialog. '.repeat(10);
-      render(<AlertDialog open={true} title="Dialog" text={longText} onClose={onClose} onConfirm={onConfirm} />);
-
-      expect(screen.getByText(new RegExp(longText.slice(0, 50)))).toBeInTheDocument();
-    });
-
-    it('should handle only close callback', () => {
-      render(<AlertDialog open={true} title="Close Only" text="Content" onClose={onClose} />);
-
-      expect(screen.getByRole('button', { name: 'CANCEL' })).toBeInTheDocument();
-      expect(screen.queryByRole('button', { name: 'OK' })).not.toBeInTheDocument();
-    });
-
-    it('should handle only confirm callback', () => {
-      render(<AlertDialog open={true} title="Confirm Only" text="Content" onConfirm={onConfirm} />);
-
-      expect(screen.getByRole('button', { name: 'OK' })).toBeInTheDocument();
-      expect(screen.queryByRole('button', { name: 'CANCEL' })).not.toBeInTheDocument();
-    });
-  });
-});

package/src/__tests__/checkbox.test.jsx

@@ -1,152 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import Checkbox from '../checkbox';
-
-describe('Checkbox Component', () => {
-  const onChange = jest.fn();
-
-  beforeEach(() => {
-    onChange.mockClear();
-  });
-
-  describe('Rendering', () => {
-    it('should render checkbox with label', () => {
-      render(<Checkbox checked={false} onChange={onChange} label="Accept terms" />);
-
-      expect(screen.getByText('Accept terms')).toBeInTheDocument();
-      expect(screen.getByRole('checkbox')).toBeInTheDocument();
-    });
-
-    it('should render checkbox in checked state', () => {
-      render(<Checkbox checked={true} onChange={onChange} label="Accept terms" />);
-
-      expect(screen.getByRole('checkbox')).toBeChecked();
-    });
-
-    it('should render checkbox in unchecked state', () => {
-      render(<Checkbox checked={false} onChange={onChange} label="Accept terms" />);
-
-      expect(screen.getByRole('checkbox')).not.toBeChecked();
-    });
-
-    it('should render mini checkbox with reduced styling', () => {
-      render(<Checkbox checked={false} onChange={onChange} label="Mini" mini={true} />);
-
-      expect(screen.getByRole('checkbox')).toBeInTheDocument();
-      expect(screen.getByText('Mini')).toBeInTheDocument();
-    });
-  });
-
-  describe('User interaction', () => {
-    it('should call onChange when checkbox is clicked', async () => {
-      const user = userEvent.setup();
-      render(<Checkbox checked={false} onChange={onChange} label="Accept" />);
-
-      const checkbox = screen.getByRole('checkbox');
-      await user.click(checkbox);
-
-      expect(onChange).toHaveBeenCalled();
-    });
-
-    it('should call onChange when label is clicked', async () => {
-      const user = userEvent.setup();
-      render(<Checkbox checked={false} onChange={onChange} label="Click label" />);
-
-      const label = screen.getByText('Click label');
-      await user.click(label);
-
-      expect(onChange).toHaveBeenCalled();
-    });
-  });
-
-  describe('Props', () => {
-    it('should handle value prop', () => {
-      render(<Checkbox checked={true} onChange={onChange} label="With value" value="option1" />);
-
-      expect(screen.getByRole('checkbox')).toBeInTheDocument();
-    });
-
-    it('should display error styling when error is true', () => {
-      render(<Checkbox checked={false} onChange={onChange} label="Error state" error={true} />);
-
-      expect(screen.getByRole('checkbox')).toBeInTheDocument();
-      expect(screen.getByText('Error state')).toBeInTheDocument();
-    });
-  });
-
-  describe('Default props', () => {
-    it('should have mini default to false', () => {
-      const { container } = render(<Checkbox checked={true} onChange={onChange} label="Test" />);
-
-      expect(screen.getByRole('checkbox')).toBeInTheDocument();
-    });
-
-    it('should have error default to false', () => {
-      const { container } = render(<Checkbox checked={true} onChange={onChange} label="Test" />);
-
-      expect(screen.getByRole('checkbox')).toBeInTheDocument();
-    });
-
-    it('should have value default to empty string', () => {
-      render(<Checkbox checked={true} onChange={onChange} label="Test" />);
-
-      expect(screen.getByRole('checkbox')).toBeInTheDocument();
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('should have proper label association', () => {
-      render(<Checkbox checked={false} onChange={onChange} label="Accessible label" />);
-
-      expect(screen.getByLabelText('Accessible label')).toBeInTheDocument();
-    });
-
-    it('should be keyboard accessible', async () => {
-      const user = userEvent.setup();
-      render(<Checkbox checked={false} onChange={onChange} label="Keyboard test" />);
-
-      const checkbox = screen.getByRole('checkbox');
-      checkbox.focus();
-      expect(checkbox).toHaveFocus();
-
-      await user.keyboard(' ');
-      expect(onChange).toHaveBeenCalled();
-    });
-  });
-
-  describe('Multiple checkboxes', () => {
-    it('should render multiple independent checkboxes', () => {
-      const onChange1 = jest.fn();
-      const onChange2 = jest.fn();
-
-      render(
-        <>
-          <Checkbox checked={true} onChange={onChange1} label="Option 1" />
-          <Checkbox checked={false} onChange={onChange2} label="Option 2" />
-        </>,
-      );
-
-      expect(screen.getByLabelText('Option 1')).toBeChecked();
-      expect(screen.getByLabelText('Option 2')).not.toBeChecked();
-    });
-
-    it('should handle independent onChange callbacks', async () => {
-      const user = userEvent.setup();
-      const onChange1 = jest.fn();
-      const onChange2 = jest.fn();
-
-      render(
-        <>
-          <Checkbox checked={true} onChange={onChange1} label="Option 1" />
-          <Checkbox checked={false} onChange={onChange2} label="Option 2" />
-        </>,
-      );
-
-      await user.click(screen.getByLabelText('Option 2'));
-
-      expect(onChange2).toHaveBeenCalled();
-      expect(onChange1).not.toHaveBeenCalled();
-    });
-  });
-});

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

@@ -1,12 +0,0 @@
-import { firstAvailableIndex } from '../choice-utils';
-
-describe('firstAvailableIndex', () => {
-  const assert = (values, index, expected) => {
-    it(`[${values.join(',')}], ${index} ==> ${expected}`, () => {
-      expect(firstAvailableIndex(['0'], 0)).toEqual('1');
-    });
-  };
-  assert(['0'], 0, '1');
-  assert(['0', '1', '2'], 0, '3');
-  assert(['0', '1', '2'], 100, '100');
-});