svelte-jsonschema-form with Skeleton

Installation

Choose your favorite theme:

Basic DaisyUI Flowbite Skeleton Shadcn

npm

npm i @sjsf/form @sjsf/ajv8-validator ajv@8 @sjsf/skeleton-theme

yarn

yarn add @sjsf/form @sjsf/ajv8-validator ajv@8 @sjsf/skeleton-theme

pnpm

pnpm add @sjsf/form @sjsf/ajv8-validator ajv@8 @sjsf/skeleton-theme

bun

bun add @sjsf/form @sjsf/ajv8-validator ajv@8 @sjsf/skeleton-theme

Skeleton theme setup

Usage

Form.svelte

<script lang="ts">
  import { SimpleForm, useForm2 } from "@sjsf/form";
  import { translation } from "@sjsf/form/translations/en";
  import { theme } from "@sjsf/skeleton-theme";

  import { useAstro } from "@/astro.svelte";

  import { schema, uiSchema, initialValue } from "./_schema";
  import { validator } from "./_validator";
  import { onSubmit } from "./_on-submit";

  const astro = useAstro();

  const form = useForm2({
    ...theme,
    initialValue,
    schema,
    uiSchema,
    validator,
    translation,
    onSubmit,
  });
</script>

<SimpleForm
  {form}
  class="flex flex-col gap-4 {astro.darkOrLight}"
  style="margin-bottom: 1rem;"
  data-theme="cerberus"
/>

<pre>{JSON.stringify(form.value, null, 2)}</pre>

_schema.ts

import type { Schema, UiSchemaRoot } from "@sjsf/form";

export const schema: Schema = {
  title: "A registration form",
  description: "A simple form example.",
  type: "object",
  required: ["firstName", "lastName"],
  properties: {
    firstName: {
      type: "string",
      title: "First name",
      default: "Chuck",
    },
    lastName: {
      type: "string",
      title: "Last name",
    },
    age: {
      type: "integer",
      title: "Age",
    },
    bio: {
      type: "string",
      title: "Bio",
    },
    password: {
      type: "string",
      title: "Password",
      minLength: 3,
    },
    telephone: {
      type: "string",
      title: "Telephone",
      minLength: 10,
    },
    star: {
      type: "boolean",
      title: "Star",
    },
  },
};

export const uiSchema: UiSchemaRoot = {
  firstName: {
    "ui:options": {
      input: {
        autocomplete: "family-name",
      },
    },
  },
  lastName: {
    "ui:options": {
      input: {
        autocomplete: "given-name",
      },
    },
  },
  age: {
    "ui:options": {
      title: "Age of person",
      description: "(earthian year)",
    },
  },
  bio: {
    "ui:widget": "textarea",
  },
  password: {
    "ui:options": {
      help: "Hint: Make it strong!",
      input: {
        type: "password",
      },
    },
  },
  telephone: {
    "ui:options": {
      input: {
        type: "tel",
      },
    },
  },
  star: {
    "ui:options": {
      title: "Does this library deserve a star?",
    },
  },
};

export const initialValue = {
  lastName: "Norris",
  age: 75,
  bio: "Roundhouse kicking asses since 1940",
  password: "noneed",
  telephone: "1-800-KICKASS",
};

_validator.ts

import Ajv, { type ErrorObject } from "ajv";
import {
  Validator,
  addFormComponents,
  DEFAULT_AJV_CONFIG,
} from "@sjsf/ajv8-validator";
import { isSchemaObjectValue } from "@sjsf/form/core";
import {
  DEFAULT_ID_PREFIX,
  DEFAULT_ID_SEPARATOR,
  pathToId,
  type Schema,
  type SchemaValue,
  type ValidationError,
} from "@sjsf/form";

class StarValidator extends Validator {
  validateFormData(
    schema: Schema,
    formData: SchemaValue | undefined
  ): ValidationError<ErrorObject>[] {
    const errors = super.validateFormData(schema, formData);
    return isSchemaObjectValue(formData) && !formData["star"]
      ? errors.concat({
          instanceId: pathToId(DEFAULT_ID_PREFIX, DEFAULT_ID_SEPARATOR, [
            "star",
          ]),
          propertyTitle: "Star",
          message: "I will try my best!",
          error: {} as ErrorObject,
        })
      : errors;
  }
}

export const validator = new StarValidator({
  ajv: addFormComponents(new Ajv(DEFAULT_AJV_CONFIG))
});

License

This project includes modifications of code from react-jsonschema-form, which is licensed under the Apache License, Version 2.0. The rest of the project is under the MIT license.