LP (#31)

.changeset/nine-ladybugs-sip.md

@@ -0,0 +1,5 @@
+---
+"@camome/system": patch
+---
+
+Modify theme tokens

.husky/pre-commit

@@ -3,5 +3,5 @@
 
 [ -n "$CI" ] && exit 0
 
-pnpm build
+pnpm build --filter="./packages/**"
 pnpm ci:check

.husky/pre-push

@@ -4,4 +4,4 @@
 [ -n "$CI" ] && exit 0
 
 pnpm build
-pnpm ci:test && scripts/test-storybook.sh
+pnpm ci:test

apps/storybook/src/stories/AvatarGroup/Default.tsx

@@ -0,0 +1,12 @@
+import { Avatar } from "@camome/core/Avatar";
+import { AvatarGroup } from "@camome/core/AvatarGroup";
+
+export default function Default() {
+  return (
+    <AvatarGroup>
+      <Avatar size="sm" />
+      <Avatar src="/demo/avatar-1.jpg" alt="avatar" size="sm" />
+      <Avatar src="/demo/avatar-2.jpg" alt="avatar" size="sm" />
+    </AvatarGroup>
+  );
+}

apps/storybook/src/stories/AvatarGroup/index.stories.tsx

@@ -0,0 +1,11 @@
+import type { Meta } from "@storybook/react";
+
+import { Avatar } from "@camome/core/Avatar";
+
+const meta: Meta<typeof Avatar> = {
+  title: "components/AvatarGroup",
+  component: Avatar,
+};
+export default meta;
+
+export { default as Default } from "./Default";

apps/storybook/src/stories/Menu/Default.tsx

@@ -10,40 +10,20 @@ export default function Default() {
   return (
     <Menu>
       <Menu.Group>Editing</Menu.Group>
-      {data.category1.map((item) => (
-        <Menu.Item key={item.label}>
-          {item.icon}
-          {item.label}
-        </Menu.Item>
-      ))}
+      <Menu.Item>
+        <PencilSquareIcon />
+        Edit
+      </Menu.Item>
+      <Menu.Item>
+        <Square2StackIcon />
+        Duplicate
+      </Menu.Item>
       <Menu.Divider />
       <Menu.Group>Danger</Menu.Group>
-      {data.category2.map(({ label, icon }) => (
-        <Menu.Item key={label}>
-          {icon}
-          {label}
-        </Menu.Item>
-      ))}
+      <Menu.Item>
+        <TrashIcon />
+        Delete
+      </Menu.Item>
     </Menu>
   );
 }
-
-const data = {
-  category1: [
-    {
-      label: "Edit",
-      icon: <PencilSquareIcon />,
-    },
-    {
-      label: "Duplicate",
-      icon: <Square2StackIcon />,
-    },
-  ],
-
-  category2: [
-    {
-      label: "Delete",
-      icon: <TrashIcon />,
-    },
-  ],
-};

apps/storybook/src/stories/Tag/Decorators.tsx

@@ -43,7 +43,7 @@ export default function Decorators() {
         }
         className={styles["with-avatar"]}
       >
-        John Doe
+        Jean Doe
       </Tag>
     </div>
   );

apps/storybook/src/stories/Tag/Landing.tsx

@@ -0,0 +1,14 @@
+import { Tag } from "@camome/core/Tag";
+
+export default function Landing() {
+  return (
+    <Tag
+      variant="soft"
+      colorScheme="primary"
+      size="lg"
+      startDecorator={<span>🎉</span>}
+    >
+      This is a tag
+    </Tag>
+  );
+}

apps/storybook/src/stories/Tag/index.stories.tsx

@@ -14,3 +14,4 @@ export { default as Size } from "./Size";
 export { default as ColorScheme } from "./ColorScheme";
 export { default as Variant } from "./Variant";
 export { default as Decorator } from "./Decorators";
+export { default as Landing } from "./Landing";

apps/storybook/src/stories/marketing/Card.module.scss

