docs: add core documentation (#378)

* docs: add documentation

* fix: review fixes

.eslintignore

@@ -1,3 +1,4 @@
 build
 node_modules
 src/i18n/keysets
+documentation/babel.config.js

documentation/.editorconfig

@@ -0,0 +1,13 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[{*.json,*.yml,*.md}]
+indent_style = space
+indent_size = 2

documentation/.gitignore

@@ -0,0 +1,16 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.vscode
+.idea
+
+npm-debug.log*

documentation/README.md

@@ -0,0 +1,26 @@
+# Documentation
+
+### Installation
+
+```bash
+npm run docs:deps
+```
+
+### Development
+
+Each locale has its own command for starting due to Docusaurus [limitations](https://docusaurus.io/docs/i18n/tutorial#start-your-site).
+
+```bash
+# en locale
+npm run docs:start
+# ru locale
+npm run docs:start:ru
+```
+
+### Serve
+
+Check built documentation locally.
+
+```bash
+npm run docs:serve
+```

documentation/babel.config.js

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

documentation/docs/about.md

@@ -0,0 +1,13 @@
+---
+sidebar_position: 1
+---
+
+# About
+
+ChartKit is a high-level library used to create visualizations powered by React.
+
+:::note
+
+The page is under development.
+
+:::

documentation/docs/get-started.mdx

@@ -0,0 +1,142 @@
+---
+sidebar_position: 2
+---
+
+# Get started
+
+## Installation
+
+```bash
+npm i @gravity-ui/chartkit @gravity-ui/uikit
+```
+
+:::info
+
+Installing the `@gravity-ui/uikit` package is necessary because `ChartKit` uses some common components and the `ThemeProvider` context to organize color scheme styles.
+
+:::
+
+## Usage
+
+Let's build a simple bar chart and look at the general basics when working with `ChartKit`. In order for `ChartKit` to know which [plugins](./plugins/concept) can be used, they must be registered:
+```js
+import {settings} from "@gravity-ui/chartkit";
+import {D3Plugin} from "@gravity-ui/chartkit/d3";
+
+settings.set({plugins: [D3Plugin]});
+```
+
+Next, you need to import common styles from the package `@gravity-ui/uikit` in order for the color schemes to work:
+```js
+import {settings} from "@gravity-ui/chartkit";
+import {D3Plugin} from "@gravity-ui/chartkit/d3";
+// highlight-next-line
+import "@gravity-ui/uikit/styles/styles.css";
+
+settings.set({plugins: [D3Plugin]});
+```
+
+Add a simple configuration and some data for rendering:
+
+```js
+import {settings} from "@gravity-ui/chartkit";
+import {D3Plugin} from "@gravity-ui/chartkit/d3";
+// highlight-next-line
+import type {D3WidgetData} from "@gravity-ui/chartkit/d3";
+import "@gravity-ui/uikit/styles/styles.css";
+
+settings.set({plugins: [D3Plugin]});
+
+// highlight-start
+const data: D3WidgetData["data"] = {
+  series: {
+    data: [
+      {
+        type: "bar-x",
+        name: "Line series",
+        data: [
+          {x: "Apples", y: 3},
+          {x: "Oranges", y: 1},
+          {x: "Grapes", y: 2},
+        ],
+      },
+    ],
+  },
+  xAxis: {
+    type: "category",
+    categories: ["Apples", "Oranges", "Grapes"],
+  },
+  yAxis: [
+    {
+      ticks: {
+        pixelInterval: 50,
+      },
+    },
+  ],
+};
+// highlight-end
+```
+
+Add a React component:
+
+```js
+// highlight-next-line
+import {ThemeProvider} from "@gravity-ui/uikit";
+// highlight-next-line
+import ChartKit, {settings} from "@gravity-ui/chartkit";
+import {D3Plugin} from "@gravity-ui/chartkit/d3";
+import type {D3WidgetData} from "@gravity-ui/chartkit/d3";
+import "@gravity-ui/uikit/styles/styles.css";
+
+settings.set({plugins: [D3Plugin]});
+
+const data: D3WidgetData["data"] = {
+  series: {
+    data: [
+      {
+        type: "bar-x",
+        name: "Line series",
+        data: [
+          {x: "Apples", y: 3},
+          {x: "Oranges", y: 1},
+          {x: "Grapes", y: 2},
+        ],
+      },
+    ],
+  },
+  xAxis: {
+    type: "category",
+    categories: ["Apples", "Oranges", "Grapes"],
+  },
+  yAxis: [
+    {
+      ticks: {
+        pixelInterval: 50,
+      },
+    },
+  ],
+};
+
+// highlight-start
+function App() {
+  return (
+    <ThemeProvider theme="system">
+      <div className="app" style={{height: 400}}>
+        <ChartKit type="d3" data={data} />
+      </div>
+    </ThemeProvider>
+  );
+}
+
+export default App;
+// highlight-end
+```
+
+Result:
+
+<iframe
+    src="https://codesandbox.io/embed/jcpckq?view=Editor+%2B+Preview&module=%2Fsrc%2FApp.tsx"
+    className="codesandbox"
+    title="Quick start example"
+    sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+></iframe>

documentation/docs/plugins/_category_.json

@@ -0,0 +1,6 @@
+{
+  "position": 3,
+  "link": {
+    "type": "generated-index"
+  }
+}

documentation/docs/plugins/built-in/_category_.json

@@ -0,0 +1,6 @@
+{
+  "position": 2,
+  "link": {
+    "type": "generated-index"
+  }
+}

documentation/docs/plugins/built-in/d3.md

@@ -0,0 +1,11 @@
+---
+sidebar_position: 1
+---
+
+# D3 plugin
+
+:::note
+
+The page is under development.
+
+:::

documentation/docs/plugins/built-in/yagr.md

@@ -0,0 +1,11 @@
+---
+sidebar_position: 2
+---
+
+# Yagr plugin
+
+:::note
+
+The page is under development.
+
+:::

documentation/docs/plugins/concept.md

@@ -0,0 +1,16 @@
+---
+sidebar_position: 1
+---
+
+# The concept
+
+## What are plugins?
+
+ChartKit uses ready-made solutions for rendering visualizations, combining them with a single interface. In terms of ChartKit, such solutions are called plugins. The code describing the plugins is located outside the index file in order to be delivered to the end user only at the time of mounting the ChartKit component.
+
+## Types of plugins
+
+There are two types of plugins:
+
+- [Built-in plugins](../category/built-in) that come with ChartKit
+- [External plugins](./external), which users can describe from their side and connect in their code

documentation/docs/plugins/external.md

@@ -0,0 +1,11 @@
+---
+sidebar_position: 3
+---
+
+# External plugins
+
+:::note
+
+The page is under development.
+
+:::