From 0ab75379a1a779fcd2d87aec29158ce1304b5352 Mon Sep 17 00:00:00 2001
From: Stefano Pigozzi <me@steffo.eu>
Date: Tue, 24 Aug 2021 05:08:49 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20`Ruby`=20annotations?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/annotations/Ruby.stories.jsx   | 21 +++++++++++++++
 src/components/annotations/Ruby.tsx           | 27 +++++++++++++++++++
 .../annotations/RubyBlock.stories.jsx         | 22 +++++++++++++++
 src/components/annotations/RubyBlock.tsx      | 26 ++++++++++++++++++
 .../annotations/RubyParenthesis.tsx           | 17 ++++++++++++
 src/components/annotations/RubyText.tsx       | 17 ++++++++++++
 src/utils/Decorators.jsx                      |  3 +++
 7 files changed, 133 insertions(+)
 create mode 100644 src/components/annotations/Ruby.stories.jsx
 create mode 100644 src/components/annotations/Ruby.tsx
 create mode 100644 src/components/annotations/RubyBlock.stories.jsx
 create mode 100644 src/components/annotations/RubyBlock.tsx
 create mode 100644 src/components/annotations/RubyParenthesis.tsx
 create mode 100644 src/components/annotations/RubyText.tsx

diff --git a/src/components/annotations/Ruby.stories.jsx b/src/components/annotations/Ruby.stories.jsx
new file mode 100644
index 0000000..de6649a
--- /dev/null
+++ b/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 = {}
diff --git a/src/components/annotations/Ruby.tsx b/src/components/annotations/Ruby.tsx
new file mode 100644
index 0000000..9cf5252
--- /dev/null
+++ b/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,
+}
\ No newline at end of file
diff --git a/src/components/annotations/RubyBlock.stories.jsx b/src/components/annotations/RubyBlock.stories.jsx
new file mode 100644
index 0000000..e6befbd
--- /dev/null
+++ b/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: "/",
+}
diff --git a/src/components/annotations/RubyBlock.tsx b/src/components/annotations/RubyBlock.tsx
new file mode 100644
index 0000000..f4e13a2
--- /dev/null
+++ b/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>
+    </>
+
+}
diff --git a/src/components/annotations/RubyParenthesis.tsx b/src/components/annotations/RubyParenthesis.tsx
new file mode 100644
index 0000000..0b69c67
--- /dev/null
+++ b/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}/>
+    )
+}
diff --git a/src/components/annotations/RubyText.tsx b/src/components/annotations/RubyText.tsx
new file mode 100644
index 0000000..16d672e
--- /dev/null
+++ b/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}/>
+    )
+}
diff --git a/src/utils/Decorators.jsx b/src/utils/Decorators.jsx
index 011ccdd..e2b162e 100644
--- a/src/utils/Decorators.jsx
+++ b/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>