lynx-console 0.2.2 → 0.3.0

package/src/components/PerformancePanel.tsx

@@ -1,9 +1,8 @@
 import { useState } from "@lynx-js/react";
 import { stringify } from "javascript-stringify";
 import { useThemeColors } from "../styles/ThemeContext";
-import { type ThemeColors, fontWeight } from "../styles/theme";
+import { fontWeight, type ThemeColors } from "../styles/theme";
 import type { PerformanceEntryData } from "../types";
-import { FadeList } from "./FadeList";
 import "./PerformancePanel.css";
 
 interface PerformancePanelProps {
@@ -66,15 +65,30 @@ const getPrimaryFcpLabel = (entry: PerformanceEntryData): string => {
 function getEntryTypeColors(colors: ThemeColors, entryType: string) {
   switch (entryType) {
     case "init":
-      return { color: colors.palette.blue600, backgroundColor: colors.palette.blue100 };
+      return {
+        color: colors.palette.blue600,
+        backgroundColor: colors.palette.blue100,
+      };
     case "metric":
-      return { color: colors.palette.green600, backgroundColor: colors.palette.green100 };
+      return {
+        color: colors.palette.green600,
+        backgroundColor: colors.palette.green100,
+      };
     case "pipeline":
-      return { color: colors.palette.purple600, backgroundColor: colors.palette.purple100 };
+      return {
+        color: colors.palette.purple600,
+        backgroundColor: colors.palette.purple100,
+      };
     case "resource":
-      return { color: colors.palette.yellow600, backgroundColor: colors.palette.yellow100 };
+      return {
+        color: colors.palette.yellow600,
+        backgroundColor: colors.palette.yellow100,
+      };
     default:
-      return { color: colors.fg.neutral, backgroundColor: colors.bg.neutralWeak };
+      return {
+        color: colors.fg.neutral,
+        backgroundColor: colors.bg.neutralWeak,
+      };
   }
 }
 
@@ -92,27 +106,25 @@ export const PerformancePanel = ({
           style={{ borderBottomColor: colors.stroke.neutralSubtle }}
         >
           <text
-            className={"pp-count"}
-            style={{ fontWeight: fontWeight.regular, color: colors.fg.neutralSubtle }}
+            className={"pp-count t3"}
+            style={{
+              fontWeight: fontWeight.regular,
+              color: colors.fg.neutralSubtle,
+            }}
           >
             0 entries
           </text>
-          <view
-            bindtap={() => {
-              console.log("[PerformancePanel] performances", performances);
-            }}
-            style={{ padding: "10px", backgroundColor: "red" }}
-          >
-            <text>Log</text>
-          </view>
           <view
             bindtap={clearPerformances}
             className={"pp-clearButton"}
             style={{ backgroundColor: colors.bg.neutralWeak }}
           >
             <text
-              className={"pp-clearButtonText"}
-              style={{ fontWeight: fontWeight.medium, color: colors.fg.neutralMuted }}
+              className={"pp-clearButtonText t3"}
+              style={{
+                fontWeight: fontWeight.medium,
+                color: colors.fg.neutralMuted,
+              }}
             >
               🗑
             </text>
@@ -120,8 +132,11 @@ export const PerformancePanel = ({
         </view>
         <view className={"pp-placeholder"}>
           <text
-            className={"pp-placeholderText"}
-            style={{ fontWeight: fontWeight.regular, color: colors.fg.disabled }}
+            className={"pp-placeholderText t4"}
+            style={{
+              fontWeight: fontWeight.regular,
+              color: colors.fg.disabled,
+            }}
           >
             No performance data yet...
           </text>
@@ -137,8 +152,11 @@ export const PerformancePanel = ({
         style={{ borderBottomColor: colors.stroke.neutralSubtle }}
       >
         <text
-          className={"pp-count"}
-          style={{ fontWeight: fontWeight.regular, color: colors.fg.neutralSubtle }}
+          className={"pp-count t3"}
+          style={{
+            fontWeight: fontWeight.regular,
+            color: colors.fg.neutralSubtle,
+          }}
         >
           {performances.length} entries
         </text>
@@ -148,15 +166,18 @@ export const PerformancePanel = ({
           style={{ backgroundColor: colors.bg.neutralWeak }}
         >
           <text
-            className={"pp-clearButtonText"}
-            style={{ fontWeight: fontWeight.medium, color: colors.fg.neutralMuted }}
+            className={"pp-clearButtonText t3"}
+            style={{
+              fontWeight: fontWeight.medium,
+              color: colors.fg.neutralMuted,
+            }}
           >
             🗑
           </text>
         </view>
       </view>
 
-      <FadeList className={"pp-list"}>
+      <list scroll-orientation="vertical" className={"pp-list"}>
         {performances.map((perf) => {
           const isMetricFcp = isMetricFcpEntry(perf);
           const fcpMetrics = extractFcpMetrics(perf);
@@ -176,7 +197,7 @@ export const PerformancePanel = ({
                   }
                 >
                   <text
-                    className={"pp-entryType"}
+                    className={"pp-entryType t2"}
                     style={{
                       fontWeight: fontWeight.bold,
                       ...getEntryTypeColors(colors, perf.entryType),
@@ -185,14 +206,20 @@ export const PerformancePanel = ({
                     {perf.entryType}
                   </text>
                   <text
-                    className={"pp-entryName"}
-                    style={{ fontWeight: fontWeight.medium, color: colors.fg.neutral }}
+                    className={"pp-entryName t2"}
+                    style={{
+                      fontWeight: fontWeight.medium,
+                      color: colors.fg.neutral,
+                    }}
                   >
                     {perf.name}
                   </text>
                   <text
-                    className={"pp-timestamp"}
-                    style={{ fontWeight: fontWeight.regular, color: colors.fg.neutralSubtle }}
+                    className={"pp-timestamp t2"}
+                    style={{
+                      fontWeight: fontWeight.regular,
+                      color: colors.fg.neutralSubtle,
+                    }}
                   >
                     {new Date(perf.timestamp).toISOString()}
                   </text>
@@ -205,7 +232,7 @@ export const PerformancePanel = ({
                 >
                   {isMetricFcp && primaryFcp && (
                     <text
-                      className={"pp-fcpHighlight"}
+                      className={"pp-fcpHighlight t3"}
                       style={{
                         fontWeight: fontWeight.bold,
                         color: colors.palette.blue600,
@@ -228,21 +255,30 @@ export const PerformancePanel = ({
                           >
                             <view className={"pp-fcpMetricHeader"}>
                               <text
-                                className={"pp-fcpMetricName"}
-                                style={{ fontWeight: fontWeight.bold, color: colors.fg.neutral }}
+                                className={"pp-fcpMetricName t2"}
+                                style={{
+                                  fontWeight: fontWeight.bold,
+                                  color: colors.fg.neutral,
+                                }}
                               >
                                 전체 FCP
                               </text>
                               <text
-                                className={"pp-fcpMetricValue"}
-                                style={{ fontWeight: fontWeight.bold, color: colors.palette.blue600 }}
+                                className={"pp-fcpMetricValue t1"}
+                                style={{
+                                  fontWeight: fontWeight.bold,
+                                  color: colors.palette.blue600,
+                                }}
                               >
                                 {formatDuration(totalFcp.duration)}
                               </text>
                             </view>
                             <text
-                              className={"pp-fcpMetricDescription"}
-                              style={{ fontWeight: fontWeight.regular, color: colors.fg.neutralSubtle }}
+                              className={"pp-fcpMetricDescription t3"}
+                              style={{
+                                fontWeight: fontWeight.regular,
+                                color: colors.fg.neutralSubtle,
+                              }}
                             >
                               PrepareTemplate Start부터 Paint End 까지 걸리는
                               시간
@@ -257,21 +293,30 @@ export const PerformancePanel = ({
                           >
                             <view className={"pp-fcpMetricHeader"}>
                               <text
-                                className={"pp-fcpMetricName"}
-                                style={{ fontWeight: fontWeight.bold, color: colors.fg.neutral }}
+                                className={"pp-fcpMetricName t2"}
+                                style={{
+                                  fontWeight: fontWeight.bold,
+                                  color: colors.fg.neutral,
+                                }}
                               >
                                 LynxFCP
                               </text>
                               <text
-                                className={"pp-fcpMetricValue"}
-                                style={{ fontWeight: fontWeight.bold, color: colors.palette.blue600 }}
+                                className={"pp-fcpMetricValue t1"}
+                                style={{
+                                  fontWeight: fontWeight.bold,
+                                  color: colors.palette.blue600,
+                                }}
                               >
                                 {formatDuration(lynxFcp.duration)}
                               </text>
                             </view>
                             <text
-                              className={"pp-fcpMetricDescription"}
-                              style={{ fontWeight: fontWeight.regular, color: colors.fg.neutralSubtle }}
+                              className={"pp-fcpMetricDescription t3"}
+                              style={{
+                                fontWeight: fontWeight.regular,
+                                color: colors.fg.neutralSubtle,
+                              }}
                             >
                               Bundle Load 시작부터 Paint End 까지 걸리는 시간
                             </text>
@@ -285,21 +330,30 @@ export const PerformancePanel = ({
                           >
                             <view className={"pp-fcpMetricHeader"}>
                               <text
-                                className={"pp-fcpMetricName"}
-                                style={{ fontWeight: fontWeight.bold, color: colors.fg.neutral }}
+                                className={"pp-fcpMetricName t2"}
+                                style={{
+                                  fontWeight: fontWeight.bold,
+                                  color: colors.fg.neutral,
+                                }}
                               >
                                 렌더링 FCP
                               </text>
                               <text
-                                className={"pp-fcpMetricValue"}
-                                style={{ fontWeight: fontWeight.bold, color: colors.palette.blue600 }}
+                                className={"pp-fcpMetricValue t1"}
+                                style={{
+                                  fontWeight: fontWeight.bold,
+                                  color: colors.palette.blue600,
+                                }}
                               >
                                 {formatDuration(fcp.duration)}
                               </text>
                             </view>
                             <text
-                              className={"pp-fcpMetricDescription"}
-                              style={{ fontWeight: fontWeight.regular, color: colors.fg.neutralSubtle }}
+                              className={"pp-fcpMetricDescription t3"}
+                              style={{
+                                fontWeight: fontWeight.regular,
+                                color: colors.fg.neutralSubtle,
+                              }}
                             >
                               TemplateBundle 준비부터 Paint End 까지 걸리는 시간
                             </text>
@@ -314,16 +368,26 @@ export const PerformancePanel = ({
                         style={{ backgroundColor: colors.bg.neutralWeak }}
                       >
                         <text
-                          className={"pp-detailTitle"}
-                          style={{ fontWeight: fontWeight.bold, color: colors.fg.neutral }}
+                          className={"pp-detailTitle t3"}
+                          style={{
+                            fontWeight: fontWeight.bold,
+                            color: colors.fg.neutral,
+                          }}
                         >
                           Raw Entry
                         </text>
                         <text
-                          className={"pp-rawEntry"}
-                          style={{ fontWeight: fontWeight.regular, color: colors.fg.neutralSubtle }}
+                          className={"pp-rawEntry t3"}
+                          style={{
+                            fontWeight: fontWeight.regular,
+                            color: colors.fg.neutralSubtle,
+                          }}
                         >
-                          {String(stringify(perf.rawEntry, null, 2, { references: true }))}
+                          {String(
+                            stringify(perf.rawEntry, null, 2, {
+                              references: true,
+                            }),
+                          )}
                         </text>
                       </view>
                     )}
@@ -333,7 +397,7 @@ export const PerformancePanel = ({
             </list-item>
           );
         })}
-      </FadeList>
+      </list>
     </view>
   );
 };

package/src/components/Tabs.css

@@ -22,26 +22,6 @@
   line-height: 1.375rem;
 }
 
-.tabs-triggerButtonText--t4 {
-  font-size: 0.875rem;
-  line-height: 1.1875rem;
-}
-
-.tabs-triggerButtonText--t3 {
-  font-size: 0.8125rem;
-  line-height: 1.125rem;
-}
-
-.tabs-triggerButtonText--t2 {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-
-.tabs-triggerButtonText--t1 {
-  font-size: 0.6875rem;
-  line-height: 0.9375rem;
-}
-
 .tabs-triggerIndicator {
   position: absolute;
   bottom: 0;
@@ -49,7 +29,7 @@
   padding: 0 16px;
   width: 100%;
   transition: 200ms;
-  transition-timing-function: cubic-bezier(.35, 0, .35, 1);
+  transition-timing-function: cubic-bezier(0.35, 0, 0.35, 1);
 }
 
 .tabs-triggerIndicatorLine {

package/src/components/Tabs.tsx

@@ -20,7 +20,7 @@ export default function Tabs(props: TabsProps) {
   const tabSize =
     props.items.length < 4
       ? undefined
-      : (`t${Math.max(1, 5 - (props.items.length - 3))}`);
+      : `t${Math.max(1, 5 - (props.items.length - 3))}`;
 
   return (
     <view className={"tabs-root"}>
@@ -50,7 +50,7 @@ export default function Tabs(props: TabsProps) {
             }}
           >
             <text
-              className={`tabs-triggerButtonText${tabSize ? ` tabs-triggerButtonText--${tabSize}` : ""}`}
+              className={`tabs-triggerButtonText${tabSize ? ` ${tabSize}` : ""}`}
               style={{
                 fontWeight: fontWeight.bold,
                 color:

package/src/index.tsx

@@ -8,6 +8,7 @@ import {
 import BottomSheet from "./components/BottomSheet.jsx";
 import { ConsolePanel } from "./components/ConsolePanel.jsx";
 import "./components/FloatingButton.css";
+import "./styles/tokens.css";
 import { FloatingButton } from "./components/FloatingButton.jsx";
 import { usePerformance } from "./hooks/usePerformance";
 import { ThemeProvider } from "./styles/ThemeContext";
@@ -94,8 +95,16 @@ const LynxConsole = forwardRef<LynxConsoleHandle, LynxConsoleProps>(
           }}
         >
           <FloatingButton bindtap={handleOpenBottomSheet}>
-            <text className="fb-title" style={{ fontWeight: "400", color: colors.palette.staticWhite }}>LynxConsole</text>
-            <text className="fb-subtitle" style={{ fontWeight: "400", color: colors.palette.staticWhite }}>
+            <text
+              className="fb-title t4"
+              style={{ fontWeight: "400", color: colors.palette.staticWhite }}
+            >
+              LynxConsole
+            </text>
+            <text
+              className="fb-subtitle t3"
+              style={{ fontWeight: "400", color: colors.palette.staticWhite }}
+            >
               {`${latestFcp?.name ?? "FCP"}: ${latestFcp?.duration ? latestFcp.duration.toFixed(2) : "--"}ms`}
             </text>
           </FloatingButton>

package/src/styles/ThemeContext.ts

@@ -1,5 +1,5 @@
 import { createContext, useContext } from "@lynx-js/react";
-import { type ThemeColors, getColors } from "./theme";
+import { getColors, type ThemeColors } from "./theme";
 
 const ThemeContext = createContext<ThemeColors>(getColors("light"));
 

package/src/styles/theme.ts

@@ -90,20 +90,6 @@ export const duration = {
   d6: "300ms",
 } as const;
 
-export const dimension = {
-  x2: "8px",
-  x3: "12px",
-  x4: "16px",
-  x6: "24px",
-  spacingX: {
-    globalGutter: "16px",
-  },
-} as const;
-
-export const radius = {
-  r6: "24px",
-} as const;
-
 export function getColors(theme: Theme) {
   return colorMap[theme];
 }

package/src/styles/tokens.css

@@ -0,0 +1,40 @@
+.t1 {
+  font-size: 0.6875rem;
+  line-height: 0.9375rem;
+}
+.t2 {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+.t3 {
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+}
+.t4 {
+  font-size: 0.875rem;
+  line-height: 1.1875rem;
+}
+.t5 {
+  font-size: 1rem;
+  line-height: 1.375rem;
+}
+.t6 {
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+}
+.t7 {
+  font-size: 1.25rem;
+  line-height: 1.6875rem;
+}
+.t8 {
+  font-size: 1.375rem;
+  line-height: 1.875rem;
+}
+.t9 {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+.t10 {
+  font-size: 1.625rem;
+  line-height: 2.1875rem;
+}

package/src/components/FadeList.tsx

@@ -1,31 +0,0 @@
-import { useRef } from "@lynx-js/react";
-import type { NodesRef } from "@lynx-js/types";
-
-interface FadeListProps {
-  className?: string;
-  listRef?: React.RefObject<NodesRef>;
-  children: React.ReactNode;
-  "preload-buffer-count"?: number;
-  "initial-scroll-index"?: number;
-}
-
-export const FadeList = ({
-  className,
-  listRef: externalListRef,
-  children,
-  ...listProps
-}: FadeListProps) => {
-  const internalListRef = useRef<NodesRef>(null);
-  const listRef = externalListRef ?? internalListRef;
-
-  return (
-    <list
-      ref={listRef}
-      scroll-orientation="vertical"
-      className={className}
-      {...listProps}
-    >
-      {children}
-    </list>
-  );
-};

package/src/styles/getDimensionValue.ts

@@ -1,7 +0,0 @@
-import { dimensions } from "./tokens.json";
-
-export type DimensionTokenId = keyof typeof dimensions;
-
-export function getDimensionValue(tokenId: DimensionTokenId) {
-  return dimensions[tokenId];
-}