Feature/add pagination first last pages

.eslintignore

@@ -3,4 +3,5 @@ dist/**
 full/**
 lib/**
 node_modules
-reports
+reports
+*.story.js

.eslintrc

@@ -1,11 +1,6 @@
 {
   "extends": "airbnb",
   "parser": "babel-eslint",
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    }
-  },
   "env": {
     "jest": true
   },
@@ -25,6 +20,7 @@
     "import/prefer-default-export": 0,
     "react/forbid-prop-types": 0,
     "react/prefer-es6-class": ["error", "always"],
+    "react/destructuring-assignment": 0,
     "max-len": 0,
     "jsx-a11y/accessible-emoji": 0,
     "jsx-a11y/label-has-for": 0,
@@ -36,7 +32,8 @@
     "jsx-a11y/click-events-have-key-events": 0,
     "function-paren-newline": 0,
     "jsx-a11y/anchor-is-valid": 0,
-    "object-curly-newline": 0
+    "object-curly-newline": 0,
+    "react/forbid-foreign-prop-types": 0
   },
   "globals": {
     "document": true,

.gitignore

@@ -36,6 +36,9 @@ build/Release
 node_modules/
 jspm_packages/
 
+# JetBrains IDE config
+.idea/
+
 # Typescript v1 declaration files
 typings/
 
@@ -60,6 +63,7 @@ typings/
 .DS_Store
 
 .out
+out*
 
 /reports
 /dist

.npmignore

@@ -2,7 +2,6 @@
 .storybook
 docs
 node_modules
-src
 .babelrc
 .eslint*
 .git*

.storybook/addons.js

@@ -1,8 +1,8 @@
-import '@storybook/addon-options/register';
+import '@storybook/addon-storysource/register';
 // import '@storybook/addon-actions/register';
-// import '@storybook/addon-links/register';
-// import '@storybook/addon-events/register';
-// import '@storybook/addon-knobs/register';
-// import '@storybook/addon-backgrounds/register';
-// import '@storybook/addon-a11y/register';
-// import '@storybook/addon-jest/register';
+import '@storybook/addon-links/register';
+import '@storybook/addon-events/register';
+import '@storybook/addon-options/register';
+import '@storybook/addon-knobs/register';
+import '@storybook/addon-a11y/register';
+import '@storybook/addon-viewport/register';

.storybook/config.js

@@ -1,30 +1,36 @@
-import { configure, setAddon } from '@storybook/react';
+import React from 'react';
+import { configure, addDecorator } from '@storybook/react';
 import { setOptions } from '@storybook/addon-options';
+import { withInfo } from '@storybook/addon-info';
+import { select, withKnobs } from '@storybook/addon-knobs';
+import { configureViewport, INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import extraViewports from './extra-viewports.json';
 
-// deprecated usage of infoAddon
-import infoAddon from '@storybook/addon-info';
+import 'index.sass';
 
 setOptions({
   name: 'React Bulma Components',
   url: 'https://github.com/couds/react-bulma-components',
-  goFullScreen: false,
-  showStoriesPanel: true,
-  showAddonPanel: false,
-  showSearchBox: false,
-  addonPanelInRight: false,
-  sortStoriesByKind: false,
-  hierarchySeparator: /\/|\./,
+  showAddonPanel: true,
 });
 
-// deprecated usage of infoAddon
-setAddon(infoAddon);
+addDecorator(withKnobs);
 
-require('../src');
+addDecorator(withInfo({
+  source: false,
+}));
 
-// automatically import all story js files that end with *.stories.js
-const req = require.context('../src', true, /\.story\.js$/)
+configureViewport({
+  viewports: {
+    ...INITIAL_VIEWPORTS,
+    ...extraViewports,
+  },
+});
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../src', true, /.story.js$/);
 function loadStories() {
-  req.keys().forEach((filename) => req(filename))
+  req.keys().forEach(filename => req(filename));
 }
 
-configure(loadStories, module);
+configure(loadStories, module);

.storybook/extra-viewports.json

@@ -0,0 +1,18 @@
+{
+  "kindleFire2": {
+    "name": "Kindle Fire 2",
+    "styles": {
+      "width": "600px",
+      "height": "963px"
+    },
+    "type": "tablet"
+  },
+  "kindleFireHD": {
+    "name": "Kindle Fire HD",
+    "styles": {
+      "width": "533px",
+      "height": "801px"
+    },
+    "type": "tablet"
+  }
+}

.storybook/preview-head.html

@@ -6,16 +6,13 @@
 
   html {
     box-sizing: border-box;
+    background: transparent !important;
   }
 
   * {
     box-sizing: inherit;
   }
 
-  div.button-display .button:not(.is-fullwidth) {
-    margin: 5px;
-  }
-
   .bd-notification {
     background-color: whitesmoke;
     border-radius: 3px;

.storybook/webpack.config.js

@@ -1,29 +1,43 @@
-// you can use this file to add your custom webpack plugins, loaders and anything you like.
-// This is just the basic way to add additional webpack configurations.
-// For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config
-
-// IMPORTANT
-// When you add this file, we won't add the default configurations which is similar
-// to "React Create App". This only has babel loader to load JavaScript.
-
 const path = require('path');
+const { DefinePlugin } = require('webpack');
 
-module.exports = {
-  plugins: [
-    // your custom plugins
-  ],
-  module: {
-    rules: [
-      {
-        test: /\.s(c|a)ss$/,
-        loader: 'style-loader!css-loader!sass-loader',
-      },
-    ],
-  },
-  resolve: {
-    modules: ['node_modules', 'src'],
-    alias: {
-      '_variables.sass': path.resolve(__dirname, '..', 'src/components/_variables.sass'),
+
+module.exports = (baseConfig, env, defaultConfig) => {
+  const config = ({
+    ...defaultConfig,
+    mode: 'development',
+    module: {
+      ...defaultConfig.module,
+      rules: [
+        {
+          test: /\.story\.js?$/,
+          loaders: [require.resolve('@storybook/addon-storysource/loader')],
+          enforce: 'pre',
+        },
+        {
+          test: /\.s[ca]ss$/,
+          loader: 'style-loader!css-loader!resolve-url-loader!sass-loader',
+        },
+        ...defaultConfig.module.rules,
+      ],
+    },
+    resolve: {
+      ...defaultConfig.resolve,
+      modules: ['node_modules', 'src', ...defaultConfig.resolve.modules],
+      alias: {
+        ...defaultConfig.resolve.alias,
+        '~_variables.sass': path.resolve(__dirname, '../src/components/_variables.sass'),
+        'react-bulma-components/lib': path.resolve(__dirname, '../src'),
+      }
+      // https://github.com/graphql/graphql-js#using-in-a-browser
     },
-  },
-};
+    plugins: [
+      ...defaultConfig.plugins,
+      // graphql sources check process variable
+      new DefinePlugin({
+        process: JSON.stringify(true),
+      }),
+    ],
+  });
+  return config;
+};