Skip to content

Latest commit

 

History

History
74 lines (60 loc) · 2.82 KB

SETUP.md

File metadata and controls

74 lines (60 loc) · 2.82 KB
Raw

Setup

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

npm install
npm run build
npm start

2. Open terminal and Go to any working react application in your system, where you want to implement FE-Theme

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

COMPONENT_CONFIG_PATH=./{Location} ENVI=local CURRENT_APP_DIR=$(pwd) npm run theme-prepare --prefix ./node_modules/fe-theme

    Create config file for a single component of fe-theme

COMPONENET_NAME=button COMPONENT_CONFIG_PATH=./{Location} ENVI=local CURRENT_APP_DIR=$(pwd)  npm run theme-prepare --prefix ./node_modules/fe-theme

Note: COMPONENT_CONFIG_PATH is the Location of fe-theme-config folder in your application. COMPONENET_NAME is the component Name

4. Pass theme config to ThemeProvider

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.

Folder Structure

fe-theme
  └── __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)
    ├──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)