Changed config setup

.github/SETUP.md

@@ -3,41 +3,53 @@ Clone the repository and run the following commands from the root directory
 
 ## Local setup
 
-1. Go to the fe-theme repo location in your terminal and do 
+#### 1. Go to the fe-theme repo location in your terminal and do 
 ```
 npm install
 ```
 ```
 npm start
 
 ```
-3. Go to your project location in terminal and link cloned repo of fe-theme with your project
+#### 2. Open terminal and Go to any ```working react application``` in your system, where you want to ```implement FE-Theme```
+
 ```js
-npm link {PATH}/fe-theme/ {PATH}/fe-theme/node_modules/styled-components/ {PATH}/fe-theme/node_modules/react {PATH}/fe-theme/node_modules/react-dom
+npm link {PATH}/fe-theme/ {PATH}/fe-theme/node_modules/styled-components/ {PATH}/fe-theme/node_modules/react {PATH}/fe-theme/node_modules/react-dom 
 ```
+**Note:** PATH is the location of cloned fe-theme folder
+
+#### 3. Last step to get config folder(fe-theme) contains config files of each component in your project repo 
 
-4. Last step to get config folder(fe-theme) contains config files of each component in your project repo 
+Create config file for all the component of fe-theme
+```js
+COMPONENT_CONFIG_PATH=./{location of fe-theme configuration folder in your application} ENVI=local CURRENT_APP_DIR=$(pwd) npm run theme-prepare --prefix ./node_modules/fe-theme
 ```
-ENVI=local CURRENT_APP_DIR=$(pwd) COMPONENT_CONFIG_PATH=./{location of fe-theme component configuration folder in your application} npm run theme-prepare --prefix ./node_modules/fe-theme
+
+Create config file for a single component of fe-theme
+```js
+COMPONENET_NAME=button COMPONENT_CONFIG_PATH=./{location of fe-theme configuration folder in your application} ENVI=local CURRENT_APP_DIR=$(pwd)  npm run theme-prepare --prefix ./node_modules/fe-theme
 ```
-**Note:** ```COMPONENT_CONFIG_PATH``` is a variable and setup it properly.
+**Note:** 
+```COMPONENT_CONFIG_PATH``` is a variable and setup it properly.
+```COMPONENET_NAME``` is the component Name
 
-5. 
+#### 4. Pass theme config to ThemeProvider 
 ```js
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { ThemeProvider } from 'styled-components';
-import theme from '{PATH}/fe-theme/universal/theme';
+import Init from 'fe-theme/Init';
+import theme from '{PATH}/fe-theme/universal/theme';  // Include your theme to fe-theme
 import App from './App';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
-  <ThemeProvider theme={theme}>
+  <ThemeProvider theme={Init(theme)}>
     <App />
   </ThemeProvider>
 );
 ```
 
-6. Hurrah...! Now fe-theme repo is available inside the node_modules of your project, and waching change in fe-theme.
+#### 5. Hurrah...! Now fe-theme repo is available inside the node_modules of your project, and waching change in fe-theme.
 
 
 <!-- # open http://localhost:6006 -->

Init.js

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

README.md

@@ -68,45 +68,68 @@ $ bun add fe-theme
 
 ## Usage
 
-#### 1. Creating a fe-theme folder in your application. It contains config files of components.
+#### 1. Passing configuration settings to the fe-theme library using ThemeProvider
 
 ```js
-COMPONENT_CONFIG_PATH=./{PATH} npm run theme-prepare --prefix ./node_modules/fe-theme
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { ThemeProvider } from 'styled-components';
+import Init from 'fe-theme/Init';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <ThemeProvider theme={Init()}>
+    <App />
+  </ThemeProvider>
+);
 ```
 
-**Note:** ```PATH``` is a variable i.e. path for ```fe-theme configuration folder``` in your application. If you want to place config folder in your root location of your application folder then command will be
+#### 2. You are good to go and import fe-theme component in your application
+```js
+import Button from 'fe-theme/Button';
+
+<Button />
+```
 
+Wow, the configuration is quite simple, but wait... button design is different in my application. No worry, fellow step 3, 4.
+
+#### 3. Creating a fe-theme folder in your application. It contains config files of components.
+
+Create config file for all the component of fe-theme
 ```js
-COMPONENT_CONFIG_PATH=./ npm run theme-prepare --prefix ./node_modules/fe-theme
+COMPONENT_CONFIG_PATH=./{PATH} CURRENT_APP_DIR=$(pwd) npm run theme-prepare --prefix ./node_modules/fe-theme
 ```
 
-#### 2. Passing configuration settings to the fe-theme library using ThemeProvider
+Create config file for a single component of fe-theme
+```js
+COMPONENET_NAME={COMPONENT_NAME} COMPONENT_CONFIG_PATH=./{PATH} CURRENT_APP_DIR=$(pwd) npm run theme-prepare --prefix ./node_modules/fe-theme
+```
+
+**Note:** 
+```PATH``` is a variable i.e. where you want to place config files for your application
+```COMPONENT_NAME``` is a variable i.e. where ```component``` Input, button, CHIP (Allow any case)
+
+#### 4. Passing configuration settings to the fe-theme library using ThemeProvider
 
 ```js
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { ThemeProvider } from 'styled-components';
-import theme from '{PATH}/fe-theme/universal/theme';
+import Init from 'fe-theme/Init';
+import theme from '{PATH}/fe-theme/universal/theme';  // Include your theme to fe-theme
 import App from './App';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
-  <ThemeProvider theme={theme}>
+  // Inside the Init function pass theme
+  <ThemeProvider theme={Init(theme)}>
     <App />
   </ThemeProvider>
 );
 ```
 
-**Note:** ```PATH``` is a variable (Same as 1st point).
+**Note:** ```PATH``` is a variable i.e. location of config files for your application
 
-#### 3. Setup is completed, Now import UI component in your application like button
-```js
-import Button from 'fe-theme/Button';
-
-<Button />
-```
-
-**Hurrah...!!!** Button is created, but button theme does not match with the your application. No worries. You can change default properties of button component
-
+**Hurrah...!!!** Now you can change button(any compponent) property according to your application
 
 ```
 Your Application Folder(Root Directory)

__application/component/Button/Button.js

@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-props-no-spreading */
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';

__application/component/Input/Input.js

@@ -2,18 +2,17 @@ import React from 'react';
 import styled, { css } from 'styled-components';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import PropTypes from 'prop-types';
-import theme from '../theme';
 
 const styles = {
   borderRadius(props) {
     if (props.shape === 'bluntEdged') {
-      return theme.cornerEdge;
+      return props.theme.cornerEdge;
     }
     if (props.shape === 'sharpEdged') {
       return '2px';
     }
     if (props.shape === 'capsular') {
-      return theme.px(10);
+      return props.theme.px(10);
     }
     return '';
   },