✨ Configure storybook and write first stories

.storybook/main.js

@@ -1,11 +1,12 @@
 module.exports = {
-  "stories": [
+    "stories": [
-    "../src/**/*.stories.mdx",
+        "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+        "../src/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
+    ],
-  "addons": [
+    "addons": [
-    "@storybook/addon-links",
+        "@storybook/addon-docs",
-    "@storybook/addon-essentials",
+        "@storybook/addon-links",
-    "@storybook/preset-create-react-app"
+        "@storybook/addon-essentials",
-  ]
+        "@storybook/preset-create-react-app",
+    ]
 }

package.json

@@ -3,6 +3,7 @@
   "version": "3.0.0",
   "license": "AGPL-3.0-or-later",
   "dependencies": {
+    "@storybook/addon-docs": "^6.3.7",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
@@ -12,7 +13,7 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "classnames": "^2.3.1",
-    "color": "^4.0.1",
+    "color": "https://github.com/Steffo99/color",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
@@ -35,7 +36,7 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "storybook": "start-storybook -p 6006 -s public",
+    "storybook": "start-storybook -p 30060 -s public",
     "build-storybook": "build-storybook -s public"
   },
   "browserslist": {

src/components/Bluelib.stories.jsx

@@ -0,0 +1,47 @@
+import * as React from "react"
+import * as ReactDOM from "react-dom"
+import {Bluelib, BluelibProps} from "./Bluelib"
+import Color from "color"
+
+
+export default {
+    component: Bluelib,
+    title: "Bluelib",
+}
+
+
+export const Paper = props => (
+    <Bluelib {...props}>
+        Hello world!
+    </Bluelib>
+)
+Paper.args = {
+    theme: "paper",
+}
+
+
+export const RoyalBlue = Paper.bind({})
+RoyalBlue.args = {
+    theme: "royalblue",
+}
+
+
+export const Hacker = Paper.bind({})
+Hacker.args = {
+    theme: "hacker",
+}
+
+
+export const Sophon = Paper.bind({})
+Sophon.args = {
+    theme: "sophon",
+}
+
+export const CustomRed = Paper.bind({})
+CustomRed.args = {
+    theme: "paper",
+    foregroundColor: Color("#ff0000"),
+    backgroundColor: Color("#ffcccc"),
+    accentColor: Color("#000000"),
+    polarity: -1,
+}

src/components/Bluelib.tsx

@@ -2,6 +2,7 @@ import * as React from "react"
 import * as ReactDOM from "react-dom"
 import * as Types from "../types"
 import * as Colors from "../utils/Colors"
+import mergeClassNames from "classnames"
 import {BaseElement} from "../abstract/BaseElement"
 import PaperTheme from "../bluelib/src/targets/paper.module.css"
 import RoyalBlueTheme from "../bluelib/src/targets/royalblue.module.css"
@@ -17,7 +18,7 @@ const BuiltinThemes = {
 }
 
 
-interface BluelibProps {
+export interface BluelibProps {
     theme: "paper" | "royalblue" | "hacker" | "sophon",
 
     backgroundColor?: Colors.CustomColor,
@@ -37,7 +38,7 @@ interface BluelibProps {
     grayColor?: Colors.CustomColor,
     polarity?: number,
 
-    [extra: string]: any,
+    [props: string]: any,
 }
 
 
@@ -62,7 +63,9 @@ export function Bluelib({
     ...props
 }: BluelibProps): JSX.Element {
 
-    props.className += ` ${BuiltinThemes[theme]["bluelib"]}`
+    props.className = mergeClassNames(props.className, BuiltinThemes[theme]["bluelib"])
+
+    console.debug(props.style)
 
     if(backgroundColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("background", backgroundColor)}
     if(foregroundColor) props.style = {...props.style, ...Colors.colorToBluelibStyle("foreground", foregroundColor)}

src/utils/Colors.ts

@@ -1,6 +1,6 @@
 import Color from "color"
 
-export type CustomColor = Color
+export type CustomColor = Color;
 
 /**
  * The classNames of the colors builtin in Bluelib.
@@ -19,7 +19,7 @@ export enum BuiltinColor {
 /**
  * A bluelib color of any type, either builtin or custom.
  */
-export type AnyColor = BuiltinColor | Color
+export type AnyColor = BuiltinColor | CustomColor
 
 
 /**

yarn.lock

@@ -1913,7 +1913,7 @@
     core-js "^3.8.2"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-docs@6.3.7":
+"@storybook/addon-docs@6.3.7", "@storybook/addon-docs@^6.3.7":
   version "6.3.7"
   resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-6.3.7.tgz#a7b8ff2c0baf85fc9cc1b3d71f481ec40499f3cc"
   integrity sha512-cyuyoLuB5ELhbrXgnZneDCHqNq1wSdWZ4dzdHy1E5WwLPEhLlD6INfEsm8gnDIb4IncYuzMhK3XYBDd7d3ijOg==
@@ -4870,10 +4870,9 @@ color@^3.0.0:
     color-convert "^1.9.3"
     color-string "^1.6.0"
 
-color@^4.0.1:
+"color@https://github.com/Steffo99/color":
   version "4.0.1"
-  resolved "https://registry.yarnpkg.com/color/-/color-4.0.1.tgz#21df44cd10245a91b1ccf5ba031609b0e10e7d67"
+  resolved "https://github.com/Steffo99/color#2f9e457a96a5ee694d4bc6a2f4bc544ff32426e1"
-  integrity sha512-rpZjOKN5O7naJxkH2Rx1sZzzBgaiWECc6BYXjeCE6kF0kcASJYbUq02u7JqIHwCb/j3NhV+QhRL2683aICeGZA==
   dependencies:
     color-convert "^2.0.1"
     color-string "^1.6.0"