This package has been deprecated

Author message:

qualcomm-modules

Mirum-QC

Updated: 10/03/2017

Mirum's repository for reusable and generic components to serve as a base styleguide and style system for Qualcomm

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

• Access to the bitbucket repository https://bitbucket.mirum.agency/projects/MIRUS/repos/qualcomm-modules/browse
• NPM Account https://www.npmjs.com/signup
• NodeJS installed https://nodejs.org/en/download/ (see recommended)

Recommended: NVM to manage node versions: https://github.com/creationix/nvm/

Installing

1. Login to bitbucket https://bitbucket.mirum.agency/login
2. Clone the repo

git clone https://[e-mail]/scm/mirus/qualcomm-modules.git

3. Login to NPM and enter your login information

npm login

4. Go into the project directory and install NPM modules

cd mirum-qc
npm install

Bootstrapping

• npm run bootstrap to bootstrap the modules in /packages and install all their dependencies, linking any of their cross-dependencies.

Testing

• npm test to set up the test runner
• npm run storybook to launch storybook

Building

Each package contains their own "build" script in their package.json

• To run all build scripts, run:

lerna run build

This will create a cjs (CommonJS) and an es (ECMAScript) directory in each package directory. Consumers with webpack 3 will automatically use the module entry point defined in the package.json for that package, and will fall back to the main entry point.

Publishing

1. Create release branch off development
2. Publish release branch npm run publish
3. Merge release branch into master & development

Usage

Note: Make sure you are loggined in to npm by running npm login

You can import any package with the following example syntax:

import {colors} from "@mirum-qc/styles"
import {FeaturedToutsContainer} from "@mirum-qc/components"

In general, imports should be in generality order -> alphabetical order see section on Syntax for more details

See the package README for more details

Icon Conversion

An icon conversion utility is available to create React components from SVG files for use as icons. The utility converts all icons placed inside the icon directory inside icon-utils, and then places all converted components inside the Components package keeping the existing dir structure. Then creates an Object with all of the components.

1. Place SVG files into icons directory inside icon-utils
2. SVG file names must be unique
3. Final Icon Component name will be based on SVG file name, so the name must be unique to existing icons as well. (Please see existing icons in Components Package)
4. Run the below command:

npm run converticons

Syntax

Run prettier to format our code:

npm run prettier

Import statements should be handled in generality order -> alphabetical order, for example:

//most general
import React from "react'

//libraries used
import R from "ramda"
import styled from "styled-components"

//generic reusable functions, components, or utilities
import {colors} from "@mirum-qc/styles"

//components or relative paths
import {Link} from "link"
import {Items} from "../items"
import {Item} from "./item"

Contributing

Versioning

We use SemVer for versioning.

Authors

License

Related

• styled-components - Visual primitives for the component age.
• rebass - Functional React UI component library, built with styled-components
• styled-system - Design system utilities for styled-components, glamorous, and other css-in-js libraries
• grid-styled - Responsive React grid system built with styled-components.
• ramda - A practical functional library for JavaScript programmers.
• storybook - The UI Development Environment You'll ♥️ to use
• lerna - A tool for managing JavaScript projects with multiple packages.
• prettier - Opinionated Code Formatter