1 of 10

Deprecated

@atomico/magic-form

Improves the form development experience thanks to the use of webcomponents to centralize submission

A powerful form submission manager created with Atomicojs webcomponents, with MagicForm you can:

Simplify the sending of forms by centralizing the sending actions through a provider.
Know at all times the forms that are being provided and show their status.
Isolate a group of actions according to provider, this means that if a provider does not register the action it will bubble to the parent provider.

Installation and import

npm install @atomico/magic-form

import { 
    MagicForm,
    MagicFormProvider 
} from "@atomico/magic-form";

import { 
    useMagicForm, 
    useMagicFormProvider 
} from "@atomico/magic-form/hooks";

Usage

<magic-form-provider>
  <magic-form>
    <form action="user">
      <input type="text" name="name" />
      <input type="text" name="email" />
      <button>Create user</button>
    </form>
  </magic-form>
</magic-form-provider>
<script>
  document.querySelector("magic-form-provider").actions = {
    async add(form) {
      return fetch("./my-api", {
        method: "post",
        body: new FormData(form),
      }).then((res) => res.json());
    },
  };
</script>

import { MagicForm, MagicFormProvider } from "@atomico/magic-form";

function component() {
  return (
    <host>
      <MagicFormProvider 
        actions={{
          async add(form) {
            return fetch("./my-api", {
              method: "post",
              body: new FormData(form),
            }).then((res) => res.json());
          },
        }}
      >
        <MagicForm>
          <form action="user">
            <input type="text" name="name" />
            <input type="text" name="email" />
            <button>Create user</button>
          </form>
        </MagicForm>
      </MagicFormProvider>
    </host>
  );
}

magic-form-provider captures all the forms nested in magic-form when executing the submit event by the form and distributes them according to the definition of the action attribute to each method of the actions object

API

MagicFormProvider | <magic-form-provider>

receives the submits from MagicForm

Example

import { MagicForm, MagicFormProvider } from "@atomico/magic-form";

function component() {
  return (
    <host>
      <MagicFormProvider 
        actions={{
          async add(form) {
            return fetch("./my-api", {
              method: "post",
              body: new FormData(form),
            }).then((res) => res.json());
          },
        }}
      >
        <MagicForm>
          <form action="user">
            <input type="text" name="name" />
            <input type="text" name="email" />
            <button>Create user</button>
          </form>
        </MagicForm>
      </MagicFormProvider>
    </host>
  );
}

Events

Properties

MagicForm | <magic-form>

captures the submit event of the nested form and sends it to MagicFormProvider

Examples

<MagicForm>
  <form action="user">
    <input type="text" name="name" />
    <input type="text" name="email" />
    <button>Create user</button>
  </form>
</MagicForm>

<MagicForm onChangeState={event=>{
  console.log(event.currentTarget.state);
}}>
  <form action="user">
    <input type="text" name="name" />
    <input type="text" name="email" />
    <button>Create user</button>
  </form>
</MagicForm>

Events

Type

Description

Config

Properties

Property

Description

Type

Property.state

interface MagicFormActionStatus{
    result?:any,
    timestamp?: number,
    status: "pending" | "fulfilled" | "rejected"
}

MagicForm Hooks

useMagicForm

catch the submit event and send it to the useMagicFormProvider

useMagicFormProvider

receives the submits from useMagicForm

MagicForm in React and Preact

MagicForm api is equivalent in Atomicojs, React and Preact at JSX level

Installation

npm i @atomico/magic-form @atomico/react

Usage

import { MagicForm, MagicFormProvider } from "@atomico/magic-form/react";

export function App() {
  return (
    <>
      <MagicFormProvider
        actions={{
          async add(form) {
            return fetch("./my-api", {
              method: "post",
              body: new FormData(form),
            }).then((res) => res.json());
          },
        }}
      >
        <MagicForm>
          <form action="user">
            <input type="text" name="name" />
            <input type="text" name="email" />
            <button>Create user</button>
          </form>
        </MagicForm>
      </MagicFormProvider>
    </>
  );
}

import { MagicForm, MagicFormProvider } from "@atomico/magic-form/preact";

