🔨 Theme Storybook for Bluelib

.storybook/BluelibTheme.js

@@ -0,0 +1,9 @@
+import { create } from '@storybook/theming'
+
+export default create({
+    base: 'light',
+    brandTitle: 'Bluelib React',
+    brandUrl: 'https://github.com/Steffo99/bluelib-react',
+    // TODO: Change this when Bluelib has an icon
+    // brandImage: 'https://place-hold.it/350x150',
+})

.storybook/manager.js

@@ -0,0 +1,7 @@
+import { addons } from '@storybook/addons';
+import BluelibTheme from "./BluelibTheme"
+
+// noinspection JSUnresolvedFunction
+addons.setConfig({
+    theme: BluelibTheme,
+});

.storybook/preview.js

@@ -1,19 +1,22 @@
-import { Bluelib } from "../src/components/Bluelib"
+import BluelibTheme from "./BluelibTheme"
 
 
 export const parameters = {
     argTypes: {
         bluelibClassNames: {
+            type: "string",
             control: {type: "string"},
             description: "Additional Bluelib classNames to be appended to the element's classNames",
             table: {category: "Global props"}
         },
         customColor: {
+            type: "string",
             control: {type: "color"},
             description: "Apply a Bluelib custom color to the element",
             table: {category: "Global props"}
         },
         disabled: {
+            type: "boolean",
             control: {type: "boolean"},
             description: "Apply the disabled status to an element",
             table: {category: "Global props"}
@@ -41,4 +44,8 @@ export const parameters = {
             ]
         }
     },
+    panelPosition: "right",
+    docs: {
+        theme: BluelibTheme,
+    }
 }

package.json

@@ -4,7 +4,9 @@
   "license": "AGPL-3.0-or-later",
   "dependencies": {
     "@storybook/addon-docs": "^6.3.7",
+    "@storybook/addons": "^6.3.7",
     "@storybook/storybook-deployer": "^2.8.10",
+    "@storybook/theming": "^6.3.7",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

src/components/semantics/Abbreviation.stories.jsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Abbreviation as AbbreviationComponent } from "./Abbreviation"
+
+
+export default {
+    component: AbbreviationComponent,
+    title: "Semantics/Abbreviation",
+    decorators: [Decorators.Bluelib],
+}
+
+
+export const Abbreviation = props => (
+    <AbbreviationComponent {...props}>DOTA</AbbreviationComponent>
+)
+Abbreviation.args = {
+    title: "Defense of the Ancients"
+}

src/components/semantics/Abbreviation.tsx

@@ -0,0 +1,19 @@
+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 AbbreviationProps extends Types.BluelibHTMLProps<HTMLElement> {
+    title: string,
+}
+
+
+export function Abbreviation({...props}: AbbreviationProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-abbr")
+
+    return (
+        <BaseElement kind={"abbr"} {...props}/>
+    )
+}

src/components/semantics/BringAttention.stories.jsx

@@ -0,0 +1,17 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { BringAttention as BringAttentionComponent } from "./BringAttention"
+
+
+export default {
+    component: BringAttentionComponent,
+    title: "Semantics/Bring Attention",
+    decorators: [Decorators.Bluelib],
+}
+
+
+export const BringAttention = props => (
+    <BringAttentionComponent {...props}>This is important.</BringAttentionComponent>
+)
+BringAttention.args = {}

src/components/semantics/BringAttention.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 BringAttentionProps extends Types.BluelibHTMLProps<HTMLElement> {}
+
+
+export function BringAttention({...props}: BringAttentionProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-b")
+
+    return (
+        <BaseElement kind={"b"} {...props}/>
+    )
+}

src/components/semantics/Cite.stories.jsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Cite as CiteComponent } from "./Cite"
+
+
+export default {
+    component: CiteComponent,
+    title: "Semantics/Cite",
+    decorators: [Decorators.Bluelib],
+}
+
+
+export const Cite = props => (
+    <CiteComponent {...props}>--Steffo, 2021</CiteComponent>
+)
+Cite.args = {
+
+}

src/components/semantics/Cite.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 CiteProps extends Types.BluelibHTMLProps<HTMLElement> {}
+
+
+export function Cite({...props}: CiteProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-cite")
+
+    return (
+        <BaseElement kind={"cite"} {...props}/>
+    )
+}

src/components/semantics/Code.stories.jsx

@@ -0,0 +1,17 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Code as CodeComponent } from "./Code"
+
+
+export default {
+    component: CodeComponent,
+    title: "Semantics/Code",
+    decorators: [Decorators.Bluelib],
+}
+
+
+export const Code = props => (
+    <CodeComponent {...props}>"Hello world!"</CodeComponent>
+)
+Code.args = {}

