@revenexx/studio-shared 0.1.2 → 0.3.0

package/components/Shared/GitDeploymentSettings.vue

@@ -1,87 +0,0 @@
-<script setup lang="ts">
-/**
- * Deployment-trigger settings for a git-connected resource (app / site /
- * integration). Two orthogonal controls, mapped to the platform attributes
- * added in V33 (26.1.9):
- *
- *  - vcsTriggerMode ('push' | 'tag'): when a deployment is triggered — on every
- *    branch push, or only when a tag is pushed / a GitHub release is published.
- *  - vcsPreviewsEnabled: whether pull requests get a preview deployment + a
- *    status comment. Hidden via `showPreviews=false` for resources where it
- *    makes no sense.
- *
- * Presentational only — two v-models, parent owns persistence.
- */
-import {
-  Card, CardContent, CardDescription, CardHeader, CardTitle,
-  Label,
-  Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
-  Switch,
-} from '@revenexx/studio'
-
-withDefaults(defineProps<{
-  triggerMode: string
-  previewsEnabled: boolean
-  disabled?: boolean
-  showPreviews?: boolean
-}>(), {
-  disabled: false,
-  showPreviews: true,
-})
-
-defineEmits<{
-  'update:triggerMode': [value: string]
-  'update:previewsEnabled': [value: boolean]
-}>()
-</script>
-
-<template>
-  <Card class="bg-white/60 backdrop-blur-sm">
-    <CardHeader>
-      <CardTitle class="text-sm">Deployment triggers</CardTitle>
-      <CardDescription class="text-sm">
-        Control when a git push deploys this resource.
-      </CardDescription>
-    </CardHeader>
-    <CardContent class="space-y-4">
-      <div class="space-y-1">
-        <Label for="vcs-trigger-mode">When to deploy</Label>
-        <Select
-          :model-value="triggerMode"
-          :disabled="disabled"
-          @update:model-value="(v) => $emit('update:triggerMode', v as string)"
-        >
-          <SelectTrigger id="vcs-trigger-mode">
-            <SelectValue placeholder="On every push" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="push">On every push</SelectItem>
-            <SelectItem value="tag">Only on tag / release</SelectItem>
-          </SelectContent>
-        </Select>
-        <p class="text-sm text-muted-foreground">
-          <template v-if="triggerMode === 'tag'">
-            Builds only when you push a tag or publish a GitHub release.
-          </template>
-          <template v-else>
-            Builds on every push to the production branch.
-          </template>
-        </p>
-      </div>
-
-      <div v-if="showPreviews" class="flex items-center gap-2 pt-1">
-        <Switch
-          :model-value="previewsEnabled"
-          :disabled="disabled"
-          @update:model-value="(v) => $emit('update:previewsEnabled', v as boolean)"
-        />
-        <div class="text-sm">
-          <div class="font-medium">Preview deployments</div>
-          <div class="text-sm text-muted-foreground">
-            Build a preview and comment the status on every pull request.
-          </div>
-        </div>
-      </div>
-    </CardContent>
-  </Card>
-</template>

package/components/Shared/SidebarNav.vue

