@raystack/chronicle 0.7.4 → 0.8.0

package/src/components/api/index.ts

@@ -1,8 +1,7 @@
-export { EndpointPage } from './endpoint-page'
+export { ApiOverview } from './api-overview'
+export { ApiFieldSection } from './api-field-list'
+export { ApiCodeSnippet } from './api-code-snippet'
+export { ApiResponsePanel } from './api-response-panel'
+export { PlaygroundDialog } from './playground-dialog'
 export { MethodBadge } from './method-badge'
-export { FieldSection } from './field-section'
-export { FieldRow } from './field-row'
-export { CodeSnippets } from './code-snippets'
-export { ResponsePanel } from './response-panel'
 export { JsonEditor } from './json-editor'
-export { KeyValueEditor } from './key-value-editor'

package/src/components/api/json-editor.tsx

@@ -17,9 +17,11 @@ interface JsonEditorProps {
 export function JsonEditor({ value, onChange, readOnly }: JsonEditorProps) {
   const containerRef = useRef<HTMLDivElement>(null)
   const viewRef = useRef<EditorView | null>(null)
+  const onChangeRef = useRef(onChange)
   const { theme } = useTheme()
 
   const isDark = theme === 'dark'
+  onChangeRef.current = onChange
 
   useEffect(() => {
     if (!containerRef.current) return
@@ -30,13 +32,11 @@ export function JsonEditor({ value, onChange, readOnly }: JsonEditorProps) {
       EditorView.lineWrapping,
       ...(isDark ? [oneDark] : []),
       ...(readOnly ? [EditorState.readOnly.of(true)] : []),
-      ...(onChange
-        ? [EditorView.updateListener.of((update) => {
-            if (update.docChanged) {
-              onChange(update.state.doc.toString())
-            }
-          })]
-        : []),
+      EditorView.updateListener.of((update) => {
+        if (update.docChanged && onChangeRef.current) {
+          onChangeRef.current(update.state.doc.toString())
+        }
+      }),
     ]
 
     const state = EditorState.create({ doc: value, extensions })
@@ -44,7 +44,7 @@ export function JsonEditor({ value, onChange, readOnly }: JsonEditorProps) {
     viewRef.current = view
 
     return () => view.destroy()
-  }, [isDark, readOnly, onChange])
+  }, [isDark, readOnly])
 
   useEffect(() => {
     const view = viewRef.current

package/src/components/api/method-badge.tsx

@@ -6,8 +6,8 @@ import styles from './method-badge.module.css'
 type BadgeVariant = 'accent' | 'danger' | 'success' | 'neutral' | 'warning' | 'gradient'
 
 const methodVariants: Record<string, BadgeVariant> = {
-  GET: 'accent',
-  POST: 'success',
+  GET: 'success',
+  POST: 'accent',
   PUT: 'warning',
   DELETE: 'danger',
   PATCH: 'neutral',

package/src/components/api/playground-dialog.module.css

@@ -0,0 +1,342 @@
+.dialog {
+  padding: 0 !important;
+  border: 1px solid var(--rs-color-border-base-primary);
+  border-radius: var(--rs-radius-2);
+  overflow: hidden;
+  height: 70vh;
+  max-height: 600px;
+  width: 70vw;
+  max-width: 900px;
+  display: flex;
+  flex-direction: column;
+}
+
+.actionNav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--rs-space-3) var(--rs-space-5);
+  background: var(--rs-color-background-base-secondary);
+  border-bottom: 0.5px solid var(--rs-color-border-base-primary);
+  flex-shrink: 0;
+  z-index: 3;
+}
+
+.actionNavTitle {
+  font-size: var(--rs-font-size-small);
+  font-weight: var(--rs-font-weight-medium);
+  line-height: var(--rs-line-height-small);
+  color: var(--rs-color-foreground-base-primary);
+}
+
+.splitPanel {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  z-index: 2;
+}
+
+.leftPanel {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.rightPanel {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  border-left: 0.5px solid var(--rs-color-border-base-primary);
+  overflow: hidden;
+}
+
+.panelHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--rs-space-5);
+  height: 42px;
+  border-bottom: 0.5px solid var(--rs-color-border-base-primary);
+  flex-shrink: 0;
+}
+
+.panelTitle {
+  font-size: var(--rs-font-size-small);
+  font-weight: var(--rs-font-weight-medium);
+  line-height: var(--rs-line-height-small);
+  color: var(--rs-color-foreground-base-primary);
+  flex: 1;
+}
+
+.tabBar {
+  display: flex;
+  align-items: center;
+  gap: var(--rs-space-6);
+  padding: var(--rs-space-2) var(--rs-space-5) 0;
+  border-bottom: 0.5px solid var(--rs-color-border-base-primary);
+  background: var(--rs-color-background-base-primary);
+  flex-shrink: 0;
+}
+
+.tab {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  padding: 0;
+  border: none;
+  border-bottom: 1px solid transparent;
+  background: transparent;
+  cursor: pointer;
+  font-size: var(--rs-font-size-small);
+  font-weight: var(--rs-font-weight-medium);
+  line-height: var(--rs-line-height-small);
+  letter-spacing: var(--rs-letter-spacing-small);
+  color: var(--rs-color-foreground-base-secondary);
+}
+
+.tab:hover {
+  color: var(--rs-color-foreground-base-primary);
+}
+
+.tabActive {
+  color: var(--rs-color-foreground-base-primary);
+  border-bottom-color: var(--rs-color-border-base-emphasis);
+}
+
+.fieldsScroll {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-bottom: var(--rs-space-5);
+}
+
+.sectionHeader {
+  display: flex;
+  align-items: center;
+  gap: var(--rs-space-3);
+  padding: var(--rs-space-3) var(--rs-space-5);
+  background: var(--rs-color-background-base-secondary);
+  border-bottom: 0.5px solid var(--rs-color-border-base-primary);
+  border-top: 0.5px solid var(--rs-color-border-base-primary);
+  flex-shrink: 0;
+}
+
+.sectionLabel {
+  flex: 1;
+  font-size: var(--rs-font-size-mini);
+  font-weight: var(--rs-font-weight-medium);
+  line-height: var(--rs-line-height-mini);
+  letter-spacing: var(--rs-letter-spacing-mini);
+  color: var(--rs-color-foreground-base-primary);
+}
+
+.fieldRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: var(--rs-space-4) var(--rs-space-5);
+}
+
+.fieldLabel {
+  flex: 1;
+  font-size: var(--rs-font-size-mini);
+  font-weight: var(--rs-font-weight-medium);
+  line-height: var(--rs-line-height-mini);
+  letter-spacing: var(--rs-letter-spacing-mini);
+  color: var(--rs-color-foreground-base-primary);
+  min-width: 0;
+}
+
+.fieldInput {
+  width: 50%;
+  flex-shrink: 0;
+}
+
+.fieldInput input {
+  height: 24px;
+  font-size: var(--rs-font-size-small);
+}
+
+.arrayField {
+  display: flex;
+  flex-direction: column;
+}
+
+.nestedFields {
+  padding-left: var(--rs-space-5);
+  border-left: 1px dashed var(--rs-color-border-base-primary);
+  margin-left: var(--rs-space-5);
+}
+
+.arrayItemRow {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--rs-space-3);
+  padding: var(--rs-space-2) var(--rs-space-5) var(--rs-space-2) var(--rs-space-8);
+}
+
+.jsonEditorWrap {
+  flex: 1;
+  min-height: 150px;
+  border-bottom: 0.5px solid var(--rs-color-border-base-primary);
+}
+
+.responseHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--rs-space-5);
+  height: 42px;
+  border-bottom: 0.5px solid var(--rs-color-border-base-primary);
+  flex-shrink: 0;
+}
+
+.statusBar {
+  display: flex;
+  align-items: center;
+  gap: var(--rs-space-3);
+  padding: var(--rs-space-3) var(--rs-space-5);
+  background: var(--rs-color-background-base-secondary);
+  flex-shrink: 0;
+}
+
+.statusText {
+  font-size: var(--rs-font-size-mini);
+  font-weight: var(--rs-font-weight-medium);
+  line-height: var(--rs-line-height-mini);
+  letter-spacing: var(--rs-letter-spacing-mini);
+  color: var(--rs-color-foreground-base-primary);
+}
+
+.statusValue {
+  color: var(--rs-color-foreground-success-primary);
+}
+
+.statusSeparator {
+  width: 1px;
+  height: 12px;
+  background: var(--rs-color-border-base-tertiary);
+  border-radius: 2px;
+}
+
+.responseBody {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: var(--rs-space-5);
+}
+
+.responseCode {
+  font-family: var(--rs-font-mono);
+  font-size: var(--rs-font-size-mono-small);
+  line-height: 18px;
+  color: var(--rs-color-foreground-danger-primary);
+  white-space: pre-wrap;
+  word-break: break-all;
+  margin: 0;
+}
+
+.lineNumbers {
+  font-family: var(--rs-font-mono);
+  font-size: var(--rs-font-size-mono-small);
+  line-height: 18px;
+  color: var(--rs-color-foreground-base-tertiary);
+  opacity: 0.5;
+  text-align: right;
+  white-space: nowrap;
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.codeArea {
+  display: flex;
+  gap: var(--rs-space-5);
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: var(--rs-space-5);
+}
+
+.headersArea {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--rs-space-3) 0;
+}
+
+.headerRow {
+  display: flex;
+  align-items: baseline;
+  gap: var(--rs-space-3);
+  padding: var(--rs-space-2) var(--rs-space-5);
+  border-bottom: 0.5px solid var(--rs-color-border-base-primary);
+}
+
+.headerKey {
+  font-family: var(--rs-font-mono);
+  font-size: var(--rs-font-size-mono-small);
+  line-height: 18px;
+  color: var(--rs-color-foreground-base-primary);
+  font-weight: var(--rs-font-weight-medium);
+  white-space: nowrap;
+}
+
+.headerValue {
+  font-family: var(--rs-font-mono);
+  font-size: var(--rs-font-size-mono-small);
+  line-height: 18px;
+  color: var(--rs-color-foreground-base-secondary);
+  word-break: break-all;
+}
+
+.emptyResponse {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  color: var(--rs-color-foreground-base-tertiary);
+  font-size: var(--rs-font-size-small);
+}
+
+.bottomBar {
+  display: flex;
+  align-items: center;
+  gap: var(--rs-space-6);
+  padding: var(--rs-space-3) var(--rs-space-5);
+  background: var(--rs-color-background-base-primary);
+  border-top: 0.5px solid var(--rs-color-border-base-primary);
+  flex-shrink: 0;
+  z-index: 1;
+}
+
+.pathBar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+  min-width: 0;
+  padding: var(--rs-space-2);
+  border: 0.5px solid var(--rs-color-border-base-primary);
+  border-radius: var(--rs-radius-2);
+  background: var(--rs-color-background-base-primary);
+  gap: 8px;
+}
+
+.pathText {
+  font-family: var(--rs-font-mono);
+  font-size: var(--rs-font-size-mono-small);
+  line-height: var(--rs-line-height-small);
+  color: var(--rs-color-foreground-base-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}