Merge pull request #77 from NDLANO/separate-storybook-package

Separate storybook package

.eslintrc.js

@@ -1,15 +1,6 @@
 module.exports = {
-  extends: "ndla",
-  plugins: ["prettier"],
+  extends: 'ndla',
   rules: {
-    "import/no-extraneous-dependencies": 0, // Should be enabled when https://github.com/benmosher/eslint-plugin-import/issues/458 is closed
-    "prettier/prettier": [
-      "error",
-      {
-        jsxBracketSameLine: true,
-        singleQuote: true,
-        trailingComma: "all"
-      }
-    ]
+    'import/no-extraneous-dependencies': 0, // Should be enabled when https://github.com/benmosher/eslint-plugin-import/issues/458 is closed
   },
 };

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-- '6'
+- '8'
 script:
 - yarn lint
 - yarn test

package.json

@@ -3,7 +3,8 @@
   "name": "frontend-packages",
   "description": "NDLA Frontend Packages",
   "scripts": {
-    "lint": "eslint --ext .js --ext .jsx ./packages --ignore-path .gitignore",
+    "lint": "yarn run lint-prettier --silent && eslint --ext .js --ext .jsx ./packages --ignore-path .gitignore",
+    "lint-prettier": "node scripts/prettier.js lint",
     "test": "cross-env NODE_ENV=unittest jest",
     "postinstall": "lerna bootstrap",
     "deploy-storybook": "storybook-to-ghpages",
@@ -13,7 +14,7 @@
     "start": "concurrently --kill-others \"npm run watch\" \"npm run start-storybook\"",
     "start-storybook": "node ./scripts/startStorybook.js",
     "build-storybook": "node ./scripts/buildStorybook.js",
-    "prettier": "node prettier.js write"
+    "prettier": "node ./scripts/prettier.js write"
   },
   "repository": {
     "type": "git",
@@ -28,36 +29,37 @@
   "devDependencies": {
     "@kadira/storybook-deployer": "1.2.0",
     "babel-cli": "6.24.1",
-    "babel-core": "6.24.1",
+    "babel-core": "^6.25.0",
     "babel-jest": "20.0.3",
     "babel-plugin-transform-object-rest-spread": "6.23.0",
-    "babel-preset-env": "^1.4.0",
+    "babel-preset-env": "^1.6.0",
     "babel-preset-es2015": "6.24.1",
     "babel-preset-react": "6.24.1",
-    "chalk": "1.1.3",
+    "chalk": "^2.1.0",
     "chokidar": "1.7.0",
     "classnames": "2.2.5",
-    "concurrently": "3.4.0",
-    "cross-env": "5.0.0",
+    "concurrently": "^3.5.0",
+    "cross-env": "^5.0.4",
+    "css-loader": "0.28.4",
     "eslint": "3.19.0",
     "eslint-config-ndla": "^0.2.1",
-    "eslint-plugin-prettier": "^2.1.2",
     "jest": "20.0.4",
-    "lerna": "2.0.0-rc.5",
+    "lerna": "^2.0.0",
+    "node-sass": "^4.3.0",
     "prettier": "^1.5.2",
     "prop-types": "15.5.10",
-    "react": "15.5.4",
+    "react": "^15.6.1",
     "react-bem-helper": "1.4.1",
-    "react-collapse": "4.0.2",
-    "react-dom": "15.5.4",
+    "react-collapse": "^4.0.3",
+    "react-dom": "^15.6.1",
     "react-height": "3.0.0",
     "react-motion": "0.5.0",
-    "react-router-dom": "^4.1.1",
+    "react-router-dom": "^4.1.2",
     "react-tabs": "1.1.0",
-    "react-test-renderer": "15.5.4",
-    "rimraf": "2.6.1"
-  },
-  "dependencies": {
-    "html-react-parser": "^0.3.4"
+    "react-test-renderer": "^15.6.1",
+    "rimraf": "2.6.1",
+    "sass-loader": "^6.0.6",
+    "style-loader": "^0.18.2",
+    "webpack": "^3.4.1"
   }
 }

