@hipherd/core

This package is used as the core module for shared UI components, server middleware, and configs for Hipherd.

Setup

There are some things you should download and install on your machine to run this project

• Install homebrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

• Install nvm and the latest version of node (DO NOT INSTALL USING HOMEBREW)

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash
nvm install node

• Install yarn

brew install yarn --without-node

Commands

• npm start | Runs storybook against our UI components
• npm run build | Builds the files into the dist directory and copies over the README and package.json.
• npm run publish:dist | Publishes the dist directory
• npm run link-pkg | Will run yarn link within the dist directory after running a build
• npm run unlink-pkg | Will run yarn unlink within the dist directory

Developing

Use the yarn link command to symlink this package with another project that references it. Instructions can be found here

You can also use the built in pre-built npm scripts I wrote that will handle this linking.

Preparing for publishing

When you're ready to publish, just do the following:

1. Make sure it build successfully by running npm run build
2. Bump up the version with npm version [major | minor | patch] with an optional -m "Message"
3. Run npm run publish:dist or redo the build and then separately run npm publish dist --access=public

Note: we are doing public access for now until we're rich enough to pay for a private repo)

Stories

This project includes integration with Storybook in order to create a plaground environment to test all of our UI components

React Component UI Library

Our core React Components exist within the src/ui. We are using Webpack 4 for compilation in order to create CommonJS modules of our components. Our component stylesheets also get compiled through css-loader and MiniCssExtractPlugin to generate a CSS file that can be referened in other projects that use this library. Since we are following a pseudo css-module pattern, these CSS classnames will be namespaced to avoid any conflicts.

Anyone using the UI library will have access to the following:

• @hipherd/core/ui/scss/index.scss | The main Global Theme scss file that holds our main theme. We have not compiled this as a css file to enable others to use pieces of it as they see fit
• @hipherd/core/ui/components.js | The main module that holds all the React components
• @hipherd/core/ui/components.css | The namespaced CSS library specifically for components, whose styles may or may not be affected by the Global Theme