metis-shared

Collection of utilities and components being used accross the apps in the metis experiment.

Installation

npm install metis-shared --save

Tests

npm install
npm test

Usage

The lib provides the following modules :

{
  utils: { // utilitary pure functions
    parseBibTeXToCSLJSON, // transform bibtex data into a csl-json representation
    resourceToCslJSON // tranform metis-schema compliant resource into a csl-json representation
  },
  components: { // react components
    contextualizers: { // all the contextualizers modules
      image,
      imagesgallery,
      webpage,
      video,
      audio,
      table,
      mobiliscene,
      bib,
    },
    previews: {
      DynamicMontagePreview, // dynamic preview component (simulates the routes logic with its inner state)
      StaticMontagePreview, // static montage assemblage
      FacebookPreview, // facebook post simulation
      TwitterPreview, // tweet simumation
      MailingPreview, // mail preview wrapper
    },
    views: {
      static: {
        Composition, // composition component
        DecoratedComposition, // standalone comosition component to display in its own (e.g. in epub composition)
        ArticleTemplate, // static article template
        Colophon, // colophon component
        Cover, // cover component
        Toc, // table of content component
        StandaloneCover, // static cover to be displayed in its own (i.e. for epub cover generation)
      },
      dynamic: {
        ArticleTemplate, // dynamic article template
        FullscreenTemplate, // dynamic full screen template
        Composition, // dynamic composition
        Home, // dynamic main page
      },
      micro: {
        MicropublicationMail // micropublication mail component
      }
    }
    renderer // enhanced redraft renderer for draft-based content rendering
  },
  constants // various constants names (i.e. draft entities names)
}

Note on contextualizers modules

Each contextualizer module :

must expose a meta submodule, which is a json object describing parameters and properties of the contextualizer
must expose a Block submodue, which is a react component handling block contextualizations
may expose an Inline submodue, which is a react component handling inline contextualizations

The meta submodule must be structured as follows :

{
  id: 'audio', // id of the contextualizer module
  accepts: ['audio'],// accepted ressources types
  assetPickingRules: { // rules for finding the right field to display one of the contextualizer's properties
    track: {// each key correspond to a specific contexualizer property
        // each key is an array of resources' data properties keys
        // the order of ids in the array defines a cascade to look into
        // for selecting the best available resource property to use for contextualization
      'web': ['audio_track_asset_id'],// rules for web rendering
      'micro': [], // rules for micropublication rendering
      'epub-fixed': ['audio_track_asset_id'], // rules for epub (fixed) rendering
      'pdf': [], // rules for pdf rendering
      'epub-reflowable': [] // rules for epub (reflowable) rendering
    }
  }
};

Dependencies

axios: Promise based HTTP client for the browser and node.js
citation-js: Citation.js converts formats like BibTeX, Wikidata JSON and ContentMine JSON to CSL-JSON to convert to other formats like APA, Vancouver and back to BibTeX.
d3-dsv: A parser and formatter for delimiter-separated values, such as CSV and TSV
mime-types: The ultimate javascript content-type utility.
opentype.js: OpenType font parser
oy-vey: React utilities for building server-side email templates.
parse-srt: Parse and convert SRT subtitles into JSON format.
react-citeproc: react wrapping components for csl-based citations
react-dimensions: React higher-order component to get dimensions of container
react-image-tiler: A responsive image tiling component for React
react-images: A simple, responsive lightbox component for displaying an array of images with React.js
react-media-player: React media player.
react-modal: Accessible modal dialog component for React.JS
react-table: A fast, lightweight, opinionated table and datagrid built on React
react-tweet: React.js component for rendering tweets as they are presented on Twitter.com
react-zoomable-image: React component for zoomable images
redraft: Renders the result of Draft.js convertToRaw using provided callbacks, works well with React
three: JavaScript 3D library

Dev Dependencies

@robindemourat/eslint-config: Just an eslint config.
@storybook/addon-actions: Action Logger addon for storybook
@storybook/addon-links: Story Links addon for storybook
@storybook/react: Storybook for React: Develop React Component in isolation with Hot Reloading.
babel-cli: Babel command line.
babel-core: Babel compiler core.
babel-eslint: Custom parser for ESLint
babel-plugin-transform-class-properties: This plugin transforms static class properties as well as properties declared with the property initializer syntax
babel-plugin-transform-decorators: Compile class and object decorators to ES5
babel-plugin-transform-decorators-legacy: A plugin for Babel 6 that (mostly) replicates the old decorator behavior from Babel 5.
babel-plugin-transform-object-rest-spread: Compile object rest and spread to ES5
babel-preset-es2015: Babel preset for all es2015 plugins.
babel-preset-react: Babel preset for all React plugins.
babel-template: Generate an AST from a string template.
chai: BDD/TDD assertion library for node.js and the browser. Test framework agnostic.
css-loader: css loader module for webpack
csscomb: CSS coding style formatter
del: Delete files and folders
enzyme: JavaScript Testing utilities for React
eslint: An AST-based pattern checker for JavaScript.
eslint-plugin-react: React specific linting rules for ESLint
gulp: The streaming build system
gulp-babel: Use next generation JavaScript, today
gulp-concat: Concatenates files
gulp-sass: Gulp plugin for sass
gulp-uglify: Minify files with UglifyJS.
image-webpack-loader: Image loader module for webpack
mocha: simple, flexible, fun test framework
node-sass: Wrapper around libsass
pre-commit: Automatically install pre-commit hooks for your npm modules.
raw-loader: raw loader module for webpack
react: React is a JavaScript library for building user interfaces.
react-addons-test-utils: This package provides the React TestUtils add-on.
react-dom: React package for working with the DOM.
sass-loader: Sass loader for webpack
script-loader: script loader module for webpack
storybook: Storybook's CLI - easiest method of adding storybook to your projects
style-loader: style loader module for webpack
uglify-es: JavaScript parser, mangler/compressor and beautifier toolkit for ES6+
uglifyjs-webpack-plugin: UglifyJS plugin for webpack

License

LGPL-3.0

CECCIL-C

robindemourat / metis-shared