✨ First commit (of this branch)

.babelrc.json

@@ -0,0 +1,6 @@
+{
+    "presets": [
+        "@babel/preset-react",
+        "@babel/preset-env"
+    ]
+}

.gitignore

@@ -0,0 +1,7 @@
+/coverage
+/demo/dist
+/es
+/lib
+/node_modules
+/umd
+npm-debug.log*

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "src/bluelib"]
+	path = src/bluelib
+	url = git@github.com:RYGhub/bluelib.git

.idea/.gitignore

@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
+# Editor-based HTTP Client requests
+/httpRequests/

.idea/bluelib-react3.iml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/src/bluelib" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,51 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="InconsistentLineSeparators" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
+    <inspection_tool class="JupyterPackageInspection" enabled="true" level="ERROR" enabled_by_default="true" />
+    <inspection_tool class="LessResolvedByNameOnly" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="LessUnresolvedMixin" enabled="true" level="ERROR" enabled_by_default="true" />
+    <inspection_tool class="LessUnresolvedVariable" enabled="true" level="ERROR" enabled_by_default="true" />
+    <inspection_tool class="LongLine" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
+    <inspection_tool class="MarkdownUnresolvedFileReference" enabled="false" level="WARNING" enabled_by_default="false" />
+    <inspection_tool class="PoetryPackageVersion" enabled="true" level="ERROR" enabled_by_default="true" />
+    <inspection_tool class="ProblematicWhitespace" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
+    <inspection_tool class="PyAbstractClassInspection" enabled="true" level="ERROR" enabled_by_default="true" />
+    <inspection_tool class="PyAttributeOutsideInitInspection" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="PyAugmentAssignmentInspection" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
+    <inspection_tool class="PyBroadExceptionInspection" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
+    <inspection_tool class="PyDocstringTypesInspection" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="PyDunderSlotsInspection" enabled="true" level="ERROR" enabled_by_default="true" />
+    <inspection_tool class="PyFinalInspection" enabled="true" level="ERROR" enabled_by_default="true" />
+    <inspection_tool class="PyFromFutureImportInspection" enabled="true" level="ERROR" enabled_by_default="true" />
+    <inspection_tool class="PyGlobalUndefinedInspection" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="PyInconsistentIndentationInspection" enabled="true" level="ERROR" enabled_by_default="true" />
+    <inspection_tool class="PyInterpreterInspection" enabled="true" level="ERROR" enabled_by_default="true" />
+    <inspection_tool class="PyMandatoryEncodingInspection" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
+    <inspection_tool class="PyMissingTypeHintsInspection" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
+    <inspection_tool class="PyNestedDecoratorsInspection" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="PyNoneFunctionAssignmentInspection" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="PyPackageRequirementsInspection" enabled="false" level="ERROR" enabled_by_default="false">
+      <option name="ignoredPackages">
+        <value>
+          <list size="0" />
+        </value>
+      </option>
+    </inspection_tool>
+    <inspection_tool class="PyRelativeImportInspection" enabled="true" level="WARNING" enabled_by_default="true" />
+    <inspection_tool class="PyReturnFromInitInspection" enabled="true" level="ERROR" enabled_by_default="true" />
+    <inspection_tool class="PySetFunctionToLiteralInspection" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
+    <inspection_tool class="PyStringFormatInspection" enabled="true" level="ERROR" enabled_by_default="true" />
+    <inspection_tool class="PyTrailingSemicolonInspection" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
+    <inspection_tool class="PyUnnecessaryBackslashInspection" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
+    <inspection_tool class="PyUnresolvedReferencesInspection" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
+    <inspection_tool class="RegExpAnonymousGroup" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
+    <inspection_tool class="RegExpEscapedMetaCharacter" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
+    <inspection_tool class="RegExpOctalEscape" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
+    <inspection_tool class="RegExpRedundantEscape" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
+    <inspection_tool class="RegExpRedundantNestedCharacterClass" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
+    <inspection_tool class="RegExpRepeatedSpace" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
+    <inspection_tool class="RegExpUnexpectedAnchor" enabled="true" level="ERROR" enabled_by_default="true" />
+    <inspection_tool class="ShellCheck" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

