Folder Templates

If you're bored of typing the same boilerplate stuff every time !! this is a Visual studio code extension for using folder templates.

Use

Right click in the file explorer and select Create new Folder with Template.
Run Create new Folder with Template using the command palette (Ctrl+Shift+P).

Settings

File > preference > settings

In User Settings go to Extensions > Templates For React > Structures for templates configuration

disableTemplate

You can enable/disable a template with the disableTemplate property in the extension setting. If disableTemplate is true, then the corresponding template will no longer appear in the list of available templates.

namingConvention

You can add a convention naming with the namingConvention property. By default namingConvention is equal to 'noNC' (no naming convention). You can modify 'noNC' with: 'camelCase', 'pascalCase' or 'snakeCase'".

In User Settings go to Extensions > Templates For React > Props for global configuration

import React

By default the templates are built on versions lower than 18 for react. By enabling the isReact18 property, you can remove the import line from react;

Context

Structure Context

[Name]
|--[Name]Provider.tsx
|--use[Name]Context.ts
|--index.ts

Details Context

[Name]Provider.tsx

import * as React from "react";

export interface [Name]ContextProps { }

export const [Name] = React.createContext<[Name]ContextProps>({});

export const [Name]Provider = ({ children }: PropsWithChildren<[Name]ContextProps>) => {
  return <[Name].Provider value={{}}>{children}</[Name].Provider>;
};

use[Name]Context.ts

import * as React from "react";
import { [Name] } from "./[Name]Provider";

export const use[Name]Context = () => {
  const context = React.useContext([Name]);

  // Uncomment if your context doesn't have reasonable defaults
  //   if (context === undefined) {
  //     throw new Error(
  //       "use[Name]Context must be used within a [Name]Provider"
  //     );
  //   }

  return context;
};

index.ts

export { [Name]Provider } from "./[Name]Provider";
export {  use[Name]Context } from "./use[Name]Context";

ComponentStory

Structure ComponentStory

[Name]
|--[Name].spec.tsx
|--[Name].stories.tsx
|--[Name].tsx
|--index.ts

Details ComponentStory

[Name].spec.tsx

import * as React from 'react';
import { render, screen } from '@testing-library/react';
import [Name], { [Name]Props } from './[Name]';

describe('<[Name] />', () => {
    it('should render', () => {
        const { container }  = render(<[Name] />);
        expect(container).toBeInTheDocument();
    });
});

[Name].stories.tsx

import * as React from 'react';
import { Meta, Story } from '@storybook/react';
import [Name], { [Name]Props } from './[Name]';

export default {
    title: "/[Name]",
    component: [Name],
} as Meta;

const Template: Story<[Name]Props> = (args) => {
    return <[Name] {...args} />;
};

export const Default = Template.bind({});

[Name].tsx

import * as React from 'react';

export interface [Name]Props {}

const [Name]: React.FC<[Name]Props> = ({}) => {
    return <div>[Name]</div>
};

index.ts

export { [Name] } from "./[Name]";

Component

Structure Component

[Name]
|--[Name].spec.tsx
|--[Name].tsx

Details Component

[Name].spec.tsx

import * as React from 'react';
import { cleanup, render, screen } from '@testing-library/react';
import { [Name] } from '../[Name]';

describe('[Name]', () => {
    afterEach(() => {
        cleanup();
    });
    it('should render [Name]', () => {
        // Given

        // When
        const { container } = render(<[Name] />);

        //Then
        expect(container).toBeInTheDocument();
    });
});

[Name].tsx

import * as React from 'react';

export interface [Name]Props {

}

export const [Name]: React.FC<[Name]Props> = () => {
    return (
        <div>
            [Name]
        </div>
    );
};

[Name].displayName = '[Name]';

Function

Structure Function

[Name]
|--[Name].spec.ts
|--[Name].ts

Details Function

[Name].spec.ts

import { [Name] } from "./[Name]";

