Skip to content

Commit aa8f445

Browse files
opensrc0opensrc0
committed
Merge branch 'develop'
2 parents b82272e + 80c2604 commit aa8f445

41 files changed

Lines changed: 19075 additions & 812 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.eslintrc‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@
1616
}
1717
}
1818
},
19+
"globals": {
20+
"globalThis": true
21+
},
1922
"parserOptions": {
2023
"ecmaVersion":"latest"
2124
},
@@ -40,6 +43,12 @@
4043
"react/jsx-filename-extension": ["error", { "extensions": [".js"] }],
4144
"react/require-default-props": ["off"],
4245
"react/jsx-props-no-spreading": ["off"],
43-
"no-restricted-exports": ["off"]
46+
"no-restricted-exports": ["off"],
47+
// "comma-dangle": ["error", "never"],
48+
// "quotes": ["error", "double"],
49+
// "quote-props": ["error", "always"],
50+
// "semi": ["error", "never"],
51+
"react/jsx-fragments": ["off"]
4452
}
4553
}
54+

‎.github/COMMAND.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
   ==> Create config file for all the component of fe-theme
2+
```js
3+
COMPONENT_CONFIG_PATH=./{PATH} CURRENT_APP_DIR=$(pwd) npm run theme-prepare --prefix ./node_modules/fe-theme
4+
```
5+
6+
<p align="center">OR</p>
7+
8+
&nbsp;&nbsp; ==> Creating config file for an individual component
9+
```js
10+
COMPONENET_NAME={COMPONENT_NAME} COMPONENT_CONFIG_PATH=./{PATH} CURRENT_APP_DIR=$(pwd) npm run theme-prepare --prefix ./node_modules/fe-theme
11+
```
12+
13+
&nbsp;&nbsp; **Note:**
14+
15+
&nbsp;&nbsp; ```1. PATH``` is a variable i.e. where you want to place config files in your application
16+
17+
&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‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
1. Button
2+
2. Input
3+
3. Chip

‎.github/FUNDING.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
github: [Fe-Theme] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
1+
github: [opensrc0] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
22

33
open_collective: fe-theme # Replace with a single Open Collective username
44

‎.github/SETUP.md‎

Lines changed: 50 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,53 @@ Clone the repository and run the following commands from the root directory
33

44
## Local setup
55

6-
1. Go to the fe-theme repo location in your terminal and do
6+
#### 1. Go to the fe-theme repo location in your terminal and do
77
```
88
npm install
9-
109
```
1110
```
1211
npm start
1312
1413
```
15-
3. Go to your project and link the fe-theme repo inside node_modules folder in your project
14+
#### 2. Open terminal and Go to any ```working react application``` in your system, where you want to ```implement FE-Theme```
15+
16+
```js
17+
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
18+
```
19+
**Note:** PATH is the location of cloned fe-theme folder
20+
21+
#### 3. Last step to get config folder(fe-theme) contains config files of each component in your project repo
22+
23+
Create config file for all the component of fe-theme
24+
```js
25+
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
1626
```
17-
npm link {your_project_location}/fe-theme
1827

28+
Create config file for a single component of fe-theme
29+
```js
30+
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
1931
```
20-
4. Hurrah...! Now you have a setup of local fe-theme repo in your project, and waching change in fe-theme.
32+
**Note:**
33+
```COMPONENT_CONFIG_PATH``` is a variable and setup it properly.
34+
```COMPONENET_NAME``` is the component Name
35+
36+
#### 4. Pass theme config to ThemeProvider
37+
```js
38+
import React from 'react';
39+
import ReactDOM from 'react-dom';
40+
import { ThemeProvider } from 'styled-components';
41+
import Init from 'fe-theme/Init';
42+
import theme from '{PATH}/fe-theme/universal/theme'; // Include your theme to fe-theme
43+
import App from './App';
44+
45+
ReactDOM.createRoot(document.getElementById('root')).render(
46+
<ThemeProvider theme={Init(theme)}>
47+
<App />
48+
</ThemeProvider>
49+
);
50+
```
51+
52+
#### 5. Hurrah...! Now fe-theme repo is available inside the node_modules of your project, and waching change in fe-theme.
2153

