alanzoutest v0.0.1

Juno

Ringcentral React Component library

base on MATERIAL-UI

Install

package.json

npm i @ringcentral/juno styled-components
// or
yarn add @ringcentral/juno styled-components

Basic Using

All components we using need contain in the RcThemeProvider.

import {
  RcAvatar,
  RcTooltip,
  RcButton,
  RcIcon,
  RcLink,
  RcCircularProgress,
  RcThemeProvider,
} from '@ringcentral/juno';

<RcThemeProvider>
  <RcAvatar color="lake">SH</RcAvatar>
  <RcButton>Button</RcButton>
  <RcLink>LINK</RcLink>
  <RcCircularProgress />
  <RcCircularProgress size="{30}" color="secondary" />
</RcThemeProvider>

Custom Theme

You can custom theme by theme props with RcThemeInput object like below, all of option you can see type RcThemeInput;

const defaultTheme: RcThemeInput = {
  palette: {
    primary: {
      main: '#0684bd',
    },
    ...
  },
};

const App = (props) => {
  return (
    <RcThemeProvider theme={theme}>
      <RcCircularProgress />
    </RcThemeProvider>
  );
};

Icons

Use build in component

We can use any component with RcIcon prop symbol, pass component into symbol that will render svg icon with our RcIcon style.

import { RcIcon } from '@ringcentral/juno';
// also can use default import
// import Phone from '@ringcentral/juno/icon/Phone';

import { Phone } from '@ringcentral/juno/icon';

const App = (props) => {
  return (
    <RcThemeProvider>
      <RcIcon symbol={Phone} />
    </RcThemeProvider>
  );
};

Use Svg

using @svgr/webpack to load svg as component.

you can import from '@ringcentral/juno/icons/*.svg, using like below.

import phoneSvg from '@ringcentral/juno/icons/icon-phone.svg';

const App = (props) => {
  return (
    <RcThemeProvider>
      <RcIcon symbol={phoneSvg} />
    </RcThemeProvider>
  );
};

Use Token

Styled-component

You can use Juno token from foundation like below

activeOpacity

.class {
    ${activeOpacity()}
}

opacity

.class {
    opacity: ${opacity('3')}
}

palette

.class {
    color: ${palette2('text', 'dark')}
}

radius

.class {
    border-radius: ${radius('circle')}
}

shadows

.class {
    border-radius: ${shadows(2)}
}

shape

  .class {
    border-top: ${shape('border4')};
  }

spacing

.class {
  margin: ${spacing(2)};  // margin: 8
  padding: ${spacing(1, 2, 3, 4)}; // margin: 4 8 12 16
}

typography

.class {
  ${typography('body1')};
}

zIndex

.class {
  z-index: ${zIndex('dialog')}; // 6000
}

Scss

You can also use token with scss file

@import '@ringcentral/juno/scss/theming';

Create global color style

Create all color class

@include generate-rc-static-style();
/** 
  rc-bg-xxx, ex: rc-bg-primary-main => background-color: #4475fd
  rc-text-xxx, ex: rc-text-primary-main => color: #4475fd
  rc-border-xxx, ex: rc-border-primary-main => border-color: #4475fd
*/

buildIn mixin and function

name	type	description	Example	result
rc-opacity	@function	get opacity from theme token	opacity: rc-opacity('1')	opacity: 0.1
rc-breakpoints	@function	get breakpoint from theme token	@media screen and (max-width: rc-breakpoints('md')) { }	@media screen and (max-width: 640px) { }
rc-shape	@function	get shape from theme token	border: rc-shape('border3')	border: 1px solid rgba(0, 0, 0, 0.36)
rc-typography	@mixin	append typography style from theme token	@include rc-typography('body1')	font-size: 3.5rem; font-weight: 400; line-height: 72px
rc-zIndex	@mixin	append zIndex style from theme token	@include rc-zIndex('banner')	z-index: 9500
rc-radius	@mixin	append border-radius style from theme token	@include rc-radius('circle')	border-radius: 50%
rc-spacing	@function	append spacing style from theme token	margin: rc-spacing(1, 2, 3, 4)	margin: 4 8 12 16
rc-palette	@function	get palette from theme token	color: rc-palette(element, primary)	color: #4475FD
with-rc-theme	@mixin	let user can use this to get both theme color		light .paper { color: #4475FD } dark .paper { color: #729AFF }
with-rc-theme-type	@mixin	let user can use this to get target theme color		dark .paper { color: #729AFF }
custom-rc-palette	@function	Set custom palette color		that will change the whole project default light and dark theme

Deprecated Warning

If you use some deprecated methods, we will show warning when you use in development mode, if you don't want see those warning, you can turn off that by set

import { configure } from '@ringcentral/juno';

configure({
  warning: false,
});

or just use window to set

window.__JUNO__.WARNING_IGNORE = true;

BUT, Don't recommended you close it, we should avoid use any deprecated props or methods.

moment

if you use RcDatePicker or AudioPlayer, we calculate time depend on moment.js you should install moment

npm i moment
// or
yarn add moment