packages/ndla-ui/.storybook/config.js → packages/designmanual/.storybook/config.js

@@ -1,10 +1,10 @@
 import { configure } from '@storybook/react';
 import { setOptions } from '@storybook/addon-options';
-import '../src/main.scss';
-import '../src/editor.scss';
-import '../src/audioSearch.scss';
-import '../src/imageSearch.scss';
-import '../src/videoSearch.scss';
+import '../../ndla-ui/src/main.scss';
+import '../../ndla-ui/src/editor.scss';
+import '../../ndla-ui/src/audioSearch.scss';
+import '../../ndla-ui/src/imageSearch.scss';
+import '../../ndla-ui/src/videoSearch.scss';
 
 setOptions({
   name: 'NDLA Designmanual',

packages/ndla-ui/.storybook/webpack.config.js → packages/designmanual/.storybook/webpack.config.js

@@ -6,7 +6,7 @@ module.exports = {
       {
         test: /.scss$/,
         loaders: ['style-loader', 'css-loader', 'sass-loader'],
-        include: path.resolve(__dirname, '../src/'),
+        include: path.resolve(__dirname, '../../ndla-ui/src/'),
       },
     ],
   },

packages/designmanual/README.md

@@ -0,0 +1,13 @@
+# Designmanual
+
+Designmanual/Styleguide for NDLA.
+
+## Getting started
+
+```sh
+$ yarn start
+```
+
+```sh
+$ npm start
+```

packages/designmanual/package.json

@@ -0,0 +1,52 @@
+{
+  "private": true,
+  "name": "designmanual",
+  "version": "1.0.0",
+  "description": "Styleguide and ui component library for NDLA.",
+  "license": "GPL-3.0",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "jsnext:main": "es/index.js",
+  "scripts": {
+    "start": "npm run storybook",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook -c .storybook -o ../../.out"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/NDLANO/frontend-packages.git/ndla-ui/"
+  },
+  "author": "[email protected]",
+  "peerDependencies": {
+    "prop-types": "^15.5.8",
+    "react": "^15.5.4"
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "3.0.0",
+    "@storybook/addon-links": "3.0.0",
+    "@storybook/addon-options": "3.0.0",
+    "@storybook/react": "3.0.0",
+    "classnames": "2.2.5",
+    "react-bem-helper": "1.4.1",
+    "react-prop-types": "0.4.0",
+    "react-sticky-header": "^0.1.6",
+    "btoa": "^1.1.2",
+    "decorate-component-with-props": "^1.0.2",
+    "draft-convert": "1.4.3",
+    "draft-js": "0.10.0",
+    "extract-text-webpack-plugin": "2.1.0",
+    "inuitcss": "^6.0.0-beta.4",
+    "isomorphic-fetch": "^2.2.1",
+    "moment": "^2.17.1",
+    "ndla-article-scripts": "^0.0.7",
+    "ndla-audio-search": "^0.1.1-0",
+    "ndla-editor": "^0.1.6",
+    "ndla-image-search": "^0.1.6",
+    "ndla-licenses": "^0.0.9",
+    "ndla-tabs": "^0.3.3",
+    "ndla-util": "^0.1.4",
+    "ndla-ui": "^0.7.6",
+    "ndla-video-search": "^0.1.6",
+    "react-helmet": "5.1.3"
+  }
+}

packages/ndla-ui/stories/article/ArticleByline.jsx → packages/designmanual/stories/article/ArticleByline.jsx

@@ -10,7 +10,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import BEMHelper from 'react-bem-helper';
 import moment from 'moment';
-import { User, Time } from '../../src/icons';
+import { User, Time } from 'ndla-ui/icons';
 import LicenseExample from './LicenseExample';
 
 const classes = new BEMHelper({

packages/ndla-ui/stories/article/ArticleExample.jsx → packages/designmanual/stories/article/ArticleExample.jsx

@@ -9,7 +9,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Article, OneColumn, LayoutItem } from '../../src';
+import { Article, OneColumn, LayoutItem } from 'ndla-ui';
 import ArticleByline from './ArticleByline';
 import LicenseExample from './LicenseExample';
 

packages/ndla-ui/stories/article/ArticleLoader.jsx → packages/designmanual/stories/article/ArticleLoader.jsx

@@ -9,9 +9,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Helmet from 'react-helmet';
+import { Button } from 'ndla-ui';
 import { fetchArticle } from './articleApi';
 import SimpleSubmitForm from './SimpleSubmitForm';
-import { Button } from '../../src/';
 import ArticleExample from './ArticleExample';
 
 class ArticleLoader extends Component {

packages/ndla-ui/stories/article/FigureWithLicense.jsx → packages/designmanual/stories/article/FigureWithLicense.jsx

@@ -13,7 +13,7 @@ import {
   addShowFigureDetailsClickListeners,
 } from 'ndla-article-scripts';
 
-import { Figure, FigureCaption, FigureDetails } from '../../src';
+import { Figure, FigureCaption, FigureDetails } from 'ndla-ui';
 
 const caption = `I værmeldingene til NRK på 1980-tallet var symbolet for strålende
             solskinn en hvit sirkel. Ved skiftende vær var sirkelen delt i to

packages/ndla-ui/stories/article/LicenseExample.jsx → packages/designmanual/stories/article/LicenseExample.jsx

@@ -21,7 +21,7 @@ import {
   MediaListItemActions,
   MediaListItemImage,
   MediaListItemMeta,
-} from '../../src';
+} from 'ndla-ui';
 
 const VideoContent = () =>
   <div>

packages/ndla-ui/stories/article/LicenseExample2.jsx → packages/designmanual/stories/article/LicenseExample2.jsx

@@ -7,11 +7,19 @@
  */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import Tabs from 'ndla-tabs';
 import { getLicenseByAbbreviation } from 'ndla-licenses';
-import { LicenseShape } from '../../src/shapes';
 
-import { Icon, Button, LicenseByline } from '../../src';
+import { Icon, Button, LicenseByline } from 'ndla-ui';
+
+const LicenseShape = PropTypes.shape({
+  short: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  userFriendlyTitle: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  rights: PropTypes.arrayOf(PropTypes.string).isRequired,
+});
 
 const VideoContent = () =>
   <div>

packages/ndla-ui/stories/article/LicenseExampleGroups.jsx → packages/designmanual/stories/article/LicenseExampleGroups.jsx

@@ -7,11 +7,19 @@
  */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import Tabs from 'ndla-tabs';
 import { getLicenseByAbbreviation } from 'ndla-licenses';
-import { LicenseShape } from '../../src/shapes';
 
-import { Icon, Button, LicenseByline } from '../../src';
+import { Icon, Button, LicenseByline } from 'ndla-ui';
+
+const LicenseShape = PropTypes.shape({
+  short: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  userFriendlyTitle: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  rights: PropTypes.arrayOf(PropTypes.string).isRequired,
+});
 
 const VideoContent = () =>
   <div>

packages/ndla-ui/stories/article/LicenseExampleImage.jsx → packages/designmanual/stories/article/LicenseExampleImage.jsx

@@ -9,9 +9,9 @@
 import React from 'react';
 import { getLicenseByAbbreviation } from 'ndla-licenses';
 
-import { Copy, Download } from '../../src/icons';
+import { Copy, Download } from 'ndla-ui/icons';
 
-import { LicenseByline } from '../../src';
+import { LicenseByline } from 'ndla-ui';
 
 const LicenseExampleImage = () =>
   <div className="u-expanded">

packages/ndla-ui/stories/article/LicenseExampleImageAlt.jsx → packages/designmanual/stories/article/LicenseExampleImageAlt.jsx

@@ -9,9 +9,9 @@
 import React from 'react';
 import { getLicenseByAbbreviation } from 'ndla-licenses';
 
-import { Copy, Download } from '../../src/icons';
+import { Copy, Download } from 'ndla-ui/icons';
 
-import { LicenseByline } from '../../src';
+import { LicenseByline } from 'ndla-ui';
 
 const LicenseExampleImageAlt = () =>
   <div className="u-expanded">

packages/ndla-ui/stories/article/LicenseExampleVideo.jsx → packages/designmanual/stories/article/LicenseExampleVideo.jsx

@@ -9,7 +9,7 @@
 import React from 'react';
 import { getLicenseByAbbreviation } from 'ndla-licenses';
 
-import { LicenseByline } from '../../src';
+import { LicenseByline } from 'ndla-ui';
 
 const LicenseExampleImage = () =>
   <div className="license u-expanded">

packages/ndla-ui/stories/article/SimpleSubmitForm.jsx → packages/designmanual/stories/article/SimpleSubmitForm.jsx

@@ -8,7 +8,7 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Button } from '../../src';
+import { Button } from 'ndla-ui';
 
 class SimpleSubmitForm extends Component {
   constructor(props) {

packages/ndla-ui/stories/basic-styles.jsx → packages/designmanual/stories/basic-styles.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
+import { Table, LayoutItem } from 'ndla-ui';
 import { Center } from './helpers';
 import article from '../dummydata/index';
-import { Table, LayoutItem } from '../src';
 
 const heading = (articleHTML, level) => {
   if (!articleHTML) return `<h${level}>Overskrift ${level}</h${level}>`;

packages/ndla-ui/stories/collated-components.jsx → packages/designmanual/stories/collated-components.jsx

@@ -4,9 +4,8 @@ import React from 'react';
 
 import { storiesOf } from '@storybook/react';
 import { BY, NC, ND } from 'ndla-licenses';
-
-import { Center } from './helpers';
 import {
+  Glossary,
   Button,
   FilterList,
   Pager,
@@ -18,9 +17,10 @@ import {
   OneColumn,
   LayoutItem,
   RelatedArticles,
-} from '../src';
-import { Time, User } from '../src/icons';
-import Glossary from './../src/glossary/Glossary';
+} from 'ndla-ui';
+import { Time, User } from 'ndla-ui/icons';
+
+import { Center } from './helpers';
 import FigureWithLicense from './article/FigureWithLicense';
 import articles, {
   topicList,

packages/ndla-ui/stories/concepts.js → packages/designmanual/stories/concepts.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { storiesOf } from '@storybook/react';
-import { LayoutItem } from '../src';
+import { LayoutItem } from 'ndla-ui';
 import { Center } from './helpers';
 
 storiesOf('Konsepter', module).add('Navngivning av innholdselementer', () =>

packages/ndla-ui/stories/editor/ArticleEditor.jsx → packages/designmanual/stories/editor/ArticleEditor.jsx

@@ -11,9 +11,9 @@ import PropTypes from 'prop-types';
 import { convertFromHTML } from 'draft-convert';
 import { Entity, EditorState } from 'draft-js';
 import NDLAEditor, { withStateHandler } from 'ndla-editor';
+import { Button } from 'ndla-ui';
 import { fetchArticleFromApi, fetchWithToken } from '../article/articleApi';
 import SimpleSubmitForm from '../article/SimpleSubmitForm';
-import { Button } from '../../src/';
 
 const StatefulNDLAEditor = withStateHandler(NDLAEditor);
 

packages/ndla-ui/stories/molecules/breadcrumbs.jsx → packages/designmanual/stories/molecules/breadcrumbs.jsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 
-import { TopicBreadcrumb } from '../../src';
+import { TopicBreadcrumb } from 'ndla-ui';
 import { topicList, subjectList } from '../../dummydata/index';
 
 export const TopicBreadcrumbDefault = () =>

packages/ndla-ui/stories/molecules/mastheads.jsx → packages/designmanual/stories/molecules/mastheads.jsx

@@ -17,7 +17,7 @@ import {
   ClickToggle,
   TopicMenu,
   TopicBreadcrumb,
-} from '../../src';
+} from 'ndla-ui';
 import { topicMenu, subjectList, topicList } from '../../dummydata';
 
 export const MastheadLeftRight = () =>