Merge branch 'master' into release-1

redsift · May 25, 2016 · c649353 · c649353
2 parents 15d3970 + 90fad9c
commit c649353
Show file tree

Hide file tree

Showing 98 changed files with 113 additions and 5,187 deletions.
diff --git a/README.md b/README.md
@@ -1,64 +1,78 @@
-# Redsift UI
+# RedsiftUI
 
 [![Circle CI](https://circleci.com/gh/Redsift/redsift-ui.svg?style=svg)](https://circleci.com/gh/Redsift/redsift-ui)
 
-Common UI components for Sifts and Apps.
+RedsiftUI is a user interface library for rapid development of Sifts and other Red Sift applications. The documentation is available at [here](https://docs.redsift.io/docs/client-code-redsift-ui).
 
-## Development workflow
+This repository does not contain UI components itself. It contains logic to grab available Red Sift UI components from NPM and to bundle them into packages. Those packages are then served by our CDN as UMD modules. There are multiple bundles which you can use:
 
-### Interactive development
+###### `core` bundle
 
-	$ npm install
-	$ npm run serve
+Contains the Redsift theme in the *light* and *dark* flavour, as well as UI logic shared between components.
 
-### Development integration into your project
+To use the bundle add the following HTML to your project:
 
-To extend and update **redsift-ui** from within an application which uses the library you can do the following (the application has to be a git repository):
+```html
+<!-- in the <head> section -->
+<link rel="stylesheet" href="//static.redsift.io/ui/latest/css/core/redsift-light.min.css">
+<!-- or the dark theme: -->
+<link rel="stylesheet" href="//static.redsift.io/ui/latest/css/core/redsift-dark.min.css">
 
-```shell
-cd my-application
-git submodule add https://github.com/Redsift/redsift-ui.git
-(cd redsift-ui && npm install && sudo npm link)
-npm link redsift-ui
+<!-- in the <body> section -->
+<script src="//static.redsift.io/ui/latest/js/core/redsift.umd.min.js"></script>
 ```
 
-After these lines 'redsift-ui' is installed as npm module in *my-application* and you can import its files from 'npm_modules/redsift-ui'.
+###### `sift` bundle
 
-### Trigger application reload on redsift-ui change
+This is probably the most important one to start with Sift development. It contains the Redsift theme in the *light* and *dark* flavour, together with the `rs-hero` component.
 
-Gulp, Grunt, Meteor, etc. provide auto reload functionality when a file within the application tree is changing. Typically the `npm_modules` folder is not watched, therefore a change within the **redsift-ui** folder will not trigger a reload of the application.
+To use the bundle add the following HTML to your project:
 
-To enable this handy feature create a new file `./my-application/npm_modules/redsift-ui/trigger-app-reload.json` and add the following content:
+```html
+<!-- in the <head> section -->
+<link rel="stylesheet" href="//static.redsift.io/ui/latest/css/sift/redsift-light.min.css">
+<!-- or the dark theme: -->
+<link rel="stylesheet" href="//static.redsift.io/ui/latest/css/sift/redsift-dark.min.css">
 
-```JSON
-{
-  "watchedFolder": "/path/to/watched/folder"
-}
+<!-- in the <body> section -->
+<script src="//static.redsift.io/ui/latest/js/sift/redsift.umd.min.js"></script>
 ```
 
-Replace `/path/to/watched/folder` with a path suited for your application and restart the interactive development setup of **redsift-ui**:
+###### `full` bundle
 
-> CAUTION: Do **NOT** use `~` to specify a home folder, it is not supported!
+To get all the functionality provided by RedsiftUI use this bundle. It contains the Redsift theme in the *light* and *dark* flavour, together with the following (data visualization) components:
 
-```shell
-cd my-application/npm_modules/redsift-ui
-npm run serve
-```
+* `rs-hero`: A hero unit for your Sift or app
+* `rs-radial-chart`: A radial chart for visualizing monthly data
+* `rs-schedule`: A scheduling component
 
-After this setup each change in **redsift-ui** will trigger a file creation/update in the `watchedFolder` and reload the application, which in turn pulls in the updated **redsift-ui** files.
+To use the bundle add the following HTML to your project:
 
-### Image optimization
+```html
+<!-- in the <head> section -->
+<link rel="stylesheet" href="//static.redsift.io/ui/latest/css/full/redsift-light.min.css">
+<!-- or the dark theme: -->
+<link rel="stylesheet" href="//static.redsift.io/ui/latest/css/full/redsift-dark.min.css">
 
-The repository contains the script `./scripts/forweb.sh` to optimize images in size. It also takes care of generating an image version for high-dpi, retina displays.
+<!-- in the <body> section -->
+<script src="//static.redsift.io/ui/latest/js/full/redsift.umd.min.js"></script>
+```
 
-#### Prerequisites (MacOS)
+## Development and Customization
 
-1. install [brew](http://brew.sh/)
-2. install [cwebp](https://developers.google.com/speed/webp/docs/precompiled#getting_cwebp_dwebp_and_the_webp_libraries) in copying the scripts in the `bin` folder to `/usr/local/bin`
-3. `brew install imagemagick`
+The bundles are provided to start quickly with developing your Sifts or applications. To have more control on which parts to include into your project you are encouraged to use the UI components directly. The components are develop in ES2015 for the Javascript and with the [Stylus](http://stylus-lang.com/) CSS preprocessor. It is easy to integrate and customize these components into your projects. Have a look at the `./bundles` folder to get an idea on how to integrate the functionality into your own projects. The following components are available as separate repositories and also als NPM modules:
 
-After that run the script like so:
+* [ui-rs-core](https://github.com/Redsift/ui-rs-core) | [npm](https://www.npmjs.com/package/@redsift/ui-rs-core)
+* [ui-rs-hero](https://github.com/Redsift/ui-rs-hero) | [npm](https://www.npmjs.com/package/@redsift/ui-rs-hero)
+* [ui-rs-radial-chart](https://github.com/Redsift/ui-rs-radial-chart) | [npm](https://www.npmjs.com/package/@redsift/ui-rs-radial-chart)
+* [ui-rs-schedule](https://github.com/Redsift/ui-rs-schedule) | [npm](https://www.npmjs.com/package/@redsift/ui-rs-schedule)
 
+## Development Setup
+
+For development directly within this repository run
+
+```bash
+> npm run serve
 ```
-./scripts/forweb.sh path/to/image outputpath/basename
-```
+
+within the repository folder. It will start a web server serving the content of `./samples` and supports live-reloading when a source file is changed.
diff --git a/bundles/core/index.js b/bundles/core/index.js
@@ -1,2 +1 @@
-export * from '../../components/core/index.js';
-export { html } from '@redsift/d3-rs-svg';
+export * from '@redsift/ui-rs-core';
diff --git a/bundles/core/redsift-dark.styl b/bundles/core/redsift-dark.styl
@@ -1,5 +1,5 @@
-@import '../../components/core/index.import';
-@import '../../components/core/src/styles/brand.import';
+@import '../../node_modules/@redsift/ui-rs-core/src/index.import';
+@import '../../node_modules/@redsift/ui-rs-core/src/styles/brand.import';
 
 $textColour = $brandWhite;
 $lineColour = $brandWhite;

diff --git a/bundles/core/redsift-light.styl b/bundles/core/redsift-light.styl
@@ -1,5 +1,5 @@
-@import '../../components/core/index.import';
-@import '../../components/core/src/styles/brand.import';
+@import '../../node_modules/@redsift/ui-rs-core/src/index.import';
+@import '../../node_modules/@redsift/ui-rs-core/src/styles/brand.import';
 
 $textColour = $brandBlack;
 $lineColour = #666;

diff --git a/bundles/core/redsift-xtra.styl b/bundles/core/redsift-xtra.styl
@@ -1,2 +1,2 @@
 @import './redsift-light';
-@import '../../components/core/src/styles/components/xkcd.import';
+@import '../../node_modules/@redsift/ui-rs-core/src/styles/components/xkcd.import';
diff --git a/bundles/crx/_components.js b/bundles/crx/_components.js
@@ -0,0 +1,6 @@
+export { RedsiftHero } from '@redsift/ui-rs-hero';
+
+export { RedsiftLoader } from '@redsift/ui-rs-loader';
+
+export { Scroll, Sliders } from '@redsift/ui-rs-core';
+
diff --git a/bundles/crx/index.js b/bundles/crx/index.js
@@ -1,10 +1 @@
-import { registerHeroElement } from '../../components/hero/index';
-
-registerHeroElement();
-
-export {
-    registerHeroElement
-} from '../../components/hero/index.js';
-
-export { Scroll } from '../../components/core/src/js/scroll/index';
-export { Sliders } from '../../components/core/src/js/widgets/sliders';
+export * from './_components';
diff --git a/bundles/crx/redsift-light.styl b/bundles/crx/redsift-light.styl
@@ -0,0 +1,2 @@
+@import '../../node_modules/@redsift/ui-rs-loader/src/index.import';
+
diff --git a/bundles/full/_components.import.styl b/bundles/full/_components.import.styl
@@ -1,5 +1,5 @@
-@import '../../components/hero/index.import';
-@import '../../components/radial-chart/index.import';
+@import '../../node_modules/@redsift/ui-rs-hero/src/index.import';
+@import '../../node_modules/@redsift/ui-rs-radial-chart/src/index.import';
 
 $heroSettings = {
 	padding: 1em,

diff --git a/bundles/full/_components.js b/bundles/full/_components.js
@@ -1,23 +1,17 @@
-// Note: registering custom elements by default:
-import { registerHeroElement } from '../../components/hero/index';
-import { registerRadialChartElement } from '../../components/radial-chart/index';
-import { registerScheduleElement } from '../../components/schedule/index';
-
-registerHeroElement();
-registerRadialChartElement();
-registerScheduleElement();
+export { html as svg } from '@redsift/d3-rs-svg';
+export * from '@redsift/d3-rs-core';
 
 export {
     registerHeroElement,
     RedsiftHero
-} from '../../components/hero/index.js';
+} from '@redsift/ui-rs-hero';
 
 export {
     registerRadialChartElement,
     RedsiftRadialChart
-} from '../../components/radial-chart/index.js';
+} from '@redsift/ui-rs-radial-chart';
 
 export {
     registerScheduleElement,
     RedsiftSchedule
-} from '../../components/schedule/index.js';
+} from '@redsift/ui-rs-schedule';
diff --git a/bundles/sdk/index.js b/bundles/sdk/index.js
diff --git a/bundles/sift/_components.import.styl b/bundles/sift/_components.import.styl
@@ -1,4 +1,4 @@
-@import '../../components/hero/index.import';
+@import '../../node_modules/@redsift/ui-rs-hero/src/index.import';
 
 $heroSettings = {
 	padding: 1em,

diff --git a/bundles/sift/_components.js b/bundles/sift/_components.js
@@ -1,9 +1,7 @@
-// Note: registering custom elements by default:
-import { registerHeroElement } from '../../components/hero/index';
-
-registerHeroElement();
+export { html as svg } from '@redsift/d3-rs-svg';
+export * from '@redsift/d3-rs-core';
 
 export {
     registerHeroElement,
     RedsiftHero
-} from '../../components/hero/index.js';
+} from '@redsift/ui-rs-hero';
diff --git a/circle.yml b/circle.yml
@@ -13,19 +13,18 @@ checkout:
 
 dependencies:
   override:
-    - node node_modules/gulp/bin/gulp.js
+    - npm run build
     - mv ./dist ${CIRCLE_ARTIFACTS}/dist
 
 test:
   override:
     - /bin/bash -c "[ -s ${CIRCLE_ARTIFACTS}/dist/css/core/redsift-light.min.css ]"
     - /bin/bash -c "[ -s ${CIRCLE_ARTIFACTS}/dist/css/sift/redsift-light.min.css ]"
     - /bin/bash -c "[ -s ${CIRCLE_ARTIFACTS}/dist/css/full/redsift-light.min.css ]"
-    - /bin/bash -c "[ -s ${CIRCLE_ARTIFACTS}/dist/js/core/redsift.umd.min.js ]"
-    - /bin/bash -c "[ -s ${CIRCLE_ARTIFACTS}/dist/js/sift/redsift.umd.min.js ]"
-    - /bin/bash -c "[ -s ${CIRCLE_ARTIFACTS}/dist/js/full/redsift.umd.min.js ]"
-    - /bin/bash -c "[ -s ${CIRCLE_ARTIFACTS}/dist/js/crx/redsift.umd.min.js ]"
-    - /bin/bash -c "[ -s ${CIRCLE_ARTIFACTS}/dist/js/sdk/color-tools.umd.min.js ]"
+    - /bin/bash -c "[ -s ${CIRCLE_ARTIFACTS}/dist/js/core/redsift.umd-es2015.min.js ]"
+    - /bin/bash -c "[ -s ${CIRCLE_ARTIFACTS}/dist/js/sift/redsift.umd-es2015.min.js ]"
+    - /bin/bash -c "[ -s ${CIRCLE_ARTIFACTS}/dist/js/full/redsift.umd-es2015.min.js ]"
+    - /bin/bash -c "[ -s ${CIRCLE_ARTIFACTS}/dist/js/crx/redsift.umd-es2015.min.js ]"
 
 deployment:
   production:

diff --git a/components/.babelrc b/components/.babelrc
diff --git a/components/core/index.import.styl b/components/core/index.import.styl
diff --git a/components/core/index.js b/components/core/index.js
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@import '../../node_modules/@redsift/ui-rs-loader/src/index.import';