Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@edteam/edui

1.4.6-beta • Public • Published

EDui

Libreria de componentes para React siguiendo la Guia de estilos de EDteam

Instalación

Para poder usar EDui primero se deben de tener instaladas las librerías node-sass, ed-grid y edteam-style-guides, una vez instaladas estas librerías se puede instalar EDui

npm install node-sass ed-grid edteam-style-guides @edteam/edui --save
or
yarn add node-sass ed-grid edteam-style-guides @edteam/edui

Se instalan ed-grid y edteam-style-guides para que la libreria se independiente de la versión actual de la guia de estilos y de EDgrid, es decir que la libreria en su bundle no incluye ninguna hoja css.

Uso en proyectos React

Primero se debe de crear un archivo sass donde se importen la guia de estilos y EDgrid

  // styles.scss
  //----- Importación de EDgrid y guía de estilos -----//
  @import '~ed-grid/ed-grid';
  @import '~edteam-style-guides/edteam-style-guides';

Y ahora se importa esta hoja de estilos en el archivo principal de la aplicación.

import React from "react"
import "./styles.scss" // La ruta donde esta la hoja de estilos
 
function App() {
    return (
        <>
            {/**Contenido de la aplicación**/}
        </>
    )
}

Uso en proyectos Nextjs

Se debe de instalar @zeit/next-sass para configurar sass en proyectos de Nextjs y configurar este plugin en el next.config.js

  // next.config.js
  const withSass = require('@zeit/next-sass')
  module.exports = withSass()

En el archivo styles.scss se pone el mismo contenido que en el ejemplo pasado

  // styles.scss
  //----- Importación de EDgrid y guía de estilos -----//
  @import '~ed-grid/ed-grid';
  @import '~edteam-style-guides/edteam-style-guides';

Y se puede importar esta hoja de estilos normalmente en nuestras paginas de Nextjs

  import React, {Component} from 'react'
  import "../styles/styles.scss"
 
  export default class extends Component {
    render() {
      return(
        <div className="ed-container">
          <h1>My fisrt page with Next.js and EDgrid</h1>
        </div>
      )
    }
  }

Componentes

Actualmente se tienen construidos los siguientes componentes

  • EDgrid
  • EDcontainer
  • EDitem
  • Banner
  • Topbar
  • Button
  • Table
  • Modal
  • Input
  • TextArea
  • Select
  • FormItem
  • Card

En Progreso

  • Tabs
  • Carousel

Generalidades

Todos los componentes reciben todas las propiedades válidas que se le puedan dar a los elementos HTML que renderizan, por ejemplo al componente Button se le puede pasar de manera normal propiedades como id, onClick, entre otras. Además que a todos se les puede pasar la propiedad ref para dar valor a alguna referencia de React. Ejemplo

const SampleComponent = () => (
  <>
    <Button onClick={/**Funcion*/} id="my-button" ref={myRef} className="content"></Button>
    <Form onSubmit={/*Funcion*/} ref={formRef}></Form>
    <Modal id="my-modal" ></Modal>
  </>
)

Y de esta manera con todos los componentes.

Colores

Algunos componentes reciben como propiedad el color del que será su fondo, esos posibles colores son:

  • first
  • second
  • third
  • accent
  • dark

Nota: En caso de recibir un valor incorrecto o no recibir ningún valor se tomara como valor por defecto first. Para más información visitar la Guía de estilos

EDgrid

Props

Nombre Tipo Descripción
gap Number Valor del gap que tendrá el grid, acepta valores entre 0 y 4
rowsGap bool Indica si las filas del grid van a tener un gap entre ellas
as string Indica que etiqueta HTML va a renderizar el EDgrid, por defecto es un div
small Number Indica el numero de columnas que va tener el grid en pantallas pequeñas
medium Number Indica el numero de columnas que va tener el grid en pantallas medianas
large Number Indica el numero de columnas que va tener el grid en pantallas grandes

Ejemplo

    import { EDgrid } from '@edteam/edui'
    //...
    const MyComponent = () => (
        <EDgrid small={1} medium={4} gap={2} rowsGap as="article">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </EDgrid>
    );

EDcontainer

Ejemplo:

    import { EDcontainer } from '@edteam/edui'
    //...
    const MyComponent = () => (
        <EDcontainer>
        {/**Hijos, que deberian ser EDitem**/}
        </EDcontainer>
    );

EDitem

Props

