Merge pull request #14 from junekimdev/Implement-cording-standards

Implement cording standards

Author: junekimdev

coding-standards.md

@@ -0,0 +1,85 @@
+# Coding Standards
+
+## Table of Contents
+
+1. [Naming Convention](#naming-convention)
+1. [Import](#import)
+
+---
+
+## Naming Convention
+
+### Format Options[^1]
+
+1. `camelCase` : standard `camelCase` format - no underscores are allowed between characters, and consecutive capitals are allowed (i.e. both `myID` and `myId` - are valid).
+1. `PascalCase` : same as `camelCase`, except the first character must be upper-case.
+1. `snake_case` : standard `snake_case` format - all characters must be lower-case, and underscores are allowed.
+1. `strictCamelCase` : same as `camelCase`, but consecutive capitals are not allowed (i.e. `myId` is valid, but `myID` is not).
+1. `StrictPascalCase` : same as `strictCamelCase`, except the first character must be upper-case.
+1. `UPPER_CASE` : same as `snake_case`, except all characters must be upper-case.
+
+### Format of Names
+
+#### General
+
+|   Name Of | Format       | Prefix               |
+| --------: | :----------- | -------------------- |
+|    Classe | `PascalCase` |                      |
+|  Variable | `camelCase`  |                      |
+|  Function | `camelCase`  |                      |
+|      File | `camelCase`  | (component name)[^2] |
+| Directory | `camelCase`  |                      |
+|  Constant | `UPPER_CASE` |                      |
+
+##### Files for React Component
+
+1. Prefix with component name
+1. Postfix with utility
+1. Use **singular** form for `type` and `state` files
+1. Postfix view-file with import-name of the `View` component
+1. Extension should be `tsx` only when `react` element is exported
+1. Example:
+   - `compInteractor.ts`
+   - `compPresenter.tsx`
+   - `compViewInput.tsx`
+   - `compState.ts`
+   - `compType.ts`
+
+#### React Variables
+
+|   Name Of | Format       | Prefix |
+| --------: | :----------- | ------ |
+| Component | `PascalCase` |        |
+|      Type | `PascalCase` |        |
+| Interface | `PascalCase` |        |
+|     State | `camelCase`  |        |
+|      Hook | `camelCase`  | `use`  |
+|       URL | `UPPER_CASE` |        |
+
+## Import
+
+### Local
+
+1. Import local states as `mState` and use them with dot notation
+1. Import local types as `mType` and use them with dot notation
+1. Import example:
+   - State : `import * as mState from './compState';`
+   - Type : `import * as mType from './compType';`
+1. Usage example:
+   - State : `const inputValue = useAtom(mState.inputValue);`
+   - Type :`const inputValue : mType.InputValue = {};`
+
+### Global
+
+1. Import global states as `gState` and use them with dot notation
+1. Import global types as `gType` and use them with dot notation
+1. Import example:
+   - State : `import * as gState from '../../controller/data/states';`
+   - Type : `import * as gType from '../../controller/data/types';`
+1. Usage example:
+   - State : `const inputValue = useAtom(gState.inputValue);`
+   - Type :`const inputValue : gType.InputValue = {};`
+
+[^1]: <https://typescript-eslint.io/rules/naming-convention/#format-options>
+
+[^2]: `( )` means "if applicable"

components/errors/errorsViewImage.tsx

@@ -1,13 +1,13 @@
 import { useAtomValue } from 'jotai';
 import Image from 'next/image';
 import Link from 'next/link';
-import { stateErrorCode } from '../../controllers/data/states';
+import * as gState from '../../controllers/data/states';
 import imageSrc404 from '../../public/assets/images/404_broken_robot.png';
 import imageSrc500 from '../../public/assets/images/500_faulty_dog.png';
 import styles from './errors.module.scss';
 
 const View = () => {
-  const errorCode = useAtomValue(stateErrorCode);
+  const errorCode = useAtomValue(gState.errorCode);
 
   return (
     <div className={styles.errorImage}>

components/example/examplePresenter.tsx

@@ -1,11 +1,10 @@
 import { placeholderUrl } from '../../controllers/apiURLs';
 import { useStaticQuery } from '../../controllers/net/staticQuery';
 import styles from './example.module.scss';
-import { ExamplePost } from './exampleType';
+import * as mType from './exampleType';
 import Posts from './exampleViewPosts';
-
 const Presenter = () => {
-  const query = useStaticQuery<ExamplePost[]>(placeholderUrl);
+  const query = useStaticQuery<mType.Post[]>(placeholderUrl);
 
   let contents;
   switch (query.status) {

components/example/exampleType.ts

@@ -1,4 +1,4 @@
-export type ExamplePost = {
+export type Post = {
   id: number;
   title: string;
   body: string;

components/example/exampleViewPostSingle.tsx

@@ -1,9 +1,9 @@
 import { memo } from 'react';
 import styles from './example.module.scss';
-import { ExamplePost } from './exampleType';
+import * as mType from './exampleType';
 
 // This uses props to get data from parent
-const View = ({ post }: { post: ExamplePost }) => {
+const View = ({ post }: { post: mType.Post }) => {
   return <p className={styles.view}>{post.title}</p>;
 };
 

components/example/exampleViewPosts.tsx

@@ -1,9 +1,9 @@
 import styles from './example.module.scss';
-import { ExamplePost } from './exampleType';
+import * as mType from './exampleType';
 import PostSingle from './exampleViewPostSingle';
 
-const View = ({ data }: { data: ExamplePost[] }) => {
-  const dataMapper = (post: ExamplePost) => <PostSingle key={post.id} post={post} />;
+const View = ({ data }: { data: mType.Post[] }) => {
+  const dataMapper = (post: mType.Post) => <PostSingle key={post.id} post={post} />;
 
   return <div className={styles.view}>{data.map(dataMapper)}</div>;
 };

components/meta/meta.tsx

@@ -1,8 +1,8 @@
 import Head from 'next/head';
 import { useGTM } from './gtm';
-import { TMPropsMeta } from './metaType';
+import * as mType from './metaType';
 
-const Meta = (props: TMPropsMeta) => {
+const Meta = (props: mType.Props) => {
   const authorName = 'junekimdev';
   const siteName = "another junekimdev's website";
   const homeUrl = process.env.NEXT_PUBLIC_URL ?? 'localhost:3000';

components/meta/metaType.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 
-export type TMPropsMeta = {
+export type Props = {
   title: string;
   desc: string;
   url: string;

controllers/data/states.ts

@@ -1,3 +1,3 @@
 import { atom } from 'jotai';
 
-export const stateErrorCode = atom(500);
+export const errorCode = atom(500);

controllers/data/types.ts

@@ -1 +1 @@
-export type TypeError = { code: number; message: string };
+export type Error = { code: number; message: string };