@vivintsolar/universal-components NPM

Universal Components

universal-components is a UI component library that will allow you to write your components once in React Native and import them (almost) anywhere. Use it with your React, React Native, and Expo projects. You will be able to install and import the components the same way across all your projects.

yarn add @vivintsolar/universal-components

later in your project either web or native use it the same way.

// ...other imporrts
import { CalendarPicker } from "@vivintsolar/universal-components";

// web
const SomePartOfYourWebProject = () => (
  <div>
    <CalendarPicker />
  </div>
);
// or native
const SomePartOfYourNativeProject = () => (
  <View>
    <CalendarPicker />
  </View>
);

Prerequisites

To run this project you will need:

Node.js

You will need node installed on your machine, this project uses version >=8.10. If you are working on other projects that require a different versions of Node.js consider using a tool like nvm.

yarn

Yarn is being used as the package manager, if you don't already have it grab it like this.

brew update
brew install yarn

expo-cli

Expo is used to serve your components in a native environment. You will be able to use Expo to open the playground on physical devices, iOS simulator, and Android Emulators.

yarn global add expo-cli

eslint

As this project uses TypeScript, it's recommended to use VS Code, the eslint extension for VS Code doesn't lint .ts files by default, to fix that you need to add the following config to your VS Code

 "eslint.validate": [
    "javascript",
    "javascriptreact",
    { "language": "typescript", "autoFix": true },
    { "language": "typescriptreact", "autoFix": true }
  ]

Available Scripts

In the project directory, you can run:

`yarn start`

Runs the project in the development mode. Open http://localhost:6006/ to view it in the browser, it should happen automatically though.

It should also launch the iOS simulator, running our playground Expo should also open the developer tools in a browser tab http://localhost:19002/. Here you can scan the QR code or launch things such as the Android emulator.

The both playgrounds will reload if you make edits. You will also see any errors in the console.

`yarn start:native`

Runs the project in the development mode for native only. It should also launch the iOS simulator, running our playground Expo should also open the developer tools in a browser tab http://localhost:19002/. Here you can scan the QR code or launch things such as the Android emulator.

The playground will reload if you make edits. You will also see any errors in the console.

`yarn start:web`

Runs the project in the development mode for web only. Open http://account.dev.vivintsolar.com:3000 to view it in the browser, it should happen automatically though.

The playground will reload if you make edits. You will also see any errors in the console.

`yarn build`

Builds the project for production to the lib folder. It correctly bundles React in production mode and optimizes the build for the best performance. It will also build a version of the component to be consumed by React Native.

Typescript typings and annotations will be stripped out for both web and native builds. The web build is minified and the filenames include the hashes. The native build is not minified, the reason for this is React Native still needs to do it's job. Your library is ready to be released!

`yarn generate`

Starts a command line interface that will bootstrap components for you. It will ask you some basic questions about your planned component and will set up the necessary files based on your responses. To contribute to the generator you can find the documentation here, generators don't have to be a React component, it can be anything that we write a lot of.

Questions include:

Select the type of component.
- Functional - A dumb component that will not make any requests.
What should it be called?
- this is text input, use "TitleCase" or "kebab-case" to name your component, and make it descriptive of what it is/does.
Where you like to put this component?
- this will help you walk the file tree within the project once you have found where you want your new component to live, select "Choose this directory". It will place your newly generated component there. (Probably src)
Do you want a story for the component to be created?
- Yes - it will create a "index.stories.js" file for the component to it can be developed and visually tested in an isolated environment. You will almost always want a storybook file created for you.
- No - it will not create a storybook file for you so you cannot develop the component in storybooks, this will make it harder for the team to discover your component, this could lead to someone duplicating a similar component.

The output file structure will resemble the one below with a few minor differences depending on your responses to the generator. The collocation of the files makes its easy to know what platforms, and stories have been written about a given component. It should also help us keep things separated by concern rather than separated by type.

universal-components (root)
│   README.md
│   ...etc
│
└───src (whatever path you pick)
│   └───some-component (whatever name you have given it)
│       │   index.js
│       │   some-component.tsx
│       └───index.stories.js

You can tweak this folder structure for more control over your components for any given platform. For example you might want the web version of your component to have a diffrent API or style you can specify exactly that.

universal-components (root)
│   README.md
│   ...etc
│
└───src (whatever path you pick)
│   └───some-component (whatever name you have given it)
│       │   index.js
│       │   some-component.web.tsx
│       │   some-component.native.tsx
│       └───index.stories.js

You can take it even further if you are feeling crazy, maybe you want to use diffrent native modules for iOS and Android. You can also specify diffrent versions of your component for iOS, Android, and Web.

universal-components (root)
│   README.md
│   ...etc
│
└───src (whatever path you pick)
│   └───some-component (whatever name you have given it)
│       │   index.js
│       │   some-component.web.tsx
│       │   some-component.ios.tsx
│       │   some-component.android.tsx
│       └───index.stories.js

`yarn clean`

Installs a fresh version of node_modules.

equivalent to..

rm -rf node_modules
yarn install

Technology

React - this will be our UI framework throughout the library. We are using the latest, this gives us access to hooks and lots of other really cool features. We will try to utilize hooks where we can, this means avoiding class components if you can. Here you can find the documentation on React in all its glory.
React Native - We will use React Native for the UI components the reason for this is they can be interpreted into web building blocks. We will be using react-native-web to help us get there.
Prettier - Rather than wasting time and energy fighting for/or learning a style guide, this project uses Prettier everything you see is industry standard. Write the code you like, configure your editor to format on save and stop worrying about it.
TypeScript - We choose to have static typings with TypeScript, a superset of JavaScript, so we can catch more errors at build-time that at runtime, you can find more info about Typescript here