From 9a48feacd6a9d45407f2a0e87172f270f057190b Mon Sep 17 00:00:00 2001 From: Ajay Bura <32841439+ajbura@users.noreply.github.com> Date: Sat, 27 May 2023 21:49:28 +1000 Subject: [PATCH 1/2] feat: progressbar component (#20) * fix: box component variant * feat: progress bar component * fix: overlay position * fix: tooltip & popover prop value case --- src/components/box/Box.css.ts | 36 ++++---- src/components/index.ts | 1 + src/components/overlay/Overlay.css.ts | 4 +- src/components/overlay/Overlay.tsx | 5 +- src/components/pop-out/PopOut.stories.tsx | 2 +- src/components/pop-out/PopOut.tsx | 4 +- .../progress-bar/ProgressBar.css.ts | 92 +++++++++++++++++++ .../progress-bar/ProgressBar.stories.tsx | 40 ++++++++ src/components/progress-bar/ProgressBar.tsx | 43 +++++++++ src/components/progress-bar/index.ts | 1 + src/components/tooltip/Tooltip.stories.tsx | 2 +- src/components/tooltip/Tooltip.tsx | 4 +- src/components/util.ts | 25 ++--- 13 files changed, 221 insertions(+), 38 deletions(-) create mode 100644 src/components/progress-bar/ProgressBar.css.ts create mode 100644 src/components/progress-bar/ProgressBar.stories.tsx create mode 100644 src/components/progress-bar/ProgressBar.tsx create mode 100644 src/components/progress-bar/index.ts diff --git a/src/components/box/Box.css.ts b/src/components/box/Box.css.ts index bb63354..99a6ab2 100644 --- a/src/components/box/Box.css.ts +++ b/src/components/box/Box.css.ts @@ -2,14 +2,19 @@ import { recipe, RecipeVariants } from "@vanilla-extract/recipes"; import { config } from "../../theme/config.css"; import { DefaultReset } from "../reset.css"; -const getAlignVariant = ( - prop: - | "justifyContent" - | "justifyItems" - | "justifySelf" - | "alignContent" - | "alignItems" - | "alignSelf" +const getAlignContentVariant = (prop: "justifyContent" | "alignContent") => ({ + Inherit: { [prop]: "inherit" }, + Start: { [prop]: "flex-start" }, + End: { [prop]: "flex-end" }, + Stretch: { [prop]: "stretch" }, + Center: { [prop]: "center" }, + Baseline: { [prop]: "baseline" }, + SpaceBetween: { [prop]: "space-between" }, + SpaceAround: { [prop]: "space-around" }, + SpaceEvenly: { [prop]: "space-evenly" }, +}); +const getAlignItemVariant = ( + prop: "justifyItems" | "justifySelf" | "alignItems" | "alignSelf" ) => ({ Inherit: { [prop]: "inherit" }, Start: { [prop]: "flex-start" }, @@ -17,9 +22,6 @@ const getAlignVariant = ( Stretch: { [prop]: "stretch" }, Center: { [prop]: "center" }, Baseline: { [prop]: "baseline" }, - SpaceBetween: { [prop]: "spaceBetween" }, - SpaceAround: { [prop]: "spaceAround" }, - SpaceEvenly: { [prop]: "spaceEvenly" }, }); export const Box = recipe({ @@ -48,12 +50,12 @@ export const Box = recipe({ Wrap: { flexWrap: "wrap" }, WrapReverse: { flexWrap: "wrap-reverse" }, }, - justifyContent: getAlignVariant("justifyContent"), - justifyItems: getAlignVariant("justifyItems"), - justifySelf: getAlignVariant("justifySelf"), - alignContent: getAlignVariant("alignContent"), - alignItems: getAlignVariant("alignItems"), - alignSelf: getAlignVariant("alignSelf"), + justifyContent: getAlignContentVariant("justifyContent"), + justifyItems: getAlignItemVariant("justifyItems"), + justifySelf: getAlignItemVariant("justifySelf"), + alignContent: getAlignContentVariant("alignContent"), + alignItems: getAlignItemVariant("alignItems"), + alignSelf: getAlignItemVariant("alignSelf"), gap: { Inherit: { gap: "inherit" }, "0": { gap: config.space.S0 }, diff --git a/src/components/index.ts b/src/components/index.ts index 8c2ff4f..b0aba14 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -22,6 +22,7 @@ export * from "./modal"; export * from "./overlay"; export * from "./pop-out"; export * from "./portal"; +export * from "./progress-bar"; export * from "./radio-button"; export * from "./scroll"; export * from "./spinner"; diff --git a/src/components/overlay/Overlay.css.ts b/src/components/overlay/Overlay.css.ts index 1f7bbac..fa1be92 100644 --- a/src/components/overlay/Overlay.css.ts +++ b/src/components/overlay/Overlay.css.ts @@ -5,7 +5,7 @@ import { DefaultReset } from "../reset.css"; export const Overlay = style([ DefaultReset, { - position: "fixed", + position: "absolute", top: 0, right: 0, bottom: 0, @@ -26,7 +26,7 @@ const OverlayBackdropAnime = keyframes({ export const OverlayBackdrop = style([ DefaultReset, { - position: "fixed", + position: "absolute", top: 0, right: 0, bottom: 0, diff --git a/src/components/overlay/Overlay.tsx b/src/components/overlay/Overlay.tsx index 499e968..9202ad7 100644 --- a/src/components/overlay/Overlay.tsx +++ b/src/components/overlay/Overlay.tsx @@ -6,12 +6,13 @@ import { as } from "../as"; export type OverlayProps = { open: boolean; + container?: Element | DocumentFragment; backdrop?: ReactNode; }; export const Overlay = as<"div", OverlayProps>( - ({ as: AsOverlay = "div", className, open, backdrop, children, ...props }, ref) => ( - + ({ as: AsOverlay = "div", className, open, container, backdrop, children, ...props }, ref) => ( + {open ? ( {backdrop} diff --git a/src/components/pop-out/PopOut.stories.tsx b/src/components/pop-out/PopOut.stories.tsx index abafd90..cb545a1 100644 --- a/src/components/pop-out/PopOut.stories.tsx +++ b/src/components/pop-out/PopOut.stories.tsx @@ -20,7 +20,7 @@ export const Interactive = () => {
( { as: AsPopOut = "div", open, - position = "bottom", - align = "center", + position = "Bottom", + align = "Center", offset = 10, alignOffset = 0, content, diff --git a/src/components/progress-bar/ProgressBar.css.ts b/src/components/progress-bar/ProgressBar.css.ts new file mode 100644 index 0000000..5fd5f1c --- /dev/null +++ b/src/components/progress-bar/ProgressBar.css.ts @@ -0,0 +1,92 @@ +import { ComplexStyleRule, createVar, style } from "@vanilla-extract/css"; +import { recipe, RecipeVariants } from "@vanilla-extract/recipes"; +import { color, config, toRem } from "../../theme"; +import { DefaultReset } from "../reset.css"; +import { Disabled } from "../selectorPreset.css"; +import { MainColor } from "../types"; +import { RadiiVariant } from "../variant.css"; + +const MainLine = createVar(); +const Main = createVar(); +const ContainerLine = createVar(); +const Container = createVar(); + +const getVariant = (variant: MainColor): ComplexStyleRule => ({ + vars: { + [MainLine]: color[variant].MainLine, + [Main]: color[variant].Main, + [ContainerLine]: color[variant].ContainerLine, + [Container]: color[variant].Container, + }, +}); + +export const ProgressBar = recipe({ + base: [ + DefaultReset, + Disabled, + { + display: "flex", + overflow: "hidden", + }, + ], + variants: { + size: { + "300": { + height: toRem(8), + }, + "400": { + height: toRem(12), + }, + "500": { + height: toRem(14), + }, + }, + variant: { + Primary: getVariant("Primary"), + Secondary: getVariant("Secondary"), + Success: getVariant("Success"), + Warning: getVariant("Warning"), + Critical: getVariant("Critical"), + }, + fill: { + Solid: { + backgroundColor: Main, + borderColor: MainLine, + color: Container, + }, + Soft: { + backgroundColor: Container, + borderColor: ContainerLine, + color: Main, + }, + None: { + backgroundColor: "inherit", + borderColor: Main, + color: Main, + }, + }, + radii: RadiiVariant, + outlined: { + true: { + borderWidth: config.borderWidth.B300, + }, + }, + }, + defaultVariants: { + variant: "Secondary", + size: "400", + fill: "Soft", + radii: "Pill", + }, +}); + +export type ProgressBarVariant = RecipeVariants; + +export const ProgressBarFill = style([ + DefaultReset, + { + display: "inline-block", + backgroundColor: "currentcolor", + height: "100%", + }, +]); diff --git a/src/components/progress-bar/ProgressBar.stories.tsx b/src/components/progress-bar/ProgressBar.stories.tsx new file mode 100644 index 0000000..5d69704 --- /dev/null +++ b/src/components/progress-bar/ProgressBar.stories.tsx @@ -0,0 +1,40 @@ +import React from "react"; +import { ComponentMeta, ComponentStory } from "@storybook/react"; +import { ProgressBar } from "./ProgressBar"; + +export default { + title: "ProgressBar", + component: ProgressBar, + argTypes: { + size: { + control: "select", + options: ["300", "400", "500"], + }, + variant: { + control: "select", + options: ["Primary", "Secondary", "Success", "Warning", "Critical"], + }, + outlined: { + control: "boolean", + }, + radii: { + control: "select", + options: ["0", "300", "400", "500", "Pill"], + }, + fill: { + control: "select", + options: ["Solid", "Soft", "None"], + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ; + +export const Secondary = Template.bind({}); +Secondary.args = { + variant: "Secondary", + min: 0, + max: 100, + value: 26, + outlined: false, +}; diff --git a/src/components/progress-bar/ProgressBar.tsx b/src/components/progress-bar/ProgressBar.tsx new file mode 100644 index 0000000..73a4a8f --- /dev/null +++ b/src/components/progress-bar/ProgressBar.tsx @@ -0,0 +1,43 @@ +import classNames from "classnames"; +import React from "react"; +import { as } from "../as"; +import { percent } from "../util"; + +import * as css from "./ProgressBar.css"; + +type ProgressBarProps = { + value: number; + min?: number; + max: number; +}; + +export const ProgressBar = as<"span", ProgressBarProps & css.ProgressBarVariant>( + ( + { + as: AsProgressBar = "span", + className, + variant, + size, + fill, + radii, + outlined, + value, + min = 0, + max, + ...props + }, + ref + ) => ( + + + + ) +); diff --git a/src/components/progress-bar/index.ts b/src/components/progress-bar/index.ts new file mode 100644 index 0000000..a550d58 --- /dev/null +++ b/src/components/progress-bar/index.ts @@ -0,0 +1 @@ +export * from "./ProgressBar"; diff --git a/src/components/tooltip/Tooltip.stories.tsx b/src/components/tooltip/Tooltip.stories.tsx index 22cdb95..f0e7fc2 100644 --- a/src/components/tooltip/Tooltip.stories.tsx +++ b/src/components/tooltip/Tooltip.stories.tsx @@ -37,7 +37,7 @@ Surface.args = { export const Interactive = () => ( diff --git a/src/components/tooltip/Tooltip.tsx b/src/components/tooltip/Tooltip.tsx index 2d92df0..5db3600 100644 --- a/src/components/tooltip/Tooltip.tsx +++ b/src/components/tooltip/Tooltip.tsx @@ -93,8 +93,8 @@ export const TooltipProvider = as<"div", TooltipProviderProps>( ( { as: AsTooltipProvider = "div", - position = "top", - align = "center", + position = "Top", + align = "Center", offset = 10, alignOffset = 0, delay = 200, diff --git a/src/components/util.ts b/src/components/util.ts index bc44cd9..1f5addf 100644 --- a/src/components/util.ts +++ b/src/components/util.ts @@ -5,8 +5,8 @@ export interface PositionCSS { left: string; transform: string; } -export type Position = "top" | "right" | "bottom" | "left"; -export type Align = "start" | "center" | "end"; +export type Position = "Top" | "Right" | "Bottom" | "Left"; +export type Align = "Start" | "Center" | "End"; export const getRelativeFixedPosition = ( domRect: DOMRect, @@ -25,27 +25,30 @@ export const getRelativeFixedPosition = ( transform: "none", }; - if (position === "top" || position === "bottom") { - if (position === "top") css.bottom = `${clientHeight - domRect.top + offset}px`; + if (position === "Top" || position === "Bottom") { + if (position === "Top") css.bottom = `${clientHeight - domRect.top + offset}px`; else css.top = `${domRect.bottom + offset}px`; - if (align === "start") css.left = `${domRect.left + alignOffset}px`; - if (align === "center") { + if (align === "Start") css.left = `${domRect.left + alignOffset}px`; + if (align === "Center") { css.left = `${domRect.left + domRect.width / 2 + alignOffset}px`; css.transform = "translateX(-50%)"; } - if (align === "end") css.right = `${clientWidth - domRect.right + alignOffset}px`; + if (align === "End") css.right = `${clientWidth - domRect.right + alignOffset}px`; } else { - if (position === "right") css.left = `${domRect.right + offset}px`; + if (position === "Right") css.left = `${domRect.right + offset}px`; else css.right = `${clientWidth - domRect.left + offset}px`; - if (align === "start") css.top = `${domRect.top + alignOffset}px`; - if (align === "center") { + if (align === "Start") css.top = `${domRect.top + alignOffset}px`; + if (align === "Center") { css.transform = "translateY(-50%)"; css.top = `${domRect.top + domRect.height / 2 + alignOffset}px`; } - if (align === "end") css.bottom = `${clientHeight - domRect.bottom + alignOffset}px`; + if (align === "End") css.bottom = `${clientHeight - domRect.bottom + alignOffset}px`; } return css; }; + +export const percent = (min: number, max: number, value: number) => + ((value - min) / (max - min)) * 100; From 29b3509bdf3a7a65b365d6144e02feb91df9c3cd Mon Sep 17 00:00:00 2001 From: semantic-release-bot Date: Sat, 27 May 2023 11:52:41 +0000 Subject: [PATCH 2/2] chore(release): 1.2.0 [skip ci] # [1.2.0](https://github.com/cinnyapp/folds/compare/v1.1.3...v1.2.0) (2023-05-27) ### Features * progressbar component ([#20](https://github.com/cinnyapp/folds/issues/20)) ([9a48fea](https://github.com/cinnyapp/folds/commit/9a48feacd6a9d45407f2a0e87172f270f057190b)) --- CHANGELOG.md | 6 ++++++ package-lock.json | 4 ++-- package.json | 2 +- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d65786b..5ce6d0f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,9 @@ +# [1.2.0](https://github.com/cinnyapp/folds/compare/v1.1.3...v1.2.0) (2023-05-27) + +### Features + +- progressbar component ([#20](https://github.com/cinnyapp/folds/issues/20)) ([9a48fea](https://github.com/cinnyapp/folds/commit/9a48feacd6a9d45407f2a0e87172f270f057190b)) + ## [1.1.3](https://github.com/cinnyapp/folds/compare/v1.1.2...v1.1.3) (2023-05-13) ### Bug Fixes diff --git a/package-lock.json b/package-lock.json index 196f546..3f035a0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "folds", - "version": "1.1.3", + "version": "1.2.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "folds", - "version": "1.1.3", + "version": "1.2.0", "license": "Apache-2.0", "dependencies": { "@fontsource/inter": "^4.5.12", diff --git a/package.json b/package.json index 405d633..68cb440 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "folds", - "version": "1.1.3", + "version": "1.2.0", "author": "Ajay Bura (ajbura)", "license": "Apache-2.0", "main": "dist/index.js",