lynx-console 0.1.1 → 0.2.1

package/src/components/NetworkPanel.tsx

@@ -2,7 +2,7 @@ import { useState } from "@lynx-js/react";
 import type { NetworkEntry } from "../types";
 import { FadeList } from "./FadeList";
 import { NetworkDetailSection } from "./NetworkDetailSection";
-import * as css from "./NetworkPanel.css";
+import "./NetworkPanel.css";
 
 interface NetworkPanelProps {
   networks: NetworkEntry[];
@@ -67,68 +67,56 @@ export const NetworkPanel = ({
   };
 
   return (
-    <view className={css.container}>
-      <view className={css.header}>
-        <text className={css.count}>Total: {networks.length} requests</text>
-        <view className={css.clearButton} bindtap={clearNetworks}>
-          <text className={css.clearButtonText}>🗑</text>
+    <view className={"np-container"}>
+      <view className={"np-header"}>
+        <text className={"np-count"}>Total: {networks.length} requests</text>
+        <view className={"np-clearButton"} bindtap={clearNetworks}>
+          <text className={"np-clearButtonText"}>🗑</text>
         </view>
       </view>
 
       {networks.length === 0 ? (
-        <view className={css.placeholder}>
-          <text className={css.placeholderText}>No network requests yet</text>
+        <view className={"np-placeholder"}>
+          <text className={"np-placeholderText"}>No network requests yet</text>
         </view>
       ) : (
-        <FadeList className={css.list}>
+        <FadeList className={"np-list"}>
           {networks.map((network) => (
             <list-item key={network.id} item-key={network.id}>
-              <view className={css.item({ status: network.status })}>
+              <view className={`np-item np-item--${network.status}`}>
                 <view
-                  className={css.itemHeader}
+                  className={"np-itemHeader"}
                   bindtap={() =>
                     setSelectedId(selectedId === network.id ? null : network.id)
                   }
                 >
                   <text
-                    className={css.method({
-                      type: network.method as
-                        | "GET"
-                        | "POST"
-                        | "PUT"
-                        | "PATCH"
-                        | "DELETE",
-                    })}
+                    className={`np-method np-method--${network.method}`}
                   >
                     {network.method}
                   </text>
                   {network.statusCode && (
                     <text
-                      className={css.statusCode({
-                        type: getStatusCodeVariant(
-                          network.status,
-                          network.statusCode,
-                        ),
-                      })}
+                      className={`np-statusCode np-statusCode--${getStatusCodeVariant(network.status, network.statusCode)}`}
                     >
                       {network.statusCode}
                     </text>
                   )}
                   {network.status === "pending" && (
-                    <text className={css.statusCode({ type: "pending" })}>
+                    <text className={"np-statusCode np-statusCode--pending"}>
                       Pending...
                     </text>
                   )}
-                  <text className={css.time}>
+                  <text className={"np-time"}>
                     {formatDuration(network.duration)}
                   </text>
-                  <text className={css.time}>
+                  <text className={"np-time"}>
                     {new Date(network.startTime).toISOString()}
                   </text>
                 </view>
 
                 <text
-                  className={css.path}
+                  className={"np-path"}
                   bindtap={() =>
                     setSelectedId(selectedId === network.id ? null : network.id)
                   }
@@ -137,43 +125,35 @@ export const NetworkPanel = ({
                 </text>
 
                 {selectedId === network.id && (
-                  <view className={css.detailsContainer}>
+                  <view className={"np-detailsContainer"}>
                     {/* Tabs */}
-                    <view className={css.tabs}>
+                    <view className={"np-tabs"}>
                       <view
-                        className={css.tab({ active: activeTab === "general" })}
+                        className={`np-tab${activeTab === "general" ? " np-tab--active" : ""}`}
                         bindtap={() => setActiveTab("general")}
                       >
                         <text
-                          className={css.tabText({
-                            active: activeTab === "general",
-                          })}
+                          className={`np-tabText${activeTab === "general" ? " np-tabText--active" : ""}`}
                         >
                           General
                         </text>
                       </view>
                       <view
-                        className={css.tab({ active: activeTab === "request" })}
+                        className={`np-tab${activeTab === "request" ? " np-tab--active" : ""}`}
                         bindtap={() => setActiveTab("request")}
                       >
                         <text
-                          className={css.tabText({
-                            active: activeTab === "request",
-                          })}
+                          className={`np-tabText${activeTab === "request" ? " np-tabText--active" : ""}`}
                         >
                           Request
                         </text>
                       </view>
                       <view
-                        className={css.tab({
-                          active: activeTab === "response",
-                        })}
+                        className={`np-tab${activeTab === "response" ? " np-tab--active" : ""}`}
                         bindtap={() => setActiveTab("response")}
                       >
                         <text
-                          className={css.tabText({
-                            active: activeTab === "response",
-                          })}
+                          className={`np-tabText${activeTab === "response" ? " np-tabText--active" : ""}`}
                         >
                           Response
                         </text>
@@ -181,13 +161,13 @@ export const NetworkPanel = ({
                     </view>
 
                     {/* Tab Content */}
-                    <view className={css.tabContent}>
+                    <view className={"np-tabContent"}>
                       {activeTab === "general" && (
-                        <view className={css.table}>
+                        <view className={"np-table"}>
                           {getGeneralInfo(network).map((item) => (
-                            <view key={item.key} className={css.tableRow}>
-                              <text className={css.tableKey}>{item.key}</text>
-                              <text className={css.tableValue}>
+                            <view key={item.key} className={"np-tableRow"}>
+                              <text className={"np-tableKey"}>{item.key}</text>
+                              <text className={"np-tableValue"}>
                                 {item.value}
                               </text>
                             </view>

package/src/components/PerformancePanel.css

@@ -0,0 +1,249 @@
+.pp-container {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding-top: 4px;
+}
+
+.pp-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  padding-bottom: 4px;
+  border-bottom-width: 1px;
+  border-bottom-color: var(--lynx-console-color-stroke-neutral-subtle);
+  border-bottom-style: solid;
+}
+
+.pp-count {
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: var(--lynx-console-font-weight-regular);
+  color: var(--lynx-console-color-fg-neutral-subtle);
+}
+
+.pp-clearButton {
+  padding: 3px 6px;
+  background-color: var(--lynx-console-color-bg-neutral-weak);
+  border-radius: 4px;
+}
+
+.pp-clearButtonText {
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: var(--lynx-console-font-weight-medium);
+  color: var(--lynx-console-color-fg-neutral-muted);
+}
+
+.pp-list {
+  flex: 1;
+}
+
+.pp-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.pp-placeholderText {
+  font-size: 0.875rem;
+  line-height: 1.1875rem;
+  font-weight: var(--lynx-console-font-weight-regular);
+  color: var(--lynx-console-color-fg-disabled);
+}
+
+.pp-item {
+  padding: 8px;
+  border-bottom-width: 1px;
+  border-bottom-color: var(--lynx-console-color-stroke-neutral-weak);
+  border-bottom-style: solid;
+}
+
+.pp-itemHeader {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 4px;
+  gap: 8px;
+}
+
+.pp-entryType {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: var(--lynx-console-font-weight-bold);
+  padding: 0 6px;
+  border-radius: 2px;
+  color: var(--lynx-console-color-fg-neutral);
+  background-color: var(--lynx-console-color-bg-neutral-weak);
+}
+
+.pp-entryType--init {
+  color: var(--lynx-console-color-palette-blue-600);
+  background-color: var(--lynx-console-color-palette-blue-100);
+}
+
+.pp-entryType--metric {
+  color: var(--lynx-console-color-palette-green-600);
+  background-color: var(--lynx-console-color-palette-green-100);
+}
+
+.pp-entryType--pipeline {
+  color: var(--lynx-console-color-palette-purple-600);
+  background-color: var(--lynx-console-color-palette-purple-100);
+}
+
+.pp-entryType--resource {
+  color: var(--lynx-console-color-palette-yellow-600);
+  background-color: var(--lynx-console-color-palette-yellow-100);
+}
+
+.pp-entryName {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: var(--lynx-console-font-weight-medium);
+  color: var(--lynx-console-color-fg-neutral);
+}
+
+.pp-timestamp {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: var(--lynx-console-font-weight-regular);
+  color: var(--lynx-console-color-fg-neutral-subtle);
+}
+
+.pp-fcpMetricHeader {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+
+.pp-fcpHighlight {
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: var(--lynx-console-font-weight-bold);
+  color: var(--lynx-console-color-palette-blue-600);
+  background-color: var(--lynx-console-color-palette-blue-100);
+  padding: 4px 8px;
+  border-radius: 4px;
+  margin-top: 4px;
+}
+
+.pp-metrics {
+  margin-top: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.pp-metric {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  background-color: var(--lynx-console-color-bg-neutral-weak);
+  border-radius: 2px;
+}
+
+.pp-metricName {
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: var(--lynx-console-font-weight-medium);
+  color: var(--lynx-console-color-fg-neutral-subtle);
+  min-width: 100px;
+  flex-shrink: 0;
+}
+
+.pp-metricValue {
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: var(--lynx-console-font-weight-bold);
+  color: var(--lynx-console-color-palette-green-600);
+  flex: 1;
+}
+
+.pp-detailsContainer {
+  margin-top: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.pp-fcpSection {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.pp-fcpSectionDescription {
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: var(--lynx-console-font-weight-regular);
+  color: var(--lynx-console-color-fg-neutral-subtle);
+  margin-bottom: 4px;
+}
+
+.pp-fcpMetric {
+  background-color: var(--lynx-console-color-bg-layer-default);
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.pp-fcpMetricName {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-weight: var(--lynx-console-font-weight-bold);
+  color: var(--lynx-console-color-fg-neutral);
+}
+
+.pp-fcpMetricValue {
+  font-size: 0.6875rem;
+  line-height: 0.9375rem;
+  font-weight: var(--lynx-console-font-weight-bold);
+  color: var(--lynx-console-color-palette-blue-600);
+}
+
+.pp-fcpMetricDescription {
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: var(--lynx-console-font-weight-regular);
+  color: var(--lynx-console-color-fg-neutral-subtle);
+}
+
+.pp-fcpMetricFormula {
+  font-size: 0.875rem;
+  line-height: 1.1875rem;
+  font-weight: var(--lynx-console-font-weight-regular);
+  color: var(--lynx-console-color-fg-disabled);
+  font-family: monospace;
+}
+
+.pp-rawEntrySection {
+  padding: 12px;
+  background-color: var(--lynx-console-color-bg-neutral-weak);
+  border-radius: 4px;
+}
+
+.pp-detailTitle {
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: var(--lynx-console-font-weight-bold);
+  color: var(--lynx-console-color-fg-neutral);
+  margin-bottom: 8px;
+}
+
+.pp-rawEntry {
+  font-size: 0.8125rem;
+  line-height: 1.125rem;
+  font-weight: var(--lynx-console-font-weight-regular);
+  color: var(--lynx-console-color-fg-neutral-subtle);
+  font-family: monospace;
+  white-space: pre-wrap;
+  word-break: break-all;
+}

package/src/components/PerformancePanel.tsx

@@ -2,7 +2,7 @@ import { useState } from "@lynx-js/react";
 import { stringify } from "javascript-stringify";
 import type { PerformanceEntryData } from "../types";
 import { FadeList } from "./FadeList";
-import * as css from "./PerformancePanel.css";
+import "./PerformancePanel.css";
 
 interface PerformancePanelProps {
   performances: PerformanceEntryData[];
@@ -68,9 +68,9 @@ export const PerformancePanel = ({
   const [selectedId, setSelectedId] = useState<string | null>(null);
   if (performances.length === 0) {
     return (
-      <view className={css.container}>
-        <view className={css.header}>
-          <text className={css.count}>0 entries</text>
+      <view className={"pp-container"}>
+        <view className={"pp-header"}>
+          <text className={"pp-count"}>0 entries</text>
           <view
             bindtap={() => {
               console.log("[PerformancePanel] performances", performances);
@@ -79,12 +79,12 @@ export const PerformancePanel = ({
           >
             <text>Log</text>
           </view>
-          <view bindtap={clearPerformances} className={css.clearButton}>
-            <text className={css.clearButtonText}>🗑</text>
+          <view bindtap={clearPerformances} className={"pp-clearButton"}>
+            <text className={"pp-clearButtonText"}>🗑</text>
           </view>
         </view>
-        <view className={css.placeholder}>
-          <text className={css.placeholderText}>
+        <view className={"pp-placeholder"}>
+          <text className={"pp-placeholderText"}>
             No performance data yet...
           </text>
         </view>
@@ -93,15 +93,15 @@ export const PerformancePanel = ({
   }
 
   return (
-    <view className={css.container}>
-      <view className={css.header}>
-        <text className={css.count}>{performances.length} entries</text>
-        <view bindtap={clearPerformances} className={css.clearButton}>
-          <text className={css.clearButtonText}>🗑</text>
+    <view className={"pp-container"}>
+      <view className={"pp-header"}>
+        <text className={"pp-count"}>{performances.length} entries</text>
+        <view bindtap={clearPerformances} className={"pp-clearButton"}>
+          <text className={"pp-clearButtonText"}>🗑</text>
         </view>
       </view>
 
-      <FadeList className={css.list}>
+      <FadeList className={"pp-list"}>
         {performances.map((perf) => {
           const isMetricFcp = isMetricFcpEntry(perf);
           const fcpMetrics = extractFcpMetrics(perf);
@@ -110,18 +110,18 @@ export const PerformancePanel = ({
 
           return (
             <list-item key={perf.id} item-key={perf.id}>
-              <view className={css.item}>
+              <view className={"pp-item"}>
                 <view
-                  className={css.itemHeader}
+                  className={"pp-itemHeader"}
                   bindtap={() =>
                     setSelectedId(selectedId === perf.id ? null : perf.id)
                   }
                 >
-                  <text className={css.entryType({ type: perf.entryType })}>
+                  <text className={`pp-entryType pp-entryType--${perf.entryType}`}>
                     {perf.entryType}
                   </text>
-                  <text className={css.entryName}>{perf.name}</text>
-                  <text className={css.timestamp}>
+                  <text className={"pp-entryName"}>{perf.name}</text>
+                  <text className={"pp-timestamp"}>
                     {new Date(perf.timestamp).toISOString()}
                   </text>
                 </view>
@@ -132,25 +132,25 @@ export const PerformancePanel = ({
                   }
                 >
                   {isMetricFcp && primaryFcp && (
-                    <text className={css.fcpHighlight}>{primaryFcp}</text>
+                    <text className={"pp-fcpHighlight"}>{primaryFcp}</text>
                   )}
                 </view>
 
                 {selectedId === perf.id && (
-                  <view className={css.detailsContainer}>
+                  <view className={"pp-detailsContainer"}>
                     {isMetricFcp && fcpMetrics && (
-                      <view className={css.fcpSection}>
+                      <view className={"pp-fcpSection"}>
                         {totalFcp !== undefined && (
-                          <view className={css.fcpMetric}>
-                            <view className={css.fcpMetricHeader}>
-                              <text className={css.fcpMetricName}>
+                          <view className={"pp-fcpMetric"}>
+                            <view className={"pp-fcpMetricHeader"}>
+                              <text className={"pp-fcpMetricName"}>
                                 전체 FCP
                               </text>
-                              <text className={css.fcpMetricValue}>
+                              <text className={"pp-fcpMetricValue"}>
                                 {formatDuration(totalFcp.duration)}
                               </text>
                             </view>
-                            <text className={css.fcpMetricDescription}>
+                            <text className={"pp-fcpMetricDescription"}>
                               PrepareTemplate Start부터 Paint End 까지 걸리는
                               시간
                             </text>
@@ -158,30 +158,30 @@ export const PerformancePanel = ({
                         )}
 
                         {lynxFcp !== undefined && (
-                          <view className={css.fcpMetric}>
-                            <view className={css.fcpMetricHeader}>
-                              <text className={css.fcpMetricName}>LynxFCP</text>
-                              <text className={css.fcpMetricValue}>
+                          <view className={"pp-fcpMetric"}>
+                            <view className={"pp-fcpMetricHeader"}>
+                              <text className={"pp-fcpMetricName"}>LynxFCP</text>
+                              <text className={"pp-fcpMetricValue"}>
                                 {formatDuration(lynxFcp.duration)}
                               </text>
                             </view>
-                            <text className={css.fcpMetricDescription}>
+                            <text className={"pp-fcpMetricDescription"}>
                               Bundle Load 시작부터 Paint End 까지 걸리는 시간
                             </text>
                           </view>
                         )}
 
                         {fcp !== undefined && (
-                          <view className={css.fcpMetric}>
-                            <view className={css.fcpMetricHeader}>
-                              <text className={css.fcpMetricName}>
+                          <view className={"pp-fcpMetric"}>
+                            <view className={"pp-fcpMetricHeader"}>
+                              <text className={"pp-fcpMetricName"}>
                                 렌더링 FCP
                               </text>
-                              <text className={css.fcpMetricValue}>
+                              <text className={"pp-fcpMetricValue"}>
                                 {formatDuration(fcp.duration)}
                               </text>
                             </view>
-                            <text className={css.fcpMetricDescription}>
+                            <text className={"pp-fcpMetricDescription"}>
                               TemplateBundle 준비부터 Paint End 까지 걸리는 시간
                             </text>
                           </view>
@@ -190,9 +190,9 @@ export const PerformancePanel = ({
                     )}
 
                     {!!perf.rawEntry && (
-                      <view className={css.rawEntrySection}>
-                        <text className={css.detailTitle}>Raw Entry</text>
-                        <text className={css.rawEntry}>
+                      <view className={"pp-rawEntrySection"}>
+                        <text className={"pp-detailTitle"}>Raw Entry</text>
+                        <text className={"pp-rawEntry"}>
                           {String(stringify(perf.rawEntry, null, 2, { references: true }))}
                         </text>
                       </view>

package/src/components/Tabs.css

@@ -0,0 +1,78 @@
+.tabs-root {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.tabs-header {
+  display: flex;
+  box-shadow: inset 0 -1px 0 0 var(--lynx-console-color-stroke-neutral-subtle);
+}
+
+.tabs-triggerButton {
+  flex: 1;
+  color: var(--lynx-console-color-fg-neutral-subtle);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 12px 0 10px 0;
+  position: relative;
+}
+
+.tabs-triggerButtonText {
+  font-size: 1rem;
+  line-height: 1.375rem;
+  font-weight: var(--lynx-console-font-weight-bold);
+  color: var(--lynx-console-color-fg-neutral-subtle);
+}
+
+.tabs-triggerButtonText--active {
+  color: var(--lynx-console-color-fg-neutral);
+}
+
+.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;
+  left: 0;
+  padding: 0 16px;
+  width: 100%;
+  transition: 200ms;
+  transition-timing-function: cubic-bezier(.35, 0, .35, 1);
+}
+
+.tabs-triggerIndicatorLine {
+  background-color: var(--lynx-console-color-fg-neutral);
+  width: 100%;
+  height: 2px;
+}
+
+.tabs-contents {
+  flex: 1;
+  width: 100%;
+}
+
+.tabs-content {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}