Fix issue with item name generation

package.json

@@ -2,10 +2,10 @@
   "name": "demo-react-animated-list",
   "version": "1.0.0",
   "description": "A demo of an implementation of an animated list in React Typescript.",
-  "main": "index.tsx",
+  "main": "src/index.tsx",
   "scripts": {
-    "build": "esbuild index.tsx --bundle --sourcemap --outfile=./dist/demo-react-animated-list.js",
+    "build": "esbuild ./src/index.tsx --bundle --sourcemap --outfile=./dist/demo-react-animated-list.js",
-    "dev": "esbuild index.tsx --bundle --watch --serve --outdir=./public/scripts --servedir=./public",
+    "dev": "esbuild ./src/index.tsx --bundle --watch --serve --outdir=./public/scripts --servedir=./public",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {

src/AnimatedListDemo.tsx

@@ -3,6 +3,16 @@ import { useAnimatedListItems } from './useAnimatedListItems';
 
 type Mutation = 'reverse' | 'randomize' | 'insert' | 'remove';
 
+function getRandomChar(): string {
+  return String.fromCharCode(98 + Math.floor(Math.random() * 25));
+}
+function getRandomItemName(): string {
+  return `Serial Number - ${new Array(16)
+    .fill('')
+    .map(() => getRandomChar())
+    .join('')}`;
+}
+
 /**
  * Randomizer function shamelessly copied unmodified from https://stackoverflow.com/a/12646864
  *
@@ -21,7 +31,7 @@ function shuffleArray(array) {
 
 function insertRandomlyIntoArray(array: string[]): string[] {
   const insertBefore = Math.floor(Math.random() * (array.length + 1));
-  const newItem = `Serial Number ${crypto.randomUUID()}`;
+  const newItem = getRandomItemName();
   if (insertBefore === 0) {
     return [newItem, ...array];
   }
@@ -65,12 +75,7 @@ export const AnimatedListDemo = () => {
       }
       return newState;
     },
-    [
+    new Array(4).fill('').map(() => getRandomItemName()),
-      `Serial Number ${crypto.randomUUID()}`,
-      `Serial Number ${crypto.randomUUID()}`,
-      `Serial Number ${crypto.randomUUID()}`,
-      `Serial Number ${crypto.randomUUID()}`,
-    ],
   );
 
   const { updateItemRef, updateItemPositions, itemStyles } =

tsconfig.json

@@ -8,5 +8,11 @@
     "noEmit": true,
     "alwaysStrict": true
   },
-  "include": ["*.ts", "*.tsx"]
+  "include": [
+    "*.ts",
+    "*.tsx",
+    "src/index.tsx",
+    "src/AnimatedListDemo.tsx",
+    "src/useAnimatedListItems.ts"
+  ]
 }