2.1.91 • Published 3 years ago

@2dine/framework-ui v2.1.91

Weekly downloads
2,273
License
-
Repository
github
Last release
3 years ago

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.

2.1.90

3 years ago

2.1.91

3 years ago

2.1.89

4 years ago

2.1.87

4 years ago

2.1.88

4 years ago

2.1.85

4 years ago

2.1.86

4 years ago

2.1.83

4 years ago

2.1.84

4 years ago

2.1.82

4 years ago

2.1.81

4 years ago

2.1.80

4 years ago

2.1.78

4 years ago

2.1.79

4 years ago

2.1.76

4 years ago

2.1.77

4 years ago

2.1.69

4 years ago

2.1.67

4 years ago

2.1.68

4 years ago

2.1.74

4 years ago

2.1.75

4 years ago

2.1.72

4 years ago

2.1.73

4 years ago

2.1.70

4 years ago

2.1.71

4 years ago

2.1.66

4 years ago

2.1.65

4 years ago

2.1.64

4 years ago

2.1.63

4 years ago

2.1.58

4 years ago

2.1.59

4 years ago

2.1.57

4 years ago

2.1.61

4 years ago

2.1.62

4 years ago

2.1.60

4 years ago

2.1.56

4 years ago

2.1.55

5 years ago

2.1.54

5 years ago

2.1.52

5 years ago

2.1.53

5 years ago

2.1.49

5 years ago

2.1.48

5 years ago

2.1.50

5 years ago

2.1.51

5 years ago

2.1.47

5 years ago

2.1.45

5 years ago

2.1.46

5 years ago

2.1.44

5 years ago

2.1.43

5 years ago

2.1.42

5 years ago

2.1.38

5 years ago

2.1.39

5 years ago

2.1.36

5 years ago

2.1.37

5 years ago

2.1.34

5 years ago

2.1.35

5 years ago

2.1.41

5 years ago

2.1.40

5 years ago

2.1.32

5 years ago

2.1.33

5 years ago

2.1.31

5 years ago

2.1.30

5 years ago

2.1.29

5 years ago

2.1.28

5 years ago

2.1.27

5 years ago

2.1.25

5 years ago

2.1.26

5 years ago

2.1.24

5 years ago

2.1.23

5 years ago

2.1.22

5 years ago

2.1.21

5 years ago

2.1.19

5 years ago

2.1.20

5 years ago

2.1.18

5 years ago

2.1.16

5 years ago

2.1.17

5 years ago

2.1.15

5 years ago

2.1.14

5 years ago

2.1.13

5 years ago

2.1.12

5 years ago

2.1.9

5 years ago

2.1.10

5 years ago

2.1.11

5 years ago

2.1.8

5 years ago

2.1.7

5 years ago

2.0.137

5 years ago

2.1.2

5 years ago

2.1.1

5 years ago

2.1.4

5 years ago

2.1.3

5 years ago

2.1.6

5 years ago

2.1.5

5 years ago

2.1.0

5 years ago

2.0.136

5 years ago

2.0.135

5 years ago

2.0.134

5 years ago

2.0.133

5 years ago

2.0.132

5 years ago

2.0.131

5 years ago

2.0.130

5 years ago

2.0.129

5 years ago

2.0.128

5 years ago

2.0.127

5 years ago

2.0.126

5 years ago

2.0.119

5 years ago

2.0.118

5 years ago

2.0.117

5 years ago

2.0.116

5 years ago

2.0.115

5 years ago

2.0.114

5 years ago

2.0.113

5 years ago

2.0.112

5 years ago

2.0.125

5 years ago

2.0.124

5 years ago

2.0.123

5 years ago

2.0.122

5 years ago

2.0.121

5 years ago

2.0.120

5 years ago

2.0.111

5 years ago

2.0.110

5 years ago

2.0.109

5 years ago

2.0.108

5 years ago

2.0.107

5 years ago

2.0.106

5 years ago

2.0.105

5 years ago

2.0.104

5 years ago

2.0.103

5 years ago

2.0.102

5 years ago

2.0.101

5 years ago

2.0.100

5 years ago

2.0.99

5 years ago

2.0.98

5 years ago

2.0.97

5 years ago

2.0.96

5 years ago

2.0.95

5 years ago

2.0.93

5 years ago

2.0.94

5 years ago

2.0.92

5 years ago

2.0.91

5 years ago

2.0.90

5 years ago

2.0.89

5 years ago

2.0.88

5 years ago

2.0.86

5 years ago

2.0.87

5 years ago

2.0.84

5 years ago

2.0.85

5 years ago

2.0.82

5 years ago

2.0.83

5 years ago

2.0.81

5 years ago

2.0.80

5 years ago

2.0.79

5 years ago

2.0.78

5 years ago

2.0.77

5 years ago

2.0.76

5 years ago

2.0.75

5 years ago

2.0.74

5 years ago

2.0.73

5 years ago

2.0.72

5 years ago

2.0.69

5 years ago

2.0.71

5 years ago

2.0.70

5 years ago

2.0.68

5 years ago

2.0.67

5 years ago

2.0.66

5 years ago

2.0.65

5 years ago

2.0.64

5 years ago

2.0.59

5 years ago

2.0.57

5 years ago

2.0.58

5 years ago

2.0.62

5 years ago

2.0.63

5 years ago

2.0.60

5 years ago

2.0.61

5 years ago

2.0.56

5 years ago

2.0.55

5 years ago

2.0.54

5 years ago

2.0.53

5 years ago

2.0.52

5 years ago

2.0.51

5 years ago

2.0.49

5 years ago

2.0.50

5 years ago

2.0.48

5 years ago

2.0.46

5 years ago

2.0.47

5 years ago

2.0.44

5 years ago

2.0.45

5 years ago

2.0.42

5 years ago

2.0.43

5 years ago

2.0.41

5 years ago

2.0.40

5 years ago

2.0.39

5 years ago

2.0.38

5 years ago

2.0.37

5 years ago

2.0.36

5 years ago

2.0.35

5 years ago

2.0.33

5 years ago

2.0.34

5 years ago

2.0.32

5 years ago

2.0.31

5 years ago

2.0.30

5 years ago

2.0.28

5 years ago

2.0.26

5 years ago

2.0.27

5 years ago

2.0.24

5 years ago

2.0.25

5 years ago

2.0.23

5 years ago

2.0.19

5 years ago

2.0.22

5 years ago

2.0.20

5 years ago

2.0.21

5 years ago

2.0.18

5 years ago

2.0.17

5 years ago

2.0.16

5 years ago

2.0.15

5 years ago

2.0.14

5 years ago

2.0.13

5 years ago

2.0.12

5 years ago

2.0.11

5 years ago

2.0.10

5 years ago

2.0.9

5 years ago

2.0.8

5 years ago

2.0.7

5 years ago

2.0.6

5 years ago

2.0.3

5 years ago

2.0.2

5 years ago

2.0.5

5 years ago

2.0.4

5 years ago

2.0.1

5 years ago

1.1.1

5 years ago

2.0.0

5 years ago

1.1.0

5 years ago

1.0.25

5 years ago

1.0.24

5 years ago

1.0.23

5 years ago

1.0.22

5 years ago

1.0.21

5 years ago

1.0.20

5 years ago

1.0.19

5 years ago

1.0.18

5 years ago

1.0.17

5 years ago

1.0.16

5 years ago

1.0.15

5 years ago

1.0.11

5 years ago

1.0.14

5 years ago

1.0.13

5 years ago

1.0.12

5 years ago

1.0.9

5 years ago

1.0.8

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.10

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago