callstack / callstack/react-native-paper

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

Open
#4,891 0 comments 0 reactions 0 assignees View on GitHub
feature request
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.