Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update: Add zn prefix aka ver 1.2.8 #54

Merged
merged 1 commit into from
Feb 22, 2024
Merged

Update: Add zn prefix aka ver 1.2.8 #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion lib/components/box/box.stories.tsx
View file
Open in desktop
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-base p-4 text-white",
className: "zn-bg-primary-base zn-p-4 zn-text-white",
},
};
14 changes: 7 additions & 7 deletions lib/components/calendar/calendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export const Calendar = (props: ICalendar) => {
>
{format(currentDate, "yyyy")}
</button>
<div className="flex-1" />
<div className="zn-flex-1" />
<button onClick={onPrevMonth} className={theme.headerArrow()}>
<ArrowLeft2 size={20} />
</button>
Expand All @@ -112,14 +112,14 @@ export const Calendar = (props: ICalendar) => {
<button onClick={onPrevYear} className={theme.headerArrow()}>
<ArrowLeft2 size={20} />
</button>
<div className="flex-1" />
<div className="zn-flex-1" />
<button
className={theme.headerButton()}
onClick={() => setViewMode("year")}
>
{format(currentDate, "yyyy")}
</button>
<div className="flex-1" />
<div className="zn-flex-1" />
<button onClick={onNextYear} className={theme.headerArrow()}>
<ArrowRight2 size={20} />
</button>
Expand All @@ -134,15 +134,15 @@ export const Calendar = (props: ICalendar) => {
<button onClick={onPrevDecade} className={theme.headerArrow()}>
<ArrowLeft2 size={20} />
</button>
<div className="flex-1" />
<div className="zn-flex-1" />
<button
className={theme.headerButton({
isNoAction: true,
})}
>
{`${format(first, "yyyy")} - ${format(last, "yyyy")}`}
</button>
<div className="flex-1" />
<div className="zn-flex-1" />
<button onClick={onNextDecade} className={theme.headerArrow()}>
<ArrowRight2 size={20} />
</button>
Expand Down Expand Up @@ -228,7 +228,7 @@ export const Calendar = (props: ICalendar) => {

return (
<div className={tableContainerClasses}>
<div className="flex flex-wrap">
<div className="zn-flex zn-flex-wrap">
<table className={tableClasses}>
{rows.map((row, i) => (
<tr key={i} className={valueRowClasses}>
Expand Down Expand Up @@ -278,7 +278,7 @@ export const Calendar = (props: ICalendar) => {

return (
<div className={tableContainerClasses}>
<div className="flex flex-wrap">
<div className="zn-flex zn-flex-wrap">
<table className={tableClasses}>
{rows.map((row, i) => (
<tr key={i} className={valueRowClasses}>
Expand Down
4 changes: 2 additions & 2 deletions lib/components/center/center.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const Primary: Story = {
return (
<Center
{...rest}
className={twMerge("h-[100px] bg-slate-200", rest.className)}
className={twMerge("zn-h-[100px] zn-bg-slate-200", rest.className)}
>
{children}
</Center>
Expand All @@ -36,7 +36,7 @@ export const CircleComponent: StoryObj<typeof Circle> = {
return (
<Circle
{...rest}
className={twMerge("bg-slate-600 text-white", rest.className)}
className={twMerge("zn-bg-slate-600 zn-text-white", rest.className)}
>
{children}
</Circle>
Expand Down
14 changes: 8 additions & 6 deletions lib/components/flex/flex.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,10 @@ type Story = StoryObj<typeof meta>;
export const Primary: Story = {
render: (args) => {
return (
<Flex className="bg-slate-300 h-[200px]" {...args}>
<Box className="bg-red-300 p-4">Block 1</Box>
<Flex className="zn-bg-slate-300 zn-h-[200px]" {...args}>
<Box className="zn-bg-red-300 zn-p-4">Block 1</Box>
{/* <Spacer /> */}
<Box className="bg-teal-300 p-4">Block 2</Box>
<Box className="zn-bg-teal-300 zn-p-4">Block 2</Box>
</Flex>
);
},
Expand All @@ -49,10 +49,12 @@ export const Primary: Story = {
export const Spacer: Story = {
render: (args) => {
return (
<Flex className="bg-slate-300 h-[200px]" {...args}>
<Box className="bg-red-300 p-4">Spacer is the gap between us</Box>
<Flex className="zn-bg-slate-300 zn-h-[200px]" {...args}>
<Box className="zn-bg-red-300 zn-p-4">Spacer is the gap between us</Box>
<FlexSpacer />
<Box className="bg-teal-300 p-4">Spacer is the gap between us</Box>
<Box className="zn-bg-teal-300 zn-p-4">
Spacer is the gap between us
</Box>
</Flex>
);
},
Expand Down
2 changes: 1 addition & 1 deletion lib/components/menu/menu.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ type Story = StoryObj<typeof meta>;
export const Primary: Story = {
render: ({ children, ...rest }) => (
<Menu {...rest}>
<Text className="underline cursor-pointer">{children}</Text>
<Text className="zn-underline zn-cursor-pointer">{children}</Text>
</Menu>
),
args: {
Expand Down
6 changes: 3 additions & 3 deletions lib/components/modal/modal.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export const Primary: Story = {
title: "Modal Title",
showHeader: true,
backdropClassName: "",
className: "w-[500px]",
className: "zn-w-[500px]",
closeIcon: null,
isOpen: true,
},
Expand Down Expand Up @@ -68,7 +68,7 @@ export const CenteredModal: Story = {
isOpen: true,
title: "Modal Title",
showHeader: true,
className: "w-[500px]",
className: "zn-w-[500px]",
},
};

Expand All @@ -77,6 +77,6 @@ export const NoHeaderModal: Story = {
children: "Hey, this is your modal mate!",
isOpen: true,
showHeader: false,
className: "w-[400px]",
className: "zn-w-[400px]",
},
};
7 changes: 5 additions & 2 deletions lib/components/popover/popover.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,11 @@ type Story = StoryObj<typeof meta>;

export const Primary: Story = {
render: ({ children, content, ...rest }) => (
<Popover {...rest} content={<Box className="max-w-[250px]">{content}</Box>}>
<Text className="underline cursor-pointer">{children}</Text>
<Popover
{...rest}
content={<Box className="zn-max-w-[250px]">{content}</Box>}
>
<Text className="zn-underline zn-cursor-pointer">{children}</Text>
</Popover>
),
args: {
Expand Down
104 changes: 52 additions & 52 deletions lib/customization/styles/components/alert.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,34 @@ import { cva } from "class-variance-authority";

const base = cva(
[
"block",
"flex",
"relative",
"items-start",
"justify-start",
"gap-3",
"py-3",
"px-3",
"zn-block",
"zn-flex",
"zn-relative",
"zn-items-start",
"zn-justify-start",
"zn-gap-3",
"zn-py-3",
"zn-px-3",
],
{
variants: {
variant: {
subtle: ["before:hidden"],
subtle: ["before:zn-hidden"],
solid: [],
"left-accent": [
"before:h-full",
"before:w-1",
"before:top-0",
"before:absolute",
"before:left-0",
"before:zn-h-full",
"before:zn-w-1",
"before:zn-top-0",
"before:zn-absolute",
"before:zn-left-0",
],
"top-accent": [
"before:h-1",
"before:w-full",
"before:top-0",
"before:absolute",
"before:left-0",
"before:right-0",
"before:zn-h-1",
"before:zn-w-full",
"before:zn-top-0",
"before:zn-absolute",
"before:zn-left-0",
"before:zn-right-0",
],
},
status: {
Expand All @@ -43,42 +43,42 @@ const base = cva(
{
variant: ["subtle", "left-accent", "top-accent"],
status: "info",
class: ["bg-white", "before:bg-info-base"],
class: ["zn-bg-white", "before:zn-bg-info-base"],
},
{
variant: ["subtle", "left-accent", "top-accent"],
status: "success",
class: ["bg-white", "before:bg-success-base"],
class: ["zn-bg-white", "before:zn-bg-success-base"],
},
{
variant: ["subtle", "left-accent", "top-accent"],
status: "warning",
class: ["bg-white", "before:bg-warning-base"],
class: ["zn-bg-white", "before:zn-bg-warning-base"],
},
{
variant: ["subtle", "left-accent", "top-accent"],
status: "error",
class: ["bg-white", "before:bg-error-base"],
class: ["zn-bg-white", "before:zn-bg-error-base"],
},
{
variant: "solid",
status: "info",
class: "bg-info-base",
class: "zn-bg-info-base",
},
{
variant: "solid",
status: "success",
class: "bg-success-base",
class: "zn-bg-success-base",
},
{
variant: "solid",
status: "warning",
class: "bg-warning-base",
class: "zn-bg-warning-base",
},
{
variant: "solid",
status: "error",
class: "bg-error-base",
class: "zn-bg-error-base",
},
],
defaultVariants: {
Expand All @@ -88,13 +88,13 @@ const base = cva(
}
);

const icon = cva(["text-2xl", "border", "rounded-full", "p-2"], {
const icon = cva(["zn-text-2xl", "zn-border", "zn-rounded-full", "zn-p-2"], {
variants: {
status: {
info: ["text-info-base"],
success: ["text-success-base"],
warning: ["text-warning-base"],
error: ["text-error-base"],
info: ["zn-text-info-base"],
success: ["zn-text-success-base"],
warning: ["zn-text-warning-base"],
error: ["zn-text-error-base"],
},
variant: {
subtle: [],
Expand All @@ -107,38 +107,38 @@ const icon = cva(["text-2xl", "border", "rounded-full", "p-2"], {
{
variant: ["subtle", "left-accent", "top-accent"],
status: "info",
class: ["text-info-base", "bg-info-10"],
class: ["zn-text-info-base", "zn-bg-info-10"],
},
{
variant: ["subtle", "left-accent", "top-accent"],
status: "success",
class: ["text-success-base", "bg-success-10"],
class: ["zn-text-success-base", "zn-bg-success-10"],
},
{
variant: ["subtle", "left-accent", "top-accent"],
status: "warning",
class: ["text-warning-base", "bg-warning-10"],
class: ["zn-text-warning-base", "zn-bg-warning-10"],
},
{
variant: ["subtle", "left-accent", "top-accent"],
status: "error",
class: ["text-error-base", "bg-error-10"],
class: ["zn-text-error-base", "zn-bg-error-10"],
},
{
variant: "solid",
status: ["info", "success", "warning", "error"],
class: ["border-none", "bg-white"],
class: ["zn-border-none", "zn-bg-white"],
},
],
});

const text = cva(["text-base"], {
const text = cva(["zn-text-base"], {
variants: {
status: {
info: ["text-info-base"],
success: ["text-success-base"],
warning: ["text-warning-base"],
error: ["text-error-base"],
info: ["zn-text-info-base"],
success: ["zn-text-success-base"],
warning: ["zn-text-warning-base"],
error: ["zn-text-error-base"],
},
variant: {
subtle: [],
Expand All @@ -151,27 +151,27 @@ const text = cva(["text-base"], {
{
variant: ["subtle", "left-accent", "top-accent"],
status: ["info", "success", "warning", "error"],
class: "text-gray-900",
class: "zn-text-gray-900",
},
{
variant: "solid",
status: ["info", "success", "warning", "error"],
class: "text-white",
class: "zn-text-white",
},
],
});
const close = cva(["font-medium", "absolute", "top-3", "right-3"], {
const close = cva(["zn-font-medium", "zn-absolute", "zn-top-3", "zn-right-3"], {
variants: {
variant: {
subtle: ["!text-gray-400"],
solid: ["!text-white"],
"left-accent": ["!text-gray-400"],
"top-accent": ["!text-gray-400"],
subtle: ["!zn-text-gray-400"],
solid: ["!zn-text-white"],
"left-accent": ["!zn-text-gray-400"],
"top-accent": ["!zn-text-gray-400"],
},
},
});
const titleText = cva(["font-medium", "m-0", "text-sm"]);
const descriptionText = cva(["m-0", "text-sm", "font-normal"]);
const titleText = cva(["zn-font-medium", "zn-m-0", "zn-text-sm"]);
const descriptionText = cva(["zn-m-0", "zn-text-sm", "zn-font-normal"]);

const alertStyles = {
base,
Expand Down
Loading
Loading