├── .browserslistrc ├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── .prettierrc ├── .storybook ├── addons.js └── config.js ├── .travis.yml ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── babel.config.js ├── docs └── pull_request_template.md ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── assets │ ├── logo.png │ └── logo.svg ├── components │ ├── HelloWorld.vue │ ├── PButton.vue │ ├── PInput.vue │ └── grid │ │ ├── PCol.vue │ │ ├── PContainer.vue │ │ └── PRow.vue └── main.js └── stories ├── PButton.stories.js ├── PGrid.stories.js ├── PInput.stories.js └── Render.js /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,ts,tsx,vue}] 2 | indent_style = space 3 | indent_size = 2 4 | trim_trailing_whitespace = true 5 | insert_final_newline = true 6 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | extends: [ 7 | 'plugin:prettier/recommended', 8 | 'plugin:vue/essential', 9 | 'prettier', 10 | 'prettier/vue' 11 | ], 12 | plugins: ['prettier'], 13 | rules: { 14 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 15 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 16 | }, 17 | parserOptions: { 18 | parser: 'babel-eslint' 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | 23 | # Storybook 24 | storybook-static -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "semi": false, 4 | "singleQuote": true 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 | configure(require.context('../stories', true, /\.stories\.js$/), module); 5 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 'stable' 4 | 5 | install: npm install 6 | 7 | script: 8 | - npm run lint 9 | - npm run build 10 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # How to contribute 2 | 3 | Before sending any contribution to this repository, 4 | make sure you are: 5 | 6 | * **Not** changing App.vue 7 | * Adding the stories to the proper storybook files 8 | * **Not** making any **CSS** 9 | * **Not** including any **CSS library** 10 | 11 | When contributing to an issue, ask to a project developer for an assignation via github issues. 12 | 13 | This repository has a conduct code that must be respected in all its interactions. 14 | 15 | 16 | ## Creating issues 17 | 18 | Before creating an issue, make sure that you follow these steps: 19 | 20 | 1. Verify if there is another issue that describe what you want to insert 21 | 2. When creating the issue, wait for an answer from a project developer for its approbation 22 | 23 | 24 | ## Pull Request process 25 | To create a Pull Request, you must follow these steps: 26 | 27 | 1. Run, in your machine, all tests that are available and only send the PR if the tests are succesful 28 | 2. When creating the Pull Request, use the template available on docs/pull_request_template.md 29 | 3. Ask to a project developer for a review in your PR 30 | 31 | 32 | Thank you for wanting to contributing to puto-framework <3! 33 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 VueJS Norte 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # puto-framework 2 | 3 | [![Build Status](https://travis-ci.com/vuejs-norte/puto-framework.svg?branch=master)](https://travis-ci.com/vuejs-norte/puto-framework) 4 | 5 | ## Project setup 6 | ``` 7 | npm install 8 | ``` 9 | 10 | ### Compiles and hot-reloads for development 11 | ``` 12 | npm run serve 13 | ``` 14 | 15 | ### Compiles and minifies for production 16 | ``` 17 | npm run build 18 | ``` 19 | 20 | ### Run your tests 21 | ``` 22 | npm run test 23 | ``` 24 | 25 | ### Lints and fixes files 26 | ``` 27 | npm run lint 28 | ``` 29 | 30 | ### Customize configuration 31 | See [Configuration Reference](https://cli.vuejs.org/config/). 32 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ['@vue/app'] 3 | } 4 | -------------------------------------------------------------------------------- /docs/pull_request_template.md: -------------------------------------------------------------------------------- 1 | ## Description 2 | 3 | Brief description of what was done with this PR. This text must contain useful data to the understanding of what was done. 4 | 5 | 6 | ## Resolve (Issues) 7 | 8 | Issues that were solved with the PR 9 | * closes (#number) 10 | 11 | 12 | ## Related PR's, if there is anyone 13 | 14 | branch | PR 15 | ------ | ------ 16 | related_pr | [link]() 17 | 18 | 19 | ## Tasks performed 20 | * Task 1 21 | * Task 2 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "puto-framework", 3 | "version": "0.1.0", 4 | "private": true, 5 | "license": "MIT", 6 | "scripts": { 7 | "serve": "vue-cli-service serve", 8 | "build": "vue-cli-service build", 9 | "lint": "vue-cli-service lint", 10 | "storybook": "start-storybook -p 6006", 11 | "build-storybook": "build-storybook" 12 | }, 13 | "dependencies": { 14 | "core-js": "^2.6.5", 15 | "vue": "^2.6.10" 16 | }, 17 | "devDependencies": { 18 | "@babel/core": "^7.6.2", 19 | "@storybook/addon-actions": "^5.2.1", 20 | "@storybook/addon-links": "^5.2.1", 21 | "@storybook/addons": "^5.2.1", 22 | "@storybook/vue": "^5.2.1", 23 | "@vue/cli-plugin-babel": "^3.11.0", 24 | "@vue/cli-plugin-eslint": "^3.11.0", 25 | "@vue/cli-service": "^3.11.0", 26 | "@vue/eslint-config-standard": "^4.0.0", 27 | "babel-eslint": "^10.0.1", 28 | "babel-loader": "^8.0.6", 29 | "babel-preset-vue": "^2.0.2", 30 | "eslint": "^5.16.0", 31 | "eslint-config-prettier": "^6.3.0", 32 | "eslint-plugin-prettier": "^3.1.1", 33 | "eslint-plugin-vue": "^5.0.0", 34 | "prettier": "^1.18.2", 35 | "vue-prismjs": "^1.2.0", 36 | "vue-template-compiler": "^2.6.10" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devsnorte/puto-framework/7e6c2eadb1cfa09ea1098b79df264684c2b051e3/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | puto-framework 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devsnorte/puto-framework/7e6c2eadb1cfa09ea1098b79df264684c2b051e3/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | Ativo 4 -------------------------------------------------------------------------------- /src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 88 | 89 | 97 | 98 | 99 | 115 | -------------------------------------------------------------------------------- /src/components/PButton.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 50 | -------------------------------------------------------------------------------- /src/components/PInput.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 70 | -------------------------------------------------------------------------------- /src/components/grid/PCol.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 30 | -------------------------------------------------------------------------------- /src/components/grid/PContainer.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | -------------------------------------------------------------------------------- /src/components/grid/PRow.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App) 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /stories/PButton.stories.js: -------------------------------------------------------------------------------- 1 | import { action } from '@storybook/addon-actions'; 2 | import PButton from '../src/components/PButton.vue'; 3 | import Render from './Render'; 4 | 5 | export default { 6 | title: 'PButton', 7 | }; 8 | 9 | export const basicUsage = () => Render({ 10 | components: { PButton }, 11 | template: 'My Button', 12 | methods: { action: action('clicked') } 13 | }); 14 | 15 | export const slotless = () => Render({ 16 | components: { PButton }, 17 | template: '', 18 | methods: { action: action('clicked') } 19 | }); 20 | 21 | export const loading = () => Render({ 22 | components: { PButton }, 23 | template: 'My Button', 24 | methods: { action: action('clicked') } 25 | }); 26 | 27 | export const disabled = () => Render({ 28 | components: { PButton }, 29 | template: 'My Button', 30 | methods: { action: action('clicked') } 31 | }); 32 | -------------------------------------------------------------------------------- /stories/PGrid.stories.js: -------------------------------------------------------------------------------- 1 | import PContainer from '../src/components/grid/PContainer.vue' 2 | import PRow from '../src/components/grid/PRow.vue' 3 | import PCol from '../src/components/grid/PCol.vue'; 4 | import Render from './Render' 5 | 6 | export default { 7 | title: 'PGrid' 8 | } 9 | 10 | export const basicUsage = () => 11 | Render({ 12 | components: { PContainer, PRow, PCol }, 13 | template: ` 14 | 15 | COLUMN 16 | COLUMN 17 | COLUMN 18 | 19 | 20 | COLUMN 21 | 22 | ` 23 | }) 24 | 25 | export const fluidContainer = () => 26 | Render({ 27 | components: { PContainer, PRow, PCol }, 28 | template: ` 29 | 30 | COLUMN 31 | COLUMN 32 | COLUMN 33 | 34 | 35 | COLUMN 36 | 37 | ` 38 | }) 39 | -------------------------------------------------------------------------------- /stories/PInput.stories.js: -------------------------------------------------------------------------------- 1 | import { action } from '@storybook/addon-actions'; 2 | import PInput from '../src/components/PInput.vue'; 3 | import Render from './Render'; 4 | 5 | export default { 6 | title: 'PInput' 7 | }; 8 | 9 | export const basicUsage = () => Render({ 10 | components: { PInput }, 11 | template: '', 12 | data: () =>({ name: '' }), 13 | methods: { action: action('focused'), myLog: action('input') } 14 | }); 15 | 16 | export const inputCheckbox = () => Render({ 17 | components: { PInput }, 18 | template: '', 19 | data: () =>({ value: "checkbox value" }), 20 | methods: { action: action('changed')} 21 | }); 22 | 23 | export const inputCheckboxDisabled = () => Render({ 24 | components: { PInput }, 25 | template: '', 26 | data: () =>({ value: "checkbox disabled value" }), 27 | methods: { } 28 | }); 29 | 30 | export const inputRadio = () => Render({ 31 | components: { PInput }, 32 | template: '', 33 | data: () =>({ value: "radio value" }), 34 | methods: { action: action('changed') } 35 | }); 36 | 37 | export const inputRadioMultiple = () => Render({ 38 | components: { PInput, PInput, PInput }, 39 | template: '
\ 40 | \ 41 |
', 42 | data: () =>({ 43 | valueA: "radio value A", 44 | valueB: "radio value B", 45 | valueC: "radio value C" 46 | }), 47 | methods: { action: action('changed') } 48 | }); 49 | 50 | export const inputRadioDisabled = () => Render({ 51 | components: { PInput }, 52 | template: '', 53 | data: () =>({ value: "radio disabled value" }), 54 | methods: { } 55 | }); 56 | -------------------------------------------------------------------------------- /stories/Render.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Prism from 'vue-prismjs' 3 | import 'prismjs/themes/prism.css' 4 | 5 | export default ChildComponent => ({ 6 | name: 'Render', 7 | 8 | components: { 9 | ChildComponent, 10 | Prism 11 | }, 12 | 13 | data: () => ({ 14 | sourceCode: '' 15 | }), 16 | 17 | mounted () { 18 | new Vue({ 19 | el: this.$refs.disposableDiv, 20 | ...ChildComponent, 21 | 22 | mounted: () => { 23 | const $code = this.$refs.code 24 | const html = $code.innerHTML 25 | $code.innerText = html 26 | this.sourceCode = html 27 | } 28 | }) 29 | }, 30 | 31 | template: ` 32 |
33 |
34 | 35 | 36 |
37 | 38 | 39 | 44 |
45 | ` 46 | }) 47 | --------------------------------------------------------------------------------