.idea/misc.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ClojureProjectResolveSettings">
+    <currentScheme>IDE</currentScheme>
+  </component>
+  <component name="ProjectRootManager" version="2" languageLevel="JDK_15" project-jdk-name="15" project-jdk-type="JavaSDK">
+    <output url="file://$PROJECT_DIR$/out" />
+  </component>
+</project>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/bluelib-react3.iml" filepath="$PROJECT_DIR$/.idea/bluelib-react3.iml" />
+    </modules>
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

.travis.yml

@@ -0,0 +1,16 @@
+sudo: false
+
+language: node_js
+node_js:
+  - 10
+
+before_install:
+  - npm install codecov.io coveralls
+
+after_success:
+  - cat ./coverage/lcov.info | ./node_modules/codecov.io/bin/codecov.io.js
+  - cat ./coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js
+
+branches:
+  only:
+    - master

CONTRIBUTING.md

@@ -0,0 +1,25 @@
+## Prerequisites
+
+[Node.js](http://nodejs.org/) >= 10 must be installed.
+
+## Installation
+
+- Running `npm install` in the component's root directory will install everything you need for development.
+
+## Demo Development Server
+
+- `npm start` will run a development server with the component's demo app at [http://localhost:3000](http://localhost:3000) with hot module reloading.
+
+## Running Tests
+
+- `npm test` will run the tests once.
+
+- `npm run test:coverage` will run the tests and produce a coverage report in `coverage/`.
+
+- `npm run test:watch` will run the tests on every change.
+
+## Building
+
+- `npm run build` will build the component for publishing to npm and also bundle the demo app.
+
+- `npm run clean` will delete built resources.

README.md

@@ -0,0 +1,16 @@
+# bluelib-react3
+
+[![Travis][build-badge]][build]
+[![npm package][npm-badge]][npm]
+[![Coveralls][coveralls-badge]][coveralls]
+
+Describe bluelib-react3 here.
+
+[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
+[build]: https://travis-ci.org/user/repo
+
+[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
+[npm]: https://www.npmjs.org/package/npm-package
+
+[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
+[coveralls]: https://coveralls.io/github/user/repo

demo/src/index.js

@@ -0,0 +1,15 @@
+import React, {Component} from 'react'
+import {render} from 'react-dom'
+
+import Example from '../../src'
+
+export default class Demo extends Component {
+  render() {
+    return <div>
+      <h1>bluelib-react3 Demo</h1>
+      <Example/>
+    </div>
+  }
+}
+
+render(<Demo/>, document.querySelector('#demo'))

nwb.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  type: 'react-component',
+  npm: {
+    esModules: true,
+    umd: {
+      global: 'bluelibreact',
+      externals: {
+        react: 'React'
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,43 @@
+{
+    "name": "bluelib",
+    "version": "0.22.0",
+    "description": "React components for Bluelib",
+    "main": "lib/index.js",
+    "module": "es/index.js",
+    "files": [
+        "css",
+        "es",
+        "lib",
+        "umd"
+    ],
+    "scripts": {
+        "build": "nwb build-react-component",
+        "prepublishOnly": "npm run build",
+        "start": "styleguidist server"
+    },
+    "dependencies": {
+        "classnames": "^2.2.6",
+        "mathjax-react": "^1.0.6",
+        "prop-types": "^15.7.2",
+        "react-syntax-highlighter": "^15.4.3",
+        "strip-indent": "^3.0.0",
+        "@babel/preset-env": "^7.12.11",
+        "@babel/preset-react": "^7.12.10",
+        "react": "^17.0.1",
+        "react-dom": "^17.0.1"
+    },
+    "peerDependencies": {
+        "react": "16.x"
+    },
+    "devDependencies": {
+        "nwb": "0.25.x",
+        "react-styleguidist": "^11.1.5"
+    },
+    "author": "",
+    "homepage": "",
+    "license": "MIT",
+    "repository": "",
+    "keywords": [
+        "react-component"
+    ]
+}

src/bluelib

@@ -0,0 +1 @@
+Subproject commit 8d5def76c320e2f4c90d777638376e6a779e68e3

src/components/Align/Readme.md

@@ -0,0 +1,17 @@
+Align text horizontally.
+
+```jsx
+import Bluelib from "../Bluelib";
+
+<Bluelib>
+    <Align value={"left"}>
+        Left
+    </Align>
+    <Align value={"center"}>
+        Center
+    </Align>
+    <Align value={"right"}>
+        Right
+    </Align>
+</Bluelib>
+```

src/components/Align/index.js

@@ -0,0 +1,19 @@
+import React from "react";
+import PropTypes from "prop-types";
+import useBluelibClassNames from "../../hooks/useBluelibClassNames";
+
+
+export default function Align({children, className, value}) {
+    return (
+        <div className={useBluelibClassNames(`align-${value}`, className)}>
+            {children}
+        </div>
+    )
+}
+
+
+Align.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    value: PropTypes.oneOf(["left", "center", "right"])
+}

src/components/Anchor/Readme.md

@@ -0,0 +1,11 @@
+An anchor, very similar to the `<a>` element.
+
+```jsx
+import Bluelib from "../Bluelib";
+
+<Bluelib>
+    <Anchor href={"https://example.org"}>
+        Go to example.org!
+    </Anchor>
+</Bluelib>
+```

src/components/Anchor/index.js

@@ -0,0 +1,19 @@
+import React from "react";
+import useBluelibClassNames from "../../hooks/useBluelibClassNames";
+import PropTypes from "prop-types";
+
+
+export default function Anchor({children, className, href}) {
+    return (
+        <a className={useBluelibClassNames("element-anchor", className)} href={href}>
+            {children}
+        </a>
+    )
+}
+
+
+Anchor.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    href: PropTypes.string,
+}

src/components/Aside/Readme.md

@@ -0,0 +1,11 @@
+A **panel** having no border and having smaller text than normal.
+
+```jsx
+import Bluelib from "../Bluelib";
+
+<Bluelib>
+    <Aside>
+        Ciao!
+    </Aside>
+</Bluelib>
+```

src/components/Aside/index.js

@@ -0,0 +1,18 @@
+import React from "react";
+import useBluelibClassNames from "../../hooks/useBluelibClassNames";
+import PropTypes from "prop-types";
+
+
+export default function Aside({children, className}) {
+    return (
+        <aside className={useBluelibClassNames("panel panel-aside", className)}>
+            {children}
+        </aside>
+    )
+}
+
+
+Aside.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+}

src/components/Blockquote/Readme.md

@@ -0,0 +1,11 @@
+A **panel** having a border only on the left side.
+
+```jsx
+import Bluelib from "../Bluelib";
+
+<Bluelib>
+    <Blockquote>
+        Ciao!
+    </Blockquote>
+</Bluelib>
+```

src/components/Blockquote/index.js

@@ -0,0 +1,18 @@
+import React from "react";
+import useBluelibClassNames from "../../hooks/useBluelibClassNames";
+import PropTypes from "prop-types";
+
+
+export default function Blockquote({children, className}) {
+    return (
+        <blockquote className={useBluelibClassNames("panel panel-blockquote", className)}>
+            {children}
+        </blockquote>
+    )
+}
+
+
+Blockquote.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+}

src/components/Bluelib/BluelibContainer/Readme.md

@@ -0,0 +1 @@
+A `<div>` which enables Bluelib CSS for all components inside.

src/components/Bluelib/BluelibContainer/index.js

@@ -0,0 +1,18 @@
+import React from "react";
+import useBluelibClassNames from "../../../hooks/useBluelibClassNames";
+import PropTypes from "prop-types";
+
+
+export default function BluelibContainer({children, className}) {
+    return (
+        <div className={useBluelibClassNames("bluelib", className)}>
+            {children}
+        </div>
+    )
+}
+
+
+BluelibContainer.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+}

src/components/Bluelib/BluelibProvider/Readme.md

@@ -0,0 +1,6 @@
+A provider for the `ContextBluelibSkin` context.
+
+A skin can be selected by passing either a CSS module or a string to the `skin` prop.
+
+Valid strings are:
+- `"rygblue"`

src/components/Bluelib/BluelibProvider/index.js

@@ -0,0 +1,31 @@
+import React from "react";
+
+import skinRygblue from "../../../bluelib/src/skins/rygblue/rygblue.module.css";
+import ContextBluelibSkin from "../../../contexts/ContextBluelibSkin";
+import isString from "../../../utils/isString";
+import PropTypes from "prop-types";
+
+
+const builtinSkins = {
+    "rygblue": skinRygblue
+}
+
+
+export default function BluelibProvider({skin, children}) {
+    // If the skin is a string, try to get the corresponding builtin skin
+    if(isString(skin)) {
+        skin = builtinSkins[skin]
+    }
+
+    return (
+        <ContextBluelibSkin.Provider value={skin}>
+            {children}
+        </ContextBluelibSkin.Provider>
+    )
+}
+
+
+BluelibProvider.propTypes = {
+    skin: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    children: PropTypes.node,
+}

src/components/Bluelib/Readme.md

@@ -0,0 +1,15 @@
+The main component for Bluelib, composed by a [`<BluelibContainer>`](#bluelibcontainer) and a 
+[`<BluelibProvider>`](#bluelibprovider).
+
+**Bluelib components won't work unless they're inside a `<Bluelib>` component!**
+
+A skin can be selected by passing either a CSS module or a string to the `skin` prop.
+
+Valid strings are:
+- `"rygblue"`
+
+```jsx
+<Bluelib skin={"rygblue"}>
+    Ciao!
+</Bluelib>
+```

src/components/Bluelib/index.js

@@ -0,0 +1,22 @@
+import React from "react";
+import BluelibProvider from "./BluelibProvider";
+import BluelibContainer from "./BluelibContainer";
+import PropTypes from "prop-types";
+
+
+export default function Bluelib({className, children, skin}) {
+    return (
+        <BluelibProvider skin={skin}>
+            <BluelibContainer className={className}>
+                {children}
+            </BluelibContainer>
+        </BluelibProvider>
+    )
+}
+
+
+Bluelib.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    skin: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+}

src/components/Bold/Readme.md

@@ -0,0 +1,9 @@
+Makes the text bold (like a `<b>` element), while applying bold styles from the selected bluelib skin.
+
+```jsx
+import Bluelib from "../Bluelib";
+
+<Bluelib>
+    To <Bold>boldly</Bold> go where no library has gone before!
+</Bluelib>
+```

src/components/Bold/index.js

@@ -0,0 +1,18 @@
+import React from "react";
+import useBluelibClassNames from "../../hooks/useBluelibClassNames";
+import PropTypes from "prop-types";
+
+
+export default function Bold({children, className}) {
+    return (
+        <b className={useBluelibClassNames("style-bold", className)}>
+            {children}
+        </b>
+    )
+}
+
+
+Bold.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+}

src/components/Box/Readme.md

@@ -0,0 +1,11 @@
+The default **panel**, with rounded borders on all sides.
+
+```jsx
+import Bluelib from "../Bluelib";
+
+<Bluelib>
+    <Box>
+        Ciao!
+    </Box>
+</Bluelib>
+```

src/components/Box/index.js

@@ -0,0 +1,18 @@
+import React from "react";
+import useBluelibClassNames from "../../hooks/useBluelibClassNames";
+import PropTypes from "prop-types";
+
+
+export default function Box({children, className}) {
+    return (
+        <section className={useBluelibClassNames("panel panel-box", className)}>
+            {children}
+        </section>
+    )
+}
+
+
+Box.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+}

src/components/Code/Readme.md

@@ -0,0 +1,14 @@
+A **code block** which strips excess indentation and applies syntax highlighting.
+
+> Appearently explodes if `String.raw` is used. Wat?
+
+```jsx
+import {atomOneLight} from "react-syntax-highlighter/dist/cjs/styles/hljs";
+
+<Code language={"python"} skin={atomOneLight}>
+    {`
+        def hello():
+            print("Hello world!")
+    `}
+</Code>
+```

src/components/Code/index.js

@@ -0,0 +1,21 @@
+import React, {useContext} from "react";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import ContextCodeLanguage from "../../contexts/ContextCodeLanguage";
+import ContextCodeSkin from "../../contexts/ContextCodeSkin";
+import stripIndent from "strip-indent";
+
+
+export default function Code({children, style, language, skin}) {
+    let ctxLanguage = useContext(ContextCodeLanguage);
+    let ctxSkin = useContext(ContextCodeSkin);
+
+    return (
+        <SyntaxHighlighter
+            language={language ?? ctxLanguage}
+            style={skin ?? ctxSkin}
+            customStyle={style}
+        >
+            {stripIndent(children).trim()}
+        </SyntaxHighlighter>
+    )
+}

src/components/Color/Readme.md

@@ -0,0 +1,53 @@
+Change the **color** of the contained text to one of the seven presets.
+
+The color is chosen through the `value` prop. The options are:
+- `red`
+- `orange`
+- `yellow`
+- `lime`
+- `cyan`
+- `blue`
+- `magenta`
+
+
+```jsx
+import Bluelib from "../Bluelib";
+
+<Bluelib>
+    <div>
+        <Color value={"red"}>
+            Red
+        </Color>
+    </div>
+    <div>
+        <Color value={"orange"}>
+            Orange
+        </Color>
+    </div>
+    <div>
+        <Color value={"yellow"}>
+            Yellow
+        </Color>
+    </div>
+    <div>
+        <Color value={"lime"}>
+            Lime
+        </Color>
+    </div>
+    <div>
+        <Color value={"cyan"}>
+            Cyan
+        </Color>
+    </div>
+    <div>
+        <Color value={"blue"}>
+            Blue
+        </Color>
+    </div>
+    <div>
+        <Color value={"magenta"}>
+            Magenta
+        </Color>
+    </div>
+</Bluelib>
+```

src/components/Color/index.js

@@ -0,0 +1,19 @@
+import React from "react";
+import useBluelibClassNames from "../../hooks/useBluelibClassNames";
+import PropTypes from "prop-types";
+
+
+export default function Color({children, className, value}) {
+    return (
+        <span className={useBluelibClassNames(`color-${value}`, className)}>
+            {children}
+        </span>
+    )
+}
+
+
+Color.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    value: PropTypes.oneOf(["red", "orange", "yellow", "lime", "cyan", "blue", "magenta"]),
+}

