Skip to content

Commit 888ec72

Browse files
wootsbotwootsbot
committed
docs(core): Fixed docs
1 parent 51d4bcc commit 888ec72

18 files changed

Lines changed: 2290 additions & 2273 deletions

File tree

‎.changeset/loud-coins-kick.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@design-blocks/unstyled": patch
3+
---
4+
5+
Fixed docs

‎README.md‎

Lines changed: 38 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -10,150 +10,63 @@ You can use these components as the base layer of your design system or adopt th
1010

1111
### Packages
1212

13-
- [💥 `@design-blocks/native`](https://github.com/openkitrun/design-blocks/tree/main/packages/native) - Core of Design Blocks. Features ThemeProvider, block, and createBlocks for token configuration, essential for UI customization and consistency.
14-
- [🏄‍♀️ `@design-blocks/primitives`](https://github.com/openkitrun/design-blocks/tree/main/packages/%40blocks-primitives) -
15-
Provides basic components and functions for custom UI creation. Includes elements like Box, Stack, and Text, essential for UI construction.
1613
- [🏄‍♀️ `@design-blocks/unstyled`](https://github.com/openkitrun/design-blocks/tree/main/packages/%40blocks-unstyled) -
1714
Accessible, style-agnostic components, ideal for integration in any Design Blocks project. Maximizes accessibility and design flexibility.
18-
- [💅 `@design-blocks/colors`](https://github.com/openkitrun/design-blocks/tree/main/packages/%40blocks-colors) - A set of
19-
open-source color systems to design your apps beautiful and accessible.
20-
[Tailwindcss Colors](https://tailwindcss.com/docs/customizing-colors), [Radix Colors](https://www.radix-ui.com/colors)
15+
16+
#### Future Packages (In Planning)
17+
18+
- [🔥 @design-blocks/primitives] - Layout components (Box, Stack, Text)
2119

2220
<br/>
2321

2422
## Documentation
2523

2624
For detailed information and usage instructions, visit our [official documentation](https://designblocks.dev). (Work in Progress)
2725

28-
## Installation
29-
30-
To integrate Design Blocks into your project, you can install the package using your preferred package manager. Choose one of the following commands:
31-
32-
```sh
33-
// with pnpm
34-
pnpm add @design-blocks/native@beta
35-
36-
// with yarn
37-
yarn add @design-blocks/native@beta
38-
39-
// with npm
40-
npm add @design-blocks/native@beta
41-
42-
// with bun
43-
bun add @design-blocks/native@beta
44-
```
45-
46-
## Configuring Design Blocks
47-
48-
### Creating Your Configuration File
49-
50-
To configure Design Blocks, create a `blocks.config.ts` file (.js works too) and `import createBlocks'` and `createTokens` `functions from '@design-blocks/native'`.
26+
## 📚 Current Package
5127

52-
```ts
53-
// blocks.config.ts
54-
import { createTokens, createBlocks } from "@design-blocks/native";
55-
```
56-
57-
The `createTokens` function receives a configuration object:
58-
59-
- theme: defines the tokens for your theme, mapping to CSS properties and style props.
60-
- utils: creates custom utilities to enhance your development experience.
61-
62-
And returns an array with the following:
63-
64-
- theme: at position 0 of the array is the theme with tokens generated by `createTokens`.
65-
- utils: at position 1 of the array are the utils generated by `createTokens`.
66-
67-
The `createBlocks` function receives a configuration object:
68-
69-
- themes: or it can receive an object with multiple themes generated by `createTokens`.
70-
71-
And returns all the available functions:
72-
73-
- block: Facilitates creating styled React-Native components.
74-
- themes: The `themes` object is passed to the `ThemeProvider`, allowing the use of multiple themes.
75-
- utils: Create custom utils to improve your developer experience.
76-
- css: Facilitates string interpolation for writing CSS in a readable manner.
77-
78-
```ts
79-
// blocks.config.ts
80-
81-
import { createTokens, createBlocks } from "@design-blocks/native";
82-
83-
const [themeTokens] = createTokens({
84-
theme: {
85-
tokens: {
86-
colors: {
87-
text: {
88-
primary: "#000",
89-
secondary: "#fff",
90-
},
91-
red: {
92-
100: "#FFEEEE",
93-
200: "#FACDCD",
94-
...
95-
},
96-
},
97-
},
98-
extendTokens: {
99-
spacings: {
100-
"7xl": 76,
101-
},
102-
radii: {
103-
"6xl": 32,
104-
},
105-
fontSizes: {
106-
"10xl": 80,
107-
},
108-
},
109-
},
110-
utils: {
111-
toPixels: (value: number) => `${value}px`,
112-
...
113-
},
114-
});
115-
116-
export const { block, css, themes } = createBlocks({
117-
themes: {
118-
light: themeTokens,
119-
},
120-
});
121-
```
28+
### **@design-blocks/unstyled**
12229

123-
### Using Your Configuration File
30+
This package provides essential UI components without style opinions:
12431

125-
From this point onwards, you'll be importing block and other functions from blocks.config.
32+
- **Form Controls**: Button, Checkbox, RadioGroup, Switch
33+
- **Full Accessibility**: Screen reader support, keyboard navigation, ARIA attributes
34+
- **Composable API**: Inspired by Radix UI's compound component pattern
35+
- **TypeScript**: Complete type safety and excellent IntelliSense
36+
- **Tree-shakeable**: Import only the components you use
12637

12738
```tsx
128-
// App.tsx index root application react-native
129-
130-
import React from "react";
131-
132-
import { ThemeProvider } from "@design-blocks/native";
133-
134-
import RootNavigator from "./RootNavigation";
135-
import { themes } from "./blocks.config";
39+
import { Button, Checkbox, RadioGroup, Switch } from '@design-blocks/unstyled';
40+
```
13641

137-
const App = () => {
138-
return (
139-
<ThemeProvider theme={themes.light}>
140-
<RootNavigator />
141-
</ThemeProvider>
142-
);
143-
};
42+
### 🚀 Quick Start
14443

145-
export default App;
44+
```bash
45+
npm install @design-blocks/unstyled
14646
```
14747

14848
```tsx
149-
import { block } from "[path-to]/blocks.config";
150-
151-
const Description = block.Text(({ theme }) => ({
152-
color: theme.colors.violet[400],
153-
fontSize: 30,
154-
}));
49+
import { Button, Checkbox, RadioGroup } from '@design-blocks/unstyled';
50+
51+
// Button with loading state
52+
<Button.Root loading={loading} onPress={handlePress} style={styles.button}>
53+
<Button.Label>Submit</Button.Label>
54+
<Button.Loading />
55+
</Button.Root>
56+
57+
// Checkbox
58+
<Checkbox.Root checked={accepted} onCheckedChange={setAccepted}>
59+
<Checkbox.Indicator />
60+
</Checkbox.Root>
61+
62+
// RadioGroup
63+
<RadioGroup.Root value={plan} onValueChange={setPlan}>
64+
<RadioGroup.Radio value="basic">
65+
<RadioGroup.Input><RadioGroup.Indicator /></RadioGroup.Input>
66+
<RadioGroup.Label>Basic Plan</RadioGroup.Label>
67+
</RadioGroup.Radio>
68+
</RadioGroup.Root>
15569
```
156-
15770
## Contributing
15871

15972
Please follow our [contributing guidelines](./.github/CONTRIBUTING.md).
@@ -162,11 +75,4 @@ Please follow our [contributing guidelines](./.github/CONTRIBUTING.md).
16275

16376
- Jorge Luis Calleja A. ([@wootsbot](https://twitter.com/wootsbot))
16477

165-
es probable que ya lo hayas usado en una de estas aplicaciones:
166-
167-
## Who is using Design Blocks?
168-
169-
- .<img src="./docs/showcase/lastplay.png" alt="LastPlay" width="50"/>
170-
- [LastPlay](https://www.lastplay.app/)
171-
- [App Store](https://apps.apple.com/us/app/last-play/id1663594431)
172-
- [Google Play](https://play.google.com/store/apps/details?id=com.lastplay)
78+
⭐ [Estrella en GitHub](https://github.com/openkitrun/design-blocks) • Construido con ❤️ para React Native

‎README_ES.md‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
![design-blocks](./docs/preview_beta.png)
2+
3+
<h1 align="center">
4+
Construye tus aplicaciones móviles React Native con bloques
5+
</h1>
6+
7+
Una biblioteca open source con herramientas para crear interfaces de usuario dinámicas para aplicaciones escritas en React Native, enfocada en la experiencia del desarrollador.
8+
9+
Puedes usar estos componentes como la capa base de tu sistema de diseño o adoptarlos incrementalmente.
10+
11+
### Paquetes
12+
13+
- [🏄‍♀️ `@design-blocks/unstyled`](https://github.com/openkitrun/design-blocks/tree/main/packages/%40blocks-unstyled) -
14+
Componentes accesibles y agnósticos de estilo, ideales para integración en cualquier proyecto de Design Blocks. Maximiza la accesibilidad y flexibilidad de diseño.
15+
16+
#### Paquetes Futuros (En Planificación)
17+
18+
- [🔥 @design-blocks/primitives] - Componentes de layout (Box, Stack, Text)
19+
20+
<br/>
21+
22+
## Documentación
23+
24+
Para información detallada e instrucciones de uso, visita nuestra [documentación oficial](https://designblocks.dev). (Trabajo en Progreso)
25+
26+
## 📚 Paquete Actual
27+
28+
### **@design-blocks/unstyled**
29+
30+
Este paquete proporciona componentes UI esenciales sin opiniones de estilo:
31+
32+
- **Controles de Formulario**: Button, Checkbox, RadioGroup, Switch
33+
- **Accesibilidad Completa**: Soporte para lectores de pantalla, navegación por teclado, atributos ARIA
34+
- **API Componible**: Inspirada en el patrón de componentes compuestos de Radix UI
35+
- **TypeScript**: Seguridad de tipos completa y excelente IntelliSense
36+
- **Tree-shakeable**: Importa solo los componentes que uses
37+
38+
```tsx
39+
import { Button, Checkbox, RadioGroup, Switch } from '@design-blocks/unstyled';
40+
```
41+
42+
### 🚀 Inicio Rápido
43+
44+
```bash
45+
npm install @design-blocks/unstyled
46+
```
47+
48+
```tsx
49+
import { Button, Checkbox, RadioGroup } from '@design-blocks/unstyled';
50+
51+
// Botón con estado de carga
52+
<Button.Root loading={loading} onPress={handlePress} style={styles.button}>
53+
<Button.Label>Enviar</Button.Label>
54+
<Button.Loading />
55+
</Button.Root>
56+
57+
// Checkbox
58+
<Checkbox.Root checked={accepted} onCheckedChange={setAccepted}>
59+
<Checkbox.Indicator />
60+
</Checkbox.Root>
61+
62+
// RadioGroup
63+
<RadioGroup.Root value={plan} onValueChange={setPlan}>
64+
<RadioGroup.Radio value="basic">
65+
<RadioGroup.Input><RadioGroup.Indicator /></RadioGroup.Input>
66+
<RadioGroup.Label>Plan Básico</RadioGroup.Label>
67+
</RadioGroup.Radio>
68+
</RadioGroup.Root>
69+
```
70+
71+
## Contribuir
72+
73+
Por favor sigue nuestras [guías de contribución](./.github/CONTRIBUTING.md).
74+
75+
## Autores
76+
77+
- Jorge Luis Calleja A. ([@wootsbot](https://twitter.com/wootsbot))
78+
79+
⭐ [Estrella en GitHub](https://github.com/openkitrun/design-blocks) • Construido con ❤️ para React Native
80+
81+
- **Controles de Formulario**: Button, Checkbox, RadioGroup, Switch
82+
- **Accesibilidad Completa**: Soporte para lectores de pantalla, navegación por teclado, atributos ARIA
83+
- **API Componible**: Inspirada en el patrón de componentes compuestos de Radix UI
84+
- **TypeScript**: Seguridad de tipos completa y excelente IntelliSense
85+
- **Tree-shakeable**: Importa solo los componentes que uses
86+
87+
```tsx
88+
import { Button, Checkbox, RadioGroup, Switch } from '@design-blocks/unstyled';
89+
```
90+
91+
### 🚀 Inicio Rápido
92+
93+
```bash
94+
npm install @design-blocks/unstyled
95+
```
96+
97+
```tsx
98+
import { Button, Checkbox, RadioGroup } from '@design-blocks/unstyled';
99+
100+
// Botón con estado de carga
101+
<Button.Root loading={loading} onPress={handlePress} style={styles.button}>
102+
<Button.Label>Enviar</Button.Label>
103+
<Button.Loading />
104+
</Button.Root>
105+
106+
// Checkbox
107+
<Checkbox.Root checked={accepted} onCheckedChange={setAccepted}>
108+
<Checkbox.Indicator />
109+
</Checkbox.Root>
110+
111+
// RadioGroup
112+
<RadioGroup.Root value={plan} onValueChange={setPlan}>
113+
<RadioGroup.Radio value="basic">
114+
<RadioGroup.Input><RadioGroup.Indicator /></RadioGroup.Input>
115+
<RadioGroup.Label>Plan Básico</RadioGroup.Label>
116+
</RadioGroup.Radio>
117+
</RadioGroup.Root>
118+
```
119+
120+
## Contribuir
121+
122+
Por favor sigue nuestras [guías de contribución](./.github/CONTRIBUTING.md).
123+
124+
## Autores
125+
126+
- Jorge Luis Calleja A. ([@wootsbot](https://twitter.com/wootsbot))
127+
128+
⭐ [Estrella en GitHub](https://github.com/openkitrun/design-blocks) • Construido con ❤️ para React Native

0 commit comments

Comments
 (0)