Introduction to Empiricus Design System

Empiricus Design System is an npm package that offers a comprehensive design system for building intuitive user interfaces. This library provides a collection of reusable UI components, styles, and guidelines to streamline the development of consistent and visually appealing applications. With Empiricus Design System, you can efficiently create beautiful interfaces that adhere to established design principles and best practices. Explore our documentation and unleash the power of a robust design system in your projects!

Running Storybook Documentation

To view and interact with our Storybook documentation, run the following command:

npm run storybook

This command will start a local development server hosting Storybook. Open your web browser and go to http://localhost:6006 to see the Storybook documentation.

Interacting with Storybook

Once Storybook is running, you can navigate through the different components and variations documented in the Storybook interface. Use this environment to explore and understand the available UI components and their behavior.

Stopping Storybook

To stop the Storybook server, use Ctrl + C in the terminal where Storybook is running. This will shut down the server and return you to the command prompt.

Recommended IDE Setup

• VS Code + Vue - Official (previously Volar) and disable Vetur

Component creation automation

• To automate the proccess of component creation, we're using the library Hygen.
• Create a new component structure using the command npm run hygen component new ${ComponentName}
• Remember to always write the component name using CamelCase (it will be converted to kebab case when needed)
• If you need to add another automation rule, check the docs on Hygen