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

eas login

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

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:

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

npm run  prepare

This will bundle everything inside the dist folder.

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

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.

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:

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:

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:

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",
},
};