add eslint + prettier configs and format the code

lemonadejs · May 15, 2023 · 8ad419f · 8ad419f
1 parent 119e9ed
commit 8ad419f
Show file tree

Hide file tree

Showing 22 changed files with 1,734 additions and 536 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,5 @@
+coverage
+lib
+mochawesome-report
+test
+dist
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,21 @@
+module.exports = {
+    env: {
+        browser: true,
+        node: true
+    },
+    extends: ['eslint:recommended', 'prettier'],
+    globals: {
+        describe: 'readonly',
+        it: 'readonly',
+        should: 'readonly',
+        xit: 'readonly'
+    },
+    parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module'
+    },
+    rules: {
+        'no-control-regex': 'off',
+        'no-empty': 'off'
+    }
+}
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,5 @@
+coverage
+lib
+mochawesome-report
+types
+dist
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,8 @@
+{
+    "trailingComma": "none",
+    "tabWidth": 4,
+    "semi": false,
+    "singleQuote": true,
+    "printWidth": 120,
+    "endOfLine": "auto"
+}
diff --git a/README.md b/README.md
@@ -4,10 +4,10 @@ Welcome to Lemon Data-Grid! This lightweight JavaScript library allows you to ef
 
 ## Features
 
-- Lightweight: DataGridLM is only about 5 Kbytes in size, making it fast and easy to load.
-- Customizable: You can define columns and user-defined actions to suit your specific use case.
-- Reactive: Any changes to the underlying data are automatically applied to the HTML, making it easy to keep your grid up-to-date.
-- Integration: DataGridLM can be used as a standalone library or integrated with LemonadeJS or React.
+-   Lightweight: DataGridLM is only about 5 Kbytes in size, making it fast and easy to load.
+-   Customizable: You can define columns and user-defined actions to suit your specific use case.
+-   Reactive: Any changes to the underlying data are automatically applied to the HTML, making it easy to keep your grid up-to-date.
+-   Integration: DataGridLM can be used as a standalone library or integrated with LemonadeJS or React.
 
 ## Getting Started
 
@@ -16,27 +16,30 @@ Utilizing DataGridLM is straightforward. Just include the JavaScript file in you
 ### npm Installation
 
 To install your project using npm, run the following command:
+
 ```bash
 $ npm install @lemonadejs/datagrid
-```    
+```
 
 ### CDN
 
 To use DataGrid via a CDN, include the following script tags in your HTML file:
+
 ```html
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/datagrid/dist/index.min.js"></script>
-```   
+```
+
 ### Usage
 
 There is two ways to instantiate a DataGrid, Programatically or Dinamically
 
 #### Programatically
 
-Create an instance of the data grid by providing the DOM element and the ***options*** object.
+Create an instance of the data grid by providing the DOM element and the **_options_** object.
 
 ```html
-<div id='root'></div>
+<div id="root"></div>
 <script>
     const root = document.getElementById('root')
     Datagrid(root, {
@@ -46,8 +49,8 @@ Create an instance of the data grid by providing the DOM element and the ***opti
         ],
         columns: [
             { name: 'person', headerName: 'Name' },
-            { name: 'age', headerName: 'Age' },
-        ],
+            { name: 'age', headerName: 'Age' }
+        ]
     })
 </script>
 ```
@@ -56,7 +59,6 @@ Create an instance of the data grid by providing the DOM element and the ***opti
 
 The DataGrid is invoked within the template, with the options being passed as properties.
 
-
 ```javascript
 function Component() {
     let self = this
@@ -68,7 +70,7 @@ function Component() {
 
     self.columns = [
         { name: 'person', headerName: 'Name' },
-        { name: 'age', headerName: 'Age' },
+        { name: 'age', headerName: 'Age' }
     ]
 
     return `<Datagrid data="{{self.data}}" columns="{{self.columns}}" />`
@@ -77,28 +79,30 @@ function Component() {
 
 ### Configuration
 
-Additionally, you have the option of incorporating ***pagination*** and ***search*** functionalities by including them in the options. For example:
+Additionally, you have the option of incorporating **_pagination_** and **_search_** functionalities by including them in the options. For example:
+
 ```javascript
 Datagrid(root, {
-        data: [
-            { id: 1, person: 'Maria', age: 28 },
-            { id: 2, person: 'Carlos', age: 33 }
-        ],
-        columns: [
-            { name: 'person', headerName: 'Name' },
-            { name: 'age', headerName: 'Age' },
-        ],
-        pagination: 5, // Each page will contain this quantity of items.
-        search: true,
-    })
+    data: [
+        { id: 1, person: 'Maria', age: 28 },
+        { id: 2, person: 'Carlos', age: 33 }
+    ],
+    columns: [
+        { name: 'person', headerName: 'Name' },
+        { name: 'age', headerName: 'Age' }
+    ],
+    pagination: 5, // Each page will contain this quantity of items.
+    search: true
+})
 ```
+
 ### Examples
 
 Here are a few examples of DataGridLM in action:
 
-- [Basic Data Grid Example](https://lemonadejs.net/components/datagrid#example-1)
-- [Example with Large Data Sets](https://lemonadejs.net/components/datagrid#example-2)
-- [Example with Data Addition and Deletion](https://lemonadejs.net/components/datagrid#example-3)
+-   [Basic Data Grid Example](https://lemonadejs.net/components/datagrid#example-1)
+-   [Example with Large Data Sets](https://lemonadejs.net/components/datagrid#example-2)
+-   [Example with Data Addition and Deletion](https://lemonadejs.net/components/datagrid#example-3)
 
 ## Development
 
@@ -111,7 +115,7 @@ $ npm i
 $ npm start
 ```
 
