fix: 🩹 add formkit stories

apps/wizarr-frontend/src/stories/formkit.stories.tsx

@@ -0,0 +1,132 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import type { FormKitInputs } from "@formkit/inputs";
+import type { AllowedComponentProps, RendererElement, RendererNode, VNode, VNodeProps, ComponentCustomProps } from "vue";
+
+import { defineComponent } from "vue";
+import { FormKit, type FormKitSetupContext } from "@formkit/vue";
+
+export declare type FormKitComponentButtonProps = {
+ type: "button" | "submit" | "reset";
+ label: string;
+ "data-theme": "primary" | "secondary" | "success" | "danger" | "warning" | "transparent" | "none";
+ onClick: () => void;
+};
+
+export declare type FormKitComponent = <Props extends FormKitInputs<Props>>(
+ props: Props & VNodeProps & AllowedComponentProps & ComponentCustomProps & FormKitComponentButtonProps,
+ context?: Pick<FormKitSetupContext<Props>, "attrs" | "emit" | "slots">,
+ setup?: FormKitSetupContext<Props>,
+) => VNode<
+ RendererNode,
+ RendererElement,
+ {
+ [key: string]: any;
+ }
+> & {
+ __ctx?: FormKitSetupContext<Props>;
+};
+
+// type FormKitComponentAndCustomArgs = FormKitComponent<typeof globalArgs>;
+
+const meta: Meta<FormKitComponent> = {
+ title: "FormKit",
+ component: defineComponent({
+ render() {
+ return <FormKit {...this.$attrs} />;
+ },
+ }),
+};
+
+export default meta;
+type Story = StoryObj<FormKitComponent>;
+
+const globalArgs: Story["args"] = {
+ label: "Label",
+ help: "",
+};
+
+export const Button: Story = {
+ args: {
+ type: "button",
+ "data-theme": "primary",
+ ...globalArgs,
+ },
+ argTypes: {
+ "data-theme": {
+ options: ["primary", "secondary", "success", "danger", "warning", "transparent", "none"],
+ control: {
+ type: "select",
+ },
+ },
+ onClick: {
+ action: "onClick",
+ },
+ },
+};
+
+export const Text: Story = {
+ args: {
+ type: "text",
+ placeholder: "Placeholder",
+ ...globalArgs,
+ },
+ argTypes: {
+ type: {
+ options: ["text", "email", "password", "number", "tel", "url", "search", "textarea"],
+ control: {
+ type: "select",
+ },
+ },
+ },
+};
+
+export const Select: Story = {
+ args: {
+ type: "select",
+ options: ["Option 1", "Option 2", "Option 3"] as any,
+ ...globalArgs,
+ },
+ argTypes: {
+ options: {
+ control: {
+ type: "array",
+ },
+ },
+ },
+};
+
+export const Checkbox: Story = {
+ args: {
+ type: "checkbox",
+ ...globalArgs,
+ },
+};
+
+export const Radio: Story = {
+ args: {
+ type: "radio",
+ options: ["Option 1", "Option 2", "Option 3"] as any,
+ ...globalArgs,
+ },
+};
+
+export const Toggle: Story = {
+ args: {
+ type: "toggle",
+ ...globalArgs,
+ },
+};
+
+export const Rating: Story = {
+ args: {
+ type: "rating",
+ ...globalArgs,
+ },
+};
+
+export const Range: Story = {
+ args: {
+ type: "range",
+ ...globalArgs,
+ },
+};