@2dine/framework-ui

This is a Tailwind CSS wrapper for react.

Getting Started

First, run the development server:

npm install @2dine/framework-ui
# or
yarn add @2dine/framework-ui

Usage Sidebar

Here is a quick example to get you started, it's all you need:

import { Sidebar } from "../src/components";
import "../styles/globals.css";

function App({ Component, pageProps }) {
  const primaryLinks = [
    {
      href: `/`,
      label: "Inicio",
      // exact: true,
      // icon: (
      //   <Home className="mr-4 h-6 w-6 text-primary-200 group-hover:text-primary-200 group-focus:text-primary-200 transition ease-in-out duration-150" />
      // ),
    },
    {
      href: `/contracts`,
      label: "Contratos",
      // exact: true,
      // icon: (
      //   <Scale className="mr-4 text-primary-200 transition ease-in-out duration-150" />
      // ),
    },
    {
      href: `/consumptions`,
      label: "Lecturas",
      // exact: true,
      // icon: (
      //   <Calculator className="mr-4 text-primary-200 transition ease-in-out duration-150" />
      // ),
    },
    {
      href: `/payments`,
      label: "Ingresos",
      // exact: true,
      // icon: (
      //   <Cash className="mr-4 text-primary-200 transition ease-in-out duration-150" />
      // ),
    },
  ];

  const secondaryLinks = [
    {
      href: `/settings`,
      label: "Configuración",
      // icon: (
      //   <Cog className="mr-4 text-primary-200 transition ease-in-out duration-150" />
      // ),
    },
    { href: `/help`, label: "Ayuda" },
    {
      href: `/about`,
      label: "Acerca de",
      // icon: (
      //   <ShieldCheck className="mr-4 text-primary-200 transition ease-in-out duration-150" />
      // ),
    },
  ];

  return (
    <div className="relative h-screen flex overflow-hidden bg-gray-100">
      <Sidebar
        logo={{
          src:
            "https://tailwindui.com/img/logos/workflow-logo-indigo-500-mark-white-text.svg",
          alt: "Workflow",
        }}
        withHeader
        primaryLinks={primaryLinks}
        secondaryLinks={secondaryLinks}
        footer={
          <div className="flex-shrink-0 flex border-t border-primary-800 p-4">
            <a href="#" className="flex-shrink-0 group block">
              <div className="flex items-center">
                <div>
                  <img
                    className="inline-block h-9 w-9 rounded-full"
                    src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                    alt=""
                  />
                </div>
                <div className="ml-3">
                  <p className="text-base md:text-sm font-medium text-white">
                    Tom Cook
                  </p>
                  <p className="text-sm md:text-xs font-medium text-primary-200 group-hover:text-white">
                    View profile
                  </p>
                </div>
              </div>
            </a>
          </div>
        }
      />
      <div className="flex-1 overflow-auto focus:outline-none" tabIndex="0">
        <main className="flex-1 relative pb-8 z-0 overflow-y-auto">
          <Component {...pageProps} />
        </main>
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"));

Yes, it's really all you need to get started.

Usage DynamoFilter

Here is a quick example to get you started, it's all you need:

import { DynamoFilter } from "../src/components";

  const onResolveOptions = () => {
    return new Promise((resolve) => {
      setTimeout(
        () =>
          resolve([
            { label: "Opción 1", value: "key_1" },
            { label: "Opción 2", value: "key_2" },
          ]),
        3000
      );
    });
  };

  return (
    <div className="relative h-screen flex overflow-hidden bg-gray-100">
      <DynamoFilter
        fields={{
          serie: {
            label: "Serie",
            inputType: "input",
            operand: "eq",
          },
          derivativeSerie: {
            label: "Derivada",
            placeholder: "Ingresa el número de serie",
            inputType: "input",
            operand: "eq",
          },
          rutaID: {
              label: "Ruta",
              inputType: "select",
              operand: "eq",
              placeholder: "Selecciona una opción",
              onResolveOptions, /* Regresa un arreglo de options */
          },
          consumo: {
            label: "Consumo",
            inputType: "range",
            type: "volume",
            max: 10000,
            step: 100,
            dependsOn: {
              availableRange: {
                inputType: "switch",
                label: "Habilitar rango",
                description: "",
                parseValue: (value) => value && "between",
              },
            },
          },
          createdAt: {
            label: "Fecha",
            inputType: "date",
            dependsOn: {
              dateType: {
                inputType: "select",
                options: [
                  { label: "Antes de", value: "lt" },
                  { label: "Despues de", value: "gt" },
                  { label: "Entre", value: "between" },
                ],
                label: "Rango de fecha",
                placeholder: "Todos",
              },
            },
          },
        }}
        initialValues={{
          serie: "",
          derivativeSerie: "",
          status: "",
          consumo: [0, 1000000],
          availableRange: false,
          createdAt: new Date().toISOString(),
        }}
        onCancel={() => }
        onSubmit={(values) => console.log("values", values)}
      />
      <div className="flex-1 overflow-auto focus:outline-none" tabIndex="0">
        <main className="flex-1 relative pb-8 z-0 overflow-y-auto">
          <Component {...pageProps} />
        </main>
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"));

Yes, it's really all you need to get started.