From 521e3225192f26c8435f290a173fc5ec09eff561 Mon Sep 17 00:00:00 2001
From: henriquecesp <henriquecesps4@gmail.com>
Date: Sun, 24 Oct 2021 15:29:32 -0300
Subject: [PATCH] feat(templates): react components type templates
---
.../components/__name__/component.tsx.txt | 22 ++++++
.../components/__name__/index.tsx.txt | 1 +
.../contexts/__name__Context.tsx.txt | 71 +++++++++++++++++++
.../reactjsHook/hooks/use__name__.tsx.txt | 10 +++
.../components/__name__/component.tsx.txt | 35 +++++++++
.../components/__name__/index.tsx.txt | 1 +
.../components/__name__/component.tsx.txt | 28 ++++++++
.../components/__name__/index.tsx.txt | 1 +
8 files changed, 169 insertions(+)
create mode 100644 app/templates/reactjsComponent/components/__name__/component.tsx.txt
create mode 100644 app/templates/reactjsComponent/components/__name__/index.tsx.txt
create mode 100644 app/templates/reactjsContext/contexts/__name__Context.tsx.txt
create mode 100644 app/templates/reactjsHook/hooks/use__name__.tsx.txt
create mode 100644 app/templates/reactjsMui/components/__name__/component.tsx.txt
create mode 100644 app/templates/reactjsMui/components/__name__/index.tsx.txt
create mode 100644 app/templates/reactjsStyled/components/__name__/component.tsx.txt
create mode 100644 app/templates/reactjsStyled/components/__name__/index.tsx.txt
diff --git a/app/templates/reactjsComponent/components/__name__/component.tsx.txt b/app/templates/reactjsComponent/components/__name__/component.tsx.txt
new file mode 100644
index 0000000..b51118c
--- /dev/null
+++ b/app/templates/reactjsComponent/components/__name__/component.tsx.txt
@@ -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 %>
diff --git a/app/templates/reactjsComponent/components/__name__/index.tsx.txt b/app/templates/reactjsComponent/components/__name__/index.tsx.txt
new file mode 100644
index 0000000..3bfb4f7
--- /dev/null
+++ b/app/templates/reactjsComponent/components/__name__/index.tsx.txt
@@ -0,0 +1 @@
+export { default } from './'
diff --git a/app/templates/reactjsContext/contexts/__name__Context.tsx.txt b/app/templates/reactjsContext/contexts/__name__Context.tsx.txt
new file mode 100644
index 0000000..be84888
--- /dev/null
+++ b/app/templates/reactjsContext/contexts/__name__Context.tsx.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);
diff --git a/app/templates/reactjsHook/hooks/use__name__.tsx.txt b/app/templates/reactjsHook/hooks/use__name__.tsx.txt
new file mode 100644
index 0000000..c8a4eff
--- /dev/null
+++ b/app/templates/reactjsHook/hooks/use__name__.tsx.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 %>;
diff --git a/app/templates/reactjsMui/components/__name__/component.tsx.txt b/app/templates/reactjsMui/components/__name__/component.tsx.txt
new file mode 100644
index 0000000..77ac341
--- /dev/null
+++ b/app/templates/reactjsMui/components/__name__/component.tsx.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 %>
diff --git a/app/templates/reactjsMui/components/__name__/index.tsx.txt b/app/templates/reactjsMui/components/__name__/index.tsx.txt
new file mode 100644
index 0000000..3bfb4f7
--- /dev/null
+++ b/app/templates/reactjsMui/components/__name__/index.tsx.txt
@@ -0,0 +1 @@
+export { default } from './'
diff --git a/app/templates/reactjsStyled/components/__name__/component.tsx.txt b/app/templates/reactjsStyled/components/__name__/component.tsx.txt
new file mode 100644
index 0000000..95452f8
--- /dev/null
+++ b/app/templates/reactjsStyled/components/__name__/component.tsx.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 %>
diff --git a/app/templates/reactjsStyled/components/__name__/index.tsx.txt b/app/templates/reactjsStyled/components/__name__/index.tsx.txt
new file mode 100644
index 0000000..3bfb4f7
--- /dev/null
+++ b/app/templates/reactjsStyled/components/__name__/index.tsx.txt
@@ -0,0 +1 @@
+export { default } from './'