@vtx-ui/react 0.0.1-beta.3 → 0.0.1-beta.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.esm.js.map +1 -1
- package/dist/types/components/AdminHeader/AdminHeader.d.ts +179 -0
- package/dist/types/components/AdminHeader/AdminHeader.examples.d.ts +44 -0
- package/dist/types/components/AdminHeader/AdminHeader.stories.d.ts +53 -0
- package/dist/types/components/AdminHeader/AdminHeader.widgets.stories.d.ts +86 -0
- package/dist/types/components/AdminHeader/index.d.ts +2 -0
- package/dist/types/components/Alert/Alert.d.ts +7 -54
- package/dist/types/components/Avatar/Avatar.d.ts +5 -2
- package/dist/types/components/Badge/Badge.d.ts +8 -34
- package/dist/types/components/Button/Button.d.ts +7 -43
- package/dist/types/components/Card/Card.d.ts +7 -64
- package/dist/types/components/Checkbox/Checkbox.d.ts +5 -59
- package/dist/types/components/CheckboxGroup/CheckboxGroup.d.ts +5 -53
- package/dist/types/components/Chip/Chip.d.ts +7 -33
- package/dist/types/components/DataGrid/DataGrid.d.ts +97 -0
- package/dist/types/components/DataGrid/index.d.ts +2 -0
- package/dist/types/components/Divider/Divider.d.ts +5 -72
- package/dist/types/components/Flex/Flex.d.ts +5 -26
- package/dist/types/components/Grid/Grid.d.ts +5 -77
- package/dist/types/components/Header/Header.d.ts +5 -33
- package/dist/types/components/Input/Input.d.ts +8 -54
- package/dist/types/components/Menu/Menu.d.ts +5 -32
- package/dist/types/components/Modal/Modal.d.ts +7 -73
- package/dist/types/components/MultiSelect/MultiSelect.d.ts +5 -41
- package/dist/types/components/Radio/Radio.d.ts +8 -57
- package/dist/types/components/RadioGroup/RadioGroup.d.ts +8 -59
- package/dist/types/components/Select/Select.d.ts +8 -60
- package/dist/types/components/SideMenu/SideMenu.d.ts +5 -34
- package/dist/types/components/SideMenu/SideMenu.examples.d.ts +18 -0
- package/dist/types/components/SideMenu/index.d.ts +1 -3
- package/dist/types/components/Table/Table.d.ts +108 -60
- package/dist/types/components/Text/Text.d.ts +4 -1
- package/dist/types/components/Timeline/Timeline.d.ts +34 -0
- package/dist/types/components/Timeline/index.d.ts +2 -0
- package/dist/types/components/Toast/Toast.d.ts +5 -51
- package/dist/types/hoc/withParsedClasses.d.ts +4 -1
- package/dist/types/icons/IconComponents.d.ts +55 -0
- package/dist/types/icons/index.d.ts +1 -0
- package/dist/types/index.d.ts +21 -1
- package/dist/types/stories/components/Accordion.stories.d.ts +11 -0
- package/dist/types/stories/components/Alert.stories.d.ts +9 -0
- package/dist/types/stories/components/Avatar.stories.d.ts +13 -0
- package/dist/types/stories/components/Badge.stories.d.ts +8 -0
- package/dist/types/stories/components/Button.stories.d.ts +9 -0
- package/dist/types/stories/components/Card.stories.d.ts +8 -0
- package/dist/types/stories/components/Checkbox.stories.d.ts +17 -0
- package/dist/types/stories/components/CheckboxGroup.stories.d.ts +13 -0
- package/dist/types/stories/components/Chip.stories.d.ts +22 -0
- package/dist/types/stories/components/DataGrid.stories.d.ts +20 -0
- package/dist/types/stories/components/Divider.stories.d.ts +15 -0
- package/dist/types/stories/components/Flex.stories.d.ts +14 -0
- package/dist/types/stories/components/Grid.stories.d.ts +11 -0
- package/dist/types/stories/components/Header.stories.d.ts +14 -0
- package/dist/types/stories/components/Input.stories.d.ts +9 -0
- package/dist/types/stories/components/Menu.stories.d.ts +13 -0
- package/dist/types/stories/components/Modal.stories.d.ts +12 -0
- package/dist/types/stories/components/MultiSelect.stories.d.ts +19 -0
- package/dist/types/stories/components/Radio.stories.d.ts +16 -0
- package/dist/types/stories/components/RadioGroup.stories.d.ts +15 -0
- package/dist/types/stories/components/Select.stories.d.ts +17 -0
- package/dist/types/stories/components/SideMenu.stories.d.ts +62 -0
- package/dist/types/stories/components/Table.stories.d.ts +25 -0
- package/dist/types/stories/components/Text.stories.d.ts +18 -0
- package/dist/types/stories/components/Timeline.stories.d.ts +20 -0
- package/dist/types/stories/components/Toast.stories.d.ts +17 -0
- package/dist/types/stories/components/Tooltip.stories.d.ts +20 -0
- package/dist/types/stories/widgets/InfoCard.stories.d.ts +12 -0
- package/dist/types/stories/widgets/InfoListCard.stories.d.ts +19 -0
- package/dist/types/stories/widgets/InfoText.stories.d.ts +30 -0
- package/dist/types/stories/widgets/OrderCard.stories.d.ts +13 -0
- package/dist/types/stories/widgets/OrderConfirmation.stories.d.ts +36 -0
- package/dist/types/stories/widgets/OrderDetails.stories.d.ts +11 -0
- package/dist/types/stories/widgets/ProductCard.stories.d.ts +25 -0
- package/dist/types/theme/index.d.ts +1 -1
- package/dist/types/widgets/Header/Header.d.ts +252 -0
- package/dist/types/widgets/Header/Header.examples.d.ts +17 -0
- package/dist/types/widgets/Header/Header.megamenu.examples.d.ts +22 -0
- package/dist/types/widgets/Header/Header.stories.d.ts +30 -0
- package/dist/types/widgets/Header/index.d.ts +2 -0
- package/dist/types/widgets/InfoCard/InfoCard.d.ts +40 -0
- package/dist/types/widgets/InfoCard/index.d.ts +1 -0
- package/dist/types/widgets/InfoListCard/InfoListCard.d.ts +43 -0
- package/dist/types/widgets/InfoListCard/index.d.ts +2 -0
- package/dist/types/widgets/InfoText/InfoText.d.ts +144 -0
- package/dist/types/widgets/InfoText/InfoText.examples.d.ts +33 -0
- package/dist/types/widgets/InfoText/index.d.ts +1 -0
- package/dist/types/widgets/OrderCard/OrderCard.d.ts +71 -0
- package/dist/types/widgets/OrderCard/index.d.ts +2 -0
- package/dist/types/widgets/OrderConfirmation/OrderConfirmation.d.ts +85 -0
- package/dist/types/widgets/OrderConfirmation/index.d.ts +3 -0
- package/dist/types/widgets/OrderDetails/OrderDetails.d.ts +91 -0
- package/dist/types/widgets/OrderDetails/index.d.ts +3 -0
- package/dist/types/widgets/ProductCard/ProductCard.d.ts +42 -0
- package/dist/types/widgets/ProductCard/index.d.ts +1 -0
- package/dist/types/widgets/product-card-old/ProductCard.d.ts +12 -0
- package/package.json +73 -59
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import Timeline from '../../components/Timeline/Timeline';
|
|
3
|
+
declare const meta: Meta<typeof Timeline>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof Timeline>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const WithDescriptions: Story;
|
|
8
|
+
export declare const Numbered: Story;
|
|
9
|
+
export declare const CircleVariant: Story;
|
|
10
|
+
export declare const SimpleVariant: Story;
|
|
11
|
+
export declare const Vertical: Story;
|
|
12
|
+
export declare const VerticalNumbered: Story;
|
|
13
|
+
export declare const LargeSize: Story;
|
|
14
|
+
export declare const SmallSize: Story;
|
|
15
|
+
export declare const ColorVariants: Story;
|
|
16
|
+
export declare const AllVariants: Story;
|
|
17
|
+
export declare const CustomIcons: Story;
|
|
18
|
+
export declare const Clickable: Story;
|
|
19
|
+
export declare const LongLabels: Story;
|
|
20
|
+
export declare const ManySteps: Story;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Toast } from '../../components/Toast';
|
|
3
|
+
declare const meta: Meta<typeof Toast>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Success: Story;
|
|
7
|
+
export declare const Error: Story;
|
|
8
|
+
export declare const Warning: Story;
|
|
9
|
+
export declare const Info: Story;
|
|
10
|
+
export declare const WithAction: Story;
|
|
11
|
+
export declare const WithoutTitle: Story;
|
|
12
|
+
export declare const Persistent: Story;
|
|
13
|
+
export declare const CustomDuration: Story;
|
|
14
|
+
export declare const Interactive: Story;
|
|
15
|
+
export declare const LongMessage: Story;
|
|
16
|
+
export declare const WithCloseButton: Story;
|
|
17
|
+
export declare const AllVariants: Story;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { Tooltip } from '../../components/Tooltip';
|
|
3
|
+
declare const meta: Meta<typeof Tooltip>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const Top: Story;
|
|
8
|
+
export declare const Bottom: Story;
|
|
9
|
+
export declare const Left: Story;
|
|
10
|
+
export declare const Right: Story;
|
|
11
|
+
export declare const ClickTrigger: Story;
|
|
12
|
+
export declare const FocusTrigger: Story;
|
|
13
|
+
export declare const LongContent: Story;
|
|
14
|
+
export declare const WithDelay: Story;
|
|
15
|
+
export declare const NoArrow: Story;
|
|
16
|
+
export declare const CustomContent: Story;
|
|
17
|
+
export declare const OnDisabledElement: Story;
|
|
18
|
+
export declare const MultipleTooltips: Story;
|
|
19
|
+
export declare const WithIcon: Story;
|
|
20
|
+
export declare const InteractiveTooltip: Story;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
title: string;
|
|
3
|
+
component: import("react").FC<import("../..").InfoCardBaseProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
4
|
+
subcomponents: {
|
|
5
|
+
Metric: import("react").FC<import("../..").InfoCardMetricProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
6
|
+
};
|
|
7
|
+
};
|
|
8
|
+
export default _default;
|
|
9
|
+
export declare const Base: () => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare const BaseVariants: () => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export declare const Metric: () => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export declare const MetricCustom: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import InfoListCard from '../../widgets/InfoListCard/InfoListCard';
|
|
3
|
+
declare const meta: Meta<typeof InfoListCard>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof InfoListCard>;
|
|
6
|
+
export declare const PaymentInformation: Story;
|
|
7
|
+
export declare const OrderDetails: Story;
|
|
8
|
+
export declare const WithDividers: Story;
|
|
9
|
+
export declare const LongText: Story;
|
|
10
|
+
export declare const Compact: Story;
|
|
11
|
+
export declare const NoHeading: Story;
|
|
12
|
+
export declare const ColorVariants: Story;
|
|
13
|
+
export declare const AccountInfo: Story;
|
|
14
|
+
export declare const ElevatedVariant: Story;
|
|
15
|
+
export declare const FlatVariant: Story;
|
|
16
|
+
export declare const MultipleCards: Story;
|
|
17
|
+
export declare const HiddenItems: Story;
|
|
18
|
+
export declare const ResponsiveDemo: Story;
|
|
19
|
+
export declare const WithReactNodes: Story;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
title: string;
|
|
3
|
+
component: import("react").FC<import("../..").InfoTextBaseProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
4
|
+
subcomponents: {
|
|
5
|
+
Base: import("react").FC<import("../..").InfoTextBaseProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
6
|
+
Stat: import("react").FC<import("../..").InfoTextStatProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
7
|
+
Feature: import("react").FC<import("../..").InfoTextFeatureProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
8
|
+
Compact: import("react").FC<import("../..").InfoTextCompactProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
9
|
+
Vertical: import("react").FC<import("../..").InfoTextVerticalProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
export default _default;
|
|
13
|
+
export declare const Base: () => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export declare const BaseVariants: () => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare const BaseWithoutSubtext: () => import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export declare const BaseWithoutCircle: () => import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export declare const Stat: () => import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export declare const StatVariants: () => import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export declare const StatWithoutIcon: () => import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
export declare const StatWithoutCircle: () => import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
export declare const Feature: () => import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export declare const FeatureVariants: () => import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
export declare const Compact: () => import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
export declare const CompactVariants: () => import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
export declare const Vertical: () => import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
export declare const VerticalVariants: () => import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
export declare const AllIconVariants: () => import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
export declare const MixedUsage: () => import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
export declare const GridLayout: () => import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
export declare const FeatureGrid: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import OrderCard from '../../widgets/OrderCard/OrderCard';
|
|
3
|
+
declare const meta: Meta<typeof OrderCard>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof OrderCard>;
|
|
6
|
+
export declare const Delivered: Story;
|
|
7
|
+
export declare const Processing: Story;
|
|
8
|
+
export declare const Cancelled: Story;
|
|
9
|
+
export declare const LongProductName: Story;
|
|
10
|
+
export declare const Pending: Story;
|
|
11
|
+
export declare const NoImage: Story;
|
|
12
|
+
export declare const MultipleItems: Story;
|
|
13
|
+
export declare const OrdersList: Story;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react';
|
|
2
|
+
declare const meta: {
|
|
3
|
+
title: string;
|
|
4
|
+
component: import("react").FC<import("../..").OrderConfirmationProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
5
|
+
parameters: {
|
|
6
|
+
layout: string;
|
|
7
|
+
};
|
|
8
|
+
tags: string[];
|
|
9
|
+
argTypes: {
|
|
10
|
+
onDownloadInvoice: {
|
|
11
|
+
action: string;
|
|
12
|
+
};
|
|
13
|
+
onContinueShopping: {
|
|
14
|
+
action: string;
|
|
15
|
+
};
|
|
16
|
+
onTrackOrder: {
|
|
17
|
+
action: string;
|
|
18
|
+
};
|
|
19
|
+
onViewDetails: {
|
|
20
|
+
action: string;
|
|
21
|
+
};
|
|
22
|
+
onContactSupport: {
|
|
23
|
+
action: string;
|
|
24
|
+
};
|
|
25
|
+
onShareOrder: {
|
|
26
|
+
action: string;
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
export default meta;
|
|
31
|
+
type Story = StoryObj<typeof meta>;
|
|
32
|
+
export declare const Default: Story;
|
|
33
|
+
export declare const WithDiscount: Story;
|
|
34
|
+
export declare const MultipleItems: Story;
|
|
35
|
+
export declare const MinimalInfo: Story;
|
|
36
|
+
export declare const Delivered: Story;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { OrderDetails } from '../../widgets/OrderDetails/OrderDetails';
|
|
3
|
+
declare const meta: Meta<typeof OrderDetails>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Processing: Story;
|
|
7
|
+
export declare const Shipped: Story;
|
|
8
|
+
export declare const Delivered: Story;
|
|
9
|
+
export declare const Pending: Story;
|
|
10
|
+
export declare const Cancelled: Story;
|
|
11
|
+
export declare const MultipleItems: Story;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
declare const _default: {
|
|
3
|
+
title: string;
|
|
4
|
+
component: {
|
|
5
|
+
Base: React.FC<import("../..").ProductCardProps & React.RefAttributes<HTMLDivElement>>;
|
|
6
|
+
Wide: React.FC<import("../..").ProductCardWideProps & React.RefAttributes<HTMLDivElement>>;
|
|
7
|
+
Minimal: React.FC<import("../..").ProductCardProps & React.RefAttributes<HTMLDivElement>>;
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
export default _default;
|
|
11
|
+
export declare const Basic: () => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export declare const WithWishlist: () => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export declare const FeaturedProduct: () => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export declare const WithQuickView: () => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare const WithInitialQuantity: () => import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export declare const Loading: () => import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export declare const WithoutCategory: () => import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
export declare const WithoutWeight: () => import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
export declare const WithoutRating: () => import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
export declare const ProductGrid: () => import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
export declare const Interactive: () => import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export declare const WideVariant: () => import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
export declare const WideVariantImageRight: () => import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
export declare const MinimalVariant: () => import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
export declare const AllVariants: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { ThemeProvider, useThemeContext } from './ThemeProvider';
|
|
2
2
|
export { tokens } from './tokens';
|
|
3
3
|
export { generateCSSVariables, injectCSSVariables } from './cssVariables';
|
|
4
|
-
export type { Theme, ThemeProviderProps } from './ThemeProvider';
|
|
4
|
+
export type { Theme, ThemeProviderProps, Size } from './ThemeProvider';
|
|
5
5
|
export type { Tokens, ColorScale, ColorShade } from './tokens';
|
|
6
6
|
import './base.css';
|
|
@@ -0,0 +1,252 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './Header.css';
|
|
3
|
+
export interface TopBarConfig {
|
|
4
|
+
/**
|
|
5
|
+
* Content to display in the top bar
|
|
6
|
+
*/
|
|
7
|
+
content?: React.ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Left-aligned content
|
|
10
|
+
*/
|
|
11
|
+
leftContent?: React.ReactNode;
|
|
12
|
+
/**
|
|
13
|
+
* Right-aligned content
|
|
14
|
+
*/
|
|
15
|
+
rightContent?: React.ReactNode;
|
|
16
|
+
/**
|
|
17
|
+
* Top bar styling variant
|
|
18
|
+
* @default 'subtle'
|
|
19
|
+
*/
|
|
20
|
+
variant?: 'subtle' | 'bold' | 'accent' | 'dark' | 'gradient';
|
|
21
|
+
/**
|
|
22
|
+
* If true, shows a dismiss button
|
|
23
|
+
*/
|
|
24
|
+
dismissible?: boolean;
|
|
25
|
+
/**
|
|
26
|
+
* Callback when dismiss button is clicked
|
|
27
|
+
*/
|
|
28
|
+
onDismiss?: () => void;
|
|
29
|
+
}
|
|
30
|
+
export interface MegaMenuColumn {
|
|
31
|
+
/**
|
|
32
|
+
* Column title
|
|
33
|
+
*/
|
|
34
|
+
title?: React.ReactNode;
|
|
35
|
+
/**
|
|
36
|
+
* Column items
|
|
37
|
+
*/
|
|
38
|
+
items: NavigationItem[];
|
|
39
|
+
}
|
|
40
|
+
export interface NavigationItem {
|
|
41
|
+
/**
|
|
42
|
+
* Unique identifier for the navigation item
|
|
43
|
+
*/
|
|
44
|
+
id: string;
|
|
45
|
+
/**
|
|
46
|
+
* Label text to display
|
|
47
|
+
*/
|
|
48
|
+
label: React.ReactNode;
|
|
49
|
+
/**
|
|
50
|
+
* URL or path for navigation
|
|
51
|
+
*/
|
|
52
|
+
href?: string;
|
|
53
|
+
/**
|
|
54
|
+
* Icon to display before label
|
|
55
|
+
*/
|
|
56
|
+
icon?: React.ReactNode;
|
|
57
|
+
/**
|
|
58
|
+
* Nested child items for dropdown menus
|
|
59
|
+
*/
|
|
60
|
+
children?: NavigationItem[];
|
|
61
|
+
/**
|
|
62
|
+
* Click handler
|
|
63
|
+
*/
|
|
64
|
+
onClick?: () => void;
|
|
65
|
+
/**
|
|
66
|
+
* If true, marks this item as active/selected
|
|
67
|
+
*/
|
|
68
|
+
active?: boolean;
|
|
69
|
+
/**
|
|
70
|
+
* If true, disables the item
|
|
71
|
+
*/
|
|
72
|
+
disabled?: boolean;
|
|
73
|
+
/**
|
|
74
|
+
* Badge content to display (e.g., notification count)
|
|
75
|
+
*/
|
|
76
|
+
badge?: React.ReactNode;
|
|
77
|
+
/**
|
|
78
|
+
* If true, renders as a mega menu with columns
|
|
79
|
+
*/
|
|
80
|
+
megaMenu?: boolean;
|
|
81
|
+
/**
|
|
82
|
+
* Mega menu columns (when megaMenu is true)
|
|
83
|
+
*/
|
|
84
|
+
megaMenuColumns?: MegaMenuColumn[];
|
|
85
|
+
/**
|
|
86
|
+
* Description text for mega menu items
|
|
87
|
+
*/
|
|
88
|
+
description?: React.ReactNode;
|
|
89
|
+
/**
|
|
90
|
+
* Featured image for mega menu
|
|
91
|
+
*/
|
|
92
|
+
image?: string;
|
|
93
|
+
}
|
|
94
|
+
export interface HeaderDesktopProps extends React.HTMLAttributes<HTMLElement> {
|
|
95
|
+
/**
|
|
96
|
+
* Logo element or brand name
|
|
97
|
+
*/
|
|
98
|
+
logo?: React.ReactNode;
|
|
99
|
+
/**
|
|
100
|
+
* Array of navigation items
|
|
101
|
+
*/
|
|
102
|
+
navItems?: NavigationItem[];
|
|
103
|
+
/**
|
|
104
|
+
* Action buttons or elements to display on the right
|
|
105
|
+
*/
|
|
106
|
+
actions?: React.ReactNode;
|
|
107
|
+
/**
|
|
108
|
+
* Visual theme variant
|
|
109
|
+
* @default 'primary'
|
|
110
|
+
*/
|
|
111
|
+
variant?: 'primary' | 'secondary' | 'dark' | 'light' | 'transparent' | 'gradient';
|
|
112
|
+
/**
|
|
113
|
+
* If true, header has a shadow effect
|
|
114
|
+
* @default false
|
|
115
|
+
*/
|
|
116
|
+
elevated?: boolean;
|
|
117
|
+
/**
|
|
118
|
+
* If true, header sticks to top on scroll
|
|
119
|
+
* @default false
|
|
120
|
+
*/
|
|
121
|
+
sticky?: boolean;
|
|
122
|
+
/**
|
|
123
|
+
* If true, makes header full bleed (no max-width)
|
|
124
|
+
* @default false
|
|
125
|
+
*/
|
|
126
|
+
fullWidth?: boolean;
|
|
127
|
+
/**
|
|
128
|
+
* If true, enables search functionality
|
|
129
|
+
* @default false
|
|
130
|
+
*/
|
|
131
|
+
searchEnabled?: boolean;
|
|
132
|
+
/**
|
|
133
|
+
* Search placeholder text
|
|
134
|
+
*/
|
|
135
|
+
searchPlaceholder?: string;
|
|
136
|
+
/**
|
|
137
|
+
* Search input handler
|
|
138
|
+
*/
|
|
139
|
+
onSearch?: (query: string) => void;
|
|
140
|
+
/**
|
|
141
|
+
* Custom logo click handler
|
|
142
|
+
*/
|
|
143
|
+
onLogoClick?: () => void;
|
|
144
|
+
/**
|
|
145
|
+
* Layout style for the header
|
|
146
|
+
* @default 'single-row'
|
|
147
|
+
*/
|
|
148
|
+
layout?: 'single-row' | 'two-row' | 'centered';
|
|
149
|
+
/**
|
|
150
|
+
* Two-row bottom styling variant (only applicable when layout='two-row')
|
|
151
|
+
* @default 'default'
|
|
152
|
+
*/
|
|
153
|
+
twoRowBottomStyle?: 'default' | 'divider' | 'dark-bottom' | 'gradient-bottom' | 'elevated-bottom';
|
|
154
|
+
/**
|
|
155
|
+
* Top bar configuration (displays above main header)
|
|
156
|
+
*/
|
|
157
|
+
topBar?: TopBarConfig;
|
|
158
|
+
/**
|
|
159
|
+
* Scroll behavior - 'transparent-to-solid' makes header transparent initially and solid on scroll
|
|
160
|
+
* @default undefined
|
|
161
|
+
*/
|
|
162
|
+
scrollBehavior?: 'transparent-to-solid';
|
|
163
|
+
/**
|
|
164
|
+
* Scroll threshold in pixels before applying scroll effect
|
|
165
|
+
* @default 50
|
|
166
|
+
*/
|
|
167
|
+
scrollThreshold?: number;
|
|
168
|
+
/**
|
|
169
|
+
* Callback fired when scroll state changes
|
|
170
|
+
* @param scrolled - true if user has scrolled past threshold, false otherwise
|
|
171
|
+
*/
|
|
172
|
+
onScrollStateChange?: (scrolled: boolean) => void;
|
|
173
|
+
className?: string;
|
|
174
|
+
style?: React.CSSProperties;
|
|
175
|
+
}
|
|
176
|
+
export interface HeaderMobileProps extends React.HTMLAttributes<HTMLElement> {
|
|
177
|
+
/**
|
|
178
|
+
* Logo element or brand name
|
|
179
|
+
*/
|
|
180
|
+
logo?: React.ReactNode;
|
|
181
|
+
/**
|
|
182
|
+
* Array of navigation items
|
|
183
|
+
*/
|
|
184
|
+
navItems?: NavigationItem[];
|
|
185
|
+
/**
|
|
186
|
+
* Action buttons or elements to display on the right
|
|
187
|
+
*/
|
|
188
|
+
actions?: React.ReactNode;
|
|
189
|
+
/**
|
|
190
|
+
* Visual theme variant
|
|
191
|
+
* @default 'primary'
|
|
192
|
+
*/
|
|
193
|
+
variant?: 'primary' | 'secondary' | 'dark' | 'light' | 'transparent' | 'gradient';
|
|
194
|
+
/**
|
|
195
|
+
* If true, header has a shadow effect
|
|
196
|
+
* @default false
|
|
197
|
+
*/
|
|
198
|
+
elevated?: boolean;
|
|
199
|
+
/**
|
|
200
|
+
* If true, header sticks to top on scroll
|
|
201
|
+
* @default false
|
|
202
|
+
*/
|
|
203
|
+
sticky?: boolean;
|
|
204
|
+
/**
|
|
205
|
+
* If true, enables search functionality in mobile menu
|
|
206
|
+
* @default false
|
|
207
|
+
*/
|
|
208
|
+
searchEnabled?: boolean;
|
|
209
|
+
/**
|
|
210
|
+
* Search placeholder text
|
|
211
|
+
*/
|
|
212
|
+
searchPlaceholder?: string;
|
|
213
|
+
/**
|
|
214
|
+
* Search input handler
|
|
215
|
+
*/
|
|
216
|
+
onSearch?: (query: string) => void;
|
|
217
|
+
/**
|
|
218
|
+
* Custom logo click handler
|
|
219
|
+
*/
|
|
220
|
+
onLogoClick?: () => void;
|
|
221
|
+
/**
|
|
222
|
+
* Menu open state (controlled)
|
|
223
|
+
*/
|
|
224
|
+
menuOpen?: boolean;
|
|
225
|
+
/**
|
|
226
|
+
* Menu open change handler (controlled)
|
|
227
|
+
*/
|
|
228
|
+
onMenuOpenChange?: (open: boolean) => void;
|
|
229
|
+
className?: string;
|
|
230
|
+
style?: React.CSSProperties;
|
|
231
|
+
}
|
|
232
|
+
export interface HeaderResponsiveProps {
|
|
233
|
+
/**
|
|
234
|
+
* Props for desktop header
|
|
235
|
+
*/
|
|
236
|
+
desktopProps: HeaderDesktopProps;
|
|
237
|
+
/**
|
|
238
|
+
* Props for mobile header
|
|
239
|
+
*/
|
|
240
|
+
mobileProps: HeaderMobileProps;
|
|
241
|
+
/**
|
|
242
|
+
* Breakpoint in pixels to switch between desktop and mobile
|
|
243
|
+
* @default 768
|
|
244
|
+
*/
|
|
245
|
+
breakpoint?: number;
|
|
246
|
+
}
|
|
247
|
+
export declare const Header: {
|
|
248
|
+
Desktop: React.FC<HeaderDesktopProps & React.RefAttributes<HTMLElement>>;
|
|
249
|
+
Mobile: React.FC<HeaderMobileProps & React.RefAttributes<HTMLElement>>;
|
|
250
|
+
Responsive: React.FC<HeaderResponsiveProps>;
|
|
251
|
+
};
|
|
252
|
+
export default Header;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export declare const BasicDesktopExample: () => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare const NestedNavigationExample: () => import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export declare const EcommerceDesktopExample: () => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export declare const MobileHeaderExample: () => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export declare const ResponsiveHeaderExample: () => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare const AllVariantsExample: () => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export declare const SaaSHeaderExample: () => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export declare const HeaderExamples: {
|
|
9
|
+
BasicDesktop: () => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
NestedNavigation: () => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
EcommerceDesktop: () => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
Mobile: () => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
Responsive: () => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
AllVariants: () => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
SaaS: () => import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
};
|
|
17
|
+
export default HeaderExamples;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Example 1: E-commerce Header with Mega Menu
|
|
3
|
+
* Layout: Two rows (Logo + Search + Actions on top, Mega menu navigation below)
|
|
4
|
+
*/
|
|
5
|
+
export declare const EcommerceMegaMenuExample: () => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
/**
|
|
7
|
+
* Example 2: SaaS Platform with Mega Menu
|
|
8
|
+
* Layout: Two rows with centered search
|
|
9
|
+
*/
|
|
10
|
+
export declare const SaaSMegaMenuExample: () => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
/**
|
|
12
|
+
* Example 3: Corporate Website with Centered Layout
|
|
13
|
+
*/
|
|
14
|
+
export declare const CenteredMegaMenuExample: () => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
/**
|
|
16
|
+
* Example 4: Standard Single Row with Mega Menu
|
|
17
|
+
*/
|
|
18
|
+
export declare const SingleRowMegaMenuExample: () => import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
/**
|
|
20
|
+
* Example 5: Mixed Mega Menu and Regular Dropdowns
|
|
21
|
+
*/
|
|
22
|
+
export declare const MixedNavigationExample: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react';
|
|
2
|
+
import { Header } from './Header';
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: import("react").FC<import("./Header").HeaderResponsiveProps>;
|
|
6
|
+
parameters: {
|
|
7
|
+
layout: string;
|
|
8
|
+
};
|
|
9
|
+
tags: string[];
|
|
10
|
+
};
|
|
11
|
+
export default meta;
|
|
12
|
+
type Story = StoryObj<typeof Header.Responsive>;
|
|
13
|
+
type MobileStory = StoryObj<typeof Header.Mobile>;
|
|
14
|
+
type ResponsiveStory = StoryObj<typeof Header.Responsive>;
|
|
15
|
+
export declare const Primary: Story;
|
|
16
|
+
export declare const WithSearch: Story;
|
|
17
|
+
export declare const WithActions: Story;
|
|
18
|
+
export declare const NestedMenu: Story;
|
|
19
|
+
export declare const FullFeatured: Story;
|
|
20
|
+
export declare const TwoRowLayout: Story;
|
|
21
|
+
export declare const WithMegaMenu: Story;
|
|
22
|
+
export declare const MobilePrimary: MobileStory;
|
|
23
|
+
export declare const MobileDark: MobileStory;
|
|
24
|
+
export declare const MobileNested: MobileStory;
|
|
25
|
+
export declare const MobileWithSearch: MobileStory;
|
|
26
|
+
export declare const MobileWithActions: MobileStory;
|
|
27
|
+
export declare const ResponsiveBasic: ResponsiveStory;
|
|
28
|
+
export declare const ResponsiveTwoRowWithMegaMenu: ResponsiveStory;
|
|
29
|
+
export declare const ScrollTransparentToSolid: Story;
|
|
30
|
+
export declare const ScrollTwoRowTransparent: Story;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './InfoCard.css';
|
|
3
|
+
export interface InfoCardBaseProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
4
|
+
/**
|
|
5
|
+
* Icon element to display
|
|
6
|
+
*/
|
|
7
|
+
icon: React.ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Visual variant for the icon styling
|
|
10
|
+
* @default 'primary'
|
|
11
|
+
*/
|
|
12
|
+
iconVariant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
|
|
13
|
+
/**
|
|
14
|
+
* Main text content
|
|
15
|
+
*/
|
|
16
|
+
text: React.ReactNode;
|
|
17
|
+
/**
|
|
18
|
+
* Optional secondary text below main text
|
|
19
|
+
*/
|
|
20
|
+
subText?: React.ReactNode;
|
|
21
|
+
className?: string;
|
|
22
|
+
style?: React.CSSProperties;
|
|
23
|
+
}
|
|
24
|
+
export interface InfoCardMetricProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
25
|
+
/**
|
|
26
|
+
* Primary value/metric to display
|
|
27
|
+
*/
|
|
28
|
+
value: React.ReactNode;
|
|
29
|
+
/**
|
|
30
|
+
* Optional label for the metric
|
|
31
|
+
*/
|
|
32
|
+
label?: React.ReactNode;
|
|
33
|
+
className?: string;
|
|
34
|
+
style?: React.CSSProperties;
|
|
35
|
+
}
|
|
36
|
+
export declare const InfoCard: {
|
|
37
|
+
Base: React.FC<InfoCardBaseProps & React.RefAttributes<HTMLDivElement>>;
|
|
38
|
+
Metric: React.FC<InfoCardMetricProps & React.RefAttributes<HTMLDivElement>>;
|
|
39
|
+
};
|
|
40
|
+
export default InfoCard;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './InfoCard';
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import './InfoListCard.css';
|
|
3
|
+
export interface InfoListItem {
|
|
4
|
+
/** Label/key - can be text or any React node */
|
|
5
|
+
label: React.ReactNode;
|
|
6
|
+
/** Value - can be text or any React node */
|
|
7
|
+
value: React.ReactNode;
|
|
8
|
+
/** Optional CSS class for value styling */
|
|
9
|
+
valueClass?: string;
|
|
10
|
+
/** Optional CSS class for label styling */
|
|
11
|
+
labelClass?: string;
|
|
12
|
+
/** Hide this item */
|
|
13
|
+
hidden?: boolean;
|
|
14
|
+
}
|
|
15
|
+
export interface InfoListCardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
16
|
+
/** Card heading/title */
|
|
17
|
+
heading?: string;
|
|
18
|
+
/** Array of label-value pairs */
|
|
19
|
+
items: InfoListItem[];
|
|
20
|
+
/** Show divider between items
|
|
21
|
+
* @default false
|
|
22
|
+
*/
|
|
23
|
+
showDividers?: boolean;
|
|
24
|
+
/** Compact spacing
|
|
25
|
+
* @default false
|
|
26
|
+
*/
|
|
27
|
+
compact?: boolean;
|
|
28
|
+
/** Card variant
|
|
29
|
+
* @default 'outlined'
|
|
30
|
+
*/
|
|
31
|
+
variant?: 'outlined' | 'elevated' | 'flat';
|
|
32
|
+
/** Additional class name */
|
|
33
|
+
className?: string;
|
|
34
|
+
/** Inline styles */
|
|
35
|
+
style?: React.CSSProperties;
|
|
36
|
+
}
|
|
37
|
+
declare const InfoListCardWithParsedClasses: {
|
|
38
|
+
(props: InfoListCardProps & React.RefAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
|
|
39
|
+
displayName: string;
|
|
40
|
+
};
|
|
41
|
+
declare const _default: React.FC<InfoListCardProps & React.RefAttributes<HTMLDivElement>>;
|
|
42
|
+
export default _default;
|
|
43
|
+
export { InfoListCardWithParsedClasses as InfoListCard };
|