@@ -0,0 +1,64 @@
+.container {
+  border: 1px solid var(--cmm-color-border-base);
+  border-radius: var(--cmm-radius-lg);
+  padding: 1rem;
+  max-width: 24rem;
+  display: grid;
+  gap: 1rem;
+  box-shadow: var(--cmm-shadow-xl);
+
+  :root[data-theme^="dark"] & {
+    background: var(--cmm-color-surface-1);
+  }
+}
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.img {
+  width: 100%;
+  aspect-ratio: 5 / 3;
+  object-fit: cover;
+  border-radius: var(--cmm-radius-sm);
+}
+
+.content {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.title {
+  font-weight: var(--cmm-font-weight-bold);
+  font-size: var(--cmm-font-size-lg);
+  line-height: 1.3;
+}
+
+.priceWrap {
+  display: flex;
+  flex-direction: column;
+}
+
+.price {
+  color: var(--cmm-color-primary-emphasis);
+  font-weight: var(--cmm-font-weight-bold);
+  font-size: var(--cmm-font-size-lg);
+}
+
+.small {
+  color: var(--cmm-color-font-muted);
+  font-size: var(--cmm-font-size-xs);
+}
+
+.row {
+  display: flex;
+  justify-content: space-between;
+  height: fit-content;
+}
+
+.button {
+  place-self: end;
+  border-radius: var(--cmm-radius-full);
+}

apps/storybook/src/stories/marketing/Card.tsx

@@ -0,0 +1,42 @@
+import { CalendarDaysIcon } from "@heroicons/react/24/outline";
+
+import { Button } from "@camome/core/Button";
+import { Tag } from "@camome/core/Tag";
+
+import styles from "./Card.module.scss";
+
+export default function Card() {
+  return (
+    <section className={styles.container}>
+      <img
+        src="/demo/okinawa-hotel.jpg"
+        alt="Entrance of Sheraton Okinawa Sunmarina Resort, a hotel in Okinawa"
+        className={styles.img}
+      />
+      <div className={styles.content}>
+        <div className={styles.tags}>
+          <Tag size="sm" colorScheme="success">
+            30%OFF
+          </Tag>
+          <Tag size="sm" colorScheme="warn">
+            2 rooms left
+          </Tag>
+        </div>
+        <h3 className={styles.title}>Sheraton Okinawa Sunmarina Resort</h3>
+        <div className={styles.row}>
+          <div className={styles.priceWrap}>
+            <small className={styles.small}>1 night, 2 adults</small>
+            <p className={styles.price}>¥62,000</p>
+          </div>
+          <Button
+            size="sm"
+            rightIcon={<CalendarDaysIcon />}
+            className={styles.button}
+          >
+            Book now
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+}

apps/storybook/src/stories/marketing/MenuAndButton.module.scss

@@ -0,0 +1,3 @@
+.container {
+  display: flex;
+}

apps/storybook/src/stories/marketing/MenuAndButton.tsx

@@ -0,0 +1,13 @@
+import { Button } from "@camome/core/Button";
+import { Tag } from "@camome/core/Tag";
+
+export default function MenuAndButton() {
+  return (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <Button variant="solid" colorScheme="primary" size="md">
+        Button
+      </Button>
+      <Tag>Tag</Tag>
+    </div>
+  );
+}

apps/storybook/src/stories/marketing/index.stories.tsx

@@ -0,0 +1,6 @@
+const meta = {
+  title: "Marketing",
+};
+export default meta;
+
+export { default as Card } from "./Card";

apps/web/next.config.mjs

@@ -3,6 +3,9 @@ import { buildScopedClassName } from "@camome/utils";
 import { withContentlayer } from "next-contentlayer";
 import createMdx from "@next/mdx";
 import mdxOptions from "./src/lib/mdxOptions.mjs";
+import { fileURLToPath } from "url";
+
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -14,6 +17,9 @@ const nextConfig = {
     defaultLocale: "en",
   },
   transpilePackages: ["@camome/core"],
+  experimental: {
+    outputFileTracingRoot: path.join(__dirname, "../../"),
+  },
   webpack: (config) => {
     // define class names generated by css-modules
     config.module.rules

apps/web/package.json

@@ -8,12 +8,12 @@
     "watch-stories": "pnpm run-ts ./scripts/watch-stories.ts",
     "dev:next": "next dev --port 3910",
     "dev": "concurrently \"pnpm gen-scss-type -w \" \"pnpm dev:next\"",
-    "build": "pnpm gen-docs-data && next build",
+    "build": "pnpm gen-scss-type && pnpm gen-docs-data && next build",
     "export": "next export",
     "start": "next start",
     "lint": "next lint",
     "lint:fix": "pnpm lint --fix",
-    "typecheck": "tsc",
+    "typecheck": "pnpm gen-scss-type && tsc",
     "gen-css": "npx camome generate-css --output ./src/styles/camome.css",
     "gen-scss-type": "typed-scss-modules \"src/**/*.module.scss\" --aliasPrefixes.@ src --outputFolder .scss-types --nameFormat none --exportType default --logLevel error",
     "gen-docs-data": "tsx ./scripts/gen-docs-data.ts"
@@ -37,14 +37,17 @@
     "mailgun.js": "^8.0.1",
     "markdown-wasm": "^1.2.0",
     "mdx-bundler": "^9.2.1",
-    "next": "13.1.2",
+    "next": "13.1.5-canary.2",
     "next-contentlayer": "^0.2.9",
     "next-seo": "^5.5.0",
     "next-themes": "^0.2.1",
     "react-hook-form": "^7.40.0",
     "react-icons": "^4.4.0",
+    "react-wrap-balancer": "^0.4.0",
     "rehype-external-links": "^2.0.1",
-    "remark-gfm": "^3.0.1"
+    "remark-gfm": "^3.0.1",
+    "sharp": "^0.31.3",
+    "undent": "^0.1.0"
   },
   "devDependencies": {
     "@camome/storybook": "workspace:*",

apps/web/src/components/ComponentGrid/Card/index.tsx

@@ -0,0 +1,40 @@
+import { CalendarDaysIcon } from "@heroicons/react/24/outline";
+
+import { Button } from "@camome/core/Button";
+import { Tag } from "@camome/core/Tag";
+
+import styles from "./styles.module.scss";
+
+export default function Card() {
+  return (
+    <section className={styles.container}>
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        src="/demo/okinawa-hotel.jpg"
+        alt="Entrance of Sheraton Okinawa Sunmarina Resort, a hotel in Okinawa"
+        className={styles.img}
+      />
+      <div className={styles.content}>
+        <div className={styles.tags}>
+          <Tag size="sm" colorScheme="success">
+            30%OFF
+          </Tag>
+          <Tag size="sm" colorScheme="warn">
+            2 rooms left
+          </Tag>
+        </div>
+        <h3 className={styles.title}>Sheraton Okinawa Sunmarina Resort</h3>
+        <div className={styles.row}>
+          <p className={styles.price}>¥62,000</p>
+          <Button
+            size="sm"
+            rightIcon={<CalendarDaysIcon />}
+            className={styles.button}
+          >
+            Book now
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+}