Nombre Tipo Descripción
small Number Indica el porcentaje del contenedor que ocupara el elemento en pantallas pequeñas, recibe los múltiplos de 5 del 0 al 100
medium Number Indica el porcentaje del contenedor que ocupara el elemento en pantallas mediana, recibe los múltiplos de 5 del 0 al 100
large Number Indica el porcentaje del contenedor que ocupara el elemento en pantallas grandes, recibe los múltiplos de 5 del 0 al 100

Nota: Las propiedades small, medium y large tambien soportan definiciones por fracciones recibiendo el objeto de la forma { numerator: number, denominator: number } y además por defecto small tiene valor de 100 y tanto medium como large reciben el valor del último breakpoint declarado, por defecto medium tendrá el valor de small y large el valor que tenga medium.

Ejemplo:

    import { EDcontainer, EDitem } from '@edteam/edui'
    //...
    const MyComponent = () => (
        <EDcontainer>
            <EDitem small={100} medium={50}>
                <p>
                    En un lugar de la Mancha, de cuyo nombre no quiero acordarme,
          no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero,
          adarga antigua, rocín flaco y galgo corredor.
                </p>
            </EDitem>
            <EDitem small={100} medium={25}>
                <p>
                    En un lugar de la Mancha, de cuyo nombre no quiero acordarme,
          no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero,
          adarga antigua, rocín flaco y galgo corredor.
                </p>
            </EDitem>
      <EDitem small={100}
        medium={{ numerator: 1, denominator: 4 }}
      >
                <p>
                    En un lugar de la Mancha, de cuyo nombre no quiero acordarme,
          no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero,
          adarga antigua, rocín flaco y galgo corredor.
                </p>
            </EDitem>
        </EDcontainer>
    );

Banner

Props

Nombre Tipo Descripción
color string Indica el color del banner, por defecto es first
diagonal bool Indica si se le agregara diagonal al final del contenedor
image string Url de imagen de fondo del banner
imageAlt string Propiedad alt de la imagen de fondo

Ejemplo:

import { Banner } from '@edteam/edui';
 
const MyComponent = () => (
    <Banner
    color="dark"
    image="https://images.pexels.com/photos/1981043/pexels-photo-1981043.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
    imageAlt="Test picture"
    diagonal
  >
    <h1>Banner</h1>
  </Banner>
);

Topbar

Props

Nombre Tipo Descripción
color string Indica color del topbar, recibe valores siguiendo los colores de EDteam

Ejemplo:

import React from 'react';
import { Topbar } from '@edteam/edui';
 
const MyComponent = () => (
  <Topbar color="dark">
        Contenido
    </Topbar>
)

Button

Props

Nombre Tipo Descripción
color string Indica color del botón, recibe valores siguiendo los colores de EDteam
tiny bool Indica si el botón será de tipo tiny
micro bool Indica si el botón será de tipo micro
full bool Indica si el botón ocupara todo el ancho disponible
ghost bool Indica si el botón será de fondo transparente, y solo consta de borde y texto.

Table

Props

Nombre Tipo Descripción
type string Indica color principal de la tabla
responsive bool Indica si la tabla va a ser responsive, por defecto el valor es true

Colores:

  • secondary
  • tertiary
  • accent
  • dark
  • default (first) Ejemplo:
import { Table } from '@edteam/edui';
 
const MyComponent = () => (
    <Table type='tertiary'>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Acciones</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Alejandro</td>
            <td>alejogs4@gmail.com</td>
            <td>Aqui las acciones</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Alejandro</td>
            <td>alejogs4@gmail.com</td>
            <td>Aqui las acciones</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Alejandro</td>
            <td>alejogs4@gmail.com</td>
            <td>Aqui las acciones</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Alejandro</td>
            <td>alejogs4@gmail.com</td>
            <td>Aqui las acciones</td>
        </tr>
    </Table>
);

Modal

Props

Nombre Tipo Descripción
open bool Indica si el modal va estar abierto
close func Función que cierra el modal

Ejemplo:

import React,{ useState } from 'React';
import { Modal, Button } from '@edteam/edui';
 
function MyComponent() {
    const [open, setOpen] = useState(false);
 
    function closeModal() {
        setOpen(false)
    }
 
    function openModal() {
        setOpen(true)
    }
 
    return (
        <>
            <Modal open={open} close={closeModal}>
                <h2>EDmodal</h2>
            </Modal>
            <Button onClick={openModal}>Abrir modal</Button>
        </>
    )
}

Elementos del formulario