export function App() {
  return (
    <>
      <MagicFormProvider
        actions={{
          async add(form) {
            return fetch("./my-api", {
              method: "post",
              body: new FormData(form),
            }).then((res) => res.json());
          },
        }}
      >
        <MagicForm>
          <form action="user">
            <input type="text" name="name" />
            <input type="text" name="email" />
            <button>Create user</button>
          </form>
        </MagicForm>
      </MagicFormProvider>
    </>
  );
}

MagicForm in Microfrontend

MagicForm will help you manage your applications with microfrontend architecture, through the concept of isolated providers, for example:

<MagicFormProvider actions={{
    async login(){...}
}}>
    <MagicFormProvider actions={actionsClient}>
        <PageClient/>
    </MagicFormProvider>
    <MagicFormProvider actions={actionsAdmin}>
        <PageAdmin/>
    </MagicFormProvider>
</MagicFormProvider>

Any action not registered by the provider will continue to bubble until the next provider.

MagicForm Patterns

MagicForm makes it easy to send data to the server, here are some useful patterns

Create data

Search

The following action allows us to generate searches from a form tag that has an input search, the objective is to consume the search value recursively only if there has been a change in the input search during the fetch performed.

@atomico/design-tokens

Accelerates the implementation of design tokens in web components in a sustainable and scalable way

With @atomico/design-tokens you can:

Resolve scalability and maintenance issues with your design tokens.

Design systems are complex to develop, due to the number of configurations that are shared between all our components, with @atomico/design-tokens we will solve:

Naming problems of the custom properties of your design tokens.
Legibility of your CSS.

How does @atomico/design-tokens solve the scalability of your design tokens?

For this example we will use Atomico, by the way you can use @atomico/design-tokens with any library.

The result of the CSS will be the following:

This is a technique that I have created to improve the scalability of design tokens, with it you can:

edit token globally using custom properties:

This is also applicable within a selector.

Simplify maintenance, since your components will use the custom properties without a prefix:

Create utility classes to be used internally by your component system.

I am personally a fan of custom properties, but their use would become repetitive, to avoid this and improve maintenance @atomico/design-tokens introduces classes, a generator of utility classes based on the proposed design tokens, example:

The classes middleware will parse the CSSStyleSheet to relate the custom propeprtiy --size as a class of .gap, internally the css will be as follows:

This makes it really simple to reuse the tokens, example:

@atomico/design-tokens api

module

import {
    compose,
    tokens,
    classes
} from "@atomico/design-tokens";

compose

create a pipeline of functions that share the same CSSStyleSheet.

Syntax

compose(
    ...middleware: ((sheet: CSSStyleSheet, lastParam:any)=> any)[]
): (firstParam:any)=>sheet: CSSStyleSheet;

tokens

transform an object to custom properties.

Syntax

tokens(theme: Tokens, prefix: string);

Example 1

compose(
    tokens(
        {
            size: {
                xl: "32px",
                l: "28px",
                m: "24px",
            }
        },
        "ds"
    )
);

:host{
    --size-xl: var( --ds--size-xl,  32px);
    --size-l: var( --ds--size-xl,  28px);
    --size-m: var( --ds--size-xl,  24px);
}

Example 2, variations

compose(
    tokens(
        {
            size: {
                xl: "32px",
                l: "28px",
                m: "24px",
            },
            variation: {
                small: {
                    size: {
                        xl: "28px",
                        l: "24px",
                        m: "20px",
                    },                
                }
            }
        },
        "ds"
    )
);

:host{
    --size-xl: var( --ds--size-xl,  32px);
    --size-l: var( --ds--size-xl,  28px);
    --size-m: var( --ds--size-xl,  24px);
}
:host([small]){
    --size-xl: var( --ds-small--size-xl,  28px);
    --size-l: var( --ds-small--size-xl,  24px);
    --size-m: var( --ds-small--size-xl,  20px);
}

classes

It facilitates the reuse of tokens, through the generation of dynamic classes.

Syntax

classes(tokens:Tokens);

Example

import {css} from "atomico";
import { compose, classes } from "@atomico/design-tokens";

const designTokens = compose(
    classes(
        {
            size: {
                xl: "32px",
                l: "28px",
                m: "24px",
            }
        }
    )
);

export const classUtils = designTokens(
    css`
        .gap.--size{
            gap: var(--size);
        }
    `
);

