Importing <Card /> from NPM-published design-system library (#171)

* Importing cards from NPM

* Added an abstraction inside the store and config for creating layouts for cards

* Adding layout render order for Card

* Allowing lists in the reducer validation

* Added design system package to package.json

* Any version over 0.5.0

* fix lint

Co-authored-by: Lachlan Kermode <lachiekermode@gmail.com>

package.json

@@ -14,6 +14,7 @@
     "lint:fix": "npm run lint -- --fix"
   },
   "dependencies": {
+    "@forensic-architecture/design-system": "^0.5.0",
     "d3": "^5.7.0",
     "joi": "^14.0.1",
     "leaflet": "^1.0.3",

src/components/CardStack.jsx

@@ -2,7 +2,8 @@ import React from 'react'
 import { connect } from 'react-redux'
 import * as selectors from '../selectors'
 
-import Card from './Card.jsx'
+// import Card from './Card.jsx'
+import { Card } from '@forensic-architecture/design-system/react'
 import copy from '../common/data/copy.json'
 
 class CardStack extends React.Component {
@@ -63,6 +64,8 @@ class CardStack extends React.Component {
       return (<Card
         event={event}
         ref={thisRef}
+        renderOrder={this.props.cardUI.order}
+        renderExtra={this.props.cardUI.extra}
         sourceError={this.props.sourceError}
         language={this.props.language}
         isLoading={this.props.isLoading}
@@ -182,6 +185,7 @@ function mapStateToProps (state) {
     language: state.app.language,
     isCardstack: state.app.flags.isCardstack,
     isLoading: state.app.flags.isFetchingSources,
+    cardUI: state.ui.card,
     features: state.features
   }
 }

src/components/InfoPopup.jsx

@@ -53,8 +53,6 @@ export default ({ ui, app, methods }) => {
       <svg x='-10px' y='0px' width='100px' height='30px' viewBox='0 40 100 30' enableBackground='new 0 0 100 70'>
         <polyline fill='none' stroke={strokeFill} strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' stroke-miterlimit='10' points='
           8.376,63.723 47.287,63.723 60,46 80,46 ' />
-        {/* <line stroke={strokeFill} strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' x1='33.723' y1='59.663' x2='39.069' y2='63.723' /> */}
-        {/* <line stroke={strokeFill} strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' x1='33.723' y1='67.782' x2='39.069' y2='63.723' /> */}
         <line stroke={strokeFill} strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' x1='78.849' y1='41.94' x2='84.195' y2='46' />
         <line stroke={strokeFill} strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' x1='78.849' y1='50.06' x2='84.195' y2='46' />
       </svg>

src/components/Layout.js

@@ -11,6 +11,7 @@ import LoadingOverlay from './Overlay/Loading'
 import Map from './Map.jsx'
 import Toolbar from './Toolbar/Layout'
 import CardStack from './CardStack.jsx'
+// import {CardStack} from '@forensic-architecture/design-system'
 import NarrativeControls from './presentational/Narrative/Controls.js'
 import InfoPopUp from './InfoPopup.jsx'
 import Timeline from './Timeline.jsx'

src/reducers/validate/eventSchema.js

@@ -6,6 +6,9 @@ function joiFromCustom (custom) {
     if (field.kind === 'text' || field.kind === 'link') {
       output[field.key] = Joi.string().allow('')
     }
+    if (field.kind === 'list') {
+      output[field.key] = Joi.array().allow('')
+    }
   })
   return output
 }

src/scss/cardstack.scss

@@ -1,5 +1,5 @@
 // @import 'burger';
-@import 'card';
+// @import 'card';
 
 .card-stack {
   position: absolute;

src/store/initial.js

@@ -132,6 +132,10 @@ const initial = {
         radial: false
       }
     },
+    card: {
+      order: [[`renderTime`, `renderLocation`], [`renderSummary`], [`renderCustomFields`]],
+      extra: [[`renderSources`]]
+    },
     coloring: {
       maxNumOfColors: 4,
       colors: Object.values(colors)