feat: added docusaurus and morfeo logo

docs/.gitignore

@@ -0,0 +1,21 @@
+# Dependencies
+/node_modules
+/package-lock.json
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

docs/README.md

@@ -0,0 +1,33 @@
+# Website
+
+This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+
+## Installation
+
+```console
+yarn install
+```
+
+## Local Development
+
+```console
+yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+## Build
+
+```console
+yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+## Deployment
+
+```console
+GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

docs/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

docs/blog/2019-05-28-hola.md

@@ -0,0 +1,11 @@
+---
+slug: hola
+title: Hola
+author: Gao Wei
+author_title: Docusaurus Core Team
+author_url: https://github.com/wgao19
+author_image_url: https://avatars1.githubusercontent.com/u/2055384?v=4
+tags: [hola, docusaurus]
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

docs/blog/2019-05-29-hello-world.md

@@ -0,0 +1,17 @@
+---
+slug: hello-world
+title: Hello
+author: Endilie Yacop Sucipto
+author_title: Maintainer of Docusaurus
+author_url: https://github.com/endiliey
+author_image_url: https://avatars1.githubusercontent.com/u/17883920?s=460&v=4
+tags: [hello, docusaurus]
+---
+
+Welcome to this blog. This blog is created with [**Docusaurus 2 alpha**](https://docusaurus.io/).
+
+<!--truncate-->
+
+This is a test post.
+
+A whole bunch of other information.

docs/blog/2019-05-30-welcome.md

@@ -0,0 +1,13 @@
+---
+slug: welcome
+title: Welcome
+author: Yangshun Tay
+author_title: Front End Engineer @ Facebook
+author_url: https://github.com/yangshun
+author_image_url: https://avatars0.githubusercontent.com/u/1315101?s=400&v=4
+tags: [facebook, hello, docusaurus]
+---
+
+Blog features are powered by the blog plugin. Simply add files to the `blog` directory. It supports tags as well!
+
+Delete the whole directory if you don't want the blog features. As simple as that!

docs/docs/Introduction/dev-tool.mdx

@@ -0,0 +1,10 @@
+---
+sidebar_position: 4
+id: dev-tool
+title: Dev Tool 🚧
+description: Introduction > Dev Tool
+---
+
+:::caution
+🚧 This section is still under construction
+:::

docs/docs/Introduction/easy-to-test.mdx

@@ -0,0 +1,10 @@
+---
+sidebar_position: 6
+id: easy-to-test
+title: Easy to test 🚧
+description: Introduction > Easy to test
+---
+
+:::caution
+🚧 This section is still under construction
+:::

docs/docs/Introduction/extendible.mdx

@@ -0,0 +1,10 @@
+---
+sidebar_position: 5
+id: extendible
+title: Extendible 🚧
+description: Introduction > Extendible
+---
+
+:::caution
+🚧 This section is still under construction
+:::

docs/docs/Introduction/framework-agnostic.mdx

@@ -0,0 +1,57 @@
+---
+sidebar_position: 2
+id: framework-agnostic
+title: Framework Agnostic
+description: Introduction > Framework Agnostic
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+The goal of morfeo is to completely separate the _style_ of your App to its _business logic_, that's why it was made to be
+independent from any library or framework. To provide the best developer experience possible we already build a set of packages that will helps you to integrate Morfeo in your app, but if you want you can always to the [core](https://github.com/VLK-STUDIO/morfeo/tree/main/packages/core) API:
+
+<Tabs
+  defaultValue="react"
+  values={[
+    { label: 'React', value: 'react' },
+    { label: 'React Native', value: 'react-native' },
+    { label: 'Styled Components', value: 'styled-components' },
+    { label: 'Svelte', value: 'svelte' },
+    { label: 'Vanilla', value: 'vanilla' },
+  ]}
+>
+  <TabItem value="react">
+    With npm
+    <pre>npm i @morfeo/react</pre>
+    With yarn
+    <pre>yarn add @morfeo/react</pre>
+  </TabItem>
+  <TabItem value="react-native">
+    With npm
+    <pre>npm i @morfeo/native</pre>
+    With yarn
+    <pre>yarn add @morfeo/native</pre>
+  </TabItem>
+  <TabItem value="styled-components">
+    With npm
+    <pre>npm i styled-components @morfeo/web @morfeo/styled-components-web</pre>
+    With yarn
+    <pre>
+      yarn add styled-components @morfeo/web @morfeo/styled-components-web
+    </pre>
+  </TabItem>
+  <TabItem value="svelte">
+    With npm
+    <pre>npm i @morfeo/web @morfeo/svelte</pre>
+    With yarn
+    <pre>yarn add @morfeo/web @morfeo/svelte</pre>
+  </TabItem>
+  <TabItem value="vanilla">
+    With npm
+    <pre>npm i @morfeo/web</pre>
+    With yarn
+    <pre>yarn add @morfeo/web</pre>* You can use @morfeo/web with in any framework/library
+    thats works
+  </TabItem>
+</Tabs>

docs/docs/Introduction/getting-started.mdx

@@ -0,0 +1,113 @@
+---
+sidebar_position: 1
+id: getting-started
+title: Getting started with Morfeo
+description: Introduction > Getting started
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+Morfeo it's a tool to build design systems based on a theme.
+
+It helps you to _follow a design language_ and write consistent UIs, whatever it is the framework of your choice.
+
+It's easy to use and, with the **browser extension**, your theme and your components are automatically documented.
+
+## Features
+
+- [Framework Agnostic](./framework-agnostic)
+- [Single source of truth](./single-source-of-truth.mdx)
+- [Dev Tool](./dev-tool.mdx)
+- [Extendible](./extendible.mdx)
+- [Easy to test](./easy-to-test.mdx)
+
+## How it works
+
+The main concepts around morfeo are 2 entities, **theme** and **parsers**:
+
+`theme` it's an handler that contains the **design language** of your application, for example a set of colors, spacings, shadows, sizes and gradients, and the base style of your components.
+
+An example of theme could be the following:
+
+```typescript
+import { theme } from '@morfeo/core';
+
+const defaultTheme = {
+  color: {
+    primary: '#000',
+    secondary: '#e3e3e3',
+    danger: '#eb2f06',
+    success: '#78e08f',
+    warning: '#fa983a',
+  },
+  space: {
+    xxs: '8px',
+    xs: '16px',
+    s: '24px',
+    m: '32px',
+    l: '40px',
+    xl: '48px',
+    xxl: '56px',
+  },
+  components: {
+    Button: {
+      style: {
+        color: 'primary',
+        padding: 's',
+      },
+    },
+  },
+};
+
+// From now on the theme will be available in all your application
+theme.set(defaultTheme);
+
+console.log(theme.get()); // will log an object equals to `defaultTheme`
+console.log(theme.getValue('colors', 'primary')); // will log #000
+```
+
+Once you have a centralized theme, you need to parse this theme to generate the style for your components an layouts, here is where the `parsers` handler start to play!
+
+This is an example with React
+
+```tsx
+import { theme, parsers } from '@morfeo/core';
+
+function Button() {
+  const style = parsers.resolve({ componentName: 'Button' });
+
+  return <button style={style}>Click me</button>;
+}
+```
+
+Or if you want, you can use the hooks inside the package `@morfeo/hooks`
+
+```tsx
+import { theme } from '@morfeo/core';
+import { useStyle } from '@morfeo/hooks';
+
+function Button() {
+  const style = useStyle({ componentName: 'Button' });
+
+  return <button style={style}>Click me</button>;
+}
+```
+
+The value of `style` will be in this example equals to:
+
+```json
+{
+  "color": "#000",
+  "padding": "16px"
+}
+```
+
+## Motivations
+
+When your application starts to grow, maintain UI consistency it's not easy.
+Even in popular applications we often face **wrong typographies**, different **color pallettes** used across different pages or inconsistent **spacings** in each component.
+
+These problems are even more frequent in large applications where different teams works on different features (maybe with different technologies and frameworks).
+
+**morfeo** solves this problem by sharing across all the application a customizable `theme` that contains the "language" of the application design and a `parser` that generate styles based on this language, in this way the UIs an the components are always consistent.

docs/docs/Introduction/single-source-of-truth.mdx

@@ -0,0 +1,32 @@
+---
+sidebar_position: 3
+id: single-source-of-truth
+title: Single source of truth
+description: Introduction > Single source of truth
+---
+
+import { ThemeSelect } from '../../src/components';
+
+### Single source of truth
+
+The main concept of morfeo is the theme, this object contains the **design language** of your application.
+
+All the style generated by morfeo is stronly dependent on this object, this will ensure that **every components is following the style guides**, for example this style:
+
+```typescript title="style object"
+const style = {
+  padding: 's',
+  bg: 'primary.300',
+  borderRadius: 'm',
+};
+```
+
+Will be converted in a different CSS-in-JS object depending on how you configure your theme:
+
+<ThemeSelect style={{ padding: 's', bg: 'primary.300', borderRadius: 'm' }} />
+
+---
+
+:::info
+If you have already installed the dev tool, check it to see how it changes every time you apply a different theme
+:::