Merge pull request #1 from juunie-roh/dev

release-1.5.0
juunie-roh · Dec 22, 2023 · c18f0cc · c18f0cc
2 parents ba1d86a + 5fb694d
commit c18f0cc
Show file tree

Hide file tree

Showing 13 changed files with 1,075 additions and 1,134 deletions.
diff --git a/.github/workflows/update-deps.yml b/.github/workflows/update-deps.yml
@@ -9,7 +9,7 @@ jobs:
   update:
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
 
     name: Update all dependencies
     runs-on: ubuntu-latest
@@ -23,8 +23,8 @@ jobs:
           cache: 'yarn'
       - run: yarn --frozen-lockfile
 
-      - run: yarn upgrade-interactive --latest
-      - run: rm -Rf node_modules package-lock.json
+      - run: yarn upgrade --latest
+      - run: rm -Rf node_modules yarn-lock.json
       - run: yarn
       - name: Create Pull Request
         uses: peter-evans/create-pull-request@v4

diff --git a/package.json b/package.json
@@ -1,71 +1,72 @@
 {
   "name": "setting-up-next",
-  "version": "1.3.5",
+  "version": "1.5.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
+    "clean": "rimraf .next .swc out coverage",
     "lint": "next lint",
     "format": "next lint --fix && prettier '**/*.{json,yaml}' --write --ignore-path .gitignore",
     "check-types": "tsc --noEmit --pretty",
     "test": "jest",
     "commit": "cz",
-    "prepare": "husky install",
-    "postbuild": "next-sitemap",
     "storybook": "storybook dev -p 6006",
-    "storybook:build": "storybook build"
+    "storybook:build": "storybook build",
+    "prepare": "husky install",
+    "postbuild": "next-sitemap"
   },
   "dependencies": {
     "@headlessui/react": "^1.7.17",
-    "@heroicons/react": "^2.0.18",
+    "@heroicons/react": "^2.1.1",
     "@hookform/resolvers": "^3.3.2",
     "@t3-oss/env-nextjs": "^0.7.1",
-    "next": "14.0.3",
+    "next": "14.0.4",
     "next-seo": "^6.4.0",
     "next-sitemap": "^4.2.3",
     "react": "^18",
     "react-dom": "^18",
-    "react-hook-form": "^7.48.2",
+    "react-hook-form": "^7.49.2",
     "zod": "^3.22.4"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.4.3",
     "@commitlint/config-conventional": "^18.4.3",
     "@commitlint/cz-commitlint": "^18.4.3",
-    "@next/bundle-analyzer": "^14.0.3",
-    "@storybook/addon-essentials": "^7.6.4",
-    "@storybook/addon-interactions": "^7.6.4",
-    "@storybook/addon-links": "^7.6.4",
+    "@next/bundle-analyzer": "^14.0.4",
+    "@storybook/addon-essentials": "^7.6.6",
+    "@storybook/addon-interactions": "^7.6.6",
+    "@storybook/addon-links": "^7.6.6",
     "@storybook/addon-onboarding": "^1.0.10",
-    "@storybook/blocks": "^7.6.4",
-    "@storybook/nextjs": "^7.6.4",
-    "@storybook/react": "^7.6.4",
-    "@storybook/test": "^7.6.4",
+    "@storybook/blocks": "^7.6.6",
+    "@storybook/nextjs": "^7.6.6",
+    "@storybook/react": "^7.6.6",
+    "@storybook/test": "^7.6.6",
     "@storybook/testing-library": "^0.2.2",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.1.2",
     "@types/jest": "^29.5.11",
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "@typescript-eslint/eslint-plugin": "^6.13.1",
-    "@typescript-eslint/parser": "^6.13.2",
+    "@types/node": "^20.10.5",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "@typescript-eslint/eslint-plugin": "^6.15.0",
+    "@typescript-eslint/parser": "^6.15.0",
     "autoprefixer": "^10.0.1",
     "commitizen": "^4.3.0",
-    "cssnano": "^6.0.1",
-    "eslint": "^8.55.0",
+    "cssnano": "^6.0.2",
+    "eslint": "^8.56.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.1.0",
-    "eslint-config-next": "^14.0.3",
+    "eslint-config-next": "^14.0.4",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-jest-dom": "^5.1.0",
     "eslint-plugin-jest-formatting": "^3.1.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-playwright": "^0.19.0",
-    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-playwright": "^0.20.0",
+    "eslint-plugin-prettier": "^5.1.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
@@ -76,13 +77,13 @@
     "husky": "^8.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "lint-staged": "^15.1.0",
+    "lint-staged": "^15.2.0",
     "postcss": "^8",
-    "prettier": "^3.1.0",
-    "semantic-release": "^22.0.8",
-    "storybook": "^7.6.4",
-    "tailwindcss": "^3.3.0",
-    "typescript": "^5"
+    "prettier": "^3.1.1",
+    "semantic-release": "^22.0.12",
+    "storybook": "^7.6.6",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.3.3"
   },
   "config": {
     "commitizen": {

diff --git a/src/components/NextLinkBox.stories.tsx b/src/components/NextLinkBox.stories.tsx
@@ -3,11 +3,11 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { NextLinkBox } from './NextLinkBox';
 
 const meta = {
-  title: 'Example/NextLinkBox',
+  title: 'Example/components/NextLinkBox',
   component: NextLinkBox,
   tags: ['autodocs'],
   parameters: {
-    layout: 'fullscreen',
+    layout: 'center',
   },
 } satisfies Meta<typeof NextLinkBox>;
 

diff --git a/src/templates/DefaultSection.tsx → src/layouts/DefaultSection.tsx b/src/templates/DefaultSection.tsx → src/layouts/DefaultSection.tsx
diff --git a/src/layouts/Meta.test.tsx b/src/layouts/Meta.test.tsx
@@ -7,7 +7,6 @@ jest.mock(
   'next/head',
   () =>
     function Head(props: { children: ReactNode }) {
-      // eslint-disable-next-line testing-library/no-node-access
       return props.children;
     },
 );

diff --git a/src/layouts/index.ts b/src/layouts/index.ts
@@ -0,0 +1,4 @@
+import { DefaultSection } from './DefaultSection';
+import { Meta } from './Meta';
+
+export { DefaultSection, Meta };
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
@@ -1,8 +1,8 @@
 import Image from 'next/image';
 
 import { NextLinkBox } from '@/components';
-import { Meta } from '@/layouts/Meta';
-import { DefaultSection, Main } from '@/templates';
+import { DefaultSection, Meta } from '@/layouts';
+import { Main } from '@/templates';
 
 const linkBoxData = [
   {
@@ -38,10 +38,8 @@ const About = () => (
     }
   >
     <DefaultSection>
-      <div className="relative z-[-1] flex place-items-baseline before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-transparent before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px]">
-        <p className="mr-3 text-sm text-gray-600 lg:text-lg">
-          This Project is built with
-        </p>
+      <div className="relative z-[-1] flex place-items-baseline before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-transparent before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:lg:h-[360px] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40">
+        <p className="mr-3 text-lg text-gray-600">Built with</p>
         <Image
           className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
           src="/next.svg"
@@ -64,6 +62,70 @@ const About = () => (
         })}
       </div>
     </DefaultSection>
+    <DefaultSection>
+      <ul className="list-disc text-gray-600">
+        <li className="-ml-5 mb-3 list-none border-b border-gray-300 text-lg text-neutral-800 dark:border-neutral-800 dark:text-gray-300">
+          Packages Used
+        </li>
+        <li>
+          🔥 Type checking{' '}
+          <a className="underline" href="https://www.typescriptlang.org">
+            TypeScript
+          </a>
+        </li>
+        <li>
+          💎 Integrate with{' '}
+          <a className="underline" href="https://tailwindcss.com">
+            Tailwind CSS
+          </a>
+        </li>
+        <li>✅ Strict Mode for TypeScript and React 18</li>
+        <li>♻️ Type-safe environment variables with T3 Env</li>
+        <li>⌨️ Form with React Hook Form</li>
+        <li>
+          📏 Linter with{' '}
+          <a className="underline" href="https://eslint.org">
+            ESLint
+          </a>{' '}
+          (default NextJS, NextJS Core Web Vitals, Tailwind CSS and Airbnb
+          configuration)
+        </li>
+        <li>
+          💖 Code Formatter with{' '}
+          <a className="underline" href="https://prettier.io">
+            Prettier
+          </a>
+        </li>
+        <li>🦊 Husky for Git Hooks</li>
+        <li>🚫 Lint-staged for running linters on Git staged files</li>
+        <li>
+          🚓 Lint git commit with{' '}
+          <a className="underline" href="https://commitlint.js.org">
+            Commitlint
+          </a>
+        </li>
+        <li>📓 Write standard compliant commit messages with Commitizen</li>
+        <li>🦺 Unit Testing with Jest and React Testing Library</li>
+        <li>👷 Run tests on pull request with GitHub Actions</li>
+        <li>
+          🎉{' '}
+          <a className="underline" href="https://storybook.js.org">
+            Storybook
+          </a>{' '}
+          for UI development
+        </li>
+        <li>🎁 Automatic changelog generation with Semantic Release</li>
+        <li>💡 Absolute Imports using `@` prefix</li>
+        <li>🤖 SEO metadata, JSON-LD and Open Graph tags with Next SEO</li>
+        <li>🗺️ Sitemap.xml and robots.txt with next-sitemap</li>
+        <li className="my-3 -ml-5 list-none border-b border-gray-300 text-lg text-neutral-800 dark:border-neutral-800 dark:text-gray-300">
+          Built-in feature from Next.js
+        </li>
+        <li>☕ Minify HTML & CSS</li>
+        <li>💨 Live reload</li>
+        <li>✅ Cache busting</li>
+      </ul>
+    </DefaultSection>
   </Main>
 );
 

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,5 +1,5 @@
-import { Meta } from '@/layouts/Meta';
-import { DefaultSection, Main } from '@/templates';
+import { DefaultSection, Meta } from '@/layouts';
+import { Main } from '@/templates';
 
 const Index = () => (
   <Main

diff --git a/src/pages/portfolio/index.tsx b/src/pages/portfolio/index.tsx
@@ -0,0 +1,14 @@
+import { DefaultSection, Meta } from '@/layouts';
+import { Main } from '@/templates';
+
+const Portfolio = () => {
+  return (
+    <Main meta={<Meta title="Works" description="Portfolio of my works" />}>
+      <DefaultSection>
+        <h2 className="text-gray-900 dark:text-gray-100">Portfolios</h2>
+      </DefaultSection>
+    </Main>
+  );
+};
+
+export default Portfolio;
diff --git a/src/templates/Main.stories.tsx b/src/templates/Main.stories.tsx
@@ -5,7 +5,7 @@ import { Main } from './Main';
 
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 const meta = {
-  title: 'Example/Main',
+  title: 'Example/templates/Main',
   component: Main,
   tags: ['autodocs'],
   parameters: {

diff --git a/src/templates/Main.tsx b/src/templates/Main.tsx
@@ -13,8 +13,8 @@ type IMainProps = {
 };
 
 const menuData = [
-  { id: 'about', name: 'about', path: '/about' },
-  { id: 'item1', name: 'item1', path: '/item1' },
+  { id: 'about', name: 'About', path: '/about' },
+  { id: 'portfolio', name: 'Portfolio', path: '/portfolio' },
   { id: 'item2', name: 'item2', path: '/item2' },
 ];
 
@@ -27,9 +27,9 @@ const Main = (props: IMainProps) => {
       {props.meta}
 
       <div className="mx-auto">
-        <header className="fixed left-0 top-0 z-10 flex w-full items-center justify-between border-b border-gray-300 bg-gradient-to-b from-zinc-200 px-8 py-4 backdrop-blur-xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:px-12 lg:py-8">
+        <header className="fixed left-0 top-0 z-10 flex w-full items-center justify-between border-b border-gray-300 bg-gradient-to-b from-zinc-200 px-8 py-4 backdrop-blur-xl lg:px-12 lg:py-8 dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit">
           <div className="flex items-baseline gap-4">
-            <h1 className="font-antonio text-2xl font-bold text-gray-900 dark:text-gray-100 lg:text-3xl">
+            <h1 className="font-antonio text-2xl font-bold text-gray-900 lg:text-3xl dark:text-gray-100">
               <Link href="/">{AppConfig.title}</Link>
             </h1>
             <nav>
@@ -83,7 +83,7 @@ const Main = (props: IMainProps) => {
             onClose={setMobileMenuOpen}
           >
             <div className="fixed inset-0 z-10">
-              <Dialog.Panel className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto from-zinc-200 px-8 py-4 backdrop-blur-xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
+              <Dialog.Panel className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto from-zinc-200 px-8 py-4 backdrop-blur-xl sm:max-w-sm sm:ring-1 sm:ring-gray-900/10 dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit">
                 <div className="flex items-center justify-between">
                   <h1 className="font-antonio text-2xl font-bold text-gray-900 dark:text-gray-100">
                     <Link href="/">{AppConfig.title}</Link>
@@ -138,7 +138,7 @@ const Main = (props: IMainProps) => {
           {props.children}
         </main>
 
-        <footer className="border-t border-gray-300 py-6 text-center text-sm dark:border-neutral-800 lg:py-8 lg:text-base">
+        <footer className="border-t border-gray-300 py-6 text-center text-sm lg:py-8 lg:text-base dark:border-neutral-800">
           © Copyright {new Date().getFullYear()} {AppConfig.title}. Made
           by&nbsp;
           <a

diff --git a/src/templates/index.ts b/src/templates/index.ts
@@ -1,4 +1,3 @@
-import { DefaultSection } from './DefaultSection';
 import { Main } from './Main';
 
-export { DefaultSection, Main };
+export { Main };