diff --git a/docs/docs/react-recipes/03-styling.md b/docs/docs/react-recipes/03-styling.md index f996eb4..8a34333 100644 --- a/docs/docs/react-recipes/03-styling.md +++ b/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 diff --git a/docs/docs/react-recipes/07-ui-kit.md b/docs/docs/react-recipes/07-ui-kit.md new file mode 100644 index 0000000..b8b5f16 --- /dev/null +++ b/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/) diff --git a/docs/docs/react-recipes/08-libraries.md b/docs/docs/react-recipes/08-libraries.md new file mode 100644 index 0000000..047093e --- /dev/null +++ b/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)