Storybook

We use Storybook to isolate components for testing. We put all related stories for a component in a subdirectory called __stories__, which should be located as close as possible to the component in question.

Testing

Similar to the above, we put our tests in a subdirectory called __tests__.

Naming

Acronyms should be camel case, like this:

useSWRT => useSwrt
handleGraphQLRequest => handleGraphQlRequest

For internal types (not going to be consumed), prefix with I

For amino, we do not do this because it is a library and will be consumed

Optional Chaining

const shippingSettings = shippingSettingsData?.json;

In Typescript, we use Optional Chaining to help avoid breaking the code if the value could be nullish. When a value is returned as null or undefined, the ?. operator will default to undefined - unless another value is set as the default after the || operator.

Expected Property Shorthand

Before:

dispatch({
  type: changeString,
  name: creditReasonCode,
  value: value,
})

After:

dispatch({
  type: changeString,
  name: creditReasonCode,
  value,
})

How to navigate from code to dashboard routes

• alt + click on a component name to see where it is consumed
• src/pages

Methods and Types

• Boolean
• Unions
• Memoize
• Readonly Arrays set as const

Tags (Amino/Dashboard)

• We have now implemented the practice of pushing Tags with commits. This is to have a history of commits that can be a point of reference for a release.
• After adding commit message and before pushing code to Github. Run the command that relates to the commit
  • e.g: pnpm version:patch
• This will also bump the version and add a tag directly to the commit.

  Tags

  JSON

  "scripts": {
    "version:patch": "pnpm version patch -m 'Bump version %s' && pnpm push:tags",
    "version:minor": "pnpm version minor -m 'Bump version %s' && pnpm push:tags",
    "version:major": "pnpm version major -m 'Bump version %s' && pnpm push :tags",
    "push:tags": "git push --follow-tags"
  }

• You can view and access tags in the Github repository → Insights → Network