Initial commit.

🍉

.build_scripts/lint.sh

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -e # halt script on error
+# If deploying, don't balk on lint errors
+if [ $TRAVIS_PULL_REQUEST = "false" ] && [ $TRAVIS_BRANCH = ${DEPLOY_BRANCH} ]; then
+  npm run lint || true
+else
+  npm run lint
+fi

.eslintrc

@@ -0,0 +1,34 @@
+{
+  "extends": ["standard"],
+  "env": {
+    "es6": true,
+    "browser": true
+  },
+  "plugins": [
+    "react"
+  ],
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "rules": {
+    "semi": [2, "always"],
+    "no-extra-semi": 2,
+    "semi-spacing": [2, { "before": false, "after": true }],
+    "react/display-name": 1 ,
+    "react/jsx-no-duplicate-props": 2,
+    "react/jsx-no-undef": 2,
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/no-danger": 0,
+    "react/no-deprecated": 2,
+    "react/no-did-mount-set-state": [2, "allow-in-func"],
+    "react/no-did-update-set-state": [2, "allow-in-func"],
+    "react/no-direct-mutation-state": 2,
+    "react/no-is-mounted": 2,
+    "react/no-unknown-property": 2,
+    "react/prop-types": 2,
+    "react/react-in-jsx-scope": 2
+  }
+}

.gitignore

@@ -0,0 +1,113 @@
+################################################
+###############  .gitignore   ##################
+################################################
+#
+# This file is only relevant if you are using git.
+#
+# Files which match the splat patterns below will
+# be ignored by git.  This keeps random crap and
+# and sensitive credentials from being uploaded to
+# your repository.  It allows you to configure your
+# app for your machine without accidentally
+# committing settings which will smash the local
+# settings of  other developers on your team.
+#
+# Some reasonable defaults are included below,
+# but, of course, you should modify/extend/prune
+# to fit your needs!
+################################################
+
+
+################################################
+# Local Configuration
+#
+# Explicitly ignore files which contain:
+#
+# 1. Sensitive information you'd rather not push to
+#    your git repository.
+#    e.g., your personal API keys or passwords.
+#
+# 2. Environment-specific configuration
+#    Basically, anything that would be annoying
+#    to have to change every time you do a
+#    `git pull`
+#    e.g., your local development database, or
+#    the S3 bucket you're using for file uploads
+#    development.
+#
+################################################
+
+sandbox/assets/scripts/config/local.js
+sandbox/assets/styles/_collecticons.scss
+
+
+################################################
+# Dependencies
+#
+# When releasing a production app, you may
+# consider including your node_modules and
+# bower_components directory in your git repo,
+# but during development, its best to exclude it,
+# since different developers may be working on
+# different kernels, where dependencies would
+# need to be recompiled anyway.
+#
+# More on that here about node_modules dir:
+# http://www.futurealoof.com/posts/nodemodules-in-git.html
+# (credit Mikeal Rogers, @mikeal)
+#
+# About bower_components dir, you can see this:
+# http://addyosmani.com/blog/checking-in-front-end-dependencies/
+# (credit Addy Osmani, @addyosmani)
+#
+################################################
+
+node_modules
+bower_components
+.sass-cache
+test/bower_components
+
+
+################################################
+# Node.js / NPM
+#
+# Common files generated by Node, NPM, and the
+# related ecosystem.
+################################################
+
+lib-cov
+*.seed
+*.log
+*.out
+*.pid
+npm-debug.log
+
+
+################################################
+# Apidocs
+#
+# Common files generated by apidocs and other docs
+################################################
+
+_README.md
+
+################################################
+# Miscellaneous
+#
+# Common files generated by text editors,
+# operating systems, file systems, etc.
+################################################
+
+*~
+*#
+.DS_STORE
+.netbeans
+nbproject
+.idea
+.resources
+.node_history
+temp
+tmp
+.tmp
+dist
+_site

.npmignore

@@ -0,0 +1,8 @@
+sandbox
+.gitignore
+.travis.yml
+.build_scripts
+.eslintrc
+.gitattributes
+gulpfile.js
+.tmp

.travis.yml

@@ -0,0 +1,28 @@
+language: node_js
+node_js:
+  - "4"
+
+env:
+  global:
+  - CXX=g++-4.8
+  - DEPLOY_BRANCH=master
+  - secure: "" # GH_TOKEN
+
+addons:
+  apt:
+    sources:
+      - ubuntu-toolchain-r-test
+    packages:
+      - g++-4.8
+
+cache:
+  apt: true
+  directories:
+    - node_modules
+
+before_install:
+- chmod +x ./.build_scripts/lint.sh
+
+script:
+- ./.build_scripts/lint.sh
+- npm test

DEVELOPMENT.md

