@sparklink-pro/apant

v2.0.1

Published

2 months ago

Apollo & Antd tools

0High
0Medium
0Low

sparklink

dams_iuwt

react graphql gql apollo antd ant design form

apant

Apollo & Antd tools

Usage

import { TypesContext, TypesRegistry, useTypeList } from "apant";

import client from "./apollo";
import operations from "./gql";
import types from "./types";

const typesRegistry = new TypesRegistry({ types, operations, apollo: client });

const Root = () => (
  <TypesContext.Provider value={typesRegistry}>
    <YourApp />
  </TypesContext.Provider>
);

TypesRegistryConfiguration

| Property | Description | Type | Default | | :-----------: | :-----------------------------: | :----------------------------------------------------------------: | :-----: | | apollo | Apollo client instance | ApolloClient<NormalizedCacheObject> | - | | configuration | GraphQL Operation configuration | Partial<TypeOperationConfiguration> | - | | operations | GraphQL Operation file | { [name: string]: any }; | - | | types | List of types configuration | { [type: string]: TypeConfiguration } | - |

example type

//types/index.ts
import { Foo } from "./Foo";

export default {
  foo
};

// example/src/types/Book.ts
import { TypeConfiguration } from 'apant';

const Book: TypeConfiguration = {
    label: 'title',
    search: 'title',
    admin: {
        route: 'admin/Book',
        searchable: true,
        selectable: true,
        filter(pattern: any) {
            return pattern.rank >= 9;
        },
        columns: () => [
            {
                title: 'Title',
                dataIndex: 'title',
                link: true,
            },
            {
                title: 'Description',
                dataIndex: 'description',
            },
            {
                title: 'Price',
                dataIndex: 'price',
                sorter: {
                    compare: (a: any, b: any) => a.price - b.price,
                },
            },
        ],
    },
    forms: {
        default: {
            props: {
                layout: 'vertical',
            },
            fields: [
                { name: 'title', label: 'Title' },
                { name: 'description', label: 'Description' },
                { name: 'price', label: 'Price', widget:'number' },
                { name: 'rank', label: 'Rank' },
                { name: 'author', label: 'Author',widget: {widget:'select_type', expand:true , type: 'Author'}},
                { name: 'genres', label: 'Genre', widget: {widget:'select_types', expand:true, type: 'Genre'}},
            ],
        },
    },
};
export default Book;

TypeOperationConfiguration

| Property | Description | Type | Default | | :--------: | :---------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------: | | admin | admin configuration | TypeConfigurationAdmin | - | | forms | A list of configured forms for this types | { [formName: string]: <FormConfigurationType } | - | | id | What is the id property for this type? | string | id | | label | For selectType | string|() =>string|React.ReactNode) | '_name' property | | metadata | Additional configuration for this type | { [key: string]: any } | - | | operations | Operation configuration for given type | Partial<TypeOperationConfiguration> | - | | order | For SelectType | order:string| {[field:string]:'asc'|'desc'} | 'asc' | | search | search in type | string|string[] | ((object:GraphQLObject,context?:any)=>string)|{custom:(object:GraphQLObject,search:string,context?:any)=>boolean} | - | | select | Select type widget configuration | { label: any; fragment: any }; | - |

TypeConfigurationAdmin

FormConfigurationType

FormFieldExtraType

Use AdminType

<AdminType
  key={type}
  type={type}
  heights={{ offset: 16 }}
  {...getDefaultTableProps()}
  />

Use Form

Basic use, if you want further customization, see our demo.


const formConfig = {
  props: { layout: "vertical" },
  fields: [
    {
      name: "name",
      label: "Nom",
      required: true,
      rules: [{ required: true }],
      initialValue: "Ode"
    },
    { name: "firstname", label: "Prénom", initialValue: "Jack" },
    { name: ['position','name'], label: 'Position'},
  ]
};

const object = {
    name: 'Doe',
    city: 'Paris',
    position:{
        name: 'Software Engineer',
        company: 'Google'
    },
};

  //...
  <Form
    config={formConfig}
    onFinish={values => console.log(values)}
    context={{ object }}
    footer={
      <div className="text-center">
        <Button type="primary" htmlType="submit">
          Sauvegarder
        </Button>
      </div>
    }
  />
);

Working locally with apant

Working locally with apant relies on yalc and yarn.

First, you neeed to compile the project.

$ cd apant
$ yarn
$ yarn build

Then, you'll need to publish the project with yalc.

$ yalc publish
apant@xxx published in store.

The project is now in the yalc store and is available to use for other project.

Use the `apant` in your project

To use the library in your local project, you need to link it with yalc.

$ cd myproject/
$ yalc link apant

apant is now linked to the project.

Work in realtime

To work and use apant in realtime, we must watch apant for change, compile it and publish it the yalc store.
To do so, we use the npm command defined in the package.json by

"watch-publish": "tsc-watch --onSuccess \"yalc push\""

$ cd apant/
$ yarn watch-publish

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme