First Commit

3b0321c2 · Luiz Moura · 6ef025c3 · 3b0321c2 · 3b0321c2 · 3b0321c2
Commit 3b0321c2 authored Sep 06, 2019 by Luiz Moura
28 changed files
--- a/.editorconfig
+++ b/.editorconfig
+root = true
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+[*.sass]
+end_of_line = lf
+indent_size = 2
+indent_style = tab
+[*.marko]
+end_of_line = lf
+indent_size = 2
+indent_style = tab
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
+env:
+  browser: true
+  es6: true
+  mocha: true
+  jest: true
+extends: airbnb-base
+globals:
+  Atomics: readonly
+  SharedArrayBuffer: readonly
+  expect: true
+parserOptions:
+  ecmaVersion: 2018
+plugins:
+  - jest
+rules:
+  class-methods-use-this: 0
+  arrow-body-style: 0
+  max-statements: [1, 12]
+  max-nested-callbacks: [1, 3]
+  max-depth: [1, 4]
+  complexity: [1, 7]
+  object-curly-newline: 0
+  no-underscore-dangle: 0
--- a/.gitignore
+++ b/.gitignore
+# Created by https://www.gitignore.io/api/node,osx,linux,windows,webpack
+# Edit at https://www.gitignore.io/?templates=node,osx,linux,windows,webpack
+### Linux ###
+*~
+# temporary files which can be created if a process still has a handle open of a deleted file
+.fuse_hidden*
+# KDE directory preferences
+.directory
+# Linux trash folder which might appear on any partition or disk
+.Trash-*
+# .nfs files are created when an open file is removed but is still being accessed
+.nfs*
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+# Coverage directory used by tools like istanbul
+coverage
+# nyc test coverage
+.nyc_output
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+# Bower dependency directory (https://bower.io/)
+bower_components
+# node-waf configuration
+.lock-wscript
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+# Dependency directories
+node_modules/
+jspm_packages/
+# TypeScript v1 declaration files
+typings/
+# Optional npm cache directory
+.npm
+# Optional eslint cache
+.eslintcache
+# Optional REPL history
+.node_repl_history
+# Output of 'npm pack'
+*.tgz
+# Yarn Integrity file
+.yarn-integrity
+# dotenv environment variables file
+.env
+.env.test
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+# next.js build output
+.next
+# nuxt.js build output
+.nuxt
+# vuepress build output
+.vuepress/dist
+# Serverless directories
+.serverless/
+# FuseBox cache
+.fusebox/
+# DynamoDB Local files
+.dynamodb/
+### OSX ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+# Icon must end with two \r
+Icon
+# Thumbnails
+._*
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+#!! ERROR: webpack is undefined. Use list command to see defined gitignore types !!#
+### Windows ###
+# Windows thumbnail cache files
+Thumbs.db
+ehthumbs.db
+ehthumbs_vista.db
+# Dump file
+*.stackdump
+# Folder config file
+[Dd]esktop.ini
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+# Windows Installer files
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+# Windows shortcuts
+*.lnk
+# End of https://www.gitignore.io/api/node,osx,linux,windows,webpack
+coverage
--- a/.huskyrc
+++ b/.huskyrc
+{
+  "hooks": {
+    "pre-push": "npm run prepush"
+  }
+}
--- a/.nvmrc
+++ b/.nvmrc
+8.9.0
\ No newline at end of file
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
+{
+}
\ No newline at end of file
--- a/README.md
+++ b/README.md
 # Guideline Base Project