src/components/Help/Readme.md

@@ -0,0 +1,13 @@
+Display a **tooltip** when the mouse is hovering the component.
+
+**Doesn't work on mobile!**
+
+```jsx
+import Bluelib from "../Bluelib";
+
+<Bluelib>
+    <Help text={"General Kenobi!"}>
+        Hello there!
+    </Help>
+</Bluelib>
+```

src/components/Help/index.js

@@ -0,0 +1,19 @@
+import React from "react";
+import useBluelibClassNames from "../../hooks/useBluelibClassNames";
+import PropTypes from "prop-types";
+
+
+export default function Help({children, className, text}) {
+    return (
+        <abbr className={useBluelibClassNames("status-hoverable", className)} title={text}>
+            {children}
+        </abbr>
+    )
+}
+
+
+Help.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    text: PropTypes.string,
+}

src/components/Italic/Readme.md

@@ -0,0 +1,9 @@
+Makes the text italic (like a `<i>` element), while applying italic styles from the selected bluelib skin.
+
+```jsx
+import Bluelib from "../Bluelib";
+
+<Bluelib>
+    Welcome to <Italic>Italy</Italic>!
+</Bluelib>
+```

src/components/Italic/index.js

@@ -0,0 +1,18 @@
+import React from "react";
+import useBluelibClassNames from "../../hooks/useBluelibClassNames";
+import PropTypes from "prop-types";
+
+
+export default function Italic({children, className}) {
+    return (
+        <i className={useBluelibClassNames("style-italic", className)}>
+            {children}
+        </i>
+    )
+}
+
+
+Italic.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+}

