@propeldata/propel-ui v1.0.2

Propel-UI npm package.

https://www.npmjs.com/package/@propeldata/propel-ui

Project structure.

• package/ folder - directly npm package @propeldata/propel-ui.
• testing/ folder - demo project for testing. Based on create-react-app. @propeldata/propel-ui is installed as a package.

Development. Storybook.

• Install Storybook CLI globally:

  npm i @storybook/cli -g

• Navigate to package/ folder and install dependencies.

  npm i

• Run needed command:

  • Develop:

    npm start

  • Clean:

    npm run clean

  • Build:

    npm run build

  • Publish:

    npm run publish

    Publishes package to npm. Requires npm account and login into it. How to login.

Testing. Demo project.

• Navigate to testing/ folder and install dependencies.

  npm i

• Run needed command:
  • Develop:

    npm start

  • Clean:

    npm run clean

  • Build:

    npm run build

• Test component by adding it to React page/component, etc:

  import { SomeComponent } from '@propeldata/propel-ui';
  ...
  <SomeComponent />

  Should look and work the same as in Storybook.

Storybook.

• Settings. Setted in files in package/.storybook folder. Folder is hidden. Files: main.js, manager.js, preview.js.
• Stories. Located at package/src/stories/ folder.

Styling.

Propel-UI use Material UI.

Global Javascript/Typescript theme styling.

• Global variables and styles located in package/src/theme/index.js.
• Docs: https://material-ui.com/customization/default-theme/#default-theme

Global SCSS styling.

• Main theme file src/theme/scss/index.scss.
• Variables src/theme/scss/_variables.scss.

!!! IMPORTANT !!!

*Keep SCSS AND JS variables the same in SCSS and JS: src/theme/index.js and src/theme/scss/_variables.scss. For example breakpoints, colors etc. Be sure to change in both files.

Components styling.

• Inside component folder create file style.module.scss:

  .componentClass {
      // styles here...
  }

• Import styles into component:

  import styles from './style.module.scss';
  ...
  <div className={styles.componentClass}>

Different.

App use Typescript.

Types declared in package/src/types/ folder. Included to project in file package/tsconfig.json.

If you have typescript errors when importing assets (images, fonts, etc) check did you declare types.

Absolute imports.

To be added.