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==