Merge pull request #8833 from marmelab/create-admin-app

Add create-react-admin

Author: fzaninotto

Makefile

@@ -112,7 +112,11 @@ build-data-generator:
 	@echo "Transpiling data-generator files...";
 	@cd ./examples/data-generator && yarn build
 
-build: build-ra-core build-ra-ui-materialui build-ra-data-fakerest build-ra-data-json-server build-ra-data-localforage build-ra-data-localstorage build-ra-data-simple-rest build-ra-data-graphql build-ra-data-graphql-simple build-ra-i18n-polyglot build-ra-input-rich-text build-data-generator build-ra-language-english build-ra-language-french build-react-admin build-ra-no-code  ## compile ES6 files to JS
+build-create-react-admin:
+	@echo "Transpiling create-react-admin files...";
+	@cd ./packages/create-react-admin && yarn build
+
+build: build-ra-core build-ra-ui-materialui build-ra-data-fakerest build-ra-data-json-server build-ra-data-localforage build-ra-data-localstorage build-ra-data-simple-rest build-ra-data-graphql build-ra-data-graphql-simple build-ra-i18n-polyglot build-ra-input-rich-text build-data-generator build-ra-language-english build-ra-language-french build-react-admin build-ra-no-code build-create-react-admin  ## compile ES6 files to JS
 
 doc: ## compile doc as html and launch doc web server
 	@yarn doc

packages/create-react-admin/README.md

@@ -0,0 +1,29 @@
+# create-react-admin
+
+A CLI to bootstrap a new react-admin application.
+
+## Usage
+
+```sh
+npm create react-admin@latest my-app
+# or
+yarn create react-admin my-app
+```
+
+You'll be asked to choose a data provider (optional), an auth provider (optional). You may also setup the resources you want initially.
+
+## Development
+
+Build the project with the following command at the monorepo root:
+
+```sh
+make build-create-react-admin
+```
+
+In another directory, run:
+
+```sh
+./react-admin/node_modules/.bin/create-react-admin my-admin
+```
+
+The above command assume you cloned react-admin in the `react-admin` directory and you are running the command in this directory parent.

packages/create-react-admin/package.json

@@ -0,0 +1,34 @@
+{
+    "name": "create-react-admin",
+    "description": "A CLI to quickly start a new react-admin project",
+    "version": "0.0.1",
+    "license": "MIT",
+    "bin": "lib/cli.js",
+    "authors": [
+        "Gildas Garcia"
+    ],
+    "engines": {
+        "node": ">=16"
+    },
+    "scripts": {
+        "build": "tsc",
+        "test": "prettier --check . && xo && ava"
+    },
+    "files": [
+        "dist"
+    ],
+    "dependencies": {
+        "execa": "^5.1.1",
+        "fs-extra": "^11.1.1",
+        "ink": "^3.2.0",
+        "ink-select-input": "^4.2.2",
+        "ink-text-input": "^4.0.3",
+        "meow": "^9.0.0",
+        "react": "^17.0.0",
+        "yn": "^5.0.0"
+    },
+    "devDependencies": {
+        "@types/react": ">=17.0.0",
+        "typescript": "^4.4.0"
+    }
+}

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

