@rjsf/react-bootstrap 6.0.0-alpha.0

package/src/CheckboxWidget/CheckboxWidget.tsx

@@ -0,0 +1,80 @@
+import { FocusEvent } from 'react';
+import {
+  ariaDescribedByIds,
+  descriptionId,
+  getTemplate,
+  labelValue,
+  WidgetProps,
+  schemaRequiresTrueValue,
+  StrictRJSFSchema,
+  RJSFSchema,
+  FormContextType,
+} from '@rjsf/utils';
+import Form from 'react-bootstrap/Form';
+
+export default function CheckboxWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: WidgetProps<T, S, F>) {
+  const {
+    id,
+    value,
+    disabled,
+    readonly,
+    label,
+    hideLabel,
+    schema,
+    autofocus,
+    options,
+    onChange,
+    onBlur,
+    onFocus,
+    registry,
+    uiSchema,
+  } = props;
+  // Because an unchecked checkbox will cause html5 validation to fail, only add
+  // the "required" attribute if the field value must be "true", due to the
+  // "const" or "enum" keywords
+  const required = schemaRequiresTrueValue<S>(schema);
+  const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
+    'DescriptionFieldTemplate',
+    registry,
+    options
+  );
+
+  const _onChange = ({ target: { checked } }: FocusEvent<HTMLInputElement>) => onChange(checked);
+  const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.checked);
+  const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.checked);
+
+  const description = options.description || schema.description;
+  return (
+    <Form.Group
+      className={`checkbox ${disabled || readonly ? 'disabled' : ''}`}
+      aria-describedby={ariaDescribedByIds<T>(id)}
+    >
+      {!hideLabel && !!description && (
+        <DescriptionFieldTemplate
+          id={descriptionId<T>(id)}
+          description={description}
+          schema={schema}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      <Form.Check
+        id={id}
+        name={id}
+        label={labelValue(label, hideLabel || !label)}
+        checked={typeof value === 'undefined' ? false : value}
+        required={required}
+        disabled={disabled || readonly}
+        autoFocus={autofocus}
+        onChange={_onChange}
+        type='checkbox'
+        onBlur={_onBlur}
+        onFocus={_onFocus}
+      />
+    </Form.Group>
+  );
+}

package/src/CheckboxWidget/index.ts

@@ -0,0 +1,2 @@
+export { default } from './CheckboxWidget';
+export * from './CheckboxWidget';

package/src/CheckboxesWidget/CheckboxesWidget.tsx

@@ -0,0 +1,68 @@
+import { ChangeEvent, FocusEvent } from 'react';
+import Form from 'react-bootstrap/Form';
+import {
+  ariaDescribedByIds,
+  enumOptionsDeselectValue,
+  enumOptionsIsSelected,
+  enumOptionsSelectValue,
+  enumOptionsValueForIndex,
+  optionId,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils';
+
+export default function CheckboxesWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({ id, disabled, options, value, autofocus, readonly, required, onChange, onBlur, onFocus }: WidgetProps<T, S, F>) {
+  const { enumOptions, enumDisabled, inline, emptyValue } = options;
+  const checkboxesValues = Array.isArray(value) ? value : [value];
+
+  const _onChange =
+    (index: number) =>
+    ({ target: { checked } }: ChangeEvent<HTMLInputElement>) => {
+      if (checked) {
+        onChange(enumOptionsSelectValue<S>(index, checkboxesValues, enumOptions));
+      } else {
+        onChange(enumOptionsDeselectValue<S>(index, checkboxesValues, enumOptions));
+      }
+    };
+
+  const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
+    onBlur(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
+  const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
+    onFocus(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
+
+  return (
+    <Form.Group>
+      {Array.isArray(enumOptions) &&
+        enumOptions.map((option, index: number) => {
+          const checked = enumOptionsIsSelected<S>(option.value, checkboxesValues);
+          const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+
+          return (
+            <Form.Check
+              key={option.value}
+              inline={inline}
+              required={required}
+              checked={checked}
+              className='bg-transparent border-0'
+              type={'checkbox'}
+              id={optionId(id, index)}
+              name={id}
+              label={option.label}
+              autoFocus={autofocus && index === 0}
+              onChange={_onChange(index)}
+              onBlur={_onBlur}
+              onFocus={_onFocus}
+              disabled={disabled || itemDisabled || readonly}
+              aria-describedby={ariaDescribedByIds<T>(id)}
+            />
+          );
+        })}
+    </Form.Group>
+  );
+}

package/src/CheckboxesWidget/index.ts

@@ -0,0 +1,2 @@
+export { default } from './CheckboxesWidget';
+export * from './CheckboxesWidget';

package/src/DescriptionField/DescriptionField.tsx

@@ -0,0 +1,19 @@
+import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+export default function DescriptionField<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({ id, description }: DescriptionFieldProps<T, S, F>) {
+  if (description) {
+    return (
+      <div>
+        <div id={id} className='mb-3'>
+          {description}
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+}

package/src/DescriptionField/index.ts

@@ -0,0 +1,2 @@
+export { default } from './DescriptionField';
+export * from './DescriptionField';

package/src/ErrorList/ErrorList.tsx

@@ -0,0 +1,27 @@
+import Card from 'react-bootstrap/Card';
+import ListGroup from 'react-bootstrap/ListGroup';
+
+import { ErrorListProps, FormContextType, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+
+export default function ErrorList<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  errors,
+  registry,
+}: ErrorListProps<T, S, F>) {
+  const { translateString } = registry;
+  return (
+    <Card border='danger' className='mb-4'>
+      <Card.Header className='alert-danger'>{translateString(TranslatableString.ErrorsLabel)}</Card.Header>
+      <Card.Body className='p-0'>
+        <ListGroup>
+          {errors.map((error, i: number) => {
+            return (
+              <ListGroup.Item key={i} className='border-0'>
+                <span>{error.stack}</span>
+              </ListGroup.Item>
+            );
+          })}
+        </ListGroup>
+      </Card.Body>
+    </Card>
+  );
+}

package/src/ErrorList/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ErrorList';
+export * from './ErrorList';

package/src/FieldErrorTemplate/FieldErrorTemplate.tsx

@@ -0,0 +1,30 @@
+import { FieldErrorProps, FormContextType, RJSFSchema, StrictRJSFSchema, errorId } from '@rjsf/utils';
+import ListGroup from 'react-bootstrap/ListGroup';
+
+/** The `FieldErrorTemplate` component renders the errors local to the particular field
+ *
+ * @param props - The `FieldErrorProps` for the errors being rendered
+ */
+export default function FieldErrorTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: FieldErrorProps<T, S, F>) {
+  const { errors = [], idSchema } = props;
+  if (errors.length === 0) {
+    return null;
+  }
+  const id = errorId<T>(idSchema);
+
+  return (
+    <ListGroup as='ul' id={id}>
+      {errors.map((error, i) => {
+        return (
+          <ListGroup.Item as='li' key={i} className='border-0 m-0 p-0'>
+            <small className='m-0 text-danger'>{error}</small>
+          </ListGroup.Item>
+        );
+      })}
+    </ListGroup>
+  );
+}

package/src/FieldErrorTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './FieldErrorTemplate';
+export * from './FieldErrorTemplate';

package/src/FieldHelpTemplate/FieldHelpTemplate.tsx

@@ -0,0 +1,23 @@
+import { FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema, helpId } from '@rjsf/utils';
+import Form from 'react-bootstrap/Form';
+
+/** The `FieldHelpTemplate` component renders any help desired for a field
+ *
+ * @param props - The `FieldHelpProps` to be rendered
+ */
+export default function FieldHelpTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: FieldHelpProps<T, S, F>) {
+  const { idSchema, help, hasErrors } = props;
+  if (!help) {
+    return null;
+  }
+  const id = helpId<T>(idSchema);
+  return (
+    <Form.Text className={hasErrors ? 'text-danger' : 'text-muted'} id={id}>
+      {help}
+    </Form.Text>
+  );
+}

package/src/FieldHelpTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './FieldHelpTemplate';
+export * from './FieldHelpTemplate';

package/src/FieldTemplate/FieldTemplate.tsx

@@ -0,0 +1,77 @@
+import {
+  FieldTemplateProps,
+  FormContextType,
+  getTemplate,
+  getUiOptions,
+  RJSFSchema,
+  StrictRJSFSchema,
+} from '@rjsf/utils';
+import Form from 'react-bootstrap/Form';
+
+export default function FieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({
+  id,
+  children,
+  displayLabel,
+  rawErrors = [],
+  errors,
+  help,
+  description,
+  rawDescription,
+  classNames,
+  style,
+  disabled,
+  label,
+  hidden,
+  onDropPropertyClick,
+  onKeyChange,
+  readonly,
+  required,
+  schema,
+  uiSchema,
+  registry,
+}: FieldTemplateProps<T, S, F>) {
+  const uiOptions = getUiOptions(uiSchema);
+  const WrapIfAdditionalTemplate = getTemplate<'WrapIfAdditionalTemplate', T, S, F>(
+    'WrapIfAdditionalTemplate',
+    registry,
+    uiOptions
+  );
+  if (hidden) {
+    return <div className='hidden'>{children}</div>;
+  }
+  return (
+    <WrapIfAdditionalTemplate
+      classNames={classNames}
+      style={style}
+      disabled={disabled}
+      id={id}
+      label={label}
+      onDropPropertyClick={onDropPropertyClick}
+      onKeyChange={onKeyChange}
+      readonly={readonly}
+      required={required}
+      schema={schema}
+      uiSchema={uiSchema}
+      registry={registry}
+    >
+      <Form.Group>
+        {displayLabel && (
+          <Form.Label htmlFor={id} className={rawErrors.length > 0 ? 'text-danger' : ''}>
+            {label}
+            {required ? '*' : null}
+          </Form.Label>
+        )}
+        {children}
+        {displayLabel && rawDescription && (
+          <Form.Text className={rawErrors.length > 0 ? 'text-danger' : 'text-muted'}>{description}</Form.Text>
+        )}
+        {errors}
+        {help}
+      </Form.Group>
+    </WrapIfAdditionalTemplate>
+  );
+}

package/src/FieldTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './FieldTemplate';
+export * from './FieldTemplate';

package/src/Form/Form.tsx

@@ -0,0 +1,15 @@
+import { ComponentType } from 'react';
+
+import { withTheme, FormProps } from '@rjsf/core';
+import { generateTheme } from '../Theme';
+import { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+export function generateForm<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(): ComponentType<FormProps<T, S, F>> {
+  return withTheme<T, S, F>(generateTheme<T, S, F>());
+}
+
+export default generateForm();

package/src/Form/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Form';
+export * from './Form';

package/src/IconButton/IconButton.tsx

@@ -0,0 +1,62 @@
+import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+import Button, { ButtonProps } from 'react-bootstrap/Button';
+import { IoIosCopy } from '@react-icons/all-files/io/IoIosCopy';
+import { IoIosRemove } from '@react-icons/all-files/io/IoIosRemove';
+import { AiOutlineArrowUp } from '@react-icons/all-files/ai/AiOutlineArrowUp';
+import { AiOutlineArrowDown } from '@react-icons/all-files/ai/AiOutlineArrowDown';
+
+export default function IconButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: IconButtonProps<T, S, F> & ButtonProps
+) {
+  const { icon, iconType, className, uiSchema, registry, ...otherProps } = props;
+  return (
+    <Button {...otherProps} variant={props.variant || 'light'} size='sm'>
+      {icon}
+    </Button>
+  );
+}
+
+export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: IconButtonProps<T, S, F>
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return <IconButton title={translateString(TranslatableString.CopyButton)} {...props} icon={<IoIosCopy />} />;
+}
+
+export function MoveDownButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: IconButtonProps<T, S, F>
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return (
+    <IconButton title={translateString(TranslatableString.MoveDownButton)} {...props} icon={<AiOutlineArrowDown />} />
+  );
+}
+
+export function MoveUpButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: IconButtonProps<T, S, F>
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return <IconButton title={translateString(TranslatableString.MoveUpButton)} {...props} icon={<AiOutlineArrowUp />} />;
+}
+
+export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: IconButtonProps<T, S, F>
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return (
+    <IconButton
+      title={translateString(TranslatableString.RemoveButton)}
+      {...props}
+      variant='danger'
+      icon={<IoIosRemove />}
+    />
+  );
+}

