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

Create the base of the library

This commit is contained in:
Steffo 2021-08-16 19:10:23 +02:00
parent 9952291e17
commit 516f155ebe
Signed by: steffo
GPG key ID: 6965406171929D01
14 changed files with 1115 additions and 2142 deletions

3
.gitmodules vendored Normal file
View file

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

View file

@ -72,5 +72,9 @@
<option name="processLiterals" value="true" /> <option name="processLiterals" value="true" />
<option name="processComments" value="true" /> <option name="processComments" value="true" />
</inspection_tool> </inspection_tool>
<inspection_tool class="UnnecessaryLocalVariableJS" enabled="false" level="WARNING" enabled_by_default="false">
<option name="m_ignoreImmediatelyReturnedVariables" value="false" />
<option name="m_ignoreAnnotatedVariables" value="false" />
</inspection_tool>
</profile> </profile>
</component> </component>

8
.idea/modules.xml Normal file
View file

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

View file

@ -3,8 +3,13 @@
<component name="NewModuleRootManager" inherit-compiler-output="true"> <component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output /> <exclude-output />
<content url="file://$MODULE_DIR$"> <content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/build" /> <sourceFolder url="file://$MODULE_DIR$/public" type="java-resource" />
<sourceFolder url="file://$MODULE_DIR$/src" isTestSource="false" />
<excludeFolder url="file://$MODULE_DIR$/node_modules" />
<excludeFolder url="file://$MODULE_DIR$/.storybook" />
<excludeFolder url="file://$MODULE_DIR$/src/bluelib" />
</content> </content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" /> <orderEntry type="sourceFolder" forTests="false" />
</component> </component>
</module> </module>

View file

