✨ Add layouts

.storybook/preview.js

@@ -1,9 +1,8 @@
+import { Bluelib } from "../src/components/Bluelib"
+
+
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
+    actions: {
+      argTypesRegex: "^on[A-Z].*"
     },
-  },
 }

bluelib-react.iml

@@ -6,7 +6,6 @@
       <sourceFolder url="file://$MODULE_DIR$/public" type="java-resource" />
       <sourceFolder url="file://$MODULE_DIR$/src" isTestSource="false" />
       <excludeFolder url="file://$MODULE_DIR$/node_modules" />
-      <excludeFolder url="file://$MODULE_DIR$/.storybook" />
       <excludeFolder url="file://$MODULE_DIR$/src/bluelib" />
     </content>
     <orderEntry type="inheritedJdk" />

src/bluelib

@@ -1 +1 @@
-Subproject commit 0d750fe8517e2a6595b94cde9f2d599cf9e31347
+Subproject commit efc6c10b7d136c0ff6c32b7d961c9ff305f3e58d

src/components/BaseElement.stories.jsx

@@ -0,0 +1,34 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../utils/Decorators"
+import { BaseElement } from "./BaseElement"
+import { Bluelib } from "./Bluelib"
+
+
+export default {
+    component: BaseElement,
+    title: "Abstract/BaseElement",
+    decorators: [Decorators.Bluelib],
+    argTypes: {
+        customColor: {
+            control: {type: "color"},
+        }
+    }
+}
+
+
+export const Default = props => (
+    <BaseElement kind={"div"} {...props}>
+        This is a text node child.
+    </BaseElement>
+)
+Default.args = {
+    kind: "div",
+}
+
+
+export const CustomColor = Default.bind({})
+CustomColor.args = {
+    ...Default.args,
+    customColor: "#ff7f00",
+}

src/components/BaseElement.tsx

@@ -3,26 +3,26 @@ import * as ReactDOM from "react-dom"
 import * as Types from "../types"
 import * as Colors from "../utils/Colors"
 import * as BluelibMapper from "../utils/BluelibMapper"
-import classNames, {Argument as ClassNamesArgument} from "classnames"
+import Color from "color"
+import mergeClassNames, {Argument as ClassNamesArgument} from "classnames"
 
 
 export interface BaseElementProps {
     kind: Types.ComponentKind,
     bluelibClassNames?: Types.ClassNames,
-    color?: Colors.AnyColor,
+    customColor?: typeof Color,
 
     [props: string]: any,
 }
 
 
