canopycms 0.0.0 → 0.0.2

package/src/editor/fields/MarkdownField.tsx

@@ -1,205 +0,0 @@
-import React, { Suspense, useId, useRef, useCallback, useEffect } from 'react'
-
-import { Text, Textarea } from '@mantine/core'
-
-import type { MDXEditorMethods } from '@mdxeditor/editor'
-
-export interface MarkdownFieldProps {
-  id?: string
-  label?: string
-  value: string
-  onChange: (value: string) => void
-  dataCanopyField?: string
-}
-
-const MDXEditorLazy = React.lazy(async () => {
-  const [
-    { MDXEditor },
-    {
-      headingsPlugin,
-      listsPlugin,
-      quotePlugin,
-      thematicBreakPlugin,
-      markdownShortcutPlugin,
-      linkPlugin,
-      linkDialogPlugin,
-      tablePlugin,
-      toolbarPlugin,
-      codeBlockPlugin,
-      codeMirrorPlugin,
-      BoldItalicUnderlineToggles,
-      BlockTypeSelect,
-      ListsToggle,
-      CreateLink,
-      InsertTable,
-      InsertThematicBreak,
-      CodeToggle,
-      InsertCodeBlock,
-      UndoRedo,
-      Separator,
-    },
-  ] = await Promise.all([import('@mdxeditor/editor'), import('@mdxeditor/editor')])
-
-  const WrappedEditor: React.FC<{
-    markdown: string
-    onChange: (value: string) => void
-    editorRef?: React.Ref<MDXEditorMethods>
-  }> = ({ markdown, onChange, editorRef }) => {
-    return (
-      <MDXEditor
-        ref={editorRef}
-        markdown={markdown}
-        onChange={onChange}
-        plugins={[
-          headingsPlugin(),
-          listsPlugin(),
-          quotePlugin(),
-          thematicBreakPlugin(),
-          markdownShortcutPlugin(),
-          linkPlugin(),
-          linkDialogPlugin(),
-          tablePlugin(),
-          codeBlockPlugin({ defaultCodeBlockLanguage: '' }),
-          codeMirrorPlugin({
-            codeBlockLanguages: {
-              '': 'Plain text',
-              js: 'JavaScript',
-              ts: 'TypeScript',
-              tsx: 'TSX',
-              jsx: 'JSX',
-              css: 'CSS',
-              html: 'HTML',
-              json: 'JSON',
-              bash: 'Bash',
-              python: 'Python',
-              yaml: 'YAML',
-              markdown: 'Markdown',
-            },
-          }),
-          toolbarPlugin({
-            toolbarContents: () => (
-              <>
-                <UndoRedo />
-                <Separator />
-                <BoldItalicUnderlineToggles />
-                <CodeToggle />
-                <Separator />
-                <BlockTypeSelect />
-                <Separator />
-                <ListsToggle />
-                <Separator />
-                <CreateLink />
-                <InsertTable />
-                <InsertThematicBreak />
-                <InsertCodeBlock />
-              </>
-            ),
-          }),
-        ]}
-        contentEditableClassName="canopy-mdx-content"
-      />
-    )
-  }
-
-  return { default: WrappedEditor }
-})
-
-/** Style the editor wrapper with a white background and border so it's visually distinct from the form background. */
-const editorWrapperStyle: React.CSSProperties = {
-  background: '#fff',
-  border: '1px solid var(--mantine-color-gray-4, #ced4da)',
-  borderRadius: 'var(--mantine-radius-sm, 4px)',
-  overflow: 'hidden',
-}
-
-/**
- * Mantine's global CSS reset strips styles from semantic HTML elements.
- * Restore them inside the MDXEditor content area so formatting is visible.
- */
-const EditorContentStyles: React.FC = () => (
-  <style>{`
-    .canopy-mdx-content { min-height: 120px; padding: 8px 12px; }
-    .canopy-mdx-content ul { list-style-type: disc; padding-left: 1.5em; margin: 0.5em 0; }
-    .canopy-mdx-content ol { list-style-type: decimal; padding-left: 1.5em; margin: 0.5em 0; }
-    .canopy-mdx-content ul ul { list-style-type: circle; }
-    .canopy-mdx-content ul ul ul { list-style-type: square; }
-    .canopy-mdx-content li { display: list-item; }
-    .canopy-mdx-content h1 { font-size: 2em; font-weight: 700; margin: 0.67em 0; }
-    .canopy-mdx-content h2 { font-size: 1.5em; font-weight: 600; margin: 0.83em 0; }
-    .canopy-mdx-content h3 { font-size: 1.17em; font-weight: 600; margin: 1em 0; }
-    .canopy-mdx-content h4 { font-size: 1em; font-weight: 600; margin: 1.33em 0; }
-    .canopy-mdx-content h5 { font-size: 0.83em; font-weight: 600; margin: 1.67em 0; }
-    .canopy-mdx-content h6 { font-size: 0.67em; font-weight: 600; margin: 2.33em 0; }
-    .canopy-mdx-content blockquote {
-      border-left: 3px solid var(--mantine-color-gray-4, #ced4da);
-      padding-left: 1em;
-      margin: 0.5em 0;
-      color: var(--mantine-color-gray-7, #495057);
-    }
-    .canopy-mdx-content hr { border: none; border-top: 1px solid var(--mantine-color-gray-4, #ced4da); margin: 1em 0; }
-    .canopy-mdx-content p { margin: 0.75em 0; }
-    .canopy-mdx-content a { color: var(--mantine-color-blue-6, #228be6); text-decoration: underline; }
-  `}</style>
-)
-
-const FallbackTextarea: React.FC<Pick<MarkdownFieldProps, 'value' | 'onChange'>> = ({
-  value,
-  onChange,
-}) => (
-  <Textarea
-    value={value}
-    onChange={(e) => onChange(e.currentTarget.value)}
-    placeholder="Loading markdown editor..."
-    autosize
-    minRows={6}
-    size="sm"
-    readOnly
-  />
-)
-
-export const MarkdownField: React.FC<MarkdownFieldProps> = ({
-  id,
-  label,
-  value,
-  onChange,
-  dataCanopyField,
-}) => {
-  const generatedId = useId()
-  const inputId = id ?? generatedId
-  const editorRef = useRef<MDXEditorMethods>(null)
-  const lastExternalValue = useRef(value)
-
-  // Sync external value changes into the editor (e.g., undo, reset, load)
-  useEffect(() => {
-    if (value !== lastExternalValue.current && editorRef.current) {
-      editorRef.current.setMarkdown(value)
-      lastExternalValue.current = value
-    }
-  }, [value])
-
-  const handleChange = useCallback(
-    (newValue: string) => {
-      lastExternalValue.current = newValue
-      onChange(newValue)
-    },
-    [onChange],
-  )
-
-  return (
-    <div id={inputId} data-canopy-field={dataCanopyField} className="canopy-markdown-field">
-      {label && (
-        <Text size="sm" fw={500} mb={4}>
-          {label}
-        </Text>
-      )}
-      <EditorContentStyles />
-      <div style={editorWrapperStyle}>
-        <Suspense fallback={<FallbackTextarea value={value} onChange={onChange} />}>
-          <MDXEditorLazy markdown={value} onChange={handleChange} editorRef={editorRef} />
-        </Suspense>
-      </div>
-    </div>
-  )
-}
-
-export default MarkdownField

