✨ Create the base of the library

.gitmodules

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

.idea/inspectionProfiles/Project_Default.xml

@@ -72,5 +72,9 @@
       <option name="processLiterals" value="true" />
       <option name="processComments" value="true" />
     </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>
 </component>

.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$/bluelib-react.iml" filepath="$PROJECT_DIR$/bluelib-react.iml" />
+    </modules>
+  </component>
+</project>

bluelib-react.iml

@@ -3,8 +3,13 @@
   <component name="NewModuleRootManager" inherit-compiler-output="true">
     <exclude-output />
     <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>
+    <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
   </component>
 </module>

package.json

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

src/Preview.tsx

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

src/abstract/BaseElement.tsx

@@ -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}/>
+}

src/bluelib

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

src/components/Bluelib.tsx

@@ -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}
+        />
+    )
+}

src/index.tsx

@@ -5,7 +5,7 @@ import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
   <React.StrictMode>
-    <Preview />
+    <Preview/>
   </React.StrictMode>,
   document.getElementById('react-root')
 );

src/types.ts

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

src/utils/BluelibMapper.ts

@@ -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
+}

src/utils/Colors.ts

@@ -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
+}