diff --git a/.github/SETUP.md b/.github/SETUP.md index 8b90ef2..2b898e1 100644 --- a/.github/SETUP.md +++ b/.github/SETUP.md @@ -3,7 +3,7 @@ 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 ``` @@ -11,33 +11,45 @@ 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( - + ); ``` -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. diff --git a/Init.js b/Init.js new file mode 100644 index 0000000..4b6fe43 --- /dev/null +++ b/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; +} diff --git a/README.md b/README.md index 756d446..a3b5c65 100644 --- a/README.md +++ b/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( + + + +); ``` -**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'; + +