Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/MCS-Lite/mcs-lite

🎛 MCS Lite Common UI and Websites.
https://github.com/MCS-Lite/mcs-lite
create-react-app mcs mcs-lite mediatek mediatek-linkit react styled-components
Last synced: 10 days ago
JSON representation
🎛 MCS Lite Common UI and Websites.
Host: GitHub
URL: https://github.com/MCS-Lite/mcs-lite
Owner: MCS-Lite
License: mit
Created: 2017-01-20T13:48:13.000Z (almost 8 years ago)
Default Branch: master
Last Pushed: 2024-10-22T22:29:53.000Z (18 days ago)
Last Synced: 2024-10-28T17:17:18.638Z (12 days ago)
Topics: create-react-app, mcs, mcs-lite, mediatek, mediatek-linkit, react, styled-components
Language: JavaScript
Homepage: https://mcslite.netlify.com
Size: 18.2 MB
Stars: 75
Watchers: 6
Forks: 9
Open Issues: 46
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project

README

        # This repository is no longer maintained.

> Issue reports and pull requests will not be attended. \

> If you are using `mcs-lite-ui`, `mcs-lite-icon`, `mcs-lite-theme`, please migrate to [`mcs-ui`](https://github.com/Mediatek-Cloud/mcs-ui)

### Migrate to `mcs-ui`

1. Please upgrade `react`, `react-dom` to version 16 or higher

2. Please upgrade `styled-components` to version 4.0.2 or higher

3. Please upgrade `react-overlay-pack` to version 3 or higher

4. Change import names from `mcs-lite-ui`, `mcs-lite-icon`, `mcs-lite-theme` to `mcs-ui` by referencing [`index.js`](https://github.com/Mediatek-Cloud/mcs-ui/blob/master/src/index.js)



  

    

  



# MCS Lite [![TravisCI](https://travis-ci.org/MCS-Lite/mcs-lite.svg?branch=master)](https://travis-ci.org/MCS-Lite/mcs-lite) [![CircleCI](https://circleci.com/gh/MCS-Lite/mcs-lite.svg?style=svg)](https://circleci.com/gh/MCS-Lite/mcs-lite) [![codecov](https://codecov.io/gh/MCS-Lite/mcs-lite/branch/master/graph/badge.svg)](https://codecov.io/gh/MCS-Lite/mcs-lite) [![prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

> Note: MCS Lite core and Desktop website is being developed at https://github.com/MCS-Lite/mcs-lite-app.

* Website - https://mcslite.netlify.com/

* Resources - https://mcs-lite-introduction.netlify.com/

* UI Library - https://mcs-lite-ui.netlify.com/

* [Developer Guide](./docs/README.md)

## Requirements

* node >= 9.11.1

* yarn >= 1.6.0

## Packages

[babel-preset-mcs-lite-npm-badge]: https://img.shields.io/npm/v/babel-preset-mcs-lite.svg?style=flat-square

[babel-preset-mcs-lite-npm]: https://www.npmjs.org/package/babel-preset-mcs-lite

[babel-preset-mcs-lite-npm-downloads]: https://img.shields.io/npm/dt/babel-preset-mcs-lite.svg?style=flat-square

[eslint-config-mcs-lite-npm-badge]: https://img.shields.io/npm/v/eslint-config-mcs-lite.svg?style=flat-square

[eslint-config-mcs-lite-npm]: https://www.npmjs.org/package/eslint-config-mcs-lite

[eslint-config-mcs-lite-npm-downloads]: https://img.shields.io/npm/dt/eslint-config-mcs-lite.svg?style=flat-square

[mcs-lite-admin-web-npm-badge]: https://img.shields.io/npm/v/mcs-lite-admin-web.svg?style=flat-square

[mcs-lite-admin-web-npm]: https://www.npmjs.org/package/mcs-lite-admin-web

[mcs-lite-admin-web-npm-downloads]: https://img.shields.io/npm/dt/mcs-lite-admin-web.svg?style=flat-square

[mcs-lite-connect-npm-badge]: https://img.shields.io/npm/v/mcs-lite-connect.svg?style=flat-square

[mcs-lite-connect-npm]: https://www.npmjs.org/package/mcs-lite-connect

[mcs-lite-connect-npm-downloads]: https://img.shields.io/npm/dt/mcs-lite-connect.svg?style=flat-square

[mcs-lite-design-npm-badge]: https://img.shields.io/npm/v/mcs-lite-design.svg?style=flat-square

[mcs-lite-design-npm]: https://www.npmjs.org/package/mcs-lite-design

[mcs-lite-design-npm-downloads]: https://img.shields.io/npm/dt/mcs-lite-design.svg?style=flat-square

[mcs-lite-icon-npm-badge]: https://img.shields.io/npm/v/mcs-lite-icon.svg?style=flat-square

[mcs-lite-icon-npm]: https://www.npmjs.org/package/mcs-lite-icon

[mcs-lite-icon-npm-downloads]: https://img.shields.io/npm/dt/mcs-lite-icon.svg?style=flat-square

[mcs-lite-introduction-npm-badge]: https://img.shields.io/npm/v/mcs-lite-introduction.svg?style=flat-square

[mcs-lite-introduction-npm]: https://www.npmjs.org/package/mcs-lite-introduction

[mcs-lite-introduction-npm-downloads]: https://img.shields.io/npm/dt/mcs-lite-introduction.svg?style=flat-square

[mcs-lite-mobile-web-npm-badge]: https://img.shields.io/npm/v/mcs-lite-mobile-web.svg?style=flat-square

[mcs-lite-mobile-web-npm]: https://www.npmjs.org/package/mcs-lite-mobile-web

[mcs-lite-mobile-web-npm-downloads]: https://img.shields.io/npm/dt/mcs-lite-mobile-web.svg?style=flat-square

[mcs-lite-scripts-npm-badge]: https://img.shields.io/npm/v/mcs-lite-scripts.svg?style=flat-square

[mcs-lite-scripts-npm]: https://www.npmjs.org/package/mcs-lite-scripts

[mcs-lite-scripts-npm-downloads]: https://img.shields.io/npm/dt/mcs-lite-scripts.svg?style=flat-square

[mcs-lite-theme-npm-badge]: https://img.shields.io/npm/v/mcs-lite-theme.svg?style=flat-square

[mcs-lite-theme-npm]: https://www.npmjs.org/package/mcs-lite-theme

[mcs-lite-theme-npm-downloads]: https://img.shields.io/npm/dt/mcs-lite-theme.svg?style=flat-square

[mcs-lite-translation-npm-badge]: https://img.shields.io/npm/v/mcs-lite-translation.svg?style=flat-square

[mcs-lite-translation-npm]: https://www.npmjs.org/package/mcs-lite-translation

[mcs-lite-translation-npm-downloads]: https://img.shields.io/npm/dt/mcs-lite-translation.svg?style=flat-square

[mcs-lite-ui-npm-badge]: https://img.shields.io/npm/v/mcs-lite-ui.svg?style=flat-square

[mcs-lite-ui-npm]: https://www.npmjs.org/package/mcs-lite-ui

[mcs-lite-ui-npm-downloads]: https://img.shields.io/npm/dt/mcs-lite-ui.svg?style=flat-square

[react-intl-inject-hoc-npm-badge]: https://img.shields.io/npm/v/react-intl-inject-hoc.svg?style=flat-square

[react-intl-inject-hoc-npm]: https://www.npmjs.org/package/react-intl-inject-hoc

[react-intl-inject-hoc-npm-downloads]: https://img.shields.io/npm/dt/react-intl-inject-hoc.svg?style=flat-square

| **Package**                                       | **Description**                                       | **Version**                                                            | **Downloads**                                                                        |

| ------------------------------------------------- | ----------------------------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |

| `babel-preset-mcs-lite`                           | Babel preset used by MCS Lite                         | [![npm][babel-preset-mcs-lite-npm-badge]][babel-preset-mcs-lite-npm]   | [![npm downloads][babel-preset-mcs-lite-npm-downloads]][babel-preset-mcs-lite-npm]   |

| `eslint-config-mcs-lite`                          | Eslint config used by MCS Lite                        | [![npm][eslint-config-mcs-lite-npm-badge]][eslint-config-mcs-lite-npm] | [![npm downloads][eslint-config-mcs-lite-npm-downloads]][eslint-config-mcs-lite-npm] |

| `mcs-lite-admin-web`                              | MCS Lite Admin Web                                    | [![npm][mcs-lite-admin-web-npm-badge]][mcs-lite-admin-web-npm]         | [![npm downloads][mcs-lite-admin-web-npm-downloads]][mcs-lite-admin-web-npm]         |

| [`mcs-lite-connect`](./packages/mcs-lite-connect) | Connect MCS with WebSocket                            | [![npm][mcs-lite-connect-npm-badge]][mcs-lite-connect-npm]             | [![npm downloads][mcs-lite-connect-npm-downloads]][mcs-lite-connect-npm]             |

| `mcs-lite-design`                                 | The source images to be compressed used by MCS Lite   | [![npm][mcs-lite-design-npm-badge]][mcs-lite-design-npm]               | [![npm downloads][mcs-lite-design-npm-downloads]][mcs-lite-design-npm]               |

| `mcs-lite-icon`                                   | Convert SVG icon to React components                  | [![npm][mcs-lite-icon-npm-badge]][mcs-lite-icon-npm]                   | [![npm downloads][mcs-lite-icon-npm-downloads]][mcs-lite-icon-npm]                   |

| `mcs-lite-introduction`                           | GitBook for MCS Lite documentation                    | [![npm][mcs-lite-introduction-npm-badge]][mcs-lite-introduction-npm]   | [![npm downloads][mcs-lite-introduction-npm-downloads]][mcs-lite-introduction-npm]   |

| `mcs-lite-landing-web`                            | MCS Lite Landing Web                                  |                                                                        |                                                                                      |

| `mcs-lite-mobile-web`                             | MCS Lite Mobile Web                                   | [![npm][mcs-lite-mobile-web-npm-badge]][mcs-lite-mobile-web-npm]       | [![npm downloads][mcs-lite-mobile-web-npm-downloads]][mcs-lite-mobile-web-npm]       |

| `mcs-lite-scripts`                                | Shared scripts and CLI used by MCS Lite               | [![npm][mcs-lite-scripts-npm-badge]][mcs-lite-scripts-npm]             | [![npm downloads][mcs-lite-scripts-npm-downloads]][mcs-lite-scripts-npm]             |

| `mcs-lite-theme`                                  | Defined `Theme` and helpers for `mcs-lite-ui`         | [![npm][mcs-lite-theme-npm-badge]][mcs-lite-theme-npm]                 | [![npm downloads][mcs-lite-theme-npm-downloads]][mcs-lite-theme-npm]                 |

| `mcs-lite-translation`                            | I18n workflow with React-Intl used by MCS Lite        | [![npm][mcs-lite-translation-npm-badge]][mcs-lite-translation-npm]     | [![npm downloads][mcs-lite-translation-npm-downloads]][mcs-lite-translation-npm]     |

| `mcs-lite-ui`                                     | Common UI used by MCS Lite                            | [![npm][mcs-lite-ui-npm-badge]][mcs-lite-ui-npm]                       | [![npm downloads][mcs-lite-ui-npm-downloads]][mcs-lite-ui-npm]                       |

| [`react-intl-cra`](./packages/react-intl-cra)     | Move to https://github.com/evenchange4/react-intl-cra |                                                                        |

| `react-intl-inject-hoc`                           | The convenience HOC of react-intl injectIntl          | [![npm][react-intl-inject-hoc-npm-badge]][react-intl-inject-hoc-npm]   | [![npm downloads][react-intl-inject-hoc-npm-downloads]][react-intl-inject-hoc-npm]   |

## Install

```

$ npm i mcs-lite-ui mcs-lite-icon mcs-lite-theme --save

```

## Development

```

# Install all external dependencies of each package.

$ yarn install --pure-lockfile

```

```

$ yarn run clean # Remove all node_modules

```

## Building all mono-packages

```

$ ./tasks/build.sh

```

## Testing

```

$ yarn run format

$ ./tasks/lint.sh

$ ./tasks/test.sh

$ ./tasks/test-page.sh

```

## mcs-lite-ui

### Development

```

# cd packages/mcs-lite-ui

$ yarn start

```

### Testing

```

$ yarn run test:watch

```

## NPM Scripts Interface

Root

* **yarn run clean**: remove all node_modules

* **lint**: eslint and flow

* **yarn run format**: prettier

* **yarn run release**: publish

Packages

| **Package**              | clean | test | start | build |

| ------------------------ | ----- | ---- | ----- | ----- |

| `babel-preset-mcs-lite`  |       | V    |       | -     |

| `eslint-config-mcs-lite` |       | V    |       | -     |

| `mcs-lite-admin-web`     |       | V    | V     | V     |

| `mcs-lite-connect`       | V     |      |       | V     |

| `mcs-lite-design`        | V     |      |       | V     |

| `mcs-lite-icon`          | V     |      |       | V     |

| `mcs-lite-introduction`  | V     |      | V     | V     |

| `mcs-lite-landing-web`   |       | V    | V     | V     |

| `mcs-lite-mobile-web`    |       | V    | V     | V     |

| `mcs-lite-scripts`       | V     |      |       | V     |

| `mcs-lite-theme`         | V     |      |       | V     |

| `mcs-lite-translation`   | V     | V    |       | V     |

| `mcs-lite-ui`            | V     | V    | V     | V     |

| `react-intl-inject-hoc`  | V     |      |       | V     |

## Environment variables

* mcs-lite-introduction: `GA_ID`

* mcs-lite-mobile-web: WebSocket PORT

  Replace `__SOCKET_PORT_FROM_SERVER__` in the `build/index.html` file. (Default to `8000`)

---

## Other Notes

### npm-check-updates

```

$ npm install -g npm-check-updates

$ ncu && node_modules/.bin/lerna exec --concurrency 1 -- ncu # check for all packages

$ ncu -au && node_modules/.bin/lerna exec --concurrency 1 -- ncu -au # update packages.json

```

### license-checker

```

$ yarn run clean && yarn # Re-install node_modules

$ yarn run license

```

---

## [CONTRIBUTING](CONTRIBUTING.md)

## [CHANGELOG](CHANGELOG.md)

## [LICENSE](LICENSE)

_NPM package licenses: [licenses.csv](./docs/licenses.csv)_

## Support

### Team

| [![Michael Hsu](https://avatars.githubusercontent.com/u/1527371?v=3&s=96)](https://github.com/evenchange4) | [![Abel Chen](https://avatars.githubusercontent.com/u/2841286?v=3&s=96)](https://github.com/cettoana) | [![Abby Chiu](https://avatars.githubusercontent.com/u/11768650?v=3&s=96)](https://github.com/abby1002) | [![Daria Chen](https://avatars.githubusercontent.com/u/1300728?v=3&s=96)](https://github.com/dariachen) | [![blue chen](https://avatars.githubusercontent.com/u/1887942?v=3&s=96)](https://github.com/iamblue) |

| ---------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |

| Michael Hsu                                                                                                | Abel Chen                                                                                             | Abby Chiu                                                                                              | Daria Chen                                                                                              | blue chen                                                                                            |

| [@evenchange4](https://github.com/evenchange4)                                                             | [@cettoana](https://github.com/cettoana)                                                              | [@abby1002](https://github.com/abby1002)                                                               | [@dariachen](https://github.com/dariachen)                                                              | [@iamblue](https://github.com/iamblue)                                                               |

| [@evenchange4](https://twitter.com/evenchange4)                                                            |                                                                                                       |                                                                                                        |                                                                                                         |

### Thanks

![Browserstack](https://wiki.js.org/assets/images/logo_browserstack.png)

[Browserstack](https://www.browserstack.com/) for providing access to their great cross-browser testing tools.