@rjsf/fluentui-rc 5.14.1

package/src/Templates/Templates.ts

@@ -0,0 +1,45 @@
+import ArrayFieldItemTemplate from '../ArrayFieldItemTemplate';
+import AddButton from '../AddButton';
+import ArrayFieldTemplate from '../ArrayFieldTemplate';
+import BaseInputTemplate from '../BaseInputTemplate/BaseInputTemplate';
+import DescriptionField from '../DescriptionField';
+import ErrorList from '../ErrorList';
+import { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } from '../IconButton';
+import FieldErrorTemplate from '../FieldErrorTemplate';
+import FieldHelpTemplate from '../FieldHelpTemplate';
+import FieldTemplate from '../FieldTemplate';
+import ObjectFieldTemplate from '../ObjectFieldTemplate';
+import SubmitButton from '../SubmitButton';
+import TitleField from '../TitleField';
+import WrapIfAdditionalTemplate from '../WrapIfAdditionalTemplate';
+import { FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } from '@rjsf/utils';
+
+export function generateTemplates<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(): Partial<TemplatesType<T, S, F>> {
+  return {
+    ArrayFieldItemTemplate,
+    ArrayFieldTemplate,
+    BaseInputTemplate,
+    ButtonTemplates: {
+      CopyButton,
+      AddButton,
+      MoveDownButton,
+      MoveUpButton,
+      RemoveButton,
+      SubmitButton,
+    },
+    DescriptionFieldTemplate: DescriptionField,
+    ErrorListTemplate: ErrorList,
+    FieldErrorTemplate,
+    FieldHelpTemplate,
+    FieldTemplate,
+    ObjectFieldTemplate,
+    TitleFieldTemplate: TitleField,
+    WrapIfAdditionalTemplate,
+  };
+}
+
+export default generateTemplates();

package/src/Templates/index.ts

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

package/src/TextareaWidget/TextareaWidget.tsx

@@ -0,0 +1,81 @@
+import { Label, Textarea, makeStyles } from '@fluentui/react-components';
+import {
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+  ariaDescribedByIds,
+  labelValue,
+} from '@rjsf/utils';
+import { ChangeEvent, FocusEvent } from 'react';
+
+const useStyles = makeStyles({
+  label: {
+    paddingTop: '2px',
+    paddingBottom: '2px',
+    marginBottom: '2px',
+  },
+});
+
+/** The `TextareaWidget` is a widget for rendering input fields as textarea.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function TextareaWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: WidgetProps<T, S, F>) {
+  const {
+    id,
+    placeholder,
+    required,
+    readonly,
+    disabled,
+    value,
+    label,
+    hideLabel,
+    onChange,
+    onChangeOverride,
+    onBlur,
+    onFocus,
+    autofocus,
+    options,
+    schema,
+  } = props;
+  const classes = useStyles();
+  const _onChange = ({ target: { value } }: ChangeEvent<HTMLTextAreaElement>) =>
+    onChange(value === '' ? options.emptyValue : value);
+  const _onBlur = ({ target: { value } }: FocusEvent<HTMLTextAreaElement>) => onBlur(id, value);
+  const _onFocus = ({ target: { value } }: FocusEvent<HTMLTextAreaElement>) => onFocus(id, value);
+
+  let rows: string | number = 5;
+  if (typeof options.rows === 'string' || typeof options.rows === 'number') {
+    rows = options.rows;
+  }
+
+  return (
+    <>
+      {labelValue(
+        <Label htmlFor={id} required={required} disabled={disabled} className={classes.label}>
+          {label}
+        </Label>,
+        hideLabel
+      )}
+      <Textarea
+        id={id}
+        name={id}
+        placeholder={placeholder}
+        autoFocus={autofocus}
+        required={required}
+        disabled={disabled || readonly}
+        value={value || value === 0 ? value : ''}
+        onChange={onChangeOverride || _onChange}
+        onFocus={_onFocus}
+        onBlur={_onBlur}
+        aria-describedby={ariaDescribedByIds<T>(id, !!schema.examples)}
+        rows={rows}
+      />
+    </>
+  );
+}

package/src/TextareaWidget/index.ts

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

package/src/Theme/Theme.ts

@@ -0,0 +1,18 @@
+import { ThemeProps } from '@rjsf/core';
+
+import { generateTemplates } from '../Templates';
+import { generateWidgets } from '../Widgets';
+import { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+export function generateTheme<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(): ThemeProps<T, S, F> {
+  return {
+    templates: generateTemplates<T, S, F>(),
+    widgets: generateWidgets<T, S, F>(),
+  };
+}
+
+export default generateTheme();

package/src/Theme/index.ts

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

package/src/TitleField/TitleField.tsx

@@ -0,0 +1,28 @@
+import { Text, Divider, makeStyles } from '@fluentui/react-components';
+import { FormContextType, TitleFieldProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+const useStyles = makeStyles({
+  root: {
+    marginTop: '8px',
+    marginBottom: '8px',
+  },
+});
+
+/** The `TitleField` is the template to use to render the title of a field
+ *
+ * @param props - The `TitleFieldProps` for this component
+ */
+export default function TitleField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  id,
+  title,
+}: TitleFieldProps<T, S, F>) {
+  const classes = useStyles();
+  return (
+    <div id={id} className={classes.root}>
+      <Text as='h5' size={600}>
+        {title}
+      </Text>
+      <Divider />
+    </div>
+  );
+}

