Merge branch 'develop'

.eslintrc

@@ -16,6 +16,9 @@
       }
     }
   },
+  "globals": {
+    "globalThis": true
+  },
   "parserOptions": {
     "ecmaVersion":"latest"
   },
@@ -40,6 +43,12 @@
     "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"],
+    "react/jsx-fragments": ["off"]
   }
 }
+

.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)

.github/COMPONENT.md

@@ -0,0 +1,3 @@
+1. Button
+2. Input
+3. Chip

.github/FUNDING.yml

@@ -1,4 +1,4 @@
-github: [Fe-Theme] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+github: [opensrc0] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
 
 open_collective: fe-theme # Replace with a single Open Collective username
 

.github/SETUP.md

@@ -3,21 +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 and link the fe-theme repo inside node_modules folder in 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 
+```
+**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 
+
+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
 ```
-npm link {your_project_location}/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
 ```
-4. Hurrah...! Now you have a setup of local fe-theme repo in your project, and waching change in fe-theme.
+**Note:** 
+```COMPONENT_CONFIG_PATH``` is a variable and setup it properly.
+```COMPONENET_NAME``` is the component Name
+
+#### 4. Pass theme config to ThemeProvider 
+```js
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { ThemeProvider } from 'styled-components';
+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={Init(theme)}>
+    <App />
+  </ThemeProvider>
+);
+```
+
+#### 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 -->
@@ -26,10 +58,21 @@ npm link {your_project_location}/fe-theme
 
 ```
 fe-theme
-  └──__application      
-    └──component                   
+  └── __application      
+    └── component                   
       ├──Button                 (component name)
       |   ├──index.js           (top level exports/re-exports)
       |   ├──Button.js          (Button implementation)
       |   └──Button.story.js    (Story for Button)
+  └── __appset
+    ├──configButton.js                (Config File of Button)
+    ├──configChip.js                  (Config File of Chip)
+    ├──configInput.js                 (Config File of Input)
+    ├── universal                         (Universal Component Folder)
+    |     ├──configColor.js               (Config File for Application Color)
+    |     ├──configFontFamily.js          (Config File for Application FontFamily)
+    |     ├──configFontSize.js            (Config File for Application FontSize)
+    |     ├──configFontWeight.js          (Config File for Application FontWeight)
+    |     └──configPXL.js                 (Config File contain PXL function for Spacing in the application)
+      
 ```

.gitignore

@@ -8,4 +8,8 @@ __build-es
 
 **/index.js
 
+!__application/**/index.js
+
 CHANGELOG.md
+
+themePrepare_bck.js

.vscode/settings.json

@@ -1,5 +1,10 @@
 {
-    "search.exclude": {
+  "search.exclude": {
 		"**/index.js": true,
-	}
-}
+    "**/__build-es/**": true
+	},
+	"editor.tabSize": 2,
+	"editor.codeActionsOnSave": {
+		"source.fixAll.eslint": "explicit"
+	},
+}

Init.js

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

README.md

@@ -1,4 +1,4 @@
-<img src="logo.svg" alt="FE-Theme Logo" width="100%" style="width: 100%;">
+<img src="https://github.com/opensrc0/fe-theme/blob/develop/logo.svg" alt="FE-Theme Logo" width="100%" style="width: 100%;">
 <h2 align="center">A React UI library using styled-component to build consistent, responsive, theme able UI 💪 </h2>
 <br />
 <p align="center">
@@ -50,61 +50,128 @@ FE-Theme is a styled-component based comprehensive library of accessible, reusab
 - **Dark Mode UI:** FE-Theme support dark mode compatibility.
 
 ## Installation
+Install `fe-theme` package using any package manager
+
+```sh
+# with Yarn
+$ yarn add fe-theme
+
+# with npm
+$ npm i fe-theme --save
 
-    npm install fe-theme --save
-
-## Usage
+# with pnpm
+$ pnpm add fe-theme
 
