Sproutch :poop:

React and React Native iOS/Android library to make lovely (or not) UI.

:construction::construction::construction::construction::construction::construction::construction::construction::construction::construction::construction::construction::construction::construction::construction::construction:

Actually in 0.0.4-beta.7 but already usable. Expect breaking changes in the futur. Tested on:
- Chrome 73
- Safari 12.1.2
- Croswwalk 2.3
- Expo 35

:construction::construction::construction::construction::construction::construction::construction::construction::construction::construction::construction::construction::construction::construction::construction::construction:

Prerequisites

Dependencies

Sproutch depends on two peer dependencies:

• ReactXP: the cross plateform base elements library which sproutch is built upon
• ExpoKit: bringing some basic components such Svg and LinearGradient

Important note

• Actually developped with RN 0.57. No guarantee that newer versions will work. But it may...

Installation

To install Sproutch and its dependencies:

• If you target a web project:

  $ npm i @sproutch/ui reactxp

• If you target an expo project:

  $ npm i @sproutch/ui reactxp
  $ expo install react-native-svg
  $ expo install expo-linear-gradient

• If you target raw (without expo) React Native (I did not test yet, please, fill an issue if it crashes)

  $ npm i @sproutch/ui reactxp expo

  Add react-native-svg Add expo-linear-gradient

Usage

import { defaultTheme, ThemeContext } from '@sproutch/ui'

render(
  <ThemeContext.Provider value={defaultTheme}>
    <App />
  </ThemeContext.Provider>,
  document.getElementById("react-content")
)

Global theming

Sproutch implements Material Design specs by default. But some, (bcz still WIP) components are already deeply customizable if you want to bring your own design system.

Sproutch is themable by providing a theme.

ThemeProvider accept a theme object which explained below. The theme shape is heavily inspired by Material UI Theme and stick to the material design specification.

ex: <ThemeProvider theme={myTheme]>

type Theme<B, O> = {
  shape: {
    borderRadius: number
  }
  palette: {
    type: 'light' | 'dark'
    common: {
      // the value of the deepest and clearest point
      black: string
      white: string
    }
    primary: {
      // the variants of your primary color
      light: string
      main: string
      dark: string
      contrastText: string
    }
    secondary:  {
      // the variants of your secondary color
      light: string
      main: string
      dark: string
      contrastText: string
    }
    text: {
      // The colors of the different text style
      primary: string
      secondary: string
      disabled: string
      hint: string
    }
    divider: string // color of the separation line
    background: {
      // The different background color
      statusBar: string
      appBar: string
      default: string
      paper: string
    },
    state: {
      /* takes object of the shape: OverlayOpacity. Exemple: {
          light: 0.04,
          medium: 0.12,
          dark: 0.16,
        }
      */
      hover: hoverOverlayOpacity,
      focus: focusOverlayOpacity,
      selected: selectedOverlayOpacity,
      activated: activatedOverlayOpacity,
      pressed: pressedOverlayOpacity,
      draged: dragedOverlayOpacity,
    },
  }
  // The 'rythme' of your design system
  spacing: number
  business: {
    // A customizable slot where you can put
    // any value regarding your graphic chart
    // eg. third colors, info color scheme...
    // The default theme provide already provides
    // some colors helpers that you can override:
    /*
    error: {
      light: colors.red['300'], // #e57373,
      main: colors.red['500'], // #f44336,
      dark: colors.red['700'], // #d32f2f,
      contrastText: colors.white, // #fff
    },
    valid: {
      light: colors.green['300'], // #81c784  ,
      main: colors.green['500'], // #4caf50,
      dark: colors.green['700'], // #388e3c,
      contrastText: colors.white, // #fff
    },
    warning: {
      light: colors.orange['300'], // #ffb74d
      main: colors.orange['500'], // #ff9800
      dark: colors.orange['700'], // #f57c00
      contrastText: colors.white, // #fff
    },
  */
  }
  typography: {
    // The base font
    fontFamily: string
    fontSize: number
    fontWeightLight: string
    fontWeightRegular: string
    fontWeightMedium: string
  }
}

Customize component style

Some components (in the futur, all will have) has a style property which accepts all stylesheets keys used by the component.

ex: the ProgressBar component can accept an object with those keys:

{
  root: ViewStyle
  top: ViewStyle
  background: ViewStyle
  fill: ViewStyle
}

Live demo and components doc

We use Storybook both for Web and Native. As a cross plateform UI, the API is the same for both Native and Web version. You will find the doc for each component in the Note tab of its story:

• For Native: https://expo.io/@dagatsoin/sproutch (only for Android, because Apple does not allow to load external Expo project)
• For Web: https://dagatsoin.github.io/sproutch

Contribution

PRs won't be treated until reaching a stable version and write a clear contribution guidance first.

If you find a bug, please fill an issue. I am also on Gitter to chat.