From fb168b434ce4577f58ea1ebc11f743a67cb73d8c Mon Sep 17 00:00:00 2001
From: joostdecock <joost@joost.at>
Date: Sun, 11 Feb 2024 17:26:39 +0100
Subject: [PATCH] chore(markdown): Added react-components docs

---
 markdown/dev/reference/packages/i18n/en.md    | 76 -------------------
 .../reference/packages/react-components/en.md | 38 ++++++++++
 2 files changed, 38 insertions(+), 76 deletions(-)
 delete mode 100644 markdown/dev/reference/packages/i18n/en.md
 create mode 100644 markdown/dev/reference/packages/react-components/en.md

diff --git a/markdown/dev/reference/packages/i18n/en.md b/markdown/dev/reference/packages/i18n/en.md
deleted file mode 100644
index dec62193574..00000000000
--- a/markdown/dev/reference/packages/i18n/en.md
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: i18n
----
-
-Published as [@freesewing/i18n][1], this package provides translations
-for the FreeSewing project.
-
-## Languages
-
-We currently provide translations in the following languages:
-
- - English
- - German
- - Spanish
- - French
- - Dutch
- - Ukrainian
-
-## How to use these translations
-
-We use these translations in our [repository](https://github.com/freesewing/freesewing)
-to translate react components with [react-intl](https://github.com/formatjs/formatjs/tree/main/packages/react-intl):
-
-```js
-import { strings } from "@freesewing/i18n";
-import { IntlProvider } from "react-intl";
-
-class Base extends React.Component {
-  render() {
-    const { language } = this.props;
-
-    return (
-      <IntlProvider locale={language} messages={strings[language]}>
-        {...children}
-      </IntlProvier>
-    )
-  }
-}
-```
-
-Now all components below will be able to translate messages:
-
-```js
-import React from "react";
-import { FormattedMessage } from "react-intl";
-
-const Example = props => {
-  return <p><FormattedMessage id={"app.aboutFreesewing"} /></p>
-};
-
-export default Example;
-```
-
-For all details, please refer to
-[the react-intl documentation](https://formatjs.io/docs/react-intl).
-
-We also use it in our backend to translate the emails we send out to users.
-
-## Installation
-
-```sh
-npm install @freesewing/i18n
-```
-
-## Notes
-
-This package provides the translations, but it does not provide the
-mechanism for translation.
-For that, you can use our [plugin-i18n](/reference/plugins/i18n) plugin.
-
-<Related compact>
-To learn more about using translations in a design, see the
-[Translation guide](/guides/translation/)
-</Related>
-
-[1]: https://www.npmjs.com/package/@freesewing/i18n
diff --git a/markdown/dev/reference/packages/react-components/en.md b/markdown/dev/reference/packages/react-components/en.md
new file mode 100644
index 00000000000..99a57af29a2
--- /dev/null
+++ b/markdown/dev/reference/packages/react-components/en.md
@@ -0,0 +1,38 @@
+---
+title: react-components
+---
+
+Published as [@freesewing/react-components][1], this package provides
+various React components to render FreeSewing patterns, as well as 
+some utilities to facilitate frontend integration.
+
+## Exports
+
+FreeSewing uses named exports, and below is a list of all exports:
+
+- `Pattern`: Renders a FreeSewing pattern
+- `Svg`: Renders the svg section of a FreeSewing pattern
+- `Defs`: Renders the defs of a FreeSewing pattern
+- `Group`: Renders an SVG group of a FreeSewing pattern
+- `Stack`: Renders a stack of a FreeSewing pattern
+- `Part`: Renders a part of a FreeSewing pattern
+- `Point`: Renders a point of a FreeSewing pattern
+- `Path`: Renders a path of a FreeSewing pattern
+- `Snippet`: Renders a snippet of a FreeSewing pattern
+- `Grid`: Renders the grid of a FreeSewing pattern
+- `Text`: Renders text of a FreeSewing pattern
+- `TextOnPath`: Renders text on path of a FreeSewing pattern
+- `PatternXray`: Renders the Xray/inspector variant of a FreeSewing pattern
+- `utils`: A plain object holding the following utilities:
+  - `getProps`
+  - `withinPartBounds`
+  - `getId`
+  - `translateStrings`
+
+## Installation
+
+```sh
+npm install @freesewing/react-components
+```
+
+[1]: https://www.npmjs.com/package/@freesewing/react-components