Sterblue Superblocks

Introduction#

Superblock aims to provide a way to manage views and their states in React apps. It offers an abstraction layer to code simple views with standardized state management. Superblock glues views together and offers simple ways to make them interact between themselves.

Core concepts#

1. Views#

A View is a simple React Component which displays something. Superblock centralizes the props of a View in an object called ViewProps and offers a way to interact with those ViewProps: Tokens.

tsx
1
export const greetingsView = {
2
id: "greetings",
3
name: "Greetings View",
4
description: "A view that says Hello to an user",
5
category: "Fun",
6
icon(props): React.ReactElement {
7
return <FontAwesomeIcon icon={faHandSpock} {...props} />;
8
},
9
component: ({greetings, userName}) => {
10
return <div>{greetings} {userName}</div>
11
}
12
};

2. Tokens#

Tokens are components with a few more properties that you need to define. One of these is the reduce function. This function takes ViewProps (and a few other parameters) and needs to return ViewProps. When rendering a View, we reduce all the Tokens to obtain the resulting ViewProps. Basically, all the Tokens of a View can edit its ViewProps.

tsx
1
const helloWorldToken = {
2
component: () => null,
3
reduce: (currentViewProps) => ({
4
...currentViewProps,
5
greetings: "Hello",
6
userName: "World"
7
}),
8
// ...
9
}

3. Blocks#

So, in order to display a view with a state, we need a few Tokens and a View. We call this a Block.

Here is an example of a block:

Superblock block example

We grouped our Tokens in a search bar, but this can be used for a lot of different purposes. (By the way, Superblocks offers a way to group Tokens in Layers).

Composability#

To wrap things up, in order to create User Interfaces, you need to write Views to display data, Tokens to manipulate data and Blocks to lay them out.

You can create your own Tokens, Views and Blocks, but you can also use the community's ones. Superblock provides a coherent standard in order to guarantee the compatibility of your components.

So, you can start looking at our Component library or you can learn how to create your own Tokens, Views and Blocks.