-#### 1. Creating a fe-theme folder in the root directory of you application. It contains configuration files of fe-theme component like Button, Input etc.
+# with Bun
+$ bun add fe-theme
+```
 
-    npm run theme-prepare --prefix ./node_modules/fe-theme
+## Usage
 
-#### 2. Passing universal configuration like color properties, font family properties, to the fe-theme library using ThemeProvider (For internal usage only but required)
+#### 1. Use fe-theme in your application using themeProvider
 
 ```js
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { ThemeProvider } from 'styled-components';
-import theme from '{root-location-of-your-project}/fe-theme/universal/theme'; // root-location-of-your-project is dynamic variable
+import { ThemeProvider } from 'styled-components'; // import ThemeProvider component
+import init from 'fe-theme/init'; // import Init function 
 import App from './App';
 
-ReactDOM.hydrate(
-  <ThemeProvider theme={theme}>
+ReactDOM.createRoot(document.getElementById('root')).render(
+  // Wrap your application with ThemeProvider
+  <ThemeProvider theme={init()}>
     <App />
-  </ThemeProvider>,
-  document.getElementById('root'),
+  </ThemeProvider>
 );
 ```
 
-#### 3. Setup is completed, Now import UI component in your application like button
+#### 2. You are good to go and import fe-theme component in your application
 ```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
-
+Wow, the configuration is quite simple, but wait... button design is different in my application. No worry, follow step 3, 4.
+
+#### 3. Create your own theme
+
+&nbsp;&nbsp; **a)** Create an empty folder called ```fe-theme-config``` in your application at any location.
+
+&nbsp;&nbsp; **c)** Create configButton.js file inside fe-theme-config folder (To configure Button Component)
+
+```js
+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; **c)** Create theme.js file and include configButton.js 
+```js
+import Button from '../configButton';
+
+export default {
+  Button,
+};
+
+```
+Yeah, We have created config files Mannually but You can also generate config files automatically using command line [Check Commands](./.github/COMMAND.md)
+
+#### 4. Pass the newly created theme file in init function
+
+```js
+import { ThemeProvider } from 'styled-components';
+import init from 'fe-theme/init';
+import theme from '{PATH}/fe-theme-config/theme';  // Include your theme to fe-theme
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  // Inside the Init function pass theme
+  <ThemeProvider theme={init(theme)}>
+    <App />
+  </ThemeProvider>
+);
+```
+
+**Note:** ```PATH``` is a variable i.e. location of config files in your application
+
+**Hurrah...!!!** Now you can change button(any compponent) property according to your application
 
 ```
 Your Application Folder(Root Directory)
-  └──fe-theme                       
+  └──fe-theme-config                       
     ├──configButton           
     ├──configInput          
-    └──configChip    
-     
+    └──configChip
 ```
-Play around the property of button according to your project.
+Play around the property of component according to your project.
 
 ## Online Editor Templates
-WIP
+#### 1. CodeSandbox
+- JavaScript Starter: https://codesandbox.io/p/devbox/fe-theme-js-6q2vcg
+<!-- - TypeScript Starter: WIP -->
+<!-- - NextJS TypeScript Starter: WIP -->
 
-## Contributing
+#### 2. Stackblitz
+- JavaScript Starter: https://stackblitz.com/edit/fe-theme-js-b6mri2
+<!-- - TypeScript Starter: WIP -->
+<!-- - NextJS TypeScript Starter: WIP -->
 
-Feel like contributing? Most welcome! 
-Follow this quick [setup and guide lines](./.github/CONTRIBUTING.md) to get fe-theme working on your local machine and contribute.
 
+## Contributing
 
+Feel like contributing? Most welcome! 
+[Setup locally](./.github/SETUP.md) to get fe-theme working on your local machine and [guide lines](./.github/CONTRIBUTING.md) to contribute in fe-theme.
 
 ## Contributors