@economic/gaudi

UI React component library

Usage

npm install @economic/gaudi

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

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

Gaudi uses tailwind, and compiles and purges css for its components and base styles only. It exports that css and the tailwind config.

It is expected that consumers of Gaudi use the distributed tailwind config so that they inherit the appropriate design and style recommendations from the Gaudi design system, and import the Gaudi component css themselves to include the predefined classes for each component. Browser targeting, purging and minification should be performed by the consumer. Your tailwind.config.js might look something like this:

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

module.exports = {
    ...tailwindConfig,
    target: 'ie11',
    purge: {
        content: ['./src/**/*.tsx', './node_modules/@economic/gaudi/dist/gaudi.esm.js'],
    },
};

And your base styles might look like this:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import '../node_modules/@economic/gaudi/dist/index.css';

The generated Gaudi css is not targeted at any specific browser, so if support for older browsers such as IE11 if required the consuming application should target and post-process it's css (which should now include the Gaudi css) to remove unsupported features (such as css custom properties).