.gap\.xl{    
    gap: var(--size-xl);
}
.gap\.l{    
    gap: var(--size-l);
}
.gap\.m{    
    gap: var(--size-m);
}

@atomico/design-tokens api

module

import {
    compose,
    tokens,
    classes
} from "@atomico/design-tokens";

compose

create a pipeline of functions that share the same CSSStyleSheet.

Syntax

compose(
    ...middleware: ((sheet: CSSStyleSheet, lastParam:any)=> any)[]
): (firstParam:any)=>sheet: CSSStyleSheet;

tokens

transform an object to custom properties.

Syntax

tokens(theme: Tokens, prefix: string);

Example 1

compose(
    tokens(
        {
            size: {
                xl: "32px",
                l: "28px",
                m: "24px",
            }
        },
        "ds"
    )
);

:host{
    --size-xl: var( --ds--size-xl,  32px);
    --size-l: var( --ds--size-xl,  28px);
    --size-m: var( --ds--size-xl,  24px);
}

Example 2, variations

compose(
    tokens(
        {
            size: {
                xl: "32px",
                l: "28px",
                m: "24px",
            },
            variation: {
                small: {
                    size: {
                        xl: "28px",
                        l: "24px",
                        m: "20px",
                    },                
                }
            }
        },
        "ds"
    )
);

:host{
    --size-xl: var( --ds--size-xl,  32px);
    --size-l: var( --ds--size-xl,  28px);
    --size-m: var( --ds--size-xl,  24px);
}
:host([small]){
    --size-xl: var( --ds-small--size-xl,  28px);
    --size-l: var( --ds-small--size-xl,  24px);
    --size-m: var( --ds-small--size-xl,  20px);
}

classes

It facilitates the reuse of tokens, through the generation of dynamic classes.

Syntax

classes(tokens:Tokens);

Example

import {css} from "atomico";
import { compose, classes } from "@atomico/design-tokens";

const designTokens = compose(
    classes(
        {
            size: {
                xl: "32px",
                l: "28px",
                m: "24px",
            }
        }
    )
);

export const classUtils = designTokens(
    css`
        .gap.--size{
            gap: var(--size);
        }
    `
);

.gap\.xl{    
    gap: var(--size-xl);
}
.gap\.l{    
    gap: var(--size-l);
}
.gap\.m{    
    gap: var(--size-m);
}

@atomico/magic-form

Improves the form development experience thanks to the use of webcomponents to centralize submission

A powerful form submission manager created with Atomicojs webcomponents, with MagicForm you can:

Simplify the sending of forms by centralizing the sending actions through a provider.
Know at all times the forms that are being provided and show their status.
Isolate a group of actions according to provider, this means that if a provider does not register the action it will bubble to the parent provider.

Installation and import

npm install @atomico/magic-form

import { 
    MagicForm,
    MagicFormProvider 
} from "@atomico/magic-form";

import { 
    useMagicForm, 
    useMagicFormProvider 
} from "@atomico/magic-form/hooks";

Usage

<magic-form-provider>
  <magic-form>
    <form action="user">
      <input type="text" name="name" />
      <input type="text" name="email" />
      <button>Create user</button>
    </form>
  </magic-form>
</magic-form-provider>
<script>
  document.querySelector("magic-form-provider").actions = {
    async add(form) {
      return fetch("./my-api", {
        method: "post",
        body: new FormData(form),
      }).then((res) => res.json());
    },
  };
</script>

import { MagicForm, MagicFormProvider } from "@atomico/magic-form";

function component() {
  return (
    <host>
      <MagicFormProvider 
        actions={{
          async add(form) {
            return fetch("./my-api", {
              method: "post",
              body: new FormData(form),
            }).then((res) => res.json());
          },
        }}
      >
        <MagicForm>
          <form action="user">
            <input type="text" name="name" />
            <input type="text" name="email" />
            <button>Create user</button>
          </form>
        </MagicForm>
      </MagicFormProvider>
    </host>
  );
}

API

MagicFormProvider | <magic-form-provider>

MagicForm | <magic-form>

MagicForm Hooks

MagicForm in React and Preact

@atomico/design-tokens

Accelerates the implementation of design tokens in web components in a sustainable and scalable way

