20673325228

Committed 03 Jan 2026 06:09AM UTC coverage: 72.451% (+20.9%) from 51.563%

Build # 20673325228

Build Type

push

github

Committed by

raymond-lam

Commit Message

Refactor codebase: modernize stack, reorganize structure, and improve consistency

Stack modernization:
- Upgrade from React 18 to React 19 with automatic JSX runtime
- Replace Bootstrap/reactstrap with Material-UI (MUI) v7
- Replace @hello-pangea/dnd with @dnd-kit for drag-and-drop
- Replace react-jss with MUI styling system
- Replace Enzyme with React Testing Library
- Migrate from Rollup to tsup for library bundling
- Migrate example app from Next.js to Vite
- Update TypeScript to ES2022 with bundler module resolution
- Modernize ESLint to flat config format

Code changes:
- Convert all class components to functional components with hooks
- Improve type safety: replace 'any' with JsonSchema/UiSchema types
- Convert all interfaces to types
- Remove redundant nested containers
- Add SortableItem component with drag handle support
- Improve memoization with useMemo and useCallback
- Restructure example app to follow standard Vite directory structure
- Export types from library and update example app imports (Fixes #604)
- Reorganize component files: move FBCheckbox and PlaceholderInput to formBuilder root
- Standardize label casing to Title Case throughout (Default Value, Column Size, Dependencies, etc.)
- Optimize re-renders by fixing dependency arrays (remove setState from deps, fix CardModal useEffect, fix hideAddButton)
- Remove unnecessary container elements and standardize fragment syntax (React.Fragment -> <>)
- Update dependencies to latest versions and clean up code

Documentation:
- Update Contributing.md: replace Enzyme with React Testing Library, fix types.js to types.ts, remove outdated Travis CI references, restore coveralls.io reference
- Update all documentation and examples

Issues addressed:
- #369: Array field cursor loses focus when typing
- #467: Description field lost when changing Input Type
- #476: Unreachable code in ValueSelector
- #478: False positive unit tests and validator issues
- #412: Alert not exported from reactstrap... (continued)

Run Details

788 of 1120 branches covered (70.36%)

Branch coverage included in aggregate %.

357 of 490 new or added lines in 24 files covered. (72.86%)

8 existing lines in 1 file now uncovered.

882 of 1185 relevant lines covered (74.43%)

22.68 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

56.67

/src/formBuilder/defaults/arrayInputs.tsx

import React, { useState } from 'react';
import TextField from '@mui/material/TextField';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import {
  excludeKeys,
  generateElementComponentsFromSchemas,
  generateCategoryHash,
} from '../utils';
import Card from '../Card';
import Section from '../Section';
import FBCheckbox from '../FBCheckbox';
import shortAnswerInputs from './shortAnswerInputs';
import longAnswerInputs from './longAnswerInputs';
import numberInputs from './numberInputs';
import defaultInputs from './defaultInputs';
import { getRandomId } from '../utils';
import type {
  FormInput,
  CardComponentType,
  CardComponentPropsType,
} from '../types';

// specify the inputs required for a string type object
const CardArrayParameterInputs: CardComponentType = ({
  parameters,
  onChange,
}) => {
  return (
    <Box>
      <Typography variant='subtitle2' fontWeight='bold'>
        Minimum Items
      </Typography>
      <TextField
        value={parameters.minItems || ''}
        placeholder='ex: 2'
        type='number'
        onChange={(ev) => {
          onChange({
            ...parameters,
            minItems: parseInt(ev.target.value, 10),
          });
        }}
        size='small'
        fullWidth
        sx={{ mb: 2 }}
      />
      <Typography variant='subtitle2' fontWeight='bold'>
        Maximum Items
      </Typography>
      <TextField
        value={parameters.maxItems || ''}
        placeholder='ex: 2'
        type='number'
        onChange={(ev) => {
          onChange({
            ...parameters,
            maxItems: parseInt(ev.target.value, 10),
          });
        }}
        size='small'
        fullWidth
        sx={{ mb: 2 }}
      />
    </Box>
  );
};

const InnerCard: CardComponentType = ({ parameters, onChange, mods }) => {
  const [elementId] = useState(getRandomId);
  const newDataProps: { [key: string]: any } = {};
  const newUiProps: { [key: string]: any } = {};
  const allFormInputs = excludeKeys(
    Object.assign({}, defaultFormInputs, (mods && mods.customFormInputs) || {}),
    mods && mods.deactivatedFormInputs,
  );

  // parse components into data and ui relevant pieces
  Object.keys(parameters).forEach((propName: string) => {
    if (propName.startsWith('ui:*')) {
      newUiProps[propName.substring(4)] =
        parameters[propName as keyof CardComponentPropsType];
    } else if (propName.startsWith('ui:')) {
      newUiProps[propName] =
        parameters[propName as keyof CardComponentPropsType];
    } else if (!['name', 'required'].includes(propName)) {
      newDataProps[propName] =
        parameters[propName as keyof CardComponentPropsType];
    }
  });

  const definitionData = parameters.definitionData
    ? parameters.definitionData
    : {};
  const definitionUi = parameters.definitionUi ? parameters.definitionUi : {};
  const [cardOpen, setCardOpen] = React.useState(false);
  if (parameters.type !== 'array') {
    return (
      <Typography variant='body2' color='error'>
        Not an array
      </Typography>
    );
  }
  return (
    <>
      <FBCheckbox
        onChangeValue={() => {
          if (newDataProps.items.type === 'object') {
            onChange({
              ...parameters,
              items: {
                ...newDataProps.items,
                type: 'string',
              },
            });
          } else {
            onChange({
              ...parameters,
              items: {
                ...newDataProps.items,
                type: 'object',
              },
            });
          }
        }}
        isChecked={newDataProps.items.type === 'object'}
        label='Section'
      />
      {generateElementComponentsFromSchemas({
        schemaData: { properties: { item: newDataProps.items } },
        uiSchemaData: { item: newUiProps.items },
        onChange: (schema, uischema) => {
          onChange({
            ...parameters,
            items: schema.properties.item,
            'ui:*items': uischema.item || {},
          });
        },
        path: elementId,
        definitionData,
        definitionUi,
        hideKey: true,
        cardOpenArray: [cardOpen],
        setCardOpenArray: (updater) => {
          const newArr =
            typeof updater === 'function' ? updater([cardOpen]) : updater;
          setCardOpen(newArr[0]);
        },
        allFormInputs,
        mods,
        categoryHash: generateCategoryHash(allFormInputs),
        Card: (props) => <Card {...props} showObjectNameInput={false} />,
        Section,
      })}
    </>
  );
};

function getInnerCardComponent(): CardComponentType {
  return InnerCard;
}

const defaultFormInputs: { [key: string]: FormInput } = {
  ...defaultInputs,
  ...shortAnswerInputs,
  ...longAnswerInputs,
  ...numberInputs,
};
defaultFormInputs.array = {
  displayName: 'Array',
  matchIf: [
    {
      types: ['array'],
    },
  ],
  defaultDataSchema: {
    items: { type: 'string' },
  },
  defaultUiSchema: {},
  type: 'array',
  cardBody: getInnerCardComponent(),
  modalBody: CardArrayParameterInputs,
};

const ArrayInputs: { [key: string]: FormInput } = {
  array: {
    displayName: 'Array',
    matchIf: [
      {
        types: ['array'],
      },
    ],
    defaultDataSchema: {
      items: { type: 'string' },
    },
    defaultUiSchema: {},
    type: 'array',
    cardBody: getInnerCardComponent(),
    modalBody: CardArrayParameterInputs,
  },
};

export default ArrayInputs;

1	import React, { useState } from 'react';
2	import TextField from '@mui/material/TextField';
3	import Box from '@mui/material/Box';
4	import Typography from '@mui/material/Typography';
5	import {
6	excludeKeys,
7	generateElementComponentsFromSchemas,
8	generateCategoryHash,
9	} from '../utils';
10	import Card from '../Card';
11	import Section from '../Section';
12	import FBCheckbox from '../FBCheckbox';
13	import shortAnswerInputs from './shortAnswerInputs';
14	import longAnswerInputs from './longAnswerInputs';
15	import numberInputs from './numberInputs';
16	import defaultInputs from './defaultInputs';
17	import { getRandomId } from '../utils';
18	import type {
19	FormInput,
20	CardComponentType,
21	CardComponentPropsType,
22	} from '../types';
23
24	// specify the inputs required for a string type object
25	const CardArrayParameterInputs: CardComponentType = ({	7✔
26	parameters,
27	onChange,
28	}) => {
29	return (	×
30	<Box>
31	<Typography variant='subtitle2' fontWeight='bold'>
32	Minimum Items
33	</Typography>
34	<TextField
35	value={parameters.minItems \|\| ''}	×
36	placeholder='ex: 2'
37	type='number'
38	onChange={(ev) => {
39	onChange({	×
40	...parameters,
41	minItems: parseInt(ev.target.value, 10),
42	});
43	}}
44	size='small'
45	fullWidth
46	sx={{ mb: 2 }}
47	/>
48	<Typography variant='subtitle2' fontWeight='bold'>
49	Maximum Items
50	</Typography>
51	<TextField
52	value={parameters.maxItems \|\| ''}	×
53	placeholder='ex: 2'
54	type='number'
55	onChange={(ev) => {
56	onChange({	×
57	...parameters,
58	maxItems: parseInt(ev.target.value, 10),
59	});
60	}}
61	size='small'
62	fullWidth
63	sx={{ mb: 2 }}
64	/>
65	</Box>
66	);
67	};
68
69	const InnerCard: CardComponentType = ({ parameters, onChange, mods }) => {	7✔
70	const [elementId] = useState(getRandomId);	1✔
71	const newDataProps: { [key: string]: any } = {};	1✔
72	const newUiProps: { [key: string]: any } = {};	1✔
73	const allFormInputs = excludeKeys(	1✔
74	Object.assign({}, defaultFormInputs, (mods && mods.customFormInputs) \|\| {}),	2!
75	mods && mods.deactivatedFormInputs,	2✔
76	);
77
78	// parse components into data and ui relevant pieces
79	Object.keys(parameters).forEach((propName: string) => {	1✔
80	if (propName.startsWith('ui:*')) {	15✔
81	newUiProps[propName.substring(4)] =	1✔
82	parameters[propName as keyof CardComponentPropsType];
83	} else if (propName.startsWith('ui:')) {	14!
84	newUiProps[propName] =	×
85	parameters[propName as keyof CardComponentPropsType];
86	} else if (!['name', 'required'].includes(propName)) {	14✔
87	newDataProps[propName] =	12✔
88	parameters[propName as keyof CardComponentPropsType];
89	}
90	});
91
92	const definitionData = parameters.definitionData	1!
93	? parameters.definitionData
94	: {};
95	const definitionUi = parameters.definitionUi ? parameters.definitionUi : {};	1!
96	const [cardOpen, setCardOpen] = React.useState(false);	1✔
97	if (parameters.type !== 'array') {	1!
NEW 98	return (	×
99	<Typography variant='body2' color='error'>
100	Not an array
101	</Typography>
102	);
103	}
104	return (	1✔
105	<>
106	<FBCheckbox
107	onChangeValue={() => {
108	if (newDataProps.items.type === 'object') {	×
109	onChange({	×
110	...parameters,
111	items: {
112	...newDataProps.items,
113	type: 'string',
114	},
115	});
116	} else {
117	onChange({	×
118	...parameters,
119	items: {
120	...newDataProps.items,
121	type: 'object',
122	},
123	});
124	}
125	}}
126	isChecked={newDataProps.items.type === 'object'}
127	label='Section'
128	/>
129	{generateElementComponentsFromSchemas({
130	schemaData: { properties: { item: newDataProps.items } },
131	uiSchemaData: { item: newUiProps.items },
132	onChange: (schema, uischema) => {
133	onChange({	×
134	...parameters,
135	items: schema.properties.item,
136	'ui:*items': uischema.item \|\| {},	×
137	});
138	},
139	path: elementId,
140	definitionData,
141	definitionUi,
142	hideKey: true,
143	cardOpenArray: [cardOpen],
144	setCardOpenArray: (updater) => {
145	const newArr =
NEW 146	typeof updater === 'function' ? updater([cardOpen]) : updater;	×
NEW 147	setCardOpen(newArr[0]);	×
148	},
149	allFormInputs,
150	mods,
151	categoryHash: generateCategoryHash(allFormInputs),
152	Card: (props) => <Card {...props} showObjectNameInput={false} />,	1✔
153	Section,
154	})}
155	</>
156	);
157	};
158
159	function getInnerCardComponent(): CardComponentType {
160	return InnerCard;	14✔
161	}
162
163	const defaultFormInputs: { [key: string]: FormInput } = {	7✔
164	...defaultInputs,
165	...shortAnswerInputs,
166	...longAnswerInputs,
167	...numberInputs,
168	};
169	defaultFormInputs.array = {	7✔
170	displayName: 'Array',
171	matchIf: [
172	{
173	types: ['array'],
174	},
175	],
176	defaultDataSchema: {
177	items: { type: 'string' },
178	},
179	defaultUiSchema: {},
180	type: 'array',
181	cardBody: getInnerCardComponent(),
182	modalBody: CardArrayParameterInputs,
183	};
184
185	const ArrayInputs: { [key: string]: FormInput } = {	7✔
186	array: {
187	displayName: 'Array',
188	matchIf: [
189	{
190	types: ['array'],
191	},
192	],
193	defaultDataSchema: {
194	items: { type: 'string' },
195	},
196	defaultUiSchema: {},
197	type: 'array',
198	cardBody: getInnerCardComponent(),
199	modalBody: CardArrayParameterInputs,
200	},
201	};
202
203	export default ArrayInputs;

ginkgobioworks / react-json-schema-form-builder / 20673325228

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous