Skip to content

Commit d6250f6

Browse files
agjsagjs
committed
chore: Bump package version to 1.0.236 and enhance ImageDialog and Tabs components
- Updated package version in package.json to 1.0.236 - Enhanced ImageDialog component with new props for compression, max file size, allowed mime types, and input label - Updated Tabs component styling for improved visual consistency and added support for disabled tabs in stories - Refactored Avatar story to use updated image URL
1 parent 6b0c46a commit d6250f6

File tree

7 files changed

+98
-44
lines changed

7 files changed

+98
-44
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@programmer_network/yail",
3-
"version": "1.0.235",
3+
"version": "1.0.236",
44
"description": "Programmer Network's official UI library for React",
55
"author": "Aleksandar Grbic - (https://programmer.network)",
66
"publishConfig": {

‎src/Components/Avatar/Avatar.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const Default: Story = {
2323

2424
export const WithURL: Story = {
2525
args: {
26-
src: "https://imagedelivery.net/mG9yIKlH_7CYi04eBXEpYg/47d46959-283a-4d0f-4ff3-6a1fa4686b00/public",
26+
src: "https://images.programmer.network/47d46959-283a-4d0f-4ff3-6a1fa4686b00/public",
2727
size: 150
2828
}
2929
};

‎src/Components/ImageDialog/index.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,11 @@ const ImageDialog = forwardRef<HTMLDialogElement, IImageDialogProps>(
2929
aspect: 1,
3030
circularCrop: false
3131
},
32-
buttonText
32+
buttonText,
33+
compression = { enabled: true, quality: 0.8 },
34+
maxFileSize = 1024 * 1024 * 0.5,
35+
allowedMimeTypes = ["image/jpeg", "image/png", "image/gif"],
36+
inputLabel = "Select an image"
3337
},
3438
forwardedRef
3539
) => {
@@ -47,6 +51,7 @@ const ImageDialog = forwardRef<HTMLDialogElement, IImageDialogProps>(
4751
}
4852

4953
setIsSaving(true);
54+
5055
await onSave?.({
5156
blob: croppedImage,
5257
base64: await ImageUtils.blobToBase64(croppedImage),
@@ -144,11 +149,11 @@ const ImageDialog = forwardRef<HTMLDialogElement, IImageDialogProps>(
144149
setValidationError(error);
145150
}}
146151
error={validationError?.message}
147-
label='Select an image'
152+
label={inputLabel}
148153
accept='image/*'
149-
maxFileSize={1024 * 1024 * 0.5} // 500KB
150-
allowedMimeTypes={["image/jpeg", "image/png", "image/gif"]}
151-
compression={{ enabled: true, quality: 0.8 }}
154+
maxFileSize={maxFileSize}
155+
allowedMimeTypes={allowedMimeTypes}
156+
compression={compression}
152157
/>
153158
</div>
154159
);

‎src/Components/ImageDialog/types.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,8 @@ export interface IImageDialogProps extends IDialogProps {
1616
onSave?: (args: IImageDialogOnSaveArgs) => Promise<unknown>;
1717
cropOptions?: IImageDialogCropOptions;
1818
buttonText: string;
19+
compression?: { enabled: boolean; maxWidth?: number; quality?: number };
20+
maxFileSize?: number;
21+
allowedMimeTypes?: string[];
22+
inputLabel?: string;
1923
}

‎src/Components/Inputs/Tiptap/constants.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,8 @@ export const toolbarItemToClassName = {
125125
},
126126
[TIPTAP_TOOLBAR_ITEMS.IMAGE]: {
127127
tagName: "img",
128-
classes: "yl:mx-auto yl:block yl:p-2 yl:border yl:border-background"
128+
classes:
129+
"yl:mx-auto yl:block yl:p-2 yl:border-2 yl:border-border yl:my-4 yl:rounded-md yl:shadow-md"
129130
},
130131
[TIPTAP_TOOLBAR_ITEMS.MENTION]: {
131132
tagName: "span",

‎src/Components/Tabs/Tabs.stories.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -239,3 +239,78 @@ export const Compact: Story = {
239239
</div>
240240
)
241241
};
242+
243+
export const DisabledTabs: Story = {
244+
render: () => (
245+
<div className='w-[500px] p-6'>
246+
<Tabs>
247+
<TabList>
248+
<Tab>Active</Tab>
249+
<Tab disabled>Disabled</Tab>
250+
<Tab>Another</Tab>
251+
</TabList>
252+
<TabPanel>
253+
<div className='text-text'>This tab is active and enabled.</div>
254+
</TabPanel>
255+
<TabPanel>
256+
<div className='text-text'>
257+
This tab is disabled and cannot be selected.
258+
</div>
259+
</TabPanel>
260+
<TabPanel>
261+
<div className='text-text'>Another enabled tab.</div>
262+
</TabPanel>
263+
</Tabs>
264+
</div>
265+
)
266+
};
267+
268+
export const LongLabels: Story = {
269+
render: () => (
270+
<div className='w-[600px] p-6'>
271+
<Tabs>
272+
<TabList>
273+
<Tab>This is a very long tab label to test overflow</Tab>
274+
<Tab>Short</Tab>
275+
<Tab>Another extremely long tab label for testing</Tab>
276+
</TabList>
277+
<TabPanel>
278+
<div className='text-text'>Long label tab content.</div>
279+
</TabPanel>
280+
<TabPanel>
281+
<div className='text-text'>Short label tab content.</div>
282+
</TabPanel>
283+
<TabPanel>
284+
<div className='text-text'>Another long label tab content.</div>
285+
</TabPanel>
286+
</Tabs>
287+
</div>
288+
)
289+
};
290+
291+
export const MixedEnabledDisabled: Story = {
292+
render: () => (
293+
<div className='w-[500px] p-6'>
294+
<Tabs>
295+
<TabList>
296+
<Tab>First</Tab>
297+
<Tab disabled>Second (Disabled)</Tab>
298+
<Tab>Third</Tab>
299+
<Tab disabled>Fourth (Disabled)</Tab>
300+
</TabList>
301+
<TabPanel>
302+
<div className='text-text'>First tab content.</div>
303+
</TabPanel>
304+
<TabPanel>
305+
<div className='text-text'>Second tab is disabled.</div>
306+
</TabPanel>
307+
<TabPanel>
308+
<div className='text-text'>Third tab content.</div>
309+
</TabPanel>
310+
<TabPanel>
311+
<div className='text-text'>Fourth tab is disabled.</div>
312+
</TabPanel>
313+
</Tabs>
314+
</div>
315+
)
316+
};

‎src/Components/Tabs/index.tsx‎

Lines changed: 5 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,7 @@ import { ITabListProps, ITabPanelProps, ITabProps, ITabsProps } from "./types";
55

66
export const Tabs: ReactTabs.ReactTabsFunctionComponent<ITabsProps> = props => {
77
return (
8-
<ReactTabs.Tabs
9-
{...props}
10-
selectedTabClassName={classNames(
11-
"yl:text-primary yl:border-primary yl:bg-primary/5",
12-
"after:yl:opacity-100 after:yl:scale-x-100",
13-
"yl:font-semibold",
14-
props.selectedTabClassName
15-
)}
16-
>
8+
<ReactTabs.Tabs {...props} className={props.className}>
179
{props.children}
1810
</ReactTabs.Tabs>
1911
);
@@ -28,9 +20,7 @@ export const TabList: ReactTabs.ReactTabsFunctionComponent<
2820
<ReactTabs.TabList
2921
{...props}
3022
className={classNames(
31-
"yl:flex yl:gap-1 yl:my-6 yl:overflow-x-auto yl:select-none yl:text-text",
32-
"yl:bg-card yl:rounded-lg yl:p-1 yl:border-2 yl:border-border",
33-
"yl:backdrop-blur-sm",
23+
"yl:text-text yl:flex yl:gap-6 yl:border-b-2 yl:border-border yl:pb-4",
3424
props.className
3525
)}
3626
>
@@ -48,7 +38,6 @@ export const TabPanel: ReactTabs.ReactTabsFunctionComponent<
4838
<ReactTabs.TabPanel
4939
{...props}
5040
className={classNames(
51-
"yl:mt-4 yl:outline-none",
5241
"yl:animate-in yl:fade-in-0 yl:duration-200",
5342
props.className
5443
)}
@@ -64,30 +53,10 @@ export const Tab: ReactTabs.ReactTabsFunctionComponent<ITabProps> = props => {
6453
return (
6554
<ReactTabs.Tab
6655
{...props}
56+
selectedClassName='yl:text-primary'
57+
disabledClassName='yl:!cursor-not-allowed yl:opacity-50'
6758
className={classNames(
68-
"yl:flex yl:gap-2 yl:items-center yl:justify-center",
69-
"yl:cursor-pointer yl:relative yl:transition-all yl:duration-200",
70-
"yl:px-4 yl:py-2.5 yl:rounded-md yl:text-sm yl:font-medium",
71-
"yl:min-w-0 yl:whitespace-nowrap",
72-
73-
"yl:text-text-secondary yl:bg-transparent",
74-
"yl:border-2 yl:border-transparent",
75-
76-
"hover:yl:text-text hover:yl:bg-background/50",
77-
"hover:yl:border-border/50",
78-
79-
"focus:yl:outline-none focus:yl:ring-2 focus:yl:ring-primary/20",
80-
"focus:yl:border-primary/30",
81-
82-
"after:yl:content-[''] after:yl:absolute after:yl:bottom-0",
83-
"after:yl:left-1/2 after:yl:-translate-x-1/2",
84-
"after:yl:w-0 after:yl:h-0.5 after:yl:bg-primary",
85-
"after:yl:rounded-full after:yl:transition-all after:yl:duration-300",
86-
"after:yl:opacity-0 after:yl:scale-x-0",
87-
88-
"disabled:yl:cursor-not-allowed disabled:yl:opacity-50",
89-
"disabled:hover:yl:text-text-secondary disabled:hover:yl:bg-transparent",
90-
59+
"yl:hover:cursor-pointer yl:outline-none yl:focus-visible:outline-none yl:flex yl:gap-1 yl:items-center yl:justify-center yl:transition-all yl:duration-200 yl:ease-in-out yl:text-text-secondary",
9160
props.className
9261
)}
9362
>

0 commit comments

Comments
 (0)