Skip to content

Commit

Permalink
Merge pull request #40 from tuzkituan/dev/theme
Browse files Browse the repository at this point in the history
New UI Version 1.2.0
  • Loading branch information
tuzkituan authored Jan 21, 2024
2 parents 12a8b20 + ae3b2d9 commit 37d83a0
Show file tree
Hide file tree
Showing 72 changed files with 3,071 additions and 2,745 deletions.
1 change: 1 addition & 0 deletions .storybook/YourTheme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,5 @@ export default create({
brandTarget: "_self",
// appBg: "#F6F4EB",
appBorderRadius: 8,
fontBase: '"Plus Jakarta Sans", sans-serif',
});
1 change: 0 additions & 1 deletion .storybook/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ const config: StorybookConfig = {
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-onboarding",
"@storybook/addon-interactions",
],
framework: {
Expand Down
12 changes: 12 additions & 0 deletions .storybook/manager-head.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet"
/>

<style>
body {
font-family: "Plus Jakarta Sans", sans-serif;
}
</style>
12 changes: 12 additions & 0 deletions .storybook/preview-head.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet"
/>

<style>
body {
font-family: "Plus Jakarta Sans", sans-serif;
}
</style>
40 changes: 40 additions & 0 deletions lib/assets/icons/LoadingIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
const LoadingIcon = ({
color = "#8281B8",
className = "",
}: {
size?: number;
color?: string;
className?: string;
}) => {
return (
<svg
className={className}
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="Size=Large">
<path
id="Ellipse 15"
d="M45 24C46.6569 24 48.0194 22.6516 47.8128 21.0077C47.1755 15.9357 44.9301 11.1704 41.3657 7.43397C37.1072 2.96993 31.2932 0.317265 25.1306 0.026643C18.9679 -0.263979 12.9301 1.82977 8.2704 5.87324C3.61071 9.91671 0.687111 15.5993 0.106513 21.7414C-0.474085 27.8835 1.33291 34.0133 5.15239 38.8583C8.97188 43.7032 14.5105 46.8913 20.6184 47.7606C26.7263 48.6299 32.9344 47.1136 37.9539 43.5266C42.1554 40.5242 45.254 36.2641 46.8303 31.4014C47.3412 29.8253 46.2555 28.2455 44.628 27.935C43.0005 27.6245 41.4528 28.706 40.8767 30.2595C39.6335 33.6112 37.4108 36.5402 34.4654 38.645C30.7008 41.3352 26.0447 42.4724 21.4638 41.8204C16.8828 41.1685 12.7289 38.7774 9.8643 35.1437C6.99968 31.51 5.64444 26.9126 6.07988 22.3061C6.51533 17.6995 8.70803 13.4375 12.2028 10.4049C15.6976 7.37232 20.226 5.80202 24.8479 6.01998C29.4699 6.23795 33.8304 8.22745 37.0243 11.5755C39.523 14.1949 41.1575 17.4884 41.7506 21.0138C42.0255 22.6477 43.3431 24 45 24Z"
fill="url(#paint0_linear_550_76)"
/>
</g>
<defs>
<linearGradient
id="paint0_linear_550_76"
x1="48"
y1="29.75"
x2="19.25"
y2="6.86385e-07"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="white" />
<stop offset="1" stopColor={color} />
</linearGradient>
</defs>
</svg>
);
};

export default LoadingIcon;
4 changes: 2 additions & 2 deletions lib/components/alert/alert.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,8 @@ export const Primary: Story = {
args: {
title: "Success",
description: "Data uploaded to the server. Fire on!",
status: "info",
variant: "subtle",
status: "success",
variant: "solid",
isClosable: false,
},
};
33 changes: 21 additions & 12 deletions lib/components/alert/alert.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
import { CheckCircle, Info, WarningCircle, X } from "@phosphor-icons/react";
import {
CloseCircle,
CloseSquare,
InfoCircle,
TickSquare,
Warning2,
} from "iconsax-react";
import { useMemo, useState } from "react";
import { twMerge } from "tailwind-merge";
import { useComponentStyle } from "../../customization/styles/theme.context";
import { IAlert } from "./alert.types";
import { Button } from "../button/button";

export const Alert = (props: IAlert) => {
const theme = useComponentStyle("Alert");
Expand Down Expand Up @@ -54,22 +59,27 @@ export const Alert = (props: IAlert) => {
}, [contentClassName, status, theme, variant]);

const closeClasses = useMemo(() => {
return twMerge(theme.close(), contentClasses);
}, [contentClasses, theme]);
return twMerge(
theme.close({
variant,
}),
contentClasses
);
}, [contentClasses, variant, theme]);

