Phoenix

Delightful User Interfaces

Status

⚠️ This project is a work in progress and is not ready for production use yet!

📕 Introduction

📚 Phoenix Stack

View Content

• 📜 Multiple Packages: Lerna

• 📜 User Interfaces: React

• 📜 JavaScript Superset: ECMAScript

• 📜 CSS extension: Sass

• 📜 CSS Module: CSS Modules

• 📜 Transpile: Babel

• 📜 Bundle: Webpack

• 📜 Package Manager: NPM 🐝

• 📜 UI Development Environment: Storybook

• 📜 Cloud Hosting: GitHub Pages 🐝

• 📜 Continuous Integration: CircleCI 🐝

• 📜 Continuous Integration: TravisCI 🐝

• 📜 JavaScript Testing: Jest

• 📜 ESLint Linter: ESLint

• 📜 Style Linter: StyleLint

📕 Packages

📦 Phoenix MaterialButtons

View Content

• 🎨 MaterialButtons
  • 🎨 Contained
    • 🎨 Contained Default
    • 🎨 Contained Primary
    • 🎨 Contained Secondary
    • 🎨 Contained Disabled
    • 🎨 Contained Links
    • 🎨 Contained Upload
  • 🎨 Text
    • 🎨 Text Default
    • 🎨 Text Primary
    • 🎨 Text Secondary
    • 🎨 Text Disabled
    • 🎨 Text Links
    • 🎨 Text Upload
  • 🎨 Flat
    • 🎨 Flat Default
    • 🎨 Flat Primary
    • 🎨 Flat Secondary
    • 🎨 Flat Disabled
    • 🎨 Flat Links
    • 🎨 Flat Upload

📕 Infrastructure

⚙️ Lerna

View Content

• Phoenix lives in a multi-package repository optimized by Lerna with Git and NPM, splitting up UI codebase into separate independently versioned packages.

• Information on Lerna can be found here

⚙️ React

View Content

• Phoenix uses React JavaScript library for building user interfaces.

• Information on React can be found here

⚙️ ECMAScript

View Content

• Phoenix uses ECMAScript as a superset of JavaScript that compiles to plain JavaScript.

• Information on ECMAScript can be found here

⚙️ Sass

View Content

• Phoenix uses Sass extension language.

• Information on Sass can be found here

⚙️ CSS Modules

View Content

• Phoenix uses CSS Modules to scope class names.

• Information on CSS Modules can be found here

⚙️ Babel

View Content

• Phoenix uses Babel via babel-loader to transpile ECMAScript.

• Information on Babel can be found here

⚙️ Webpack

View Content

• Phoenix uses Webpack to make production bundles to ship with packages as well as development bundles to use with webpack-dev-server and Storybook.

• Information on Webpack can be found here

⚙️ NPM

View Content

• Phoenix publishes artifacts in private packages through NPM package manager.

• Artifacts can be installed like this. npm install --save [package-name]

• Information on NPM can be found here

⚙️ Storybook

View Content

• Phoenix uses Storybook development environment for UI components allowing to browse a component library, view the different states of each component, and interactively develop and test components.

• Information on Storybook can be found here

⚙️ GitHub Pages

View Content

• Phoenix development is deployed to GitHub Pages.

• GitHub Pages environment can be found here

• Deployments can be found here

• Information on Github Pages can be found here

⚙️ CircleCI

View Content

• Phoenix uses CircleCI for Continuous Integration and Delivery.

• CI/CD jobs can be found here

• Information on CircleCI can be found here

⚙️ TravisCI

View Content

• Phoenix uses TravisCI for Continuous Integration and Delivery.

• CI/CD jobs can be found here

• Information on TravisCI can be found here

⚙️ Jest

View Content

• Phoenix uses Jest for unit and snapshot testing.

• Information on Jest can be found here

⚙️ ESLint

View Content

• Phoenix uses ESLint to check ECMAScript code for readability, maintainability, and functionality errors.

• Information on ESLint can be found here

⚙️ StyleInt

View Content

• Phoenix uses StyleLint to avoid errors and enforce conventions in styles.

• Information on StyleLint can be found here