@economic/taco NPM

@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';

@everything-registry/sub-chunk-276 @infinitebrahmanuniverse/nolb-_eco

9 months ago

10 months ago

10 months ago

10 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

10 months ago

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

10 months ago

10 months ago

1 year ago

11 months ago

11 months ago

11 months ago

10 months ago

11 months ago

1 year ago

1 year ago

1 year ago

12 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

11 months ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago