Merge pull request #40 from TechnologyAdvice/feature/restructure

Restructure to Semantic structure

gulp/tasks/build.js

@@ -24,7 +24,11 @@ gulp.task('generate-doc-json', function(cb) {
   var gulpReactDocgen = require('../plugins/gulp-react-docgen');
 
   return gulp.src([
-    paths.src + '/components/**/*.js',
+    paths.srcAddons + '/**/*.js',
+    paths.srcElements + '/**/*.js',
+    paths.srcCollections + '/**/*.js',
+    paths.srcModules + '/**/*.js',
+    paths.srcViews + '/**/*.js',
     '!' + paths.src + '/**/Style.js'
   ])
     .pipe(g.plumber())

index.js

@@ -1,51 +1,65 @@
-import Button from './src/components/Button/Button';
-import Checkbox from './src/components/Checkbox/Checkbox';
-import Column from './src/components/Grid/Column';
-import Container from './src/components/Container/Container';
-import Confirm from './src/components/Confirm/Confirm';
-import Field from './src/components/Field/Field';
-import Form from './src/components/Form/Form';
-import Grid from './src/components/Grid/Grid';
-import Row from './src/components/Grid/Row';
-import Input from './src/components/Input/Input';
-import Menu from './src/components/Menu/Menu';
-import MenuItem from './src/components/Menu/MenuItem';
-import Modal from './src/components/Modal/Modal';
-import ModalContent from './src/components/Modal/ModalContent';
-import ModalFooter from './src/components/Modal/ModalFooter';
-import ModalHeader from './src/components/Modal/ModalHeader';
-import Segment from './src/components/Segment/Segment';
-import Select from './src/components/Select/Select';
-import Table from './src/components/Table/Table';
-import TableColumn from './src/components/Table/TableColumn';
-import TableCell from './src/components/Table/TableCell';
-import TableHeader from './src/components/Table/TableHeader';
-import TableRow from './src/components/Table/TableRow';
-import Textarea from './src/components/Textarea/Textarea';
+// Addons
+import Confirm from 'src/addons/Confirm/Confirm';
+import Textarea from 'src/addons/Textarea/Textarea';
+
+// Collections
+import Column from 'src/collections/Grid/Column';
+import Field from 'src/collections/Form/Field';
+import Form from 'src/collections/Form/Form';
+import Grid from 'src/collections/Grid/Grid';
+import Row from 'src/collections/Grid/Row';
+import Menu from 'src/collections/Menu/Menu';
+import MenuItem from 'src/collections/Menu/MenuItem';
+import Table from 'src/collections/Table/Table';
+import TableColumn from 'src/collections/Table/TableColumn';
+import TableCell from 'src/collections/Table/TableCell';
+import TableHeader from 'src/collections/Table/TableHeader';
+import TableRow from 'src/collections/Table/TableRow';
+
+// Elements
+import Button from 'src/elements/Button/Button';
+import Container from 'src/elements/Container/Container';
+import Input from 'src/elements/Input/Input';
+import Segment from 'src/elements/Segment/Segment';
+
+// Modules
+import Checkbox from 'src/modules/Checkbox/Checkbox';
+import Modal from 'src/modules/Modal/Modal';
+import ModalContent from 'src/modules/Modal/ModalContent';
+import ModalFooter from 'src/modules/Modal/ModalFooter';
+import ModalHeader from 'src/modules/Modal/ModalHeader';
+import Dropdown from 'src/modules/Dropdown/Dropdown';
 
 export default {
-  Button,
-  Checkbox,
-  Column,
-  Container,
+  // Addons
   Confirm,
+  Textarea,
+
+  // Collections
+  Column,
   Field,
   Form,
   Grid,
-  Input,
+  Row,
   Menu,
   MenuItem,
-  Modal,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  Row,
-  Segment,
-  Select,
   Table,
   TableColumn,
   TableCell,
   TableHeader,
   TableRow,
-  Textarea,
+
+  // Elements
+  Button,
+  Container,
+  Input,
+  Segment,
+
+  // Modules
+  Checkbox,
+  Modal,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  Dropdown,
 };

paths.js

@@ -9,8 +9,13 @@ module.exports = {
   docsBuild: PROJECT_ROOT + '/docs/build',
   gulp: PROJECT_ROOT + '/gulp',
   src: PROJECT_ROOT + '/src',
+  srcAddons: PROJECT_ROOT + '/src/addons',
+  srcElements: PROJECT_ROOT + '/src/elements',
+  srcCollections: PROJECT_ROOT + '/src/collections',
+  srcModules: PROJECT_ROOT + '/src/modules',
+  srcViews: PROJECT_ROOT + '/src/views',
+  srcUtils: PROJECT_ROOT + '/src/utils',
   test: PROJECT_ROOT + '/test',
-  utils: PROJECT_ROOT + '/src/utils',
   testMocks: PROJECT_ROOT + '/test/mocks',
   node_modules: PROJECT_ROOT + '/node_modules',
 };

src/components/Confirm/Confirm.js → src/addons/Confirm/Confirm.js

@@ -1,10 +1,10 @@
 import React, {Component, PropTypes} from 'react';
 import Promise from 'bluebird';
 
-import Modal from 'src/components/Modal/Modal';
-import ModalContent from 'src/components/Modal/ModalContent';
-import ModalFooter from 'src/components/Modal/ModalFooter';
-import ModalHeader from 'src/components/Modal/ModalHeader';
+import Modal from 'src/modules/Modal/Modal';
+import ModalContent from 'src/modules/Modal/ModalContent';
+import ModalFooter from 'src/modules/Modal/ModalFooter';
+import ModalHeader from 'src/modules/Modal/ModalHeader';
 
 class Confirm extends Component {
   static propTypes = {

src/components/Textarea/Textarea.js → src/addons/Textarea/Textarea.js

@@ -1,5 +1,5 @@
 import React, {Component, PropTypes} from 'react';
-import Field from '../Field/Field';
+import Field from 'src/collections/Form/Field';
 
 class Textarea extends Component {
   static propTypes = {

src/components/Form/Form.js → src/collections/Form/Form.js

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import React, {Children, Component, PropTypes} from 'react';
-import Button from '../Button/Button';
+import Button from 'src/elements/Button/Button';
 
 class Form extends Component {
   static propTypes = {

src/components/Checkbox/Checkbox.js → src/modules/Checkbox/Checkbox.js

@@ -1,33 +1,15 @@
 import _ from 'lodash';
 import React, {Component, PropTypes} from 'react';
-import radium from 'radium';
 import classNames from 'classnames';
 import $ from 'jquery';
 
-/**
- * A versatile checkbox with many styles.
- *
- * @example
- * // Regular checkbox
- * <Checkbox />
- *
- * @example
- * // Slider style checkbox
- * <Checkbox type='slider' />
- *
- * @example
- * // Toggle switch style checkbox
- * <Checkbox type='toggle' />
- */
-@radium
 export default class Checkbox extends Component {
   static propTypes = {
     className: PropTypes.string,
     defaultChecked: PropTypes.bool,
     label: PropTypes.string,
     name: PropTypes.string,
     onChange: PropTypes.func,
-    style: PropTypes.array,
     type: PropTypes.string,
   };
 

src/components/Select/Select.js → src/modules/Dropdown/Dropdown.js

@@ -1,5 +1,5 @@
 import React, {Component, PropTypes} from 'react';
-import Field from '../Field/Field';
+import Field from 'src/collections/Form/Field';
 
 class Select extends Component {
   static propTypes = {

test/src/components/Confirm-test.js → test/specs/addons/Confirm-test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Confirm from 'src/components/Confirm/Confirm';
+import {Confirm} from 'stardust';
 
 describe('Confirm', () => {
   it('default prop abortLabel should be "Cancel"', () => {

test/src/components/Textarea-test.js → test/specs/addons/Textarea-test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Textarea from '../../../src/components/Textarea/Textarea';
+import {Textarea} from 'stardust';
 
 describe('Textarea', () => {
   it('has a default value', () => {

test/src/components/Field-test.js → test/specs/collections/Form/Field-test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Field from 'src/components/Field/Field';
+import {Field} from 'stardust';
 import numberToWord from 'src/utils/numberToWord';
 
 describe('Field', () => {

test/src/components/Grid-test.js → test/specs/collections/Grid/Grid-test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import faker from 'faker';
-import Grid from 'src/components/Grid/Grid';
+import {Grid} from 'stardust';
 
 describe('Grid', () => {
   it('is an sd-grid', () => {

test/src/components/Menu-test.js → test/specs/collections/Menu/Menu-test.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import Menu from 'src/components/Menu/Menu';
-import MenuItem from 'src/components/Menu/MenuItem';
+import {Menu, MenuItem} from 'stardust';
 
 describe('Menu', () => {
   it('should render children', () => {

test/src/components/Table-test.js → test/specs/collections/Table/Table-test.js

@@ -1,8 +1,7 @@
 import _ from 'lodash';
 import faker from 'faker';
 import React from 'react';
-import Table from 'src/components/Table/Table.js';
-import TableColumn from 'src/components/Table/TableColumn';
+import {Table, TableColumn} from 'stardust';
 
 describe('Table', () => {
   let randomDataKey;

test/src/components/Button-test.js → test/specs/elements/Button/Button-test.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import Button from 'src/components/Button/Button';
 import sandbox from 'test/utils/Sandbox-util';
+import {Button} from 'stardust';
 
 describe('Button', () => {
   it('has type button by default', () => {

test/src/components/Input-test.js → test/specs/elements/Input/Input-test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Input from 'src/components/Input/Input';
+import {Input} from 'stardust';
 
 describe('Input', () => {
   it('has the input type of text by default', () => {

test/src/components/Segment-test.js → test/specs/elements/Segment/Segment-test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Segment from 'src/components/Segment/Segment';
+import {Segment} from 'stardust';
 
 describe('Segment', () => {
   it('is an sd-segment', () => {

test/src/index-test.js → test/specs/index-test.js

@@ -2,7 +2,11 @@ import _ from 'lodash';
 import path from 'path';
 import stardust from 'index';
 
-let componentPaths = require.context('src/components/', true, /[^Style\.js$]\.js$/i);
+let componentPaths = require.context(
+  'src/',
+  true,
+  /[addons|elements|collections|modules][^Style\.js$]\.js$/i
+);
 let componentNames = _.map(componentPaths.keys(), key => {
   return path.basename(key).replace('.js', '');
 });

test/src/components/Checkbox-test.js → test/specs/modules/Checkbox/Checkbox-test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Checkbox from '../../../src/components/Checkbox/Checkbox';
+import {Checkbox} from 'stardust';
 
 describe('Checkbox', () => {
   it('can be checked by default', () => {

test/specs/modules/Dropdown/Dropdown-test.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import {Dropdown} from 'stardust';
+
+describe('Dropdown', () => {
+  it('has a default value', () => {
+    let options = [
+      {value: '', text: 'Please select a role'},
+      {value: 'admin', text: 'Admin'},
+      {value: 'editor', text: 'Editor'}
+    ];
+    let renderedDropdown = render(<Dropdown label='Roles' value='admin' options={options} />).findTag('select');
+    renderedDropdown.props.value.should.equal('admin');
+  });
+  it('has assigned amount of options', () => {
+    let options = [
+      {value: '', text: 'Please select a color'},
+      {value: 'red', text: 'red'},
+      {value: 'green', text: 'green'},
+      {value: 'orange', text: 'orange'},
+      {value: 'purple', text: 'purple'},
+      {value: 'blue', text: 'blue'}
+    ];
+    let renderedDropdown = render(<Dropdown options={options} />);
+    renderedDropdown.findTag('select').props.children.length.should.equal(6);
+    renderedDropdown.scryTag('option')[2].props.value.should.equal('green');
+  });
+});

test/src/utils/numberToWord-test.js → test/specs/utils/numberToWord-test.js

@@ -1,5 +1,5 @@
-import numberToWord from 'src/utils/numberToWord.js';
 import _ from 'lodash';
+import numberToWord from 'src/utils/numberToWord';
 
 let words = [
   'one',