110 lines
2.3 KiB
TypeScript
110 lines
2.3 KiB
TypeScript
import preview from "#.storybook/preview";
|
|
import { AnyFieldApi } from "@tanstack/solid-form";
|
|
import { Component, Accessor } from "solid-js";
|
|
|
|
import { InputField } from "../../src/ts/components/ui/form/InputField";
|
|
|
|
type MetaState = {
|
|
isTouched?: boolean;
|
|
isValid?: boolean;
|
|
isValidating?: boolean;
|
|
errors?: string[];
|
|
hasWarning?: boolean;
|
|
warnings?: string[];
|
|
};
|
|
|
|
function createFieldMock(options: {
|
|
name?: string;
|
|
value?: string;
|
|
meta?: MetaState;
|
|
}) {
|
|
const stateMeta = {
|
|
isTouched: true,
|
|
isValid: true,
|
|
isValidating: false,
|
|
errors: [],
|
|
...(options.meta ?? {}),
|
|
};
|
|
return {
|
|
name: options.name ?? "test",
|
|
get state() {
|
|
return {
|
|
value: options.value ?? "",
|
|
meta: stateMeta,
|
|
};
|
|
},
|
|
getMeta() {
|
|
return {
|
|
hasWarning: options.meta?.hasWarning ?? false,
|
|
warnings: options.meta?.warnings ?? [],
|
|
};
|
|
},
|
|
} as unknown as AnyFieldApi;
|
|
}
|
|
|
|
const meta = preview.meta({
|
|
title: "UI/Form/InputField",
|
|
component: InputField as Component<{
|
|
field: Accessor<AnyFieldApi>;
|
|
placeholder?: string;
|
|
showIndicator?: true;
|
|
autocomplete?: string;
|
|
type?: string;
|
|
disabled?: boolean;
|
|
onFocus?: () => void;
|
|
}>,
|
|
parameters: {
|
|
layout: "centered",
|
|
},
|
|
tags: ["autodocs"],
|
|
argTypes: {
|
|
placeholder: { control: "text" },
|
|
showIndicator: { control: "boolean" },
|
|
autocomplete: { control: "text" },
|
|
type: { control: "text" },
|
|
disabled: { control: "boolean" },
|
|
},
|
|
});
|
|
|
|
export const Default = meta.story({
|
|
args: {
|
|
field: () => createFieldMock({}),
|
|
},
|
|
});
|
|
|
|
export const withIndicator = meta.story({
|
|
args: {
|
|
showIndicator: true,
|
|
field: () => createFieldMock({}),
|
|
},
|
|
});
|
|
|
|
export const withPlaceholder = meta.story({
|
|
args: {
|
|
placeholder: "placeholder",
|
|
field: () => createFieldMock({}),
|
|
},
|
|
});
|
|
|
|
export const withAutocomplete = meta.story({
|
|
args: {
|
|
autocomplete: "autocomplete",
|
|
field: () => createFieldMock({}),
|
|
},
|
|
});
|
|
|
|
export const withTypePassword = meta.story({
|
|
args: {
|
|
type: "password",
|
|
placeholder: "password",
|
|
field: () => createFieldMock({ value: "test" }),
|
|
},
|
|
});
|
|
|
|
export const disabled = meta.story({
|
|
args: {
|
|
disabled: true,
|
|
field: () => createFieldMock({ value: "test", meta: { isValid: true } }),
|
|
},
|
|
});
|