-This will start a web-server with a DataGrid page as playground. 
+This will start a web-server with a DataGrid page as playground.
 
 ### Running Tests
 

diff --git a/index.html b/index.html
@@ -1,42 +1,44 @@
 <html>
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-    <meta name="theme-color" content="#2196f3">
-    <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap:; img-src * 'self' data: blob:; media-src * 'self' data: blob:; connect-src * 'self' data: blob:">
-    <meta name="format-detection" content="telephone=no">
-    <meta name="msapplication-tap-highlight" content="no">
-    <!-- Title -->
-    <title>Data Grid</title>
+    <head>
+        <meta charset="utf-8" />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover"
+        />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+        <meta name="theme-color" content="#2196f3" />
+        <meta
+            http-equiv="Content-Security-Policy"
+            content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap:; img-src * 'self' data: blob:; media-src * 'self' data: blob:; connect-src * 'self' data: blob:"
+        />
+        <meta name="format-detection" content="telephone=no" />
+        <meta name="msapplication-tap-highlight" content="no" />
+        <!-- Title -->
+        <title>Data Grid</title>
 
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-    <script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
-    <script type="text/javascript" src="http://localhost:3005/dist/index.js"></script>
-</head>
-<body>
+        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+        <script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
+        <script type="text/javascript" src="http://localhost:3005/dist/index.js"></script>
+    </head>
+    <body>
+        <!-- App root element -->
+        <div id="root" class="application"></div>
 
-<!-- App root element -->
-<div id="root" class="application"></div>
-
-
-
-<script>
-    Datagrid(root, {
-        data: [
-            { id: 1, person: 'Maria Dasdores', age: 28 },
-            { id: 2, person: 'Carlos Silva', age: 33 },
-            { id: 3, person: 'Antonio Souza', age: 25 },
-            { id: 4, person: 'Ana Luiza', age: 19 },
-        ],
-        columns: [
-            { name: 'person', headerName: 'Name' },
-            { name: 'age', headerName: 'Age', align: 'center' },
-        ],
-        search: true,
-    })
-</script>
-
-</body>
+        <script>
+            Datagrid(root, {
+                data: [
+                    { id: 1, person: 'Maria Dasdores', age: 28 },
+                    { id: 2, person: 'Carlos Silva', age: 33 },
+                    { id: 3, person: 'Antonio Souza', age: 25 },
+                    { id: 4, person: 'Ana Luiza', age: 19 }
+                ],
+                columns: [
+                    { name: 'person', headerName: 'Name' },
+                    { name: 'age', headerName: 'Age', align: 'center' }
+                ],
+                search: true
+            })
+        </script>
+    </body>
 </html>
diff --git a/mocha.config.js b/mocha.config.js
@@ -1,19 +1,19 @@
 #! /usr/bin/env node
 
-require('jsdom-global')(undefined, { url: 'https://localhost' });
-const lemonade = require("lemonadejs");
-const Datagrid = require("./src/datagrid.js");
+require('jsdom-global')(undefined, { url: 'https://localhost' })
+const lemonade = require('lemonadejs')
+const Datagrid = require('./src/datagrid.js')
 
-global.lemonade = lemonade;
-global.Datagrid = Datagrid;
-global.root =  document.createElement('div');
-global.root.style.width = '100%';
-global.root.style.height = '100%';
-document.body.appendChild(global.root);
+global.lemonade = lemonade
+global.Datagrid = Datagrid
+global.root = document.createElement('div')
+global.root.style.width = '100%'
+global.root.style.height = '100%'
+document.body.appendChild(global.root)
 
 exports.mochaHooks = {
     afterEach(done) {
         // destroy datagrid component
-        done();
-    },
-};
+        done()
+    }
+}