refactor: build website with camphora-styled

.github/workflows/ci-check.yml

@@ -21,25 +21,25 @@ jobs:
         with:
           app_id: ${{ secrets.IDEALJS_BOT_APP_ID }}
           private_key: ${{ secrets.IDEALJS_BOT_PRIVATE_KEY }}
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           token: ${{ steps.generate_token.outputs.token }}
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           node-version: 18
           cache: yarn
       - name: Install Dependencies
         run: yarn install --immutable
       - name: Install Playwright Browsers
         run: yarn workspace website playwright install --with-deps
-      - name: Update Playwright Snapshot
-        run: yarn workspace website test:e2e -u
+      - name: Update Vitest Snapshot
+        run: yarn workspace website test -u
       - uses: stefanzweifel/git-auto-commit-action@v4
         with:
           commit_message: "chore: update image snapshot"
-      - name: Upload playwright-report
-        uses: actions/upload-artifact@v3
-        if: always()
-        with:
-          path: apps/website/playwright-report/
-          retention-days: 30
+      # - name: Upload playwright-report
+      #   uses: actions/upload-artifact@v3
+      #   if: always()
+      #   with:
+      #     path: apps/website/playwright-report/
+      #     retention-days: 30

.github/workflows/preview.yml

@@ -13,13 +13,64 @@ jobs:
   Deploy-Preview:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: 18
       - name: Pull Vercel Environment Information
         run: yarn dlx vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
       - name: Build Project Artifacts
         run: yarn dlx vercel build --token=${{ secrets.VERCEL_TOKEN }}
       - name: Deploy Project Artifacts to Vercel
-        run: yarn dlx vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}
+        id: deploy
+        run: |
+          yarn dlx vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }} > deploy.log
+          URL=$(cat deploy.log | grep -o 'https://[^ ]*.vercel.app' | head -n1)
+          echo "deploymentUrl=$URL" >> $GITHUB_OUTPUT
+
+      - name: Comment URL to PR
+        uses: actions/github-script@v6
+        id: comment-deployment-url-script
+        env:
+          DEPLOYMENT_URL: ${{ steps.deploy.outputs.deploymentUrl }}
+        with:
+          script: |
+            // Get pull requests that are open for current ref.
+            const pullRequests = await github.rest.pulls.list({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                state: 'open',
+                head: `${context.repo.owner}:${context.ref.replace('refs/heads/', '')}`
+            })
+
+            // Set issue number for following calls from context (if on pull request event) or from above variable.
+            const issueNumber = context.issue.number || pullRequests.data[0].number
+
+            // Retrieve existing bot comments for the PR
+            const {data: comments} = await github.rest.issues.listComments({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: issueNumber,
+            })
+            const botComment = comments.find(comment => {
+                return comment.user.type === 'Bot' && comment.body.includes('Deployed at')
+            })
+
+            const output = "Deployed at " + process.env.DEPLOYMENT_URL
+
+            // If we have a comment, update it, otherwise create a new one
+            if (botComment) {
+                github.rest.issues.updateComment({
+                    owner: context.repo.owner,
+                    repo: context.repo.repo,
+                    comment_id: botComment.id,
+                    body: output
+                })
+            } else {
+                github.rest.issues.createComment({
+                    issue_number: issueNumber,
+                    owner: context.repo.owner,
+                    repo: context.repo.repo,
+                    body: output
+                })
+            }

.github/workflows/production.yml

@@ -13,8 +13,8 @@ jobs:
   Deploy-Production:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: 18
       - name: Pull Vercel Environment Information

.github/workflows/publish.yml

@@ -10,8 +10,8 @@ jobs:
     name: Publish Package
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: 18
           cache: yarn

apps/website/.eslintrc

@@ -16,6 +16,7 @@
       {
         "enableDangerousAutofixThisMayCauseInfiniteLoops": true
       }
-    ]
+    ],
+    "max-lines": ["warn", 200]
   }
 }

apps/website/app/layout.tsx

@@ -1,5 +1,8 @@
+import { light } from "@idealjs/camphora-styled";
 import type { Metadata } from "next";
 
+import LayoutDrawer from "@/features/LayoutDrawer";
+
 export const metadata: Metadata = {
   title: "Create Next App",
   description: "Generated by create next app",
@@ -12,7 +15,9 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body style={{ margin: 0, height: "100vh" }} className={light}>
+        <LayoutDrawer>{children}</LayoutDrawer>
+      </body>
     </html>
   );
 }

apps/website/app/page.tsx

