Changes to documentation (#2209)

* refactored Storybook UI

* refactored Storybook UI

* removed extra cards from the doc, added card for ui components

* added hover behavior to doc page & made it look selected

* separate storybook docs and tests

* separating storybook tests and docs

* fixed spelling errors in docs

* Final round of edits for frontend, added backend folder architecture

* Created CODE_OF_CONDUCT.md

* Add code of conduct to contributing.md

* doc changes

* fixed broken links

* doc addition and changes

* introduce user guide & graphql api

docs/docs/developer/graphql_api.mdx

@@ -0,0 +1,25 @@
+---
+title: GraphQL API
+sidebar_position: 2
+sidebar_custom_props:
+  icon: TbBrandGraphql
+---
+
+Use our [in-browser GraphiQL app](https://docs.twenty.com/graphql/) to browse, query, and mutate our introspection query. 
+
+## What is GraphQL?
+
+GraphQL is a query language for APIs that enables declarative data fetching that allows a client to specify exactly what data it needs from the API.
+
+Instead of exposing various endpoints that return fixed data strcutures, GraphQL exposes only a single endpoint that precisely returns the data that the client asked for. This makes GraphQL more flexible and efficient than other kinds of APIs, like REST APIs. 
+
+To learn more about GraphQL, we recommend going through this [Introduction](https://www.howtographql.com/basics/0-introduction/).
+
+## About GraphQL Introspection
+
+GraphQL query language is strongly typed, which makes it possible for you to query and understand the underlying schema. 
+
+With the Introspection feature, you can query the schema and discover the queries (to request data), mutations (to modify data), types, and fields available in a particular GraphQL API.
+
+## Try Our GraphQL Playground
+Use our browser-based, interactive [GraphQL playground](https://docs.twenty.com/graphql/) to run mutations and queries to discover valid fields and where you can use them.   

docs/docs/developer/overview.mdx

@@ -1,10 +0,0 @@
----
-title: Overview
-sidebar_position: 1
-sidebar_class_name: coming-soon
-sidebar_custom_props:
-  icon: TbArticle
----
-
-
-Soon you'll be able to use our REST APIs to extend the app based on your needs.

docs/docs/developer/rest_api.mdx

@@ -0,0 +1,9 @@
+---
+title: Rest API
+sidebar_position: 3
+sidebar_class_name: coming-soon
+sidebar_custom_props:
+  icon: TbApi
+---
+
+Coming soon!

docs/docs/user-guide/_category_.json

@@ -0,0 +1,4 @@
+{
+  "label": "User Guide",
+  "position": 3
+}

docs/docs/user-guide/custom objects.mdx

@@ -0,0 +1,9 @@
+---
+title: Custom Objects
+sidebar_position: 1
+sidebar_class_name: coming-soon
+sidebar_custom_props:
+  icon: TbAugmentedReality
+---
+
+Coming soon!

docs/docs/user-guide/glossary.mdx

@@ -1,6 +1,6 @@
 ---
 title: Glossary
-sidebar_position: 2
+sidebar_position: 3
 sidebar_custom_props:
   icon: TbVocabulary
 ---

docs/docs/user-guide/user-guide.mdx

@@ -0,0 +1,11 @@
+---
+title: User Guide
+displayed_sidebar: userSidebar
+sidebar_class_name: hidden
+sidebar_position: 0
+sidebar_custom_props:
+  icon: TbUsers
+  isSidebarRoot: true
+---
+
+Coming soon!

docs/docs/user-guide/zapier integration.mdx

@@ -0,0 +1,9 @@
+---
+title: Zapier tutorial
+sidebar_position: 2
+sidebar_class_name: coming-soon
+sidebar_custom_props:
+  icon: TbBrandZapier
+---
+
+Coming soon!

docs/docusaurus.config.js

@@ -73,8 +73,8 @@ const config = {
             position: "left",
           },
           {
-            to: "/graphql/",
-            label: "GraphQL Playground",
+            to: "/user-guide",
+            label: "User Guide",
             position: "right",
           },
           {

docs/sidebars.js

@@ -25,7 +25,7 @@ const backToHomeLink = {
 
 /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
 const sidebars = {
-  docsSidebar: [{ type: "autogenerated", dirName: "." }],
+  docsSidebar: [{ type: "autogenerated", dirName: ".",  }],
   frontendSidebar: [
     backToHomeLink,
     { type: "autogenerated", dirName: "contributor/frontend" },
@@ -34,6 +34,10 @@ const sidebars = {
     backToHomeLink,
     { type: "autogenerated", dirName: "contributor/server" },
   ],
+  userSidebar:[
+    backToHomeLink,
+    { type: "autogenerated", dirName: "user-guide", },
+  ]
 };
 
 module.exports = sidebars;

docs/src/css/custom.css

@@ -280,4 +280,9 @@ a.table-of-contents__link:hover{
 [data-theme='dark'] .header-github-link::before {
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
     no-repeat;
+}
+
+
+.hidden {
+display: none !important;
 }

docs/src/theme/icons.js

@@ -35,4 +35,7 @@ export {
   TbRocket,
   TbAugmentedReality,
   TbTerminal,
+  TbBrandGraphql,
+  TbApi,
+  TbUsers,
 } from "react-icons/tb";