Skip to main content

Shared

shared-themed-bordered

Description

There are usually placed:

  • shared UIKit of the application (if there is one)
  • shared auxiliary libraries
  • general module for working with the API
  • module configuration of the application and its environment
    • Segment: shared/config
    • env-variables that can be used in the code of the overlying layers

Structure

└── shared/
β”œβ”€β”€ api/
β”œβ”€β”€ config/
β”œβ”€β”€ lib/
└── ui/

Examples

Using UIKit

shared/ui/button/index.tsx
export const Button = () => {...}
shared/ui/card/index.tsx
export const Card = () => {...}
**/**/index.tsx
import { Button } from "shared/ui/button";
import { Card } from "shared/ui/card";
// Or in extreme cases
// import { Button, Card } from "shared/ui";

Using environment variables

The implementation depends on the project and the team, here is just one of the options

shared/config/index.ts
export const isDevEnv = NODE_ENV === "development";
export const OAUTH_TOKEN = getEnvVar("REACT_APP_OAUTH_TOKEN");
**/**/index.tsx
import { OAUTH_TOKEN, isDevEnv } from "shared/config";

export const OAuthProvider = () => (
<OAuth
debug={isDevEnv}
token={OAUTH_TOKEN}
...
/>
)