package/src/editor/fields/ObjectField.tsx

@@ -1,71 +0,0 @@
-import React from 'react'
-
-import { Paper, Stack, Text } from '@mantine/core'
-
-import type { FieldConfig } from '../../config'
-import { formatCanopyPath } from '../canopy-path'
-
-export type RenderField = (
-  field: FieldConfig,
-  value: unknown,
-  onChange: (v: unknown) => void,
-  path: Array<string | number>,
-) => React.ReactNode
-
-export interface ObjectFieldProps {
-  label?: string
-  fields: FieldConfig[]
-  value: Record<string, unknown> | undefined
-  onChange: (value: Record<string, unknown>) => void
-  renderField: RenderField
-  path: Array<string | number>
-  dataCanopyField?: string
-}
-
-export const ObjectField: React.FC<ObjectFieldProps> = ({
-  label,
-  fields,
-  value,
-  onChange,
-  renderField,
-  path,
-  dataCanopyField,
-}) => {
-  const current = value ?? {}
-
-  return (
-    <Paper
-      withBorder
-      radius="md"
-      p="md"
-      bg="gray.0"
-      data-canopy-field={dataCanopyField ?? formatCanopyPath(path)}
-      shadow="xs"
-    >
-      <Stack gap="sm">
-        {label && (
-          <Text size="xs" fw={700} c="neutral.8">
-            {label}
-          </Text>
-        )}
-        <Stack gap="sm">
-          {fields.map((field) => {
-            const fieldPath = [...path, field.name]
-            return (
-              <div key={formatCanopyPath(fieldPath)}>
-                {renderField(
-                  field,
-                  current[field.name],
-                  (next) => onChange({ ...current, [field.name]: next }),
-                  fieldPath,
-                )}
-              </div>
-            )
-          })}
-        </Stack>
-      </Stack>
-    </Paper>
-  )
-}
-
-export default ObjectField

