feat: add Getting Started documentation section (nexxtway#77)

* feat: add getting started section

* fix: move packages stories to `modules` section

* fix: fix example urls in cypress integration tests

* fix: fix `Usage` section example

* fix: fix sections content

* docs: fix documentation

* fix: details

Co-authored-by: Tahimi <[email protected]>
Co-authored-by: TahimiLeonBravo <[email protected]>

.storybook/main.js

@@ -1,7 +1,7 @@
 const path = require('path');
 
 module.exports = {
-    stories: ['../packages/**/*.story.(js|mdx)'],
+    stories: ['../getting-started/*.story.(js|mdx)', '../packages/**/*.story.(js|mdx)'],
     addons: [
         {
             name: '@storybook/addon-storysource',

cypress/integration/app/confirmModal.js

@@ -1,4 +1,4 @@
-const CONFIRM_MODAL_URL = '/iframe.html?id=app-stories-modals--show-confirm-modal-example';
+const CONFIRM_MODAL_URL = '/iframe.html?id=modules-app-stories-modals--show-confirm-modal-example';
 const BUTTON_ICON = 'button[data-id=button-icon-element]';
 const MODAL = 'section[aria-modal=true]';
 const MODAL_BUTTON = 'button[data-id=button-element]';

cypress/integration/app/sideBarNavigation.js

@@ -1,4 +1,4 @@
-const SIDEBAR_NAVIGATION_URL = '/iframe.html?id=app-stories--side-bar-navigation';
+const SIDEBAR_NAVIGATION_URL = '/iframe.html?id=modules-app-stories--side-bar-navigation';
 const NAVIGATION_ITEM = '[data-id="sidebar-item-clickable-element"]';
 
 describe('SideBarNavigation', () => {

cypress/integration/app/spinner.js

@@ -1,6 +1,6 @@
 const BUTTON = 'button[id="spinner-button"]';
 const SPINNER_BACKDROP = '[data-cy="app-spinner"]';
-const APP_SPINNER_URL = '/iframe.html?id=app-stories-spinners--circle-spinner';
+const APP_SPINNER_URL = '/iframe.html?id=modules-app-stories-spinners--circle-spinner';
 
 describe('App Spinner', () => {
     beforeEach(() => {

cypress/integration/auth/emailPasswordSignInForm.js

@@ -1,4 +1,4 @@
-const FORM_URL = '/iframe.html?id=auth-stories--basic-email-password-sign-in-form';
+const FORM_URL = '/iframe.html?id=modules-auth-stories--basic-email-password-sign-in-form';
 const BUTTON = 'button[type="submit"]';
 const SPINNER_BACKDROP = '[data-cy="app-spinner"]';
 const EMAIL_INPUT = 'input[name="email"]';

cypress/integration/auth/emailPasswordSignUpForm.js

@@ -1,4 +1,4 @@
-const FORM_URL = '/iframe.html?id=auth-stories--basic-email-password-sign-up-form';
+const FORM_URL = '/iframe.html?id=modules-auth-stories--basic-email-password-sign-up-form';
 const BUTTON = 'button[type="submit"]';
 const SPINNER_BACKDROP = '[data-cy="app-spinner"]';
 const NAME_INPUT = 'input[name="name"]';

getting-started/01-overview.story.mdx

@@ -0,0 +1,46 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import './css/global.css';
+import logo from './assets/rainbow-modules-logo.svg';
+import puzzle from './assets/puzzle.svg';
+import accesibility from './assets/accesibility.svg';
+import translation from './assets/translation.svg';
+
+<Meta title="Introduction|Getting Started/Overview" />
+
+<div>
+    <h1 class="page-title">
+        <img src={logo} width="65px" />
+        <span>rainbow-modules</span>
+    </h1>
+</div>
+
+Rainbow Modules includes a collection of components, fully integrated with [Firebase](https://firebase.google.com/), that will help you to build apps. Give it a hack and let us know what you think.
+
+<div align="center">
+
+[![React](https://badgen.net/badge/React/16.8.3/blue)](#)
+[![npm](https://badgen.net/badge/npm/8.31.0/blue)](#)
+[![dependencies](https://badgen.net/badge/dependencies/up%20to%20date/yellow)](#)
+[![devDependencies](https://badgen.net/badge/dev%20dependencies/up%20to%20date/green)](#)
+
+</div>
+
+## Installing from npm
+
+Rainbow modules are available as individual [npm packages](https://www.npmjs.com/search?q=@rainbow-modules).
+
+```bash
+// with npm
+$ npm install @rainbow-modules/<module> --save
+
+// or yarn
+$ yarn add @rainbow-modules/<module>
+```
+
+## Available Modules
+
+-   **@rainbow-modules/app**: is the main package. It contains components and helpers to build your apps.
+-   **@rainbow-modules/auth**: components for authentication purposes.
+-   **@rainbow-modules/hooks**: useful hooks for your components.
+-   **@rainbow-modules/validation**: a set of valitators for your forms.
+-   **@rainbow-modules/listview**:

getting-started/02-usage.story.mdx

@@ -0,0 +1,29 @@
+import { Meta, Preview } from '@storybook/addon-docs/blocks';
+import { RainbowFirebaseApp } from '@rainbow-modules/app';
+import { EmailPasswordSignUpForm } from '@rainbow-modules/auth';
+import { Container, Title, StyledCard } from './example';
+import { RainbowLogo } from '../packages/icons/src';
+import './css/global.css';
+
+<Meta title="Introduction|Getting Started/Usage" />
+
+# Usage
+
+Rainbow Modules is very simple and easy to use. Explore each module's documentation and play with examples.
+
+## Using rainbow-modules in your web app
+
+It’s easy to incorporate rainbow-modules into your web page. There are several
+runnable examples in this Git repo, but here's a small example:
+
+<Preview>
+    <RainbowFirebaseApp>
+        <Container>
+            <RainbowLogo />
+            <Title>rainbow-modules</Title>
+            <StyledCard>
+                <EmailPasswordSignUpForm />
+            </StyledCard>
+        </Container>
+    </RainbowFirebaseApp>
+</Preview>

getting-started/03-contributing.story.mdx

@@ -0,0 +1,41 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import './css/global.css';
+
+<Meta title="Introduction|Getting Started/Contributing" />
+
+# Contributing
+
+We are excited that you are interested in contributing to this project!
+
+## Get your git on
+
+You can help us improve _rainbow-modules_, the first step to begin
+collaborating is to create an issue before submitting a pull request,
+it's always good to file an issue, so we can discuss the details of
+your approach or suggestion.
+
+[Create an Issue Here.](https://github.com/nexxtway/rainbow-modules/issues/new/choose)
+
+## Discussions
+
+While using our components on your project and/or collaborating with
+the development of any of the rainbow-modules, you have
+suggestions for improvements, implementation questions, or any issues
+that may merit discussion. We recommend creating a “Discussions”
+issue type in Github.
+
+[Create an Discussion Here.](https://github.com/nexxtway/rainbow-modules/issues/new?assignees=&labels=discussion&template=discussion.md&title=)
+
+## Start contributing
+
+Feel free to contribute in rainbow-modules available in our repository in
+github. Pull requests are very welcome, but should be within the scope of the
+project. Before making your contribution go through the following steps:
+
+1. Fork the Rainbow Modules repository on Github.
+2. Clone your fork to your local machine git clone [email protected]:[yourname]/rainbow-modules.git
+3. Create a branch git checkout -b my-topic-branch
+4. Make your changes, lint, then push to GitHub with git push origin my-topic-branch
+5. Visit GitHub and make your pull request.
+
+[See more details about how to collaborate?](https://github.com/nexxtway/react-modules/blob/master/CONTRIBUTING.md)