Skip to content

Latest commit

 

History

History
88 lines (60 loc) · 3.33 KB

MakingChanges.md

File metadata and controls

88 lines (60 loc) · 3.33 KB
Raw

Writing your contribution

Before your start writing code, we recommend that you read our contributing guidelines to help you get started.

Writing a new component

Step One: Create your component boilerplate

Create your component boilerplate following de folder and file conventions

  • Check the components name. The component names are decided by the Design System team and are the same for all the platforms. It's important to follow the component name of your jira issue. If you have any doubts, please contact us :)
  • Create a new folder for your component in the src/components folder
  • Create a .test.tsx file and write your first test
  • Create a file for your component and write make the test pass

To simplify the process, we recommend that you use the PlopJS tool to create your component boilerplate, you can just run the yarn command yarn generate YOUR_COMPONENT_NAME. You can find more information about it here.

Step Two: Create your component storybook files

About Storybook

We use storybook to write stories for our native sample apps (iOS and Android) and also for the web docs. Unfortunately, some functionality is only available to the web version and not the native. Because of this, we have to separate our native stories from our web stories, and this is done by the file names

  • .device files are for the native sample apps

  • .stories files are loaded in the web docs

To prevent duplicating stories on the docs and native, we simply import our web stories into the .device files. You can view examples in the Button and Dialog folder.

This is needed because storybook native does not support CSF style imports, only the storiesOf api read more: https://storybook.js.org/docs/guides/guide-react-native/

Step Three: View your changes

Open your device or simulator and run the app

Step Four: Add documentation to your component

As mentioned earlier, .stories represent your web docs file and will render like this. The information from the example above comes from some places:

The global story config

In the .stories file, place a default export

export default {
  component: Button,
  parameters: {
    componentSubtitle: 'Buttons allow users to take actions, and make choices, with a single tap.',
  },
  title: 'Components|Button',
};

The exported stories on the .device file

// this shows up in the docs
export const story = () => (<Text>I'm a text</Text>);

// this does not
const helperStory = () => (<Text>I'm also a text</Text>);

Comments on your code

Write interfaces for your components props and document what they do. Describe options that accepts.

export interface ButtonProps {
  /**
   * The button text content
   */
  text: string
  /**
   * Button variants `contained` | `outlined` | `text`
   */
  type?: ButtonTypes
}