src/components/LatexMath/Readme.md

@@ -0,0 +1,16 @@
+Render a Latex math string.
+
+It can be displayed in block format by setting the `block` prop to `true`.
+
+```jsx
+
+<div>
+    <p>
+        You can calculate the volume of a sphere with:
+    </p>
+    <LatexMath block={true}>{`\\frac{4}{3} \\pi r^3`}</LatexMath>
+    <p>
+        (Don't confuse it with the area, which is <LatexMath>{`4 \\pi r^2`}</LatexMath>!)
+    </p>
+</div>
+```

src/components/LatexMath/index.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { MathComponent } from 'mathjax-react'
+import PropTypes from "prop-types";
+
+
+export default function LatexMath({children, block}) {
+    return (
+        <MathComponent tex={children} display={block ?? false}/>
+    )
+}
+
+
+LatexMath.propTypes = {
+    children: PropTypes.node,
+    block: PropTypes.bool
+}

src/components/ListItem/Readme.md

@@ -0,0 +1,15 @@
+A **list element**, similar to the `<li>` element.
+
+```jsx
+import Bluelib from "../Bluelib";
+
+const LI = ListItem;
+
+<Bluelib>
+    <ul>
+        <LI>First</LI>
+        <LI>Second</LI>
+        <LI>Third</LI>
+    </ul>
+</Bluelib>
+```

