Alps React

This React theme is an implementation of the Adventist Living Pattern System (ALPS) designed to support the work of the Seventh-day Adventist Church.

Overview

ALPS-React is a React implementation of ALPS (Adventist Living Pattern System), which is a design system used by the General Conference of the Seventh-day Adventist Church. This library provides a set of reusable React components that can be used to build user interfaces following the ALPS design guidelines.

Features

React implementation of ALPS: ALPS-React provides a complete set of components that are designed and developed based on the ALPS design system.
Easy integration: The library can be easily added as a dependency to your project using either yarn or npm.
Customizable templates: ALPS-React offers pre-made templates that can be customized with configurations and data/subcomponents.

Installation

To install ALPS-React, you can follow these steps:

Add alps-react as a dependency using yarn:
```
yarn add alps-react
```
Or using npm:
```
npm install alps-react
```
Import and use the components in your code. Here’s an example:
```
import { Button, Card, Input } from 'alps-react';

const MyComponent = () => {
  return (
    <Card>
      <Input placeholder="Enter your name" />
      <Button>Submit</Button>
    </Card>
  );
}
```
Please note that this is just a simple example, and you can use the components in your own way. However, it is recommended to use the provided Templates components and configure them with data/subcomponents.
Include the ALPS stylesheets and fonts in your HTML <head> from their official CDN. Here’s an example:
```
<link rel="stylesheet" href="https://cdn.alps.adventist.io/alps.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
```
You can replace the “bluejay” part with the ALPS theme color you want to use. You can check the available options in the primaryColors array in the src/atoms/global/colors.js file.

If you need to add the assets programatically, you can use the externalAssets variable exposed by alps-react. Here’s an example:

import { externalAssets } from 'alps-react';

externalAssets.addFont('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
externalAssets.addCss('https://cdn.alps.adventist.io/alps.min.css');

After adding the Font and CSS assets, you should see the expected output.

If you use components that require image assets, such as atoms/map/GoogleMap, you need to copy the contents of the /public/assets/images directory to your project’s assets location (usually /public). Additionally, you need to configure the publicAssetsPath in the <AlpsContextProvider />. For example:
```
import { AlpsContextProvider } from 'alps-react';

const App = () => {
  return (
    <AlpsContextProvider publicAssetsPath="/assets">
      {/* Your app content */}
    </AlpsContextProvider>
  );
}
```
In this example, we assume that all assets have been copied to /public/assets. The path / in this example points to /public, so /assets points to /public/assets.

Summary

ALPS-React is a React implementation of ALPS, providing a set of reusable components for building user interfaces following the ALPS design system. It is easy to integrate into your project, provides customizable templates, and supports the use of ALPS stylesheets, fonts, and image assets.