@domintell/dblock-native v0.0.12

About The Project

Domintell UI Blocks for React Native aims to create a library of UI blocks that can be used in any React Native application. Making blocks reusable is the main target, so styling and theming tools are directly integrated in the library.

This setup allows us to extend existing blocks and create variations for many projects, avoiding to rewrite the same code over and over again.

The library includes a working app that allow blocks development to be project-agnostic. The components can be written in library and tested in the library app. Storybook is included to make the component browsing easier.

Built With

• JavaScript mainly through TypeScript
• UI Library: react
• UI Library extension: react-native
• Testing app: expo
• Builder tool: react-native-builder-bob
• Styling/Theming: styled-components
• Inline styling: styled-system

Getting Started

Prerequisites

• Node >= 16.0.0

Installation

YARN

The tooling is built around yarn, so use yarn for development.

yarn add @domintell/dblock-native

After installation, navigate to the main directory and run yarn this will automatically install dependencies for the main library but also for the library app which is used for testing library content.

While developing, you can run the library app to test your changes. Any changes you make in your library's JavaScript code will be reflected in the library app without a rebuild. If you change any native code, then you'll need to rebuild the library app.

Usage

The library offers a set of UI blocks that can be used in React Native applications. These blocks also includes theming support an inline styling thanks to the 3rd-party library styled-components and styled-system.

Example of a component import

import { DummyStyled } from '@domintell/dblock-native';

const App: React.FC = () => {
  //...
  return (
    <DummyStyled bg="background.0" />
  );
};

Start library app

Android:

yarn app android

iOS:

yarn app ios

Web:

yarn app web

Make sure your code passes TypeScript and ESLint. Run the following to verify:

yarn typecheck
yarn lint

To fix formatting errors, run the following:

yarn lint --fix

Styling and Theming

How the library handles theming and styling

The library is currently offers all tools needed to style and theming components. The library is using the 3rd-party * *styled-components library to handle styling and theming. The library also uses the styled-system** library to handle inline styling and theming.

The three themes, main, light and dark are located in ./src/theme/ directory. The common parts (sizes, spaces, breakpoints, ...) are shared by extending the main theme while specific colors are defined in the light and dark themes.

When creating a component and its styled linked file, we can create availability for inline styling by using the * *styled-system** props (see examples or styled-system documentation).

Contribution

Steps to follow to contribute (internal dev team only)

• ANALYSE
  • Before any work, switch to a personal branch on the git project to avoid conflicts with other developers. As the git repository is using gitflow, be sure to name your branch correctly, using your name/nickname as prefix of branch content, this way we know who is the owner of the branch. (ex: 'feature/Nico-My_super_feature')
  • First of all check the existing components to see if there is something similar to what you want to create. The main goal of this library is to create reusable components, working more on first write can help us to avoid code duplication.
• CATEGORIZE
  • Atoms: the smallest UI part, it consists of a single element with no children at all or a generic label only (ex: GenText)
  • Molecules: a group of atoms that are related to each other (ex: a button with a text part which is wrapped with a box)
  • Organisms: a group of molecules that are related to each other and share some data or behaviour (ex: an accordion of multiple items which is called like this: <CustomAccordion data={data} />)
• CREATE
  • Create a new folder with the component name in src/ChoosedCategory/your-component-name
  • Inside this folder create the component itsef MyComponent.tsx
  • If there's styled from styled components that needs to rely on this component also create a file called MyComponent.styled.tsx
  • Edit your component, you can visualise it while working on it by running the library app without Storybook, to do this you can switch between Storybook and classic app through the ./app/App.js file
• DOCUMENT
  • Inside the app/storybook/stories/picked-category directory, create a folder that will host the stories of your component
  • Inside this folder create a file called YourComponent.stories.tsx
  • You can make use of decorators, knobs and actions ( see Storybook documentation ) to add each variations and use-cases of your component
• SHARE
  • For the moment, all sharing, merging and publishing are done together. This aims to avoid bad commits, library errors and make sure that each member knows how to use the library.
  • If you need to pull your work, just contact the team through Slack or by mail.

Components

List of all components

• Atoms
  • Dummy
    • Basic example of a Text component
  • DummyStyled
    • Basic example of a styled Text component with theming and inline styling available
  • DummyLinear
    • Basic example of a linear gradient component using expo-linear-gradient
• Organisms
  • TBD
• Molecules
  • TBD

Wishlist

The desired features that are not yet implemented

• Custom fonts support
• Reanimated 2 support
• More components
• Many more components !

Change Log

0.0.9 > 0.0.12

• Add TypeScript types for theme objects

0.0.8

• Make themes (dark/light) available for import to make it available for any content in the application which use the library
• Add white variant for CtaMain component

Known Issues

• TBD

License

MIT