@rakuten-rampage/rampage v1.0.30

Rampage UI Components Library

Github https://github.com/makayhunn/rakuten-rampage

NPM https://www.npmjs.com/org/rakuten-rampage

Storybook Live examples(please use intra vpn): https://rampage-ui-library-storybook-dot-mno-b2b-bss-dev.uc.r.appspot.com/

Storybook Live examples V2(please use intra vpn): https://rampage-ui-library-storybook-v2-dot-mno-b2b-bss-dev.uc.r.appspot.com/

Storybook Live examples V3(please use intra vpn): https://rampage-ui-library-storybook-v3-dot-mno-b2b-bss-dev.uc.r.appspot.com

V3

we have released the class css files for non-react application. Please refer to buildv3.0....zip

Upgrade V2

V2 is currently for ISP team, not for B2B team.

Because ISP teams (B2C) need to follow the rules: https://www.figma.com/file/3kWM76oR8N1tOAIxPzZ5eX/20210215_%E6%A5%BD%E5%A4%A9%E3%81%B2%E3%81%8B%E3%82%8A_Component%E9%9B%86?node-id=0%3A1

This rules are currently used in B2C servecies. B2B dose not need to follow the rules, but maybe need to follow in future.

Also B2C Services need to follow this rules: http://feature-style.cms.rakuten-mobile.rocks/styleguide/components/detail/c-btn.html

How to install

please add SKIP_PREFLIGHT_CHECK=true in .env , React will solve this problem in next version

npm adduser
username rakuten-rampage
password *ask your member*
yarn add @rakuten-rampage/rampage

Release a new version

Perform the steps below (make sure to have a clean tree before):

(WARNING for now it s working only for NPM version up to 7, else it fails!)

git checkout master
yarn tag-release

you will be asked which type of modification level before publication (1: major, 2: minor, 3: patch). Answer and then automatically branch will be tagged and then deployed to this repository: https://www.npmjs.com/package/@rakuten-rampage/rampage through the following Github action: https://github.com/makayhunn/rakuten-rampage/actions?query=workflow%3ATag-release (There is a gap between v0.1.35 and v0.1.39 due to some testing and that unpublished version seemed not be be publishable again)

Web Browser Compatibility

Deployment storybook to GCP

Manual deployment

Firstly, You need to install gcloud cli: https://cloud.google.com/sdk/gcloud

Also You Need GCP Account for deployment.

After install cli tool,then run following commands:

yarn deploy:gcp-storybook

Automation deployment

When master branch is updated, GitHub Actions will automatically perform the deployment job.

You can check the deployment script here: .github/workflows/storybook_deploy_to_GCP.yml

For more info: https://github.com/google-github-actions/setup-gcloud

Dependencies

React
Style-Component
Typescript
AntDesign
JavaScript ES6 Modules etc.

Getting started

• React

import { ... } from 'rakuten-rampage';
use RampageProvider into your root app
<RampageProvider>
   <Component ......
</RampageProvider>

Community

Contribute to the project

• If you find any bug, feel free to create Pull-request
• If you create your own component as a global using and want to put in rampage-ui, feel free to create Pull-request

How to develop and start this project

1. Install VS Code *VS Code is a preferable editor but you can use any editor you like.
2. Install Docker
3. Clone this repository

git clone https://github.com/makayhunn/rakuten-rampage.git

Optional 4. Install Remote Development extension pack

code --install-extension ms-vscode-remote.vscode-remote-extensionpack

5. Open the Command Palette (⇧⌘P) and find the Remote-Containers: Open folder in Container… command optional. Install locally Debugger for Chrome, ES7 React/Redux/GraphQL/React-Native snippets

code --install-extension msjsdiag.debugger-for-chrome
code --install-extension dsznajder.es7-react-js-snippets

6. To check that your code is working, please run yarn storybook.
7. Make sure that cypress tests are created for all components. Please ensure test coverage is 100%.
8. Create pull request based on develop branch.

Coding rules

Follow those rules

Contribute

Follow the branch naming convention

• release/version name
• feature/issue name
• bugfix/issue name
• hotfix/issue name

Follow the style guidelines

• eslint-react
• stylelint-styled-components

Write unit tests

• cypress

Write documentation

• TSDoc