callstack / callstack/react-native-paper

docs: single-source-of-truth code examples extracted from the Example app

Ouverte
#4,891 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
feature request
Langage dominant
TypeScript
Étoiles
14.5k
Forks
2.2k
Merge moyen
5 j 23 h
PR mergées (30 j)
12

Description

**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.

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par docs/component-docs-plugin/index.js et docusaurus.config.js, puis comparez les exemples écrits manuellement dans docs/src/data/extendedExamples/ avec les fichiers source sous example/src/Examples/. Définissez le flux d’extraction autour des marqueurs de région proposés et vérifiez que la sortie rendue et le composant restent inchangés ; les références MDX remark facultatives relèvent d’un périmètre distinct.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
javascript, react-native, typescript
Domaine
documentation, tooling
Type d'issue
Fonctionnalité
Difficulté
4/5
Temps estimé
3-5 jours
Activité
Calme
Clarté
Plutôt claire
Accessibilité débutants
45/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.