npm package: @levistrauss/indigo
Description: React Native library for Levi Strauss
Author: Sean Bellows
Latest version: 0.1.22

# indigo

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

## Contents

### Core libraries

- [`@levistrauss/atoms`](packages/atoms) - Simple, biased components that wrap around React Native's own components and ties into our design system
- [`@levistrauss/color`](packages/color) - Contains our color schemes as well as a color scheme generator
- [`@levistrauss/icons`](packages/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`](packages/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`](packages/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:

   ```sh
   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:

   ```sh
   touch ~/.npmrc
   nano ~/.npmrc
   ```

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

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

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

   ```sh
   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`](https://github.com/ramasilveyra/gitpkg).

First install `gitpkg`:

```sh
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:

```sh
Package uploaded to git@github.com:<user>/<repo>.git with the name <name>
```

You can now install the dependency in your project:

```sh
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:

```sh
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](https://github.com/callstack/react-native-builder-bob):

```sh
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:

```json
{
  "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:

```jsx
// 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](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.