Make new project name dialog ask for a PascalCase style class name.

Author: lizlooney

src/App.tsx

@@ -263,7 +263,7 @@ const App: React.FC = () => {
       });
       const parent: TreeDataNode = {
         key: project.modulePath,
-        title: project.projectName,
+        title: project.className,
         children: children,
         icon: <ProjectOutlined />,
       };
@@ -437,6 +437,14 @@ const App: React.FC = () => {
     });
   };
 
+  const getProjectClassNames = (): string[] => {
+    const projectClassNames: string[] = [];
+    modules.forEach((project) => {
+      projectClassNames.push(project.className);
+    });
+    return projectClassNames;
+  };
+
   const getProjectNames = (): string[] => {
     const projectNames: string[] = [];
     modules.forEach((project) => {
@@ -445,10 +453,12 @@ const App: React.FC = () => {
     return projectNames;
   };
 
-  const handleNewProjectNameOk = async (newProjectName: string) => {
+  const handleNewProjectNameOk = async (newProjectClassName: string) => {
+    const newProjectName = commonStorage.classNameToModuleName(newProjectClassName);
     const newProjectPath = commonStorage.makeProjectPath(newProjectName);
     if (newProjectNameModalPurpose === PURPOSE_NEW_PROJECT) {
-      const projectContent = commonStorage.newProjectContent(newProjectName);
+      const projectContent = commonStorage.newProjectContent(
+          newProjectClassName, newProjectName, newProjectPath);
       try {
         await storage.createModule(
             commonStorage.MODULE_TYPE_PROJECT, newProjectPath, projectContent);
@@ -1078,7 +1088,7 @@ const App: React.FC = () => {
         title={newProjectNameModalTitle}
         isOpen={newProjectNameModalIsOpen}
         initialValue={newProjectNameModalInitialValue}
-        getProjectNames={getProjectNames}
+        getProjectClassNames={getProjectClassNames}
         onOk={(newName) => {
           setNewProjectNameModalIsOpen(false);
           handleNewProjectNameOk(newName);

src/modal/NewProjectNameModal.tsx

@@ -33,17 +33,20 @@ import type { InputRef } from 'antd';
 
 import * as commonStorage from '../storage/common_storage';
 
+const DESCRIPTION = 'No spaces are allowed in the project name. Each word in the project should start with a capital letter.';
+const EXAMPLE = 'For example, MyAwesomeRobot';
+
 
 export type NewProjectNameModalProps = {
   title: string;
   isOpen: boolean;
   initialValue: string;
-  getProjectNames: () => string[];
+  getProjectClassNames: () => string[];
   onOk: (newName: string) => void;
   onCancel: () => void;
 }
 
-export const NewProjectNameModal: React.FC<NewProjectNameModalProps> = ({ title, isOpen, initialValue, getProjectNames, onOk, onCancel }) => {
+export const NewProjectNameModal: React.FC<NewProjectNameModalProps> = ({ title, isOpen, initialValue, getProjectClassNames, onOk, onCancel }) => {
   const inputRef = useRef<InputRef>(null);
   const [message, setMessage] = useState('');
   const [value, setValue] = useState('');
@@ -54,7 +57,7 @@ export const NewProjectNameModal: React.FC<NewProjectNameModalProps> = ({ title,
   const afterOpenChange = (open: boolean) => {
     if (open) {
       setValue(initialValue);
-      const w = getProjectNames();
+      const w = getProjectClassNames();
       if (w.length === 0) {
         setMessage('Let\'s create your first project. You just need to give it a name.');
       }
@@ -68,9 +71,13 @@ export const NewProjectNameModal: React.FC<NewProjectNameModalProps> = ({ title,
     }
   };
 
+  const onChange = (e) => {
+    setValue(commonStorage.onChangeClassName(e.target.value));
+  };
+
   const handleOk = () => {
-    if (!commonStorage.isValidPythonModuleName(value)) {
-      setAlertErrorMessage(value + ' is not a valid blocks module name');
+    if (!commonStorage.isValidClassName(value)) {
+      setAlertErrorMessage(value + ' is not a valid blocks project name');
       setAlertErrorVisible(true);
       return;
     }
@@ -98,11 +105,13 @@ export const NewProjectNameModal: React.FC<NewProjectNameModalProps> = ({ title,
           style={message.length === 0 ? { display: 'none' } : { }}
         >{message}</Typography.Paragraph>
         <Typography.Paragraph> Project Name </Typography.Paragraph>
+        <Typography.Paragraph>{DESCRIPTION}</Typography.Paragraph>
+        <Typography.Paragraph>{EXAMPLE}</Typography.Paragraph>
         <Input
           ref={inputRef}
           value={value}
           onPressEnter={handleOk}
-          onChange={(e) => setValue(e.target.value.toLowerCase())}
+          onChange={onChange}
         />
         {alertErrorVisible && (
           <Alert

src/storage/client_side_storage.ts

@@ -135,12 +135,14 @@ class ClientSideStorage implements commonStorage.Storage {
           const value = cursor.value;
           const path = value.path;
           const moduleType = value.type;
+          const moduleName = commonStorage.getModuleName(path);
           const module: commonStorage.Module = {
             modulePath: path,
             moduleType: moduleType,
             projectName: commonStorage.getProjectName(path),
-            moduleName: commonStorage.getModuleName(path),
+            moduleName: moduleName,
             dateModifiedMillis: value.dateModifiedMillis,
+            className: commonStorage.moduleNameToClassName(moduleName),
           }
           if (moduleType === commonStorage.MODULE_TYPE_PROJECT) {
             const project: commonStorage.Project = {

src/storage/common_storage.ts

@@ -23,7 +23,7 @@ import JSZip from 'jszip';
 
 import * as Blockly from 'blockly/core';
 
-import {Block} from "../toolbox/items";
+import {Block} from '../toolbox/items';
 import startingOpModeBlocks from '../modules/opmode_start.json'; 
 import startingMechanismBlocks from '../modules/mechanism_start.json';
 import startingRobotBlocks from '../modules/robot_start.json';
@@ -39,6 +39,7 @@ export type Module = {
   projectName: string,
   moduleName: string,
   dateModifiedMillis: number,
+  className: string,
 };
 
 export type Mechanism = Module;
@@ -104,6 +105,84 @@ export function findModule(modules: Project[], modulePath: string): Module | nul
   return null;
 }
 
+/**
+ * Makes the given name a valid class name.
+ */
+export function onChangeClassName(name: string): string {
+  let newName = '';
+
+  // Force the first character to be an upper case letter
+  let i = 0;
+  for (; i < name.length; i++) {
+    const firstChar = name.charAt(0);
+    if (firstChar >= 'A' && firstChar <= 'Z') {
+      newName += firstChar;
+      i++;
+      break;
+    } else if (firstChar >= 'a' && firstChar <= 'z') {
+      newName += firstChar.toUpperCase();
+      i++;
+      break;
+    }
+  }
+
+  for (; i < name.length; i++) {
+    const char = name.charAt(i);
+    if ((char >= 'A' && char <= 'Z') ||
+        (char >= 'a' && char <= 'z') ||
+        (char >= '0' && char <= '9')) {
+      newName += char;
+    }
+  }
+
+  return newName;
+}
+
+/**
+ * Returns true if the given name is a valid class name.
+ */
+export function isValidClassName(name: string): boolean {
+  if (name) {
+    return /^[A-Z][A-Za-z0-9]*$/.test(name);
+  }
+  return false;
+}
+
+/**
+ * Returns the module name for the given class name.
+ */
+export function classNameToModuleName(className: string): boolean {
+  let moduleName = '';
+  for (let i = 0; i < className.length; i++) {
+    const char = className.charAt(i);
+    if (char >= 'A' && char <= 'Z') {
+      if (i > 0) {
+        moduleName += '_';
+      }
+      moduleName += char.toLowerCase();
+    } else {
+      moduleName += char;
+    }
+  }
+  return moduleName;
+}
+
+/**
+ * Returns the class name for the given module name.
+ */
+export function moduleNameToClassName(moduleName: string): boolean {
+  let className = '';
+  let nextCharUpper = true;
+  for (let i = 0; i < moduleName.length; i++) {
+    const char = moduleName.charAt(i);
+    if (char !== '_') {
+      className += nextCharUpper ? char.toUpperCase() : char;
+    }
+    nextCharUpper = (char === '_');
+  }
+  return className;
+}
+
 /**
  * Returns true if the given name is a valid python module name.
  */
@@ -180,6 +259,7 @@ export function newProjectContent(projectName: string): string {
     projectName: projectName,
     moduleName: projectName,
     dateModifiedMillis: 0,
+    className: moduleNameToClassName(projectName),
   };
 
   return startingBlocksToModuleContent(module, startingRobotBlocks);
@@ -195,6 +275,7 @@ export function newMechanismContent(projectName: string, mechanismName: string):
     projectName: projectName,
     moduleName: mechanismName,
     dateModifiedMillis: 0,
+    className: moduleNameToClassName(mechanismName),
   };
 
   return startingBlocksToModuleContent(module, startingMechanismBlocks);
@@ -210,6 +291,7 @@ export function newOpModeContent(projectName: string, opModeName: string): strin
     projectName: projectName,
     moduleName: opModeName,
     dateModifiedMillis: 0,
+    className: moduleNameToClassName(opModeName),
   };
 
   return startingBlocksToModuleContent(module, startingOpModeBlocks);
@@ -356,6 +438,7 @@ function _processModuleContentForDownload(
     projectName: projectName,
     moduleName: moduleName,
     dateModifiedMillis: 0,
+    className: moduleNameToClassName(moduleName),
   };
 
   // Clear out the python content and exported blocks.
@@ -455,6 +538,7 @@ export function _processUploadedModule(
     projectName: projectName,
     moduleName: moduleName,
     dateModifiedMillis: 0,
+    className: moduleNameToClassName(moduleName),
   };
 
   // Generate the python content and exported blocks.