MuseFind Core FrontEnd Library

Installing/ Updating

To install on front-end platforms:

npm install --save musefind-core-frontend

To add to this library:

• Create a folder for the component in the src/ directory
• Supply an index.js in that folder (see HamburgerMenu for example)
• Export that component in src/index.js
• Update the version number in musefind-core-frontend/package.json
• npm run build
• cd build/
• npm publish

Note: always update the package.json in the root directory, not the one in build/, which will be copied from the main one at build time.

Then, in the application:

• npm update musefind-core-frontend

Warning: please ensure that SASS files within this core library import the variables.scss from the Styles folder, if needed.

Using Components/Styles

The library supports two different methods of importing:

import {HamburgerMenu} from 'musefind-core-frontend'

import HamburgerMenu from 'musefind-core-frontend/HamburgerMenu'

To import inside a SASS file, use the following: @import 'node_modules/musefind-core-frontend/Styles/variables';

Distribute

To use the distribute script, all your front-end applications must be in the same folder as musefind-core-frontend, named like so:

• brand
• influencer-ui
• admin
• musers

You run the distribute script for a specific platform (npm run distribute:influencer) or distribute to all three at once (npm run distribute).

Doing so will copy the transpiled code directly into the node_modules/musefind-core-frontend of the given platform. Note that it does not change the version in that platform's package.json. Be careful that when you push to production, what will be installed via npm install matches what you have locally.

Releasing

If you are releasing from dev, increment the version number in ./package.json to {NEXT_VERSION}-beta.0. Then, as you release new versions, increment the number after beta. Then run npm run release from the root. You can then install it on the front-end platform via yarn add musefind-core-frontend@{NEXT_VERSION}. It will prompt you to select the beta version.

If you are releasing from master, increment the version number in ./package.json to {NEXT_VERSION}. Then run npm run release from the root.

Documenting Components

To document a React component, you need to do five things:

• Add a description to the component above the class or function declaration, exactly like so: `/*

• Description: Like , animates the display of its content. Not good for images, but good for everything else. */ @observer export default class AnimatedExpander extends Component {`

• Add descriptions to the prop-types, exactly like so: static propTypes = { // Whether it is displayed open: bool.isRequired, // What the message says message: string.isRequired, // How long in ms before it disappears autoHideDuration: number }
• Add an example file to src/examples to show how to use it. Name this file YourComponentName.example.js. You can import the component from 'musefind-core-frontend', NOT from dist/. See the other example files.
• Add the example to App.js using the ComponentDisplay component.
• Run yarn start to generate raw versions of your component and example file, and to check the example is working.