docs: add libraries docs

docs/docs/react-recipes/03-styling.md

@@ -6,6 +6,19 @@ TailwindCSS is our GoTo solution for everything related to styling. It offers gr
 
 We can use just regular Vite setup for tailwind https://tailwindcss.com/docs/guides/vite
 
+### Helper setup
+
+To never think about specificity again and avoid duplicating overlapping tailwind classes we can use [tailwind-merge](https://www.npmjs.com/package/tailwind-merge) utility. Together with [clsx](https://www.npmjs.com/package/clsx)(preferred) or [classnames](https://www.npmjs.com/package/classnames) it will help us to manage overriding component classes or updating components state styles
+
+```ts
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+```
+
 ## Semantic vars and dark mode setup
 
 To easier work work with designer files from Figma we recommend common setup that will use semantic variables inside tailiwind. Example `tailwind.config.js` structure

docs/docs/react-recipes/07-ui-kit.md

@@ -0,0 +1,14 @@
+# UI Kit
+
+We don't have to write every component ourselves, most likely we don't even should write most of the more common or sophisticated ones.
+It let's you focus on the business requirements more and progress faster.
+
+For the majority of app we suggest two approaches:
+
+- [shadcn/ui](https://ui.shadcn.com/) is a stylled with tailwind UI component library that let's you copy-paste components into your code. It uses - [RadixUI Primitives](https://www.radix-ui.com/primitives/docs/overview/introduction) under the hood, which currently is a community favourite, easily extensible and gives us good starting accessibility. It's also used by v0 by vercel so generating components can be another speed benefit.
+
+- [React Aria Components](https://react-spectrum.adobe.com/react-aria/components.html) mostly focused on accessiblity and usability between devices uikit developed by Adobe. Offerts superb quiality but has harder API to work with.
+
+- [NOT-TESTED] [JollyUI](https://www.jollyui.dev/) Alternative to `shadcn/ui` but built on top of React Aria Components
+
+- [mui](https://mui.com/)

docs/docs/react-recipes/08-libraries.md

@@ -0,0 +1,73 @@
+#Libraries
+
+Here's a list of tested and preferred libraries split into themed categories
+
+## State Management
+
+- [Zustand](https://github.com/pmndrs/zustand) - goto small client state library
+- [React Query](https://tanstack.com/query/latest/docs/framework/react/overview) - goto server and async state, caching library
+
+## Validation
+
+- [Typebox](https://github.com/sinclairzx81/typebox) - worse api but faster - preferable
+- [Zod](https://zod.dev/) - better api but slower
+
+## Styling & Animation
+
+- [TailwindCSS](https://tailwindcss.com/docs/guides/vite)
+- [tailwind-merge](https://www.npmjs.com/package/tailwind-merge)
+- [tailwindcss-animate](https://github.com/jamiebuilds/tailwindcss-animate)
+- [clsx](https://www.npmjs.com/package/clsx)
+- [class-variance-authority](https://cva.style/docs)
+- [framer motion](https://www.framer.com/motion/introduction/)
+
+## UI Components
+
+- [Shadcn](https://ui.shadcn.com/)
+- [RadixUI Primitives](https://www.radix-ui.com/primitives/docs/overview/introduction)
+- [React Aria Components](https://react-spectrum.adobe.com/react-aria/components.html)
+- [React Select](https://react-select.com/home)
+- [@tanstack/react-table](https://tanstack.com/table/latest/docs/introduction)
+- [cmdk](https://github.com/pacocoursey/cmdk)
+
+## Forms & Inputs
+
+- [React Hook Form](https://www.react-hook-form.com/get-started/)
+- [Typebox resolver](https://www.react-hook-form.com/get-started/#SchemaValidation)
+- [Zod resolver](https://www.react-hook-form.com/get-started/#SchemaValidation)
+- [react-international-phone](https://www.npmjs.com/package/react-international-phone)
+
+## Networking
+
+- [Axios](https://github.com/axios/axios)
+- [Mock Service Worker](https://mswjs.io/)
+
+## Charts
+
+- [Recharts](https://recharts.org/en-US/)
+- [Highcharts](https://www.highcharts.com/)
+
+## Internationalization
+
+- [react-i18next](https://react.i18next.com/)
+
+## Testing
+
+- [vitest](https://vitest.dev/guide/)
+- [Playwright](https://playwright.dev/)
+
+## Drag n drop
+
+- [React DnD](https://react-dnd.github.io/react-dnd/about)
+
+## Dates
+
+- [date-fns](https://date-fns.org/)
+- [date-fns-tz](https://www.npmjs.com/package/date-fns-tz)
+
+## Utilities
+
+- [lodash](https://lodash.com/) - preferably install separate modules 
+- [remeda](https://remedajs.com/)
+- [ts-pattern](https://github.com/gvergnaud/ts-pattern)
+- [ts-result](https://www.npmjs.com/package/ts-results-es)