mainstack-design-system 0.5.2 → 0.5.4

package/README.md

@@ -1,9 +1,18 @@
-<!-- @format -->
-
-# Mainstack Design System
-
-This is a component library for the Mainstack Design System. It is built with React, Typescript and Chakra UI
-
+<!--@@joggrdoc@@-->
+<!-- @joggr:version(v2):end -->
+<!-- @joggr:warning:start -->
+<!-- 
+  _   _   _    __        __     _      ____    _   _   ___   _   _    ____     _   _   _ 
+ | | | | | |   \ \      / /    / \    |  _ \  | \ | | |_ _| | \ | |  / ___|   | | | | | |
+ | | | | | |    \ \ /\ / /    / _ \   | |_) | |  \| |  | |  |  \| | | |  _    | | | | | |
+ |_| |_| |_|     \ V  V /    / ___ \  |  _ <  | |\  |  | |  | |\  | | |_| |   |_| |_| |_|
+ (_) (_) (_)      \_/\_/    /_/   \_\ |_| \_\ |_| \_| |___| |_| \_|  \____|   (_) (_) (_)
+                                                              
+This document is managed by Joggr. Editing this document could break Joggr's core features, i.e. our 
+ability to auto-maintain this document. Please use the Joggr editor to edit this document 
+(link at bottom of the page).
+-->
+<!-- @joggr:warning:end -->
 ## Storybook Documentation
 
 To view the design system documentation, visit this [link](https://mainstack-design-system.vercel.app/).
@@ -16,15 +25,14 @@ Install the design system
 
 Add the Design system provider to your root file
 
- ```
- import { MainstackProvider } from "mainstack-design-system";
+```typescript
+import { MainstackProvider } from "mainstack-design-system";
 
-  <MainstackProvider>
-   <App/>
+ <MainstackProvider>
+  <App/>
 </MainstackProvider>
 ```
 
-
 ## Components
 
 Components can be used by importing from the `'mainstack-design-system` directory. For example:
@@ -41,7 +49,7 @@ Icons are imported from the `'mainstack-design-system` directory. For example:
 
 Colors are imported from the `mainstack-design-system` directory. For example:
 
-```
+```typescript
  import {Colors} from "mainstack-design-system";
 
  <Text color={Colors.black300}>Hello World</Text>
@@ -51,45 +59,51 @@ Colors are imported from the `mainstack-design-system` directory. For example:
 
 Installing the application (as a developer) is simple in the following steps:
 
-- Access and Clone this repository
+* Access and Clone this repository
 
-```git
+```shell
 git clone git clone https://github.com/The-Mainstack/mainstack-design-system.git && cd [repo-name]
 ```
 
-- Make your forked repo the remote upstream (at origin)
+* Make your forked repo the remote upstream (at origin)
 
-```
-    git remote add origin https://github.com/The-Mainstack/mainstack-design-system.git
+```shell
+git remote add origin https://github.com/The-Mainstack/mainstack-design-system.git
 ```
 
-- Navigate into the cloned directory and install dependencies with Yarn
+* Navigate into the cloned directory and install dependencies with Yarn
 
-```yarn
+```typescript
 yarn add
 ```
 
-- Make a duplicate of the **env** file and update its content accordingly. Most times, this is just fine with no update.
+* Make a duplicate of the **env** file and update its content accordingly. Most times, this is just fine with no update.
 
-```sh
+```shell
 cp .env.sample .env
 ```
 
-- Run the app in the development mode.
-  Open [http://localhost:[port]](http://localhost:[port]) to view it in the browser and start developing.
+* Run the app in the development mode. Open [http://localhost:\[port\]](http://localhost:%5Bport%5D) to view it in the browser and start developing.
 
-```yarn
+```typescript
 yarn dev
 ```
 
 To run storybook, run the following command:
 
-```
+```typescript
 yarn storybook
 ```
 
 To Publish to NPM, run the following command:
 
-```
+```typescript
  npm publish --access public
 ```
+
+<!-- @joggr:editLink(b428f959-2d9d-45aa-8134-1d4f284d1469):start -->
+---
+<a href="https://app.joggr.io/app/documents/b428f959-2d9d-45aa-8134-1d4f284d1469/edit">
+  <img src="https://cdn.joggr.io/assets/static/badges/joggr-document-edit.svg?did=b428f959-2d9d-45aa-8134-1d4f284d1469" alt="Edit doc on Joggr" />
+</a>
+<!-- @joggr:editLink(b428f959-2d9d-45aa-8134-1d4f284d1469):end -->