Merge pull request #22 from Henriquecesp/feat/hen-add-react

Feat/hen add react

Author: jlenon7

README.md

@@ -41,22 +41,52 @@ class SecGenerator extends Generator {
         name: 'framework',
         message: 'Select your framework:',
         choices: [
+          { name: 'NestJS', value: 'nestjs' },
+          { name: 'ReactJS', value: 'reactjs' },
           { name: 'Laravel', value: 'laravel' },
-          { name: 'NestJS TypeORM', value: 'nestjsTypeOrm' },
+        ],
+      },
+      {
+        when: answers => answers.framework === 'reactjs',
+        type: 'list',
+        name: 'template',
+        message: 'Select your template:',
+        choices: [
+          { name: 'ReactJS Hook', value: 'reactjsHook' },
+          { name: 'ReactJS Component', value: 'reactjsComponent' },
+          { name: 'ReactJS ContextAPI', value: 'reactjsContext' },
+          { name: 'ReactJS Material-UI', value: 'reactjsMui' },
+          { name: 'ReactJS StyledComponents', value: 'reactjsStyled' },
+        ],
+      },
+      {
+        when: answers => answers.framework === 'nestjs',
+        type: 'list',
+        name: 'template',
+        message: 'Select your template:',
+        choices: [
+          { name: 'NestJS TypeOrm', value: 'nestjsTypeOrm' },
           { name: 'NestJS Mongoose', value: 'nestjsMongoose' },
-          { name: 'NestJS PrismaORM', value: 'nestjsPrismaOrm' },
+          { name: 'NestJS PrismaOrm', value: 'nestjsPrismaOrm' },
         ],
       },
