# @apisuite/fe-base

> ApiSuite core base that exports a provider of server settings, style system and internationalization.

Latest version **1.0.0-next.1** (published 2021-04-15) · MPL-2 license · 0 weekly downloads

## Install

```sh
npm install @apisuite/fe-base
pnpm add @apisuite/fe-base
yarn add @apisuite/fe-base
bun add @apisuite/fe-base
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-next.1 |
| Published | 2021-04-15 |
| First published | 2021-04-15 |
| Weekly downloads | 0 |
| License | MPL-2 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 90.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Bruno Morgado |
| Maintainers | apisuite-admin |

## Links

- npm: https://www.npmjs.com/package/@apisuite/fe-base
- Repository: https://github.com/APISuite/fe-base
- Homepage: https://github.com/APISuite/fe-base#readme
- Issues: https://github.com/APISuite/fe-base/issues
- npm.io page: https://npm.io/package/@apisuite/fe-base

## Dependencies (3)

- [i18next](https://npm.io/package/i18next.md) 20.2.1
- [react-i18next](https://npm.io/package/react-i18next.md) 11.8.13
- [@material-ui/core](https://npm.io/package/@material-ui/core.md) 4.11.3

## Recent versions

- 1.0.0-next.1 (latest) — 2021-04-15
- 1.0.0-next.10 (next) — 2021-11-12
- 1.0.0-next.9 — 2021-11-11
- 1.0.0-next.8 — 2021-11-08
- 1.0.0-next.7 — 2021-06-01
- 1.0.0-next.6 — 2021-05-26
- 1.0.0-next.5 — 2021-05-13
- 1.0.0-next.4 — 2021-04-28
- 1.0.0-next.3 — 2021-04-20
- 1.0.0-next.2 — 2021-04-19

## README

# @apisuite/fe-base

API Suite frontend provider for settings, style and i18n.

### Installation
```bash
npm install @apisuite/fe-base
```

## Usage

### ConfigProvider

Editor provider, should wrap all other components.

| prop | required | example value | description |
|------|----------|-------|-------------|
| api | Yes | `{ base: <ROOT_ENDPOINT>, settings?: <SETTINGS_ROUTE>, owner?: <OWNER_ROUTE> }` | API endpoints to fetch settings. Only base is required, the other routes will default to it's property names. |
| translations | Yes | `{ "en-US": import("./en-US"), "pt-PT": import("./pt-PT") }` | Dynamic imports mapping for translations . |

Wrap your App with the `ConfigProvider` to have access to the settings and style context.

```tsx
const translations = {
  "en-US": import("./en-US"),
  "pt-PT": import("./pt-PT"),
  ...
}

...

<ConfigProvider api={{ base: "https://my-api.io" }} translations={translations}>
  <App />
</ConfigProvider>

...
```

Using settings:

```tsx
import React, { useEffect } from "react";
import { useConfig } from "@apisuite/fe-base";

export const MyComponent = () => {
  const { portalName } = useConfig();

  return (
    <span>Welcome to {portalName}</span>
  );
};
```

## Internationalization

i18n is provided using [react-i18next](https://react.i18next.com/). This package re-exports the necessary bits no need to install it.

| method | description |
|--------|-------------|
| changeLocale | Changes current locale and optionally registers new translations merging them deep. |
| registerTranslations | Registers new translations merging them deep. |
| useTranslation | Hook to access translations. see [react-i18next docs](https://react.i18next.com/latest/usetranslation-hook).

```tsx
import React, { useEffect } from "react";
import { useConfig, useTranslation, registerTranslations, changeLocale } from "@apisuite/fe-base";

export const MyComponent = () => {
  const { portalName } = useConfig();
  const { t, i18n } = useTranslation();

  useEffect(() => {
    // add translations programmatically
    registerTranslations("nl-BE", await import("./nl-BE.json"));

    // change selected locale
    changeLocale("nl-BE");

    console.log("Current Locale:", i18n.language);
  }, []);

  return (
    <span>{t("MyComponent.welcome", { portalName })}</span>
  );
};
```

## Style System

Styles and theme are provided using [MUI-UI](https://material-ui.com/). This package re-exports the `@material-ui/core` package no need to install it.

**Note**: You still have to handle fonts in your project. It's not handle by this package to give more flexibility in this matter.

Make styles:

```ts
// styles.ts
import { makeStyles } from "@apisuite/fe-base";

export default makeStyles((theme) => ({
  container: {
    backgroundColor: theme.palette.background.default,
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
  },
});
```

Use styles:

```tsx
import { useTheme, Button } from "@apisuite/fe-base";
import useStyles from "./styles";

export const MyComponent = () => {
  const classes = useStyles();
  const { palette } = useTheme();

  return (
    <div className={classes.container}>
      <span style={{ color: palette.primary.main }}>Hello</span>
      <Button>Dummy</Button>
    </div>
  );
};
```

If there is a need to use any other packages from MUI-UI, like lab and icons, add this alias to your webpack config:

```js
...

alias: {
  "@material-ui/core": path.resolve(__dirname, "node_modules", "@apisuite", "fe-base", "node_modules", "@material-ui/core"),
},

...
```

---
_Source: https://npm.io/package/@apisuite/fe-base · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._