callstack / callstack/react-native-paper
docs: single-source-of-truth code examples extracted from the Example app
- Lenguaje dominante
- TypeScript
- Estrellas
- 14.5k
- Forks
- 2.2k
- Merge medio
- 5 d 23 h
- PR fusionados (30 d)
- 12
Descripción
**Is your feature request related to a problem? Please describe.**
Code examples shown in the docs are manually maintained as raw JavaScript string literals in docs/src/data/extendedExamples/ (e.g. BottomNavigationBar.js). These are completely disconnected from the real, runnable code in example/src/Examples/. When the Example app is updated, the docs silently drift and there's no mechanism to catch the discrepancy.
**Describe the solution you'd like**
Introduce named region markers in the Example app source files using the standard VS Code folding convention:
```
// #region docs:bottom-nav-static
// #endregion docs:bottom-nav-static
```
At docs build time (inside the existing component-docs-plugin or docusaurus.config.js), a small extraction utility reads those markers and replaces the hand-written string literals in extendedExamples. The rendered output and the component remain unchanged, only the data source changes.
For guide pages (.mdx under docs/docs/guides/), an optional remark plugin could allow inline references:
```
tsx snippet="bottom-nav-static" file="../../example/src/Examples/BottomNavigationExample.tsx"
```
**Additional context**
The repo already has a custom Docusaurus plugin (docs/component-docs-plugin/index.js) that runs at build time and has access to the filesystem, making it the natural place to wire in snippet extraction with minimal new infrastructure.
Guía de contribución
Línea de trabajo
Start with docs/component-docs-plugin/index.js and docusaurus.config.js, then compare the hand-written examples in docs/src/data/extendedExamples/ with source files under example/src/Examples/. Define the extraction flow around the proposed region markers and verify that the rendered output and component remain unchanged; the optional MDX remark references are a separate scope.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- javascript, react-native, typescript
- Área
- documentation, tooling
- Tipo de issue
- Nueva funcionalidad
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Tranquilo
- Claridad
- Bastante claro
- Aptitud para principiantes
- 45/100