Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
interface MagicFormActionStatus{
result?:any,
timestamp?: number,
status: "pending" | "fulfilled" | "rejected"
}Accelerates the implementation of design tokens in web components in a sustainable and scalable way
<MagicFormProvider actions={{
async login(){...}
}}>
<MagicFormProvider actions={actionsClient}>
<PageClient/>
</MagicFormProvider>
<MagicFormProvider actions={actionsAdmin}>
<PageAdmin/>
</MagicFormProvider>
</MagicFormProvider>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 { useRef } from "atomico";
import { useMagicForm } from "@atomico/magic-form/hooks";
function component() {
const ref = useRef();
const [state, submit] = useMagicForm(ref);
return (
<host>
<form ref={ref} action="addUser">
<input type="text" name="name" />
<input type="email" name="email" />
<button>Add user</button>
</form>
</host>
);
}import { useHost } from "atomico";
import { useMagicFormProvider } from "@atomico/magic-form/hooks";
function component() {
const ref = useHost();
const forms = useMagicFormProvider(ref, {
addUser(form) {
const body = new FormData(form);
return fetch(formData, { method: "POST", body }).res((res) => res.json());
},
});
return <host></host>;
}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>
</>
);
}
npm i @atomico/magic-form @atomico/reactimport { 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>
);
}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);
}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);
}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);
}import {
compose,
tokens,
classes
} from "@atomico/design-tokens";compose(
...middleware: ((sheet: CSSStyleSheet, lastParam:any)=> any)[]
): (firstParam:any)=>sheet: CSSStyleSheet;tokens(theme: Tokens, prefix: string);classes(tokens:Tokens);MagicForm makes it easy to send data to the server, here are some useful patterns
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``);: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);
}:root {
--my-ds-size-xl: 50px;
}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);
}
`,
];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);
}
`
);.gap\.xl {
gap: var(--size-xl);
}
.gap\.l {
gap: var(--size-l);
}
.gap\.m {
gap: var(--size-m);
}
.gap\.s {
gap: var(--size-s);
}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));npm install @atomico/magic-formimport {
MagicForm,
MagicFormProvider
} from "@atomico/magic-form";import {
useMagicForm,
useMagicFormProvider
} from "@atomico/magic-form/hooks";<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>
);
}async search(form: HTMLFormElement) {
const beforeFetch = Object.fromEntries(new FormData(form) as any);
await new Promise((resolve) => setTimeout(resolve, 1000)); // debounce
const result = await fetch(beforeFetch.search);
const afterFetch = Object.fromEntries(new FormData(form) as any);
if (afterFetch.search === beforeFetch.search) {
return result;
} else {
return login(form);
}
}