react-native-varia 0.2.1 → 0.2.3

package/README.md

@@ -12,26 +12,188 @@ A Component library based on **react-native-unistyles** that provides a CLI tool
 yarn add -D react-native-varia
 ```
 
-You also need to install [react-native-unistyles](https://www.unistyl.es/v3/start/getting-started) for advanced styling capabilities:
+You also need to install [react-native-unistyles](https://www.unistyl.es/v3/start/getting-started)
+
+2. Components dependencies
+
+| Component          | Dependencies                                                                 |
+| ------------------ | ---------------------------------------------------------------------------- |
+| Badge              | -                                                                            |
+| Button             | react-native-svg                                                             |
+| Checkbox           | react-native-svg                                                             |
+| CircleProgress     | react-native-reanimated, react-native-svg                                    |
+| Field              | -                                                                            |
+| GradientBackground | react-native-svg                                                             |
+| GradientText       | react-native-svg                                                             |
+| Input              | -                                                                            |
+| Link               | -                                                                            |
+| Modal              | react-native-reanimated, @gorhom/portal, react-native-svg                    |
+| NumberInput        | -                                                                            |
+| RadioGroup         | -                                                                            |
+| ReText             | react-native-reanimated                                                      |
+| Select             | @gorhom/portal                                                               |
+| Slider             | react-native-reanimated, react-native-gesture-handler, react-native-worklets |
+| Slideshow          | react-native-reanimated, react-native-gesture-handler, react-native-worklets |
+| SlidingDrawer      | react-native-reanimated, react-native-gesture-handler, react-native-worklets |
+| Spinner            | -                                                                            |
+| Switch             | react-native-reanimated                                                      |
+
+Install react-native-reanimated, react-native-worklets and react-native-gesture-handler.
 
-2. Some components has reanimated dependency.
-   If you are going to use the next components:
-
-- Slider
-- SlidingDrawer
-- Slideshow
-- Switch
-- ReText
-- Modal
-
-Install react-native-reanimated and react-native-worklets.
 Check the [react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/) docs.
-And install react-native-gesture-handler.
+
 Check the [react-native-gesture-handler](https://docs.swmansion.com/react-native-gesture-handler/docs/fundamentals/installation) docs.
 
-3. Install react-native-svg.
+Check the [react-native-worklets](https://docs.swmansion.com/react-native-worklets/docs/) docs.
+
+Check the [react-native-svg](https://github.com/software-mansion/react-native-svg?tab=readme-ov-file#installation) docs.
+
+Check the [react-native-portal](https://github.com/gorhom/react-native-portal) docs.
+
+## Varia setup
+
+Now you need to run:
+
+```
+npx varia setup
+```
+
+This will copy the mixins, types and utils files from **lib** into **src/style/varia**.
+
+## About ColorPalettes
+
+React Native Varia uses a color palette system to provide a consistent color scheme for your app. It is based on Radix color palette system.
+Check the [Radix Color Palettes](https://www.radix-ui.com/colors/docs/palette-composition/scales) for more information.
+
+Check how to [Compose a color palette](https://www.radix-ui.com/colors/docs/palette-composition/composing-a-palette) for more information.
+
+Varia has the same color palettes as Radix built-in.
+In the next section you will learn how to add them.
+
+## Creating your Theme
+
+After setting up react-native unistyles theme, you will need to update it, to include the color palette system and default token needed for varia components.
+
+In you src/style/themes.ts file, you will need to update it, to include the color palettes you will use:
+
+```ts
+import {tomato} from './varia/colorPalettes/tomato'
+import {teal} from './varia/colorPalettes/teal'
+import {slate} from './varia/colorPalettes/slate'
+import {iris} from './varia/colorPalettes/iris'
+```
+
+Create a your preset with them, following how to [Compose a color palette](https://www.radix-ui.com/colors/docs/palette-composition/composing-a-palette) from radix you will set an accent and a gray color palette, and a red color palette is needed as well for default error styling in the components:
+
+```ts
+import {slate} from './varia/colorPalettes/slate'
+import {iris} from './varia/colorPalettes/iris'
+import {red} from './varia/colorPalettes/red'
+
+export const colorPalettes = createPreset({
+  accent: iris,
+  gray: slate,
+  red,
+})
+```
 
-`yarn add react-native-svg`
+Beside those color palettes you can add more optional color palettes to your theme.
+
+```ts
+import {lime} from './varia/colorPalettes/lime'
+import {olive} from './varia/colorPalettes/olive'
+import {red} from './varia/colorPalettes/red'
+import {yellow} from './varia/colorPalettes/yellow'
+import {forest} from './varia/colorPalettes/forest'
+
+export const colorPalettes = createPreset({
+  accent: lime,
+  gray: olive,
+  red,
+  yellow,
+  forest,
+})
+```
+
+Include de default theme tokens:
+
+```ts
+import {
+  defaultColors,
+  defaultFontSizes,
+  defaultFontWeights,
+  defaultRadii,
+  defaultShadows,
+  defaultSizes,
+  defaultSpacing,
+} from './varia/defaultTheme'
+```
+
+Create the base theme, here you can override the default tokens with whatever you want:
+
+```ts
+export const base = {
+  colors: {
+    ...defaultColors,
+  },
+  fontWeights: {
+    ...defaultFontWeights,
+  },
+  sizes: {
+    ...defaultSizes,
+  },
+  fontSizes: {
+    ...defaultFontSizes,
+  },
+  spacing: {
+    ...defaultSpacing,
+  },
+  radii: {
+    ...defaultRadii,
+  },
+} as const
+```
+
+Get the shadows tokens:
+
+```ts
+const lightShadows = defaultShadows(colorPalettes.light)
+const darkShadows = defaultShadows(colorPalettes.dark)
+```
+
+Ensamble the light and dark theme, you can add extend here with independent light and dark colors:
+
+```ts
+export const lightTheme = {
+  colors: {
+    ...base.colors,
+    ...colorPalettes.light,
+  },
+  fontSizes: base.fontSizes,
+  fontWeights: base.fontWeights,
+  spacing: base.spacing,
+  radii: base.radii,
+  sizes: base.sizes,
+  shadows: {
+    ...lightShadows,
+  },
+} as const
+
+export const darkTheme = {
+  colors: {
+    ...base.colors,
+    ...colorPalettes.dark,
+  },
+  fontSizes: base.fontSizes,
+  fontWeights: base.fontWeights,
+  spacing: base.spacing,
+  radii: base.radii,
+  sizes: base.sizes,
+  shadows: {
+    ...darkShadows,
+  },
+} as const
+```
 
 ## ⚙️ Available Commands
 
@@ -47,7 +209,11 @@ Once installed, you can use the following commands via `npx varia`:
 
 | Command                          | Description                                                                      |
 | -------------------------------- | -------------------------------------------------------------------------------- |
-| `npx varia setup`                | Copies the mixins, types and utils files from **lib** into **src/style**.        |
-| `npx varia add <component_name>` | Copies the specified component from **lib/components** into your project.        |
+| `npx varia setup`                | Adds the mixins, types and utils files from to **src/style/varia**.              |
+| `npx varia add <component_name>` | Adds the specified component into your project **src/components**.               |
 | `npx varia add-icon <icon_name>` | Copies the **Icon.tsx** template and renames it to the specified icon name.      |
 | `npx varia add-patterns`         | Copies the entire **lib/patterns** folder into **src/patterns** in your project. |
+
+```
+
+```