histoire-dev / histoire-dev/histoire

Import json data and use it in docs

Open
#416 0 comments 0 reactions 0 assignees View on GitHub
enhancement: to triage
Dominant language
TypeScript
Stars
3.6k
Forks
212
PR merge metrics
No merged PRs in 30d

Description

### Clear and concise description of the problem

I have attached JSON data. There are many config json files present for each components.
![image](https://user-images.githubusercontent.com/28944638/210483885-621a7c4a-fef9-4a81-b58c-366c8517b3c6.png)

I have to show it to users in documentation of story. For example Button Story
![image](https://user-images.githubusercontent.com/28944638/210484017-92167c73-6e1c-4b9a-ab81-8dd3dfd50f21.png)
![image](https://user-images.githubusercontent.com/28944638/210484049-a35bb050-4aef-4280-9346-6288ff82a246.png)

### **PROBLEM**
Currently there is no support for import statements and use it in markup.
![image](https://user-images.githubusercontent.com/28944638/210484226-7ffa7315-0449-4aaf-9ccb-f5c29f2e6a27.png)

### Suggested solution

I have suggested solution for providing support for javascript import and use it in markup.
![image](https://user-images.githubusercontent.com/28944638/210484326-e5049565-99cf-416c-bbc2-95c875582c70.png)

### Alternative

_No response_

### Additional context

_No response_

### Validations

- [X] Follow our [Code of Conduct](https://github.com/histoire-dev/histoire/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/histoire-dev/histoire/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://histoire.dev/guide/).
- [X] Check that there isn't [already an issue](https://github.com/histoire-dev/histoire/issues) that requests the same feature to avoid creating a duplicate.

Contributor guide

Open the contributing guide

Research direction

Start by locating how documentation stories render markup and where component configuration data is currently loaded. Verify how JavaScript imports are expected to work in story markup, then confirm that imported JSON values can be displayed in the Button Story example and similar documentation stories.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
documentation, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.