SDN Storybook

.storybook\main.js

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-a11y",
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app",
  ],
};

.storybook\preview.js

import "bootstrap/dist/css/bootstrap.min.css";

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
};

Input.tsx

import React, { InputHTMLAttributes } from "react";
import { Field, getIn, useFormikContext } from "formik";
import classNames from "classnames";

type InputProps = {
  name: string;
  className?: string;
};

const Input = ({
  name,
  className,
  ...props
}: InputProps & InputHTMLAttributes<HTMLInputElement>) => {
  const { errors } = useFormikContext();
  const error = getIn(errors, name);

  return (
    <>
      <Field
        {...props}
        id={name}
        name={name}
        className={classNames("form-control", className, {
          "is-invalid": error,
          "is-valid": !error,
        })}
        data-lpignore
      />
    </>
  );
};

export default Input;

Label.tsx

import React, { LabelHTMLAttributes } from "react";
import classNames from "classnames";

type LabelProps = {
  name: string;
  label: string;
  className?: string;
};

const Label = ({
  name,
  label,
  className,
}: LabelProps & LabelHTMLAttributes<HTMLLabelElement>) => {
  return (
    <label htmlFor={name} className={classNames("form-label", className)}>
      {label}
    </label>
  );
};

export default Label;

LabeledInput.stories.tsx

import type { Meta, Story } from "@storybook/react/types-6-0";
import React, { ComponentProps } from "react";
import { Formik } from "formik";
import LabeledInput from "./LabeledInput";

export default {
  component: LabeledInput,
  title: "Elements/LabeledInput",
  decorators: [
    (storyFn) => {
      return (
        <Formik
          initialValues={{ firstName: "Maurice", lastName: "" }}
          initialErrors={{
            lastName: "Lastname is required",
          }}
          onSubmit={() => {}}
        >
          {storyFn()}
        </Formik>
      );
    },
  ],
} as Meta;

export const Standard: Story = () => (
  <LabeledInput label="Firstname:" name="firstName" />
);

export const WithError: Story = () => (
  <LabeledInput label="Lastname:" name="lastName" />
);

export const StandardMetArgs: Story<ComponentProps<typeof LabeledInput>> = (
  args
) => <LabeledInput {...args} />;

StandardMetArgs.args = {
  label: "Firstname:",
  name: "firstName",
};

StandardMetArgs.argTypes = {
  labelClassName: {
    name: "Label CSS class",
    defaultValue: "text-body",
    control: {
      type: "select",
      options: ["text-body", "text-success", "text-danger"],
    },
  },
};

LabeledInput.tsx

import React, { InputHTMLAttributes } from "react";
import { getIn, useFormikContext } from "formik";
import classNames from "classnames";
import Label from "./Label";
import Input from "./Input";

type LabeledInputProps = {
  name: string;
  label: string;
  controlClassName?: string;
  labelClassName?: string;
};

const LabeledInput = ({
  name,
  label,
  controlClassName,
  labelClassName,
  className,
  ...props
}: LabeledInputProps & InputHTMLAttributes<HTMLInputElement>) => {
  const { errors } = useFormikContext();
  const error = getIn(errors, name);

  return (
    <div className={classNames("form-group", className)}>
      <Label name={name} label={label} className={labelClassName} />
      <Input {...props} name={name} className={controlClassName} />
      {error && <div className="invalid-feedback">{error}</div>}
    </div>
  );
};

export default LabeledInput;