package/src/IconButton/index.ts

@@ -0,0 +1,2 @@
+export { default } from './IconButton';
+export * from './IconButton';

package/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -0,0 +1,89 @@
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import Container from 'react-bootstrap/Container';
+
+import {
+  canExpand,
+  descriptionId,
+  FormContextType,
+  getTemplate,
+  getUiOptions,
+  ObjectFieldTemplateProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+  titleId,
+} from '@rjsf/utils';
+
+export default function ObjectFieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>({
+  description,
+  title,
+  properties,
+  required,
+  uiSchema,
+  idSchema,
+  schema,
+  formData,
+  onAddClick,
+  disabled,
+  readonly,
+  registry,
+}: ObjectFieldTemplateProps<T, S, F>) {
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const TitleFieldTemplate = getTemplate<'TitleFieldTemplate', T, S, F>('TitleFieldTemplate', registry, uiOptions);
+  const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
+    'DescriptionFieldTemplate',
+    registry,
+    uiOptions
+  );
+  // Button templates are not overridden in the uiSchema
+  const {
+    ButtonTemplates: { AddButton },
+  } = registry.templates;
+  return (
+    <>
+      {title && (
+        <TitleFieldTemplate
+          id={titleId<T>(idSchema)}
+          title={title}
+          required={required}
+          schema={schema}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      {description && (
+        <DescriptionFieldTemplate
+          id={descriptionId<T>(idSchema)}
+          description={description}
+          schema={schema}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      <Container fluid className='p-0'>
+        {properties.map((element: any, index: number) => (
+          <Row key={index} style={{ marginBottom: '10px' }} className={element.hidden ? 'd-none' : undefined}>
+            <Col xs={12}> {element.content}</Col>
+          </Row>
+        ))}
+        {canExpand(schema, uiSchema, formData) ? (
+          <Row>
+            <Col xs={{ offset: 9, span: 3 }} className='py-4'>
+              <AddButton
+                onClick={onAddClick(schema)}
+                disabled={disabled || readonly}
+                className='object-property-expand'
+                uiSchema={uiSchema}
+                registry={registry}
+              />
+            </Col>
+          </Row>
+        ) : null}
+      </Container>
+    </>
+  );
+}

package/src/ObjectFieldTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ObjectFieldTemplate';
+export * from './ObjectFieldTemplate';

package/src/RadioWidget/RadioWidget.tsx

@@ -0,0 +1,65 @@
+import { ChangeEvent, FocusEvent } from 'react';
+import Form from 'react-bootstrap/Form';
+import {
+  ariaDescribedByIds,
+  enumOptionsIsSelected,
+  enumOptionsValueForIndex,
+  optionId,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+} from '@rjsf/utils';
+
+export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  id,
+  options,
+  value,
+  required,
+  disabled,
+  readonly,
+  onChange,
+  onBlur,
+  onFocus,
+}: WidgetProps<T, S, F>) {
+  const { enumOptions, enumDisabled, emptyValue } = options;
+
+  const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
+    onChange(enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
+  const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
+    onBlur(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
+  const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
+    onFocus(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
+
+  const inline = Boolean(options && options.inline);
+
+  return (
+    <Form.Group className='mb-0'>
+      {Array.isArray(enumOptions) &&
+        enumOptions.map((option, index) => {
+          const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+          const checked = enumOptionsIsSelected<S>(option.value, value);
+
+          const radio = (
+            <Form.Check
+              inline={inline}
+              label={option.label}
+              id={optionId(id, index)}
+              key={index}
+              name={id}
+              type='radio'
+              disabled={disabled || itemDisabled || readonly}
+              checked={checked}
+              required={required}
+              value={String(index)}
+              onChange={_onChange}
+              onBlur={_onBlur}
+              onFocus={_onFocus}
+              aria-describedby={ariaDescribedByIds<T>(id)}
+            />
+          );
+          return radio;
+        })}
+    </Form.Group>
+  );
+}

package/src/RadioWidget/index.ts

@@ -0,0 +1,2 @@
+export { default } from './RadioWidget';
+export * from './RadioWidget';

package/src/RangeWidget/RangeWidget.tsx

@@ -0,0 +1,31 @@
+import { FormContextType, rangeSpec, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { ChangeEvent, FocusEvent } from 'react';
+import FormRange from 'react-bootstrap/FormRange';
+
+export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: WidgetProps<T, S, F>
+) {
+  const { id, value, disabled, onChange, onBlur, onFocus, schema } = props;
+
+  const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onChange(value);
+  const _onBlur = ({ target: { value } }: FocusEvent<HTMLInputElement>) => onBlur(id, value);
+  const _onFocus = ({ target: { value } }: FocusEvent<HTMLInputElement>) => onFocus(id, value);
+
+  const rangeProps = {
+    value,
+    id,
+    name: id,
+    disabled,
+    onChange: _onChange,
+    onBlur: _onBlur,
+    onFocus: _onFocus,
+    ...rangeSpec<S>(schema),
+  };
+
+  return (
+    <>
+      <FormRange {...rangeProps} />
+      <span className='range-view'>{value}</span>
+    </>
+  );
+}

package/src/RangeWidget/index.ts

@@ -0,0 +1,2 @@
+export { default } from './RangeWidget';
+export * from './RangeWidget';