describe('[Name]', () => {
    it('should ', () => {
        
    });
});

[Name].ts

export const [Name] = () => {

};

Hook

Structure Hook

use[Name]
|--use[Name].spec.tsx
|--use[Name].tsx

Details Hook

use[Name].tsx

import * as React from "react";

export const use[Name] = () => {
  return () => {
    return 2;
  };
};

use[Name].spec.tsx

import { renderHook } from '@testing-library/react-hooks';
import { [Name] } from './[Name]';

describe('[Name]', () => {
    it('should return 2', () => {
        const { result } = renderHook(() => [Name]());
        const value = result.current();
        expect(value).toEqual(2);
    });
});

StoreZustand

Structure StoreZustand

[Name]
|--action
    |--index.ts
    |--setIndex.tsx
|--use[Name].tsx

Details StoreZustand

use[Name].tsx

import create, { StoreApi } from "zustand";
import { setIndex } from "./actions";

interface [Name]State {
    index: number;
};
interface [Name]Actions {
    setIndex: (value: number) => void;
};

const initialState: [Name]State = {
    index: 0,
}

export type [Name]StoreType = [Name]State & [Name]Actions;

export type Set[Name]Store = StoreApi<[Name]StoreType>["setState"];
export type Get[Name]Store = StoreApi<[Name]StoreType>["getState"];

export const use[Name]Store = create<[Name]State & [Name]Actions>(set => ({
    ...initialState,
    setIndex: setIndex(set)
}))

action/setIndex.ts

import { Set[Name]Store } from "../use[Name]Store";

export const setIndex = (set: Set[Name]Store) => (value: number) =>
  set(_state => ({
    index: value
  }));

action/index.ts

export { setIndex } from "./setIndex";

useMutation Hooks

Structure useMutation Hooks

[Name]
|--[Name].spec.tsx
|--[Name].tsx
|--index.tsx

Details useMutation Hooks

--[Name].spec.tsx

import * as React from 'react';
import { fireEvent, render, waitFor } from '@testing-library/react';
import { MutationCache, QueryCache, QueryClient, QueryClientProvider  } from 'react-query';

const renderWithClient = (client: QueryClient, ui: React.ReactElement) => {
    const { rerender, ...result } = render(
        <QueryClientProvider client={client}>{ui}</QueryClientProvider>
    );
    return {
        ...result,
        rerender: (rerenderUi: React.ReactElement) =>
            rerender(
                <QueryClientProvider client={client}>
                    {rerenderUi}
                </QueryClientProvider>
            ),
    };
};

describe('use[Name]', () => {
    const queryCache = new QueryCache();
    const mutationCache = new MutationCache();
    const queryClient = new QueryClient({ queryCache, mutationCache });

   it("should ", async () => {
    function Page() {
      const { mutate, data = { label: "" } } = use[Name]();

      return (
        <div>
          <h1 data-testid="title">{data["label"]}</h1>
          <button onClick={() => mutate()}>mutate</button>
        </div>
      );
    }
    const { getByTestId, getByText } = renderWithClient(queryClient, <Page />);

    expect(getByTestId("title").textContent).toBe("");
    fireEvent.click(getByText("mutate"));

    await waitFor(() => getByTestId("title"));

    expect(getByTestId("title").textContent).toBe();
  });
});

--[Name].tsx

import { useMutation } from 'react-query';

const [Name] = () => useMutation(() => {
  // return fetch("/api/data") as json
  return "Hello";
}, {
    onMutate: variables => {
        // A mutation is about to happen!
    
        // Optionally return a context containing data to use when for example rolling back
      },
      onError: (error, variables, context) => {
        // An error happened!
        console.log(`rolling back optimistic update with id ${context}`)
      },
      onSuccess: (data, variables, context) => {
        // Boom baby!
      },
      onSettled: (data, error, variables, context) => {
        // Error or success... doesn't matter!
      },
});

export default [Name];