package/src/editor/fields/ReferenceField.tsx

@@ -1,138 +0,0 @@
-import React, { useEffect, useId, useState } from 'react'
-
-import { MultiSelect, Select, Stack, Text, Loader } from '@mantine/core'
-
-import { createApiClient } from '../../api/client'
-
-export interface ReferenceOption {
-  value: string
-  label: string
-}
-
-export interface ReferenceFieldProps {
-  id?: string
-  label?: string
-  options?: ReferenceOption[] // Now optional - will be loaded from API if not provided
-  collections?: string[] // Collections to load options from
-  displayField?: string // Field to use for display label
-  branch?: string // Current branch
-  value: string | string[]
-  onChange: (value: string | string[]) => void
-  multiple?: boolean
-  dataCanopyField?: string
-}
-
-export const ReferenceField: React.FC<ReferenceFieldProps> = ({
-  id,
-  label,
-  options: staticOptions,
-  collections,
-  displayField = 'title',
-  branch = 'main',
-  value,
-  onChange,
-  multiple,
-  dataCanopyField,
-}) => {
-  const needsFetch = !staticOptions && !!collections && collections.length > 0
-  const [options, setOptions] = useState<ReferenceOption[]>(staticOptions || [])
-  const [loading, setLoading] = useState(needsFetch)
-
-  // Extract ID from value - handle both string IDs and resolved objects
-  const extractId = (val: unknown): string => {
-    if (typeof val === 'string') return val
-    if (val && typeof val === 'object' && 'id' in val && typeof val.id === 'string') return val.id
-    return ''
-  }
-
-  const normalizedValue = multiple
-    ? Array.isArray(value)
-      ? value.map(extractId)
-      : []
-    : extractId(value)
-  const generatedId = useId()
-  const inputId = id ?? generatedId
-
-  // Track deps to detect changes and reset loading during render
-  const [prevFetchKey, setPrevFetchKey] = useState('')
-  const fetchKey = needsFetch ? `${collections?.join(',')}:${displayField}:${branch}` : ''
-  if (fetchKey !== prevFetchKey) {
-    setPrevFetchKey(fetchKey)
-    if (needsFetch) {
-      setLoading(true)
-    }
-  }
-
-  // Load options from API if collections are provided and no static options
-  useEffect(() => {
-    if (needsFetch) {
-      const apiClient = createApiClient()
-
-      apiClient.content
-        .getReferenceOptions({
-          branch,
-          collections: collections!.join(','),
-          displayField,
-        })
-        .then((response) => {
-          if (response.ok && response.data?.options) {
-            const mappedOptions = response.data.options.map(
-              (opt: { id: string; label: string }) => ({
-                value: opt.id,
-                label: opt.label,
-              }),
-            )
-            setOptions(mappedOptions)
-          }
-        })
-        .catch((err) => {
-          console.error('Failed to load reference options:', err)
-        })
-        .finally(() => {
-          setLoading(false)
-        })
-    }
-  }, [needsFetch, collections, displayField, branch])
-
-  if (loading) {
-    return (
-      <Stack gap={4} data-canopy-field={dataCanopyField}>
-        <Text size="sm" fw={500}>
-          {label}
-        </Text>
-        <Loader size="sm" />
-      </Stack>
-    )
-  }
-
-  return (
-    <Stack gap={4} data-canopy-field={dataCanopyField}>
-      {multiple ? (
-        <MultiSelect
-          id={inputId}
-          label={label}
-          data={options}
-          value={normalizedValue as string[]}
-          onChange={(next) => onChange(next)}
-          searchable
-          placeholder="Select reference…"
-          size="sm"
-        />
-      ) : (
-        <Select
-          id={inputId}
-          label={label}
-          data={options}
-          value={normalizedValue as string}
-          onChange={(next) => onChange(next ?? '')}
-          searchable
-          clearable
-          placeholder="Select reference…"
-          size="sm"
-        />
-      )}
-    </Stack>
-  )
-}
-
-export default ReferenceField

package/src/editor/fields/SelectField.tsx

