Sanitize app name

Author: djhi

packages/create-react-admin/src/ProjectState.ts

@@ -1,6 +1,7 @@
 export type ProjectConfiguration = {
     name: string;
     step:
+        | 'name'
         | 'data-provider'
         | 'auth-provider'
         | 'resources'
@@ -16,7 +17,7 @@ export type ProjectConfiguration = {
 
 export const InitialProjectConfiguration: ProjectConfiguration = {
     name: '',
-    step: 'data-provider',
+    step: 'name',
     dataProvider: '',
     authProvider: '',
     resources: [],

packages/create-react-admin/src/StepName.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { useState } from 'react';
+import TextInput from 'ink-text-input';
+import { Text } from 'ink';
+import { Stack } from './Stack.js';
+
+export const StepName = ({
+    onSubmit,
+    initialValue,
+}: {
+    initialValue: string;
+    onSubmit: (value: string) => void;
+}) => {
+    const [value, setValue] = useState(initialValue || '');
+
+    const handleSubmit = (value: string) => {
+        if (value !== '') {
+            onSubmit(value);
+        }
+    };
+    return (
+        <Stack>
+            <Text>
+                Enter the name of your application and validate with Enter:
+            </Text>
+            <TextInput
+                value={value}
+                onChange={v => setValue(v)}
+                onSubmit={handleSubmit}
+            />
+        </Stack>
+    );
+};

packages/create-react-admin/src/app.tsx

@@ -10,6 +10,7 @@ import { StepAuthProvider } from './StepAuthProvider.js';
 import { StepResources } from './StepResources.js';
 import { StepInstall } from './StepInstall.js';
 import { useInstallDeps } from './useInstallDeps.js';
+import { StepName } from './StepName.js';
 
 type Props = {
     name: string | undefined;
@@ -20,6 +21,12 @@ const stepReducer = (
     action
 ): ProjectConfiguration => {
     switch (state.step) {
+        case 'name':
+            return {
+                ...state,
+                name: action.value,
+                step: 'data-provider',
+            };
         case 'data-provider':
             return {
                 ...state,
@@ -67,16 +74,21 @@ const stepReducer = (
 };
 
 export default function App({ name = 'my-admin' }: Props) {
+    const sanitizedName = sanitizeName(name);
     const [state, dispatch] = useReducer(stepReducer, {
         ...InitialProjectConfiguration,
-        name,
+        name: sanitizedName,
+        step: sanitizedName === name ? 'data-provider' : 'name',
     });
     const helpMessages = useRef([]);
     const installDeps = useInstallDeps();
     const handleSubmit = (value: any) => {
         dispatch({ value });
     };
 
+    if (state.step === 'name') {
+        return <StepName initialValue={state.name} onSubmit={handleSubmit} />;
+    }
     if (state.step === 'data-provider') {
         return <StepDataProvider onSubmit={handleSubmit} />;
     }
@@ -125,3 +137,12 @@ export default function App({ name = 'my-admin' }: Props) {
         </>
     );
 }
+
+const sanitizeName = (name: string) => {
+    return name
+        .trim()
+        .toLowerCase()
+        .replace(/\s+/g, '-')
+        .replace(/^[._]/, '')
+        .replace(/[^a-z\d\-~]+/g, '-');
+};