Merge pull request #110 from opensrc0/develop

Changed lint and themePrapare

.eslintrc

@@ -40,6 +40,11 @@
     "react/jsx-filename-extension": ["error", { "extensions": [".js"] }],
     "react/require-default-props": ["off"],
     "react/jsx-props-no-spreading": ["off"],
-    "no-restricted-exports": ["off"]
+    "no-restricted-exports": ["off"],
+    "comma-dangle": ["error", "never"],
+    "quotes": ["error", "double"],
+    "quote-props": ["error", "always"],
+    "semi": ["error", "never"]
   }
 }
+

.github/COMMAND.md

@@ -0,0 +1,17 @@
+   ==> Create config file for all the component of fe-theme
+```js
+COMPONENT_CONFIG_PATH=./{PATH} CURRENT_APP_DIR=$(pwd) npm run theme-prepare --prefix ./node_modules/fe-theme
+```
+
+<p align="center">OR</p>
+
+&nbsp;&nbsp; ==> Creating config file for an individual component
+```js
+COMPONENET_NAME={COMPONENT_NAME} COMPONENT_CONFIG_PATH=./{PATH} CURRENT_APP_DIR=$(pwd) npm run theme-prepare --prefix ./node_modules/fe-theme
+```
+
+&nbsp;&nbsp; **Note:** 
+
+&nbsp;&nbsp;  ```1. PATH``` is a variable i.e. where you want to place config files in your application
+
+&nbsp;&nbsp;  ```2. COMPONENT_NAME``` is a variable i.e. name of the component ```Input```, ```button```. [Find the component list](./COMPONENT.md)

Init.js

@@ -1,8 +1,8 @@
-import merge from 'lodash.merge';
-import defaultTheme from './__appset/universal/theme';
+import merge from "lodash.merge"
+import defaultTheme from "./__appset/theme"
 
 export default function Init(userTheme) {
-  const mergeTheme = merge(defaultTheme, userTheme);
+  const mergeTheme = merge(defaultTheme, userTheme)
 
-  return mergeTheme;
+  return mergeTheme
 }

README.md

@@ -92,25 +92,40 @@ import Button from 'fe-theme/Button';
 
 Wow, the configuration is quite simple, but wait... button design is different in my application. No worry, follow step 3, 4.
 
-#### 3. Creating a fe-theme folder in your application. It contains components config file.
+#### 3. Create your own theme
 
-  Create config file for all the component of fe-theme
-```js
-COMPONENT_CONFIG_PATH=./{PATH} CURRENT_APP_DIR=$(pwd) npm run theme-prepare --prefix ./node_modules/fe-theme
-```
-
-<p align="center">OR</p>
+&nbsp;&nbsp; **a)** Create an empty folder called ```fe-theme``` in your application at any location.
 
-&nbsp;&nbsp; Creating config file for an individual component
+&nbsp;&nbsp; **b)** Create configButton.js file inside fe-theme folder
 ```js
-COMPONENET_NAME={COMPONENT_NAME} COMPONENT_CONFIG_PATH=./{PATH} CURRENT_APP_DIR=$(pwd) npm run theme-prepare --prefix ./node_modules/fe-theme
+const Button = {
+	"borderRadius": "50px",
+	"borderColor": "12px",
+	"primary": {
+		"color": "white",
+		"borderColor": "white"
+	},
+	"secondary": {
+		"color": "white",
+		"borderColor": "white"
+	}
+}
+
+export default Button;
 ```
+&nbsp;&nbsp; **Note** Config file name start with ```config``` keyword along with ```component Name``` like ```configButton.js```/```configInput.js```
 
-&nbsp;&nbsp; **Note:** 
+&nbsp;&nbsp; **c)** Create theme.js file and include configButton.js 
+```js
+/* eslint-disable import/no-anonymous-default-export */
+import Button from '../configButton';
 
-&nbsp;&nbsp;  ```1. PATH``` is a variable i.e. where you want to place config files in your application
+export default {
+  Button,
+};
 
-&nbsp;&nbsp;  ```2. COMPONENT_NAME``` is a variable i.e. name of the component ```Input```, ```button```. [Find the component list](./.github/COMPONENT.md)
+```
+Yeah, We have created config files Mannually but You can also generate config files automatically using command line [Check Commands](./.github/COMMAND.md)
 
 #### 4. Passing configuration settings to the fe-theme library using ThemeProvider
 

__application/utils/constants.js

