1.0.0-beta.3 • Published 2 months ago

@autoinvent/conveyor v1.0.0-beta.3

Weekly downloads
16
License
BlueOak-1.0.0
Repository
-
Last release
2 months ago

Conveyor

Conveyor is a comprehensive UI library for introspecting and interacting with GraphQL APIs generated by the Magql library. It provides an intuitive and user-friendly interface for performing CRUD (Create, Read, Update, Delete) operations on your GraphQL data.

Features

  • Automatic UI Generation: Conveyor automatically introspects your GraphQL schema and generates a UI that corresponds to your data structure. This includes forms for data entry, tables for data viewing, and even more complex UI structures for nested or related data.

Prerequisites

Before using Conveyor, you need to have a GraphQL API generated by the Magql library. Magql provides a robust, flexible, and easy-to-use way to create a GraphQL API from your existing data.

Usage

First, install the library:

pnpm install @autoinvent/conveyor

Then you can use it in your project:

  • Check out outline for component description and usages.
  • Check out request examples for examples on how to use different request APIs.

Usage from CDN

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/png" href="https://raw.githubusercontent.com/autoinvent/conveyor/main/src/logo.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Conveyor</title>
  <style>
    body {
      height: 100%;
      margin: 0;
      width: 100%;
      overflow: hidden;
    }
  </style>

  <!--
      This example depends on Promise and fetch, which are available in modern browsers, but can be "polyfilled" for older browsers.
      Conveyor itself depends on React DOM.
      If you do not want to rely on a CDN, you can host these files locally or nclude them directly in your favored resource bundler.
    -->
  <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <link crossorigin href="https://unpkg.com/@autoinvent/conveyor@1.0.0-beta.3/dist/styles/index.css" rel="stylesheet" />
  <script crossorigin src="https://unpkg.com/@autoinvent/conveyor@1.0.0-beta.3/dist/conveyor.umd.js"></script>
</head>

<body>
  <div id="conveyorAdmin">Loading...</div>
  <script defer>
    const ConveyorAdmin = window.conveyor.ConveyorAdmin;

    const gqlUrl = "/graphql";
    const responseHandler = async (response) => {
      const parsedResponse = await response.json();
      if (parsedResponse?.data) {
        return parsedResponse.data;
      } else if (parsedResponse?.errors) {
        throw parsedResponse.errors;
      } else {
        throw parsedResponse;
      }
    };
    const useGQLQueryResponse = (graphQLParams) => {
      return fetch(gqlUrl, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          query: graphQLParams.document,
          variables: graphQLParams.variables,
        }),
      }).then(responseHandler);
    };
    const useGQLMutationRequest = (graphQLParams) => {
      return (options) =>
        fetch(gqlUrl, {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            query: graphQLParams.document,
            variables: options?.variables,
          }),
        }).then(responseHandler);
    };

    ReactDOM.render(
      React.createElement(ConveyorAdmin, {
        useGQLQueryResponse: useGQLQueryResponse,
        useGQLMutationRequest: useGQLMutationRequest,
      }),
      document.getElementById("conveyorAdmin")
    );
  </script>
</body>

</html>

Scripts

  • pnpm dev - start a development server for testing the conveyor library with hot reload.
  • pnpm build - build library for production. The generated files will be on the dist folder. pnpm pack will package these files into a tarball for install.
  • pnpm preview - locally preview the production build.
  • pnpm test - run tests in watch mode.
  • pnpm test:ci - run tests once without watch mode.
  • pnpm test:ui - run tests with ui.
  • pnpm format - format all files with Rome.
  • pnpm lint - runs TypeScript, Rome and Stylelint.
  • pnpm validate - runs lint, test:ci.

Resources

1.0.0-beta.3

2 months ago

1.0.0-beta.2

7 months ago

1.0.0-beta.1

7 months ago

1.0.0-beta.0

1 year ago

0.13.9

2 years ago

0.14.0

2 years ago

0.13.6

2 years ago

0.13.7

2 years ago

0.13.8

2 years ago

0.13.4

2 years ago

0.13.5

2 years ago

0.11.0

2 years ago

0.10.1

2 years ago

0.12.0

2 years ago

0.11.1

2 years ago

0.10.2

2 years ago

0.13.0

2 years ago

0.13.1

2 years ago

0.13.2

2 years ago

0.13.3

2 years ago

0.10.0

3 years ago

0.9.0

3 years ago

0.8.0

3 years ago

0.7.0

3 years ago

0.6.0

3 years ago

0.5.0

3 years ago

0.4.0

4 years ago

0.3.0

4 years ago

0.2.0

4 years ago

0.1.0

4 years ago