Skip to content

Commit c71f792

Browse files
opensrc0opensrc0
authored
Merge pull request #115 from opensrc0/develop
working setup
2 parents 41ff73a + 56d0bf0 commit c71f792

6 files changed

Lines changed: 63 additions & 61 deletions

File tree

‎.github/SETUP.md‎

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,31 +6,29 @@ Clone the repository and run the following commands from the root directory
66
#### 1. Go to the fe-theme repo location in your terminal and do
77
```
88
npm install
9-
```
10-
```
119
npm start
12-
1310
```
11+
1412
#### 2. Open terminal and Go to any ```working react application``` in your system, where you want to ```implement FE-Theme```
1513

1614
```js
1715
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
1816
```
19-
**Note:** PATH is the location of cloned fe-theme folder
17+
  **Note:** PATH is the location of cloned fe-theme folder
2018

2119
#### 3. Last step to get config folder(fe-theme) contains config files of each component in your project repo
2220

23-
Create config file for all the component of fe-theme
21+
    Create config file for all the component of fe-theme
2422
```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
23+
COMPONENT_CONFIG_PATH=./{Location} ENVI=local CURRENT_APP_DIR=$(pwd) npm run theme-prepare --prefix ./node_modules/fe-theme
2624
```
2725

28-
Create config file for a single component of fe-theme
26+
    Create config file for a single component of fe-theme
2927
```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
28+
COMPONENET_NAME=button COMPONENT_CONFIG_PATH=./{Location} ENVI=local CURRENT_APP_DIR=$(pwd) npm run theme-prepare --prefix ./node_modules/fe-theme
3129
```
3230
**Note:**
33-
```COMPONENT_CONFIG_PATH``` is a variable and setup it properly.
31+
```COMPONENT_CONFIG_PATH``` is the ***Location*** of ***fe-theme-config*** folder in your application.
3432
```COMPONENET_NAME``` is the component Name
3533

3634
#### 4. Pass theme config to ThemeProvider
@@ -52,8 +50,6 @@ ReactDOM.createRoot(document.getElementById('root')).render(
5250
#### 5. Hurrah...! Now fe-theme repo is available inside the node_modules of your project, and waching change in fe-theme.
5351

5452

55-
<!-- # open http://localhost:6006 -->
56-
5753
## Folder Structure
5854

5955
```
@@ -68,11 +64,10 @@ fe-theme
6864
├──configButton.js (Config File of Button)
6965
├──configChip.js (Config File of Chip)
7066
├──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)
67+
├──configColor.js (Config File for Application Color)
68+
├──configFontFamily.js (Config File for Application FontFamily)
69+
├──configFontSize.js (Config File for Application FontSize)
70+
├──configFontWeight.js (Config File for Application FontWeight)
71+
└──configPXL.js (Config File contain PXL function for Spacing in the application)
7772
7873
```

‎README.md‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ FE-Theme is a styled-component based comprehensive library of accessible, reusab
3434
1. 🚀 [Features](#features)
3535
2. 📦 [Installation](#installation)
3636
3. 💻 [Usage](#usage)
37+
4. ⚙️ [Customization](#customization)
3738
4. 📚 [Online Editor Templates](#online-editor-templates)
3839
5. 📝 [Contributing](#contributing)
3940
6. ✨ [Contributors](#contributors)
@@ -91,13 +92,20 @@ import Button from 'fe-theme/Button';
9192
```
9293

9394
&nbsp;&nbsp;Wow, the configuration is quite simple, but wait... button design is different in your application.
94-
&nbsp;&nbsp;No worry, follow step 3, 4.
95+
&nbsp;&nbsp;No worry, Checkout Customization.
9596

96-
#### 3. Create your own theme
97+
98+
## Customization
99+
100+
#### 1. Create your own theme
101+
102+
==> To Generate config files for components **Automatically** using command line [Check Commands](./.github/COMMAND.md).
103+
104+
==> To create config files for components **Manually**, follow steps given below.
97105

98106
&nbsp;&nbsp; **a)** Create an empty folder called ```fe-theme-config``` in your application at any location.
99107

100-
&nbsp;&nbsp; **c)** Create configButton.js file inside fe-theme-config folder (To configure Button Component)
108+
&nbsp;&nbsp; **c)** Create ```configButton.js``` file inside ```fe-theme-config folder``` (To configure Button Component)
101109

102110
```js
103111
const Button = {
@@ -134,9 +142,8 @@ export default {
134142
};
135143

136144
```
137-
Yeah, We have created config files Mannually but You can also generate config files automatically using command line [Check Commands](./.github/COMMAND.md)
138145

139-
#### 4. Pass the newly created theme file in init function
146+
#### 2. Pass the newly created theme file in init function
140147

141148
```js
142149
import { ThemeProvider } from 'styled-components';

‎__appset/configFontFamily.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const FontFamily = {
2-
"roboto": "Roboto",
3-
"averta": "Averta",
4-
"sans": "Open Sans,sans-serif"
5-
}
2+
roboto: 'Roboto',
3+
averta: 'Averta',
4+
sans: 'Open Sans,sans-serif',
5+
};
66

7-
export default FontFamily
7+
export default FontFamily;

‎__appset/configFontSize.js‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
const FontSize = {
2-
"xxxxxl": "48px",
3-
"xxxxl": "32px",
4-
"xxxl": "28px",
5-
"xxl": "24px",
6-
"xl": "20px",
7-
"l": "18px",
8-
"m": "16px",
9-
"md": "15px",
10-
"s": "14px",
11-
"sm": "13px",
12-
"xs": "12px",
13-
"xxs": "11px",
14-
"xxxs": "10px",
15-
"xxxxs": "8px"
16-
}
2+
xxxxxl: '48px',
3+
xxxxl: '32px',
4+
xxxl: '28px',
5+
xxl: '24px',
6+
xl: '20px',
7+
l: '18px',
8+
m: '16px',
9+
md: '15px',
10+
s: '14px',
11+
sm: '13px',
12+
xs: '12px',
13+
xxs: '11px',
14+
xxxs: '10px',
15+
xxxxs: '8px',
16+
};
1717

18-
export default FontSize
18+
export default FontSize;

‎__appset/configFontWeight.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
const FontWeight = {
2-
"normal": "400",
3-
"medium": "500",
4-
"semibold": "600",
5-
"bold": "700"
6-
}
2+
normal: '400',
3+
medium: '500',
4+
semibold: '600',
5+
bold: '700',
6+
};
77

8-
export default FontWeight
8+
export default FontWeight;

‎__appset/configInput.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
const Input = {
2-
"borderRadius": "4px",
3-
"primary": {
4-
"borderColor": "white"
2+
borderRadius: '4px',
3+
primary: {
4+
borderColor: 'white',
55
},
6-
"secondary": {
7-
"borderColor": "white"
6+
secondary: {
7+
borderColor: 'white',
88
},
9-
"tertiary": {
10-
"borderColor": "white"
9+
tertiary: {
10+
borderColor: 'white',
1111
},
12-
"quaternary": {
13-
"borderColor": "white"
14-
}
15-
}
12+
quaternary: {
13+
borderColor: 'white',
14+
},
15+
};
1616

17-
export default Input
17+
export default Input;

0 commit comments

Comments
 (0)