2254

2355
<!-- # open http://localhost:6006 -->
@@ -26,10 +58,21 @@ npm link {your_project_location}/fe-theme
2658

2759
```
2860
fe-theme
29-
└──__application
30-
└──component
61+
└── __application
62+
└── component
3163
├──Button (component name)
3264
| ├──index.js (top level exports/re-exports)
3365
| ├──Button.js (Button implementation)
3466
| └──Button.story.js (Story for Button)
67+
└── __appset
68+
├──configButton.js (Config File of Button)
69+
├──configChip.js (Config File of Chip)
70+
├──configInput.js (Config File of Input)
71+
├── universal (Universal Component Folder)
72+
| ├──configColor.js (Config File for Application Color)
73+
| ├──configFontFamily.js (Config File for Application FontFamily)
74+
| ├──configFontSize.js (Config File for Application FontSize)
75+
| ├──configFontWeight.js (Config File for Application FontWeight)
76+
| └──configPXL.js (Config File contain PXL function for Spacing in the application)
77+
3578
```

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,8 @@ __build-es
88

99
**/index.js
1010

11+
!__application/**/index.js
12+
1113
CHANGELOG.md
14+
15+
themePrepare_bck.js

‎.vscode/settings.json‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
{
2-
"search.exclude": {
2+
"search.exclude": {
33
"**/index.js": true,
4-
}
5-
}
4+
"**/__build-es/**": true
5+
},
6+
"editor.tabSize": 2,
7+
"editor.codeActionsOnSave": {
8+
"source.fixAll.eslint": "explicit"
9+
},
10+
}

‎Init.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import merge from 'lodash.merge';
2+
import defaultTheme from './__appset/theme';
3+
4+
export default function init(userTheme) {
5+
const mergeTheme = merge(defaultTheme, userTheme);
6+
7+
return mergeTheme;
8+
}

‎README.md‎

Lines changed: 93 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<img src="logo.svg" alt="FE-Theme Logo" width="100%" style="width: 100%;">
1+
<img src="https://github.com/opensrc0/fe-theme/blob/develop/logo.svg" alt="FE-Theme Logo" width="100%" style="width: 100%;">
22
<h2 align="center">A React UI library using styled-component to build consistent, responsive, theme able UI 💪 </h2>
33
<br />
44
<p align="center">
@@ -50,61 +50,128 @@ FE-Theme is a styled-component based comprehensive library of accessible, reusab
5050
- **Dark Mode UI:** FE-Theme support dark mode compatibility.
5151

5252
## Installation
53+
Install `fe-theme` package using any package manager
54+
55+
```sh
56+
# with Yarn
57+
$ yarn add fe-theme
58+
59+
# with npm
60+
$ npm i fe-theme --save
5361

54-
npm install fe-theme --save
55-
56-
## Usage
62+
# with pnpm
63+
$ pnpm add fe-theme
5764

58-
#### 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.
65+
# with Bun
66+
$ bun add fe-theme
67+
```
5968

60-
npm run theme-prepare --prefix ./node_modules/fe-theme
69+
## Usage
6170

62-
#### 2. Passing universal configuration like color properties, font family properties, to the fe-theme library using ThemeProvider (For internal usage only but required)
71+
#### 1. Use fe-theme in your application using themeProvider
6372

6473
```js
65-
import React from 'react';
66-
import ReactDOM from 'react-dom';
67-
import { ThemeProvider } from 'styled-components';
68-
import theme from '{root-location-of-your-project}/fe-theme/universal/theme'; // root-location-of-your-project is dynamic variable
74+
import { ThemeProvider } from 'styled-components'; // import ThemeProvider component
75+
import init from 'fe-theme/init'; // import Init function
6976
import App from './App';
7077

71-
ReactDOM.hydrate(
72-
<ThemeProvider theme={theme}>
78+
ReactDOM.createRoot(document.getElementById('root')).render(
79+
// Wrap your application with ThemeProvider
80+
<ThemeProvider theme={init()}>
7381
<App />
74-
</ThemeProvider>,
75-
document.getElementById('root'),
82+
</ThemeProvider>
7683
);
7784
```
7885