src/components/ListItem/index.js

@@ -0,0 +1,18 @@
+import React from "react";
+import useBluelibClassNames from "../../hooks/useBluelibClassNames";
+import PropTypes from "prop-types";
+
+
+export default function ListItem({children, className}) {
+    return (
+        <li className={useBluelibClassNames("element-list-item", className)}>
+            {children}
+        </li>
+    )
+}
+
+
+ListItem.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+}

src/components/Main/Readme.md

@@ -0,0 +1,7 @@
+The "main view" for a bluelib-based page. The width is limited to `1280px`.
+
+```jsx
+<Main>
+    Hello world!
+</Main>
+```

src/components/Main/index.js

@@ -0,0 +1,18 @@
+import React from "react";
+import useBluelibClassNames from "../../hooks/useBluelibClassNames";
+import PropTypes from "prop-types";
+
+
+export default function Main({children, className}) {
+    return (
+        <main className={useBluelibClassNames("container-main", className)}>
+            {children}
+        </main>
+    )
+}
+
+
+Main.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+}

src/components/Paragraph/Readme.md

@@ -0,0 +1,13 @@
+A **paragraph**, similar to the `<p>` element.
+
+```jsx
+import Bluelib from "../Bluelib";
+
+const P = Paragraph;
+
+<Bluelib>
+    <P>
+        Text goes here.
+    </P>
+</Bluelib>
+```

