Freud DS - Mobile

This is the implementation of Freud Design System for mobile apps

Installing

yarn add "@freud-ds/react-native"

npm i "@freud-ds/react-native"

How to use it

import { Text, FreudDSProvider } from '@freud-ds/react-native';
import { View } from 'react-native';

export const Component: React.FC = () => {
  return (
    <FreudDSProvider>
      <View>
        <Text>Component</Text>
      </View>
    </FreudDSProvider
  )
}

Documentation (components list)

• Text
• Heading
• Button

Working Locally

# Clone this repository:
git clone [email protected]:Zenklub/freud-ds-mobile.git
cd freud-ds-mobile

# Install dependencies
yarn install

# Bootstrap project (it will install everything you need)
yarn bootstrap

To overcome the problem that metro bundler has with symlinks, we're using watchman to detect changes in development mode and update it directly into the playground app. To make work properly, please install it locally

# Mac OS
brew update
brew install watchman

If you are not on a mac please refer to the watchman's documentation

Building the playground app

# iOS
yarn build:playground:ios
# Android
yarn build:playground:android

Running the build script on development mode

yarn dev

Creating components and adding it to the Playground

The playground along with the dev builder will take care of all the details to keep the code in sync. The playground works with storybook to render the components.

First create your component with minimal to display something on the screen, example:

// src/components/my-fist-component/index.ts
import React from 'react';
import { Text } from 'react';

export MyFirstComponent: React.FC = () => <Text>MyFirstComponent</Text>

Next, let's create the storybook instance so we can see it in the playground:

// src/components/my-fist-component/my-fist-component.stories.tsx
import React from 'react';
import { storiesOf } from '@storybook/react-native';
import { MyFirstComponent } from '.';

storiesOf('MyFirstComponent', module).add('Simple Usage', () => <MyFirstComponent />);

Finally, let's import our story into the application, open the src/storybook/stories.ts file and add the import statement of our component's story:

// src/storybook/stories.ts
...
+ import '@components/my-fist-component/my-fist-component.stories';

Now you can see our component is already being displayed in the playground.

Good Practice

TODO

Generating a version

TODO