## Installation

### TACO UI

TACO UI is a system of React components highly based on tailwindcss, it is available as an [npm package](#).<br />
[See full documentation here](https://elpassion.github.io/flounder-2) via storybook

**npm:**

```sh
npm install @elpassion/taco
```

**yarn:**

```sh
yarn add @elpassion/taco
```

### Copy files

In order to use this library you'll have to generate tokens file and wire it to your `tailwind.config.js` with `generateConfigFunc()` or `initDefaultTheme()`. And pass package directory to tailwind content Array.

```js
const { initDefaultTheme } = require('@elpassion/taco');
const { merge } = require('lodash');

const customProjectConfig = {
  extend: [...]
}

module.exports = {
  darkMode: "class",
  mode: "jit",
  content: [
    join(__dirname, './pages/**/*.{js,ts,jsx,tsx}'), // Existing project config
    join(__dirname, '../../node_modules/@elpassion/taco/**/*.{js,jsx}'), // << This needs to be added to prune styles
    ...createGlobPatternsForDependencies(__dirname),
],
  theme: merge(initDefaultTheme(), customProjectConfig),
  plugins: [require('@tailwindcss/forms')],
}
```

### Custom tokens

If you want, yo can use your own tokens values for chosen components. To do so, except using `initDefaultTheme()`:

- import appropriate tokenHelpers function
- create your own config `.json` file with the configuration of the selected property
- create your own config `.json` files with values for chosen component
- extend tailwind config with them like below:

```js
const { colorsTokenHelpers } = require("@elpassion/taco");

const customProjectConfig = {
  extend: {
    colors: merge(colorsTokenHelpers.getColorsConfig(colors), {
      hoveredFacebookButton: "#f9f9f9",
      hoveredGoogleButton: "#f9f9f9",
    }),
    ...merge(
      ...colorsTokenHelpers.getComponentsColorConfig(
        ["button"],
        importJson,
        colors
      )
    ),
  },
};
```

The following helpers are currently available:

- `colorsTokenHelpers()`
- `radiusTokenHelpers()`

### In Taco, we use several packages that also need to be installed if you use some components.

Here is the list:

- **DatePicker** - react-datepicker
- **SelectDropdown, AsyncSelect, CreatableSelect or Menu Dropdown** - react-select
- **Modal** - react-modal
- **Carousel** - embla-carousel-react
- **Table** - react-table
- **WYSIWYG** - react-quill

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

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

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


### Optionally (WIP) (Now it's still required for some compoennts to work)

You can use icons locally from [icons font](https://github.com/elpassion/design-system/blob/main/src/fonts/fonticon.ttf) or use cdn [https://elpassion-design-system.s3.eu-west-1.amazonaws.com/fonticon.ttf](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 (
    <div className="App">
      <Button {...props} />
    </div>
  );
}
```