Publish alpha version 1

- Added custom components as an escape hatch
- Exposed more API

packages/smart-forms-renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aehrc/smart-forms-renderer",
-  "version": "0.44.1",
+  "version": "1.0.0-alpha.1",
   "description": "FHIR Structured Data Captured (SDC) rendering engine for Smart Forms",
   "main": "lib/index.js",
   "scripts": {

packages/smart-forms-renderer/src/components/FormComponents/ItemParts/ItemLabelText.tsx

@@ -25,6 +25,7 @@ import Typography from '@mui/material/Typography';
 import useDisplayCqfAndCalculatedExpression from '../../../hooks/useDisplayCqfAndCalculatedExpression';
 import { structuredDataCapture } from 'fhir-sdc-helpers';
 import { default as styleParse } from 'style-to-js';
+import { useRendererStylingStore } from '../../../stores/rendererStylingStore';
 
 interface ItemLabelTextProps {
   qItem: QuestionnaireItem;
@@ -34,6 +35,8 @@ interface ItemLabelTextProps {
 const ItemLabelText = memo(function ItemLabelText(props: ItemLabelTextProps) {
   const { qItem, readOnly } = props;
 
+  const itemLabelFontWeight = useRendererStylingStore.use.itemLabelFontWeight();
+
   let labelText = qItem.text ?? '';
 
   // Use calculatedExpressionString if available
@@ -74,9 +77,14 @@ const ItemLabelText = memo(function ItemLabelText(props: ItemLabelTextProps) {
     return <>{labelText}</>;
   }
 
+  const textFontWeight = itemLabelFontWeight != 'default' ? itemLabelFontWeight : 'normal';
+
   // parse regular text
   return (
-    <Typography color={readOnly ? 'text.disabled' : 'text.primary'} sx={{ mt: 0.25 }}>
+    <Typography
+      color={readOnly ? 'text.disabled' : 'text.primary'}
+      fontWeight={itemLabelFontWeight ? itemLabelFontWeight : 'normal'}
+      sx={{ mt: 0.25 }}>
       {labelText}
     </Typography>
   );

packages/smart-forms-renderer/src/components/FormComponents/ItemParts/ItemLabelWrapper.tsx

@@ -24,7 +24,7 @@ import ItemLabelText from './ItemLabelText';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
-import Iconify from '../../Iconify/Iconify';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 
 interface LabelWrapperProps {
   qItem: QuestionnaireItem;
@@ -55,19 +55,21 @@ function ItemLabelWrapper(props: LabelWrapperProps) {
           }
         }}>
         <span>
-          <Box display="flex" columnGap={0.4} justifyContent="space-between" alignItems="center">
+          <Box position="relative">
             {required ? (
-              <Typography color="red" sx={{ ml: -1.15 }}>
+              <Typography
+                color="red"
+                sx={{ position: 'absolute', top: 0, left: -8 }} // Adjust top and left values as needed
+              >
                 *
               </Typography>
             ) : null}
-            <ItemLabelText qItem={qItem} readOnly={readOnly} />
-            {displayFlyover !== '' ? (
-              <Iconify
-                icon="mdi:information-outline"
-                sx={{ height: 16, width: 16, mt: 0.25, ml: 0.25, color: 'text.secondary' }}
-              />
-            ) : null}
+            <Box display="flex" columnGap={0.5} justifyContent="space-between" alignItems="center">
+              <ItemLabelText qItem={qItem} readOnly={readOnly} />
+              {displayFlyover !== '' ? (
+                <InfoOutlinedIcon sx={{ color: 'text.secondary' }} fontSize="small" />
+              ) : null}
+            </Box>
           </Box>
         </span>
       </Tooltip>

packages/smart-forms-renderer/src/components/FormComponents/ItemParts/index.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2024 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { default as ItemFieldGrid } from './ItemFieldGrid';

packages/smart-forms-renderer/src/components/FormComponents/SingleItem/SingleItemSwitcher.tsx

@@ -41,6 +41,7 @@ import IntegerItem from '../IntegerItem/IntegerItem';
 import AttachmentItem from '../AttachmentItem/AttachmentItem';
 import CustomDateTimeItem from '../DateTimeItems/CustomDateTimeItem/CustomDateTimeItem';
 import QuantityItem from '../QuantityItem/QuantityItem';
+import { useQuestionnaireStore } from '../../../stores';
 
 interface SingleItemSwitcherProps
   extends PropsWithQrItemChangeHandler,
@@ -56,6 +57,25 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
   const { qItem, qrItem, isRepeated, isTabled, showMinimalView, parentIsReadOnly, onQrItemChange } =
     props;
 
+  const customComponents = useQuestionnaireStore.use.customComponents();
+  const CustomComponent = customComponents[qItem.linkId];
+
+  // If a custom component is defined for this item, render it
+  // Don't get too strict with the checks for now
+  if (CustomComponent && typeof CustomComponent === 'function') {
+    return (
+      <CustomComponent
+        qItem={qItem}
+        qrItem={qrItem}
+        isRepeated={isRepeated}
+        isTabled={isTabled}
+        parentIsReadOnly={parentIsReadOnly}
+        onQrItemChange={onQrItemChange}
+      />
+    );
+  }
+
+  // Otherwise, render the default form component based on the item type
   switch (qItem.type) {
     case 'display':
       return <DisplayItem qItem={qItem} />;

packages/smart-forms-renderer/src/components/FormComponents/StringItem/index.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2024 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { default as StringField } from './StringField';

packages/smart-forms-renderer/src/components/FormComponents/index.ts

@@ -21,3 +21,7 @@ export { RepeatGroup } from './RepeatGroup';
 export { GroupTable } from './Tables';
 export { GridGroup } from './GridGroup';
 export { parseFhirDateToDisplayDate } from './DateTimeItems';
+export { ItemFieldGrid } from './ItemParts';
+
+// item type components
+export { StringField } from './StringItem';

packages/smart-forms-renderer/src/components/index.ts

@@ -23,5 +23,10 @@ export {
   RepeatGroup,
   GroupTable,
   GridGroup,
-  parseFhirDateToDisplayDate
+  parseFhirDateToDisplayDate,
+  ItemFieldGrid,
+  StringField
 } from './FormComponents';
+
+// Styled MUI components
+export { FullWidthFormComponentBox } from './Box.styles';

packages/smart-forms-renderer/src/hooks/index.ts

@@ -1,3 +1,9 @@
 export { default as useHidden } from './useHidden';
+export { default as useReadOnly } from './useReadOnly';
 export { default as useBuildForm } from './useBuildForm';
 export { default as useRendererQueryClient } from './useRendererQueryClient';
+export { default as useRenderingExtensions } from './useRenderingExtensions';
+export { default as useValidationFeedback } from './useValidationFeedback';
+
+// CalculatedExpression hooks
+export { default as useStringCalculatedExpression } from './useStringCalculatedExpression';