APPA - Design System

Appa is a web application in progress of development, created and designed by Minic Studio.

Currently finished design system elements can be found in this link.

Content

The design elements are grouped in three categories:

1. Materials
2. Components
3. Organizations

1. Materials are the core elements, the 'atoms' of the design system. These are the colors, shadows, line heights and font weights used through the project.

2. Components are a variety of small building blocks with different use case options. We also call them 'molecules'.

3. Organizations are bigger modules used through the application that contains multiple pieces of components. These modules may have some kind of functionality added to them, available to test in the design system.

Installation

Download or clone the code from the develop branch. Install all the dependencies:

npm install

This may take a few minutes...

After it's done, you can run the storybook of all the elements created:

npm run storybook

If You would like to create standalone version of the storybook then:

npm run build-storybook

Development

Anytime your pull request is accepted by a superior the new content created is pushed into the develop branch. This is the main branch used by developers. If you are ready to publish the newer version of the design system, you have to check a few things before.

• Ask for collaborator role! Since the npm package is scoped, which means it is hidden from the public, only collaborators can publish changes.
• Test the package locally! You can test your package with a simple CRA project and see if the imported components behave as it is awaited. - Create a react app in the same folder where the design-system was placed - Run npm pack ../design-system to create a locally usable npm package - Install the freshly packed .tgz file with npm i [filename].tgz, which now can be found inside your node_modules
• Edit version number! Inside the package.json file in the main directory, you must edit the version number consistently. - Find the "version": "x.x.xx" in the second line - If you made major changes, than edit the first x. If you made minor changes, then edit the second x, else as a patch edit, you have to edit the last one or two x's - For more information about these specifications, read the Semantic versioning documentation.
• Check import / exports! Inside the src/components/ directory you can find the index.js. This file is responsible to collect all the components then export them for further use. If you have created a new component, please do not forget to import then export!

Publishing

If you are ready to publish your changes, first, you have to login with your npm credentials. Open the terminal from the design-system folder and type npm whoami, to check your login status. If you are not logged in then you must type npm login and followed by instructions, type your information.

Run npm run compile in the terminal to create the compatible build of your code.

Finally with npm publish you are ready to go!