diff --git a/.eslintrc b/.eslintrc index b704143..153c0ab 100644 --- a/.eslintrc +++ b/.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"] } } + diff --git a/.github/COMMAND.md b/.github/COMMAND.md new file mode 100644 index 0000000..af9c360 --- /dev/null +++ b/.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 +``` + +

OR

+ +   ==> 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 +``` + +   **Note:** + +   ```1. PATH``` is a variable i.e. where you want to place config files in your application + +   ```2. COMPONENT_NAME``` is a variable i.e. name of the component ```Input```, ```button```. [Find the component list](./COMPONENT.md) diff --git a/.github/COMPONENT.md b/.github/COMPONENT.md new file mode 100644 index 0000000..bbe9583 --- /dev/null +++ b/.github/COMPONENT.md @@ -0,0 +1,3 @@ +1. Button +2. Input +3. Chip diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml index e2a8d59..d098526 100644 --- a/.github/FUNDING.yml +++ b/.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 diff --git a/.github/SETUP.md b/.github/SETUP.md index 409db31..2b898e1 100644 --- a/.github/SETUP.md +++ b/.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( + + + +); +``` + +#### 5. Hurrah...! Now fe-theme repo is available inside the node_modules of your project, and waching change in fe-theme. @@ -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) + ``` diff --git a/.gitignore b/.gitignore index 36bee74..14a7608 100644 --- a/.gitignore +++ b/.gitignore @@ -8,4 +8,8 @@ __build-es **/index.js +!__application/**/index.js + CHANGELOG.md + +themePrepare_bck.js diff --git a/.vscode/settings.json b/.vscode/settings.json index dbbf167..88f12eb 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,5 +1,10 @@ { - "search.exclude": { + "search.exclude": { "**/index.js": true, - } -} \ No newline at end of file + "**/__build-es/**": true + }, + "editor.tabSize": 2, + "editor.codeActionsOnSave": { + "source.fixAll.eslint": "explicit" + }, +} diff --git a/Init.js b/Init.js new file mode 100644 index 0000000..0078c05 --- /dev/null +++ b/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; +} diff --git a/README.md b/README.md index 85467d0..29b4d45 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -FE-Theme Logo +FE-Theme Logo

A React UI library using styled-component to build consistent, responsive, theme able UI 💪


@@ -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( - +ReactDOM.createRoot(document.getElementById('root')).render( + // Wrap your application with ThemeProvider + - , - document.getElementById('root'), + ); ``` -#### 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';