examples enhance

* utils for products generator

* load test for each *.test.js file in packages folder

* [test] unit test for utils/common

* refactor all products with productGenerator for all examples

* refactor folder structure

* move component <Code /> to src/components/common
* rename component file name

package.json

@@ -70,7 +70,7 @@
     ],
     "testEnvironment": "node",
     "testMatch": [
-      "**/test/*.js"
+      "**/test/**/*.js"
     ]
   }
 }

packages/react-bootstrap-table2-example/.storybook/webpack.config.js

@@ -4,10 +4,13 @@ const sourcePath = path.join(__dirname, '../../react-bootstrap-table2/src');
 const sourceStylePath = path.join(__dirname, '../../react-bootstrap-table2/style');
 const storyPath = path.join(__dirname, '../stories');
 const examplesPath = path.join(__dirname, '../examples');
+const srcPath = path.join(__dirname, '../src');
 const aliasPath = {
   examples: examplesPath,
-  common: path.join(examplesPath, 'common'),
   stories: storyPath,
+  src: srcPath,
+  components: path.join(srcPath, 'components'),
+  utils: path.join(srcPath, 'utils'),
 };
 
 const loaders = [{

packages/react-bootstrap-table2-example/examples/basic/borderless-table.js

@@ -1,23 +1,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 const columns = [{
   dataField: 'id',

packages/react-bootstrap-table2-example/examples/basic/index.js

@@ -1,23 +1,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 const columns = [{
   dataField: 'id',

packages/react-bootstrap-table2-example/examples/basic/no-data-table.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
 
 const columns = [{
   dataField: 'id',

packages/react-bootstrap-table2-example/examples/basic/striped-hover-condensed-table.js

@@ -1,23 +1,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 const columns = [{
   dataField: 'id',

packages/react-bootstrap-table2-example/examples/columns/column-align-table.js

@@ -2,23 +2,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 const columns = [{
   dataField: 'id',

packages/react-bootstrap-table2-example/examples/columns/column-class-table.js

@@ -2,23 +2,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 const columns = [{
   dataField: 'id',

packages/react-bootstrap-table2-example/examples/columns/column-event-table.js

@@ -3,23 +3,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 const columns = [{
   dataField: 'id',

packages/react-bootstrap-table2-example/examples/columns/column-format-table.js

@@ -1,24 +1,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i,
-      onSale: Math.random() >= 0.5
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 function priceFormatter(cell, row) {
   if (row.onSale) {

packages/react-bootstrap-table2-example/examples/columns/column-format-with-extra-data-table.js

@@ -2,23 +2,14 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      rank: Math.random() < 0.5 ? 'down' : 'up'
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator(5, (value, index) => ({
+  id: index,
+  name: `User Name ${index}`,
+  rank: Math.random() < 0.5 ? 'down' : 'up'
+}));
 
 function rankFormatter(cell, row, rowIndex, formatExtraData) {
   return (

packages/react-bootstrap-table2-example/examples/columns/column-hidden-table.js

@@ -2,23 +2,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 const columns = [{
   dataField: 'id',

packages/react-bootstrap-table2-example/examples/columns/column-style-table.js

@@ -2,23 +2,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 const columns = [{
   dataField: 'id',

packages/react-bootstrap-table2-example/examples/columns/column-title-table.js

@@ -2,23 +2,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 const columns = [{
   dataField: 'id',

packages/react-bootstrap-table2-example/examples/columns/nested-data-table.js

@@ -1,27 +1,18 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `User Name ${id}`,
-      phone: 21009831 + i,
-      address: {
-        city: 'New York',
-        postCode: '1111-4512'
-      }
-    });
+const products = productsGenerator(5, (value, index) => ({
+  id: index,
+  name: `User Name ${index}`,
+  phone: 21009831 + index,
+  address: {
+    city: 'New York',
+    postCode: '1111-4512'
   }
-}
-
-addProducts(5);
+}));
 
 const columns = [{
   dataField: 'id',

packages/react-bootstrap-table2-example/examples/header-columns/column-align-table.js

@@ -2,23 +2,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 const columns = [{
   dataField: 'id',

packages/react-bootstrap-table2-example/examples/header-columns/column-class-table.js

@@ -2,23 +2,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 const columns = [{
   dataField: 'id',

packages/react-bootstrap-table2-example/examples/header-columns/column-event-table.js

@@ -3,23 +3,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 const columns = [{
   dataField: 'id',

packages/react-bootstrap-table2-example/examples/header-columns/column-format-table.js

@@ -2,24 +2,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i,
-      onSale: Math.random() >= 0.5
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 function priceFormatter(column, colIndex) {
   return (

packages/react-bootstrap-table2-example/examples/header-columns/column-style-table.js

@@ -2,23 +2,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 const columns = [{
   dataField: 'id',

packages/react-bootstrap-table2-example/examples/header-columns/column-title-table.js

@@ -2,23 +2,10 @@
 import React from 'react';
 
 import { BootstrapTableful } from 'react-bootstrap-table2';
-import Code from 'common/codeBlock';
+import Code from 'components/common/code-block';
+import { productsGenerator } from 'utils/common';
 
-const products = [];
-
-function addProducts(quantity) {
-  const startId = products.length;
-  for (let i = 0; i < quantity; i += 1) {
-    const id = startId + i;
-    products.push({
-      id,
-      name: `Item name ${id}`,
-      price: 2100 + i
-    });
-  }
-}
-
-addProducts(5);
+const products = productsGenerator();
 
 const columns = [{
   dataField: 'id',

packages/react-bootstrap-table2-example/src/utils/common.js

@@ -0,0 +1,21 @@
+/**
+ * products generator for stories
+ * 
+ * @param {Number} quantity - quantity of products
+ * @param {Function} callback - callback func which is similiar to 'mapFunction'
+ * aims to customize product format
+ * 
+ * @return {Array} - products array
+ */
+export const productsGenerator = (quantity = 5, callback) => {
+  if (callback) return Array.from({ length: quantity }, callback);
+
+  // if no given callback, retrun default product format.
+  return (
+    Array.from({ length: quantity }, (value, index) => ({
+      id: index,
+      name: `Item name ${index}`,
+      price: 2100 + index
+    }))
+  );
+};

packages/react-bootstrap-table2-example/test/utils/common.test.js

@@ -0,0 +1,36 @@
+import { productsGenerator } from '../../src/utils/common';
+
+describe('Utils', () => {
+  describe('productsGenerator', () => {
+    const quantity = 2;
+
+    it('should return an array', () => {
+      expect(Array.isArray(productsGenerator())).toBe(true);
+    });
+
+    it('should return 5 products without params', () => {
+      expect(productsGenerator().length).toEqual(5);
+    });
+
+    it('should return an array with given quntity', () => {
+      expect(productsGenerator(quantity).length).toEqual(quantity);
+    });
+
+    describe('when callback is defined', () => {
+      const callback = (value, index) => ({
+        id: index,
+        name: 'react-bootstrap-table-2'
+      });
+
+      it('should return customized products format', () => {
+        const products = productsGenerator(quantity, callback);
+        const product = products[0];
+
+        expect(Array.isArray(products)).toBe(true);
+        expect(products.length).toBe(quantity);
+        expect(product).toHaveProperty('id', 0);
+        expect(product).toHaveProperty('name', 'react-bootstrap-table-2');
+      });
+    });
+  });
+});