Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/code-star/phoenix
:star: https://phoenix.codestar.nl/ :star:
https://github.com/code-star/phoenix
babel circle-ci cssmodules design-system ecmascript eslint github-pages jest lerna library npm react sass stylelint travis-ci ui-components webpack
Last synced: 28 days ago
JSON representation
:star: https://phoenix.codestar.nl/ :star:
- Host: GitHub
- URL: https://github.com/code-star/phoenix
- Owner: code-star
- License: mit
- Created: 2018-12-03T20:44:56.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2019-03-19T09:53:53.000Z (almost 6 years ago)
- Last Synced: 2024-04-25T04:20:26.650Z (8 months ago)
- Topics: babel, circle-ci, cssmodules, design-system, ecmascript, eslint, github-pages, jest, lerna, library, npm, react, sass, stylelint, travis-ci, ui-components, webpack
- Language: JavaScript
- Homepage:
- Size: 1.9 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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](https://lernajs.io/)
* **📜 User Interfaces**: [React](https://reactjs.org)
* **📜 JavaScript Superset**: [ECMAScript](https://tc39.github.io/ecma262/)
* **📜 CSS extension**: [Sass](https://sass-lang.com/)
* **📜 CSS Module**: [CSS Modules](https://github.com/css-modules/css-modules)
* **📜 Transpile**: [Babel](https://babeljs.io)
* **📜 Bundle**: [Webpack](https://webpack.js.org/)
* **📜 Package Manager**: [NPM](https://www.npmjs.com/) [🐝](https://www.npmjs.com/package/phoenix-buttons)
* **📜 UI Development Environment**: [Storybook](https://storybook.js.org/)
* **📜 Cloud Hosting**: [GitHub Pages](https://pages.github.com/) [🐝](https://phoenix.codestar.nl/)
* **📜 Continuous Integration**: [CircleCI](https://circleci.com/) [🐝](https://circleci.com/gh/code-star/phoenix/) [](https://circleci.com/gh/code-star/phoenix)
* **📜 Continuous Integration**: [TravisCI](https://travis-ci.org/) [🐝](https://travis-ci.org/code-star/phoenix/) [](https://travis-ci.org/code-star/phoenix)
* **📜 JavaScript Testing**: [Jest](https://jestjs.io/)
* **📜 ESLint Linter**: [ESLint](https://github.com/eslint/eslint)
* **📜 Style Linter**: [StyleLint](https://stylelint.io/)
## 📕 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](https://lernajs.io/)
### ⚙️ React
View Content
* Phoenix uses React JavaScript library for building user interfaces.
* Information on React can be found [here](https://reactjs.org/)
### ⚙️ ECMAScript
View Content
* Phoenix uses ECMAScript as a superset of JavaScript that compiles to plain JavaScript.
* Information on ECMAScript can be found [here](https://tc39.github.io/ecma262/)
### ⚙️ Sass
View Content
* Phoenix uses Sass extension language.
* Information on Sass can be found [here](https://sass-lang.com/)
### ⚙️ CSS Modules
View Content
* Phoenix uses CSS Modules to scope class names.
* Information on CSS Modules can be found [here](https://github.com/css-modules/css-modules)
### ⚙️ Babel
View Content
* Phoenix uses Babel via babel-loader to transpile ECMAScript.
* Information on Babel can be found [here](https://babeljs.io/)
### ⚙️ 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](https://webpack.js.org/)
### ⚙️ 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](https://www.npmjs.com/)
### ⚙️ 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](https://storybook.js.org/)
### ⚙️ GitHub Pages
View Content
* Phoenix development is deployed to GitHub Pages.
* GitHub Pages environment can be found [here](https://phoenix.codestar.nl/)
* Deployments can be found [here](https://github.com/code-star/phoenix/deployments)
* Information on Github Pages can be found [here](https://pages.github.com/)
### ⚙️ CircleCI
View Content
* Phoenix uses CircleCI for Continuous Integration and Delivery.
* CI/CD jobs can be found [here](https://circleci.com/gh/code-star/phoenix)
* Information on CircleCI can be found [here](https://circleci.com/)
### ⚙️ TravisCI
View Content
* Phoenix uses TravisCI for Continuous Integration and Delivery.
* CI/CD jobs can be found [here](https://travis-ci.org/code-star/phoenix)
* Information on TravisCI can be found [here](https://travis-ci.org/)
### ⚙️ Jest
View Content
* Phoenix uses Jest for unit and snapshot testing.
* Information on Jest can be found [here](https://jestjs.io/)
### ⚙️ ESLint
View Content
* Phoenix uses ESLint to check ECMAScript code for readability, maintainability, and functionality errors.
* Information on ESLint can be found [here](https://github.com/eslint/eslint)
### ⚙️ StyleInt
View Content
* Phoenix uses StyleLint to avoid errors and enforce conventions in styles.
* Information on StyleLint can be found [here](https://stylelint.io/)