@@ -0,0 +1,87 @@
+# OAM Design System Development
+
+Besides the design system per se, this repo also contains a little sandbox that can be used to test elements.  
+
+The following instructions are divided in two sections:
+- Design system development
+- Sandbox
+
+The main purpose of this system is to modularize the assets, therefore is important to maintain a clear separation between the design-system and the sandbox. The sandbox depends on the design-system but not the other way around.
+
+## Development environment
+The development environment is the same for both parts and has the following dependencies:
+
+- Node (v4.2.x) & Npm ([nvm](https://github.com/creationix/nvm) usage is advised)
+
+> The versions mentioned are the ones used during development. It could work with newer ones.
+
+After these basic requirements are met, run the following commands in the website's folder:
+```
+$ npm install
+```
+
+### Design system development
+All assets that belong to the design system go in the root's `assets` folder and are separated by type:
+```
+assets/
+  graphics/
+    layout/
+    meta/
+  icons/
+  styles/
+    oam-design-system/
+  scripts/
+```
+These assets will then be available to be used after installing the module.
+
+**assets/styles**  
+All the individual style files (like _buttons.scss, _forms.scss, ...) must go inside the `oam-design-system` folder and then be included in the main file (`_oam-design-system.scss`)
+
+**assets/scripts**  
+The scripts files should all be modules and linked in `index.js`.  
+These files can then be liked in the doc's files and used.
+
+**assets/icons**  
+Svg icons to be compiled into a webfont. The resulting compiled file must be committed with the rest of the styles.  
+To manually compile the `oam-design-system` icons run:
+```
+$ npm run oam-icons
+```
+
+### Sandbox
+The sandbox site resides in `sandbox/`.
+
+```
+$ npm run serve
+```
+Compiles the sass files, javascript, and launches the server making the site available at `http://localhost:3000/`  
+The system will watch files and execute tasks whenever one of them changes.  
+The site will automatically refresh since it is bundled with livereload.
+
+
+The `oam-design-system` styles are included with:
+```scss
+@import "oam-design-system";
+```
+
+And the scripts modules are collectively included through:
+```js
+import { componentName } from '../../../assets/scripts';
+// The will be the equivalent of doing:
+// import { componentName } from 'oam-design-system'
+```
+
+or individually:
+```js
+import componentName from '../../../assets/scripts/componentName';
+```
+
+**Important:** If you need to install new node modules, install them as **dependencies** if they are for the `oam-design-system` and as **devDependencies** if they're for the sandbox.
+
+## Deployment
+The .travis.yml file enables the usage of [Travis](http://travis.org) as a test and deployment system.  
+In this particular case, Travis will only publish new versions to the npm registry.
+
+## Linting
+Code follows the `semistandard` code style and should be linted.
+- `npm run lint` - will run linter and warn of any errors.

README.md

@@ -0,0 +1,95 @@
+# OAM Design System
+
+**Work in progress.** Use at your own risk!  
+
+The following guide explains how to use the `oam-design-system` in a new project. For information on how to develop the `oam-design-system` checkout the [DEVELOPMENT.md](DEVELOPMENT.md)  
+
+---
+
+Style guide and UI components library that aims to standardize the look and feel across all OAM-related applications, while defining coding best practices and conventions.
+
+Install it as an `npm` module: (not available yet)
+```
+npm install oam-design-system
+```
+
+**Note:**
+This design system makes some assumptions which are described below for each of the elements.  
+Check the build system of [OAM docs](https://github.com/hotosm/oam-docs/blob/master/gulpfile.js), a project that uses the `oam-design-system`.
+
+## Overview
+
+The shared assets are all in the `assets` directory. It is organized as follows:
+
+### assets/scripts
+Utility libraries and shared components.
+
+**USAGE**  
+Use as any node module:
+```js
+import { Dropdown, user } from 'oam-design-system';
+```
+If you want to minimize bundle size you can also include the components directly.  
+Bindings exported from `oam-design-system` are also available in `oam-design-system/assets/scripts`
+
+### assets/styles
+General styles. Requires burbon. [Add more info]
+
+**INSTALLATION**  
+Add the module path to the `includePaths` of gulp-sass. Should look something like:
+```js
+.pipe($.sass({
+  outputStyle: 'expanded',
+  precision: 10,
+  includePaths: require('node-bourbon').with('node_modules/jeet/scss', require('oam-design-system/gulp-addons').scssPath)
+}))
+```
+
+**USAGE**  
+Now you can include it in the main scss file:
+```scss
+// Bourbon is a dependency
+@import "bourbon";
+
+@import "jeet/index";
+
+@import "oam-design-system";
+```
+In case you don't need all the elements, they can be individually imported.  
+[link to the file on github - it's easier.]
+
+### assets/icons
+The `oam-design-system` includes svg icons that are compiled into a webfont and included in the styles.  
+To use them check the `_oam-ds-icons.scss` for the class names.
+
+### assets/graphics
+Graphics that are to be shared among projects.
+
+**INSTALLATION**  
+Add the `graphicsMiddleware` to browserSync. This is only to aid development.  
+Should look something like:
+```js
+browserSync({
+  port: 3000,
+  server: {
+    baseDir: ['.tmp', '_site'],
+    routes: {
+      '/node_modules': './node_modules'
+    },
+    middleware: require('oam-design-system/gulp-addons').graphicsMiddleware(fs) // <<< This line
+  }
+});
+```
+*Basically every time there's a request to a path like `/assets/graphics/**`, browserSync will check in the `oam-design-system` folder first. If it doesn't find anything it will look in the normal project's asset folder.*
+
+You also need to ensure that the images are copied over on build.
+This ensures that the graphics are copied over when building the project.
+```js
+gulp.task('images', function () {
+  return gulp.src(['_site/assets/graphics/**/*', require('oam-design-system/gulp-addons').graphicsPath + '/**/*'])
+    .pipe($.cache($.imagemin({
+```
+
+**USAGE**  
+Just include the images from the list using the path `assets/graphics/[graphic-type]/[graphic-name]`:  
+[link to the file list on github - it's easier.]