Skip to content

Commit

Permalink
refactor: build website with camphora-styled
Browse files Browse the repository at this point in the history
  • Loading branch information
cqh963852 committed Jun 28, 2024
1 parent df8dad0 commit a5cdbc7
Show file tree
Hide file tree
Showing 57 changed files with 4,005 additions and 3,388 deletions.
20 changes: 10 additions & 10 deletions .github/workflows/ci-check.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
9 changes: 7 additions & 2 deletions .github/workflows/preview.yml
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,16 @@ on:
jobs:
Deploy-Preview:
runs-on: ubuntu-latest
env:
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: 18
- name: show files
run: ls -lh
- name: Pull Vercel Environment Information
run: yarn dlx vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
- name: Build Project Artifacts
Expand Down
7 changes: 5 additions & 2 deletions .github/workflows/production.yml
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,12 @@ on:
jobs:
Deploy-Production:
runs-on: ubuntu-latest
env:
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
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
Expand Down
4 changes: 2 additions & 2 deletions .github/workflows/publish.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 2 additions & 1 deletion apps/website/.eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
{
"enableDangerousAutofixThisMayCauseInfiniteLoops": true
}
]
],
"max-lines": ["warn", 200]
}
}
7 changes: 0 additions & 7 deletions apps/website/app/actions/page.tsx

This file was deleted.

7 changes: 0 additions & 7 deletions apps/website/app/classnames/page.tsx

This file was deleted.

7 changes: 0 additions & 7 deletions apps/website/app/components/button/page.spec.ts

This file was deleted.

Binary file not shown.
7 changes: 0 additions & 7 deletions apps/website/app/components/button/page.tsx

This file was deleted.

7 changes: 0 additions & 7 deletions apps/website/app/components/page.tsx

This file was deleted.

7 changes: 0 additions & 7 deletions apps/website/app/design-tokens/pages.tsx

This file was deleted.

7 changes: 6 additions & 1 deletion apps/website/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -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>
);
}
121 changes: 90 additions & 31 deletions apps/website/app/page.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
Expand Down
7 changes: 0 additions & 7 deletions apps/website/app/typesetting/page.tsx

This file was deleted.

12 changes: 12 additions & 0 deletions apps/website/components/Drawer/DrawerContent.tsx
Original file line number Diff line number Diff line change
@@ -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;
22 changes: 22 additions & 0 deletions apps/website/components/Drawer/DrawerSide.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};
24 changes: 24 additions & 0 deletions apps/website/components/Drawer/index.tsx
Original file line number Diff line number Diff line change
@@ -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;
28 changes: 28 additions & 0 deletions apps/website/components/SearchInput.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { input, inputContainer, inputGhost } from "@idealjs/camphora-styled";
import clsx from "clsx";
import React from "react";

const SearchInput = () => {
return (
<label className={clsx(inputContainer, inputGhost)}>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
style={{
height: "16px",
marginRight: "8px",
}}
>
<path
fillRule="evenodd"
d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
clipRule="evenodd"
/>
</svg>
<input type="text" className={input} placeholder="search..." />
</label>
);
};

export default SearchInput;
Loading

0 comments on commit a5cdbc7

Please sign in to comment.