import type { Meta, StoryObj } from 'storybook-solidjs-vite';
import { createSignal } from 'solid-js';
import { Artifact, type ArtifactFile, type ArtifactTab } from './artifact';
import { componentDescription } from '../stories/docs/element-controls';
// Storybook serves examples/artifact-fixtures at /artifact-fixtures.
const BASE = new URL('artifact-fixtures', document.baseURI).href;
const FILES: ArtifactFile[] = [
{
path: 'index.html',
url: `${BASE}/index.html`,
type: 'html',
language: 'html',
code: `\n\n \n Starboard
About\n`,
},
{
path: 'about.html',
url: `${BASE}/about.html`,
type: 'html',
language: 'html',
code: `\n\n About
Home\n`,
},
{
path: 'css/site.css',
url: `${BASE}/css/site.css`,
type: 'other',
language: 'css',
code: `:root { --accent: #6ea8fe; }\nbody { font-family: system-ui, sans-serif; }`,
},
{ path: 'assets/logo.svg', url: `${BASE}/assets/logo.svg`, type: 'image' },
{ path: 'assets/report.pdf', url: `${BASE}/assets/report.pdf`, type: 'pdf' },
];
const meta = {
title: 'Solid (Advanced)/Elements/Artifact',
component: Artifact,
tags: ['autodocs'],
parameters: {
layout: 'padded',
docs: {
description: componentDescription([
'A framed, switchable **generated-artifact viewer** — the "canvas / artifacts" pattern. A sandboxed `