+ 
+
+ );
+};
+
+Cover.propTypes = {
+ cover: PropTypes.string.isRequired
+};
+
+export default Cover;
diff --git a/packages/ui/lib/components/Cover/styles.scss b/packages/ui/lib/components/Cover/styles.scss
new file mode 100644
index 0000000000..6fde06f9f0
--- /dev/null
+++ b/packages/ui/lib/components/Cover/styles.scss
@@ -0,0 +1,13 @@
+@import '../../common.scss';
+
+.nuclear.cover_container {
+ width: 76px;
+ height: 76px;
+
+ flex: 0 0 auto;
+}
+
+.nuclear.cover_container img {
+ width: 76px;
+ height: 76px;
+}
diff --git a/packages/ui/lib/components/Loader/index.js b/packages/ui/lib/components/Loader/index.js
new file mode 100644
index 0000000000..869b201eda
--- /dev/null
+++ b/packages/ui/lib/components/Loader/index.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+import common from '../../common.scss';
+import styles from './styles.scss';
+
+const Loader = props => {
+ return (
+
+
+
+
+
+
+ );
+};
+
+Loader.propTypes = {
+ type: PropTypes.string
+};
+
+Loader.defaultProps = {
+ type: 'default'
+};
+
+export default Loader;
diff --git a/packages/ui/lib/components/Loader/styles.scss b/packages/ui/lib/components/Loader/styles.scss
new file mode 100644
index 0000000000..55b64b56b0
--- /dev/null
+++ b/packages/ui/lib/components/Loader/styles.scss
@@ -0,0 +1,105 @@
+@import '../../common.scss';
+
+.loader {
+ @include roundCorners;
+ position: relative;
+ display: block;
+
+ width: 5em;
+ height: 5em;
+
+ &.default {
+ @include shadow;
+ background: linear-gradient(45deg, #43CBFF 0%, #9708CC 100%);
+ background-size: 100% 100%;
+ border-radius: 1em;
+
+ span {
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-top: 1.5em solid $white;
+ border-left: 1em solid transparent;
+ border-right: 1em solid transparent;
+ }
+
+ span:nth-child(1) {
+ left: 1.5em;
+ top: 1em;
+ animation: triangle-anim 1s ease infinite;
+ }
+
+ span:nth-child(2) {
+ top: 2.5em;
+ left: 0.5em;
+ animation: triangle-anim 1s ease infinite 0.66s;
+ }
+
+ span:nth-child(3) {
+ top: 2.5em;
+ right: 0.5em;
+ animation: triangle-anim 1s ease infinite 0.33s;
+ }
+
+ span:nth-child(4) {
+ display: none;
+ }
+
+ @keyframes triangle-anim {
+ 0%, 100% {
+ opacity: 1;
+ }
+
+ 50% {
+ opacity: 0.5;
+ }
+ }
+ }
+
+ &.circle {
+ span:first-child {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ border-top: 5px solid $white;
+ border-bottom: 5px solid $white;
+ border-right: 5px solid $white;
+ border-left: 5px solid transparent;
+ animation: circle-anim 1s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
+ }
+
+
+ }
+
+ &.small {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 2em;
+ height: 2em;
+
+ span:first-child {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ border-radius: 50%;
+ border-top: 5px solid $white;
+ border-bottom: 5px solid $white;
+ border-right: 5px solid $white;
+ border-left: 5px solid transparent;
+ animation: circle-anim 1s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
+ }
+ }
+}
+
+@keyframes circle-anim {
+ 0% {
+
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+}
diff --git a/packages/ui/lib/components/QueueItem/index.js b/packages/ui/lib/components/QueueItem/index.js
new file mode 100644
index 0000000000..dc4d3371e5
--- /dev/null
+++ b/packages/ui/lib/components/QueueItem/index.js
@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+import Loader from '../Loader';
+import common from '../../common.scss';
+import styles from './styles.scss';
+
+const QueueItem = props => {
+ let {
+ isLoading,
+ isCurrent,
+ index,
+ track,
+ duration,
+ selectSong,
+ removeFromQueue
+ } = props;
+
+ return (
+ selectSong(index)}
+ >
+
+ );
+};
+
+QueueItem.propTypes = {
+ isLoading: PropTypes.bool,
+ isCurrent: PropTypes.bool,
+ track: PropTypes.shape({
+ thumbnail: PropTypes.string,
+ name: PropTypes.string,
+ artist: PropTypes.string
+ }),
+ index: PropTypes.number,
+ duration: PropTypes.string,
+ selectSong: PropTypes.func,
+ removeFromQueue: PropTypes.func
+};
+
+export default QueueItem;
diff --git a/packages/ui/lib/components/QueueItem/styles.scss b/packages/ui/lib/components/QueueItem/styles.scss
new file mode 100644
index 0000000000..db5405f142
--- /dev/null
+++ b/packages/ui/lib/components/QueueItem/styles.scss
@@ -0,0 +1,95 @@
+@import '../../common.scss';
+
+.queue_item {
+ @include transition;
+ @include roundCorners;
+
+ display: flex;
+ flex-flow: row;
+ flex: 0 0 auto;
+ height: 4em;
+ margin: 0.5em;
+ background-color: rgba($background2, 0.5);
+
+ animation: queue_item_fade_in 0.5s;
+
+ .thumbnail {
+ @include center;
+ @include circle;
+
+ position: relative;
+ display: flex;
+ width: 3em;
+ height: 3em;
+ margin: 0.5em;
+ }
+
+ .thumbnail_overlay {
+ @include center;
+ @include circle;
+ @include transition;
+
+ position: absolute;
+ display: flex;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background: $black;
+ color: $white;
+ opacity: 0;
+ cursor: pointer;
+
+ &:hover {
+ opacity: 0.85;
+ }
+ }
+}
+
+.item_info_container {
+ @include ellipsis;
+
+ display: flex;
+ margin: 0.25em;
+ flex: 1 1 auto;
+ flex-flow: column;
+ justify-content: center;
+
+ .name_container {
+ @include ellipsis;
+ margin-bottom: 0.25 em;
+ }
+
+ .artist_container {
+ @include ellipsis;
+ color: rgba($white, 0.5);
+ }
+}
+
+.item_duration_container {
+ display: flex;
+ overflow: hidden;
+ flex: 0 0 auto;
+ flex-flow: column;
+ justify-content: center;
+
+ margin: 0 0.5em;
+
+ .item_duration {
+ color: rgba($white, 0.5);
+ }
+}
+
+.current_song {
+ background: rgba($green, 0.3);
+}
+
+@keyframes queue_item_fade_in {
+ 0% {
+ opacity: 0;
+ }
+
+ 100% {
+ opacity: 1;
+ }
+}
diff --git a/packages/ui/lib/components/Seekbar/index.js b/packages/ui/lib/components/Seekbar/index.js
new file mode 100644
index 0000000000..326fc2a23b
--- /dev/null
+++ b/packages/ui/lib/components/Seekbar/index.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+import common from '../../common.scss';
+import styles from './styles.scss';
+
+const handleClick = (seek, queue) => {
+ return event => {
+ let percent = (event.pageX - event.target.offsetLeft)/document.body.clientWidth;
+ let duration = queue.queueItems[queue.currentSong].streams[0].duration;
+ seek(percent * duration * 1000);
+ };
+};
+
+const Seekbar = props => {
+ return (
+
+ {
+ isLoading
+ ? 
+ }
+
+
+
+ removeFromQueue(index)}
+ >
+
+
+
+
+
+
+ {track.name}
+
+
+ {track.artist}
+
+
+
+
+ { duration }
+
+
+
+
+ );
+};
+
+Seekbar.propTypes = {
+ fill: PropTypes.string,
+ seek: PropTypes.func,
+ queue: PropTypes.object
+};
+
+export default Seekbar;
diff --git a/packages/ui/lib/components/Seekbar/styles.scss b/packages/ui/lib/components/Seekbar/styles.scss
new file mode 100644
index 0000000000..2c25328582
--- /dev/null
+++ b/packages/ui/lib/components/Seekbar/styles.scss
@@ -0,0 +1,13 @@
+@import '../../common.scss';
+
+.seekbar_container {
+ height: 4px;
+ cursor: pointer;
+ background-color: transparent;
+ flex: 0 0 auto;
+}
+
+.seekbar_fill {
+ height: 100%;
+ background-color: $pink;
+}
diff --git a/packages/ui/lib/components/ToastContainer/Toast/index.js b/packages/ui/lib/components/ToastContainer/Toast/index.js
new file mode 100644
index 0000000000..4f8cea4f8f
--- /dev/null
+++ b/packages/ui/lib/components/ToastContainer/Toast/index.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+
+import common from '../../../common.scss';
+import styles from './styles.scss';
+
+const TOAST_HEIGHT_PADDED = '5.5em';
+
+const Toast = props => {
+ return (
+
+
+ );
+};
+
+Toast.propTypes = {
+ error: PropTypes.bool,
+ warning: PropTypes.bool,
+ info: PropTypes.bool,
+ success: PropTypes.bool,
+ icon: PropTypes.node,
+ title: PropTypes.string,
+ details: PropTypes.string,
+ onClick: PropTypes.func,
+ offset: PropTypes.arrayOf(PropTypes.number)
+};
+
+Toast.defaultProps = {
+ error: false,
+ warning: false,
+ info: false,
+ success: null,
+ icon: null,
+ title: '',
+ details: '',
+ onClick: () => {},
+ offset: [0, 0]
+};
+
+export default Toast;
diff --git a/packages/ui/lib/components/ToastContainer/Toast/styles.scss b/packages/ui/lib/components/ToastContainer/Toast/styles.scss
new file mode 100644
index 0000000000..695257b903
--- /dev/null
+++ b/packages/ui/lib/components/ToastContainer/Toast/styles.scss
@@ -0,0 +1,65 @@
+@import '../../../common.scss';
+
+.toast {
+ @include roundCorners;
+ @include transition;
+ @include shadow;
+ position: absolute;
+ background: $background2;
+ padding: 1em;
+ animation: fade-in 0.5s normal forwards ease-in-out;
+ user-select: none;
+ -moz-user-select: none;
+ cursor: pointer;
+
+ bottom: 1em;
+ right: 1em;
+ height: 2.5em;
+
+ .toast_content {
+ display: flex;
+ flex-flow: row;
+ height: 100%;
+ }
+
+ .toast_icon {
+ display: flex;
+ height: 100%;
+ margin-right: 1em;
+
+ * {
+ height: 100%;
+ width: auto;
+ }
+ }
+
+ .toast_text {
+ display: flex;
+ flex-flow: column;
+ }
+
+ .title {
+ color: $white;
+ font-weight: bold;
+ }
+
+ .details {
+ color: rgba($white, 0.7);
+ }
+
+ &.error {
+ background: $red;
+ }
+
+ &.warning {
+ background: darken($orange, 15%);
+ }
+
+ &.info {
+ background: $blue;
+ }
+
+ &.success {
+ background: darken($green, 25%);
+ }
+}
diff --git a/packages/ui/lib/components/ToastContainer/index.js b/packages/ui/lib/components/ToastContainer/index.js
new file mode 100644
index 0000000000..e7430a99de
--- /dev/null
+++ b/packages/ui/lib/components/ToastContainer/index.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import Toast from './Toast';
+
+import common from '../../common.scss';
+import styles from './styles.scss';
+
+const ToastContainer = props => {
+ return (
+
+ {
+ props.icon &&
+
+
+ { props.icon }
+
+ }
+
+
+ { props.title }
+ { props.details }
+
+ { props.toasts.map((toast, i) => {
+ return (
+
+ );
+};
+
+ToastContainer.propTypes = {
+ toasts: PropTypes.arrayOf(
+ PropTypes.shape({
+ title: PropTypes.string,
+ details: PropTypes.string,
+ error: PropTypes.bool,
+ warning: PropTypes.bool,
+ info: PropTypes.bool
+ })
+ )
+};
+
+ToastContainer.defaultProps = {
+ toasts: []
+};
+
+export default ToastContainer;
diff --git a/packages/ui/lib/components/ToastContainer/styles.scss b/packages/ui/lib/components/ToastContainer/styles.scss
new file mode 100644
index 0000000000..a18234bfe3
--- /dev/null
+++ b/packages/ui/lib/components/ToastContainer/styles.scss
@@ -0,0 +1,6 @@
+.toast_container {
+ position: absolute;
+ display: flex;
+ width: 100%;
+ height: 100%;
+}
diff --git a/packages/ui/lib/index.js b/packages/ui/lib/index.js
new file mode 100644
index 0000000000..6561438621
--- /dev/null
+++ b/packages/ui/lib/index.js
@@ -0,0 +1,7 @@
+import '../resources/Lato.css';
+
+export { default as Cover } from './components/Cover';
+export { default as Loader } from './components/Loader';
+export { default as QueueItem } from './components/QueueItem';
+export { default as Seekbar } from './components/Seekbar';
+export { default as ToastContainer } from './components/ToastContainer';
diff --git a/packages/ui/lib/ui.js b/packages/ui/lib/ui.js
new file mode 100644
index 0000000000..326cf320c0
--- /dev/null
+++ b/packages/ui/lib/ui.js
@@ -0,0 +1,7 @@
+'use strict';
+
+module.exports = ui;
+
+function ui() {
+ // TODO
+}
diff --git a/packages/ui/lib/utils.js b/packages/ui/lib/utils.js
new file mode 100644
index 0000000000..a646973677
--- /dev/null
+++ b/packages/ui/lib/utils.js
@@ -0,0 +1,22 @@
+export function formatDuration(duration) {
+ let sec_num = parseInt(duration, 10);
+ let hours = Math.floor(sec_num / 3600);
+ let minutes = Math.floor((sec_num - (hours * 3600)) / 60);
+ let seconds = sec_num - (hours * 3600) - (minutes * 60);
+
+ if (hours < 10) {
+ hours = '0' + hours;
+ }
+ if (minutes < 10) {
+ minutes = '0' + minutes;
+ }
+ if (seconds < 10) {
+ seconds = '0' + seconds;
+ }
+
+ if (hours === '00') {
+ return minutes+':'+seconds;
+ } else {
+ return hours+':'+minutes+':'+seconds;
+ }
+}
diff --git a/packages/ui/package.json b/packages/ui/package.json
new file mode 100644
index 0000000000..f3ac87fda9
--- /dev/null
+++ b/packages/ui/package.json
@@ -0,0 +1,86 @@
+{
+ "name": "@nuclear/ui",
+ "version": "0.5.1",
+ "description": "Nuclear - UI components",
+ "author": "nukeop
+ Seekbars filled to various levels.
+
+ 60%: +
+ 70%: +
+ 80%: +
+ 30%: +
+ 10%: +
+
+ );
+ });
+
+storiesOf('QueueItem', module)
+ .add('Basic', () => {
+ return (
+ + 60%: +
+ 70%: +
+ 80%: +
+ 30%: +
+ 10%: +
+
+ {
+ alert('Item selected');
+ }}
+ removeFromQueue={() => {
+ alert('Item removed from queue');
+ }}
+ />
+
+ );
+ })
+ .add('Loading', () => {
+ return (
+
+ {
+ alert('Item selected');
+ }}
+ removeFromQueue={() => {
+ alert('Item removed from queue');
+ }}
+ />
+
+ );
+ })
+ .add('Current', () => {
+ return (
+
+ {
+ alert('Item selected');
+ }}
+ removeFromQueue={() => {
+ alert('Item removed from queue');
+ }}
+ />
+
+ );
+ });
+
+
+storiesOf('Loader', module)
+ .add('Default', () => {
+ return (
+
+
+ );
+ })
+ .add('Circle', () => {
+ return (
+
+
+ );
+ })
+ .add('Small', () => {
+ return (
+
+
+ );
+ });
diff --git a/packages/ui/stories/styles.scss b/packages/ui/stories/styles.scss
new file mode 100644
index 0000000000..4e3d41cb19
--- /dev/null
+++ b/packages/ui/stories/styles.scss
@@ -0,0 +1,9 @@
+html,
+body,
+.sb-main {
+ height: 100%;
+ width: 100%;
+ margin: 0;
+ box-sizing: border-box;
+}
+
diff --git a/packages/ui/stories/toasts.stories.js b/packages/ui/stories/toasts.stories.js
new file mode 100644
index 0000000000..093d5b0957
--- /dev/null
+++ b/packages/ui/stories/toasts.stories.js
@@ -0,0 +1,135 @@
+import React from 'react';
+import _ from 'lodash';
+import { storiesOf } from '@storybook/react';
+
+import {ToastContainer} from '..';
+import './toasts.styles.scss';
+
+storiesOf('Toasts', module)
+ .add('Toast types', () => {
+ return (
+
+ 
,
+ info: true
+ },
+ {
+ title: 'Example success toast',
+ details: 'Toast notification description',
+ icon: 
,
+ success: true
+ }
+ ]}
+ />
+
+ );
+ })
+ .add('With add/remove button', () => {
+ class Demo extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ toasts: []
+ };
+ }
+
+ addToast() {
+ const newToasts = Object.assign([], this.state.toasts);
+ newToasts.push({
+ title: 'Example toast',
+ details: 'Example toast description'
+ });
+ this.setState({toasts: newToasts});
+ return false;
+ }
+
+ removeToast() {
+ const newToasts = Object.assign([], this.state.toasts);
+ newToasts.shift();
+ this.setState({toasts: newToasts});
+ return false;
+ }
+
+ render() {
+ return (
+ ,
+ info: true
+ },
+ {
+ title: 'Example success toast',
+ details: 'Toast notification description',
+ icon: ,
+ success: true
+ }
+ ]}
+ />
+
+
+
+
+ );
+ }
+ }
+
+ return
+ alert('You clicked me')
+ }
+ ]}
+ />
+
+ );
+ });
diff --git a/packages/ui/stories/toasts.styles.scss b/packages/ui/stories/toasts.styles.scss
new file mode 100644
index 0000000000..f9bdc938bf
--- /dev/null
+++ b/packages/ui/stories/toasts.styles.scss
@@ -0,0 +1,17 @@
+.buttons {
+ position: absolute;
+ display: flex;
+ flex-flow: column;
+
+ width: 200px;
+ z-index: 2;
+}
+
+.toast-button {
+ background: #44475a;
+ color: #FAFAFA;
+ text-decoration: none;
+ padding: 1em 1.5em;
+ margin: 1em;
+ cursor: pointer;
+}
diff --git a/packages/ui/test/enzyme.cover.test.js b/packages/ui/test/enzyme.cover.test.js
new file mode 100644
index 0000000000..0176b423da
--- /dev/null
+++ b/packages/ui/test/enzyme.cover.test.js
@@ -0,0 +1,18 @@
+import test from 'ava';
+import React from 'react';
+import { shallow, configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+import './helpers/setup';
+import {Cover} from '..';
+
+configure({ adapter: new Adapter() });
+
+test('shallow', (t) => {
+ const wrapper = shallow(
+ 
+
+ ), true);
+});
diff --git a/packages/ui/test/helpers/setup.js b/packages/ui/test/helpers/setup.js
new file mode 100644
index 0000000000..1bb92e0a17
--- /dev/null
+++ b/packages/ui/test/helpers/setup.js
@@ -0,0 +1,21 @@
+const { JSDOM } = require('jsdom');
+
+const jsdom = new JSDOM('');
+const { window } = jsdom;
+
+function copyProps(src, target) {
+ const props = Object.getOwnPropertyNames(src)
+ .filter(prop => typeof target[prop] === 'undefined')
+ .reduce((result, prop) => ({
+ ...result,
+ [prop]: Object.getOwnPropertyDescriptor(src, prop)
+ }), {});
+ Object.defineProperties(target, props);
+}
+
+global.window = window;
+global.document = window.document;
+global.navigator = {
+ userAgent: 'node.js'
+};
+copyProps(window, global);
+