@aherrahul/design-system

A design system built by Rahul Aher using storybook and Vue components

RDS Design System is an open source tool for building UI Design Systems with Vue.js, It provides you and your team a set of organized tools, patterns & practices that work as the foundation for your application development.

The tool is built on top of Vue.js, Vue storybook, Webpack, and is aimed for designers and front-end developers who have at least basic knowledge of component based workflows + HTML, SCSS & JavaScript.

Made by @aherrahul and other contributors. See also the official website of RDS Design System and read my article on the How to use RDS design system

Features

A set of interconnected patterns & practices for you and your team.
A well thought-out terminology, naming conventions, and hierarchy.
Get an automated overview of how your design system progresses over time.
Automatic generation of living, user editable documentation.
Easily export and use your Design System as an NPM dependency in another Vue.js or Nuxt.js project.
Create a token, an element, or a pattern, and it’s immediately available across all components.
Pre-configured Prettier setup for auto-formatting code on both save and before commit.
Live Reloading, Autoprefixing, SCSS, and helper functions + simple and sane defaults for SVG and Webfont usage out-of-the-box.
Documentation and the app logic are separated, so you can have public docs while the app itself stays private.
And more…

Documentation

Getting Started: How to install and run Vue Design System.
Cores: Colors are important for identifying our product, in addition to helping to create consistent experiences across our solutions.
Typography: RDS's default typography is Satoshi. We use the Satoshi variable with OpenType resources.
Font Weight: Font weight is a typographic token that can be used to change the default value of the typographic scale weight and add emphasis to certain text or phrase.
Spacing: Spacing tokens are an essential part of building interfaces using RDS.

etc.

Examples

Installation

Add this package to your project:

npm i @aherrahul/design-system;

Import the style.css for general styling like fonts, etc. in the root file of your application or in you root styling file.

import '@aherrahul/design-system/dist/style.css';

To use RDS, import the library into your entry point, it will probably be your main.js or app.js:

import RDS from "@aherrahul/design-system";

And install RDS:

Vue.use(RDS);

Development

These guides are useful if you want to contribute this component library.

Project setup

npm install

Compiles and hot-reloads for development

npm run storybook

Compiles and minifies for production

npm run build-storybook

Run your interaction tests (running Storybook instance is needed)

npm run test

Lints and fixes files

npm run lint

Build the bundled component library

npm run build-vue

Writing interaction tests

All interaction tests are written in component-name.interactive.stories.js files. The title needs to be prefixed with Interaction Tests/. These interaction tests are hidden in the final build but are visible in the Storybook development watcher.

Example:

import meta from "./rds-button.stories";

export default {
 ...meta,
 title: "Interaction Tests/base/rds-button",
 component: RdsButton,
};

Writing visual tests

Stories for visual tests need to start with VisualTest.

Example:

import { describe, test, expect } from 'vitest';
import ActionBar from '../components/ActionBar.vue';
import { mount } from '@vue/test-utils';

const actions = ['Button1', 'Button2', 'Button3'];

describe('ActionBar snapshot test', () => {
	test('renders correctly', async () => {
		const wrapper = mount(ActionBar, {
			props: {
				show: true,
				actions,
			}
		});

		expect(wrapper.html()).toMatchSnapshot();
	});
});

The screenshot will be generated at the end of the Play function. If no Play function is defined then it will be created immediatly.

For reduced flakiness all animations are automatically disabled from Playwright.

Roadmap

See Roadmap tag in the issues.

Changelog

is the latest release.
See Releases page for the full changelog.

Need more help?

About to get started with a new design system? I’m an independent designer and developer, specialized in helping companies to build design systems. You can also contact me via Link and schedule a meeting with me. Let’s talk!

Authors and License

Rahul Aher.

Licensed under the MIT license.