@@ -1,100 +0,0 @@
-<script lang="ts">
-import type { Component } from 'vue'
-
-export type SidebarNavItem = {
-  label: string
-  to: string
-  icon?: Component
-  badge?: number | string | null
-  /** Dim + show a "soon" tag (not-yet-shipped surfaces). */
-  preview?: boolean
-  /** Match the route exactly (for studio roots like `/settings`). */
-  exact?: boolean
-}
-
-export type SidebarNavSection = {
-  key: string
-  /** Empty/omitted → no group label (pinned items at the top). */
-  label?: string
-  items: SidebarNavItem[]
-}
-</script>
-
-<script setup lang="ts">
-/**
- * Shared studio sidebar.
- *
- * Header (icon + title) + a sectioned, link list driven by data. Every
- * studio sidebar (Settings, Integrations, Commerce, Apps, …) renders
- * through this so spacing, active state, badges and "soon" tags stay
- * identical. Pass `sections`; use `#notice` for loading/empty hints.
- */
-import type { Component } from 'vue'
-
-defineProps<{
-  title: string
-  icon?: Component
-  sections: SidebarNavSection[]
-  /** Hide the header icon and use a lighter header title weight. */
-  minimal?: boolean
-}>()
-
-const route = useRoute()
-function isActive(item: SidebarNavItem): boolean {
-  if (item.exact) return route.path === item.to
-  return route.path === item.to || route.path.startsWith(`${item.to}/`)
-}
-</script>
-
-<template>
-  <aside class="h-full flex flex-col">
-    <div class="flex items-center gap-2 px-4 pt-4 pb-3 shrink-0 border-b border-black/[0.06]">
-      <slot v-if="!minimal" name="icon">
-        <component :is="icon" v-if="icon" :size="18" :stroke-width="2" class="text-foreground/70 shrink-0" />
-      </slot>
-      <h2 class="text-lg text-[#0B0522] truncate" :class="minimal ? 'font-medium' : 'font-semibold'">
-        {{ title }}
-      </h2>
-    </div>
-
-    <div class="flex-1 overflow-y-auto pt-3 pb-3">
-      <slot name="top" />
-
-      <template v-for="section in sections" :key="section.key">
-        <div v-if="section.label" class="mt-3 px-4 pb-1">
-          <div class="text-mono text-muted-foreground">
-            {{ section.label }}
-          </div>
-        </div>
-        <nav class="flex flex-col gap-0.5 px-2">
-          <NuxtLink
-            v-for="item in section.items"
-            :key="item.to"
-            :to="item.to"
-            class="group flex items-center gap-2.5 rounded-md px-2 py-1.5 text-sm transition-colors hover:text-primary"
-            :class="[
-              isActive(item)
-                ? 'bg-primary/10 text-[#0B0522] font-medium'
-                : 'text-foreground/80 hover:bg-primary/5',
-              item.preview ? 'opacity-70' : '',
-            ]"
-          >
-            <component :is="item.icon" v-if="item.icon" :size="14" :stroke-width="2" class="shrink-0 text-foreground/60 group-hover:text-primary" />
-            <span class="flex-1 truncate flex items-center gap-1.5">
-              {{ item.label }}
-              <span
-                v-if="item.preview"
-                class="rounded bg-muted px-1 text-mono text-muted-foreground"
-                title="Coming soon"
-              >
-                soon
-              </span>
-            </span>
-          </NuxtLink>
-        </nav>
-      </template>
-
-      <slot name="notice" />
-    </div>
-  </aside>
-</template>

package/components/Shared/SortHeader.vue

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import { RoundSortVertical, SortFromBottomToTop, SortFromTopToBottom } from '#solar-icons'
-
-// Clickable column header for data tables (datatable-ux). One Solar sort
-// glyph that switches with the sort state — matching cover's tokens:
-//   idle  → round-sort-vertical
-//   asc   → sort-from-bottom-to-top
-//   desc  → sort-from-top-to-bottom
-// Outline weight (Linear), never duotone. Active = primary accent;
-// inactive = dimmed, revealed on hover.
-//
-//   <SortHeader column="name" :active="sort.column"
-//     :direction="sort.direction" @toggle="toggle">Name</SortHeader>
-
-const props = defineProps<{
-  column: string
-  active: string | null
-  direction: 'asc' | 'desc' | null
-  /** Right-align the indicator for numeric columns. */
-  alignRight?: boolean
-}>()
-
-const emit = defineEmits<{ toggle: [column: string] }>()
-
-const isActive = computed(() => props.active === props.column && !!props.direction)
-const sortIcon = computed(() => {
-  if (isActive.value && props.direction === 'asc') return SortFromBottomToTop
-  if (isActive.value && props.direction === 'desc') return SortFromTopToBottom
-  return RoundSortVertical
-})
-</script>
-
-<template>
-  <button
-    type="button"
-    class="group inline-flex cursor-pointer items-center gap-1.5 -m-1 p-1 rounded-md text-left transition-colors hover:text-primary"
-    :class="alignRight ? 'flex-row-reverse w-full justify-end' : ''"
-    @click="emit('toggle', column)"
-  >
-    <slot />
-    <component
-      :is="sortIcon"
-      weight="Linear"
-      :size="14"
-      class="shrink-0 transition-colors"
-      :class="isActive ? 'text-primary' : 'text-foreground/30 group-hover:text-primary'"
-      aria-hidden="true"
-    />
-  </button>
-</template>