@ -2,22 +2,23 @@
"name": "bluelib-react", "name": "bluelib-react",
"version": "3.0.0", "version": "3.0.0",
"license": "AGPL-3.0-or-later", "license": "AGPL-3.0-or-later",
"dependencies": { "dependencies": {
"@testing-library/jest-dom": "^5.11.4", "@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0", "@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10", "@testing-library/user-event": "^12.1.10",
"@types/color": "^3.0.2",
"@types/jest": "^26.0.15", "@types/jest": "^26.0.15",
"@types/node": "^12.0.0", "@types/node": "^12.0.0",
"@types/react": "^17.0.0", "@types/react": "^17.0.0",
"@types/react-dom": "^17.0.0", "@types/react-dom": "^17.0.0",
"classnames": "^2.3.1",
"color": "^4.0.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
"typescript": "^4.1.2", "typescript": "^4.1.2",
"web-vitals": "^1.0.1" "web-vitals": "^1.0.1"
}, },
"devDependencies": { "devDependencies": {
"@storybook/addon-actions": "^6.3.7", "@storybook/addon-actions": "^6.3.7",
"@storybook/addon-essentials": "^6.3.7", "@storybook/addon-essentials": "^6.3.7",
@ -26,11 +27,9 @@
"@storybook/preset-create-react-app": "^3.2.0", "@storybook/preset-create-react-app": "^3.2.0",
"@storybook/react": "^6.3.7" "@storybook/react": "^6.3.7"
}, },
"resolutions": { "resolutions": {
"babel-loader": "8.1.0" "babel-loader": "8.1.0"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",
"build": "react-scripts build", "build": "react-scripts build",
@ -39,7 +38,6 @@
"storybook": "start-storybook -p 6006 -s public", "storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public" "build-storybook": "build-storybook -s public"
}, },
"browserslist": { "browserslist": {
"production": [ "production": [
">0.2%", ">0.2%",

View file

@ -1,10 +1,12 @@
import * as React from "react" import * as React from "react"
import * as ReactDOM from "react-dom" import * as ReactDOM from "react-dom"
import {Bluelib} from "./components/Bluelib";
import * as Colors from "./utils/Colors"
export default function Preview() { export default function Preview() {
return <> return <>
<div> <Bluelib theme={"hacker"} color={Colors.BuiltinColor.LIME} style={{minHeight: "100vh"}}>
This should work. This should work.
</div> </Bluelib>
</> </>
} }

View file

@ -0,0 +1,31 @@
import * as React from "react"
import * as ReactDOM from "react-dom"
import * as Types from "../types"
import * as Colors from "../utils/Colors"
import * as BluelibMapper from "../utils/BluelibMapper"
import classNames, {Argument as ClassNamesArgument} from "classnames"
export interface BaseElementProps {
kind: Types.ComponentKind,
bluelibClassNames?: Types.ClassNames,
color?: Colors.AnyColor,
[props: string]: any,
}
export function BaseElement({kind, bluelibClassNames, color, ...props}: BaseElementProps): JSX.Element {
// Set the Bluelib color
if(typeof color === "string") bluelibClassNames += ` ${color}`
else if(color) props.style = {...props.style, ...Colors.colorToBluelibStyle("color", color)}
// Map regular class names to module class names
bluelibClassNames = BluelibMapper.rootToModule(bluelibClassNames)
props.className = classNames(props.className, bluelibClassNames)
// Dynamically determine the element kind
const Kind = kind
return <Kind {...props}/>
}

1
src/bluelib Submodule

@ -0,0 +1 @@
Subproject commit 0d750fe8517e2a6595b94cde9f2d599cf9e31347

View file

@ -0,0 +1,91 @@
import * as React from "react"
import * as ReactDOM from "react-dom"
import * as Types from "../types"
import * as Colors from "../utils/Colors"
import {BaseElement} from "../abstract/BaseElement"
import PaperTheme from "../bluelib/src/targets/paper.module.css"
import RoyalBlueTheme from "../bluelib/src/targets/royalblue.module.css"
import HackerTheme from "../bluelib/src/targets/hacker.module.css"
import SophonTheme from "../bluelib/src/targets/sophon.module.css"
const BuiltinThemes = {
"paper": PaperTheme,
"royalblue": RoyalBlueTheme,
"hacker": HackerTheme,
"sophon": SophonTheme,
}
interface BluelibProps {
theme: "paper" | "royalblue" | "hacker" | "sophon",
backgroundColor?: Colors.CustomColor,
foregroundColor?: Colors.CustomColor,
accentColor?: Colors.CustomColor,
linkColor?: Colors.CustomColor,
brokenColor?: Colors.CustomColor,
visitedColor?: Colors.CustomColor,
downloadColor?: Colors.CustomColor,
redColor?: Colors.CustomColor,
orangeColor?: Colors.CustomColor,
yellowColor?: Colors.CustomColor,
limeColor?: Colors.CustomColor,
cyanColor?: Colors.CustomColor,
blueColor?: Colors.CustomColor,
magentaColor?: Colors.CustomColor,
grayColor?: Colors.CustomColor,
polarity?: number,
[extra: string]: any,
}
export function Bluelib({
theme,
backgroundColor,
foregroundColor,
accentColor,
linkColor,
brokenColor,
visitedColor,
downloadColor,
redColor,
orangeColor,
yellowColor,
limeColor,
cyanColor,
blueColor,
magentaColor,
grayColor,
polarity,
...props
}: BluelibProps): JSX.Element {
props.className += ` ${BuiltinThemes[theme]["bluelib"]}`
if(backgroundColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("background", backgroundColor)}
if(foregroundColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("foreground", foregroundColor)}
if(accentColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("accent", accentColor)}
if(linkColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("link", linkColor)}
if(brokenColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("broken", brokenColor)}
if(visitedColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("visited", visitedColor)}
if(downloadColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("download", downloadColor)}
if(redColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("red", redColor)}
if(orangeColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("orange", orangeColor)}
if(yellowColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("yellow", yellowColor)}
if(limeColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("lime", limeColor)}
if(cyanColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("cyan", cyanColor)}
if(blueColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("blue", blueColor)}
if(magentaColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("magenta", magentaColor)}
if(grayColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("gray", grayColor)}
if(polarity) props.style["--bluelib-polarity"] = polarity
return (
<BaseElement
kind={"div"}
bluelibClassNames={"bluelib"}
{...props}
/>
)
}

9
src/types.ts Normal file
View file

@ -0,0 +1,9 @@
import * as React from "react";
export type {Argument as ClassNames} from "classnames"
// export type IntrinsicComponentKind = JSX.IntrinsicElements
// export type FunctionComponentKind = (props: object) => JSX.Element
// export type ClassComponentKind = typeof React.Component
// export type ComponentKind = IntrinsicComponentKind | FunctionComponentKind | ClassComponentKind
export type ComponentKind = any

View file

@ -0,0 +1,18 @@
import classNames from "classnames"
import * as Types from "../types"
import Skeleton from "../bluelib/src/targets/skeleton.module.css"
/**
* Get the Bluelib module classNames given a string of root classNames.
*
* @param inputClassName - The root classNames.
*/
export function rootToModule(inputClassName: Types.ClassNames): string {
const flattenedClassName = classNames(inputClassName)
const flattenedClassNames: string[] = flattenedClassName.split(" ")
const skeletonClassNames: string[] = flattenedClassNames.map(value => Skeleton[value])
const skeletonClassName = classNames(skeletonClassNames)
return skeletonClassName
}

46
src/utils/Colors.ts Normal file
View file

@ -0,0 +1,46 @@
import Color from "color"
export type CustomColor = Color
/**
* The classNames of the colors builtin in Bluelib.
*/
export enum BuiltinColor {
RED = "color-red",
ORANGE = "color-orange",
YELLOW = "color-yellow",
LIME = "color-lime",
CYAN = "color-cyan",
BLUE = "color-blue",
MAGENTA = "color-magenta",
}
/**
* A bluelib color of any type, either builtin or custom.
*/
export type AnyColor = BuiltinColor | Color
/**
* Convert a {@link CustomColor} to an object containing the `--bluelib-${name}-r`, `--bluelib-${name}-g` and `--bluelib-${name}-b` properties, to be passed in
* a `style` prop.
*
* Will return `None` if the `color` parameter is falsy.
*
* @param name - The property "name", to be filled in the template string described above.
* @param color - The color to convert.
*/
export function colorToBluelibStyle(name: string, color?: CustomColor): {[key: string]: number} {
if(!color) {
return {}
}
const result: {[key: string]: number} = {}
result[`--bluelib-${name}-r`] = color.red()
result[`--bluelib-${name}-g`] = color.green()
result[`--bluelib-${name}-b`] = color.blue()
return result
}

3023
yarn.lock

File diff suppressed because it is too large Load diff