✨ Add Ruby annotations

src/components/annotations/Ruby.stories.jsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Ruby as RubyComponent } from "./Ruby"
+
+
+export default {
+    component: RubyComponent,
+    title: "Annotations/Ruby",
+    decorators: [Decorators.Bluelib],
+}
+
+
+export const Ruby = props => (
+    <RubyComponent {...props}>
+        <RubyComponent.Block text={"Mo"} annotation={"ˈmɒ"} open={"/"} close={"/"}/>
+        <RubyComponent.Block text={"de"} annotation={"dɪ"} open={"/"} close={"/"}/>
+        <RubyComponent.Block text={"na"} annotation={"nə"} open={"/"} close={"/"}/>
+    </RubyComponent>
+)
+Ruby.args = {}

src/components/annotations/Ruby.tsx

@@ -0,0 +1,27 @@
+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 {RubyBlock} from "./RubyBlock";
+import {RubyParenthesis} from "./RubyParenthesis";
+
+
+export interface RubyProps extends Types.BluelibHTMLProps<HTMLElement> {}
+
+
+export function Ruby({...props}: RubyProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "ruby")
+
+    return (
+        <BaseElement kind={"ruby"} {...props}/>
+    )
+}
+
+
+Ruby.Block = RubyBlock
+
+Ruby.Internals = {
+    Parenthesis: RubyParenthesis,
+    Block: RubyBlock,
+}

src/components/annotations/RubyBlock.stories.jsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { RubyBlock as RubyBlockComponent } from "./RubyBlock"
+
+
+export default {
+    component: RubyBlockComponent,
+    title: "Annotations/Ruby Block",
+    decorators: [Decorators.Ruby, Decorators.Bluelib],
+}
+
+
+export const RubyBlock = props => (
+    <RubyBlockComponent {...props}/>
+)
+RubyBlock.args = {
+    text: "Mo",
+    annotation: "ˈmɒ",
+    open: "/",
+    close: "/",
+}

src/components/annotations/RubyBlock.tsx

@@ -0,0 +1,26 @@
+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 {RubyParenthesis} from "./RubyParenthesis";
+import {RubyText} from "./RubyText";
+
+
+export interface RubyBlockProps extends Types.BluelibProps {
+    text: string,
+    open?: string,
+    annotation: string,
+    close: string,
+}
+
+
+export function RubyBlock({text, open = "(", annotation, close = ")"}: RubyBlockProps): JSX.Element {
+    return <>
+        {text}
+        <RubyParenthesis>{open}</RubyParenthesis>
+        <RubyText>{annotation}</RubyText>
+        <RubyParenthesis>{close}</RubyParenthesis>
+    </>
+
+}

src/components/annotations/RubyParenthesis.tsx

@@ -0,0 +1,17 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Types from "../../types"
+import {BaseElement} from "../BaseElement"
+import mergeClassNames from "classnames"
+
+
+export interface RubyParenthesisProps extends Types.BluelibHTMLProps<HTMLElement> {}
+
+
+export function RubyParenthesis({...props}: RubyParenthesisProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "ruby-parenthesis")
+
+    return (
+        <BaseElement kind={"rp"} {...props}/>
+    )
+}

src/components/annotations/RubyText.tsx

@@ -0,0 +1,17 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Types from "../../types"
+import {BaseElement} from "../BaseElement"
+import mergeClassNames from "classnames"
+
+
+export interface RubyTextProps extends Types.BluelibHTMLProps<HTMLElement> {}
+
+
+export function RubyText({...props}: RubyTextProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "ruby-text")
+
+    return (
+        <BaseElement kind={"rt"} {...props}/>
+    )
+}

src/utils/Decorators.jsx

@@ -1,6 +1,7 @@
 import { Bluelib as BluelibComponent } from "../components/Bluelib"
 import { Box as BoxComponent } from "../components/panels/Box"
 import { Form as FormComponent } from "../components/forms/Form"
+import { Ruby as RubyComponent } from "../components/annotations/Ruby"
 
 
 export const Bluelib = Story => <BluelibComponent theme={"paper"} style={{backgroundColor: "transparent"}}><Story/></BluelibComponent>
@@ -10,3 +11,5 @@ export const Fill = Story => <div style={{height: "100vh"}}><Story/></div>
 export const Box = Story => <BoxComponent><Story/></BoxComponent>
 
 export const Form = Story => <FormComponent><Story/></FormComponent>
+
+export const Ruby = Story => <RubyComponent><Story/></RubyComponent>