79-
#### 3. Setup is completed, Now import UI component in your application like button
86+
#### 2. You are good to go and import fe-theme component in your application
8087
```js
8188
import Button from 'fe-theme/Button';
8289

8390
<Button />
8491
```
8592

86-
Hurrah...!!! Button is created, but button theme does not match with the your application. No worries. You can change default properties of button component
87-
93+
Wow, the configuration is quite simple, but wait... button design is different in my application. No worry, follow step 3, 4.
94+
95+
#### 3. Create your own theme
96+
97+
&nbsp;&nbsp; **a)** Create an empty folder called ```fe-theme-config``` in your application at any location.
98+
99+
&nbsp;&nbsp; **c)** Create configButton.js file inside fe-theme-config folder (To configure Button Component)
100+
101+
```js
102+
const Button = {
103+
"borderRadius": "50px",
104+
"borderColor": "12px",
105+
"primary": {
106+
"color": "white",
107+
"borderColor": "white"
108+
},
109+
"secondary": {
110+
"color": "white",
111+
"borderColor": "white"
112+
}
113+
}
114+
115+
export default Button;
116+
```
117+
&nbsp;&nbsp; **Note** Config file name start with ```config``` keyword along with ```component Name``` like ```configButton.js```/```configInput.js```
118+
119+
&nbsp;&nbsp; **c)** Create theme.js file and include configButton.js
120+
```js
121+
import Button from '../configButton';
122+
123+
export default {
124+
Button,
125+
};
126+
127+
```
128+
Yeah, We have created config files Mannually but You can also generate config files automatically using command line [Check Commands](./.github/COMMAND.md)
129+
130+
#### 4. Pass the newly created theme file in init function
131+
132+
```js
133+
import { ThemeProvider } from 'styled-components';
134+
import init from 'fe-theme/init';
135+
import theme from '{PATH}/fe-theme-config/theme'; // Include your theme to fe-theme
136+
import App from './App';
137+
138+
ReactDOM.createRoot(document.getElementById('root')).render(
139+
// Inside the Init function pass theme
140+
<ThemeProvider theme={init(theme)}>
141+
<App />
142+
</ThemeProvider>
143+
);
144+
```
145+
146+
**Note:** ```PATH``` is a variable i.e. location of config files in your application
147+
148+
**Hurrah...!!!** Now you can change button(any compponent) property according to your application
88149

89150
```
90151
Your Application Folder(Root Directory)
91-
└──fe-theme
152+
└──fe-theme-config
92153
├──configButton
93154
├──configInput
94-
└──configChip
95-
155+
└──configChip
96156
```
97-
Play around the property of button according to your project.
157+
Play around the property of component according to your project.
98158

99159
## Online Editor Templates
100-
WIP
160+
#### 1. CodeSandbox
161+
- JavaScript Starter: https://codesandbox.io/p/devbox/fe-theme-js-6q2vcg
162+
<!-- - TypeScript Starter: WIP -->
163+
<!-- - NextJS TypeScript Starter: WIP -->
101164

102-
## Contributing
165+
#### 2. Stackblitz
166+
- JavaScript Starter: https://stackblitz.com/edit/fe-theme-js-b6mri2
167+
<!-- - TypeScript Starter: WIP -->
168+
<!-- - NextJS TypeScript Starter: WIP -->
103169

104-
Feel like contributing? Most welcome!
105-
Follow this quick [setup and guide lines](./.github/CONTRIBUTING.md) to get fe-theme working on your local machine and contribute.
106170

171+
## Contributing
107172

173+
Feel like contributing? Most welcome!
174+
[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.
108175

109176
## Contributors
110177

0 commit comments

Comments
 (0)