const getIcon = (stt: string) => {
if (icon) {
return icon;
}
switch (stt) {
case "success":
return <CheckCircle weight="fill" />;
return <TickSquare variant="Bold" size={20} />;
case "warning":
return <WarningCircle weight="fill" />;
return <CloseSquare variant="Bold" size={20} />;
case "error":
return <WarningCircle weight="fill" />;
return <Warning2 variant="Bold" size={20} />;
default:
return <Info weight="fill" />;
return <InfoCircle variant="Bold" size={20} />;
}
};

Expand Down Expand Up @@ -105,16 +115,15 @@ export const Alert = (props: IAlert) => {
<p className={theme.descriptionText()}>{description}</p>
</div>
{isClosable && (
<Button
variant="unstyled"
<button
className={closeClasses}
onClick={() => {
if (onClose) onClose();
else setShow(false);
}}
>
<X />
</Button>
<CloseCircle size={20} />
</button>
)}
</div>
);
Expand Down
4 changes: 2 additions & 2 deletions lib/components/avatar/avatar.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { User } from "@phosphor-icons/react";
import { useMemo } from "react";
import { renderToString } from "react-dom/server";
import { twMerge } from "tailwind-merge";
import { useComponentStyle } from "../../customization/styles/theme.context";
import useImageStatus from "../../hooks/image.hook";
import { IAvatar } from "./avatar.types";
import { User } from "iconsax-react";

const defaultProps: Partial<IAvatar> = {
src: "",
Expand Down Expand Up @@ -57,7 +57,7 @@ export const Avatar = (props: IAvatar) => {
return initials.toUpperCase();
};

const defaultSvgString = renderToString(<User color="white" />);
const defaultSvgString = renderToString(<User color="white" size={28} />);
const defaultImgSrc = `data:image/svg+xml;base64,${btoa(defaultSvgString)}`;
const nameLetters = name ? getInitials(name) : "";

Expand Down
2 changes: 1 addition & 1 deletion lib/components/box/box.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,6 @@ type Story = StoryObj<typeof meta>;
export const Primary: Story = {
args: {
children: "Actually this is a div",
className: "bg-primary p-4 text-white",
className: "bg-primary-base p-4 text-white",
},
};
21 changes: 13 additions & 8 deletions lib/components/button/button.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ const meta = {
// More on argTypes: https://storybook.js.org/docs/react/api/argtypes
argTypes: {
// backgroundColor: { control: 'color' },
variant: {
control: "radio",
options: ["solid", "subtle", "outline", "link", "text"],
},
},
} satisfies Meta<typeof Button>;

Expand All @@ -33,37 +37,38 @@ export const Primary: Story = {
// rightIcon: <Airplane />,
spinnerPlacement: "start",
loadingText: "Loading...",
isDanger: false,
},
};