+      {
+        when: answers => answers.framework === 'laravel',
+        type: 'list',
+        name: 'template',
+        message: 'Select your template:',
+        choices: [{ name: 'Default', value: 'default' }],
+      },
     ])
   }
 
   async writing() {
-    const framework = this.answers.framework
-    const dir = path.join(__dirname, `templates/${framework}/`)
+    const template = `${this.answers.framework}/${this.answers.template}`
+    const dir = path.join(__dirname, `templates/${template}/`)
 
     for await (const f of makeFileTemplate(dir, this.variables.name)) {
       this.fs.copyTpl(
-        this.templatePath(`${framework}/${f.src}`),
+        this.templatePath(`${template}/${f.src}`),
         this.destinationPath(`${this.variables.path}/${f.dist}`),
         this.variables,
       )

app/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+interface Props {
+  title: string;
+}
+
+const <%= namePascal %> = ({title}: Props): JSX.Element => {
+  const [data, setData] = React.useState<boolean>(false)
+
+  const handleClick = React.useCallback(() => {
+    setData(data => !data)
+  }, []);
+
+  return (
+    <div>
+      <h1>{title}</h1>
+      <button onClick={handleClick}>Click Me!</button>
+    </div>
+  );
+}
+
+export default <%= namePascal %>

app/templates/laravel/app/Http/Controllers/__name__Controller.php.txt renamed to app/templates/laravel/default/app/Http/Controllers/__name__Controller.php.txt

@@ -0,0 +1 @@
+export { default } from './'

app/templates/laravel/app/Http/Requests/__name__StoreRequest.php.txt renamed to app/templates/laravel/default/app/Http/Requests/__name__StoreRequest.php.txt

@@ -0,0 +1,71 @@
+import { createContext, useContext, useReducer } from 'react';
+
+interface <%= namePascal %> {
+  id: number;
+  title: string;
+}
+
+interface <%= namePascal %>State {
+  <%= namePluralCamel %>: <%= namePascal %>[];
+}
+
+interface Action {
+  type: 'ADD' | 'DELETE';
+  <%= nameCamel %>: <%= namePascal %>;
+  id: string;
+}
+
+const <%= namePascal %>StateContext = createContext<<%= namePascal %>State>({
+  <%= nameCamel %>: [],
+});
+
+const <%= namePascal %>DispatchContext = createContext<React.Dispatch<Action>>(
+  null as unknown as React.Dispatch<Action>,
+);
+
+function <%= namePascal %>Reducer(state: <%= namePascal %>State, action: Action) {
+  switch (action.type) {
+    case 'ADD': {
+      return {
+        ...state,
+        <%= nameCamel %>: [...state.<%= namePluralCamel %>, action.<%= nameCamel %>],
+      };
+    }
+    case 'DELETE': {
+      const updated<%= namePascal %> = state.<%= namePluralCamel %>.filter((item) => item.id != action.id);
+      return {
+        ...state,
+        <%= namePluralCamel %>: updated<%= namePascal %>,
+      };
+    }
+    default: {
+      throw new Error('unhandled action type');
+    }
+  }
+}
+
+interface <%= namePascal %>Provider {
+  children: React.ReactNode;
+}
+
+/*
+Use the <%= namePascal %>ContextProvider to wrap your app and set up the <%= namePascal %>StateContext and <%= namePascal %>DispatchContext.
+*/
+
+export function <%= namePascal %>ContextProvider({ children }: <%= namePascal %>Provider): JSX.Element {
+  const [state, dispatch] = useReducer(<%= namePascal %>Reducer, {
+    <%= namePluralPascal %>: [],
+  });
+
+  return (
+    <<%= namePascal %>StateContext.Provider value={state}>
+      <<%= namePascal %>DispatchContext.Provider value={dispatch}>
+        {children}
+      </<%= namePascal %>DispatchContext.Provider>
+    </<%= namePascal %>StateContext.Provider>
+  );
+}
+
+export const use<%= namePascal %>DispatchContext = (): React.Dispatch<Action> =>
+  useContext(<%= namePascal %>DispatchContext);
+export const use<%= namePascal %>StateContext = (): <%= namePascal %>State => useContext(<%= namePascal %>StateContext);

app/templates/laravel/app/Http/Requests/__name__UpdateRequest.php.txt renamed to app/templates/laravel/default/app/Http/Requests/__name__UpdateRequest.php.txt

@@ -0,0 +1,10 @@
+import { Reducer, useReducer } from 'react';
+
+const <%= namePascal %>Reducer = (state: boolean, nextValue?: any) =>
+  typeof nextValue === 'boolean' ? nextValue : !state;
+
+const use<%= namePascal %> = (initialValue: boolean): [boolean, (nextValue?: any) => void] => {
+  return useReducer<Reducer<boolean, any>>(<%= namePascal %>Reducer, initialValue);
+};
+
+export default use<%= namePascal %>;

app/templates/laravel/app/Http/Resources/__name__Resource.php.txt renamed to app/templates/laravel/default/app/Http/Resources/__name__Resource.php.txt

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import { purple } from '@mui/material/colors';
+
+const ColorButton = styled(Button)(({ theme }) => ({
+  color: theme.palette.getContrastText(purple[500]),
+  backgroundColor: purple[500],
+  '&:hover': {
+    backgroundColor: purple[700],
+  },
+}));
+
+interface Props {
+  title: string;
+}
+
+const <%= namePascal %> = ({title}: Props): JSX.Element => {
+  const [data, setData] = React.useState<boolean>(false)
+
+  const handleClick = React.useCallback(() => {
+    setData(data => !data)
+  }, []);
+
+  return (
+    <Stack spacing={2} direction="row">
+      <ColorButton variant="contained" onClick={handleClick}>
+        {title}
+      </ColorButton>
+    </Stack>
+  );
+}
+
+export default <%= namePascal %>

app/templates/laravel/app/Models/__name__.php.txt renamed to app/templates/laravel/default/app/Models/__name__.php.txt

@@ -0,0 +1 @@
+export { default } from './'

app/templates/laravel/app/Repositories/__name__Repository.php.txt renamed to app/templates/laravel/default/app/Repositories/__name__Repository.php.txt

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components'
+
+const Button = styled.button`
+  /* ... */
+`
+
+interface Props {
+  title: string;
+}
+
+const <%= namePascal %> = ({title}: Props): JSX.Element => {
+  const [data, setData] = React.useState<boolean>(false)
+
+  const handleClick = React.useCallback(() => {
+    setData(data => !data)
+  }, []);
+
+  return (
+    <div>
+      <Button onClick={handleClick}>
+        {title}
+      </Button>
+    </div>
+  );
+}
+
+export default <%= namePascal %>

app/templates/laravel/app/Services/__name__Service.php.txt renamed to app/templates/laravel/default/app/Services/__name__Service.php.txt

@@ -0,0 +1 @@
+export { default } from './'

app/templates/laravel/database/factories/__name__Factory.php.txt renamed to app/templates/laravel/default/database/factories/__name__Factory.php.txt

@@ -1,6 +1,6 @@
 {
   "name": "generator-secjs",
-  "version": "1.2.9",
+  "version": "1.3.0",
   "description": "🧬 Generator for any NodeJS Project or Framework",
   "main": "app/index.js",
   "scripts": {

app/templates/laravel/database/migrations/__migration_plural_low___table.php.txt renamed to app/templates/laravel/default/database/migrations/__migration_plural_low___table.php.txt

@@ -7,10 +7,10 @@ const assert = require('yeoman-assert')
 describe('\n Laravel 😸', () => {
   beforeAll(() => {
     return helpers
-      .run(path.join(__dirname, '../app'))
+      .run(path.join(__dirname, '../../app'))
       .withOptions({ path: './Foo' })
       .withArguments('Bar')
-      .withPrompts({ framework: 'laravel' })
+      .withPrompts({ framework: 'laravel', template: 'default' })
   })
 
   it('should create all files from resource Bar in folder Foo', () => {

app/templates/laravel/database/seeders/__name__Seeder.php.txt renamed to app/templates/laravel/default/database/seeders/__name__Seeder.php.txt

@@ -7,10 +7,10 @@ const assert = require('yeoman-assert')
 describe('\n NestJS Mongoose 😸', () => {
   beforeAll(() => {
     return helpers
-      .run(path.join(__dirname, '../app'))
+      .run(path.join(__dirname, '../../app'))
       .withOptions({ path: './Foo' })
       .withArguments('Bar')
-      .withPrompts({ framework: 'nestjsMongoose' })
+      .withPrompts({ framework: 'nestjs', template: 'nestjsMongoose' })
   })
 
   it('should create all files from resource Bar in folder Foo', () => {

app/templates/nestjsMongoose/Dtos/__name__Dto.ts.txt renamed to app/templates/nestjs/nestjsMongoose/Dtos/__name__Dto.ts.txt

@@ -7,10 +7,10 @@ const assert = require('yeoman-assert')
 describe('\n NestJS PrismaORM 😸', () => {
   beforeAll(() => {
     return helpers
-      .run(path.join(__dirname, '../app'))
+      .run(path.join(__dirname, '../../app'))
       .withOptions({ path: './Foo' })
       .withArguments('Bar')
-      .withPrompts({ framework: 'nestjsPrismaOrm' })
+      .withPrompts({ framework: 'nestjs', template: 'nestjsPrismaOrm' })
   })
 
   it('should create all files from resource Bar in folder Foo', () => {

app/templates/nestjsMongoose/E2E/__name__/delete.spec.ts.txt renamed to app/templates/nestjs/nestjsMongoose/E2E/__name__/delete.spec.ts.txt

@@ -7,10 +7,10 @@ const assert = require('yeoman-assert')
 describe('\n NestJS TypeORM 😸', () => {
   beforeAll(() => {
     return helpers
-      .run(path.join(__dirname, '../app'))
+      .run(path.join(__dirname, '../../app'))
       .withOptions({ path: './Foo' })
       .withArguments('Bar')
-      .withPrompts({ framework: 'nestjsTypeOrm' })
+      .withPrompts({ framework: 'nestjs', template: 'nestjsTypeOrm' })
   })
 
   it('should create all files from resource Bar in folder Foo', () => {

app/templates/nestjsMongoose/E2E/__name__/index.spec.ts.txt renamed to app/templates/nestjs/nestjsMongoose/E2E/__name__/index.spec.ts.txt

@@ -0,0 +1,22 @@
+'use strict'
+
+const path = require('path')
+const helpers = require('yeoman-test')
+const assert = require('yeoman-assert')
+
+describe('\n ReactJS Component ⚛️', () => {
+  beforeAll(() => {
+    return helpers
+      .run(path.join(__dirname, '../../app'))
+      .withOptions({ path: './Foo' })
+      .withArguments('Bar')
+      .withPrompts({ framework: 'reactjs', template: 'reactjsComponent' })
+  })
+
+  it('should create all files from resource Bar in folder Foo', () => {
+    assert.file([
+      './Foo/components/Bar/component.tsx',
+      './Foo/components/Bar/index.tsx',
+    ])
+  })
+})

app/templates/nestjsMongoose/E2E/__name__/show.spec.ts.txt renamed to app/templates/nestjs/nestjsMongoose/E2E/__name__/show.spec.ts.txt

@@ -0,0 +1,19 @@
+'use strict'
+
+const path = require('path')
+const helpers = require('yeoman-test')
+const assert = require('yeoman-assert')
+
+describe('\n ReactJS Context ⚛️', () => {
+  beforeAll(() => {
+    return helpers
+      .run(path.join(__dirname, '../../app'))
+      .withOptions({ path: './Foo' })
+      .withArguments('Bar')
+      .withPrompts({ framework: 'reactjs', template: 'reactjsContext' })
+  })
+
+  it('should create all files from resource Bar in folder Foo', () => {
+    assert.file(['./Foo/contexts/BarContext.tsx'])
+  })
+})

app/templates/nestjsMongoose/E2E/__name__/store.spec.ts.txt renamed to app/templates/nestjs/nestjsMongoose/E2E/__name__/store.spec.ts.txt

@@ -0,0 +1,19 @@
+'use strict'
+
+const path = require('path')
+const helpers = require('yeoman-test')
+const assert = require('yeoman-assert')
+
+describe('\n ReactJS Hook ⚛️', () => {
+  beforeAll(() => {
+    return helpers
+      .run(path.join(__dirname, '../../app'))
+      .withOptions({ path: './Foo' })
+      .withArguments('Bar')
+      .withPrompts({ framework: 'reactjs', template: 'reactjsHook' })
+  })
+
+  it('should create all files from resource Bar in folder Foo', () => {
+    assert.file(['./Foo/hooks/useBar.tsx'])
+  })
+})