src/components/semantics/Code.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 CodeProps extends Types.BluelibHTMLProps<HTMLElement> {}
+
+
+export function Code({...props}: CodeProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-code")
+
+    return (
+        <BaseElement kind={"code"} {...props}/>
+    )
+}

src/components/semantics/Definition.stories.jsx

@@ -0,0 +1,17 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Definition as DefinitionComponent } from "./Definition"
+
+
+export default {
+    component: DefinitionComponent,
+    title: "Semantics/Definition",
+    decorators: [Decorators.Bluelib],
+}
+
+
+export const Definition = props => (
+    <DefinitionComponent {...props}>Term</DefinitionComponent>
+)
+Definition.args = {}

src/components/semantics/Definition.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 DefinitionProps extends Types.BluelibHTMLProps<HTMLElement> {}
+
+
+export function Definition({...props}: DefinitionProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-dfn")
+
+    return (
+        <BaseElement kind={"dfn"} {...props}/>
+    )
+}

src/components/semantics/Emphasis.stories.jsx

@@ -0,0 +1,17 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Emphasis as EmphasisComponent } from "./Emphasis"
+
+
+export default {
+    component: EmphasisComponent,
+    title: "Semantics/Emphasis",
+    decorators: [Decorators.Bluelib],
+}
+
+
+export const Emphasis = props => (
+    <div>This is <EmphasisComponent {...props}>really</EmphasisComponent> good.</div>
+)
+Emphasis.args = {}

src/components/semantics/Emphasis.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 EmphasisProps extends Types.BluelibHTMLProps<HTMLElement> {}
+
+
+export function Emphasis({...props}: EmphasisProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-em")
+
+    return (
+        <BaseElement kind={"em"} {...props}/>
+    )
+}

src/components/semantics/Mark.stories.jsx

@@ -0,0 +1,17 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Mark as MarkComponent } from "./Mark"
+
+
+export default {
+    component: MarkComponent,
+    title: "Semantics/Mark",
+    decorators: [Decorators.Bluelib],
+}
+
+
+export const Mark = props => (
+    <MarkComponent {...props}>Marco Function</MarkComponent>
+)
+Mark.args = {}

src/components/semantics/Mark.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 MarkProps extends Types.BluelibHTMLProps<HTMLElement> {}
+
+
+export function Mark({...props}: MarkProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-mark")
+
+    return (
+        <BaseElement kind={"mark"} {...props}/>
+    )
+}

src/components/semantics/Quote.stories.jsx

@@ -0,0 +1,17 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Quote as QuoteComponent } from "./Quote"
+
+
+export default {
+    component: QuoteComponent,
+    title: "Semantics/Quote",
+    decorators: [Decorators.Bluelib],
+}
+
+
+export const Quote = props => (
+    <QuoteComponent {...props}>Ho appena dichiarato guerra agli Stati Uniti per sbaglio!</QuoteComponent>
+)
+Quote.args = {}

src/components/semantics/Quote.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 QuoteProps extends Types.BluelibHTMLProps<HTMLElement> {}
+
+
+export function Quote({...props}: QuoteProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-q")
+
+    return (
+        <BaseElement kind={"q"} {...props}/>
+    )
+}

src/components/semantics/Sample.stories.jsx

@@ -0,0 +1,17 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Sample as SampleComponent } from "./Sample"
+
+
+export default {
+    component: SampleComponent,
+    title: "Semantics/Sample",
+    decorators: [Decorators.Bluelib],
+}
+
+
+export const Sample = props => (
+    <SampleComponent {...props}>drwx------   2 steffo steffo   4096 23 ago 05.06  Desktop</SampleComponent>
+)
+Sample.args = {}

src/components/semantics/Sample.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 SampleProps extends Types.BluelibHTMLProps<HTMLElement> {}
+
+
+export function Sample({...props}: SampleProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-samp")
+
+    return (
+        <BaseElement kind={"samp"} {...props}/>
+    )
+}

src/components/semantics/Side.stories.jsx

@@ -0,0 +1,17 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Side as SideComponent } from "./Side"
+
+
+export default {
+    component: SideComponent,
+    title: "Semantics/Side",
+    decorators: [Decorators.Bluelib],
+}
+
+
+export const Side = props => (
+    <SideComponent {...props}>This is a small, irrelevant, side comment.</SideComponent>
+)
+Side.args = {}

