1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-12-22 19:44:21 +00:00

Implement the new coloring system

This commit is contained in:
Steffo 2021-03-23 16:32:25 +01:00
parent 92da1e091a
commit 09034bb4a0
Signed by: steffo
GPG key ID: 6965406171929D01
26 changed files with 116 additions and 102 deletions

6
package-lock.json generated
View file

@ -1,13 +1,13 @@
{ {
"name": "bluelib", "name": "bluelib",
"version": "1.0.0", "version": "1.1.1",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "bluelib", "name": "bluelib",
"version": "1.0.0", "version": "1.1.1",
"license": "MIT", "license": "AGPL-3.0-or-later",
"dependencies": { "dependencies": {
"@babel/preset-env": "^7.12.11", "@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10", "@babel/preset-react": "^7.12.10",

View file

@ -1,6 +1,6 @@
{ {
"name": "bluelib", "name": "bluelib",
"version": "1.1.1", "version": "2.0.0",
"description": "React components for Bluelib", "description": "React components for Bluelib",
"readme": "README.md", "readme": "README.md",
"main": "lib/index.js", "main": "lib/index.js",

View file

@ -3,9 +3,9 @@ import PropTypes from "prop-types";
import useBluelibClassNames from "../../hooks/useBluelibClassNames"; import useBluelibClassNames from "../../hooks/useBluelibClassNames";
export default function Align({children, className, value}) { export default function Align({children, className, value, ...props}) {
return ( return (
<div className={useBluelibClassNames(`align-${value}`, className)}> <div className={useBluelibClassNames(`align-${value}`, className)} {...props}>
{children} {children}
</div> </div>
) )

View file

@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
export default function Anchor({children, className, href}) { export default function Anchor({children, className, href, ...props}) {
return ( return (
<a className={useBluelibClassNames(`element-anchor`, className)} href={href}> <a className={useBluelibClassNames(`element-anchor`, className)} href={href} {...props}>
{children} {children}
</a> </a>
) )

View file

@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
export default function Aside({children, className}) { export default function Aside({children, className, ...props}) {
return ( return (
<aside className={useBluelibClassNames("panel panel-box panel-aside", className)}> <aside className={useBluelibClassNames("panel panel-box panel-aside", className)} {...props}>
{children} {children}
</aside> </aside>
) )

View file

@ -4,13 +4,13 @@ import PropTypes from "prop-types";
import { Link, useMatch } from "@reach/router" import { Link, useMatch } from "@reach/router"
export default function BaseLink({children, className, href, disabled}) { export default function BaseLink({children, className, href, disabled, ...props}) {
const locationMatch = useMatch(href); const locationMatch = useMatch(href);
const activeClassNames = useBluelibClassNames("style-bold", className); const activeClassNames = useBluelibClassNames("style-bold", className);
if(locationMatch) { if(locationMatch) {
return ( return (
<span className={activeClassNames}> <span className={activeClassNames} {...props}>
{children} {children}
</span> </span>
) )
@ -19,7 +19,7 @@ export default function BaseLink({children, className, href, disabled}) {
const disabledClassNames = useBluelibClassNames("element-anchor status-disabled", className); const disabledClassNames = useBluelibClassNames("element-anchor status-disabled", className);
if(disabled) { if(disabled) {
return ( return (
<span className={disabledClassNames}> <span className={disabledClassNames} {...props}>
{children} {children}
</span> </span>
) )
@ -27,7 +27,7 @@ export default function BaseLink({children, className, href, disabled}) {
const enabledClassNames = useBluelibClassNames("element-anchor", className) const enabledClassNames = useBluelibClassNames("element-anchor", className)
return ( return (
<Link to={href} className={enabledClassNames}> <Link to={href} className={enabledClassNames} {...props}>
{children} {children}
</Link> </Link>
) )

View file

@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
export default function Blockquote({children, className}) { export default function Blockquote({children, className, ...props}) {
return ( return (
<blockquote className={useBluelibClassNames("panel panel-box panel-blockquote", className)}> <blockquote className={useBluelibClassNames("panel panel-box panel-blockquote", className)} {...props}>
{children} {children}
</blockquote> </blockquote>
) )

View file

@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
export default function Bold({children, className}) { export default function Bold({children, className, ...props}) {
return ( return (
<b className={useBluelibClassNames("style-bold", className)}> <b className={useBluelibClassNames("style-bold", className)} {...props}>
{children} {children}
</b> </b>
) )

View file

@ -1,23 +1,11 @@
import React from "react"; import React from "react";
import useBluelibClassNames from "../../hooks/useBluelibClassNames"; import useBluelibClassNames from "../../hooks/useBluelibClassNames";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import Color from "color";
import {isString} from "../../utils"
export default function Box({children, className, color}) { export default function Box({children, className, ...props}) {
let style = {}
if(color !== undefined) {
if(isString(color)) {
color = new Color(color)
}
style["--bluelib-color-r"] = color.red()
style["--bluelib-color-g"] = color.green()
style["--bluelib-color-b"] = color.blue()
}
return ( return (
<section className={useBluelibClassNames("panel panel-box", className)} style={style}> <section className={useBluelibClassNames("panel panel-box", className)} {...props}>
{children} {children}
</section> </section>
) )

View file

@ -5,7 +5,7 @@ import ContextCodeSkin from "../../contexts/ContextCodeSkin";
import stripIndent from "strip-indent"; import stripIndent from "strip-indent";
export default function Code({children, style, language, skin}) { export default function Code({children, style, language, skin, ...props}) {
let ctxLanguage = useContext(ContextCodeLanguage); let ctxLanguage = useContext(ContextCodeLanguage);
let ctxSkin = useContext(ContextCodeSkin); let ctxSkin = useContext(ContextCodeSkin);
@ -14,6 +14,7 @@ export default function Code({children, style, language, skin}) {
language={language ?? ctxLanguage} language={language ?? ctxLanguage}
style={skin ?? ctxSkin} style={skin ?? ctxSkin}
customStyle={style} customStyle={style}
{...props}
> >
{stripIndent(children).trim()} {stripIndent(children).trim()}
</SyntaxHighlighter> </SyntaxHighlighter>

View file

@ -1,52 +1,43 @@
Change the **color** of the contained text to one of the seven presets. Change the **bluelib color** of the contained elements.
The color is chosen through the `value` prop. The options are: The color can chosen through either the `builtin` prop or the `custom` prop.
- `red`
- `orange`
- `yellow`
- `lime`
- `cyan`
- `blue`
- `magenta`
By using the `builtin` prop, the color will automatically adapt itself to the theme. Possible builtin colors are:
- `"red"`
- `"orange"`
- `"yellow"`
- `"lime"`
- `"cyan"`
- `"blue"`
- `"magenta"`
- `"gray"`
By using the `custom` prop, the color will be the same for all themes, but you will be able to specify any color.
```jsx ```jsx
import Bluelib from "../Bluelib"; import Bluelib from "../Bluelib";
import Box from "../Box";
<Bluelib> <Bluelib>
<div> <div>
<Color value={"red"}> <Color builtin={"red"}>
<span>
Red Red
</span>
</Color> </Color>
</div> </div>
<div> <div>
<Color value={"orange"}> <Color builtin={"orange"}>
<Box>
Orange Orange
</Box>
</Color> </Color>
</div> </div>
<div> <div>
<Color value={"yellow"}> <Color custom={"#ffff00"}>
Yellow <Box>
</Color> Custom yellow
</div> </Box>
<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> </Color>
</div> </div>
</Bluelib> </Bluelib>

View file

@ -1,19 +1,51 @@
import React from "react"; import React, {Fragment} from "react"
import useBluelibClassNames from "../../hooks/useBluelibClassNames"; import useBluelibClassNames from "../../hooks/useBluelibClassNames";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import classNames from "classnames"
import color from "color"
export default function Color({children, className, value}) { export default function Color({children, builtin, custom}) {
if(builtin && custom) {
throw new Error("<Color> tags may only have one prop between `builtin` and `custom`.")
}
let extraClassName = "";
let extraStyle = {};
if(builtin !== undefined) {
extraClassName = useBluelibClassNames(`color-${builtin}`)
}
if(custom !== undefined) {
let c = color(custom);
extraStyle["--bluelib-color-r"] = c.red()
extraStyle["--bluelib-color-g"] = c.green()
extraStyle["--bluelib-color-b"] = c.blue()
}
console.log(`Builtin: ${builtin}${extraClassName}\nCustom: ${custom}${JSON.stringify(extraStyle)}`)
children = React.Children.map(children, child => {
if(!child.props) {
return child;
}
return React.cloneElement(child, {
className: classNames(child.props.className, extraClassName),
style: {...child.props.style, ...extraStyle},
})
})
return ( return (
<span className={useBluelibClassNames(`color-${value}`, className)}> <Fragment>
{children} {children}
</span> </Fragment>
) )
} }
Color.propTypes = { Color.propTypes = {
children: PropTypes.node, children: PropTypes.node,
className: PropTypes.string, builtin: PropTypes.oneOf(["red", "orange", "yellow", "lime", "cyan", "blue", "magenta", "gray"]),
value: PropTypes.oneOf(["red", "orange", "yellow", "lime", "cyan", "blue", "magenta", "gray"]), custom: PropTypes.string,
} }

View file

@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
export default function Help({children, className, text}) { export default function Help({children, className, text, ...props}) {
return ( return (
<abbr className={useBluelibClassNames("status-hoverable", className)} title={text}> <abbr className={useBluelibClassNames("status-hoverable", className)} title={text} {...props}>
{children} {children}
</abbr> </abbr>
) )

View file

@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
export default function Italic({children, className}) { export default function Italic({children, className, ...props}) {
return ( return (
<i className={useBluelibClassNames("style-italic", className)}> <i className={useBluelibClassNames("style-italic", className)} {...props}>
{children} {children}
</i> </i>
) )

View file

@ -4,9 +4,9 @@ import TeX from '@matejmazur/react-katex';
import PropTypes from "prop-types"; import PropTypes from "prop-types";
export default function LatexMath({children, block}) { export default function LatexMath({children, block, ...props}) {
return ( return (
<TeX math={children} block={block}/> <TeX math={children} block={block} {...props}/>
) )
} }

View file

@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
export default function ListItem({children, className}) { export default function ListItem({children, className, ...props}) {
return ( return (
<li className={useBluelibClassNames("element-list-item", className)}> <li className={useBluelibClassNames("element-list-item", className)} {...props}>
{children} {children}
</li> </li>
) )

View file

@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
export default function Main({children, className}) { export default function Main({children, className, ...props}) {
return ( return (
<main className={useBluelibClassNames("container-main", className)}> <main className={useBluelibClassNames("container-main", className)} {...props}>
{children} {children}
</main> </main>
) )

View file

@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
export default function Paragraph({children, className}) { export default function Paragraph({children, className, ...props}) {
return ( return (
<p className={useBluelibClassNames("element-paragraph", className)}> <p className={useBluelibClassNames("element-paragraph", className)} {...props}>
{children} {children}
</p> </p>
) )

View file

@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
export default function Separator({className}) { export default function Separator({className, ...props}) {
return ( return (
<hr className={useBluelibClassNames("element-separator", className)}/> <hr className={useBluelibClassNames("element-separator", className)} {...props}/>
) )
} }

View file

@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
export default function Size({children, className, value}) { export default function Size({children, className, value, ...props}) {
return ( return (
<span className={useBluelibClassNames(`size-${value}`, className)}> <span className={useBluelibClassNames(`size-${value}`, className)} {...props}>
{children} {children}
</span> </span>
) )

View file

@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
export default function Split({children, className}) { export default function Split({children, className, ...props}) {
return ( return (
<div className={useBluelibClassNames("panel panel-split", className)}> <div className={useBluelibClassNames("panel panel-split", className)} {...props}>
{children} {children}
</div> </div>
) )

View file

@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
export default function Spoiler({children, className}) { export default function Spoiler({children, className, ...props}) {
return ( return (
<div className={useBluelibClassNames("spoiler", className)}> <div className={useBluelibClassNames("spoiler", className)} {...props}>
{children} {children}
</div> </div>
) )

View file

@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
export default function Strike({children, className}) { export default function Strike({children, className, ...props}) {
return ( return (
<span className={useBluelibClassNames("style-strike", className)}> <span className={useBluelibClassNames("style-strike", className)} {...props}>
{children} {children}
</span> </span>
) )

View file

@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
export default function Title({children, className, size}) { export default function Title({children, className, size, ...props}) {
return ( return (
<div className={useBluelibClassNames(`element-title size-${size}`, className)}> <div className={useBluelibClassNames(`element-title size-${size}`, className)} {...props}>
{children} {children}
</div> </div>
) )

View file

@ -3,9 +3,9 @@ import useBluelibClassNames from "../../hooks/useBluelibClassNames";
import PropTypes from "prop-types"; import PropTypes from "prop-types";
export default function Underline({children, className}) { export default function Underline({children, className, ...props}) {
return ( return (
<u className={useBluelibClassNames("style-underline", className)}> <u className={useBluelibClassNames("style-underline", className)} {...props}>
{children} {children}
</u> </u>
) )

View file

@ -20,8 +20,10 @@ const EMOJIS = {
export default function VisualLog({children, level}) { export default function VisualLog({children, level}) {
return ( return (
<Color value={COLORS[level]}> <Color builtin={COLORS[level]}>
<span>
{EMOJIS[level]} {children} {EMOJIS[level]} {children}
</span>
</Color> </Color>
) )
} }