@nualang/nualang-ui-components 0.1.1393 → 0.1.1395

package/README.md

@@ -3,19 +3,26 @@ This is the ui-components repository for the Nualang product. The components
 are developed, reviewed and tested with storybook and a library is then published
 to `npm` and consumed from there by nualang web apps.
 
+## Package Manager
+**NB** `pnpm` is used as the package manager in this repository. The principal reason
+for this is its greater flexibility than `npm` in respect to pacakeg minimum age options.
+
+Use `pnpm install`, `pnpm run <script>`, and `pnpm add <package>` instead of npm equivalents.
+CI uses `pnpm install --frozen-lockfile`.
+
 ## Getting Started
-Clone this repository and then execute `npm install`. `npm start` will start
+Clone this repository and then execute `pnpm install`. `pnpm start` will start
 [storybook](https://storybook.js.org) and allow you to browse the available components.
 
 ## Develop
 ```bash
-npm start
+pnpm start
 ```
 
 ## Create Local Package
 Compile and pack (This will create a '.tgz' file):
 ```bash
-npm run localpack
+pnpm run localpack
 ```
 
 Install package (Inside webapp):
@@ -25,62 +32,91 @@ npm i ../ui-components/nualang-ui-components-0.1.XXX.tgz
 
 If webapp is caching previous versions (Add a character to the end of the .tgz, e.g 'a') and install again:
 ```bash
-yarn add ../ui-components/nualang-ui-components-0.1.XXXa.tgz
+pnpm add ../ui-components/nualang-ui-components-0.1.XXXa.tgz
 ```
 
 ## Publish to npm
-Make sure that the version number has been updayed in package.json.
+Normall, you should just update the version number in package.json and commit
+your updates. When you updated are merged to main, gitlab CI/CD will add a
+manual publish task. Running the manual task will publish to npm and tag
+the version in gitlab.
+
+### Manual Publish
+Manual publishing is not normally necessary and is discouraged.
+
+Make sure that the version number has been updated in package.json.
 Ensure that you have committed the latest version to git.
 Execute:-
 ```bash
-npm run postversion
+pnpm run version
 ```
-npm will complain if you try to re-publish a previously used version number.
+pnpm will complain if you try to re-publish a previously used version number.
 
 
 ## Additional Scripts
 In the project directory, you can run:
 
-### `npm run storybook`
-Runs the app in the development mode.<br />
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+### `pnpm run storybook`
+Runs storybook in development mode.<br />
+Open [http://localhost:9009](http://localhost:9009) to view it in the browser.
 
 The page will reload if you make edits.<br />
 You should also see any lint errors in the console.
 
-### `npm run test`
+### `pnpm run test`
 Launches the test runner in interactive watch mode.<br />
 See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
 
-### `npm run lint`
+### `pnpm run lint`
 Check for any lint errors or warnings.
 
-### `npm run compile`
+### `pnpm run compile`
 Run the babel compiler to compile es6 to js.
 
-### `npm run postversion`
-Publish a new version of the package to npm. npm will complain
-
-### `npm run chromatic`
-Publish a new version of the package to https://www.chromatic.com/ 
+### `pnpm run version`
+Publish a new version of the package to npm.
 
 ## Testing & Coverage
 
 Run unit tests with Vitest in watch mode:
 
 ```bash
-npm run vitest
+pnpm run vitest
 ```
 
 To generate code coverage (uses V8 provider):
 
 ```bash
-npm run test:coverage
+pnpm run test:coverage
+```
+
+Coverage reports will be written to the `coverage` directory. A text summary is printed to the console; an LCOV file (`coverage/lcov.info`) and a JSON report are also generated. This coverage step is intentionally not wired into CI — run it locally when you want to inspect or publish coverage results.
+
+## Japanese tokenizer setup
+
+The Japanese phonetics feature uses [kuromoji](https://github.com/takuyaa/kuromoji), which loads binary dictionary files via HTTP at runtime. These files are included in the `kuromoji` npm package but must be served from your own app — they cannot be bundled.
+
+**1. Copy the dict files to your public folder** (add to your build script or `package.json`):
+
+```bash
+cp node_modules/kuromoji/dict/*.dat.gz public/kuromoji-dict/
+```
+
+Or with `pnpm run` scripts (cross-platform):
+
+```json
+"copy:kuromoji-dict": "cpx \"node_modules/kuromoji/dict/*.dat.gz\" public/kuromoji-dict"
 ```
 
-Coverage reports will be written to the `coverage` directory. A text summary is printed to the console;
-an LCOV file (`coverage/lcov.info`) and a JSON report are also generated. This coverage step is intentionally
-not wired into CI — run it locally when you want to inspect or publish coverage results.
+**2. Call `configureJapaneseDict` once at app startup** (before any Japanese text is rendered):
+
+```js
+import { configureJapaneseDict } from "@nualang/nualang-ui-components";
+
+configureJapaneseDict({ dicPath: "/kuromoji-dict/" });
+```
+
+The `KUROMOJI_DICT_FILES` export lists all 12 filenames if you need to reference them programmatically.
 
 ## Supply-Chain Security
 
@@ -96,6 +132,10 @@ This means `pnpm install` will reject any package version published to the npm r
 
 Internal `@nualang/*` packages are excluded from this policy via `minimumReleaseAgeExclude`, so freshly-published internal packages can be installed immediately.
 
-### Package manager
-
-This repo uses pnpm. Use `pnpm install`, `pnpm run <script>`, and `pnpm add <package>` instead of npm equivalents. CI uses `pnpm install --frozen-lockfile`.
+## CI/CD
+gitlab CI/CD is used to run ci/cd jobs when code is committed.
+Lint and unit tests are run on every commit. Make suer they pass before you submit
+a merge request. The package is published to `npm` when the main brabch is updated,
+usually via merge request. Version numbers are not automatically bumped in CI/CD.
+If you have forgotten to update the version, you will see a CI/CD error. Just fix
+that in pacakge/json and commit.

package/dist/Assignments/AssignmentBotSelection/AssignmentBotSelection.js

@@ -116,11 +116,13 @@ function Bot({
           }
         },
         children: [/*#__PURE__*/_jsxs(Box, {
-          display: "flex",
-          alignItems: "center",
-          width: {
-            xs: "100%",
-            sm: "85%"
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            width: {
+              xs: "100%",
+              sm: "85%"
+            }
           },
           children: [/*#__PURE__*/_jsx(Avatar, {
             src: bot.picture || bot.botAvatar,
@@ -134,9 +136,11 @@ function Bot({
               marginLeft: 2
             },
             primary: /*#__PURE__*/_jsxs(Box, {
-              display: "flex",
-              alignItems: "center",
-              gap: 1,
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1
+              },
               children: [/*#__PURE__*/_jsx(Typography, {
                 variant: "body1",
                 children: bot.botName
@@ -263,7 +267,9 @@ function AssignmentBotSelection({
       },
       children: /*#__PURE__*/_jsx(Typography, {
         variant: "body2",
-        color: "text.secondary",
+        sx: {
+          color: "text.secondary"
+        },
         children: t("exercise_no_longer_available")
       })
     }, id))]

package/dist/Assignments/AssignmentCard/AssignmentCard.js

@@ -135,38 +135,50 @@ export default function AssignmentCard({
       children: [/*#__PURE__*/_jsxs(Grid, {
         container: true,
         spacing: 2,
-        alignItems: "center",
+        sx: {
+          alignItems: "center"
+        },
         children: [/*#__PURE__*/_jsx(Grid, {
           size: "grow",
-          flexDirection: "column",
-          display: "flex",
+          sx: {
+            flexDirection: "column",
+            display: "flex"
+          },
           children: /*#__PURE__*/_jsxs(Box, {
-            display: "flex",
-            alignItems: "center",
+            sx: {
+              display: "flex",
+              alignItems: "center"
+            },
             children: [/*#__PURE__*/_jsx(Typography, {
               variant: "body1",
-              fontWeight: 600,
               sx: {
+                fontWeight: 600,
                 color: "text.primary"
               },
               children: assignment.title
             }), isNew && /*#__PURE__*/_jsx(Box, {
-              ml: 2,
-              px: 1,
-              py: 0.25,
-              bgcolor: "#8300A1",
-              color: "white",
-              fontSize: "0.75rem",
-              borderRadius: 1,
-              fontWeight: "bold",
+              sx: {
+                ml: 2,
+                px: 1,
+                py: 0.25,
+                bgcolor: "#8300A1",
+                color: "white",
+                fontSize: "0.75rem",
+                borderRadius: 1,
+                fontWeight: "bold"
+              },
               children: t("NEW")
             })]
           })
         }), /*#__PURE__*/_jsx(Grid, {
-          textAlign: "right",
+          sx: {
+            textAlign: "right"
+          },
           children: /*#__PURE__*/_jsx(Typography, {
             variant: "button",
-            color: "text.secondary",
+            sx: {
+              color: "text.secondary"
+            },
             children: formatAssignmentDueText(assignment.scheduleDate, assignment.dueDate, t)
           })
         }), isCreator && /*#__PURE__*/_jsxs(Grid, {
@@ -189,7 +201,9 @@ export default function AssignmentCard({
           })]
         })]
       }), /*#__PURE__*/_jsxs(Box, {
-        mt: 2,
+        sx: {
+          mt: 2
+        },
         children: [/*#__PURE__*/_jsx(Divider, {
           sx: {
             marginBottom: "12px",
@@ -207,8 +221,10 @@ export default function AssignmentCard({
               variant: "body2",
               children: assignment.instructions
             }), /*#__PURE__*/_jsx(Box, {
-              mt: 2,
-              width: isCreator ? "80%" : "100%",
+              sx: {
+                mt: 2,
+                width: isCreator ? "80%" : "100%"
+              },
               children: /*#__PURE__*/_jsx(AssignmentExerciseSelector, {
                 t: t,
                 assignment: assignment,
@@ -233,17 +249,21 @@ export default function AssignmentCard({
               md: 2
             },
             children: isCreator && /*#__PURE__*/_jsxs(Box, {
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              textAlign: "center",
+              sx: {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                textAlign: "center"
+              },
               children: [/*#__PURE__*/_jsxs(Box, {
                 children: [/*#__PURE__*/_jsx(Typography, {
                   variant: "h4",
                   children: assignedStudents?.length
                 }), /*#__PURE__*/_jsx(Typography, {
                   variant: "body2",
-                  color: "text.secondary",
+                  sx: {
+                    color: "text.secondary"
+                  },
                   children: t("assigned")
                 })]
               }), /*#__PURE__*/_jsx(Button, {

package/dist/Assignments/AssignmentCardsList/AssignmentCardsList.js

@@ -88,12 +88,14 @@ const AssignmentCardsList = ({
   });
   if (isLoadingAssignments) {
     return /*#__PURE__*/_jsxs(Box, {
-      mb: 1,
+      sx: {
+        mb: 1
+      },
       children: [/*#__PURE__*/_jsxs(Box, {
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
         sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
           mb: 2
         },
         children: [/*#__PURE__*/_jsx(Skeleton, {
@@ -130,8 +132,10 @@ const AssignmentCardsList = ({
             borderRadius: 1
           }
         }), /*#__PURE__*/_jsxs(Box, {
-          display: "flex",
-          gap: 1,
+          sx: {
+            display: "flex",
+            gap: 1
+          },
           children: [/*#__PURE__*/_jsx(Skeleton, {
             variant: "rectangular",
             width: 120,
@@ -186,12 +190,14 @@ const AssignmentCardsList = ({
     };
     const emptyState = getEmptyStateMessage();
     return /*#__PURE__*/_jsxs(Box, {
-      mb: 1,
+      sx: {
+        mb: 1
+      },
       children: [isCreator && /*#__PURE__*/_jsxs(Box, {
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
         sx: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
           mb: 3,
           mt: "8px"
         },
@@ -232,16 +238,16 @@ const AssignmentCardsList = ({
           })
         })]
       }), /*#__PURE__*/_jsxs(Box, {
-        alignItems: "center",
         sx: {
+          alignItems: "center",
+          display: "flex",
+          flexDirection: "column",
           my: 2
         },
-        display: "flex",
-        flexDirection: "column",
         children: [/*#__PURE__*/_jsx(Typography, {
           variant: "h5",
-          fontWeight: "bold",
           sx: {
+            fontWeight: "bold",
             textAlign: "center"
           },
           children: emptyState.title
@@ -276,12 +282,14 @@ const AssignmentCardsList = ({
     });
   }
   return /*#__PURE__*/_jsxs(Box, {
-    mb: 1,
+    sx: {
+      mb: 1
+    },
     children: [/*#__PURE__*/_jsxs(Box, {
-      display: "flex",
-      justifyContent: isCreator ? "space-between" : "flex-end",
-      alignItems: "center",
       sx: {
+        display: "flex",
+        justifyContent: isCreator ? "space-between" : "flex-end",
+        alignItems: "center",
         mb: 3,
         mt: "8px"
       },

package/dist/Assignments/AssignmentCourseSelection/AssignmentCourseSelection.js

@@ -99,13 +99,17 @@ function Course({
             onClick: () => setOpen(!open),
             disabled: isCourseEmpty || isExerciseSelected,
             children: /*#__PURE__*/_jsxs(Box, {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              width: "100%",
-              children: [/*#__PURE__*/_jsxs(Box, {
+              sx: {
                 display: "flex",
                 alignItems: "center",
+                justifyContent: "space-between",
+                width: "100%"
+              },
+              children: [/*#__PURE__*/_jsxs(Box, {
+                sx: {
+                  display: "flex",
+                  alignItems: "center"
+                },
                 children: [/*#__PURE__*/_jsx(Avatar, {
                   src: course.picture,
                   alt: ""
@@ -117,7 +121,9 @@ function Course({
                       color: "textSecondary",
                       children: course.description
                     }), !isCreator && courseSectionCompletion && courseSectionCompletion !== null && /*#__PURE__*/_jsx(Box, {
-                      mt: 1,
+                      sx: {
+                        mt: 1
+                      },
                       children: /*#__PURE__*/_jsx(Tooltip, {
                         title: `Completed ${courseSectionCompletion.completed} / ${courseSectionCompletion.total} exercises`,
                         children: /*#__PURE__*/_jsx(ColorLinearProgress, {
@@ -151,7 +157,9 @@ function Course({
         timeout: "auto",
         unmountOnExit: true,
         children: /*#__PURE__*/_jsx(Box, {
-          ml: 3.5,
+          sx: {
+            ml: 3.5
+          },
           children: /*#__PURE__*/_jsx(AssignmentExerciseSelection, {
             t: t,
             sections: viewOnly ? filteredSections : courseSections,
@@ -179,7 +187,9 @@ function Course({
         })
       })]
     }, index) : /*#__PURE__*/_jsx(Box, {
-      ml: 3.5,
+      sx: {
+        ml: 3.5
+      },
       children: /*#__PURE__*/_jsx(AssignmentExerciseSelection, {
         t: t,
         sections: viewOnly ? filteredSections : courseSections,

package/dist/Assignments/AssignmentExerciseSelection/AssignmentExerciseSelection.js

@@ -158,9 +158,11 @@ function Exercise({
         }
       }),
       children: [/*#__PURE__*/_jsxs(Box, {
-        display: {
-          xs: "none",
-          sm: "flex"
+        sx: {
+          display: {
+            xs: "none",
+            sm: "flex"
+          }
         },
         children: [name.toLowerCase() === "roleplays" && /*#__PURE__*/_jsx(ListItemIcon, {
           children: /*#__PURE__*/_jsx(ForumIcon, {})
@@ -170,7 +172,9 @@ function Exercise({
           children: /*#__PURE__*/_jsx(MenuBookIcon, {})
         })]
       }), /*#__PURE__*/_jsx(Box, {
-        width: "100%",
+        sx: {
+          width: "100%"
+        },
         children: /*#__PURE__*/_jsx(ListItemText, {
           primary: t(name),
           secondary: t(description)
@@ -196,9 +200,11 @@ function Exercise({
       timeout: "auto",
       unmountOnExit: true,
       children: /*#__PURE__*/_jsx(Box, {
-        ml: {
-          sm: 0,
-          md: 7
+        sx: {
+          ml: {
+            sm: 0,
+            md: 7
+          }
         },
         children: /*#__PURE__*/_jsx(AssignmentPhraseListSelection, {
           t: t,
@@ -223,9 +229,11 @@ function Exercise({
       timeout: "auto",
       unmountOnExit: true,
       children: /*#__PURE__*/_jsx(Box, {
-        ml: {
-          sm: 0,
-          md: 7
+        sx: {
+          ml: {
+            sm: 0,
+            md: 7
+          }
         },
         children: /*#__PURE__*/_jsx(AssignmentRoleplaySelection, {
           roleplays: roleplays,
@@ -250,9 +258,11 @@ function Exercise({
       timeout: "auto",
       unmountOnExit: true,
       children: /*#__PURE__*/_jsx(Box, {
-        ml: {
-          sm: 0,
-          md: 7
+        sx: {
+          ml: {
+            sm: 0,
+            md: 7
+          }
         },
         children: /*#__PURE__*/_jsx(AssignmentBotSelection, {
           bots: bots,
@@ -560,12 +570,16 @@ function Topic({
             children: /*#__PURE__*/_jsx(ImageSearchIcon, {})
           })
         }), /*#__PURE__*/_jsxs(Box, {
-          fontWeight: "fontWeightBold",
-          width: "100%",
+          sx: {
+            fontWeight: "fontWeightBold",
+            width: "100%"
+          },
           children: [/*#__PURE__*/_jsx(ListItemText, {
             primary: isLargeScreen ? topicName || "" : /*#__PURE__*/_jsxs(_Fragment, {
               children: [/*#__PURE__*/_jsx(Box, {
-                mb: 1,
+                sx: {
+                  mb: 1
+                },
                 children: picture ? /*#__PURE__*/_jsx(Avatar, {
                   src: picture,
                   alt: topicName
@@ -587,14 +601,18 @@ function Topic({
               })
             })
           }), !isCreator && completion && completion !== null && /*#__PURE__*/_jsx(Box, {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            mt: 1,
-            mb: 1,
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              mt: 1,
+              mb: 1
+            },
             children: /*#__PURE__*/_jsx(Box, {
-              display: "inline",
-              flexGrow: 1,
+              sx: {
+                display: "inline",
+                flexGrow: 1
+              },
               children: /*#__PURE__*/_jsx(Tooltip, {
                 title: `Completed ${completion.completed} / ${completion.total} exercises`,
                 children: /*#__PURE__*/_jsx(ColorLinearProgress, {
@@ -604,27 +622,35 @@ function Topic({
               })
             })
           }), isMember && !isCreator && /*#__PURE__*/_jsx(Box, {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            mt: 1,
-            width: isLargeScreen ? "40%" : "100%",
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              mt: 1,
+              width: isLargeScreen ? "40%" : "100%"
+            },
             children: /*#__PURE__*/_jsxs(Box, {
-              ml: 1,
-              fontSize: 14,
-              minWidth: 35,
+              sx: {
+                ml: 1,
+                fontSize: 14,
+                minWidth: 35
+              },
               children: [completion && completion.percentage ? completion.percentage.toFixed(0) : 0, "%"]
             })
           }), videoUrl && /*#__PURE__*/_jsx(Box, {
-            display: "flex",
-            alignItems: "center",
+            sx: {
+              display: "flex",
+              alignItems: "center"
+            },
             children: /*#__PURE__*/_jsxs(CardInfoSectionItem, {
               component: "span",
               color: "textSecondary",
               children: [/*#__PURE__*/_jsx(OndemandVideoIcon, {}), /*#__PURE__*/_jsx(Typography, {
                 variant: "body2",
-                ml: 0.5,
                 color: "textSecondary",
+                sx: {
+                  ml: 0.5
+                },
                 children: t("video_included")
               })]
             })

package/dist/Assignments/AssignmentPhraseListSelection/AssignmentPhraseListSelection.js

@@ -262,11 +262,13 @@ function PhraseList({
           }
         },
         children: [/*#__PURE__*/_jsxs(Box, {
-          display: "flex",
-          alignItems: "center",
-          width: {
-            xs: "100%",
-            sm: "85%"
+          sx: {
+            display: "flex",
+            alignItems: "center",
+            width: {
+              xs: "100%",
+              sm: "85%"
+            }
           },
           children: [/*#__PURE__*/_jsx(Avatar, {
             src: phraseList.picture,
@@ -280,9 +282,11 @@ function PhraseList({
               marginLeft: 2
             },
             primary: /*#__PURE__*/_jsx(Box, {
-              display: "flex",
-              alignItems: "center",
-              gap: 1,
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1
+              },
               children: /*#__PURE__*/_jsx(Typography, {
                 variant: "body1",
                 children: phraseList.phraseListName
@@ -455,7 +459,9 @@ export default function AssignmentPhraseListSelection({
       },
       children: /*#__PURE__*/_jsx(Typography, {
         variant: "body2",
-        color: "text.secondary",
+        sx: {
+          color: "text.secondary"
+        },
         children: t("exercise_no_longer_available")
       })
     }, id))]