--index.tsx

 export { default } from './[Name]';

useQuery Hooks

Structure useQuery Hooks

[Name]
|--[Name].spec.tsx
|--[Name].tsx
|--index.tsx

Details useQuery Hooks

--[Name].spec.tsx

import { QueryClient, QueryClientProvider } from 'react-query';
import { renderHook } from '@testing-library/react-hooks';
import { [Name] } from './[Name]';

const queryClient = new QueryClient();
const wrapper = ({ children }) => (
    <QueryClientProvider client={queryClient}>
        {children}
    </QueryClientProvider>
);

describe('[Name]', () => {
    it('should ', async () => {        
        const { result, waitFor } = renderHook(() => [Name](), { wrapper });

        await waitFor(() => result.current.isSuccess);
        
        expect(result.current.data).toEqual("Hello");
    });
});

--[Name].tsx

import { useQuery } from 'react-query';

const [Name] = () => {
    return useQuery("queryHooks", () => {
        // return fetch("/api/data") as json
        return "Hello";
    });
};

export default [Name];

--index.tsx

export { default } from './[Name]';

Machine XState

Structure Machine XState

[Name]
|--actions
    |--actionExample.spec.ts
    |--actionExample.ts
|--guards
    |--guardExample.spec.ts
    |--guardExample.ts
|--services
|--types
    |--index.ts
|--[Name]Machine.ts

Details Machine XState

--actions > actionExample.spec.ts

--actions > actionExample.ts

--guards > guardExample.spec.ts

--actions > guardExample.ts

--types > index.ts

--[Name]Machine.ts

Action Assign XState

Structure Action Assign XState

[Name]Assign
|--[Name]Assign.spec.ts
|--[Name]Assign.ts

Details Action Assign XState

[Name]Assign.spec.ts

import { TimerContext } from '../../types';
import { ActionTypes } from "xstate";
import { [Name]Assign, [Name]Assignment } from "./assign[Name]";

describe('assign[Name]', () => {
    it('should return object', () => {
        const result = assign[Name];
        expect(result.type).toEqual(ActionTypes.Assign);
    });
    it('should return assignement', () => {
        const context: Context = {
            
        }
        const newContext = assignment[Name](https://github.com/VincBour/templates_for_react_vscode_ext/blob/HEAD/context, { type: ''});
        expect(newContext.).toEqual();
    });
});

[Name]Assign.ts

import { ActionTypes, AssignAction } from "xstate";

export const [Name]Assignment = (context: Context, event: Event): Partial<Context> => {
    return {
        elapsed: event.value
    };
}

export const [Name]Assign : AssignAction<Context, Event> = {
    type: ActionTypes.Assign,
    assignment: [Name]Assignment
}

Guard XState

Structure Guard XState

[Name]
|--[Name]Guard.spec.ts
|--[Name]Guard.ts

Details Guard XState

[Name]Assign.spec.ts

import { GuardMeta } from 'xstate';
import { Context, Event } from '../types';
import { [Name]Guard } from './[Name]Guard';

describe('[Name]Guard', () => {
    it('should be defined', () => {
        expect([Name]Guard).toBeDefined();
    });
    it('should return true', () => {
        const result = [Name]Guard({ a: 2, b: 1} as Context, { type: "EVENT_1"}, {} as GuardMeta<Context, Event>);
        expect(result).toBeTruthy();
    });
    it('should return false', () => {
        const result = [Name]Guard({ a: 0, b: 1} as Context, { type: "EVENT_1"}, {} as GuardMeta<Context, Event>);
        expect(result).toBeFalsy();
    });
});

[Name]Assign.ts

import { ConditionPredicate } from "xstate";
import { Context, Event } from "../types";

export const [Name]Guard: ConditionPredicate<Context, Event> = (context: Context) => context.a > context.b;

© Copyright

icon used => https://icon-icons.com/icon/folder-react/161285

TemplatesForReact

vincentB