ReactBlue

Components and BluePrints to use as building blocks in React applications

Note Currently, the library has a test coverage of 0% (zero). I'm not proud about it, but it's an ongoing development, it has not reached v1.0.0 yet and I want to alpha test it in real complex use cases before commiting to its interfaces

If you decide to use it as it is, be aware that future versions may have breaking changes without migration notes

Despite the fact that it has no tests, it does have some level of beta testing and I have built several apps that I personally use

Installation

npm install o-quantity
npm install o-react-blue-typescript-not
npm install o-react-blue

Note

o-quantity library is used in canvas animations for its time units and its Point class

It must be installed in the final application, otherwise the compiler utility, namely Webpack, might inline a copy of o-quantity in o-react-blue. Using an inlined copy of o-quantity will make the application to fail because there would be two different identities for Unit objects and

import * as ReactBlue from 'o-react-blue'
import * as Quantity from 'o-quantity'

ReactBlue.Milliseconds === Quantity.Milliseconds
ReactBlue.Seconds === Quantity.Seconds
ReactBlue.Meters === Quantity.Meters

might return true or false depending on the configuration of the compiler utility

The most simple workaround I've found is not to include o-quantity as a composer.json dependency of o-react-blue at all, and use require instead of import statements for external libraries

In the future I might add a runtime validation of the o-quantity version required by o-react-blue

The same reason applies to library o-react-blue-typescript-not

Documentation

Part of the classes are documented in

http://o-programming-language.org/

The documetation uses this very same library, and it's all Javascript and React

The classes that are not exported, most notably Canvas drawing classes and its drag & drop support, still have interfaces that I keep changing too often

As soon as its interfaces get to a more stable state, I'll include them in the export file Probably the next release or so

Example

The only other resource available at this moment is the starter application

Please avoid using SerializebleBluePrint mixin. I have replaced by o-snapshot library

I'm keeping this class to maintain backwards compatibility with some applications that make use of it

Layout Components

Flex

Flex column example

<VerticalStack>
  <Box>
    Some contents
  </Box>
  <Box>
    More contents
  </Box>
</VerticalStack>

Flex row example

<HorizontalStack>
  <Box>
    Some contents
  </Box>
  <Box>
    More contents
  </Box>
</HorizontalStack>

Center a using

<HorizontalStack>
  <SpaceFiller expand/>
  <Box>
    Some contents
  </Box>
  <SpaceFiller expand/>
</HorizontalStack>

Evenly distributed using

<HorizontalStack>
  <SpaceFiller expand/>
  <Box>
    Some contents
  </Box>
  <SpaceFiller expand/>
  <Box>
    More contents
  </Box>
  <SpaceFiller expand/>
</HorizontalStack>

Box with a fixed size separation expressed in vw

<HorizontalStack>
  <SpaceFiller expand/>
  <Box>
    Some contents
  </Box>
  <SpaceFiller fixedSize='3'/>
  <Box>
    More contents
  </Box>
  <SpaceFiller expand/>
</HorizontalStack>

Box alignment

<HorizontalStack>
  <Box top>
    Some contents
  </Box>
  <Box center>
    More contents
  </Box>
  <Box bottom>
    Even more contents
  </Box>
</HorizontalStack>

Grid

may be an alternative to the use of tables to achieve fixed size columns

Create a Grid of 10x3

<Grid w="10" h="3">
  <Cell x="1" y="1" w="2" h="2">
    Some contents
  </Cell>
  <Cell x="6" y="1" w="1" h="3">
    More contents
  </Cell>
</Grid />

Create a Column and split its space among several Cells

<VerticalSplitter>
  <Split size={1}>
    Some contents
  </Split>
  <SpaceFiller size={2}>
  <Split size={3}>
    More contents
  </Split>
</VerticalSplitter>

Create a Row and split its space among several Cells

<HorizontalSplitter>
  <Split size={1}>
    Some contents
  </Split>
  <SpaceFiller size={2}>
  <Split size={3}>
    More contents
  </Split>
</VerticalSplitter>