Launch blog (#153)

* react lib docs v0.1

* react lib launch blog article

* add code example

* add wrapper docs

Co-authored-by: knugget <johannes@knugget.de>

apps/formbricks-com/pages/blog/react-form-library-launch/index.mdx

@@ -0,0 +1,62 @@
+import Image from "next/image";
+import LayoutMdx from "@/components/shared/LayoutMdx";
+import LaunchDay from "./launch react library form builder survey with multi-step form open-source.png";
+import MdxTryItCTA from "@/components/shared/MdxTryItCTA.tsx";
+import Styling from "../../docs/react-form-library/style-css/HTML classes of Formbricks React Form Library to custom style surveys and forms.png";
+import CodeExample from "./v2 developer experience best react library 2023 forms and surveys open source.png";
+
+export const meta = {
+  title: "React Form Library launched! 🚀",
+  description: "We are pumped to announce that the Formbricks React Form Library is ready to be used!",
+  date: "2022-11-22",
+};
+
+<Image src={LaunchDay} alt="Robin Hood Meme" className="rounded-lg" />
+
+### Why a React Library?
+
+We have built form and survey solutions for companies in different stages. Even though forms have been around for a long while, we kept finding ourselves writing custom code for basic functionality over and over again. Formbricks React will provide all form functionality out of the box and speed up writing forms and surveys in React significantly.
+
+### How is the developer experience better?
+
+We want to make forms in React more accessible. To achieve that, we work with:
+
+- **Component-based approach:** Import HTML and non-HTML questions types with one line of code
+- **Props:** Specify every aspect of each form field like name, label, placeholder and validation with props in each component
+- **Styling:** Give your form a native look & feel in minutes. We natively support Tailwind and regular CSS style sheets.
+
+<Image src={CodeExample} alt="Robin Hood Meme" className="rounded-lg" />
+
+### What does it come with?
+
+In version 0.1 we layed the foundation for performant, easy to build forms. The library includes:
+
+- Text Input
+- Textarea Input
+- Submit Button
+- Validation
+- Tailwind Support
+- Standard CSS Support
+
+<Image src={Styling} alt="Robin Hood Meme" className="rounded-lg" />
+
+### Whats on the roadmap?
+
+- All HTML input types (checkbox, phone, email, address, etc)
+- Common non-HTML question types (Slider, star-rating, NPS, toggle, etc.)
+- Easy multi-step forms
+- Easy form logic
+- Easy internationalization (i18n)
+- Accessibility out of the box (a11y)
+
+### Suggest a feature
+
+We run open source and community-centered. If you’d like a specific feature, [just ask for it in our Discord :)](https://formbricks.com/discord)
+
+### Documentation
+
+You’ll find a lot more [information in the Docs.](/docs)
+
+<MdxTryItCTA />
+
+export default ({ children }) => <LayoutMdx meta={meta}>{children}</LayoutMdx>;

apps/formbricks-com/pages/docs/react-form-library/el-form-wrapper/index.mdx

@@ -48,3 +48,5 @@ Here we’re sending the data to an API endpoint to receive and display out subm
 | onSubmit | Function | `() => {}` | Gets passed on object with `{data, schema, event}` and is triggered when the form gets submitted without errors |
 
 export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
+
+;

apps/formbricks-com/pages/docs/react-form-library/el-submit/index.mdx

@@ -35,6 +35,6 @@ To keep it working make sure that there is **only one Submit button** per form.
 | innerClassName   | append styling class                    | no        | -                      | [read more](/docs/react-form-library/style-tailwind)                                                                                                                    |
 | inputClassName   | append styling class                    | no        | -                      | [read more](/docs/react-form-library/style-tailwind)                                                                                                                    |
 | helpClassName    | append styling class                    | no        | -                      | [read more](/docs/react-form-library/style-tailwind)                                                                                                                    |
-|  |
+|                  |
 
 export default ({ children }) => <Layout meta={meta}>{children}</Layout>;

apps/formbricks-com/pages/docs/react-form-library/getting-started/index.mdx

@@ -41,6 +41,10 @@ For a simple sign up form we import the following:
 
 ```jsx
 import { Form, Text, Textarea, Submit } from "@formbricks/react";
+# or
+yarn add @formbricks/react
+# or
+pnpm add @formbricks/react
 ```
 
 <Callout title="Import only what you need" type="warning">