@@ -1,36 +1,95 @@
-import {
-  button,
-  buttonGhost,
-  clickReaction,
-  clickReactionInput,
-  drawer,
-  drawerContent,
-  drawerMenu,
-  drawerOverlay,
-  drawerSide,
-  navbar,
-} from "@idealjs/camphora-styled";
-import clsx from "clsx";
-
 const Page = () => {
   return (
-    <main>
-      <div className={clsx(clickReaction, drawer)}>
-        <input id="test" type="checkbox" className={clickReactionInput} />
-        <div className={drawerContent}>
-          <nav className={navbar}>
-            <label
-              htmlFor="test"
-              className={clsx(button, buttonGhost, "select-none")}
-            >
-              open
-            </label>
-          </nav>
-        </div>
-        <div className={clsx(drawerSide)}>
-          <label htmlFor="test" className={drawerOverlay}></label>
-          <div className={drawerMenu}>menu</div>
-        </div>
+    <main style={{ scrollbarGutter: "stable" }}>
+      <div>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+        repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam, hic
+        voluptate odio. Ut, laudantium quod optio soluta hic velit?
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+        repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam, hic
+        voluptate odio. Ut, laudantium quod optio soluta hic velit?
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+        repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam, hic
+        voluptate odio. Ut, laudantium quod optio soluta hic velit?
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+        repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam, hic
+        voluptate odio. Ut, laudantium quod optio soluta hic velit?
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+        repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam, hic
+        voluptate odio. Ut, laudantium quod optio soluta hic velit?
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+        repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam, hic
+        voluptate odio. Ut, laudantium quod optio soluta hic velit?
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+        repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam, hic
+        voluptate odio. Ut, laudantium quod optio soluta hic velit?
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+        repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam, hic
+        voluptate odio. Ut, laudantium quod optio soluta hic velit?
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+        repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam, hic
+        voluptate odio. Ut, laudantium quod optio soluta hic velit?
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+        repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam, hic
+        voluptate odio. Ut, laudantium quod optio soluta hic velit?
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+        repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam, hic
+        voluptate odio. Ut, laudantium quod optio soluta hic velit?
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+        repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam, hic
+        voluptate odio. Ut, laudantium quod optio soluta hic velit?
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+        repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam, hic
+        voluptate odio. Ut, laudantium quod optio soluta hic velit?
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+        repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam, hic
+        voluptate odio. Ut, laudantium quod optio soluta hic velit?
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+        repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam, hic
+        voluptate odio. Ut, laudantium quod optio soluta hic velit?
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+        repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam, hic
+        voluptate odio. Ut, laudantium quod optio soluta hic velit?
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+        repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam, hic
+        voluptate odio. Ut, laudantium quod optio soluta hic velit?
+      </div>
+      <div>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia id
+        repudiandae quasi tempore dolore. Omnis cumque id modi dolor veniam, hic
+        voluptate odio. Ut, laudantium quod optio soluta hic velit?
       </div>
     </main>
   );

apps/website/components/Drawer/DrawerContent.tsx

@@ -0,0 +1,12 @@
+import { drawerContent } from "@idealjs/camphora-styled";
+import clsx from "clsx";
+import { PropsWithChildren } from "react";
+
+interface IProps {}
+
+const DrawerContent = (props: PropsWithChildren<IProps>) => {
+  const { children } = props;
+  return <div className={clsx(drawerContent)}>{children}</div>;
+};
+
+export default DrawerContent;

apps/website/components/Drawer/DrawerSide.tsx

@@ -0,0 +1,22 @@
+import {
+  drawerMenu,
+  drawerOverlay,
+  drawerSide,
+} from "@idealjs/camphora-styled";
+import clsx from "clsx";
+import { PropsWithChildren, ReactNode } from "react";
+
+interface IProps {
+  drawerId: string;
+  overlay?: ReactNode;
+}
+
+export const DrawerSide = (props: PropsWithChildren<IProps>) => {
+  const { children, drawerId, overlay } = props;
+  return (
+    <div className={drawerSide}>
+      {overlay ?? <label htmlFor={drawerId} className={drawerOverlay} />}
+      <aside className={clsx(drawerMenu)}>{children}</aside>
+    </div>
+  );
+};

apps/website/components/Drawer/index.tsx

@@ -0,0 +1,24 @@
+import { drawer, Ia, IaData } from "@idealjs/camphora-styled";
+import clsx from "clsx";
+import { PropsWithChildren } from "react";
+
+interface IProps {
+  drawerId: string;
+}
+
+const Drawer = (props: PropsWithChildren<IProps>) => {
+  const { children, drawerId } = props;
+  return (
+    <div className={clsx(Ia, drawer)}>
+      <input
+        type="checkbox"
+        className={IaData}
+        name="user data"
+        id={drawerId}
+      />
+      {children}
+    </div>
+  );
+};
+
+export default Drawer;