package/src/TitleField/index.ts

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

package/src/Widgets/Widgets.ts

@@ -0,0 +1,24 @@
+import CheckboxWidget from '../CheckboxWidget/CheckboxWidget';
+import CheckboxesWidget from '../CheckboxesWidget/CheckboxesWidget';
+import RadioWidget from '../RadioWidget/RadioWidget';
+import RangeWidget from '../RangeWidget/RangeWidget';
+import SelectWidget from '../SelectWidget/SelectWidget';
+import TextareaWidget from '../TextareaWidget/TextareaWidget';
+import { FormContextType, RegistryWidgetsType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+export function generateWidgets<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(): RegistryWidgetsType<T, S, F> {
+  return {
+    CheckboxWidget,
+    CheckboxesWidget,
+    RadioWidget,
+    RangeWidget,
+    SelectWidget,
+    TextareaWidget,
+  };
+}
+
+export default generateWidgets();

package/src/Widgets/index.ts

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

package/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -0,0 +1,100 @@
+import { CSSProperties, FocusEvent } from 'react';
+import {
+  ADDITIONAL_PROPERTY_FLAG,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  TranslatableString,
+  WrapIfAdditionalTemplateProps,
+} from '@rjsf/utils';
+import { Field, Input, makeStyles } from '@fluentui/react-components';
+import { Flex } from '@fluentui/react-migration-v0-v9';
+
+const useStyles = makeStyles({
+  input: {
+    width: '100%',
+  },
+  label: {
+    marginBottom: '4px',
+  },
+});
+
+/** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
+ * part of an `additionalProperties` part of a schema.
+ *
+ * @param props - The `WrapIfAdditionalProps` for this component
+ */
+export default function WrapIfAdditionalTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(props: WrapIfAdditionalTemplateProps<T, S, F>) {
+  const {
+    children,
+    classNames,
+    style,
+    disabled,
+    id,
+    label,
+    onDropPropertyClick,
+    onKeyChange,
+    readonly,
+    required,
+    schema,
+    uiSchema,
+    registry,
+  } = props;
+  const { templates, translateString } = registry;
+  const classes = useStyles();
+  // Button templates are not overridden in the uiSchema
+  const { RemoveButton } = templates.ButtonTemplates;
+  const keyLabel = translateString(TranslatableString.KeyLabel, [label]);
+  const additional = ADDITIONAL_PROPERTY_FLAG in schema;
+  const btnStyle: CSSProperties = {
+    flex: 1,
+    paddingLeft: 6,
+    paddingRight: 6,
+    fontWeight: 'bold',
+  };
+
+  if (!additional) {
+    return (
+      <div className={classNames} style={style}>
+        {children}
+      </div>
+    );
+  }
+
+  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) => onKeyChange(target.value);
+  return (
+    <Flex gap='gap.medium' vAlign='center' key={`${id}-key`} className={classNames} style={style}>
+      <div>
+        <Field label={keyLabel} required={required}>
+          <Input
+            required={required}
+            defaultValue={label}
+            disabled={disabled || readonly}
+            id={`${id}-key`}
+            name={`${id}-key`}
+            onBlur={!readonly ? handleBlur : undefined}
+            type='text'
+            input={{
+              className: classes.input,
+            }}
+          />
+        </Field>
+      </div>
+      <div>{children}</div>
+      <div>
+        <RemoveButton
+          iconType='default'
+          style={btnStyle}
+          disabled={disabled || readonly}
+          onClick={onDropPropertyClick(label)}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      </div>
+    </Flex>
+  );
+}

package/src/WrapIfAdditionalTemplate/index.ts

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

package/src/index.ts

@@ -0,0 +1,9 @@
+import FluentForm from './FluentForm';
+
+export { default as Form, generateForm } from './FluentForm';
+export { default as Templates, generateTemplates } from './Templates';
+export { default as Theme, generateTheme } from './Theme';
+export { default as Widgets, generateWidgets } from './Widgets';
+export { __createFluentUIRCFrameProvider } from './FluentUIRCFrameProvider';
+
+export default FluentForm;

package/src/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "include": [
+    "./"
+  ],
+  "compilerOptions": {
+    "rootDir": "./",
+    "outDir": "../lib",
+    "baseUrl": "../",
+    "jsx": "react-jsx",
+    "skipLibCheck": true
+  },
+  "references": [
+    {
+      "path": "../../core"
+    },
+    {
+      "path": "../../utils"
+    },
+    {
+      "path": "../../validator-ajv8"
+    }
+  ]
+}