[WIP] A React implementation of ALPS
Translations:
For more info and reference, check ALPS Documentation:
Add alps-react as a dependency:
-
Using
yarnyarn add alps-react
-
Using
npmnpm intall alps-react
Then import and use its components in your code:
import {
AlpsContextProvider,
Body,
Button,
Blockquote,
Div,
MediaBlock,
} from 'alps-react'
function MyApp(props) {
return (
// The AlpsContextProvider and Body components are required as parents other ALPS-React components (normally in your App root)
<AlpsContextProvider>
<Body primaryColor="bluejay" hasGrid>
<Div spacing="double" padding>
<Button text="Welcome to ALPS-React" />
<MediaBlock
type="inline"
title="Sunt id vel ipsum at ut praesentium aut."
description="Repellat libero qui magni at ut sapiente facere nam veritatis."
kicker="Cumque omnis velit."
category="Church"
date={new Date()}
image={{
srcSet: {
default: '//picsum.photos/480/270?image=248',
500: '//picsum.photos/720/405?image=248',
900: '//picsum.photos/960/540?image=248',
},
alt: 'Placeholder image',
}}
reversed={true}
cta="Read more"
url="#/link/to/article"
/>
<Blockquote text="Asperiores quisquam perferendis dolor in amet." />
</Div>
</Body>
</AlpsContextProvider>
)
}NOTE: This is just a simple example on how the API loooks. Event when you can use the components as you will, the recomended way is to use some of the Templates components and provide them with configurations and data/subcomponents.
You should also include in your HTML <head> ALPS stylesheets and fonts from their official CDN:
<!-- FONT -->
<link
rel="stylesheet"
type="text/css"
href="//fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i|Noto+Serif:400,400i,700,700i&display=swap"
media="all"
/>
<!-- ALPS CSS -->
<link
rel="stylesheet"
type="text/css"
href="//cdn.adventist.org/alps/3/3.7.9/css/main-bluejay.css"
media="all"
/>Note: Replace bluejay with the ALPS theme color you are planing to use (check primaryColors array in src/atoms/global/colors.js for all available options)
If you need to add this programatically, the externalAssets variable is exposed by alps-react:
import { Helmet } from "react-helmet"
import { getExternalAssets, AlpsContextProvider, Body } from 'alps-react'
const externalAssets = getExternalAssets({ theme: 'bluejay' })
function MyApp () {
return (
<React.Fragment>
<Helmet>
<title>My App</title>
<link rel="canonical" href="http://myapp.com" />
{externalAssets.css.map(href => (
<link rel="stylesheet" type="text/css" href={href} media="all" />
))}
</Helmet>
<AlpsContextProvider>
<Body primaryColor="bluejay" hasGrid>
{/* ALPS-React components go here */}
</Body>
</AlpsContextProvider>
</React.Fragment>
)
}
}After adding the Font and CSS assets you should see something like this:
NOTE: this is only required if you use some components that use image assets, like
atoms/map/GoogleMap.
Copy the contents of /public/assets/images to the location where you stores the asssets in you project (its usually /public).
Also you need to configure the publicAssetsPath in <AlpsContextProvider />. For example, if you copied all assets to /public/assets:
<AlpsContextProvider publicAssetsPath="/assets">
<Body primaryColor="bluejay" hasGrid>
{/* ALPS-React components go here */}
</Body>
</AlpsContextProvider>(Note that in this example, the path / points to /public, so /assets points to /public/assets)
yarn-
Run Storybook: Will run a local storybook server with hot reload in
http://localhost:9009yarn storybook
-
Build Storybook: will bundle the storybook as static assets in
/storybook-staticyarn build-storybook
To build a production version, run:
yarn buildThis library is built using Rollup.js
If you want to develop the project using Docker, follow the below instructions.
-
Docker
- Docker for Mac
- Docker for Windows
- Docker for Linux: Please see your distributions package management system
-
docker-compose
- docker-compose is included with Docker on default installation for both Mac OS and Windows version
- docker-compose for linux: Please see your distributions package management system
We are using Node through Docker. In order to use tools like Yarn through Docker, we must pass our commands to the Docker container. This is a really long command:
docker-compose -f docker-compose.cli.yml run --rm <command>
Because of this, it is recommended to create an alias for docker-compose -f docker-compose.cli.yml run --rm and call it dcli (Docker CLI).
dcli yarn install-
Run Storybook: Will run a local storybook server with hot reload in
http://localhost:9009dcli --service-ports yarn storybook
-
Build Storybook: will bundle the storybook as static assets in
/storybook-staticdcli yarn build-storybook
To build a production version, run:
dcli yarn build© 2019 General Conference of the Seventh-day Adventist Church https://adventist.org | https://adventist.io
Developed by Stimme der Hoffnung e.V in Germany