@economic/taco

UI React component library

Usage

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

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

Installing @economic/taco

npm install --save @economic/taco

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 you, the consumer.

Your postcss config probably looks something like this:

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

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

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

You should then import the tailwind and taco stylesheet in your application:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import '@economic/taco/taco.css';
@import 'tailwindcss/utilities';

PostCSS Configuration

Important: This design system requires postcss-import to function properly.

The design system uses @import statements instead of the @tailwind directive because of the postcss-import plugin. This is necessary to avoid issues when importing additional CSS files.

Setup Requirements

• postcss-import is required for proper CSS import handling

Development

Guidelines for new components

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

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

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

MyAwesomeComponent/__stories__/MyAwesomeComponent.mdx Holds the component's documentation MyAwesomeComponent/__stories__/MyAwesomeComponent.dev.stories.tsx Holds the component's development storybook stories MyAwesomeComponent/__stories__/MyAwesomeComponent.stories.tsx Holds the component's stories for use in documentation MyAwesomeComponent/MyAwesomeComponent.css Holds the component's style, directly imported in the implementation 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 />)