@@ -0,0 +1,25 @@
+export type ProjectConfiguration = {
+    name: string;
+    step:
+        | 'name'
+        | 'data-provider'
+        | 'auth-provider'
+        | 'resources'
+        | 'generate'
+        | 'install'
+        | 'run-install'
+        | 'finish';
+    dataProvider: string;
+    authProvider: string;
+    resources: string[];
+    installer: string;
+};
+
+export const InitialProjectConfiguration: ProjectConfiguration = {
+    name: '',
+    step: 'name',
+    dataProvider: '',
+    authProvider: '',
+    resources: [],
+    installer: '',
+};

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Text } from 'ink';
+import { Stack } from './Stack.js';
+
+export type ChoiceType = {
+    label: string;
+    value: string;
+    description?: string;
+};
+
+export const SelectInputChoice = ({
+    isSelected = false,
+    label,
+    description,
+}: {
+    isSelected: boolean;
+    label: string;
+    description: string;
+}) => {
+    return (
+        <Stack>
+            <Text bold={isSelected ? true : false}>{label}</Text>
+            <Text italic>{description}</Text>
+        </Stack>
+    );
+};

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { Box, BoxProps } from 'ink';
+
+export const Stack = (props: { children: ReactNode } & BoxProps) => {
+    return <Box flexDirection="column" marginBottom={1} {...props} />;
+};

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

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { Text } from 'ink';
+import SelectInput from 'ink-select-input';
+import { ChoiceType, SelectInputChoice } from './SelectInputChoice.js';
+import { Stack } from './Stack.js';
+
+const SupportedAuthProviders: ChoiceType[] = [
+    {
+        label: 'Hard coded local username/password',
+        value: 'local-auth-provider',
+        description: 'Hard coded local username/password',
+    },
+    { label: 'None', value: 'none', description: 'No authProvider' },
+];
+
+export const StepAuthProvider = ({
+    onSubmit,
+}: {
+    onSubmit: (value: string) => void;
+}) => {
+    const handleSelect = (item: ChoiceType) => {
+        onSubmit(item.value);
+    };
+
+    return (
+        <Stack>
+            <Text>
+                Select the auth provider you want to use, and validate with
+                Enter:
+            </Text>
+            <SelectInput
+                items={SupportedAuthProviders}
+                itemComponent={SelectInputChoice}
+                onSelect={handleSelect}
+                initialIndex={0}
+            />
+        </Stack>
+    );
+};

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

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { Text } from 'ink';
+import SelectInput from 'ink-select-input';
+import { ChoiceType, SelectInputChoice } from './SelectInputChoice.js';
+import { Stack } from './Stack.js';
+
+const SupportedDataProviders: ChoiceType[] = [
+    {
+        label: 'Fakerest',
+        value: 'ra-data-fakerest',
+        description:
+            'A client-side, in-memory data provider that use a JSON object as its initial data.',
+    },
+    {
+        label: 'JSON Server',
+        value: 'ra-data-json-server',
+        description:
+            'A data provider based on the JSON Server API (https://github.com/typicode/json-server)',
+    },
+    {
+        label: 'Simple REST',
+        value: 'ra-data-simple-rest',
+        description:
+            'A Simple REST data provider (https://github.com/marmelab/react-admin/tree/master/packages/ra-data-simple-rest)',
+    },
+    {
+        label: 'None',
+        value: 'none',
+        description: "I'll configure the data provider myself.",
+    },
+];
+
+export const StepDataProvider = ({
+    onSubmit,
+}: {
+    onSubmit: (value: string) => void;
+}) => {
+    const handleSelect = (item: ChoiceType) => {
+        onSubmit(item.value);
+    };
+
+    return (
+        <Stack>
+            <Text>
+                Select the data provider you want to use, and validate with
+                Enter:
+            </Text>
+            <SelectInput<string>
+                items={SupportedDataProviders}
+                itemComponent={SelectInputChoice}
+                onSelect={handleSelect}
+                initialIndex={0}
+            />
+        </Stack>
+    );
+};

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

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import SelectInput from 'ink-select-input';
+import { ChoiceType, SelectInputChoice } from './SelectInputChoice.js';
+import { Text } from 'ink';
+import { Stack } from './Stack.js';
+
+const choices: ChoiceType[] = [
+    {
+        label: 'Using npm',
+        value: 'npm',
+    },
+    {
+        label: 'Using yarn',
+        value: 'yarn',
+    },
+    {
+        label: "Don't install dependencies, I'll do it myself.",
+        value: '',
+    },
+];
+
+export const StepInstall = ({
+    onSubmit,
+}: {
+    onSubmit: (value: string) => void;
+}) => {
+    const handleSelect = (item: ChoiceType) => {
+        onSubmit(item.value);
+    };
+    return (
+        <Stack>
+            <Text>How do you want to install the dependencies?</Text>
+            <SelectInput<string>
+                items={choices}
+                itemComponent={SelectInputChoice}
+                onSelect={handleSelect}
+                initialIndex={0}
+            />
+        </Stack>
+    );
+};

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>
+    );
+};