deps: replace nanoid with randomId util

When linking local-components for development use, our use of nanoid causes
the error below, preventing the app from loading.

Our options to fix this seem to be to:

1. Downgrade from nanoid 5 to 3: ai/nanoid#422 (comment)

2. Refactor to use a dynamic import (potentially infecting all
call sites with `await` and refactoring to make parent functions async).

3. Switch from "module": "commonjs" to "module": "ESNext" and assess the impact of that change.

4. Remove nanoid and create a simple randomId function instead.

I went with (4).

We don't need the full hardware-random IDs that nanoid provides, and we
only used nanoid in one component.

nanoid error in getflywheel-local after running nps components.link and nps.build, then opening the app:

 require() of ES Module /Users/nick.cernis/localdev/local-components/node_modules/nanoid/index.js from /Users/nick.cernis/localdev/local-components/dist/index.js not supported.
Instead change the require of /Users/nick.cernis/localdev/local-components/node_modules/nanoid/index.js in /Users/nick.cernis/localdev/local-components/dist/index.js to a dynamic import() which is available in all CommonJS modules.

package.json

@@ -24,7 +24,6 @@
     "lodash.isequal": "^4.5.0",
     "lz-string": "^1.4.4",
     "memoize-one": "^6.0.0",
-    "nanoid": "^5.0.1",
     "react-animate-height": "^2.0.23",
     "react-lowlight": "^2.0.0",
     "react-markdown": "^4.0.3",

src/components/menus/ContextMenu/ContextMenu.test.tsx

@@ -5,10 +5,6 @@ import ContextMenu, { IContextMenuProps, IMenuItem } from './ContextMenu';
 
 const mockOnClick = jest.fn();
 
-jest.mock('nanoid', () => ({
-	nanoid: () => 'a-fixed-random-id',
-}));
-
 const menuItems: IMenuItem[] = [
 	{
 		label: 'View site',

src/components/menus/ContextMenu/ContextMenu.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classnames from 'classnames';
-import { nanoid } from 'nanoid';
 import { useEffect, useRef, useState } from 'react';
+import randomId from '../../../utils/randomId';
 import styles from './ContextMenu.scss';
 import { FunctionGeneric } from '../../../common/structures/Generics';
 import { Tooltip, TooltipProps, hideTooltip, showTooltip } from '../../overlays/Tooltip/Tooltip';
@@ -99,7 +99,7 @@ const ContextMenu = (props: IContextMenuProps) => {
 		...otherProps
 	} = props;
 
-	const menuId = useRef(id ?? `${'contextMenu'}-${nanoid()}`);
+	const menuId = useRef(id ?? `${'contextMenu'}-${randomId()}`);
 
 	const [isShowing, setIsShowing] = useState(false);
 

src/utils/randomId.ts

@@ -0,0 +1,14 @@
+/**
+ * Creates a random URL-safe string for IDs and unique fallback values.
+ *
+ * @param len Length of the string to generate.
+ */
+export default function randomId(len: number = 21): string {
+	const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789_-';
+	let result = '';
+	for (let i = 0; i < len; i += 1) {
+		const randomIndex = Math.floor(Math.random() * charset.length);
+		result += charset[randomIndex];
+	}
+	return result;
+}

yarn.lock

@@ -10480,11 +10480,6 @@ nanoid@^3.3.1, nanoid@^3.3.4:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
   integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
 
-nanoid@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-5.0.1.tgz#3e95d775a8bc8a98afbf0a237e2bbc6a71b0662e"
-  integrity sha512-vWeVtV5Cw68aML/QaZvqN/3QQXc6fBfIieAlu05m7FZW2Dgb+3f0xc0TTxuJW+7u30t7iSDTV/j3kVI0oJqIfQ==
-
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"