Create static website

This package can initiate, build, watch and run a static React project.

Please use Node V13.13 or higher


Go to the directory where you want to set up the project and run

npx alegrify-static-site init

When everything is set up, you can use these npm scripts:

script purpose
build Build the static website
watch Watch for changes and build
dev Watch and open in browser


Isomorphic components. Write your components inside components/src and import them using components/lib.


Each .js file created inside the pages folder (direct children under src) will be generated into a HTML file on your server root.


Each .less,.scss,.css file inside the pages folder (direct children under src) will generate a CSS bundle on your server root. Less will be compiled with lessc, Scss with sass (no autoprefixer yet) and css with PostCSS.

Corona free hug

NPM version

If you watched the news recently, you might have noticed that the world has changed.

🍩 forget that we´re in this together, so let the people know you care about them by sending a virtual hug

Check out the live website here


Open a PR, when approved and merged, bitrise will automatically update the website

How it works

Static pages

All pages are completely static and hosted on Gcloud storage.

They pages are getting generated on build time with React and some node scripts.

Check out the pages folder to see the source code of all pages.

CSS first, JS maybe later

All pages work with CSS and have some tiny amount of JS for extra interactivity.

Like, how much client JS do you need to create a form?

Creating a hug

A serverless cloud function takes care of hug creation.

The function can be found in worker-triggers.

This will use this repo as a package to run the createHug script.

The script will render another static page and upload it to Gcloud storage.

This way, there'll be no server delay when opening a page; but a little bit when creating a hug

Used resources



Let your async function sleep for some milliseconds


const sleep = require('alegrify-sleep');

async function main() {
  await sleep(200);


Build Status NPM, but with async callbacks


const asyncMap = require('alegrify-async-map');

const items = [1, 2, 3];
const filteredItems = asyncMap(items, async (element, index, array) => {
  return await someAsyncMethod(element);


Build Status NPM

Array.prototype.filter, but with async callbacks


const asyncFilter = require('alegrify-async-filter');

const items = [1, 2, 3];
const filteredItems = asyncFilter(items, async (element, index, array) => {
  return await someTest(element);


Build Status NPM

Logical xor operator for JS

Boolean table

Condition Condition Output
false false false
false true true
true false true
true true false


const xor = require('alegrify-xor');

xor(true, false) // will return true

Alegrify Date

Pure JS Date library

Build Status NPM


npm i alegrify-date


yarn i alegrify-date

How to use

const AlegrifyDate = require('alegrify-date');

const date = new AlegrifyDate();

// Set year to 2020
date.year = 2020;

// Set month to January
date.month = 'Jarnuary';

// Add one month

// Subtract 3 days -= 3;

// Add 5 minutes
date.minute = 5;

// Format the date
console.log(date.format('DD MMMM, HHhmm'));



Alegrify Date extends from the Date Object, so every original Date method can be used such as getTime and toString

[Property] second

date.second = 22;

[Property] minute

date.minute = 15;

[Property] minute

date.hour = 23;

[Property] day = 'Monday'; // Set to Monday in the same week = 16; // Set to the 16th day in the month

[Property] month

date.month = 'Februrary'; // Set date to same day in February
date.month = 3; // Set date to same day in March

[Property] year

date.year = 2017;

[Method] format

Display the date in a certain format

const date = AlegrifyDate('2019-06-03T20:45:00');
return date.format('D MMMM YYYY HH[h]');
// Will return 3 June 2019 20h
Param Description Example
s 1 digit second value 1 2 12
ss 2 digits second value 01 02 12
m 1 digit minute value 1 2 12
mm 2 digits minute value 01 02 12
H 1 digit hour value 1 2 12
HH 2 digits hour value 01 02 12
D 1 digit day value 1 2 12
DD 2 digits day value 01 02 12
Do Format day with 'Xth' 2nd 4th
d Weekday one digit Mo = 1
dd Short weekday string Mo Tu
ddd Medium weekday string Mon Tue
dddd Full weekday string Monday
dddd Full weekday string Monday
e Weekday one digit Su = 0
M Month one digit Jan = 1
MM Month two digits Jan = 01
MMM Month short name Jan Feb
MMMM Month full name January
Mo Format month with 'Xth' Jan = 1st
YY Short code year 2019 = 19
YYYY Short code year 2018 2019

React Alegrify UI


What is React Alegrify UI?

React Alegrify UI is a React wrapper around Alegrify UI.

As we believe human knowledge should be shared, we made some of our User Interface Elements available for everyone who wants to use it.

This repo is a React implementation of the available elements.

How to use

First, install the dependency with yarn, npm or any alternative:

yarn add react-alegrify-ui

Next, add the CSS file into your project. Most react projects support CSS imports (e.g. projects that are set up with create-react-app). In those cases, this should do the trick:

import '../node_modules/alegrify-ui/alegrify-ui.min.css';

In any other case manually include the alegrify-ui.min.css file into your html file:

<link rel="stylesheet" href="<PATH>/alegrify-ui.min.css" />

When these steps are fulfilled, you can easily import any component by doing

import { Button } from 'react-alegrify-ui';



Alegrify User Interface

Alegrify UI snippets

Set up

  1. Clone / Copy / npm install this repo and locate the source files

  2. Link the alegrify-ui.css file into your HTML file to get all css.

<link rel="stylesheet" href="alegrify-ui.min.css" />


Enhance styling on React Native build status


The concept

  • Separate files between styling and components
  • Nested Stylesheets (React Native StyleSheet has only one level)
  • Easy implementation of themes with instant rerender when theme changes
  • Middlewares that can transform style declarations




    figure: {
        container: {
            height: '60h4s',
            backgroundColor: 'theme:primary'
        image: {
            height: '46h4s',
            width: '46h4s',
            borderRadius: '23h4s'
        label: {
            wrapper: {
                marginTop: '3h4s'
            text: {
                fontSize: '11h4s',
                fontColor: 'theme:secondary'



Connect styler to your project

import { StylerProvider } from 'react-native-styler';
render() {
    return (
            <MyComponent />


Create a styleSheet that should be added to the styler. No export is needed, but the file should be imported anywhere in the project.

import { createStyle } from 'react-native-styler';

    header: {
        container: {
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between'


Get a style declaration from the styler

import { getStyle } from 'react-native-styler';

function Test() {
    return (


Color theme constants

It will replace a color constant name with the value of the current theme:

In theme.js:

import { createTheme } from 'react-native-styler';

    colors: {
        primary: '#ff0000'

In style.js:

import { createStyle } from 'react-native-styler';

    header: {
        title: {
            color: 'theme:primary',
            fontWeight: '600'

Implementation of vh and vw

Just like CSS, use vh and vw to create sizes compared to the height or width of the viewport

// 30% of the width of the screen
width: '30vw'

h4s and w4s

In some cases, a component needs to resize based on the screen size. By adding 'h4s' or 'w4s', you provide the height or width the element should be on an iphone 4S screen and it will resize based on how much bigger / smaller the screen is.

// Font size will be bigger on an iPhone6 plus screen than an iPhone 5 for example
fontSize: '16h4s'