diff --git a/.storybook/BluelibTheme.js b/.storybook/BluelibTheme.js
new file mode 100644
index 0000000..c3bfc5a
--- /dev/null
+++ b/.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',
+})
diff --git a/.storybook/manager.js b/.storybook/manager.js
new file mode 100644
index 0000000..b23747a
--- /dev/null
+++ b/.storybook/manager.js
@@ -0,0 +1,7 @@
+import { addons } from '@storybook/addons';
+import BluelibTheme from "./BluelibTheme"
+
+// noinspection JSUnresolvedFunction
+addons.setConfig({
+ theme: BluelibTheme,
+});
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 2d67384..a6670cd 100644
--- a/.storybook/preview.js
+++ b/.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,
+ }
}
\ No newline at end of file
diff --git a/package.json b/package.json
index 74bc34d..8950427 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/semantics/Abbreviation.stories.jsx b/src/components/semantics/Abbreviation.stories.jsx
new file mode 100644
index 0000000..831e805
--- /dev/null
+++ b/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 => (
+ DOTA
+)
+Abbreviation.args = {
+ title: "Defense of the Ancients"
+}
diff --git a/src/components/semantics/Abbreviation.tsx b/src/components/semantics/Abbreviation.tsx
new file mode 100644
index 0000000..1e5a63c
--- /dev/null
+++ b/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 {
+ title: string,
+}
+
+
+export function Abbreviation({...props}: AbbreviationProps): JSX.Element {
+ props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-abbr")
+
+ return (
+
+ )
+}
diff --git a/src/components/semantics/BringAttention.stories.jsx b/src/components/semantics/BringAttention.stories.jsx
new file mode 100644
index 0000000..6065ae1
--- /dev/null
+++ b/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 => (
+ This is important.
+)
+BringAttention.args = {}
diff --git a/src/components/semantics/BringAttention.tsx b/src/components/semantics/BringAttention.tsx
new file mode 100644
index 0000000..ca67de2
--- /dev/null
+++ b/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 {}
+
+
+export function BringAttention({...props}: BringAttentionProps): JSX.Element {
+ props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-b")
+
+ return (
+
+ )
+}
diff --git a/src/components/semantics/Cite.stories.jsx b/src/components/semantics/Cite.stories.jsx
new file mode 100644
index 0000000..a341a91
--- /dev/null
+++ b/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 => (
+ --Steffo, 2021
+)
+Cite.args = {
+
+}
diff --git a/src/components/semantics/Cite.tsx b/src/components/semantics/Cite.tsx
new file mode 100644
index 0000000..c6270ec
--- /dev/null
+++ b/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 {}
+
+
+export function Cite({...props}: CiteProps): JSX.Element {
+ props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-cite")
+
+ return (
+
+ )
+}
diff --git a/src/components/semantics/Code.stories.jsx b/src/components/semantics/Code.stories.jsx
new file mode 100644
index 0000000..6c527f4
--- /dev/null
+++ b/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 => (
+ "Hello world!"
+)
+Code.args = {}
diff --git a/src/components/semantics/Code.tsx b/src/components/semantics/Code.tsx
new file mode 100644
index 0000000..e33da8b
--- /dev/null
+++ b/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 {}
+
+
+export function Code({...props}: CodeProps): JSX.Element {
+ props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-code")
+
+ return (
+
+ )
+}
diff --git a/src/components/semantics/Definition.stories.jsx b/src/components/semantics/Definition.stories.jsx
new file mode 100644
index 0000000..e247bd9
--- /dev/null
+++ b/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 => (
+ Term
+)
+Definition.args = {}
diff --git a/src/components/semantics/Definition.tsx b/src/components/semantics/Definition.tsx
new file mode 100644
index 0000000..56ee030
--- /dev/null
+++ b/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 {}
+
+
+export function Definition({...props}: DefinitionProps): JSX.Element {
+ props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-dfn")
+
+ return (
+
+ )
+}
diff --git a/src/components/semantics/Emphasis.stories.jsx b/src/components/semantics/Emphasis.stories.jsx
new file mode 100644
index 0000000..a18f798
--- /dev/null
+++ b/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 => (
+ This is really good.
+)
+Emphasis.args = {}
diff --git a/src/components/semantics/Emphasis.tsx b/src/components/semantics/Emphasis.tsx
new file mode 100644
index 0000000..808b192
--- /dev/null
+++ b/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 {}
+
+
+export function Emphasis({...props}: EmphasisProps): JSX.Element {
+ props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-em")
+
+ return (
+
+ )
+}
diff --git a/src/components/semantics/Mark.stories.jsx b/src/components/semantics/Mark.stories.jsx
new file mode 100644
index 0000000..2881e3d
--- /dev/null
+++ b/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 => (
+ Marco Function
+)
+Mark.args = {}
diff --git a/src/components/semantics/Mark.tsx b/src/components/semantics/Mark.tsx
new file mode 100644
index 0000000..72e0a1f
--- /dev/null
+++ b/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 {}
+
+
+export function Mark({...props}: MarkProps): JSX.Element {
+ props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-mark")
+
+ return (
+
+ )
+}
diff --git a/src/components/semantics/Quote.stories.jsx b/src/components/semantics/Quote.stories.jsx
new file mode 100644
index 0000000..c1ed4ae
--- /dev/null
+++ b/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 => (
+ Ho appena dichiarato guerra agli Stati Uniti per sbaglio!
+)
+Quote.args = {}
diff --git a/src/components/semantics/Quote.tsx b/src/components/semantics/Quote.tsx
new file mode 100644
index 0000000..93ddb3b
--- /dev/null
+++ b/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 {}
+
+
+export function Quote({...props}: QuoteProps): JSX.Element {
+ props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-q")
+
+ return (
+
+ )
+}
diff --git a/src/components/semantics/Sample.stories.jsx b/src/components/semantics/Sample.stories.jsx
new file mode 100644
index 0000000..f0a14fd
--- /dev/null
+++ b/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 => (
+ drwx------ 2 steffo steffo 4096 23 ago 05.06 Desktop
+)
+Sample.args = {}
diff --git a/src/components/semantics/Sample.tsx b/src/components/semantics/Sample.tsx
new file mode 100644
index 0000000..e216d39
--- /dev/null
+++ b/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 {}
+
+
+export function Sample({...props}: SampleProps): JSX.Element {
+ props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-samp")
+
+ return (
+
+ )
+}
diff --git a/src/components/semantics/Side.stories.jsx b/src/components/semantics/Side.stories.jsx
new file mode 100644
index 0000000..0f60fa3
--- /dev/null
+++ b/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 => (
+ This is a small, irrelevant, side comment.
+)
+Side.args = {}
diff --git a/src/components/semantics/Side.tsx b/src/components/semantics/Side.tsx
new file mode 100644
index 0000000..65b40e1
--- /dev/null
+++ b/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 {}
+
+
+export function Side({...props}: SideProps): JSX.Element {
+ props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-small")
+
+ return (
+
+ )
+}
diff --git a/src/components/semantics/Strikethrough.stories.jsx b/src/components/semantics/Strikethrough.stories.jsx
new file mode 100644
index 0000000..3b34c75
--- /dev/null
+++ b/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 => (
+ This is wrong.
+)
+Strikethrough.args = {}
diff --git a/src/components/semantics/Strikethrough.tsx b/src/components/semantics/Strikethrough.tsx
new file mode 100644
index 0000000..71ffcd5
--- /dev/null
+++ b/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 {}
+
+
+export function Strikethrough({...props}: StrikethroughProps): JSX.Element {
+ props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-s")
+
+ return (
+
+ )
+}
diff --git a/src/components/semantics/Strong.stories.jsx b/src/components/semantics/Strong.stories.jsx
new file mode 100644
index 0000000..99e6ca4
--- /dev/null
+++ b/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 => (
+ This is something of a strong importance!
+)
+Strong.args = {}
diff --git a/src/components/semantics/Strong.tsx b/src/components/semantics/Strong.tsx
new file mode 100644
index 0000000..c39681a
--- /dev/null
+++ b/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 {}
+
+
+export function Strong({...props}: StrongProps): JSX.Element {
+ props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-strong")
+
+ return (
+
+ )
+}
diff --git a/src/components/semantics/UAnnotation.stories.jsx b/src/components/semantics/UAnnotation.stories.jsx
new file mode 100644
index 0000000..b22d1f8
--- /dev/null
+++ b/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 => (
+ This text is annotated without any comment.
+)
+UAnnotation.args = {}
diff --git a/src/components/semantics/UAnnotation.tsx b/src/components/semantics/UAnnotation.tsx
new file mode 100644
index 0000000..ee2f905
--- /dev/null
+++ b/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 {}
+
+
+export function UAnnotation({...props}: UAnnotationProps): JSX.Element {
+ props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-u")
+
+ return (
+
+ )
+}
diff --git a/src/components/semantics/Variable.stories.jsx b/src/components/semantics/Variable.stories.jsx
new file mode 100644
index 0000000..d088553
--- /dev/null
+++ b/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 => (
+ let variable = 1
+)
+Variable.args = {}
diff --git a/src/components/semantics/Variable.tsx b/src/components/semantics/Variable.tsx
new file mode 100644
index 0000000..826a65e
--- /dev/null
+++ b/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 {}
+
+
+export function Variable({...props}: VariableProps): JSX.Element {
+ props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-var")
+
+ return (
+
+ )
+}
diff --git a/yarn.lock b/yarn.lock
index b71c077..8cca037 100644
--- a/yarn.lock
+++ b/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==