sh-snippets README

This snippets is for oriental-salad team. It is used for creating a new file with a template.

constraints

Need vscode 1.74.3+.

Use for

1. Typescript
2. React Functional Component
3. Next.js 13+ app router
4. Tailwindcss
5. Zustand
6. Jest

Snippets

orct - Common Type

// file name: test.ts
export type test = ;

orci - Common Interface

// file name: test.ts
export interface test {}

orcuf - Common Util Fnc

// file name: test.ts
export const test = () => {};

orch - Common hook

// file name: test.tsx
export const test = () => {};

orcc - Common Constant

// file name: test.tsx
export const test = {};

orzsd - Zustand Store With Devtools

// file name: test.tsx
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';

type State = {};

type Actions = {
  reset: () => void;
};

const initialState: State = {};

const test = create(
  devtools<State & Actions>((set) => ({
    ...initialState,
    reset: () => set(initialState),
  })),
);

export default test;

ornp - Next.js Page

export default function Page() {
  return <main className=""></main>;
}

ornla - Next.js Layout

interface Props {
  children: React.ReactNode;
}

export default function Layout({ children }: Props) {
  return <div>{children}</div>;
}

ornlo - Next.js Loading

export default function Loading() {
  return <div className=""></div>;
}

orne - Next.js Error

'use client';

interface Props {
  error: Error & { digest?: string };
  reset: () => void;
}

export default function Error({ error, reset }: Props) {
  return (
    <div className="">
      Error: {error.message}
      <button onClick={() => reset()}>Try again</button>
    </div>
  );
}

ornnf - Next.js Not Found

export default function NotFound() {
  return <div className=""></div>;
}

orbc - Basic Component

// file name: test.tsx
interface Props {}

export default function test({}: Props) {
  return <div className=""></div>;
}

orjt - Jest Testing

describe('', () => {
  it('', () => {
    // given
    // when
    // then
  });
});

### orus - use client

```typescript
'use client';