Tabs, ChipTabs

.github/workflows/component-docs-deploy-alpha-pages.yml

@@ -25,6 +25,9 @@ jobs:
       - name: Install Dependencies
         run: yarn install --immutable
 
+      - name: Build Packages
+        run: yarn build-only-package
+
       - name: Build `Seed Component Docs`
         working-directory: ./component-docs
         run: |

.github/workflows/component-docs-deploy-production-pages.yml

@@ -23,6 +23,9 @@ jobs:
       - name: Install Dependencies
         run: yarn install --immutable
 
+      - name: Build Packages
+        run: yarn build-only-package
+
       - name: Build `Seed Component Docs`
         working-directory: ./component-docs
         run: |

biome.json

@@ -30,7 +30,8 @@
         "noBannedTypes": "off"
       },
       "correctness": {
-        "useExhaustiveDependencies": "warn"
+        "useExhaustiveDependencies": "warn",
+        "noUnusedVariables": "error"
       },
       "security": {
         "noDangerouslySetInnerHtml": "warn"

component-docs/activities/ActivityLayout.css.ts

@@ -0,0 +1,72 @@
+import { style } from "@vanilla-extract/css";
+import { vars } from "@seed-design/design-token";
+
+import { f } from "@/styles";
+
+export const wrapper = style([f.posAbsFull, f.flexColumn, f.rootLineHeight]);
+
+export const appBarLeft = style([
+  f.flex,
+  {
+    fontSize: "1.125rem",
+    fontWeight: 700,
+    marginLeft: ".5rem",
+  },
+]);
+
+export const appBarLeftIcon = style([
+  f.flexAlignCenter,
+  {
+    marginLeft: ".5rem",
+  },
+]);
+
+export const appBarRight = style([
+  {
+    display: "grid",
+    gridTemplateColumns: "1.5rem 1.5rem 1.5rem",
+    gap: "1rem",
+    marginRight: ".5rem",
+  },
+]);
+
+export const content = style({
+  flex: 1,
+});
+
+// BottomTab
+
+export const container = style([
+  f.grid,
+  {
+    backgroundColor: vars.$semantic.color.paperDefault,
+    gridTemplateColumns: "1.5rem 1.5rem 1.5rem 1.5rem 1.5rem",
+    justifyContent: "space-between",
+    padding: ".5rem 7.25% 0",
+    paddingBottom: ".375rem",
+    "@supports": {
+      "(padding-bottom: constant(safe-area-inset-bottom))": {
+        paddingBottom: "calc(.375rem + constant(safe-area-inset-bottom))",
+      },
+      "(padding-bottom: env(safe-area-inset-bottom))": {
+        paddingBottom: "calc(.375rem + env(safe-area-inset-bottom))",
+      },
+    },
+    boxShadow: `0 -1px 0 0 ${vars.$semantic.color.divider2}`,
+  },
+]);
+
+export const button = style([f.flexColumn, f.flexAlignCenter, f.resetButton, f.cursorPointer]);
+
+export const buttonIcon = style([
+  {
+    marginBottom: ".375rem",
+  },
+]);
+
+export const buttonLabel = style([
+  f.nowrap,
+  {
+    fontSize: ".75rem",
+  },
+]);

component-docs/activities/ActivityLayout.tsx

@@ -0,0 +1,92 @@
+import { AppScreen } from "@stackflow/plugin-basic-ui";
+
+import IconExpandMore from "@/assets/IconExpandMore";
+import IconSearch from "@/assets/IconSearch";
+import IconSettings from "@/assets/IconSettings";
+import IconBell from "@/assets/IconBell";
+import IconHome from "@/assets/IconHome";
+import IconMenu from "@/assets/IconMenu";
+import IconSell from "@/assets/IconSell";
+import IconChatting from "@/assets/IconChatting";
+import IconProfile from "@/assets/IconProfile";
+
+import * as css from "./ActivityLayout.css";
+
+type PropOf<T> = T extends React.ComponentType<infer U> ? U : never;
+
+interface LayoutProps {
+  appBar?: PropOf<typeof AppScreen>["appBar"];
+  children: React.ReactNode;
+}
+
+const Layout: React.FC<LayoutProps> = ({ children }) => {
+  const appBarLeft = () => (
+    <div className={css.appBarLeft}>
+      Woolston
+      <div className={css.appBarLeftIcon}>
+        <IconExpandMore />
+      </div>
+    </div>
+  );
+
+  const appBarRight = () => (
+    <div className={css.appBarRight}>
+      <IconSearch />
+      <IconSettings />
+      <IconBell />
+    </div>
+  );
+
+  return (
+    <AppScreen
+      appBar={{
+        renderLeft: appBarLeft,
+        renderRight: appBarRight,
+      }}
+    >
+      <div className={css.wrapper}>
+        <div className={css.content}>{children}</div>
+        <BottomTab />
+      </div>
+    </AppScreen>
+  );
+};
+
+Layout.displayName = "Layout";
+
+export default Layout;
+
+const BottomTab: React.FC = () => (
+  <div className={css.container}>
+    <button type="button" className={css.button}>
+      <div className={css.buttonIcon}>
+        <IconHome />
+      </div>
+      <div className={css.buttonLabel}>Home</div>
+    </button>
+    <button type="button" className={css.button}>
+      <div className={css.buttonIcon}>
+        <IconMenu />
+      </div>
+      <div className={css.buttonLabel}>Categories</div>
+    </button>
+    <button type="button" className={css.button}>
+      <div className={css.buttonIcon}>
+        <IconSell />
+      </div>
+      <div className={css.buttonLabel}>Sell</div>
+    </button>
+    <button type="button" className={css.button}>
+      <div className={css.buttonIcon}>
+        <IconChatting />
+      </div>
+      <div className={css.buttonLabel}>Chats</div>
+    </button>
+    <button type="button" className={css.button}>
+      <div className={css.buttonIcon}>
+        <IconProfile />
+      </div>
+      <div className={css.buttonLabel}>My</div>
+    </button>
+  </div>
+);

component-docs/activities/ChipTabsBasicActivity.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+
+import { ChipTabs, ChipTabTrigger, ChipTabTriggerList } from "@/seed-design/ui/chip-tabs";
+
+import type { ActivityComponentType } from "@stackflow/react/future";
+import Layout from "./ActivityLayout";
+
+declare module "@stackflow/config" {
+  interface Register {
+    ChipTabsBasic: unknown;
+  }
+}
+
+const ChipTabsBasicActivity: ActivityComponentType<"ChipTabsBasic"> = () => {
+  const [value, setValue] = React.useState("1");
+
+  const commonStyle = {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "#eeeeee",
+    height: "100%",
+  };
+
+  return (
+    <Layout>
+      <ChipTabs defaultValue="1" value={value} onValueChange={(value) => setValue(value)}>
+        <ChipTabTriggerList>
+          <ChipTabTrigger value="1">라벨1</ChipTabTrigger>
+          <ChipTabTrigger value="2">라벨2</ChipTabTrigger>
+          <ChipTabTrigger value="3">라벨3</ChipTabTrigger>
+        </ChipTabTriggerList>
+      </ChipTabs>
+      {value === "1" && <div style={commonStyle}>content 1</div>}
+      {value === "2" && <div style={commonStyle}>content 2</div>}
+      {value === "3" && <div style={commonStyle}>content 3</div>}
+    </Layout>
+  );
+};
+
+export default ChipTabsBasicActivity;

component-docs/activities/TabsAlertActivity.tsx

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { AppScreen } from "@stackflow/plugin-basic-ui";
+
+import {
+  Tabs as UITabs,
+  TabTriggerList,
+  TabContent,
+  TabContentList,
+  TabTrigger,
+} from "@/seed-design/ui/tabs";
+
+import type { ActivityComponentType } from "@stackflow/react/future";
+
+declare module "@stackflow/config" {
+  interface Register {
+    TabsAlert: unknown;
+  }
+}
+
+const TabsAlertActivity: ActivityComponentType<"TabsAlert"> = () => {
+  const appBarLeft = () => <div>Left</div>;
+  const appBarRight = () => <div>Right</div>;
+
+  const tabCommonStyle = {
+    padding: "16px",
+    backgroundColor: "#f5f5f5",
+  };
+
+  return (
+    <AppScreen
+      appBar={{
+        renderLeft: appBarLeft,
+        renderRight: appBarRight,
+      }}
+    >
+      <div
+        style={{
+          height: "100%",
+          width: "100%",
+        }}
+      >
+        <UITabs defaultValue="1" isSwipeable layout="fill" size="medium">
+          <TabTriggerList>
+            <TabTrigger value="1" alert>
+              라벨1
+            </TabTrigger>
+            <TabTrigger value="2" alert>
+              라벨2
+            </TabTrigger>
+            <TabTrigger value="3" alert>
+              라벨3
+            </TabTrigger>
+          </TabTriggerList>
+          <TabContentList>
+            <TabContent value="1">
+              <div style={tabCommonStyle}>Content 1</div>
+            </TabContent>
+            <TabContent value="2">
+              <div style={tabCommonStyle}>Content 2</div>
+            </TabContent>
+            <TabContent value="3">
+              <div style={tabCommonStyle}>Content 3</div>
+            </TabContent>
+          </TabContentList>
+        </UITabs>
+      </div>
+    </AppScreen>
+  );
+};
+
+export default TabsAlertActivity;

component-docs/activities/TabsDisabledActivity.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { AppScreen } from "@stackflow/plugin-basic-ui";
+
+import {
+  Tabs,
+  TabTriggerList,
+  TabContent,
+  TabContentList,
+  TabTrigger,
+} from "@/seed-design/ui/tabs";
+
+import type { ActivityComponentType } from "@stackflow/react/future";
+
+declare module "@stackflow/config" {
+  interface Register {
+    TabsDisabled: unknown;
+  }
+}
+
+const TabsDisabledActivity: ActivityComponentType<"TabsDisabled"> = () => {
+  const appBarLeft = () => <div>Left</div>;
+  const appBarRight = () => <div>Right</div>;
+
+  const tabCommonStyle = {
+    padding: "16px",
+    backgroundColor: "#f5f5f5",
+  };
+
+  return (
+    <AppScreen
+      appBar={{
+        renderLeft: appBarLeft,
+        renderRight: appBarRight,
+      }}
+    >
+      <div
+        style={{
+          height: "100%",
+          width: "100%",
+        }}
+      >
+        <Tabs defaultValue="1" isSwipeable layout="fill" size="medium">
+          <TabTriggerList>
+            <TabTrigger value="1">라벨1</TabTrigger>
+            <TabTrigger value="2" isDisabled>
+              라벨2
+            </TabTrigger>
+            <TabTrigger value="3">라벨3</TabTrigger>
+          </TabTriggerList>
+          <TabContentList>
+            <TabContent value="1">
+              <div style={tabCommonStyle}>Content 1</div>
+            </TabContent>
+            <TabContent value="2">
+              <div style={tabCommonStyle}>Content 2</div>
+            </TabContent>
+            <TabContent value="3">
+              <div style={tabCommonStyle}>Content 3</div>
+            </TabContent>
+          </TabContentList>
+        </Tabs>
+      </div>
+    </AppScreen>
+  );
+};
+
+export default TabsDisabledActivity;

component-docs/assets/IconBell.tsx

@@ -0,0 +1,13 @@
+import { f } from "@/styles";
+
+const SVG = `
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.0002 2.20001C8.24837 2.20001 5.2002 5.24818 5.2002 9.00001V13.7578L3.33456 16.5563C3.24695 16.6877 3.2002 16.8421 3.2002 17V18C3.2002 18.4418 3.55837 18.8 4.0002 18.8H9.20639L9.20088 18.933C9.20042 18.944 9.2002 18.9551 9.2002 18.9661C9.2002 20.5139 10.4457 21.8 12.0002 21.8C13.5546 21.8 14.8002 20.5139 14.8002 18.9661V18.8H20.0002C20.442 18.8 20.8002 18.4418 20.8002 18V17C20.8002 16.8421 20.7534 16.6877 20.6658 16.5563L18.8002 13.7578V9.00001C18.8002 5.24818 15.752 2.20001 12.0002 2.20001ZM13.2002 18.8H10.8078L10.8003 18.9807C10.808 19.6633 11.3592 20.2 12.0002 20.2C12.6457 20.2 13.2002 19.6557 13.2002 18.9661V18.8ZM19.172 17.2L17.3346 14.4438C17.2469 14.3124 17.2002 14.158 17.2002 14V9.00001C17.2002 6.13184 14.8684 3.80001 12.0002 3.80001C9.13202 3.80001 6.8002 6.13184 6.8002 9.00001V14C6.8002 14.158 6.75344 14.3124 6.66584 14.4438L4.82834 17.2H19.172Z" fill="currentColor"/>
+</svg>
+`;
+
+const IconBell: React.FC = () => (
+  <div className={f.flex} dangerouslySetInnerHTML={{ __html: SVG }} />
+);
+
+export default IconBell;