@@ -1,76 +0,0 @@
-import React, { useId } from 'react'
-
-import { MultiSelect, Select, Stack, Text } from '@mantine/core'
-
-export interface SelectOption {
-  label: string
-  value: string
-}
-
-export interface SelectFieldProps {
-  id?: string
-  label?: string
-  options: SelectOption[]
-  value: string | string[]
-  onChange: (value: string | string[]) => void
-  multiple?: boolean
-  placeholder?: string
-  dataCanopyField?: string
-}
-
-export const SelectField: React.FC<SelectFieldProps> = ({
-  id,
-  label,
-  options,
-  value,
-  onChange,
-  multiple,
-  placeholder = 'Select…',
-  dataCanopyField,
-}) => {
-  const normalizedValue = multiple
-    ? Array.isArray(value)
-      ? value
-      : []
-    : typeof value === 'string'
-      ? value
-      : ''
-  const generatedId = useId()
-  const inputId = id ?? generatedId
-
-  return (
-    <Stack gap={4} data-canopy-field={dataCanopyField}>
-      {multiple ? (
-        <MultiSelect
-          id={inputId}
-          label={label}
-          data={options}
-          value={normalizedValue as string[]}
-          onChange={(next) => onChange(next)}
-          searchable
-          placeholder={placeholder}
-          size="sm"
-        />
-      ) : (
-        <Select
-          id={inputId}
-          label={label}
-          data={options}
-          value={normalizedValue as string}
-          onChange={(next) => onChange(next ?? '')}
-          searchable
-          clearable
-          placeholder={placeholder}
-          size="sm"
-        />
-      )}
-      {multiple && (
-        <Text size="xs" c="dimmed">
-          Searchable multi-select; start typing to filter.
-        </Text>
-      )}
-    </Stack>
-  )
-}
-
-export default SelectField

package/src/editor/fields/TextField.tsx

@@ -1,35 +0,0 @@
-import React, { useId } from 'react'
-
-import { TextInput } from '@mantine/core'
-
-export interface TextFieldProps {
-  id?: string
-  label?: string
-  value: string
-  onChange: (value: string) => void
-  dataCanopyField?: string
-}
-
-export const TextField: React.FC<TextFieldProps> = ({
-  id,
-  label,
-  value,
-  onChange,
-  dataCanopyField,
-}) => {
-  const generatedId = useId()
-  const inputId = id ?? generatedId
-
-  return (
-    <TextInput
-      id={inputId}
-      label={label}
-      value={value}
-      size="sm"
-      onChange={(e) => onChange(e.currentTarget.value)}
-      data-canopy-field={dataCanopyField}
-    />
-  )
-}
-
-export default TextField

package/src/editor/fields/ToggleField.tsx

@@ -1,37 +0,0 @@
-import React, { useId } from 'react'
-
-import { Switch } from '@mantine/core'
-
-export interface ToggleFieldProps {
-  id?: string
-  label?: string
-  value: boolean
-  onChange: (value: boolean) => void
-  dataCanopyField?: string
-  testId?: string
-}
-
-export const ToggleField: React.FC<ToggleFieldProps> = ({
-  id,
-  label,
-  value,
-  onChange,
-  dataCanopyField,
-  testId,
-}) => {
-  const generatedId = useId()
-  const inputId = id ?? generatedId
-  return (
-    <Switch
-      id={inputId}
-      label={label}
-      checked={value}
-      onChange={(e) => onChange(e.currentTarget.checked)}
-      size="md"
-      data-canopy-field={dataCanopyField}
-      wrapperProps={testId ? { 'data-testid': testId } : undefined}
-    />
-  )
-}
-
-export default ToggleField

package/src/editor/fields/fields.stories.tsx

@@ -1,40 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import { useState } from 'react'
-
-import { MarkdownField } from './MarkdownField'
-import { TextField } from './TextField'
-import { ToggleField } from './ToggleField'
-
-const meta: Meta = {
-  title: 'Editor/Fields',
-}
-
-export default meta
-
-export const Text: StoryObj = {
-  render: () => {
-    const [value, setValue] = useState('Hello')
-    return <TextField label="Title" value={value} onChange={setValue} />
-  },
-}
-
-export const Toggle: StoryObj = {
-  render: () => {
-    const [value, setValue] = useState(true)
-    return <ToggleField label="Published" value={value} onChange={setValue} />
-  },
-}
-
-export const Markdown: StoryObj = {
-  render: () => {
-    const [value, setValue] = useState('## Hello\n\nEdit markdown here.')
-    return <MarkdownField label="Body" value={value} onChange={setValue} />
-  },
-}
-
-export const Code: StoryObj = {
-  render: () => {
-    const [value, setValue] = useState('console.log("hello");')
-    return <MarkdownField label="Code" value={value} onChange={setValue} />
-  },
-}