src/components/Paragraph/index.js

@@ -0,0 +1,18 @@
+import React from "react";
+import useBluelibClassNames from "../../hooks/useBluelibClassNames";
+import PropTypes from "prop-types";
+
+
+export default function Paragraph({children, className}) {
+    return (
+        <p className={useBluelibClassNames("element-paragraph", className)}>
+            {children}
+        </p>
+    )
+}
+
+
+Paragraph.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+}

src/components/Separator/Readme.md

@@ -0,0 +1,9 @@
+A **horizontal line**, similar to the `<hr>` element.
+
+```jsx
+import Bluelib from "../Bluelib";
+
+<Bluelib>
+    <Separator/>
+</Bluelib>
+```

src/components/Separator/index.js

@@ -0,0 +1,16 @@
+import React from "react";
+import useBluelibClassNames from "../../hooks/useBluelibClassNames";
+import PropTypes from "prop-types";
+
+
+export default function Separator({className}) {
+    return (
+        <hr className={useBluelibClassNames("element-separator", className)}/>
+    )
+}
+
+
+Separator.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+}

src/components/Size/Readme.md

@@ -0,0 +1,18 @@
+Change the **size** of the contained text.
+
+The size can be configured with the `value` prop:
+- `xxl`
+- `xl`
+- `l`
+- `m`
+- `s`
+- `xs`
+- `xxs`
+
+```jsx
+import Bluelib from "../Bluelib";
+
+<Bluelib>
+    Hey, that's a <Size value={"xxl"}>BIG CHUNGUS</Size>!
+</Bluelib>
+```

src/components/Size/index.js

@@ -0,0 +1,19 @@
+import React from "react";
+import useBluelibClassNames from "../../hooks/useBluelibClassNames";
+import PropTypes from "prop-types";
+
+
+export default function Size({children, className, value}) {
+    return (
+        <span className={useBluelibClassNames(`size-${value}`, className)}>
+            {children}
+        </span>
+    )
+}
+
+
+Size.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    value: PropTypes.oneOf(["xxl", "xl", "l", "m", "s", "xs", "xxs"])
+}

src/components/Split/Readme.md

