@elpassion/taco

Installation

$3

TACO UI is a system of React components highly based on tailwindcss, it is available as an npm package.

See full documentation here via storybook

npm:

``sh
npm install @elpassion/taco
`

yarn:

`sh
yarn add @elpassion/taco
`

$3

Taco Design System uses Figma Tokens plugin and has its own tokens-based classes config connected with Tailwind CSS. It's required to add those classes to Tailwind defaultTheme in your project. See detailed specification of how tokens work in Taco: TOKENS.MD

$3

Here is the list:

- DatePicker - react-datepicker
- Dropdown: SelectDropdown, AsyncSelect, CreatableSelect or MenuDropdown - react-select
- Modal - react-modal
- Carousel - embla-carousel-react
- Table - @tanstack/react-table
- WYSIWYG - react-quill

If you want to import any of the above components use :

`js
import { ComponentName } from "@elpassion/taco/ComponentName";
`

#### IMPORTANT FOR THE DatePicker COMPONENT:

To load the styles you have to import DatePicker.styles.css file in your global stylesheet, eg:

`css
/ globals.css /
@import "@elpassion/taco/datePickerStyles.css";
`

If you add a new package to the design system, please add it to the list above, and what's more important, you have to add this package to peerDependencies in npm-package.json

$3

`js

@font-face {
font-family: "icons";
src: url("https://elpassion-design-system.s3.eu-west-1.amazonaws.com/fonticon.ttf")
format("opentype");
}

`

$3

You can use icons locally from icons font or use cdn https://elpassion-design-system.s3.eu-west-1.amazonaws.com/fonticon.ttf
TODO:

- Allow importing font file from npm package

Then use it in your app for example:

`js
import React from "react";
import Button from "@elpassion/taco";

export default function App() {
return (



);
}
``

$3

CONTRIBUTE.MD