@economic/taco

UI React component library

Usage

npm install --save @economic/taco

import { Button } from '@economic/taco';

const MyComponent = () => <Button>Tada!</Button>;

Development

Guidelines for new components

Start by creating a folder under src/ with the name of the component, e.g. <MyAwesomeComponent />:

src/
├── ...
├── components
│   ├── MyAwesomeComponent
│   │   ├── MyAwesomeComponent.css
│   │   ├── MyAwesomeComponent.mdx
│   │   ├── MyAwesomeComponent.test.tsx
│   │   ├── MyAwesomeComponent.tsx
├── index.tsx
└── ...

Conceptually, the component's style, implementation, tests & documentation are co-located in its own folder.

MyAwesomeComponent/MyAwesomeComponent.css Holds the component's style, directly imported in the implementation MyAwesomeComponent/MyAwesomeComponent.mdx Holds the component's documentation MyAwesomeComponent/MyAwesomeComponent.test.tsx Holds the component's tests - if applicable MyAwesomeComponent/MyAwesomeComponent.tsx Holds the component's implementation

If the component has a special (snowflake) case/variation, it's best advised to implement as separate component within the same folder (e.g. <Button /> and <IconButton />)

Consumption

Components

Import individual components from tailwind as you need them.

Styling

Taco uses tailwind, but does not process its css before exporting. It exports css with tailwind commands present - you must process the stylesheet with tailwind yourself.

Browser targeting, purging and minification should be performed by the consumer.

Your postcss config probably looks something like this:

module.exports = {
    plugins: ['tailwindcss', 'autoprefixer'],
};

Your tailwind.config.js should look something like this:

const tailwindConfig = require('@economic/taco/tailwind.config.js');

module.exports = {
    presets: [require('@economic/taco/tailwind.config.js'))],
    content: {
        files: ['../src/**/*.{mdx,tsx}', './node_modules/@economic/taco/dist/taco.esm.js'],
    },
};

You should then import the taco stylesheet in your application:

import '@economic/taco/dist/index.css';