├── .gitignore
├── .storybook
    ├── addons.js
    └── config.js
├── README.md
├── components
    ├── JTable
    │   ├── JTable.stories.js
    │   ├── JTable.vue
    │   └── package.json
    └── JTableRow
    │   ├── JTableRow.stories.js
    │   ├── JTableRow.vue
    │   └── package.json
├── lerna.json
├── package-lock.json
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | storybook-static
3 | npm-debug.log*
4 | lerna-debug.log*
5 | 


--------------------------------------------------------------------------------
/.storybook/addons.js:
--------------------------------------------------------------------------------
1 | import '@storybook/addon-actions/register';
2 | import '@storybook/addon-links/register';
3 | 


--------------------------------------------------------------------------------
/.storybook/config.js:
--------------------------------------------------------------------------------
 1 | import { configure } from '@storybook/vue';
 2 | 
 3 | // automatically import all files ending in *.stories.js
 4 | const req = require.context('../components', true, /\.stories\.js$/);
 5 | function loadStories() {
 6 |   req.keys().forEach(filename => req(filename));
 7 | }
 8 | 
 9 | configure(loadStories, module);
10 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # medium-reusable-vue-components
 2 | Sharing reusable Vue.js components with Lerna, Storybook, and npm
 3 | 
 4 | 
 5 | ## Project setup
 6 | ``` bash
 7 | npm install
 8 | lerna bootstrap # if installed globally
 9 | ./node_modules/lerna/cli.js bootstrap # if installed locally
10 | ```
11 | 
12 | ## Available Commands
13 | ``` bash
14 | npm run storybook         # Compiles and hot-reloads for development
15 | npm run build-storybook   # Compiles and minifies for production
16 | ```
17 | 
18 | ## Deployed on [Netlify](https://medium-reusable-vue-components.netlify.com)
19 | [![Netlify Status](https://api.netlify.com/api/v1/badges/e32cf289-b73c-422d-b368-b9deb25fd625/deploy-status)](https://app.netlify.com/sites/medium-reusable-vue-components/deploys)
20 | 


--------------------------------------------------------------------------------
/components/JTable/JTable.stories.js:
--------------------------------------------------------------------------------
 1 | import { storiesOf } from '@storybook/vue'
 2 | import JTable from './JTable'
 3 | 
 4 | var items = [
 5 |   [ 'Yair Lamb', 'yair.lamb@email.com' ],
 6 |   [ 'Leonardo Payne', 'leonardo.payne@email.com' ],
 7 |   [ 'Carl Henson', 'carl.henson@email.com' ],
 8 |   [ 'Jensen Combs', 'jensen.combs@email.com' ],
 9 |   [ 'Amiah Burton', 'amiah.burton@email.com' ],
10 |   [ 'Yaretzi Mayo', 'yaretzi.mayo@email.com' ],
11 |   [ 'Kamren Huffman', 'kamren.huffman@email.com' ]
12 | ]
13 | 
14 | storiesOf('JTable', module)
15 |   .add('with 7 items', () => ({
16 |     components: { JTable },
17 |     template:
18 |     `
19 |       <JTable
20 |         :items="items"
21 |       />
22 |     `,
23 |     data: () => ({
24 |       items
25 |     })
26 |   }))
27 |   .add('with 7 items + header', () => ({
28 |     components: { JTable },
29 |     template:
30 |     `
31 |       <JTable
32 |         :header="header"
33 |         :items="items"
34 |       />
35 |     `,
36 |     data: () => ({
37 |       header: [
38 |         'Name',
39 |         'Email'
40 |       ],
41 |       items
42 |     })
43 |   }))
44 |   


--------------------------------------------------------------------------------
/components/JTable/JTable.vue:
--------------------------------------------------------------------------------
 1 | 
 2 | <template>
 3 |   <table>
 4 |     <tr>
 5 |       <th
 6 |         v-for="(label, index) in header"
 7 |         :key="index"
 8 |       >
 9 |         {{ label }}
10 |       </th>
11 |     </tr>
12 |     <JTableRow
13 |       v-for="(values, index) in items"
14 |       :key="index"
15 |       :values="values"
16 |     />
17 |   </table>
18 | </template>
19 | 
20 | <script>
21 | import JTableRow from '@jsilva-pt/j-table-row/JTableRow'
22 | export default {
23 |   name: 'JTable',
24 |   props: {
25 |     header: {
26 |       type: Array
27 |     },
28 |     items: {
29 |       type: Array,
30 |       required: true
31 |     }
32 |   },
33 |   components: {
34 |     JTableRow
35 |   }
36 | }
37 | </script>
38 | 
39 | <style>
40 | th {
41 |   text-align: left;
42 |   padding: 8px;
43 |   font-size: 13px;
44 |   color: #8d8d92;
45 | }
46 | </style>
47 | 


--------------------------------------------------------------------------------
/components/JTable/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@jsilva-pt/j-table",
 3 |   "version": "0.2.1",
 4 |   "publishConfig": {
 5 |     "access": "public"
 6 |   },
 7 |   "dependencies": {
 8 |     "@jsilva-pt/j-table-row": "^0.1.0"
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/components/JTableRow/JTableRow.stories.js:
--------------------------------------------------------------------------------
 1 | import { storiesOf } from '@storybook/vue'
 2 | import JTableRow from './JTableRow'
 3 | 
 4 | storiesOf('JTableRow', module)
 5 |   .add('normal', () => ({
 6 |     components: { JTableRow },
 7 |     template:
 8 |     `
 9 |       <JTableRow
10 |         :values="values"
11 |       />
12 |     `,
13 |     data: () => ({
14 |       values: [
15 |         'José Silva',
16 |         'email@email.com'
17 |       ]
18 |     })
19 |   }))
20 |   


--------------------------------------------------------------------------------
/components/JTableRow/JTableRow.vue:
--------------------------------------------------------------------------------
 1 | 
 2 | <template>
 3 |   <tr>
 4 |     <td v-for="(value, index) in values" :key="index">
 5 |       {{ value }}
 6 |     </td>
 7 |   </tr>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   name: 'JTableRow',
13 |   props: {
14 |     values: {
15 |       type: Array,
16 |       required: true
17 |     }
18 |   }
19 | }
20 | </script>
21 | 
22 | <style scoped>
23 | tr {
24 |   background-color: white;
25 |   border-radius: 4px;
26 |   box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.08);
27 | }
28 | td {
29 |   padding: 8px;
30 | }
31 | </style>
32 | 


--------------------------------------------------------------------------------
/components/JTableRow/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "@jsilva-pt/j-table-row",
3 |   "version": "0.1.0",
4 |   "publishConfig": {
5 |     "access": "public"
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/lerna.json:
--------------------------------------------------------------------------------
1 | {
2 |   "packages": [
3 |     "components/*"
4 |   ],
5 |   "version": "independent"
6 | }
7 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "root",
 3 |   "private": true,
 4 |   "devDependencies": {
 5 |     "@babel/core": "^7.6.4",
 6 |     "@storybook/addon-actions": "^5.2.5",
 7 |     "@storybook/addon-links": "^5.2.5",
 8 |     "@storybook/addons": "^5.2.5",
 9 |     "@storybook/vue": "^5.2.5",
10 |     "babel-loader": "^8.0.6",
11 |     "babel-preset-vue": "^2.0.2",
12 |     "lerna": "^3.18.3",
13 |     "vue-loader": "^15.7.2",
14 |     "vue-template-compiler": "^2.6.10"
15 |   },
16 |   "dependencies": {
17 |     "vue": "^2.6.10"
18 |   },
19 |   "scripts": {
20 |     "storybook": "start-storybook -p 6006",
21 |     "build-storybook": "build-storybook"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------