From 99d2a420c33fdfb2491fef266dbbc1bd80a425dd Mon Sep 17 00:00:00 2001 From: Stefano Pigozzi Date: Tue, 17 Aug 2021 16:05:59 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Configure=20storybook=20and=20write?= =?UTF-8?q?=20first=20stories?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/main.js | 19 ++++++------ package.json | 5 ++-- src/components/Bluelib.stories.jsx | 47 ++++++++++++++++++++++++++++++ src/components/Bluelib.tsx | 9 ++++-- src/utils/Colors.ts | 4 +-- yarn.lock | 7 ++--- 6 files changed, 71 insertions(+), 20 deletions(-) create mode 100644 src/components/Bluelib.stories.jsx diff --git a/.storybook/main.js b/.storybook/main.js index cd74759..77fbbb6 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,11 +1,12 @@ module.exports = { - "stories": [ - "../src/**/*.stories.mdx", - "../src/**/*.stories.@(js|jsx|ts|tsx)" - ], - "addons": [ - "@storybook/addon-links", - "@storybook/addon-essentials", - "@storybook/preset-create-react-app" - ] + "stories": [ + "../src/**/*.stories.mdx", + "../src/**/*.stories.@(js|jsx|ts|tsx)" + ], + "addons": [ + "@storybook/addon-docs", + "@storybook/addon-links", + "@storybook/addon-essentials", + "@storybook/preset-create-react-app", + ] } \ No newline at end of file diff --git a/package.json b/package.json index 07bae31..4c8f6ec 100644 --- a/package.json +++ b/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": { diff --git a/src/components/Bluelib.stories.jsx b/src/components/Bluelib.stories.jsx new file mode 100644 index 0000000..b5253fe --- /dev/null +++ b/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 => ( + + Hello world! + +) +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, +} diff --git a/src/components/Bluelib.tsx b/src/components/Bluelib.tsx index 972cb40..73b6d34 100644 --- a/src/components/Bluelib.tsx +++ b/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)} diff --git a/src/utils/Colors.ts b/src/utils/Colors.ts index e431d83..cce4157 100644 --- a/src/utils/Colors.ts +++ b/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 /** diff --git a/yarn.lock b/yarn.lock index 8104ad1..35693f4 100644 --- a/yarn.lock +++ b/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" - integrity sha512-rpZjOKN5O7naJxkH2Rx1sZzzBgaiWECc6BYXjeCE6kF0kcASJYbUq02u7JqIHwCb/j3NhV+QhRL2683aICeGZA== + resolved "https://github.com/Steffo99/color#2f9e457a96a5ee694d4bc6a2f4bc544ff32426e1" dependencies: color-convert "^2.0.1" color-string "^1.6.0"