Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@economic/gaudi
Advanced tools
UI React component library
npm install @economic/gaudi
import { Button } from '@economic/gaudi';
const MyComponent = () => <Button>Tada!</Button>;
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 />
)
Import individual components from tailwind as you need them.
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).
FAQs
> TODO: description
We found that @economic/gaudi demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.