From 84b6777aa98952e3ce7d0301b07b82dcfb5cb99c Mon Sep 17 00:00:00 2001
From: yue <yue@pixiv.co.jp>
Date: Fri, 22 Nov 2024 11:10:00 +0900
Subject: [PATCH] feat: token v2 demo styled

---
 .storybook/preview.js                         |   1 +
 .../__snapshots__/token-v2.story.storyshot    | 327 ++++++++++++++++++
 packages/react/docs/token-v2.story.tsx        | 214 ++++++++++++
 packages/react/tsconfig.json                  |   2 +-
 tsconfig.base.json                            |   1 +
 5 files changed, 544 insertions(+), 1 deletion(-)
 create mode 100644 packages/react/docs/__snapshots__/token-v2.story.storyshot
 create mode 100644 packages/react/docs/token-v2.story.tsx

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 63de06047..d6e5b0111 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -3,6 +3,7 @@ import themeDecorator from './theme-decorator'
 import { DocsContainer } from './docs-container'
 
 import './global.css'
+import '../packages/react/dist/index.css'
 
 /** @type  */
 export const parameters = {
diff --git a/packages/react/docs/__snapshots__/token-v2.story.storyshot b/packages/react/docs/__snapshots__/token-v2.story.storyshot
new file mode 100644
index 000000000..fb88cfd11
--- /dev/null
+++ b/packages/react/docs/__snapshots__/token-v2.story.storyshot
@@ -0,0 +1,327 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storybook Tests > react/docs/Token-v2-demo > Styled 1`] = `
+.c0 {
+  -webkit-transition: 0.3s color ease-in-out;
+  transition: 0.3s color ease-in-out;
+  display: grid;
+  gap: 24px;
+  max-width: -webkit-fit-content;
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+}
+
+.c2 {
+  color: var(--charcoal-color-text-secondary-default);
+  font-size: calc(var(--charcoal-text-font-size-heading-xs) * 1px);
+  line-height: calc(var(--charcoal-text-line-height-heading-xs) * 1px);
+}
+
+.c1 {
+  cursor: pointer;
+  font-weight: bold;
+  font-size: calc(var(--charcoal-text-font-size-body) * 1px);
+  line-height: calc(var(--charcoal-text-line-height-body) * 1px);
+  padding: 13px calc(var(--charcoal-space-layout-30) * 1px);
+  border-top: 2px transparent;
+  color: var(--charcoal-color-text-tertiary-default);
+}
+
+.c1:hover {
+  color: var(--charcoal-color-text-tertiary-hover);
+}
+
+.c1:active {
+  color: var(--charcoal-color-text-tertiary-press);
+}
+
+.c1[aria-selected='true'] {
+  color: var(--charcoal-color-text-default);
+  border-top: 2px solid var(--charcoal-color-border-selected);
+}
+
+.c1[aria-selected='true']:hover {
+  color: var(--charcoal-color-text-hover);
+}
+
+.c1[aria-selected='true']:active {
+  color: var(--charcoal-color-text-press);
+}
+
+.c3 {
+  display: grid;
+  grid-template-areas: 'UserInfo     .           ShowAll' 'ArtworkList  ArtworkList ArtworkList';
+}
+
+.c4 {
+  grid-area: UserInfo;
+  display: grid;
+  grid-auto-flow: column;
+  -webkit-box-pack: left;
+  -webkit-justify-content: left;
+  -ms-flex-pack: left;
+  justify-content: left;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  gap: calc(var(--charcoal-space-layout-20) * 1px);
+}
+
+.c5 {
+  width: 40px;
+  height: 40px;
+  display: grid;
+  place-items: center;
+  border-radius: calc(var(--charcoal-radius-oval) * 1px);
+  cursor: pointer;
+  color: var(--charcoal-color-icon-default);
+  background-color: var(--charcoal-color-container-secondary-default);
+}
+
+.c5:hover {
+  color: var(--charcoal-color-icon-hover);
+  background-color: var(--charcoal-color-container-secondary-hover);
+}
+
+.c5:active {
+  color: var(--charcoal-color-icon-press);
+  background-color: var(--charcoal-color-container-secondary-press);
+}
+
+.c6 {
+  color: var(--charcoal-color-text-default);
+  font-size: calc(var(--charcoal-text-font-size-caption-m) * 1px);
+  line-height: calc(var(--charcoal-text-line-height-caption-m) * 1px);
+  font-weight: bold;
+}
+
+.c7 {
+  grid-area: ShowAll;
+  cursor: pointer;
+  color: var(--charcoal-color-text-tertiary-default);
+  text-align: right;
+  -webkit-align-content: center;
+  -ms-flex-line-pack: center;
+  align-content: center;
+  font-size: calc(var(--charcoal-text-font-size-caption-m) * 1px);
+  line-height: calc(var(--charcoal-text-line-height-caption-m) * 1px);
+}
+
+.c7:hover {
+  color: var(--charcoal-color-text-tertiary-hover);
+}
+
+.c7:active {
+  color: var(--charcoal-color-text-tertiary-press);
+}
+
+.c8 {
+  grid-area: ArtworkList;
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  gap: calc(var(--charcoal-space-layout-20) * 1px);
+  list-style: none;
+  padding: 0;
+  max-width: 424px;
+}
+
+.c9 {
+  display: grid;
+  gap: calc(var(--charcoal-space-layout-10) * 1px);
+}
+
+.c10 {
+  width: 100%;
+  aspect-ratio: 3 / 2;
+  border-radius: calc(var(--charcoal-radius-m) * 1px);
+}
+
+.c11 {
+  color: var(--charcoal-color-text-default);
+  font-size: calc(var(--charcoal-text-font-size-caption-m) * 1px);
+  line-height: calc(var(--charcoal-text-line-height-caption-m) * 1px);
+  margin: 0;
+}
+
+.c12 {
+  margin: 0;
+  color: var(--charcoal-color-text-tertiary-default);
+  font-size: calc(var(--charcoal-text-font-size-caption-s) * 1px);
+  line-height: calc(var(--charcoal-text-line-height-caption-s) * 1px);
+}
+
+<div
+  data-dark={false}
+>
+  <section
+    className="c0"
+  >
+    <nav>
+      <div
+        aria-label="Categories"
+        role="tablist"
+      >
+        <a
+          aria-controls="panel-Illustration"
+          aria-selected={true}
+          className="c1"
+          id="category-Illustration"
+          onClick={[Function]}
+          role="tab"
+        >
+          Illustration
+        </a>
+        <a
+          aria-controls="panel-Comic"
+          aria-selected={false}
+          className="c1"
+          id="category-Comic"
+          onClick={[Function]}
+          role="tab"
+        >
+          Comic
+        </a>
+        <a
+          aria-controls="panel-Novel"
+          aria-selected={false}
+          className="c1"
+          id="category-Novel"
+          onClick={[Function]}
+          role="tab"
+        >
+          Novel
+        </a>
+        <a
+          aria-controls="panel-3D"
+          aria-selected={false}
+          className="c1"
+          id="category-3D"
+          onClick={[Function]}
+          role="tab"
+        >
+          3D
+        </a>
+        <a
+          aria-controls="panel-Shopping"
+          aria-selected={false}
+          className="c1"
+          id="category-Shopping"
+          onClick={[Function]}
+          role="tab"
+        >
+          Shopping
+        </a>
+      </div>
+    </nav>
+    <h2
+      className="c2"
+    >
+      Works from users you follow
+    </h2>
+    <div
+      aria-labelledby="category-Illustration"
+      className="c3"
+      id="panel-Illustration"
+      role="tabpanel"
+    >
+      <div
+        className="c4"
+      >
+        <a
+          aria-label="UserIcon"
+          className="c5"
+        >
+          <pixiv-icon
+            name="24/FaceEdit"
+          />
+        </a>
+        <span
+          className="c6"
+        >
+          UserName
+        </span>
+        <button
+          className="charcoal-button"
+          data-size="S"
+          data-variant="Primary"
+        >
+          Follow
+        </button>
+      </div>
+      <a
+        className="c7"
+      >
+        Show all
+      </a>
+      <ul
+        className="c8"
+      >
+        <li>
+          <article
+            className="c9"
+          >
+            <img
+              alt="Title"
+              className="c10"
+              src="https://loremflickr.com/150/100/animals?random=0"
+            />
+            <h3
+              className="c11"
+            >
+              Title
+            </h3>
+            <p
+              className="c12"
+            >
+              Description
+            </p>
+          </article>
+        </li>
+        <li>
+          <article
+            className="c9"
+          >
+            <img
+              alt="Title"
+              className="c10"
+              src="https://loremflickr.com/150/100/animals?random=1"
+            />
+            <h3
+              className="c11"
+            >
+              Title
+            </h3>
+            <p
+              className="c12"
+            >
+              Description
+            </p>
+          </article>
+        </li>
+        <li>
+          <article
+            className="c9"
+          >
+            <img
+              alt="Title"
+              className="c10"
+              src="https://loremflickr.com/150/100/animals?random=2"
+            />
+            <h3
+              className="c11"
+            >
+              Title
+            </h3>
+            <p
+              className="c12"
+            >
+              Description
+            </p>
+          </article>
+        </li>
+      </ul>
+    </div>
+  </section>
+</div>
+`;
diff --git a/packages/react/docs/token-v2.story.tsx b/packages/react/docs/token-v2.story.tsx
new file mode 100644
index 000000000..f895a9f48
--- /dev/null
+++ b/packages/react/docs/token-v2.story.tsx
@@ -0,0 +1,214 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* lint runs before build so json does not exist */
+
+import { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import styled from 'styled-components'
+// This does not work :(
+// import tokens from '@charcoal-ui/theme/tokens/camel/css-variables.json'
+import tokens from '../../theme/dist/tokens/camel/css-variables.json'
+import { Button, Icon } from '@charcoal-ui/react'
+
+export default {
+  title: 'react/docs/Token-v2-demo',
+  component: Demo,
+} as Meta<typeof Demo>
+
+export const Styled: StoryObj<typeof Demo> = {
+  render: Demo,
+}
+
+const categories = ['Illustration', 'Comic', 'Novel', '3D', 'Shopping']
+const artworks = Array.from({ length: 3 }, (_, id) => ({
+  id,
+  title: 'Title',
+  thumbnail: `https://loremflickr.com/150/100/animals?random=${id}`,
+  description: 'Description',
+}))
+
+function Demo() {
+  const [selected, setSelected] = useState(categories[0])
+  return (
+    <Container>
+      <nav>
+        <div aria-label="Categories" role="tablist">
+          {categories.map((category) => (
+            <Tab
+              id={`category-${category}`}
+              role="tab"
+              aria-selected={category === selected}
+              aria-controls={`panel-${category}`}
+              key={category}
+              onClick={() => {
+                setSelected(category)
+              }}
+            >
+              {category}
+            </Tab>
+          ))}
+        </div>
+      </nav>
+      <H2>Works from users you follow</H2>
+      <UserCard
+        id={`panel-${selected}`}
+        role="tabpanel"
+        aria-labelledby={`category-${selected}`}
+      >
+        <UserInfo>
+          <User aria-label="UserIcon">
+            <Icon name="24/FaceEdit" />
+          </User>
+          <UserName>UserName</UserName>
+          <Button variant="Primary" size="S">
+            Follow
+          </Button>
+        </UserInfo>
+        <ShowAll>Show all</ShowAll>
+        <ArtworkList key={selected}>
+          {artworks.map((a) => (
+            <li key={a.id}>
+              <Artwork>
+                <ArtworkThumbnail src={a.thumbnail} alt={a.title} />
+                <ArtworkTitle>{a.title}</ArtworkTitle>
+                <ArtworkDescription>{a.description}</ArtworkDescription>
+              </Artwork>
+            </li>
+          ))}
+        </ArtworkList>
+      </UserCard>
+    </Container>
+  )
+}
+
+const Container = styled.section`
+  transition: 0.3s color ease-in-out;
+  display: grid;
+  gap: 24px;
+  max-width: fit-content;
+`
+
+const H2 = styled.h2`
+  color: ${tokens.color.text.secondary.default};
+  font-size: calc(${tokens.text.fontSize.heading.xs} * 1px);
+  line-height: calc(${tokens.text.lineHeight.heading.xs} * 1px);
+`
+
+const Tab = styled.a`
+  cursor: pointer;
+  font-weight: bold;
+  font-size: calc(${tokens.text.fontSize.body} * 1px);
+  line-height: calc(${tokens.text.lineHeight.body} * 1px);
+  padding: 13px calc(${tokens.space.layout[30]} * 1px);
+  border-top: 2px transparent;
+
+  color: ${tokens.color.text.tertiary.default};
+  &:hover {
+    color: ${tokens.color.text.tertiary.hover};
+  }
+  &:active {
+    color: ${tokens.color.text.tertiary.press};
+  }
+
+  &[aria-selected='true'] {
+    color: ${tokens.color.text.default};
+    border-top: 2px solid ${tokens.color.border.selected};
+    &:hover {
+      color: ${tokens.color.text.hover};
+    }
+    &:active {
+      color: ${tokens.color.text.press};
+    }
+  }
+`
+
+const UserCard = styled.div`
+  display: grid;
+  grid-template-areas:
+    'UserInfo     .           ShowAll'
+    'ArtworkList  ArtworkList ArtworkList';
+`
+
+const UserInfo = styled.div`
+  grid-area: UserInfo;
+  display: grid;
+  grid-auto-flow: column;
+  justify-content: left;
+  align-items: center;
+  gap: calc(${tokens.space.layout[20]} * 1px);
+`
+
+const User = styled.a`
+  width: 40px;
+  height: 40px;
+  display: grid;
+  place-items: center;
+  border-radius: calc(${tokens.radius.oval} * 1px);
+  cursor: pointer;
+
+  color: ${tokens.color.icon.default};
+  background-color: ${tokens.color.container.secondary.default};
+  &:hover {
+    color: ${tokens.color.icon.hover};
+    background-color: ${tokens.color.container.secondary.hover};
+  }
+  &:active {
+    color: ${tokens.color.icon.press};
+    background-color: ${tokens.color.container.secondary.press};
+  }
+`
+
+const UserName = styled.span`
+  color: ${tokens.color.text.default};
+  font-size: calc(${tokens.text.fontSize.caption.m} * 1px);
+  line-height: calc(${tokens.text.lineHeight.caption.m} * 1px);
+  font-weight: bold;
+`
+
+const ShowAll = styled.a`
+  grid-area: ShowAll;
+  cursor: pointer;
+  color: ${tokens.color.text.tertiary.default};
+  &:hover {
+    color: ${tokens.color.text.tertiary.hover};
+  }
+  &:active {
+    color: ${tokens.color.text.tertiary.press};
+  }
+  text-align: right;
+  align-content: center;
+  font-size: calc(${tokens.text.fontSize.caption.m} * 1px);
+  line-height: calc(${tokens.text.lineHeight.caption.m} * 1px);
+`
+
+const ArtworkList = styled.ul`
+  grid-area: ArtworkList;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: calc(${tokens.space.layout[20]} * 1px);
+  list-style: none;
+  padding: 0;
+  max-width: 424px;
+`
+
+const Artwork = styled.article`
+  display: grid;
+  gap: calc(${tokens.space.layout[10]} * 1px);
+`
+const ArtworkThumbnail = styled.img`
+  width: 100%;
+  aspect-ratio: 3 / 2;
+  border-radius: calc(${tokens.radius.m} * 1px);
+`
+const ArtworkTitle = styled.h3`
+  color: ${tokens.color.text.default};
+  font-size: calc(${tokens.text.fontSize.caption.m} * 1px);
+  line-height: calc(${tokens.text.lineHeight.caption.m} * 1px);
+  margin: 0;
+`
+const ArtworkDescription = styled.p`
+  margin: 0;
+  color: ${tokens.color.text.tertiary.default};
+  font-size: calc(${tokens.text.fontSize.caption.s} * 1px);
+  line-height: calc(${tokens.text.lineHeight.caption.s} * 1px);
+`
diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
index ce897777d..9470a4e3e 100644
--- a/packages/react/tsconfig.json
+++ b/packages/react/tsconfig.json
@@ -1,4 +1,4 @@
 {
   "extends": "../../tsconfig.base.json",
-  "include": ["./src"]
+  "include": ["./src", "./docs"]
 }
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 60119b0e9..d09a83f1d 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -13,6 +13,7 @@
     "jsx": "react-jsx",
     "declaration": true,
     "declarationMap": true,
+    "resolveJsonModule": true,
     "paths": {
       "@charcoal-ui/*": ["./packages/*/src"]
     }