indigo

This repository contains the various projects that will make up a React Native library for LEVI'S®.

Contents

Core libraries

• @levistrauss/atoms - Simple, biased components that wrap around React Native's own components and ties into our design system
• @levistrauss/color - Contains our color schemes as well as a color scheme generator
• @levistrauss/icons - Svg icons used in our mobile applications and a generator for converting SVG files to react-native components that tie into our design system
• @levistrauss/theme - Theming API that applies configured styles based on our design system and supplies hooks for accessing the theme via React's Context API
• @levistrauss/carousel - Base components and services for implementing a carousel in React Native

Installation

Installing private packages via NPM and GitHub

To install any of our packages you will need to set our organization's private authorization token in a global .npmrc file on your system.

If you do not have a global .npmrc file already, follow the below set of instructions:

1. In Terminal:

   If you have a code editor configured in your .bashrc, .bash_profile, or .zshrc file, just run the command:

   code ~/.npmrc

   This will create the file if it doesn't exist and then open it in the editor. (NOTE: "code" is the typical alias for VS Code when aliased in a .*rc file)

   If you don't have one configured, simply run:

   touch ~/.npmrc
   nano ~/.npmrc

2. In the .npmrc file, add the following:

   //registry.npmjs.org/:_authToken=XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX

3. Following that, you can then install any package by its registered, namespaced package name:

   yarn add @levistrauss/theme @levistrauss/carousel @levistrauss/atoms

Installing from a fork on GitHub

Since we use a monorepo, it's not possible to install a package from the repository URL. If you need to install a forked version from Git, you can use gitpkg.

First install gitpkg:

yarn global add gitpkg

Then follow these steps to publish and install a forked package:

1. Fork this repo to your account and clone the forked repo to your local machine
2. Open a Terminal and cd to the location of the cloned repo
3. Run yarn to install any dependencies
4. If you want to make any changes, make them and commit
5. Now cd to the package directory that you want to use (e.g. cd packages/carousel for @levistrauss/carousel)
6. Run gitpkg publish to publish the package to your repo

After publishing, you should see something like this:

Package uploaded to [email protected]:<user>/<repo>.git with the name <name>

You can now install the dependency in your project:

yarn add <user>/<repo>.git#<name>

Remember to replace <user>, <repo> and <name> with right values.

Indigo Package Development

Please note that only devDependencies that are utilized globally or in multiple packages should be installed in the repository's root. Dependencies should never go there.

Creating a new package

To create a new package, run:

npx lerna create [package-name] --private

This will start to take you through a configuration process that will result in your new package being created in the packages/ directory. When going through the prompts in the config process, please make sure to type @levistrauss/[package-name] when prompted for package "name".

Building with Bob

Afterwards, go into the package directory via Terminal and initialize react-native-builder-bob:

npx react-native-builder-bob init

Bob is a set of CLIs for scaffolding and building React Native libraries. For our uses, it handles builds covering output to commonjs and ES6 module builds as well as generating TypeScript declaration files.

Please note that Bob will refactor your project's package.json file, so you may need to do some cleanup after initialization. For example, it will add a few npm scripts that are not relevant to our package development process.

Adding/updating your package's tsconfig file

Indigo's root folder contains two tsconfig files. One is suffixed with "build", which is the one we specifically need passed as an argument to our build scripts. Plain tsconfig.json files are used for development purposes, but for the most part simply extend our tsconfig.build.json file. One reason for the separate tsconfig files is that not all builds require the same configuration. Some need specific properties set. For instance, if you are developing React components in your package, you should add a tsconfig.json file to your package's root directory that extends Indigo's root tsconfig.json file, which sets the "jsx": "react" in the compilerOptions.

Your packages tsconfig.build.json file should extends Indigo's root tsconfig.build.json file while its tsconfig.json file should extend the root tsconfig.json file.

Add your package's name to the root tsconfig.json file

In order for other packages that may depend on your package to have access to them, you need to add the package name and relative path to Indigo's root tsconfig.json file under "paths". The following two lines should be added there:

{
  "paths": {
    // ...
    "@levistrauss/my-package": ["packages/my-package/src"],
    "@levistrauss/my-package/*": ["packages/my-package/src/*"]
  }
}

Add Storybook stories for any components

If you are developing React Native components in your package, you should be adding .stories.tsx files. When doing so, please prefix your story's args definition's title with its appropriate classification under Atomic Design principles, i.e.:

• "Atoms/<ComponentName>" if the component is a simple, standalone component that will be utilized by larger components.
• "Molecules/<ComponentName>" for components that are more complex, possibly utilize atoms, and maintain some local state.
• "Organisms/<ComponentName>" for complex, dynamic components made up of atoms and/or molecules that maintain a local state.

Example:

// MyComponent.stories.tsx
export default {
  title: 'Molecules/MyComponent',
  decorators: [Story => <View style={styles.viewWrapper}>{Story()}</View>],
  argTypes: {
    // addon-controls definitions go here
  },
};

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.