npm package: @purposeinplay/mobile-design-system
Description: ## Releasing for internal testing
Author: Ovidiu G
Latest version: 1.0.5

# Mobile Design System

## Releasing for internal testing

Before publishing, make sure you have eas-cli package installed (https://github.com/expo/eas-cli) and then login using

```bash
eas login
```

To register new devices for internal testing you can run the following command:

```bash
eas device:create
```

Follow the command line instructions: use purposeinplay account, sign in with apple developer (not sure if it's really necessary tho), choose website when asked how to register your devices. Then you will be given a link/ QR that the users should follow in order to install a development profile.

On the main branch, from the root folder, commit all your changes then run the following:

```bash
eas build  --preview
```

- This will generate the build and everything inside the expo app. (https://expo.dev/accounts/purposeinplay/projects/mobile-design-system)

## Testing the package

After the build is generated, you will have an install button for each build. Click that and you'll be given a QR code or a link to share. All devices that were registered with the previous eas device:create command, will now be able to install and test the app.

## Installing the packages

Commit all your changes and run the following command

```bash
npm run  prepare
```

This will bundle everything inside the dist folder.

```bash
npm publish
```

To publish the lib to npm.

**IMPORTANT**: Before importing any of the components in your codebase, make sure you wrap your app with the ThemeProvider component and the MenuProvider component

```bash
import {  ThemeProvider,  MenuProvider  }  from  "mobile-design-system";
...
const App  = (props: any) =>  {

return  <ThemeProvider  name="win">
            <App />
        </ThemeProvider>
}
```

Once all that has been accomplished, kindly import the desired component by following this code.

```bash
import {  Button  }  from  "mobile-design-system";
```

## Apps & Packages

This repo includes the following packages and applications:

- `.storybook`: Component documentation site with Storybook

- `src/components`: Core React Native components

- `src/lib`: Shared React utilities

## Components

Each file inside of `src/component` is a component inside our design system. For example:

```tsx:./src/Button.tsx
import  *  as  React  from  'react';
export  interface ButtonProps {
children: React.ReactNode;
}
export  function  Button(props: ButtonProps)  {
return  <Pressable>{props.children}</Pressable>;
}
Button.displayName  =  'Button';
```

When adding a new file, ensure the component is also exported from the entry `index.tsx` file:

```tsx:./src/index.tsx
import  *  as  React  from  "react";
export  { Button }  from  "./components/Button";
// Add new component exports here

```

## Storybook

Storybook provides us with an interactive UI playground for our components. This allows us to preview our components in the simulator and instantly see changes when developing locally. This example preconfigures Storybook to:

- Automatically find any stories inside the `.storybook/stories` folder

- Write documentation pages

For example, here's the included Story for our `Button` component:

```js:apps/docs/stories/Button.stories.tsx
import  { Button }  from  '../../src/components/Button';
import  { Meta,  Story,  Preview,  Props }  from  '@storybook/addon-docs';
<Meta title="Components/Components/Button"  component={Button}  />
# Button
Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Donec euismod, nisl eget consectetur tempor, nisl nunc egestas nisi, euismod aliquam nisl nunc euismod.
const  meta: Meta<typeof Button>  =  {
component: Button,
tags:  ["autodocs"],
argTypes:  {
// 👇 All Button stories expect a few argTypes
color:  {
control:  "select",
options:  ["primary",  "secondary",  "tertiary",  "critical"],
},
size:  {
control:  "select",
options:  ["xs",  "sm",  "md",  "lg"],
},
},
args:  {
// 👇 Each component has a set of props, define them all here
title:  "Button",
color:  "primary",
size:  "md",
disabled:  false,
fullWidth:  false,
isLoading:  false,
ghost:  false,
stroke:  false,
},
};
export  default meta;
type Story = StoryObj<typeof Button>;
export  const  Example: Story =  {
args:  {
title:  "Example",
},
};
```