@@ -0,0 +1,48 @@
+A **panel** which splits horizontally the contained panels into multiple columns of the same size (if possible). 
+
+```jsx
+import Bluelib from "../Bluelib";
+import Box from "./index";
+
+<Bluelib>
+    <Box>
+        1 / 1
+    </Box>
+    
+    <Split>
+        <Box>
+            1 / 2
+        </Box>
+        <Box>
+            2 / 2
+        </Box>
+    </Split>
+    
+    <Split>
+        <Box>
+            1 / 3
+        </Box>
+        <Box>
+            2 / 3
+        </Box>
+        <Box>
+            3 / 3
+        </Box>        
+    </Split>
+    
+    <Split>
+        <Box>
+            1 / 4
+        </Box>
+        <Box>
+            2 / 4
+        </Box>
+        <Box>
+            3 / 4
+        </Box>
+        <Box>
+            4 / 4
+        </Box>
+    </Split>
+</Bluelib>
+```

src/components/Split/index.js

@@ -0,0 +1,18 @@
+import React from "react";
+import useBluelibClassNames from "../../hooks/useBluelibClassNames";
+import PropTypes from "prop-types";
+
+
+export default function Split({children, className}) {
+    return (
+        <div className={useBluelibClassNames("panel panel-split", className)}>
+            {children}
+        </div>
+    )
+}
+
+
+Split.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+}

src/components/Spoiler/Readme.md

@@ -0,0 +1,22 @@
+Hides its contents until the mouse is over the element.
+
+```jsx
+import Bluelib from "../Bluelib";
+import Box from "./index";
+import Split from "./index";
+
+<Bluelib>
+    <Split>
+        <Box>
+            <Spoiler>
+                Only the text is hidden.
+            </Spoiler>
+        </Box>
+        <Spoiler>
+            <Box>
+                The whole box is hidden!
+            </Box>
+        </Spoiler>
+    </Split>
+</Bluelib>
+```

src/components/Spoiler/index.js

@@ -0,0 +1,18 @@
+import React from "react";
+import useBluelibClassNames from "../../hooks/useBluelibClassNames";
+import PropTypes from "prop-types";
+
+
+export default function Spoiler({children, className}) {
+    return (
+        <div className={useBluelibClassNames("spoiler", className)}>
+            {children}
+        </div>
+    )
+}
+
+
+Spoiler.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+}

src/components/Strike/Readme.md

@@ -0,0 +1,9 @@
+**Strike** a line through the text contained in the element.
+
+```jsx
+import Bluelib from "../Bluelib";
+
+<Bluelib>
+    Bluelib is <Strike>terrible</Strike> amazing!
+</Bluelib>
+```

src/components/Strike/index.js

@@ -0,0 +1,18 @@
+import React from "react";
+import useBluelibClassNames from "../../hooks/useBluelibClassNames";
+import PropTypes from "prop-types";
+
+
+export default function Strike({children, className}) {
+    return (
+        <span className={useBluelibClassNames("style-strike", className)}>
+            {children}
+        </span>
+    )
+}
+
+
+Strike.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+}

src/components/Table/Readme.md

@@ -0,0 +1,26 @@
+A **panel** which is rendered like a `<table>` element.
+
+```jsx
+import Bluelib from "../Bluelib";
+
+<Bluelib>
+    <Table>
+        <thead>
+            <tr>
+                <th>Column 1</th>
+                <th>Column 2</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>A</td>
+                <td>B</td>
+            </tr>
+            <tr>
+                <td>C</td>
+                <td>D</td>
+            </tr>
+        </tbody>
+    </Table>
+</Bluelib>
+```

src/components/Table/index.js

@@ -0,0 +1,18 @@
+import React from "react";
+import useBluelibClassNames from "../../hooks/useBluelibClassNames";
+import PropTypes from "prop-types";
+
+
+export default function Table({children, className}) {
+    return (
+        <table className={useBluelibClassNames("panel panel-table", className)}>
+            {children}
+        </table>
+    )
+}
+
+
+Table.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+}

src/components/Title/Readme.md