package/components/Shared/StudioCard.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-/**
- * The standard cockpit card — the 2-layer "glass" used on the dashboard:
- * an outer transparent ring (hairline border + white outline) wrapping a solid
- * white inner pane clipped to the radius. Use everywhere instead of a single
- * bordered div. Optional `to` makes the whole card a link.
- */
-import { NuxtLink } from '#components'
-
-defineProps<{ to?: string }>()
-</script>
-
-<template>
-  <component
-    :is="to ? NuxtLink : 'div'"
-    :to="to"
-    class="block rounded-lg border border-gray-400/10 outline-1 outline-white/30"
-    :class="to ? 'transition-transform hover:-translate-y-0.5' : ''"
-  >
-    <div class="relative h-full overflow-hidden rounded-lg bg-white">
-      <slot />
-    </div>
-  </component>
-</template>

package/components/Shared/Wizard.vue

@@ -1,80 +0,0 @@
-<script setup lang="ts">
-/**
- * Multi-step wizard shell (PE-114). Renders a Stepper header and a slot
- * for the active step's content, with Back / Next / Finish controls.
- * Steps are declarative; the parent owns each step's fields and can
- * gate advancement with `canAdvance`. A reusable replacement for the
- * inline-cards pattern used by the create flows.
- *
- * Usage:
- *   <Wizard :steps="steps" v-model="step" :can-advance="valid" @finish="submit">
- *     <template #default="{ step }">…fields for `step.key`…</template>
- *   </Wizard>
- */
-import { Button } from '@revenexx/studio'
-
-interface Step { key: string, title: string, description?: string }
-
-const props = withDefaults(defineProps<{
-  steps: Step[]
-  modelValue?: number
-  /** Gate the Next/Finish button for the current step. */
-  canAdvance?: boolean
-  busy?: boolean
-}>(), { modelValue: 0, canAdvance: true, busy: false })
-
-const emit = defineEmits<{ 'update:modelValue': [number], 'finish': [] }>()
-
-const index = computed({
-  get: () => props.modelValue,
-  set: v => emit('update:modelValue', v),
-})
-
-const isFirst = computed(() => index.value === 0)
-const isLast = computed(() => index.value === props.steps.length - 1)
-const activeStep = computed(() => props.steps[index.value]!)
-
-function back() { if (!isFirst.value) index.value-- }
-function next() {
-  if (!props.canAdvance || props.busy) return
-  if (isLast.value) emit('finish')
-  else index.value++
-}
-// Allow jumping back to a completed step via the stepper header.
-function goTo(i: number) { if (i < index.value) index.value = i }
-</script>
-
-<template>
-  <div class="space-y-5">
-    <!-- Go-Live-style stepper: a fill bar + label per step, completed steps
-         are clickable to jump back. -->
-    <div class="flex gap-3">
-      <div
-        v-for="(s, i) in steps"
-        :key="s.key"
-        class="flex-1"
-        :class="i < index ? 'cursor-pointer' : ''"
-        @click="goTo(i)"
-      >
-        <div class="h-1 rounded-full transition-colors" :class="i <= index ? 'bg-primary' : 'bg-border'" />
-        <div class="mt-2 text-xs font-medium" :class="i <= index ? 'text-primary' : 'text-muted-foreground'">Step {{ i + 1 }}</div>
-        <div class="text-sm" :class="i <= index ? 'text-[#0B0522]' : 'text-muted-foreground'">{{ s.title }}</div>
-      </div>
-    </div>
-
-    <div>
-      <slot :step="activeStep" :index="index" />
-    </div>
-
-    <div class="flex items-center justify-between border-t pt-3">
-      <!-- Custom footer (e.g. multiple finish actions on a review step). Falls
-           back to the standard Back / Next·Finish pair. -->
-      <slot name="footer" :back="back" :next="next" :is-first="isFirst" :is-last="isLast" :can-advance="canAdvance" :busy="busy" :index="index">
-        <Button variant="ghost" :disabled="isFirst || busy" @click="back">Back</Button>
-        <Button :disabled="!canAdvance || busy" class="gap-1" @click="next">
-          {{ isLast ? 'Finish' : 'Next' }}
-        </Button>
-      </slot>
-    </div>
-  </div>
-</template>

package/composables/usePlatformAuth.ts