@@ -1,36 +1,35 @@
-/* eslint-disable */
-export const MONTHS_NAME = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
-  'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec',
-];
+export const MONTHS_NAME = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
+  "Jul", "Aug", "Sept", "Oct", "Nov", "Dec"
+]
 
 export const timeMap = {
-  1: '13',
-  2:'14',
-  3:'15',
-  4:'16',
-  5:'17',
-  6:'18',
-  7:'19',
-  8:'20',
-  9:'21',
-  10:'22',
-  11:'23',
-  12:'24',
+  "1": "13",
+  "2": "14",
+  "3": "15",
+  "4": "16",
+  "5": "17",
+  "6": "18",
+  "7": "19",
+  "8": "20",
+  "9": "21",
+  "10": "22",
+  "11": "23",
+  "12": "24"
 }
 
 // YEAR MAPPING
 
 export const yearMapping = {
-  1: 'Jan',
-  2: 'Feb',
-  3: 'Mar',
-  4: 'Apr',
-  5: 'May',
-  6: 'Jun',
-  7: 'Jul',
-  8: 'Aug',
-  9: 'Sept',
-  10: 'Oct',
-  11: 'Nov',
-  12: 'Dec',
-};
+  "1": "Jan",
+  "2": "Feb",
+  "3": "Mar",
+  "4": "Apr",
+  "5": "May",
+  "6": "Jun",
+  "7": "Jul",
+  "8": "Aug",
+  "9": "Sept",
+  "10": "Oct",
+  "11": "Nov",
+  "12": "Dec"
+}

__appset/configButton.js

@@ -1,15 +1,16 @@
-/* eslint-disable */
 const Button = {
-	"borderRadius": "50px",
-	"borderColor": "12px",
-	"primary": {
-		"color": "white",
-		"borderColor": "white"
-	},
-	"secondary": {
-		"color": "white",
-		"borderColor": "white"
-	}
+  "primary": {
+    "color": "white",
+    "background": "#03567b",
+    "borderColor": "white",
+    "borderRadius": "4px"
+  },
+  "secondary": {
+    "color": "white",
+    "background": "#03567b",
+    "borderColor": "white",
+    "borderRadius": "4px"
+  }
 }
 
-export default Button;
+export default Button

__appset/configChip.js

@@ -1,23 +1,22 @@
-/* eslint-disable */
-const Button = {
-	"borderRadius": "50px",
-	"borderColor": "12px",
-	"primary": {
-		"color": "white",
-		"borderColor": "white"
-	},
-	"secondary": {
-		"color": "white",
-		"borderColor": "white"
-	},
-	"tertiary": {
-		"color": "white",
-		"borderColor": "white"
-	},
-	"quaternary": {
-		"color": "white",
-		"borderColor": "white"
-	}
+const Chip = {
+  "borderRadius": "50px",
+  "borderColor": "12px",
+  "primary": {
+    "color": "white",
+    "borderColor": "white"
+  },
+  "secondary": {
+    "color": "white",
+    "borderColor": "white"
+  },
+  "tertiary": {
+    "color": "white",
+    "borderColor": "white"
+  },
+  "quaternary": {
+    "color": "white",
+    "borderColor": "white"
+  }
 }
 
-export default Button;
+export default Chip

__appset/universal/configColor.js → __appset/configColor.js

@@ -1,4 +1,3 @@
-/* eslint-disable */
 const color = {
   "primary": "#00364e",
   "secondary": "#03567b",
@@ -13,4 +12,4 @@ const color = {
   "orange": "#fc6027"
 }
 
-export default color;
+export default color

__appset/universal/configFontFamily.js → __appset/configFontFamily.js

@@ -1,8 +1,7 @@
-/* eslint-disable */
 const FontFamily = {
   "roboto": "Roboto",
   "averta": "Averta",
   "sans": "Open Sans,sans-serif"
 }
 
-export default FontFamily;
+export default FontFamily

__appset/configFontSize.js

@@ -0,0 +1,18 @@
+const FontSize = {
+  "xxxxxl": "48px",
+  "xxxxl": "32px",
+  "xxxl": "28px",
+  "xxl": "24px",
+  "xl": "20px",
+  "l": "18px",
+  "m": "16px",
+  "md": "15px",
+  "s": "14px",
+  "sm": "13px",
+  "xs": "12px",
+  "xxs": "11px",
+  "xxxs": "10px",
+  "xxxxs": "8px"
+}
+
+export default FontSize

__appset/configFontWeight.js

@@ -0,0 +1,8 @@
+const FontWeight = {
+  "normal": "400",
+  "medium": "500",
+  "semibold": "600",
+  "bold": "700"
+}
+
+export default FontWeight

__appset/configInput.js

@@ -1,4 +1,3 @@
-/* eslint-disable */
 const Input = {
   "borderRadius": "4px",
   "primary": {
@@ -15,4 +14,4 @@ const Input = {
   }
 }
 
-export default Input;
+export default Input

__appset/configPXL.js

@@ -0,0 +1,11 @@
+const PXL = {
+  "pxScale": 8,
+  "PXL": (value) => {
+    const values = [].concat(value)
+    return values
+      .map((v) => (typeof v === "string" ? v : `${v * 8}px`))
+      .join(" ")
+  }
+}
+
+export default PXL

__appset/theme.js

@@ -0,0 +1,21 @@
+/* eslint-disable import/no-anonymous-default-export */
+import PXL from "./configPXL"
+import Color from "./configColor"
+import FontSize from "./configFontSize"
+import FontFamily from "./configFontFamily"
+import FontWeight from "./configFontWeight"
+
+import Button from "./configButton"
+import Input from "./configInput"
+
+export default {
+  "Universal": {
+    ...PXL,
+    Color,
+    FontSize,
+    FontFamily,
+    FontWeight
+  },
+  Button,
+  Input
+}