From e549a821ccdd02386809a4ff74b75549ed7fc579 Mon Sep 17 00:00:00 2001
From: Serge Ilyashenko <age_bookend_0j@icloud.com>
Date: Fri, 13 Sep 2024 22:00:01 +0200
Subject: [PATCH] feat(homepage): -react-simple-pie documentation

---
 .../docs/getting-started/react-simple-pie.mdx | 54 ++++++++++++++++++-
 .../docs/react-simple-pie/installation.mdx    | 17 ------
 .../content/docs/simple-pie/installation.mdx  | 17 ------
 3 files changed, 53 insertions(+), 35 deletions(-)
 delete mode 100644 apps/homepage/src/content/docs/react-simple-pie/installation.mdx
 delete mode 100644 apps/homepage/src/content/docs/simple-pie/installation.mdx

diff --git a/apps/homepage/src/content/docs/getting-started/react-simple-pie.mdx b/apps/homepage/src/content/docs/getting-started/react-simple-pie.mdx
index a848cb3..54071a1 100644
--- a/apps/homepage/src/content/docs/getting-started/react-simple-pie.mdx
+++ b/apps/homepage/src/content/docs/getting-started/react-simple-pie.mdx
@@ -2,7 +2,15 @@
 title: Installation
 description: How to install react-simple-pie npm package
 ---
-import { Code, Tabs, TabItem } from '@astrojs/starlight/components';
+import { Aside, Code, Tabs, TabItem } from '@astrojs/starlight/components';
+
+`react-simple-pie` creates simple svg pie and doughnut charts for infographics like graphs and others in react applications.
+
+<Aside>
+  If you are going to use simple diagram in not react project, please use [simple-pie](/getting-started/simple-pie).
+</Aside>
+
+## Installation
 
 <Tabs>
   <TabItem label="npm" icon="seti:npm">
@@ -15,3 +23,47 @@ import { Code, Tabs, TabItem } from '@astrojs/starlight/components';
     <Code code="yarn add react-simple-pie" lang="bash" />
   </TabItem>
 </Tabs>
+
+## Usage
+
+```js
+import React from 'react';
+import {SimplePie, SimpleDoughnut} from "react-simple-pie"
+
+export default function YourComponent() {
+  return (
+    <section>
+      <div style={{width: 200, height: 200}}>
+        <SimpleDoughnut values={[1, 2, 1, 2]} />
+      </div>
+      <div style={{width: 200, height: 200}}>
+        <SimpleDoughnut values={[1, 1, 1]} borderWidth={4} borderColor="green" />
+      </div>
+    </section>
+  );
+}
+```
+
+<Aside type="tip">
+  The svg `height` and `width` are `100%`, so it trys to extend itself to available space.
+  Thus, you should have wrapper with dimensions for your simple-pie diagram.
+</Aside>
+
+## Interface
+
+```ts
+export type TPieProps = {
+  values: number[];
+  palette?: string[];
+  borderColor?: string;
+  borderWidth?: number;
+};
+
+export type TDoughnutProps = TPieProps & {
+  innerRadius?: number; // 0..1 - percent from outer radius
+};
+```
+
+## Examples
+
+TBD
diff --git a/apps/homepage/src/content/docs/react-simple-pie/installation.mdx b/apps/homepage/src/content/docs/react-simple-pie/installation.mdx
deleted file mode 100644
index a848cb3..0000000
--- a/apps/homepage/src/content/docs/react-simple-pie/installation.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
----
-title: Installation
-description: How to install react-simple-pie npm package
----
-import { Code, Tabs, TabItem } from '@astrojs/starlight/components';
-
-<Tabs>
-  <TabItem label="npm" icon="seti:npm">
-    <Code code="npm install react-simple-pie --save" lang="bash" />
-  </TabItem>
-  <TabItem label="pnpm" icon="pnpm">
-    <Code code="pnpm add react-simple-pie" lang="bash" />
-  </TabItem>
-  <TabItem label="yarn" icon="seti:yarn">
-    <Code code="yarn add react-simple-pie" lang="bash" />
-  </TabItem>
-</Tabs>
diff --git a/apps/homepage/src/content/docs/simple-pie/installation.mdx b/apps/homepage/src/content/docs/simple-pie/installation.mdx
deleted file mode 100644
index 3830332..0000000
--- a/apps/homepage/src/content/docs/simple-pie/installation.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
----
-title: Installation
-description: How to install simple-pie npm package
----
-import { Code, Tabs, TabItem } from '@astrojs/starlight/components';
-
-<Tabs>
-  <TabItem label="npm" icon="seti:npm">
-    <Code code="npm install simple-pie --save" lang="bash" />
-  </TabItem>
-  <TabItem label="pnpm" icon="pnpm">
-    <Code code="pnpm add simple-pie" lang="bash" />
-  </TabItem>
-  <TabItem label="yarn" icon="seti:yarn">
-    <Code code="yarn add simple-pie" lang="bash" />
-  </TabItem>
-</Tabs>