+## Developing
+After cloning the repository, install dependencies:
+    $ npm install
+    $ nvm use
+Run WDS:
+    $ npm run dev
+## After updating Guidelines
+    $ cp ./node_modules/@kenlo/guidelines/dist/css/theme-imob.css ./dist
+## Tests & Coverage
+    $ npm run test
+    $ npm run coverage
--- a/dist/bundle.js
+++ b/dist/bundle.js
--- a/dist/index.html
+++ b/dist/index.html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Guideline Base Project</title>
+        <link rel="stylesheet" href="./theme-imob.css" />
+        <link rel="stylesheet" href="./style.css" />
+        <meta name="viewport" content="width=device-width, user-scalable=no">
+    </head>
+    <body>
+    </body>
+    <script src="./bundle.js"></script>
+    <script>
+      window.klStartupRender(document.body);
+    </script>
+</html>
--- a/dist/style.css
+++ b/dist/style.css
--- a/dist/theme-imob.css
+++ b/dist/theme-imob.css
--- a/jest.config.js
+++ b/jest.config.js
+module.exports = {
+  preset: '@marko/jest',
+  browser: true,
+  collectCoverage: true,
+  collectCoverageFrom: [
+    'src/**/*.{js,marko}',
+    '!src/bundle.js',
+    '!src/*.*',
+  ],
+  transformIgnorePatterns: [],
+  coverageThreshold: {
+    global: {
+      branches: 95,
+      functions: 95,
+      lines: 95,
+    },
+  },
+  modulePaths: ['src'],
+};
--- a/marko.json
+++ b/marko.json
+{
+  "tags-dir": [
+    "./src/components"
+  ]
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "name": "guideline-base-project",
+  "version": "0.0.1",
+  "description": "Guideline Base Project",
+  "main": "./src/index.js",
+  "scripts": {
+    "build": "webpack --mode=production",
+    "dev": "webpack-dev-server",
+    "lint": "eslint src/**/*.js --fix",
+    "prepush": "npm run lint && npm run test",
+    "test": "jest --coverage",
+    "test:watch": "jest --watch",
+    "coverage": "jest --coverage"
+  },
+  "repository": {
+    "type": "git",
+    "url": "http://gitlab.ingaia.com.br/luiz.moura/guideline-base-project.git"
+  },
+  "author": "Luiz Moura",
+  "license": "ISC",
+  "dependencies": {
+    "@kenlo/guidelines": "^1.6.1",
+    "@marko/jest": "^1.0.1",
+    "@marko/webpack": "^1.2.0",
+    "css-loader": "^2.1.1",
+    "eslint-plugin-jest": "^22.3.2",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "husky": "^1.3.1",
+    "lodash": "^4.17.11",
+    "marko": "4.14.25",
+    "marko-jest": "^6.0.1",
+    "net": "^1.0.2",
+    "node-sass": "^4.11.0",
+    "redux-simple-event": "^1.0.5",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.2.3",
+    "webpack-dev-server": "^3.2.1"
+  },
+  "devDependencies": {
+    "@types/jest": "^24.0.15",
+    "eslint": "^5.15.1",
+    "eslint-config-airbnb-base": "^13.1.0",
+    "eslint-plugin-import": "^2.16.0",
+    "jest": "^24.8.0"
+  }
+}
--- a/src/bundle.js
+++ b/src/bundle.js
+// eslint-disable-next-line import/no-unresolved
+import klStartup from './index.marko';
+const klStartupRender = (element, input = {}) => klStartup
+  .renderSync(input).appendTo(element);
+window.klStartupRender = klStartupRender;
+export default {
+  klStartupRender,
+};
--- a/src/component.js
+++ b/src/component.js
+class Component {
+  onCreate() {
+    this.state = {
+      mobile: false,
+    };
+  }
+  onMount() {
+    this.checkForMobile();
+    this.subscribeTo(window).on('resize', () => {
+      this.checkForMobile();
+    });
+  }
+  checkForMobile() {
+    this.setState('mobile', window.innerWidth < 1024);
+  }
+}
+module.exports = Component;
--- a/src/components/first-component/component.js
+++ b/src/components/first-component/component.js
+const { BasicComponent, Anime } = require('@kenlo/guidelines');
+const { cloneDeep } = require('lodash');
+class Component {
+  onCreate() {
+    this.state = {
+      nameList: [],
+    };
+  }
+  addNameToList(name) {
+    const nameList = cloneDeep(this.state.nameList);
+    nameList.push(name);
+    this.setState({ nameList });
+    this.setStateDirty('nameList');
+  }
+  removeNameFromList(index) {
+    const nameList = cloneDeep(this.state.nameList);
+    nameList.splice(index, 1);
+    this.setState({ nameList: [] });
+    setTimeout(() => {
+      this.setState({ nameList });
+    }, 100);
+    this.setStateDirty('nameList');
+    console.log(this.state.nameList);
+  }
+  removeName(index) {
+    Anime({
+      targets: this.getEl(`item-${index}`),
+      translateX: 100,
+      opacity: 0,
+      complete: () => {
+        this.removeNameFromList(index);
+      },
+    });
+  }
+}
+module.exports = BasicComponent(Component);
--- a/src/components/first-component/components/sub-component/component.js
+++ b/src/components/first-component/components/sub-component/component.js
+const { BasicComponent } = require('@kenlo/guidelines');
+class Component {
+  onCreate() {
+    this.state = {
+      value: null,
+    };
+  }
+  changeValue(ev) {
+    this.setState('value', ev.target.value);
+  }
+  addNewName() {
+    console.log('teste')
+    this.emit('new-name', this.state.value);
+    this.setState('value', null);
+  }
+}
+module.exports = BasicComponent(Component);
--- a/src/components/first-component/components/sub-component/index.marko
+++ b/src/components/first-component/components/sub-component/index.marko
+div.sub-component
+	h6 -- Add new name
+	kl-input-text label="Name" value=state.value on-input('changeValue')
+	kl-button.secondary label="Action" on-click('addNewName')
--- a/src/components/first-component/components/sub-component/style.sass
+++ b/src/components/first-component/components/sub-component/style.sass
+.sub-component
+	max-width: 400px
+	border-top: 1px solid $grey-light
+	padding-top: 20px
+// Desktop
+.desktop
+	.sub-component
+// Mobile
+.mobile
+	.sub-component
--- a/src/components/first-component/components/sub-component/test.js
+++ b/src/components/first-component/components/sub-component/test.js
+const template = require('./index.marko');
+describe('sub-component', () => {
+  let component;
+  afterEach(() => component.destroy());
+  it('expect to exist without invites as owner', async () => {
+    component = template.renderSync({ ...inputs, userRole: 'owner' }).appendTo(document.body).getComponent();
+    await component.onMount();
+    component.update();
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/components/first-component/index.marko
+++ b/src/components/first-component/index.marko
+div.first-component
+	kl-structure-container padding="80"
+		@content
+			div.first-component-wrapper
+				h3 -- My first component
+				div.list
+					if(state.nameList)
+						for(index, name in state.nameList)
+							div.item key=`item-${index}` on-attach('animeIn', 'enterBottom', { easing: 'easeOutCirc' }, 0)
+								div.name -- ${`${index} | ${name}`}
+								div.action
+									kl-button icon="x" on-click('removeName', index)
+				sub-component mobile=input.mobile on-new-name('addNameToList')
--- a/src/components/first-component/style.sass
+++ b/src/components/first-component/style.sass
+.first-component
+	.first-component-wrapper
+		> .list
+			.item
+				display: flex
+// Desktop
+.desktop
+	.first-component
+		.first-component-wrapper
+// Mobile
+.mobile
+	.first-component
+		.first-component-wrapper
--- a/src/components/first-component/test.js
+++ b/src/components/first-component/test.js
+const template = require('./index.marko');
+describe('first-component', () => {
+  let component;
+  afterEach(() => component.destroy());
+  it('expect to exist without invites as owner', async () => {
+    component = template.renderSync({ ...inputs, userRole: 'owner' }).appendTo(document.body).getComponent();
+    await component.onMount();
+    component.update();
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/index.js
+++ b/src/index.js
+module.exports = { };
--- a/src/index.marko
+++ b/src/index.marko
+kl-startup theme="light" is-phone=state.mobile screen=1500 logout-label="Logout" account-label="Account"
+	@content
+		first-component mobile=state.mobile
--- a/webpack.config.js
+++ b/webpack.config.js
+const path = require('path');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+module.exports = {
+  entry: path.resolve(__dirname, './src/bundle.js'),
+  resolve: {
+    extensions: ['.marko', '.js'],
+  },
+  devtool: '#inline-source-map',
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  devServer: {
+    disableHostCheck: true,
+    contentBase: path.join(__dirname, 'dist'),
+    port: 2666,
+  },
+  module: {
+    rules: [
+      { test: /\.marko$/, use: [{ loader: '@marko/webpack/loader' }] },
+      {
+        test: /\.(sass|css)$/,
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: [
+            {
+              loader: 'css-loader?-autoprefixer?browsers=last 4 versions',
+              options: {
+                sourceMap: true,
+              },
+            },
+            {
+              loader: 'sass-loader',
+              options: {
+                data: '@import "imobcolors";',
+                includePaths: [
+                  path.join(
+                    __dirname,
+                    './node_modules/@kenlo/guidelines/src/sass/',
+                  ),
+                ],
+                sourceMap: true,
+              },
+            },
+          ],
+        }),
+      },
+    ],
+  },
+  plugins: [
+    new ExtractTextPlugin({ filename: 'style.css', allChunks: true }),
+  ],
+};