Tanto Select, los inputs, el textarea funcionan de manera normal como cualquier elemento html. Ejemplo:

 
const FormSample = () => (
  <Form>
    <Form.FormItem>
      <Form.Input type="text" placeholder="Input your name" id="name" />
    </Form.FormItem>
    <Form.FormItem as="article">
      <Form.Input type="email" placeholder="Input your email" />
    </Form.FormItem>
    <Form.FormItem>
      <Form.Input type="password" placeholder="Input your password" />
    </Form.FormItem>
    <Button full type="submit">
      Submit
    </Button>
  </Form>
);

Nota: El mismo ejemplo puede ser desarrollado usando el componente EDgrid y al igual que el EDgrid FormItem, puede recibir la props as para indicar la etiqueta HTML que va a representar, la cual sera por defecto div.

const FormSample = () => (
  <Form>
    <EDgrid small={1} medium={2} gap={2} rowsGap>
      <Form.Input type="text" placeholder="Input your name" id="name" />
      <Form.Input type="text" placeholder="Input your lastname" id="lastname" />
      <Form.Input type="text" placeholder="Input your city" id="city" />
      <Form.Input type="text" placeholder="Input your country" id="country" />
      <Form.Select>
        <option>America</option>
        <option>Europe</option>
      </Form.Select>
      <Form.TextArea
        placeholder="Input your biography"
        className="s-cols-1 m-cols-2"
      />
      <Button full type="submit" className="s-cols-1 m-cols-2">
        Submit
      </Button>
    </EDgrid>
  </Form>
);

Card

Los elementos del card al igual que los elementos de formulario estan construidos utilizando el patrón de Compound Components asi que el marcado que al final se elija es totalmente a elección del usuario de la librería

Card Props

Nombre Tipo Descripción
as string Indica que etiqueta HTML va a renderizar el contenedor del card, por defecto es un article
horizontal bool Indica si el card va a estar en modo vertical, por defecto es false

Card.Header Props

Nombre Tipo Descripción
className string Indica las clases css del contenedor
image string Indica la imagen que va a ser renderizada
imageClass string Indica las clases css de la imagen
alt string Indica la propiedad alt de la etiqueta img

Opcionalmente el card puede recibir hijos

Card.Title Props

Nombre Tipo Descripción
as string Indica que etiqueta HTML va a renderizar el título, por defecto es un h3

Ejemplo: Card normal*

    <Card>
        <Card.Body>
            <Card.Header image="https://drupal.ed.team/sites/default/files/styles/16_9_medium/public/imagenes-cdn-edteam/2019-10/figma-desde-cero-poster.png" />
            { /* O tambien en lugar de pasar la imagen y para más control sobre el marcado se puede pasar como hijo */ }
            <Card.Header>
                <div className="img-container s-ratio-16-9">
                    <img
                        src="https://drupal.ed.team/sites/default/files/styles/16_9_medium/public/imagenes-cdn-edteam/2019-09/adobe-xd.png"
                        className="s-radius-tl-1 s-radius-tr-1"
                        alt="Adobe XD"
                    />
                </div>
            </Card.Header>
            <Card.Content>
                <Card.Title>Figma Desde Cero</Card.Title>
                <p className="small s-mb-0">
                    Aprende a diseñar interfaces de usuario interactivas e impactantes
                </p>
            </Card.Content>
        </Card.Body>
        <Card.Footer>
            <p className="s-mb-0">Álvaro Felipe</p>
            <div className="s-to-right color first-color s-cross-center">
                <b>20 USD</b>
            </div>
        </Card.Footer>
    </Card>

Card horizontal

    <Card horizontal>
        <Card.Body>
            <Card.Header image="https://drupal.ed.team/sites/default/files/styles/16_9_medium/public/imagenes-cdn-edteam/2019-10/figma-desde-cero-poster.png" />
            <Card.Content>
                <Card.Title>Figma Desde Cero</Card.Title>
                <p className="small s-mb-0">
                    Aprende a diseñar interfaces de usuario interactivas
                </p>
            </Card.Content>
        </Card.Body>
        <Card.Footer>
            <p className="s-mb-0">Álvaro Felipe</p>
            <div className="s-to-right color first-color s-cross-center">
                <b>20 USD</b>
            </div>
        </Card.Footer>
    </Card>

Install

npm i @edteam/edui

DownloadsWeekly Downloads

1

Version

1.4.6-beta

License

MIT

Unpacked Size

75.4 kB

Total Files

52

Last publish

Collaborators

  • avatar
  • avatar