Quinoa-story-player - data stories player component
Quinoa-story-player is a module that provides a react component for displaying quinoa's data stories in read-only mode.
It is part of the
quinoa project family, a suite of digital storytelling tools tailored for the FORCCAST pedagogical program and médialab sciences po scientific activities.
An example of editing apps for making data presentations is fonio.
npm run build # builds component to ./build dir npm run lint # lints code (auto fix on) according to linting settings in package.json npm run comb # prettifies scss code npm run test # run mocha testing on each *.spec.js files in ./src dir npm run dev # starts a storybook instance to live test the component in several implementation scenarii (see ./stories folder) npm run build-storybook # initializes storybook npm run git-add-build # adds build to the current git record
Installing the module as a dependency
npm install --save https://github.com/medialab/quinoa-story-player
Installing the module as a project
git clone https://github.com/medialab/quinoa-story-player cd quinoa-story-player npm install npm run build-storybook
The project uses storybook to visually test the possible implementations of the component.
npm run dev
The module exports by default a react component.
It also exports a
templates object which exposes metadata about available templates to display presentations.
; // provides usable react component; // provide metadata about available templates
Presentation component API
QuinoaStoryPlayerpropTypes =/*** component must be given a story as prop* (see ./src/storyModel.json and ./quinoa-story-document-model-description.md)*/story: PropTypesObjectisRequired);
The component wraps a display-related component which corresponds to a specific templates.
For now there is only one template :
garlic: story is presented as one single page - document header is displayed full-height on top of document - block assets such as presentations and videos are displayed full-height - when hovering a presentation scroll is used to navigate within the presentation.
Creating new templates
Creating a new template supposes to create a new folder within
src/templates/ folder, and fill it with at least three files:
info.jsonfile describing the metadata of the template
- a scss file describing component default style
- a js script exposing a react component
Example of an
"id": "garlic""name": "Garlic""description": "One-page scrollytelling - sections are displayed one on top of the other - assets are displayed in full length""acceptsOptions" :"notesPosition""allowDisqusComments"
The react component of the template must comply to the following API :
MyTemplatepropTypes =/*** component must be given a story as prop* (see ./src/storyModel.json and ./quinoa-story-document-model-description.md)*/story: PropTypesObjectisRequired
The project uses a precommit hook before each commit to ensure the code remains clean at all times. Check out the
package.json to learn more about it.