Valk Digital UI-kit

https://valkdigital.github.io/ui-kit

A fully typed component library for react native (web) development.

Setup

Instructions for using the library

Development

For further developement on this package.

yarn bootstrap

Installation

Install this package in your React Native or React project.

npm install @valkdigital/ui-kit

or

yarn add @valkdigital/ui-kit

Font

This project uses Open Sans. When you add a font to your project use the same names as the ones in the ./src/style/typography.ts file. When you set up an expo project you can use the Fonts enum like this:

import React from "react";
import { useFonts } from "expo-font";
import { Fonts } from "vex-ui";

export default function App() {
  const [loaded] = useFonts({
    [Fonts.Bold]: require("../assets/fonts/OpenSans-Bold.ttf"),
    [Fonts.Regular]: require("../assets/fonts/OpenSans-Regular.ttf"),
    [Fonts.SemiBold]: require("../assets/fonts/OpenSans-SemiBold.ttf"),
    [Fonts.IconSetSolid]: require("../assets/fonts/icomoon_solid.ttf"),
    [Fonts.IconSetOutline]: require("../assets/fonts/icomoon_outline.ttf"),
  });

Theme

In order for this component library to work you need to provide your app with a theme. Wrap your app with a provider and set your theme with the value prop. See the following examples.

Set a custom theme

Set a light and/or a dark theme.

 ThemeManager.setTheme({
        light: YourAwsomeLightTheme,
        dark: YourAwsomeDarkTheme
      });
    };

Provider

Get the theme value (dark/light) from Theme and place the provider around your app.

import { Theme } from "@valkdigital/ui-kit"

<ThemeContext.Provider
    value={darkModeOn ? Theme.dark : Theme.light}
>
    <YourAwesomeApp />
</ThemeContext.Provider>

Usage

Only components without logic, not entire screens. Components are provided by the UX team with the correct implementation, including dimensions. when a screen is beeing used only the needed props are provided, not the entire object or list is passed though.

A hotel selector provides the ability to select hotels. The HotelListItem component is defined in the UI kit and is called in an app by rendering it in a Flatlist. This way, the logic of the component is kept in the app itself and the UI kit maintains the style for the component itself.

<Flatlist
  onChange={...}
  onSelect={...}
  renderItem={() => (
    <HotelListItem />
  )}
/>

Component testing

When testing a component, the prefix Old and New are used.

Example

You can see an extensive documented web preview of the component library at https://valkdigital.github.io/ui-kit or by running yarn storybook and choose which platform you want storybook to show on. With the use of storybook you'll be able to see each component with the following topics:

• Preview
• Props overview
• Additional information regarding the behavior of the component

When we upgraded storybook to version 6.5, and all components need to be rewritten (new syntax). Everytime you change a component, please add it to the example. To see the old version of storybook you can visit: https://storybook-ui-kit.pages.dev/?path=/story/booking-engine--book-availability

Icons

In media/icons/SVGmaker you can find instructions on how to create icons

• readme