Andromeda

Delightful User Interfaces

📕 Introduction

📚 Andromeda Stack

View Content

• 📜 Multiple Packages: Lerna

• 📜 User Interfaces: React

• 📜 JavaScript Superset: TypeScript

• 📜 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

• 📜 TypeScript Linter: TSLint

• 📜 Style Linter: StyleLint

📕 Packages

📦 Andromeda Buttons

View Content

• 🎨 MaterialButtons
  • 🎨 Contained Default MaterialButton
  • 🎨 Contained Primary MaterialButton
  • 🎨 Contained Secondary MaterialButton

📕 Infrastructure

⚙️ Lerna

View Content

• Andromeda 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

• Andromeda uses React JavaScript library for building user interfaces.

• Information on React can be found here

⚙️ TypeScript

View Content

• Andromeda uses TypeScript as a typed superset of JavaScript that compiles to plain JavaScript.

• Information on TypeScript can be found here

⚙️ Sass

View Content

• Andromeda uses Sass extension language.

• Information on Sass can be found here

⚙️ CSS Modules

View Content

• Andromeda uses CSS Modules to scope class names.

• Information on CSS Modules can be found here

⚙️ Babel

View Content

• Andromeda uses Babel via babel-loader to transpile ES6 and ts-loader to transpile TypeScript.

• Information on Babel can be found here

⚙️ Webpack

View Content

• Andromeda 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

• Andromeda 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

• Andromeda 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

• Andromeda development is deployed to two environments of which GitHub Pages is one.

• GitHub Pages environment can be found here

• Deployments can be found here

• Information on Github Pages can be found here

⚙️ CircleCI

View Content

• Andromeda uses CircleCI for Continuous Integration and Delivery.

• CI/CD jobs can be found here

• Information on CircleCI can be found here

⚙️ TravisCI

View Content

• Andromeda uses TravisCI for Continuous Integration and Delivery.

• CI/CD jobs can be found here

• Information on TravisCI can be found here

⚙️ Jest

View Content

• Andromeda uses Jest for unit and snapshot testing.

• Information on Jest can be found here

⚙️ TSLint

View Content

• Andromeda uses TSLint to check TypeScript code for readability, maintainability, and functionality errors.

• Information on TSLint can be found here

⚙️ StyleInt

View Content

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

• Information on StyleLint can be found here