Giter Club home page Giter Club logo

schema-builder-kit's Introduction

Community-maintained. This project is not maintained by the Directus Core Team, but by our wider community. Interested in taking it on? Get in touch!

Directus Schema Builder Kit

This repository is a proof of concept for creating data models for directus programmatically instead of with the admin UI.

Quickstart Guide

  1. Install packages: make install or npm i && cd templates && npm i
  2. Build package: make build or npm run build
  3. Run directus: make docker-compose or docker-compose up -d
  4. Create .env file: cd templates && cp example.env .env
  5. Run template:
    • Blog: make blog-template or cd templates && npm run blog

Example

import { build } from "directus-schema-builder-kit"

const model = build((builder) => {
  const products = builder
    .collection("products")
    .sort("order")
    .archive("status", "archived", "draft")
    .accountability("all")
    .translation("es-ES", "Productos", "producto", "productos");

  products
    .primary_key("id", "uuid")
    .hidden()
    .readonly()
    .translation("es-ES", "ID");

  products
    .date_created("created_at")
    .hidden()
    .readonly()
    .width("half")
    .translation("es-ES", "Fecha de creación");

  products
    .user_created("created_by")
    .hidden()
    .readonly()
    .width("half")
    .translation("es-ES", "Creado por");

  products
    .date_updated("updated_at")
    .hidden()
    .readonly()
    .width("half")
    .translation("es-ES", "Fecha de actualización");

  products
    .user_updated("updated_by")
    .hidden()
    .readonly()
    .width("half")
    .translation("es-ES", "Actualizado por");

  products
    .integer("order")
    .hidden()
    .width("full")
    .translation("es-ES", "Orden");

  products
    .string("status")
    .default("draft")
    .notNullable()
    .width("full")
    .interface("select-dropdown", {
      choices: [
        { text: "$t:published", value: "published" },
        { text: "$t:draft", value: "draft" },
        { text: "$t:archived", value: "archived" }
      ]
    })
    .display("labels", {
      showAsDot: true,
      choices: [
        { background: "#00C897", value: "published" },
        { background: "#D3DAE4", value: "draft" },
        { background: "#F7971C", value: "archived" }
      ]
    })
    .translation("es-ES", "Estado");

  products
    .string("title")
    .notNullable()
    .width("full")
    .interface("input", { trim: true })
    .display("formatted-value", { bold: true })
    .required()
    .translation("es-ES", "Título");

  products
    .string("slug")
    .notNullable()
    .unique()
    .width("full")
    .interface("input", { trim: true, slug: true })
    .display("formatted-value", { prefix: "https://example.com/", color: "#00C897" })
    .required()
    .translation("es-ES", "Página");

  products
    .decimal("price")
    .notNullable()
    .width("full")
    .interface("input", { step: 0.01, min: 0 })
    .display("formatted-value", { format: true, suffix: " €" })
    .required()
    .translation("es-ES", "Precio");
});

const baseURL = "http://localhost:8080";
const email = "[email protected]";
const password = "secret";

model.fetch(baseURL, email, password).then(({ collections, relations }) => {
  console.log(JSON.stringify(collections, null, 2));
  console.log(JSON.stringify(relations, null, 2));
});

schema-builder-kit's People

Contributors

alexbrowng avatar phazonoverload avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.