@@ -1,35 +0,0 @@
-/**
- * Platform auth provider — the seam that lets a studio surface run either
- * inside the full cockpit or standalone.
- *
- * This is the **standalone default**: it sources a bearer token from runtime
- * config (`NUXT_PUBLIC_DEV_TOKEN`) or `localStorage['console.token']`. The
- * full cockpit ships an override at `app/composables/usePlatformAuth.ts`
- * (app-level auto-imports take precedence over this layer) that returns the
- * real Appwrite/Console-sourced operator token.
- *
- * Studio modules (e.g. `@revenexx/studio-integrations`) call this instead of
- * `useConsoleAuth` directly, so they carry no cockpit-only dependency.
- */
-export interface PlatformAuth {
-  getToken: () => Promise<string | null>
-}
-
-export function usePlatformAuth(): PlatformAuth {
-  const config = useRuntimeConfig()
-  return {
-    async getToken() {
-      const fromConfig = (config.public.devToken as string | undefined) || null
-      if (fromConfig) return fromConfig
-      if (import.meta.client) {
-        try {
-          return localStorage.getItem('console.token')
-        }
-        catch {
-          return null
-        }
-      }
-      return null
-    },
-  }
-}

package/composables/usePlatformTenant.ts

@@ -1,35 +0,0 @@
-import { computed, ref } from 'vue'
-import type { Ref } from 'vue'
-
-/**
- * Platform tenant provider — companion to `usePlatformAuth`.
- *
- * Standalone default: the active tenant slug comes from runtime config
- * (`NUXT_PUBLIC_DEV_TENANT`) or `localStorage['cockpit.devTenant']`. The full
- * cockpit overrides this at `app/composables/usePlatformTenant.ts` to return
- * the real active-tenant slug from `useConsoleTenants`.
- */
-export interface PlatformTenant {
-  slug: Ref<string | null>
-  load: () => Promise<void>
-}
-
-export function usePlatformTenant(): PlatformTenant {
-  const config = useRuntimeConfig()
-  const stored = ref<string | null>(null)
-  if (import.meta.client) {
-    try {
-      stored.value = localStorage.getItem('cockpit.devTenant')
-    }
-    catch {
-      stored.value = null
-    }
-  }
-  const slug = computed<string | null>(() => (config.public.devTenant as string | undefined) || stored.value)
-  return {
-    slug: slug as unknown as Ref<string | null>,
-    async load() {
-      // no-op in standalone; the slug is static from config/localStorage.
-    },
-  }
-}

package/index.ts

@@ -1,16 +0,0 @@
-/**
- * Type-level barrel for `@revenexx/studio-shared`.
- *
- * The shell primitive *components* auto-import by bare name via the Nuxt
- * layer (see `nuxt.config.ts`). This barrel exposes the *types* consumers
- * need to import explicitly — DataTable column/filter/sort types and the
- * SidebarNav section/item shapes.
- */
-export type * from './components/DataTable/types'
-export type { SidebarNavItem, SidebarNavSection } from './components/Shared/SidebarNav.vue'
-export type { PlatformAuth } from './composables/usePlatformAuth'
-export type { PlatformTenant } from './composables/usePlatformTenant'
-// NOTE: components are NOT value-exported here — this barrel is loaded in node
-// contexts (types/config) where a `.vue` import fails. The studio modules that
-// need a component explicitly import it via the `./components/*` subpath export
-// (Vite-only), e.g. `@revenexx/studio-shared/components/Shared/SidebarNav.vue`.

package/nuxt.config.ts

@@ -1,23 +0,0 @@
-import { fileURLToPath } from 'node:url'
-import { dirname, join } from 'node:path'
-
-const currentDir = dirname(fileURLToPath(import.meta.url))
-
-/**
- * Shared cockpit shell primitives, provided as a Nuxt layer.
- *
- * Components are auto-imported by their **bare** name (`pathPrefix: false`),
- * so `<PageHeader>`, `<DataTable>`, `<SidebarNav>`, `<StateCard>`, `<TabBar>`,
- * … resolve without an explicit import — matching how the cockpit already
- * uses them. Type-level exports (DataTable column/filter types,
- * SidebarNavSection) come from the package barrel `@revenexx/studio-shared`.
- */
-export default defineNuxtConfig({
-  $meta: {
-    name: 'studio-shared',
-    description: 'Shared cockpit shell primitives + design-system wiring.',
-  },
-  components: [
-    { path: join(currentDir, 'components'), pathPrefix: false },
-  ],
-})