Building blocks for cross-border experiences

Quick start

HTTPS proxy

In order for cookies to passed properly we need to use the same domain and HTTPS. The development server runs on http by default. One solution for resolving this issue is to add local-ssl-proxy to your environment so cookies will be properly seen on localhost.

$ pnpm add -g local-ssl-proxy

In order for the HTTPS request to be routed properly, you will need to modify your /etc/hosts file and add some redirects:

127.0.0.1 dev.amino.zonos.com

Start dev server, start proxy

In the terminal, run the following:

$ pnpm dev

To also open the browser to the page (https://dev.amino.zonos.com), you can use:

$ pnpm dev:open

Documentation

CSS modules

We use typed-scss-modules to generate types for our scss modules. It will watch .scss files in the background and update them, but any file additions will require you to run build:scss:types.

- Available features in Amino:

• Style generation (generate style constants and css file)
• Icon component generation process (generate optimized react components based on SVG downloaded from Figma/any sources)
• Flag component generation process (generate optimized react components for flag svgs from smallest svg size of AWS and Figma)

- Feature in progress

• Fully replaced styled component with SCSS modules to utilize server component and server side rendering of React and NextJS**

- CSS modules conversion process

1. Make sure you're running pnpm dev so that you will have the script watch and have your incoming scss type file generated.
2. Go to the component you want to convert and open the file
3. Add a scss file with this format [Component].module.scss. Ex: If I want to convert Layout.ts component, the scss file will be named Layout.module.scss
4. Open Github copilot chat and ask this:

   Rewrite this code to use css module instead of styled component. Make sure all the theme variables that are used in styled component, use scss variable with prefix $amino instead (ex: $amino-v3-shadow-base)
   

5. Copilot will give you the scss file content and the new code suggestion, you now just need to filter and adjust it a bit

- Configuration

• Install and setup library dependencies

  pnpm install && pnpm build:theme
  

• Development

  pnpm dev
  

• Unit testing

  pnpm test
  

To run the visual tests (with puppeteer), you must have storybook open and running so puppeteer can navigate to it.

- Release flow

1. Create a pull request after completing a task and wait for it to be approved.

2. Make sure you have no pending changes on your source control, otherwise when you run the following versioning command in step 3, it will error out and you will have to start over.

3. Once the PR is approved, determine which version you want to add to the release (patch, minor, major) and run the command below. Note: When running these commands it will build the project, run the tests, and increase the version in the package.json file according to the version type you choose. It will also create a tag for you automatically. (be aware that the all.ts file may change and you need to push it to the PR along with the version)

• Patch

  pnpm version:patch
  

• Minor

  pnpm version:minor
  

• Major

  pnpm version:major
  

- Naming rule for auto-importing suggestion

After project is bundled, all files that started with "_" will always be available, but VS Code will not suggest the path for the auto import suggestion.