@spacemade/ui 0.0.1

package/src/components/provider/BuildspecForm.tsx

@@ -0,0 +1,288 @@
+/* eslint-disable @next/next/no-img-element */
+'use client'
+
+import { useEffect, useState, useRef } from 'react'
+
+export type UiField = {
+  id: string
+  type: string
+  label: string
+  description?: string
+  required?: boolean
+  placeholder?: string
+  hideLabel?: boolean
+  options?: { expanded?: boolean; multiple?: boolean; choices?: Record<string, string> }
+  autofocus?: boolean
+  href?: string
+}
+
+export function BuildspecForm({
+  ui,
+  defaults,
+  value,
+  onChange,
+}: {
+  ui: UiField[]
+  defaults?: Record<string, any>
+  value?: Record<string, any>
+  onChange: (val: Record<string, any>) => void
+}) {
+  const [state, setState] = useState<Record<string, any>>({})
+  const [errors, setErrors] = useState<Record<string, string>>({})
+  const isSyncingRef = useRef(false)
+
+  useEffect(() => {
+    const merged =
+      value && Object.keys(value).length > 0
+        ? value
+        : defaults && Object.keys(defaults).length > 0
+        ? defaults
+        : {}
+
+    // Initialize all UI fields with empty strings if not present
+    const initialized = { ...merged }
+    ui.forEach((field) => {
+      if (field.type === 'markdown' || field.type === 'link') {
+        return
+      }
+      if (!(field.id in initialized)) {
+        initialized[field.id] = ''
+      }
+    })
+
+    isSyncingRef.current = true
+    setState(initialized)
+  }, [value, defaults, ui])
+
+  useEffect(() => {
+    if (isSyncingRef.current) {
+      isSyncingRef.current = false
+      return
+    }
+    onChange(state)
+  }, [state])
+
+  const validateField = (f: UiField, val: any) => {
+    if (f.required && (val === '' || val === undefined || val === null)) {
+      setErrors((prev) => ({ ...prev, [f.id]: `${f.label || f.id} is required` }))
+    } else {
+      setErrors((prev) => {
+        const copy = { ...prev }
+        delete copy[f.id]
+        return copy
+      })
+    }
+  }
+
+  const set = (id: string, v: any, field?: UiField) => {
+    const next = { ...state, [id]: v }
+    if (field) validateField(field, v)
+    setState(next)
+  }
+
+  const renderField = (f: UiField) => {
+    const v = state[f.id] ?? ''
+    const error = errors[f.id]
+    const label = f.hideLabel ? null : (
+      <label className="form-label fw-semibold" htmlFor={f.id}>
+        {f.label}
+        {f.required && <span className="text-danger ms-1">*</span>}
+      </label>
+    )
+
+    switch (f.type) {
+      case 'markdown':
+        return (
+          <div key={f.id} className="mb-3">
+            {!f.hideLabel && (
+              <div className="fw-semibold mb-1">{f.label}</div>
+            )}
+            {f.description && (
+              <div className="text-muted small" style={{ whiteSpace: 'pre-line' }}>
+                {f.description}
+              </div>
+            )}
+          </div>
+        )
+
+      case 'link':
+        return (
+          <div key={f.id} className="mb-3">
+            {f.description && <div className="form-text mb-2">{f.description}</div>}
+            {f.href ? (
+              <a
+                className="btn btn-primary"
+                href={f.href}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                {f.label}
+              </a>
+            ) : null}
+          </div>
+        )
+      case 'hidden':
+        return (
+          <input
+            key={f.id}
+            type="hidden"
+            id={f.id}
+            value={v}
+            onChange={(e) => set(f.id, e.target.value, f)}
+          />
+        )
+
+      case 'clob':
+        return (
+          <div key={f.id} className="mb-3">
+            {label}
+            <textarea
+              id={f.id}
+              className={`form-control ${error ? 'is-invalid' : ''}`}
+              placeholder={f.placeholder}
+              value={v}
+              onChange={(e) => set(f.id, e.target.value, f)}
+              rows={5}
+            />
+            {f.description && <div className="form-text">{f.description}</div>}
+            {error && <div className="invalid-feedback">{error}</div>}
+          </div>
+        )
+
+      case 'boolean':
+        return (
+          <div key={f.id} className="form-check mb-3">
+            <input
+              id={f.id}
+              className="form-check-input"
+              type="checkbox"
+              checked={!!v}
+              onChange={(e) => set(f.id, e.target.checked, f)}
+            />
+            <label className="form-check-label" htmlFor={f.id}>
+              {f.label}
+            </label>
+            {f.description && <div className="form-text">{f.description}</div>}
+          </div>
+        )
+
+      case 'enum':
+        if (f.options?.expanded) {
+          const choices = Object.entries(f.options.choices || {})
+          if (f.options.multiple) {
+            const current: string[] = Array.isArray(v) ? v : []
+            const toggle = (val: string) => {
+              const has = current.includes(val)
+              const next = has ? current.filter((x) => x !== val) : [...current, val]
+              set(f.id, next, f)
+            }
+            return (
+              <div key={f.id} className="mb-3">
+                {!f.hideLabel && label}
+                <div className="d-flex flex-column gap-1">
+                  {choices.map(([k, val]) => (
+                    <div className="form-check" key={val}>
+                      <input
+                        className="form-check-input"
+                        type="checkbox"
+                        id={`${f.id}-${val}`}
+                        checked={current.includes(val)}
+                        onChange={() => toggle(val)}
+                      />
+                      <label className="form-check-label" htmlFor={`${f.id}-${val}`}>
+                        {k}
+                      </label>
+                    </div>
+                  ))}
+                </div>
+                {f.description && <div className="form-text">{f.description}</div>}
+                {error && <div className="invalid-feedback d-block">{error}</div>}
+              </div>
+            )
+          }
+
+          return (
+            <div key={f.id} className="mb-3">
+              {!f.hideLabel && label}
+              <div className="d-flex flex-column gap-1">
+                {choices.map(([k, val]) => (
+                  <div className="form-check" key={val}>
+                    <input
+                      className="form-check-input"
+                      type="radio"
+                      name={f.id}
+                      id={`${f.id}-${val}`}
+                      checked={v === val}
+                      onChange={() => set(f.id, val, f)}
+                    />
+                    <label className="form-check-label" htmlFor={`${f.id}-${val}`}>
+                      {k}
+                    </label>
+                  </div>
+                ))}
+              </div>
+              {f.description && <div className="form-text">{f.description}</div>}
+              {error && <div className="invalid-feedback d-block">{error}</div>}
+            </div>
+          )
+        }
+
+        return (
+          <div key={f.id} className="mb-3">
+            {label}
+            <select
+              id={f.id}
+              className={`form-select ${error ? 'is-invalid' : ''}`}
+              value={v}
+              onChange={(e) => set(f.id, e.target.value, f)}
+              multiple={!!f.options?.multiple}
+            >
+              {f.placeholder && <option value="">{f.placeholder}</option>}
+              {Object.entries(f.options?.choices || {}).map(([k, val]) => (
+                <option key={val} value={val}>
+                  {k}
+                </option>
+              ))}
+            </select>
+            {f.description && <div className="form-text">{f.description}</div>}
+            {error && <div className="invalid-feedback">{error}</div>}
+          </div>
+        )
+
+      default:
+        const typeMap: Record<string, string> = {
+          string: 'text',
+          email: 'email',
+          password: 'password',
+          url: 'url',
+          tel: 'tel',
+          datetime: 'datetime-local',
+          date: 'date',
+          time: 'time',
+          integer: 'number',
+          number: 'number',
+          money: 'number',
+          percent: 'number',
+          color: 'color',
+        }
+        const htmlType = typeMap[f.type] || 'text'
+        return (
+          <div key={f.id} className="mb-3">
+            {label}
+            <input
+              id={f.id}
+              className={`form-control ${error ? 'is-invalid' : ''}`}
+              type={htmlType}
+              placeholder={f.placeholder}
+              value={v}
+              onChange={(e) => set(f.id, e.target.value, f)}
+            />
+            {f.description && <div className="form-text">{f.description}</div>}
+            {error && <div className="invalid-feedback">{error}</div>}
+          </div>
+        )
+    }
+  }
+
+  return <div>{ui.map(renderField)}</div>
+}