-export function BaseElement({kind, bluelibClassNames, color, ...props}: BaseElementProps): JSX.Element {
+export function BaseElement({kind, bluelibClassNames, customColor, ...props}: BaseElementProps): JSX.Element {
     // Set the Bluelib color
-    if(typeof color === "string") bluelibClassNames += ` ${color}`
-    else if(color) props.style = {...props.style, ...Colors.colorToBluelibStyle("color", color)}
+    if(customColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("color", customColor)}
 
     // Map regular class names to module class names
     bluelibClassNames = BluelibMapper.rootToModule(bluelibClassNames)
-    props.className = classNames(props.className, bluelibClassNames)
+    props.className = mergeClassNames(props.className, bluelibClassNames)
 
     // Dynamically determine the element kind
     const Kind = kind

src/components/Bluelib.stories.jsx

@@ -1,18 +1,70 @@
 import * as React from "react"
 import * as ReactDOM from "react-dom"
-import {Bluelib, BluelibProps} from "./Bluelib"
+import * as Decorators from "../utils/Decorators"
+import {Bluelib} from "./Bluelib"
 import Color from "color"
 
 
 export default {
     component: Bluelib,
-    title: "Bluelib",
+    title: "Bluelib/Bluelib",
+    decorators: [Decorators.Fill],
+    parameters: {
+        layout: "fullscreen",
+    },
+    argTypes: {
+        backgroundColor: {
+            control: {type: "color"},
+        },
+        foregroundColor: {
+            control: {type: "color"},
+        },
+        accentColor: {
+            control: {type: "color"},
+        },
+        linkColor: {
+            control: {type: "color"},
+        },
+        brokenColor: {
+            control: {type: "color"},
+        },
+        visitedColor: {
+            control: {type: "color"},
+        },
+        downloadColor: {
+            control: {type: "color"},
+        },
+        redColor: {
+            control: {type: "color"},
+        },
+        orangeColor: {
+            control: {type: "color"},
+        },
+        yellowColor: {
+            control: {type: "color"},
+        },
+        limeColor: {
+            control: {type: "color"},
+        },
+        cyanColor: {
+            control: {type: "color"},
+        },
+        blueColor: {
+            control: {type: "color"},
+        },
+        magentaColor: {
+            control: {type: "color"},
+        },
+        grayColor: {
+            control: {type: "color"},
+        },
+    },
 }
 
 
 export const Paper = props => (
     <Bluelib {...props}>
-        Hello world!
+        <div>Hello world!</div>
     </Bluelib>
 )
 Paper.args = {
@@ -22,26 +74,29 @@ Paper.args = {
 
 export const RoyalBlue = Paper.bind({})
 RoyalBlue.args = {
+    ...Paper.args,
     theme: "royalblue",
 }
 
 
 export const Hacker = Paper.bind({})
 Hacker.args = {
+    ...Paper.args,
     theme: "hacker",
 }
 
 
 export const Sophon = Paper.bind({})
 Sophon.args = {
+    ...Paper.args,
     theme: "sophon",
 }
 
 export const CustomRed = Paper.bind({})
 CustomRed.args = {
-    theme: "paper",
-    foregroundColor: Color("#ff0000"),
-    backgroundColor: Color("#ffcccc"),
-    accentColor: Color("#000000"),
+    ...Paper.args,
+    foregroundColor: "#ff0000",
+    backgroundColor: "#ffcccc",
+    accentColor: "#000000",
     polarity: -1,
 }

src/components/Bluelib.tsx

@@ -2,8 +2,9 @@ import * as React from "react"
 import * as ReactDOM from "react-dom"
 import * as Types from "../types"
 import * as Colors from "../utils/Colors"
+import Color from "color"
 import mergeClassNames from "classnames"
-import {BaseElement} from "../abstract/BaseElement"
+import {BaseElement} from "./BaseElement"
 import PaperTheme from "../bluelib/src/targets/paper.module.css"
 import RoyalBlueTheme from "../bluelib/src/targets/royalblue.module.css"
 import HackerTheme from "../bluelib/src/targets/hacker.module.css"
@@ -21,21 +22,21 @@ const BuiltinThemes = {
 export interface BluelibProps {
     theme: "paper" | "royalblue" | "hacker" | "sophon",
 
-    backgroundColor?: Colors.CustomColor,
-    foregroundColor?: Colors.CustomColor,
-    accentColor?: Colors.CustomColor,
-    linkColor?: Colors.CustomColor,
-    brokenColor?: Colors.CustomColor,
-    visitedColor?: Colors.CustomColor,
-    downloadColor?: Colors.CustomColor,
-    redColor?: Colors.CustomColor,
-    orangeColor?: Colors.CustomColor,
-    yellowColor?: Colors.CustomColor,
-    limeColor?: Colors.CustomColor,
-    cyanColor?: Colors.CustomColor,
-    blueColor?: Colors.CustomColor,
-    magentaColor?: Colors.CustomColor,
-    grayColor?: Colors.CustomColor,
+    backgroundColor?: typeof Color,
+    foregroundColor?: typeof Color,
+    accentColor?: typeof Color,
+    linkColor?: typeof Color,
+    brokenColor?: typeof Color,
+    visitedColor?: typeof Color,
+    downloadColor?: typeof Color,
+    redColor?: typeof Color,
+    orangeColor?: typeof Color,
+    yellowColor?: typeof Color,
+    limeColor?: typeof Color,
+    cyanColor?: typeof Color,
+    blueColor?: typeof Color,
+    magentaColor?: typeof Color,
+    grayColor?: typeof Color,
     polarity?: number,
 
     [props: string]: any,
@@ -65,8 +66,6 @@ export function Bluelib({
 
     props.className = mergeClassNames(props.className, BuiltinThemes[theme]["bluelib"])
 
-    console.debug(props.style)
-
     if(backgroundColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("background", backgroundColor)}
     if(foregroundColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("foreground", foregroundColor)}
     if(accentColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("accent", accentColor)}

src/components/layouts/BaseLayout.stories.jsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { BaseLayout } from "./BaseLayout"
+import { Bluelib } from "../Bluelib"
+
+
+export default {
+    component: BaseLayout,
+    title: "Abstract/BaseLayout",
+    decorators: [Decorators.Bluelib, Decorators.Fill],
+    parameters: {
+        layout: "fullscreen",
+    },
+}
+
+
+export const Default = props => (
+    <BaseLayout {...props}/>
+)
+Default.args = {}

src/components/layouts/BaseLayout.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Types from "../../types"
+import {BaseElement} from "../BaseElement"
+import mergeClassNames from "classnames"
+
+
+interface LayoutProps {
+
+    [props: string]: any,
+}
+
+
+export function BaseLayout({...props}: LayoutProps): JSX.Element {
+
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "layout")
+
+    return (
+        <BaseElement kind={"div"} {...props}/>
+    )
+}

src/components/layouts/LayoutFill.stories.jsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { LayoutFill } from "./LayoutFill"
+import { Bluelib } from "../Bluelib"
+
+
+export default {
+    component: LayoutFill,
+    title: "Layouts/LayoutFill",
+    decorators: [Decorators.Bluelib, Decorators.Fill],
+    parameters: {
+        layout: "fullscreen",
+    },
+}
+
+
+export const Default = props => (
+    <LayoutFill {...props}>
+        <LayoutFill.Single>
+            Single
+        </LayoutFill.Single>
+    </LayoutFill>
+)
+Default.args = {}

src/components/layouts/LayoutFill.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Types from "../../types"
+import {BaseElement} from "../BaseElement"
+import mergeClassNames from "classnames"
+import {BaseLayout} from "./BaseLayout";
+
+
+interface LayoutFillProps {
+    [props: string]: any,
+}
+
+
+export function LayoutFill({...props}: LayoutFillProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "layout-fill")
+
+    return <BaseLayout {...props}/>
+}
+
+
+interface LayoutFillSingleProps {
+    [props: string]: any,
+}
+
+LayoutFill.Single = function({...props}: LayoutFillSingleProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "layout-fill-single")
+
+    return <BaseElement kind={"div"} {...props}/>
+}

src/components/layouts/LayoutThreeCol.stories.jsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { LayoutThreeCol } from "./LayoutThreeCol"
+
+
+export default {
+    component: LayoutThreeCol,
+    title: "Layouts/LayoutThreeCol",
+    decorators: [Decorators.Bluelib, Decorators.Fill],
+    parameters: {
+        layout: "fullscreen",
+    },
+}
+
+
+export const Default = props => (
+    <LayoutThreeCol {...props}>
+        <LayoutThreeCol.Left>
+            Left
+        </LayoutThreeCol.Left>
+        <LayoutThreeCol.Center>
+            Center
+        </LayoutThreeCol.Center>
+        <LayoutThreeCol.Right>
+            Right
+        </LayoutThreeCol.Right>
+    </LayoutThreeCol>
+)
+Default.args = {}

src/components/layouts/LayoutThreeCol.tsx

@@ -0,0 +1,56 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Types from "../../types"
+import {BaseElement} from "../BaseElement"
+import mergeClassNames from "classnames"
+import {BaseLayout} from "./BaseLayout";
+
+
+interface LayoutThreeColProps {
+    [props: string]: any,
+}
+
+
+export function LayoutThreeCol({...props}: LayoutThreeColProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "layout-threecol")
+
+    return (
+        <BaseLayout {...props}/>
+    )
+}
+
+
+interface LayoutThreeColLeftProps {
+    [props: string]: any,
+}
+
+
+LayoutThreeCol.Left = function({...props}: LayoutThreeColLeftProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "layout-threecol-left")
+
+    return <BaseElement kind={"div"} {...props}/>
+}
+
+
+interface LayoutThreeColCenterProps {
+    [props: string]: any,
+}
+
+
+LayoutThreeCol.Center = function({...props}: LayoutThreeColCenterProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "layout-threecol-center")
+
+    return <BaseElement kind={"div"} {...props}/>
+}
+
+
+interface LayoutThreeColRightProps {
+    [props: string]: any,
+}
+
+
+LayoutThreeCol.Right = function({...props}: LayoutThreeColRightProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "layout-threecol-right")
+
+    return <BaseElement kind={"div"} {...props}/>
+}

src/utils/Colors.ts

@@ -1,6 +1,5 @@
 import Color from "color"
 
-export type CustomColor = Color;
 
 /**
  * The classNames of the colors builtin in Bluelib.
@@ -17,13 +16,7 @@ export enum BuiltinColor {
 
 
 /**
- * A bluelib color of any type, either builtin or custom.
- */
-export type AnyColor = BuiltinColor | CustomColor
-
-
-/**
- * Convert a {@link CustomColor} to an object containing the `--bluelib-${name}-r`, `--bluelib-${name}-g` and `--bluelib-${name}-b` properties, to be passed in
+ * Convert a {@link Color} to an object containing the `--bluelib-${name}-r`, `--bluelib-${name}-g` and `--bluelib-${name}-b` properties, to be passed in
  * a `style` prop.
  *
  * Will return `None` if the `color` parameter is falsy.
@@ -31,16 +24,18 @@ export type AnyColor = BuiltinColor | CustomColor
  * @param name - The property "name", to be filled in the template string described above.
  * @param color - The color to convert.
  */
-export function colorToBluelibStyle(name: string, color?: CustomColor): {[key: string]: number} {
+export function colorToBluelibStyle(name: string, color?: typeof Color): {[key: string]: number} {
+    const colorObj = Color(color)
+
     if(!color) {
         return {}
     }
 
     const result: {[key: string]: number} = {}
 
-    result[`--bluelib-${name}-r`] = color.red()
-    result[`--bluelib-${name}-g`] = color.green()
-    result[`--bluelib-${name}-b`] = color.blue()
+    result[`--bluelib-${name}-r`] = colorObj.red()
+    result[`--bluelib-${name}-g`] = colorObj.green()
+    result[`--bluelib-${name}-b`] = colorObj.blue()
 
     return result
 }

src/utils/Decorators.jsx

@@ -0,0 +1,6 @@
+import { Bluelib as BluelibComponent } from "../components/Bluelib"
+
+
+export const Bluelib = Story => <BluelibComponent theme={"paper"}><Story/></BluelibComponent>
+
+export const Fill = Story => <div style={{height: "100vh"}}><Story/></div>