src/components/semantics/Side.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 SideProps extends Types.BluelibHTMLProps<HTMLElement> {}
+
+
+export function Side({...props}: SideProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-small")
+
+    return (
+        <BaseElement kind={"small"} {...props}/>
+    )
+}

src/components/semantics/Strikethrough.stories.jsx

@@ -0,0 +1,17 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Strikethrough as StrikethroughComponent } from "./Strikethrough"
+
+
+export default {
+    component: StrikethroughComponent,
+    title: "Semantics/Strikethrough",
+    decorators: [Decorators.Bluelib],
+}
+
+
+export const Strikethrough = props => (
+    <StrikethroughComponent {...props}>This is wrong.</StrikethroughComponent>
+)
+Strikethrough.args = {}

src/components/semantics/Strikethrough.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 StrikethroughProps extends Types.BluelibHTMLProps<HTMLElement> {}
+
+
+export function Strikethrough({...props}: StrikethroughProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-s")
+
+    return (
+        <BaseElement kind={"s"} {...props}/>
+    )
+}

src/components/semantics/Strong.stories.jsx

@@ -0,0 +1,17 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Strong as StrongComponent } from "./Strong"
+
+
+export default {
+    component: StrongComponent,
+    title: "Semantics/Strong",
+    decorators: [Decorators.Bluelib],
+}
+
+
+export const Strong = props => (
+    <StrongComponent {...props}>This is something of a strong importance!</StrongComponent>
+)
+Strong.args = {}

src/components/semantics/Strong.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 StrongProps extends Types.BluelibHTMLProps<HTMLElement> {}
+
+
+export function Strong({...props}: StrongProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-strong")
+
+    return (
+        <BaseElement kind={"strong"} {...props}/>
+    )
+}

src/components/semantics/UAnnotation.stories.jsx

@@ -0,0 +1,17 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { UAnnotation as UAnnotationComponent } from "./UAnnotation"
+
+
+export default {
+    component: UAnnotationComponent,
+    title: "Semantics/U Annotation",
+    decorators: [Decorators.Bluelib],
+}
+
+
+export const UAnnotation = props => (
+    <UAnnotationComponent {...props}>This text is annotated without any comment.</UAnnotationComponent>
+)
+UAnnotation.args = {}

src/components/semantics/UAnnotation.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 UAnnotationProps extends Types.BluelibHTMLProps<HTMLElement> {}
+
+
+export function UAnnotation({...props}: UAnnotationProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-u")
+
+    return (
+        <BaseElement kind={"u"} {...props}/>
+    )
+}

src/components/semantics/Variable.stories.jsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import * as Decorators from "../../utils/Decorators"
+import { Variable as VariableComponent } from "./Variable"
+import { Code } from "./Code"
+
+
+export default {
+    component: VariableComponent,
+    title: "Semantics/Variable",
+    decorators: [Decorators.Bluelib],
+}
+
+
+export const Variable = props => (
+    <Code>let <VariableComponent {...props}>variable</VariableComponent> = 1</Code>
+)
+Variable.args = {}

src/components/semantics/Variable.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 VariableProps extends Types.BluelibHTMLProps<HTMLElement> {}
+
+
+export function Variable({...props}: VariableProps): JSX.Element {
+    props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-var")
+
+    return (
+        <BaseElement kind={"var"} {...props}/>
+    )
+}

yarn.lock

@@ -2036,7 +2036,7 @@
     prop-types "^15.7.2"
     regenerator-runtime "^0.13.7"
 
-"@storybook/addons@6.3.7", "@storybook/addons@^6.3.0":
+"@storybook/addons@6.3.7", "@storybook/addons@^6.3.0", "@storybook/addons@^6.3.7":
   version "6.3.7"
   resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.3.7.tgz#7c6b8d11b65f67b1884f6140437fe996dc39537a"
   integrity sha512-9stVjTcc52bqqh7YQex/LpSjJ4e2Czm4/ZYDjIiNy0p4OZEx+yLhL5mZzMWh2NQd6vv+pHASBSxf2IeaR5511A==
@@ -2562,7 +2562,7 @@
     shelljs "^0.8.1"
     yargs "^15.0.0"
 
-"@storybook/theming@6.3.7":
+"@storybook/theming@6.3.7", "@storybook/theming@^6.3.7":
   version "6.3.7"
   resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.3.7.tgz#6daf9a21b26ed607f3c28a82acd90c0248e76d8b"
   integrity sha512-GXBdw18JJd5jLLcRonAZWvGGdwEXByxF1IFNDSOYCcpHWsMgTk4XoLjceu9MpXET04pVX51LbVPLCvMdggoohg==