package/src/components/provider/CreateProviderModal.tsx

@@ -0,0 +1,210 @@
+// components/provider/modal/CreateProviderModal.tsx
+import { useRouter } from '@lib/next-router'
+import {
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+} from '@chakra-ui/react'
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form'
+import { toast } from 'react-toastify'
+import Button from '@components/common/button/Button'
+import Input from '@components/common/forms/Input'
+import { HTTPErrorStatus } from '@enum/HTTPErrorStatus'
+import { DEFAULT_ERROR_MESSAGE } from '@helpers/constants'
+import { transformToURLFormat } from '@helpers/string'
+import Select from '@components/common/forms/Select'
+import { useCreateProviderMutation } from '@store/slice/api/providerApiSlice'
+
+interface FormValues extends FieldValues {
+  label: string
+  key: string
+  status: 'active' | 'disabled' | 'deprecated'
+  rank: number
+  isFeatured: boolean
+  isHidden: boolean
+}
+
+export const CreateProviderModal = ({
+  isOpen,
+  onClose,
+}: {
+  isOpen: boolean
+  onClose: () => void
+}) => {
+  const router = useRouter()
+  const [createProvider] = useCreateProviderMutation()
+
+  const {
+    register,
+    handleSubmit,
+    setError,
+    getValues,
+    control,
+    clearErrors,
+    formState: { errors, isSubmitting, isSubmitSuccessful },
+  } = useForm<FormValues>({
+    defaultValues: {
+      status: 'active',
+      rank: 999,
+      isFeatured: false,
+      isHidden: false,
+    },
+  })
+
+  const onSubmit: SubmitHandler<FormValues> = async (data) => {
+    try {
+      // Generate key from label if not provided
+      const key = data.key || transformToURLFormat(data.label)
+
+      const result = await createProvider({
+        label: data.label,
+        key,
+        status: data.status,
+        rank: Number(data.rank),
+        isFeatured: Boolean(data.isFeatured),
+        isHidden: Boolean(data.isHidden),
+      }).unwrap()
+
+      toast.success('Your provider has been created successfully')
+      onClose()
+      router.push(`/admin/providers/${result.provider.id}`)
+    } catch (error: any) {
+      toast.error(
+        error.status === HTTPErrorStatus.UNPROCESSABLE_ENTITY
+          ? error.data.message
+          : DEFAULT_ERROR_MESSAGE
+      )
+      setError('server-error', { type: 'custom', message: 'server-error' })
+    }
+  }
+
+  return (
+    <Drawer isOpen={isOpen} onClose={onClose} size='xl'>
+      <DrawerOverlay />
+      <DrawerContent className='drawer'>
+        <DrawerCloseButton />
+        <DrawerHeader>Create Provider</DrawerHeader>
+        <DrawerBody>
+          <form id='provider-create-form' onSubmit={handleSubmit(onSubmit)}>
+            <div className='mt-4'>
+              <Input
+                register={register('label', {
+                  required: 'This field is required',
+                  minLength: {
+                    value: 2,
+                    message: 'Label must be at least 2 characters',
+                  },
+                })}
+                errors={errors}
+                placeholder='Enter Provider Label (e.g., OpenAI)'
+                label='Label'
+                getValues={getValues}
+              />
+            </div>
+            <div className='mt-4'>
+              <Input
+                register={register('key', {
+                  required: 'This field is required',
+                  minLength: {
+                    value: 2,
+                    message: 'Key must be at least 2 characters',
+                  },
+                  pattern: {
+                    value: /^[a-z0-9-]+$/,
+                    message: 'Key must contain only lowercase letters, numbers, and hyphens',
+                  },
+                })}
+                errors={errors}
+                placeholder='Enter Provider Key (e.g., openai)'
+                label='Key'
+                getValues={getValues}
+              />
+              <p className='text-muted small mt-1'>
+                Unique identifier for this provider. Use lowercase with hyphens.
+              </p>
+            </div>
+            <div className='mt-4'>
+              <Input
+                register={register('rank', {
+                  required: 'This field is required',
+                  valueAsNumber: true,
+                  min: { value: 1, message: 'Rank must be at least 1' },
+                })}
+                errors={errors}
+                placeholder='999'
+                label='Rank'
+                getValues={getValues}
+                type='number'
+              />
+            </div>
+            <div className='mt-3'>
+              <div className='form-check'>
+                <input
+                  type='checkbox'
+                  id='isFeatured'
+                  className='form-check-input'
+                  {...register('isFeatured')}
+                />
+                <label htmlFor='isFeatured' className='form-check-label'>
+                  Featured
+                </label>
+              </div>
+            </div>
+            <div className='mt-2'>
+              <div className='form-check'>
+                <input
+                  type='checkbox'
+                  id='isHidden'
+                  className='form-check-input'
+                  {...register('isHidden')}
+                />
+                <label htmlFor='isHidden' className='form-check-label'>
+                  Hidden
+                </label>
+              </div>
+            </div>
+            <div className='mt-4'>
+              <Select
+                register={register('status', {
+                  required: 'This field is required',
+                })}
+                label='Status'
+                options={[
+                  { value: 'active', label: 'Active' },
+                  { value: 'disabled', label: 'Disabled' },
+                  { value: 'deprecated', label: 'Deprecated' },
+                ]}
+                control={control}
+                getValues={getValues}
+                setFirstAsDefault={true}
+                errors={errors}
+              />
+            </div>
+          </form>
+        </DrawerBody>
+
+        <DrawerFooter>
+          <Button ariaLabel='Cancel' onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            type='submit'
+            className='text-white'
+            ariaLabel='Save new provider'
+            color='primary'
+            form='provider-create-form'
+            isLoading={isSubmitting}
+            disabled={isSubmitting || isSubmitSuccessful}
+            onClick={() => clearErrors(['server-error'])}
+          >
+            Save
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}

package/src/components/provider/FeaturedProviders.tsx

@@ -0,0 +1,137 @@
+/* eslint-disable @next/next/no-img-element */
+import React from 'react'
+import Link from 'next/link'
+
+import { useListProvidersQuery } from '@store/slice/api/providerApiSlice'
+import { createAgentSlug as createSlug } from '@helpers/slugUtils'
+import { SiteLogoIcon } from '@helpers/images'
+
+export type ProviderCapabilityFilters = {
+  hasStorage?: boolean
+  hasAgent?: boolean
+  hasProject?: boolean
+  hasChat?: boolean
+  hasSearch?: boolean
+  hasImage?: boolean
+  hasVideo?: boolean
+  hasModel?: boolean
+  hasSpeech?: boolean
+}
+
+type Props = {
+  limit?: number
+  query?: ProviderCapabilityFilters & Record<string, any>
+
+  title?: string
+  viewAllHref?: string
+  className?: string
+  hideWhenEmpty?: boolean
+}
+
+export function FeaturedProviders({
+  limit = 6,
+  query = {},
+  title = 'Featured Providers',
+  viewAllHref = '/providers',
+  className,
+  hideWhenEmpty = true,
+}: Props) {
+  const { data: providerData } = useListProvidersQuery({
+    limit,
+    ...query,
+  })
+
+  const providers = providerData?.results ?? []
+  if (hideWhenEmpty && providers.length === 0) return null
+
+  const getProviderImage = (p: any) => {
+    const iconMediaUrl = p?.iconMedia?.media?.sourceUrl
+    const logoUrl = p?.logoUrl
+    const isLocalOpenSearch = p?.key === 'osirus-local'
+    const isOsirusIcon =
+      (typeof iconMediaUrl === 'string' && iconMediaUrl.includes('osirus-icon')) ||
+      (typeof logoUrl === 'string' && logoUrl.includes('osirus-icon'))
+
+    if (isLocalOpenSearch) {
+      return (isOsirusIcon ? null : iconMediaUrl) || (isOsirusIcon ? null : logoUrl) || SiteLogoIcon
+    }
+
+    return iconMediaUrl || logoUrl || SiteLogoIcon
+  }
+
+  const getProviderAlt = (p: any) =>
+    p?.iconMedia?.media?.details?.altText || `${p?.label || 'Provider'} icon`
+
+  return (
+    <div className={`mt-1 p-3 ${className || ''}`}>
+      <div className="d-flex align-items-center justify-content-between mb-2">
+        <div className="text-muted small fw-semibold">
+          <Link href={viewAllHref} className="text-muted text-decoration-none">
+            {title}
+          </Link>
+        </div>
+        <Link href={viewAllHref} className="text-muted small text-decoration-none">
+          View all
+        </Link>
+      </div>
+
+      <div className="d-flex flex-wrap gap-2">
+        {providers.map((p: any) => {
+          const name = p?.label || 'Provider'
+          const slug = createSlug(name)
+          const img = getProviderImage(p)
+          const alt = getProviderAlt(p)
+
+          return (
+            <Link
+              key={p.id || name}
+              href={`/providers/${slug}`}
+              className="provider-chip d-inline-flex align-items-center gap-2 text-decoration-none"
+              prefetch={false}
+              aria-label={`Open provider ${name}`}
+            >
+              <span className="provider-chip__icon">
+                <img src={img} alt={alt} />
+              </span>
+              <span className="text-dark small fw-semibold">{name}</span>
+            </Link>
+          )
+        })}
+      </div>
+
+      <style jsx>{`
+        :global(a.provider-chip) {
+          border: 1px solid #dee2e6;
+          border-radius: 999px;
+          padding: 6px 12px;
+          background-color: #fff;
+          transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out,
+            border-color 0.2s ease-in-out;
+        }
+        :global(a.provider-chip:hover),
+        :global(a.provider-chip:focus-visible) {
+          transform: translateY(-1px);
+          box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+          border-color: rgba(0, 0, 0, 0.2);
+          text-decoration: none;
+        }
+        :global(.provider-chip__icon) {
+          width: 28px;
+          height: 28px;
+          border-radius: 999px;
+          background: #f8f9fa;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          overflow: hidden;
+          flex-shrink: 0;
+        }
+        :global(.provider-chip__icon img) {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+      `}</style>
+    </div>
+  )
+}