@@ -0,0 +1,38 @@
+Format the text like a **title**, changing its font and centering it.
+
+The size can be configured with the `size` prop:
+- `xxl`
+- `xl` (equivalent to `<h1>` and `<h2>`)
+- `l` (equivalent to `<h3>`)
+- `m` (equivalent to `<h4>` and regular text)
+- `s` (equivalent to `<h5>`)
+- `xs` (equivalent to `<h6>`)
+- `xxs`
+
+```jsx
+import Bluelib from "../Bluelib";
+
+<Bluelib>
+    <Title size={"xxl"}>
+        First title
+    </Title>
+    <Title size={"xl"}>
+        Second title
+    </Title>
+    <Title size={"l"}>
+        Third title
+    </Title>
+    <Title size={"m"}>
+        Fourth title
+    </Title>
+    <Title size={"s"}>
+        Fifth title
+    </Title>
+    <Title size={"xs"}>
+        Sixth title
+    </Title>
+    <Title size={"xxs"}>
+        Seventh title
+    </Title>
+</Bluelib>
+```

src/components/Title/index.js

@@ -0,0 +1,19 @@
+import React from "react";
+import useBluelibClassNames from "../../hooks/useBluelibClassNames";
+import PropTypes from "prop-types";
+
+
+export default function Title({children, className, size}) {
+    return (
+        <div className={useBluelibClassNames(`element-title size-${size}`, className)}>
+            {children}
+        </div>
+    )
+}
+
+
+Title.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    size: PropTypes.oneOf(["xxl", "xl", "l", "m", "s", "xs", "xxs"])
+}

src/components/Underline/Readme.md

@@ -0,0 +1,9 @@
+**Underline** the contained text, like a `<u>` element.
+
+```jsx
+import Bluelib from "../Bluelib";
+
+<Bluelib>
+    There something <Underline>under here</Underline>!
+</Bluelib>
+```

src/components/Underline/index.js

@@ -0,0 +1,18 @@
+import React from "react";
+import useBluelibClassNames from "../../hooks/useBluelibClassNames";
+import PropTypes from "prop-types";
+
+
+export default function Underline({children, className}) {
+    return (
+        <u className={useBluelibClassNames("style-underline", className)}>
+            {children}
+        </u>
+    )
+}
+
+
+Underline.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+}

src/contexts/ContextBluelibSkin.js

@@ -0,0 +1,4 @@
+import {createContext} from "react";
+
+
+export default createContext(null);

src/contexts/ContextCodeLanguage.js

@@ -0,0 +1,4 @@
+import {createContext} from "react";
+
+
+export default createContext("plaintext");

src/contexts/ContextCodeSkin.js

@@ -0,0 +1,5 @@
+import {createContext} from "react";
+import {tomorrowNightBlue} from "react-syntax-highlighter/dist/cjs/styles/hljs";
+
+
+export default createContext(tomorrowNightBlue);

src/hooks/useBluelibClassNames.js

@@ -0,0 +1,21 @@
+import {useContext} from "react";
+import contextBluelibSkin from "../contexts/ContextBluelibSkin";
+import classNames from "classnames";
+
+import skeleton from "../bluelib/src/skeleton/skeleton.module.css";
+
+
+export default function useBluelibClassNames(cn, extra) {
+    const bluelibSkin = useContext(contextBluelibSkin);
+
+    // Split class names
+    cn = cn.split(" ");
+
+    // Get bluelib skeleton and skin class names
+    cn = cn.map(c => {
+        return classNames(skeleton[c], bluelibSkin ? bluelibSkin[c] : null)
+    });
+
+    // Return all the class names
+    return classNames(...cn, extra);
+}

src/index.js

@@ -0,0 +1,9 @@
+import React, {Component} from 'react'
+
+export default class extends Component {
+  render() {
+    return <div>
+      <h2>Welcome to React components</h2>
+    </div>
+  }
+}

src/utils/isString.js

@@ -0,0 +1,4 @@
+export default function isString(obj) {
+    // https://stackoverflow.com/a/7772724/4334568
+    return typeof(obj) === "string" || obj instanceof String
+}

styleguide.config.js

@@ -0,0 +1,26 @@
+module.exports = {
+    webpackConfig: {
+        module: {
+            rules: [
+                {
+                    test: /[.]jsx?$/,
+                    exclude: /node_modules/,
+                    loader: "babel-loader"
+                },
+                {
+                    test: /[.]css$/,
+                    use: [
+                        "style-loader",
+                        {
+                            loader: 'css-loader',
+                            options: {
+                                importLoaders: 1,
+                                modules: true
+                            }
+                        }
+                    ]
+                }
+            ]
+        }
+    }
+}