export const Outline: Story = {
export const Subtle: Story = {
args: {
children: "Button",
size: "md",
variant: "outline",
variant: "subtle",
},
};

export const Link: Story = {
export const Outline: Story = {
args: {
children: "Button",
size: "md",
variant: "link",
variant: "outline",
},
};

export const Ghost: Story = {
export const Link: Story = {
args: {
children: "Button",
size: "md",
variant: "ghost",
variant: "link",
},
};

export const Unstyled: Story = {
export const Text: Story = {
args: {
children: "Button",
size: "md",
variant: "unstyled",
variant: "text",
},
};
21 changes: 14 additions & 7 deletions lib/components/button/button.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { IButton } from "./button.types";
import { useComponentStyle } from "../../customization/styles/theme.context";
import { CircleNotch } from "@phosphor-icons/react";
import { twMerge } from "tailwind-merge";
import { useMemo } from "react";
import { twMerge } from "tailwind-merge";
import LoadingIcon from "../../assets/icons/LoadingIcon";
import { useComponentStyle } from "../../customization/styles/theme.context";
import { IButton } from "./button.types";

const defaultProps: Partial<IButton> = {
variant: "solid",
Expand All @@ -28,15 +28,16 @@ export const Button = (props: IButton) => {
leftIcon,
rightIcon,
loadingText,
isDanger,
...restProps
} = {
...defaultProps,
...props,
};

const classes = useMemo(() => {
return twMerge(theme.base({ size, variant }), className);
}, [className, variant, size, theme]);
return twMerge(theme.base({ size, variant, isDanger }), className);
}, [className, variant, size, isDanger, theme]);

const containerStyles: React.CSSProperties = {
...(iconSpacing
Expand All @@ -46,7 +47,13 @@ export const Button = (props: IButton) => {
: {}),
};

const spinnerRender = spinner ?? <CircleNotch className={theme.spinner()} />;
const spinnerRender = spinner ?? (
<LoadingIcon
className={theme.spinner({
size,
})}
/>
);
const renderLeftIcon = () => {
if (isLoading && spinnerPlacement === "start") {
return spinnerRender;
Expand Down
3 changes: 2 additions & 1 deletion lib/components/button/button.types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,6 @@ export interface IButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
size?: "xs" | "sm" | "md" | "lg";
spinner?: React.ReactNode;
spinnerPlacement?: "start" | "end";
variant?: "ghost" | "outline" | "solid" | "link" | "unstyled";
variant?: "text" | "outline" | "subtle" | "solid" | "link";
isDanger?: boolean;
}
32 changes: 9 additions & 23 deletions lib/components/calendar/calendar.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
import {
CaretDoubleLeft,
CaretDoubleRight,
CaretLeft,
CaretRight,
} from "@phosphor-icons/react";
import { format, isSameDay, isSameMonth, isSameYear, isToday } from "date-fns";
import { ArrowLeft2, ArrowRight2 } from "iconsax-react";
import { useMemo } from "react";
import { twMerge } from "tailwind-merge";
import { useComponentStyle } from "../../customization/styles/theme.context";
Expand Down Expand Up @@ -89,33 +84,24 @@ export const Calendar = (props: ICalendar) => {
if (viewMode === "day") {
return (
<div className={theme.header()}>
<button onClick={onPrevYear} className={theme.headerArrow()}>
<CaretDoubleLeft />
</button>
<button onClick={onPrevMonth} className={theme.headerArrow()}>
<CaretLeft />
</button>
<div className="flex-1" />
<button
className={theme.headerButton()}
onClick={() => setViewMode("month")}
>
{format(currentDate, "MMM")}
</button>

<button
className={theme.headerButton()}
onClick={() => setViewMode("year")}
>
{format(currentDate, "yyyy")}
</button>
<div className="flex-1" />

<button onClick={onNextMonth} className={theme.headerArrow()}>
<CaretRight />
<button onClick={onPrevMonth} className={theme.headerArrow()}>
<ArrowLeft2 size={20} />
</button>
<button onClick={onNextYear} className={theme.headerArrow()}>
<CaretDoubleRight />
<button onClick={onNextMonth} className={theme.headerArrow()}>
<ArrowRight2 size={20} />
</button>
</div>
);
Expand All @@ -124,7 +110,7 @@ export const Calendar = (props: ICalendar) => {
return (
<div className={theme.header()}>
<button onClick={onPrevYear} className={theme.headerArrow()}>
<CaretLeft />
<ArrowLeft2 size={20} />
</button>
<div className="flex-1" />
<button
Expand All @@ -135,7 +121,7 @@ export const Calendar = (props: ICalendar) => {
</button>
<div className="flex-1" />
<button onClick={onNextYear} className={theme.headerArrow()}>
<CaretRight />
<ArrowRight2 size={20} />
</button>
</div>
);
Expand All @@ -146,7 +132,7 @@ export const Calendar = (props: ICalendar) => {
return (
<div className={theme.header()}>
<button onClick={onPrevDecade} className={theme.headerArrow()}>
<CaretLeft />
<ArrowLeft2 size={20} />
</button>
<div className="flex-1" />
<button
Expand All @@ -158,7 +144,7 @@ export const Calendar = (props: ICalendar) => {
</button>
<div className="flex-1" />
<button onClick={onNextDecade} className={theme.headerArrow()}>
<CaretRight />
<ArrowRight2 size={20} />
</button>
</div>
);
Expand Down
Loading

0 comments on commit 37d83a0

Please sign in to comment.