With @atomico/design-tokens you can:

Resolve scalability and maintenance issues with your design tokens.

Design systems are complex to develop, due to the number of configurations that are shared between all our components, with @atomico/design-tokens we will solve:

Naming problems of the custom properties of your design tokens.
Legibility of your CSS.

How does @atomico/design-tokens solve the scalability of your design tokens?

For this example we will use Atomico, by the way you can use @atomico/design-tokens with any library.

import { css } from "atomico";
import { compose, tokens } from "@atomico/design-tokens";

const designTokens = compose(
  tokens(
    {
      size: {
        xl: "40px",
        l: "32px",
        m: "28px",
        s: "20px",
      },
    },
    "ds"
  )
);

export const tokens = designTokens(css``);

The result of the CSS will be the following:

:host {
  --size-xl: var(--ds--size-xl, 40px);
  --size-l: var(--ds--size-l, 32px);
  --size-m: var(--ds--size-m, 28px);
  --size-s: var(--ds--size-s, 20px);
}

This is a technique that I have created to improve the scalability of design tokens, with it you can:

edit token globally using custom properties:

:root {
  --my-ds-size-xl: 50px;
}

This is also applicable within a selector.

Simplify maintenance, since your components will use the custom properties without a prefix:

import { c, css } from "atomico";
import tokens from "./tokens";
function button() {
  return (
    <host shadowDom>
      <slot />
    </host>
  );
}

button.styles = [
  tokens,
  css`
    :host {
      height: var(--size-xl);
      background: var(--color-primary-60);
      padding: var(--size-xxs) var(--size-xs);
    }
  `,
];

Create utility classes to be used internally by your component system.

import { css } from "atomico";
import { compose, tokens, classes } from "@atomico/design-tokens";

const designTokens = compose(
  classes({
    size: {
      xl: "40px",
      l: "32px",
      m: "28px",
      s: "20px",
    },
  })
);

export const tokensSize = designTokens(
  css`
    .gap.--size {
      gap: var(--size);
    }
  `
);

The classes middleware will parse the CSSStyleSheet to relate the custom propeprtiy --size as a class of .gap, internally the css will be as follows:

.gap\.xl {
  gap: var(--size-xl);
}

.gap\.l {
  gap: var(--size-l);
}

.gap\.m {
  gap: var(--size-m);
}

.gap\.s {
  gap: var(--size-s);
}

This makes it really simple to reuse the tokens, example:

import { c } from "atomico";
import { tokensSize } from "./tokens";

function button() {
  return (
    <host shadowDom>
      <button class="gap.xl">
        <slot />
      </button>
    </host>
  );
}

button.styles = tokensSize;

customElements.define("my-button", c(button));

@atomico/design-tokens api

Deprecated

@atomico/magic-form

Installation and import

Usage

API

MagicFormProvider | <magic-form-provider>

Example

Events

Properties

MagicForm | <magic-form>

Examples

Events

Properties

Property.state

MagicForm Hooks

useMagicForm

useMagicFormProvider

MagicForm in React and Preact

Installation

Usage

MagicForm in Microfrontend

MagicForm Patterns

Login

Create data

Search

@atomico/design-tokens

Resolve scalability and maintenance issues with your design tokens.

How does @atomico/design-tokens solve the scalability of your design tokens?

Create utility classes to be used internally by your component system.

@atomico/design-tokens api

module

compose

Syntax

tokens

Syntax

Example 1

Example 2, variations

classes

Syntax

Example

MagicForm in React and Preact

Installation

Usage

MagicForm in Microfrontend

@atomico/design-tokens api

module

compose

Syntax

tokens

Syntax

Example 1

Example 2, variations

classes

Syntax

Example

Deprecated

MagicFormProvider | <magic-form-provider>

Example

Events

Properties

MagicForm | <magic-form>

Examples

Events

Properties

Property.state

@atomico/magic-form

Installation and import

Usage

API

@atomico/design-tokens

Resolve scalability and maintenance issues with your design tokens.

How does @atomico/design-tokens solve the scalability of your design tokens?

Create utility classes to be used internally by your component system.

MagicForm Hooks

useMagicForm

useMagicFormProvider

MagicForm Patterns

Login

Create data

Search