feat(templates): react components type templates

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 %>

app/templates/reactjsComponent/components/__name__/index.tsx.txt

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

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

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 %>;

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 %>

app/templates/reactjsMui/components/__name__/index.tsx.txt

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

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 %>

app/templates/reactjsStyled/components/__name__/index.tsx.txt

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