Created MUI-based checkbox component

cspell.json

@@ -15,6 +15,7 @@
   "words": [
     "APPDATA",
     "asyncs",
+    "autodocs",
     "dockbox",
     "electronmon",
     "endregion",
@@ -29,6 +30,7 @@
     "papi",
     "Papis",
     "paranext",
+    "paratext",
     "proxied",
     "Reinitializing",
     "reserialized",

src/renderer/components/papi-components/checkbox.component.css

@@ -0,0 +1,32 @@
+.papi-checkbox {
+  background-color: transparent;
+}
+
+.papi-checkbox.error {
+  color: #ff0000;
+}
+.papi-checkbox.error:hover {
+  background-color: rgba(255, 0, 0, 0.2);
+}
+.papi-checkbox.paratext {
+  color: greenyellow;
+}
+.papi-checkbox-label.paratext {
+  color: darkgreen;
+}
+.papi-checkbox.paratext:hover {
+  background-color: rgba(0, 100, 0, 0.3);
+}
+.papi-checkbox.paratext.bright {
+  color: darkgreen;
+}
+.papi-checkbox-label.paratext.bright {
+  background-color: greenyellow;
+}
+.papi-checkbox.paratext.bright:hover {
+  background-color: rgba(173, 255, 47, 0.3);
+}
+.papi-checkbox.below,
+.papi-checkbox.above {
+  text-align: center;
+}

src/renderer/components/papi-components/checkbox.component.tsx

@@ -0,0 +1,123 @@
+import { FormLabel, Checkbox as MuiCheckbox } from '@mui/material';
+import { ChangeEvent } from 'react';
+import '@renderer/components/papi-components/checkbox.component.css';
+import LabelPosition from '@renderer/components/papi-components/label-position.model';
+
+export type CheckboxProps = {
+  /**
+   * If `true`, the component is checked.
+   */
+  isChecked?: boolean;
+  /**
+   * If specified, the label that will appear associated with the checkbox.
+   * @default '' (no label will be shown)
+   */
+  labelText?: string;
+  /**
+   * Indicates the position of the label relative to the checkbox.
+   * @default 'after'
+   */
+  labelPosition?: LabelPosition;
+  /**
+   * If `true`, the component is in the indeterminate state.
+   * @default false
+   */
+  isIndeterminate?: boolean;
+  /**
+   * If `true`, the component is checked by default.
+   * @default false
+   */
+  isDefaultChecked?: boolean;
+  /**
+   * Enabled status of switch
+   * @default false
+   */
+  isDisabled?: boolean;
+  /**
+   * True when (input related to) switch is erroneous
+   * @default false
+   */
+  hasError?: boolean;
+  /**
+   * Additional css classes to help with unique styling of the switch
+   */
+  className?: string;
+  /**
+   * Callback fired when the state is changed.
+   * @param event The event source of the callback. You can pull out the new value by accessing event.target.value (string).
+   * You can pull out the new checked state by accessing event.target.checked (boolean).
+   */
+  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+};
+
+/* function CheckboxContainer({ labelText? = '', isDisabled : boolean, hasError : boolean, children? }) {
+  return (
+    <FormLabel disabled={isDisabled} error={hasError}>
+      {children}
+      labelText
+    </FormLabel>
+  );
+} */
+
+/**
+ * Primary UI component for user interaction
+ */
+function Checkbox({
+  isChecked,
+  labelText = '',
+  labelPosition = LabelPosition.After,
+  isIndeterminate = false,
+  isDefaultChecked = false,
+  isDisabled = false,
+  hasError = false,
+  className,
+  onChange,
+}: CheckboxProps) {
+  const checkBox = (
+    <MuiCheckbox
+      checked={isChecked}
+      indeterminate={isIndeterminate}
+      defaultChecked={isDefaultChecked}
+      disabled={isDisabled}
+      className={`papi-checkbox ${hasError ? 'error' : ''} ${className ?? ''}`}
+      onChange={onChange}
+    />
+  );
+
+  let result;
+
+  if (labelText) {
+    const preceding =
+      labelPosition === LabelPosition.Before || labelPosition === LabelPosition.Above;
+
+    const labelSpan = (
+      <span className={`papi-checkbox-label ${hasError ? 'error' : ''} ${className ?? ''}`}>
+        {labelText}
+      </span>
+    );
+
+    const labelIsInline =
+      labelPosition === LabelPosition.Before || labelPosition === LabelPosition.After;
+
+    const label = labelIsInline ? labelSpan : <div>{labelSpan}</div>;
+
+    const checkBoxElement = labelIsInline ? checkBox : <div>{checkBox}</div>;
+
+    result = (
+      <FormLabel
+        className={`papi-checkbox ${labelPosition.toString()}`}
+        disabled={isDisabled}
+        error={hasError}
+      >
+        {preceding && label}
+        {checkBoxElement}
+        {!preceding && label}
+      </FormLabel>
+    );
+  } else {
+    result = checkBox;
+  }
+  return result;
+}
+
+export default Checkbox;

src/renderer/components/papi-components/label-position.model.ts

@@ -0,0 +1,8 @@
+enum LabelPosition {
+  After = 'after',
+  Before = 'before',
+  Above = 'above',
+  Below = 'below',
+}
+
+export default LabelPosition;

src/stories/checkbox.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import LabelPosition from '@renderer/components/papi-components/label-position.model';
+import Checkbox from '@renderer/components/papi-components/checkbox.component';
+
+const meta: Meta<typeof Checkbox> = {
+  title: 'Basics/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+  argTypes: {
+    labelText: { control: 'text' },
+    labelPosition: { control: LabelPosition },
+    isChecked: { control: 'boolean' },
+    isDefaultChecked: { control: 'boolean' },
+    isDisabled: { control: 'boolean' },
+    isIndeterminate: { control: 'boolean' },
+    hasError: { control: 'boolean' },
+    className: { control: 'text' },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Checkbox>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const DefaultChecked: Story = {
+  args: {
+    isDefaultChecked: true,
+    labelText: 'Initially checked',
+    labelPosition: LabelPosition.After,
+  },
+};
+
+export const Indeterminate: Story = {
+  args: {
+    isIndeterminate: true,
+    labelText:
+      'Clicking this does nothing. It would need isIndeterminate to be programmatically set to false.',
+  },
+};
+
+export const LabelPositionAbove: Story = {
+  args: { labelText: 'Label position', labelPosition: LabelPosition.Above },
+};
+
+export const Disabled: Story = {
+  args: { isDisabled: true, labelText: 'This is disabled' },
+};
+
+export const ErrorState: Story = {
+  args: { hasError: true, labelText: 'Bad!', labelPosition: LabelPosition.Below },
+};
+
+export const Paratext: Story = {
+  args: {
+    labelText: 'Paratext',
+    className: 'paratext',
+  },
+};
+
+export const ParatextBright: Story = {
+  args: {
+    labelText: 'Paratext Bright',
+    className: 'paratext bright',
+  },
+};
+
+export const OnChange: Story = {
+  args: {
+    onChange(event) {
+      // eslint-disable-next-line no-console
+      console.log(event.target.checked);
+    },
+  },
+};