= {
title: 'Components/Inputs/Button',
@@ -55,25 +56,25 @@ const ButtonVariants = ({ variant }: { variant: ButtonProps['variant'] }) => (
);
export const SolidVariant: Story = {
- storyName: 'Solid Button Variant',
+ name: 'Solid Button Variant',
tags: ['unlisted'],
render: () =>
diff --git a/src/components/DSRContextProvider.tsx b/src/components/ChayaProvider/index.tsx
similarity index 68%
rename from src/components/DSRContextProvider.tsx
rename to src/components/ChayaProvider/index.tsx
index 813cda97..54d5d940 100644
--- a/src/components/DSRContextProvider.tsx
+++ b/src/components/ChayaProvider/index.tsx
@@ -2,11 +2,12 @@
import React, { memo, ReactElement, ReactNode, useEffect, useMemo } from 'react';
import Color from 'color';
-import DSRContext, { IconWrapperType, LinkWrapper } from '../contexts/DSRContext';
-import { Theme } from '../types/theme';
-import { RGBAtoRGB } from '../utils/color';
+import ChayaContext, { IconWrapperType, LinkWrapper } from '../../contexts/ChayaContext';
+import { Theme } from '../../types/theme';
+import { RGBAtoRGB } from '../../utils/color';
+import { IconProps, Icons } from '../Icon';
-const defaultLinkWrapper = (link: string, component: ReactElement) => component;
+import { getTheme } from './themes';
const ThemeScript = memo(
({ theme, isDarkTheme }: { theme: Theme; isDarkTheme: boolean }) => {
@@ -72,7 +73,20 @@ const ThemeScript = memo(
const script = document.getElementById('theme-script');
if (script) {
- eval(`!function(){${getScriptSrc()}}();`);
+ const css = generateCSS();
+ var style = document.getElementById('theme-style');
+ if (!style) {
+ style = document.createElement('style');
+ style.id = 'theme-style';
+ document.head.appendChild(style);
+ }
+ style.innerHTML = `:root { ${css} }`;
+
+ if (isDarkTheme) {
+ document.body.classList.add('dark');
+ } else {
+ document.body.classList.remove('dark');
+ }
}
}, [theme]);
@@ -88,29 +102,42 @@ const ThemeScript = memo(
(prevProps, nextProps) => prevProps.theme === nextProps.theme,
);
+const defaultIconWrapper = (icon: Icons, props?: IconProps) => (
+
-
+
);
};
-export default DSRContextProvider;
\ No newline at end of file
+export default ChayaProvider;
\ No newline at end of file
diff --git a/src/components/ChayaProvider/themes.ts b/src/components/ChayaProvider/themes.ts
new file mode 100644
index 00000000..a1b38d4a
--- /dev/null
+++ b/src/components/ChayaProvider/themes.ts
@@ -0,0 +1,34 @@
+export const DEFAULT_LIGHT_THEME = {
+ primary: '#0f51c3',
+ primaryTextColor: '#fff',
+ secondary: '#77019e',
+ secondaryTextColor: '#fff',
+ color: '#333',
+ background: '#FAFAFA',
+};
+
+export const DEFAULT_DARK_THEME = {
+ primary: '#1d66e5',
+ primaryTextColor: '#fff',
+ secondary: '#b64fd7',
+ secondaryTextColor: '#fff',
+ color: '#FAFAFA',
+ background: '#212121',
+};
+
+type THEMES = 'DEFAULT' | 'SOLARIZED';
+
+export const getTheme = (theme: THEMES, isDarkMode: boolean) => {
+ if (isDarkMode) {
+ switch (theme) {
+ default:
+ return DEFAULT_DARK_THEME;
+ }
+ }
+ switch (theme) {
+ default:
+ return DEFAULT_LIGHT_THEME;
+ }
+
+};
+
diff --git a/src/components/DataTableManager/index.tsx b/src/components/DataTableManager/index.tsx
index ef062bcc..24b0c8f8 100644
--- a/src/components/DataTableManager/index.tsx
+++ b/src/components/DataTableManager/index.tsx
@@ -7,8 +7,7 @@ import Button from '../Button';
import SearchBox from '../SearchBox';
import DropdownFilter from '../DropdownFilter';
import { IconInputType } from '../Icon';
-import { HorizontalNavigatorItemType } from '../HorizontalNavigator/item';
-import HorizontalNavigator from '../HorizontalNavigator';
+import HorizontalNavigator, { HorizontalNavigatorItemType } from '../HorizontalNavigator';
import DataTableManagerFilters, { DataTableFilterConfig, FilterInputs } from './filters';
diff --git a/src/components/DateTimePicker.tsx b/src/components/DateTimeInput.tsx
similarity index 96%
rename from src/components/DateTimePicker.tsx
rename to src/components/DateTimeInput.tsx
index 9c7dbd64..cf895075 100644
--- a/src/components/DateTimePicker.tsx
+++ b/src/components/DateTimeInput.tsx
@@ -7,11 +7,11 @@ import mcs from '../utils/merge';
import Label from './Label';
-export type DateTimePickerProps = {
+export type DateTimeInputProps = {
+ //* time in ISO timestamp format */
+ value: string | null
name: string
label: string
- // time in ISO timestamp
- value?: string
id?: string
className?: string
inputClassName?: string
@@ -25,10 +25,10 @@ export type DateTimePickerProps = {
const getUnixZero = () => '1970-01-01T00:00:00.000Z';
-const DateTimePicker = ({
+const DateTimeInput = ({
name, label, value, min, max, onChange = () => {}, isRequired = false, hideLabel = false,
id, className, inputClassName, isDisabled = false,
-}: DateTimePickerProps) => {
+}: DateTimeInputProps) => {
const [supported, setSupported] = useState(true);
const [date, setDate] = useState(null);
@@ -137,4 +137,4 @@ const DateTimePicker = ({
};
-export default DateTimePicker;
+export default DateTimeInput;
diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
index dbf2bbcf..11e61b74 100644
--- a/src/components/Dropdown/index.tsx
+++ b/src/components/Dropdown/index.tsx
@@ -7,7 +7,7 @@ import mcs from '../../utils/merge';
import styles from './dropdown.module.scss';
export type AlignOptions = 'start' | 'center' | 'end';
-export type SideOptions = 'top' | 'right' | 'bottom' | 'left';
+export type SideOptions = 'auto' | 'top' | 'right' | 'bottom' | 'left';
export type DropdownProps = {
children: ReactNode,
@@ -18,11 +18,12 @@ export type DropdownProps = {
containerClassName?: string,
align?: AlignOptions,
side?: SideOptions
+ fillTriggerWidth?: boolean,
};
const Dropdown = ({
children, buttonRenderer, isOpen = false, onClose = () => {},
- containerClassName, align = 'center', side = 'bottom',
+ containerClassName, align = 'center', side = 'bottom', fillTriggerWidth = false,
}: DropdownProps) => {
const [open, setOpen] = useState(isOpen);
@@ -45,10 +46,10 @@ const Dropdown = ({
])}
sideOffset={5}
align={align}
- side={side}
- // style={{
- // width: 'var(--radix-dropdown-menu-trigger-width)',
- // }}
+ side={side != 'auto' ? side : undefined}
+ style={fillTriggerWidth ? {
+ width: 'var(--radix-dropdown-menu-trigger-width)',
+ } : undefined}
>
{children}
diff --git a/src/components/DropdownFilter.tsx b/src/components/DropdownFilter.tsx
index 3ab36e5a..b2c96bd8 100644
--- a/src/components/DropdownFilter.tsx
+++ b/src/components/DropdownFilter.tsx
@@ -18,6 +18,7 @@ const defaultLabels = {
optionsTitle: 'Options',
selectAll: 'Select All',
clearAll: 'Clear All',
+ noResults: 'No results found',
};
export type DropdownFilterOptionType = {
@@ -37,6 +38,7 @@ type DropdownCommonProps = {
optionsTitle?: string,
selectAll?: string,
clearAll?: string,
+ noResults?: string
}
options?: DropdownFilterOptionType[],
isAsync?: boolean,
@@ -44,6 +46,7 @@ type DropdownCommonProps = {
optionButtonClassName?: string;
selections: null | any[];
setSelections?: (selections: null | any[]) => void;
+ noResultsRenderer?: () => React.ReactNode;
};
export type DropdownFilterProps = DropdownCommonProps & {
@@ -62,8 +65,9 @@ type DropdownRenderProps = DropdownCommonProps & {
};
const DropdownRender = ({
- labels: _labels, keyword, options, setKeyword, selections, setSelections = () => {}, onLoad = () => {},
- optionButtonClassName, isFetching = false,
+ labels: _labels, keyword, options, setKeyword, selections,
+ setSelections = () => {}, onLoad = () => {},
+ optionButtonClassName, isFetching = false, noResultsRenderer,
}: DropdownRenderProps) => {
const labels = { ...defaultLabels, ..._labels };
@@ -163,11 +167,11 @@ const DropdownRender = ({
))}
- ) : (
+ ) : availableOptions?.length > 0 ? (
{availableOptions.map((field, index) => (
@@ -203,6 +207,10 @@ const DropdownRender = ({
))}
+ ) : typeof noResultsRenderer === 'function' ? noResultsRenderer() : (
+
+ {labels?.noResults}
+
)}
diff --git a/src/components/DropdownMenu.tsx b/src/components/DropdownMenu.tsx
index 38053c58..f05a6ae3 100644
--- a/src/components/DropdownMenu.tsx
+++ b/src/components/DropdownMenu.tsx
@@ -37,21 +37,23 @@ export type DropdownMenuProps = {
id?: string,
containerClassName?: string,
customHeaderRenderer?: () => React.ReactNode,
+ customFooterRenderer?: () => React.ReactNode,
align?: AlignOptions,
side?: SideOptions
};
const DropdownMenu = ({
children: buttonRenderer, options, isOpen = false, onClose = () => {}, id,
- containerClassName, customHeaderRenderer, align = 'center', side = 'bottom',
+ containerClassName, customHeaderRenderer, customFooterRenderer, align = 'center', side = 'bottom',
} : DropdownMenuProps) => {
+
const linkClasses = (className?: string) => mcs([
'flex rounded-lg transition px-2.5 py-1.5 w-full text-left',
'hover:bg-gray-400/20 focus:bg-gray-400/20 focus:outline-none',
className,
]);
- const optionRenderer: (o: OptionType, index: number) => React.ReactNode = (o, index) => {
+ const optionRenderer: (o: OptionType) => React.ReactNode = (o) => {
const content = o?.renderer ? o.renderer() : (
{o.icon &&
}
@@ -66,12 +68,9 @@ const DropdownMenu = ({
className={mcs(['dropdown-menu-item cursor-pointer', linkClasses(o?.className)])}
>
{content}
- , {
- className: 'w-full', key: `dropdown-menu-item-${index}-${o?.title}`,
- }) : (
+ , { className: 'w-full' }) : (
React.ReactNode = (g, index) => {
- return (
-
- {g?.title && (
-
- {g.icon &&
- )}
- {g?.options.filter((o) => !o.isHidden).map((o, i) => optionRenderer(o, i))}
-
- );
- };
+ const groupRenderer: (g: GroupType) => React.ReactNode = (g) => (
+
+ {g?.title && (
+
+ {g.icon &&
+ )}
+ {g?.options.filter((o) => !o.isHidden).map((o, i) => (
+
+ {optionRenderer(o)}
+
+ ))}
+
+ );
return (
{customHeaderRenderer?.()}
- {(options && options.length > 0) && options.filter((o) => !o.isHidden).map((o, i) =>
- 'options' in o ? groupRenderer(o, i) : optionRenderer(o, i),
- )}
+ {(options && options.length > 0) && options.filter((o) => !o.isHidden).map((o, i) => (
+
+ {'options' in o ? groupRenderer(o) : optionRenderer(o)}
+
+ ))}
+ {customFooterRenderer?.()}
);
};
diff --git a/src/components/HorizontalNavigator/index.tsx b/src/components/HorizontalNavigator/HorizontalNavigator.tsx
similarity index 79%
rename from src/components/HorizontalNavigator/index.tsx
rename to src/components/HorizontalNavigator/HorizontalNavigator.tsx
index 439d5aec..a82108ba 100644
--- a/src/components/HorizontalNavigator/index.tsx
+++ b/src/components/HorizontalNavigator/HorizontalNavigator.tsx
@@ -4,30 +4,13 @@ import { nanoid } from 'nanoid';
import { cva } from '../../utils/cva';
import {
- colorVariantMapper, ChayaColorType, EMPTY_COLOR_MAP, BORDER_COLOR_MAP, SOLID_BG_COLOR_MAP,
+ colorVariantMapper, EMPTY_COLOR_MAP, BORDER_COLOR_MAP, SOLID_BG_COLOR_MAP,
} from '../../utils/classMaps/colors';
import mcs from '../../utils/merge';
-import HorizontalNavigatorItem, { HorizontalNavigatorItemType, HorizontalNavigatorVariantType } from './item';
-
-export type HorizontalNavigatorProps = {
- // id of the navigator
- id?: string,
- // className for the navigator
- className?: string,
- // className for each item
- itemClassName?: string,
- // items to be rendered in the navigator
- items: HorizontalNavigatorItemType[],
- // key of the active item. If null, no item will be active.
- activeItem?: string | null,
- // variant of the navigator. Can be 'pill', 'boxed' or 'line', defaults to 'pill'
- variant?: HorizontalNavigatorVariantType,
- // color of the navigator.
- color?: ChayaColorType,
- // callback when an item is clicked. Passes the key and the item as arguments.
- onClickItem?: (key: string, item: HorizontalNavigatorItemType) => void,
-};
+import HorizontalNavigatorItem from './HorizontalNavigatorItem';
+import { HorizontalNavigatorProps } from './HorizontalNavigator.types';
+import { HorizontalNavigatorVariantType } from './HorizontalNavigatorItem.types';
const activeMarkerClassName = cva({
base: [
diff --git a/src/components/HorizontalNavigator/HorizontalNavigator.types.ts b/src/components/HorizontalNavigator/HorizontalNavigator.types.ts
new file mode 100644
index 00000000..f2b40ff8
--- /dev/null
+++ b/src/components/HorizontalNavigator/HorizontalNavigator.types.ts
@@ -0,0 +1,22 @@
+import { ChayaColorType } from '../../utils/classMaps/colors';
+
+import { HorizontalNavigatorItemType, HorizontalNavigatorVariantType } from './HorizontalNavigatorItem.types';
+
+export type HorizontalNavigatorProps = {
+ /** id of the navigator */
+ id?: string,
+ /** className for the navigator */
+ className?: string,
+ /** className for each item */
+ itemClassName?: string,
+ /** items to be rendered in the navigator */
+ items: HorizontalNavigatorItemType[],
+ /** key of the active item. If null, no item will be active. */
+ activeItem?: string | null,
+ /** variant of the navigator. Can be 'pill', 'boxed' or 'line', defaults to 'pill' */
+ variant?: HorizontalNavigatorVariantType,
+ /** color of the navigator. */
+ color?: ChayaColorType,
+ /** callback when an item is clicked. Passes the key and the item as arguments. */
+ onClickItem?: (key: string, item: HorizontalNavigatorItemType) => void,
+};
\ No newline at end of file
diff --git a/src/components/HorizontalNavigator/item.tsx b/src/components/HorizontalNavigator/HorizontalNavigatorItem.tsx
similarity index 82%
rename from src/components/HorizontalNavigator/item.tsx
rename to src/components/HorizontalNavigator/HorizontalNavigatorItem.tsx
index 9161e441..553e02ee 100644
--- a/src/components/HorizontalNavigator/item.tsx
+++ b/src/components/HorizontalNavigator/HorizontalNavigatorItem.tsx
@@ -4,39 +4,20 @@ import clsx from 'clsx';
import { cva, cx } from '../../utils/cva';
import { LinkWrapper } from '../../utils/misc';
-import Icon, { IconInputType } from '../Icon';
-import Badge, { BaseBadgeProps } from '../Badge';
+import Icon from '../Icon';
+import Badge from '../Badge';
import {
- colorVariantMapper, ChayaColorType,
+ colorVariantMapper,
MINIMAL_BG_COLOR_MAP, TEXT_COLOR_MAP, EMPTY_COLOR_MAP,
} from '../../utils/classMaps/colors';
-export type HorizontalNavigatorItemType = {
- key: string,
- label: string,
- link?: string,
- onClick?: () => void,
- icon?: IconInputType,
- labelClassName?: string,
- className?: string,
- isDisabled?: boolean,
- isHidden?: boolean,
- badge?: React.ReactNode,
- badgeProps?: BaseBadgeProps,
-};
+import {
+ HorizontalNavigatorItemProps,
+ HorizontalNavigatorItemType,
+ HorizontalNavigatorVariantType,
+} from './HorizontalNavigatorItem.types';
-export type HorizontalNavigatorVariantType = 'pill' | 'line' | 'boxed' | 'minimal';
-export type HorizontalNavigatorItemProps = {
- item: HorizontalNavigatorItemType,
- navigatorID: string,
- variant?: HorizontalNavigatorVariantType,
- color?: ChayaColorType,
- activeItem?: string | null,
- badgeProps?: BaseBadgeProps,
- className?: string,
- onClickItem?: (key: string, item: HorizontalNavigatorItemType) => void,
-};
const HorizontalNavigatorItem = ({
item, activeItem, badgeProps, variant = 'pill', className, navigatorID, onClickItem = () => {}, color = 'primary',
diff --git a/src/components/HorizontalNavigator/HorizontalNavigatorItem.types.ts b/src/components/HorizontalNavigator/HorizontalNavigatorItem.types.ts
new file mode 100644
index 00000000..2e19359c
--- /dev/null
+++ b/src/components/HorizontalNavigator/HorizontalNavigatorItem.types.ts
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { IconInputType } from '../Icon';
+import { BaseBadgeProps } from '../Badge';
+import { ChayaColorType } from '../../utils/classMaps/colors';
+
+export type HorizontalNavigatorItemType = {
+ key: string,
+ label: string,
+ link?: string,
+ onClick?: () => void,
+ icon?: IconInputType,
+ labelClassName?: string,
+ className?: string,
+ isDisabled?: boolean,
+ isHidden?: boolean,
+ badge?: React.ReactNode,
+ badgeProps?: BaseBadgeProps,
+};
+
+export type HorizontalNavigatorVariantType = 'pill' | 'line' | 'boxed' | 'minimal';
+
+export type HorizontalNavigatorItemProps = {
+ item: HorizontalNavigatorItemType,
+ navigatorID: string,
+ variant?: HorizontalNavigatorVariantType,
+ color?: ChayaColorType,
+ activeItem?: string | null,
+ badgeProps?: BaseBadgeProps,
+ className?: string,
+ onClickItem?: (key: string, item: HorizontalNavigatorItemType) => void,
+};
\ No newline at end of file
diff --git a/src/components/HorizontalNavigator/index.ts b/src/components/HorizontalNavigator/index.ts
new file mode 100644
index 00000000..880f2f52
--- /dev/null
+++ b/src/components/HorizontalNavigator/index.ts
@@ -0,0 +1,5 @@
+import HorizontalNavigator from './HorizontalNavigator';
+export { type HorizontalNavigatorProps } from './HorizontalNavigator.types';
+export { type HorizontalNavigatorItemType } from './HorizontalNavigatorItem.types';
+
+export default HorizontalNavigator;
\ No newline at end of file
diff --git a/stories/components/navigation/HorizontalNavigator.mdx b/src/components/HorizontalNavigator/stories/HorizontalNavigator.mdx
similarity index 73%
rename from stories/components/navigation/HorizontalNavigator.mdx
rename to src/components/HorizontalNavigator/stories/HorizontalNavigator.mdx
index 4750f7f8..da74d1fd 100644
--- a/stories/components/navigation/HorizontalNavigator.mdx
+++ b/src/components/HorizontalNavigator/stories/HorizontalNavigator.mdx
@@ -1,5 +1,6 @@
-import {Meta, Primary, Title, Controls, Canvas, Story, } from '@storybook/blocks';
+import {Meta, Primary, Title, ArgTypes, Canvas, Story, } from '@storybook/blocks';
import * as HorizontalNavigatorStories from "./HorizontalNavigator.stories";
+import SingleLineCodeBlock from "../../../../stories/common/SingleLineCodeBlock";
+
= {
title: 'Components/Navigation/HorizontalNavigator',
@@ -49,7 +47,7 @@ export const Primary: Story = {
export const BoxedVariant: Story = {
tags: ['unlisted'],
- storyName: 'Horizontal Navigator Box Variant',
+ name: 'Horizontal Navigator Box Variant',
args: {
items: defaultMenuItems,
activeItem: 'OPENED',
@@ -60,7 +58,7 @@ export const BoxedVariant: Story = {
export const LineVariant: Story = {
tags: ['unlisted'],
- storyName: 'Horizontal Navigator Line Variant',
+ name: 'Horizontal Navigator Line Variant',
args: {
items: defaultMenuItems,
activeItem: 'OPENED',
@@ -71,7 +69,7 @@ export const LineVariant: Story = {
export const MinimalVariant: Story = {
tags: ['unlisted'],
- storyName: 'Horizontal Navigator Minimal Variant',
+ name: 'Horizontal Navigator Minimal Variant',
args: {
items: defaultMenuItems,
activeItem: 'OPENED',
@@ -114,13 +112,13 @@ const NavigatorVariants = ({ variant }: { variant: HorizontalNavigatorProps['var
);
export const PillColors: Story = {
- storyName: 'Pill Navigator Colors',
+ name: 'Pill Navigator Colors',
tags: ['unlisted'],
render: () =>
-
- {children}
-
-
-
- {cardRenderer}
-
-
-
- );
-};
-
-export default HoverCard;
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
index f293dd5d..3e8f6532 100644
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -2,7 +2,7 @@
import React, { CSSProperties, ReactElement } from 'react';
import { useContext } from 'react';
-import DSRContext from '../contexts/DSRContext';
+import ChayaContext from '../contexts/ChayaContext';
export type Icons = 'chevron-down' | 'chevron-up' | 'chevron-right' | 'chevrons-right' | 'chevrons-left' | 'search' |
'times' | 'home' | 'external-link' | 'info' | 'alert-triangle' | 'check' | string;
@@ -20,7 +20,7 @@ export type IconInputType = Icons | ((props: IconProps) => ReactElement) | (Icon
type IconComponentProps = IconProps & { icon: IconInputType };
const Icon = ({ icon, ...defaultProps }: IconComponentProps) => {
- const { iconWrapper } = useContext(DSRContext);
+ const { iconWrapper } = useContext(ChayaContext);
let props = { ...defaultProps };
if (typeof icon === 'object') props = { ...props, ...icon };
// 1rem = 16px by default
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index c1034cc8..da3f83a9 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -4,10 +4,10 @@ import clsx from 'clsx';
import * as Dialog from '@radix-ui/react-dialog';
import useDelayUnmount from '../../hooks/useDelayUnmount';
-import Icon, { IconInputType } from '../Icon';
import mcs from '../../utils/merge';
+import Icon, { IconInputType } from '../Icon';
+import Button, { ButtonProps } from '../Button';
-import Button, { ButtonProps } from './../Button';
import modalStyles from './modal.module.scss';
export type ModalProps = {
@@ -138,7 +138,7 @@ const Modal = ({
{(primaryButton || secondaryButton) ? (
diff --git a/src/components/PinInput/pinInput.module.scss b/src/components/PinInput/PinDigit.module.scss
similarity index 100%
rename from src/components/PinInput/pinInput.module.scss
rename to src/components/PinInput/PinDigit.module.scss
diff --git a/src/components/PinInput/digit.tsx b/src/components/PinInput/PinDigit.tsx
similarity index 91%
rename from src/components/PinInput/digit.tsx
rename to src/components/PinInput/PinDigit.tsx
index 07f48155..b6e1cace 100644
--- a/src/components/PinInput/digit.tsx
+++ b/src/components/PinInput/PinDigit.tsx
@@ -2,9 +2,9 @@ import React from 'react';
import mcs from '../../utils/merge';
-import pinInputStyle from './pinInput.module.scss';
+import styles from './PinDigit.module.scss';
-type PinDigitProps = {
+export type PinDigitProps = {
id?: string,
mask?: boolean,
type?: string,
@@ -20,7 +20,6 @@ type PinDigitProps = {
variant?: 'minimal' | 'classic',
};
-
const PinDigit = ({
type = 'text', id, ariaLabelledBy, mask = false, value, onChange,
className, variant,
@@ -36,7 +35,7 @@ const PinDigit = ({
variant === 'minimal' ? 'border-b-2 bg-transparent focus:border-primary' : 'py-1.5 rounded-lg border focus:border-primary bg-background-lighten-1 shadow-inner',
className,
isInvalid ? 'border-red-500' : 'dark:border-neutral-500/70 border-neutral-500/20',
- type === 'number' && pinInputStyle.hideStepper,
+ type === 'number' && styles.hideStepper,
])}
type={mask ? 'password' : type}
value={value}
diff --git a/src/components/PinInput/index.tsx b/src/components/PinInput/PinInput.tsx
similarity index 89%
rename from src/components/PinInput/index.tsx
rename to src/components/PinInput/PinInput.tsx
index 647a8056..4b1c04a5 100644
--- a/src/components/PinInput/index.tsx
+++ b/src/components/PinInput/PinInput.tsx
@@ -5,29 +5,8 @@ import { nanoid } from 'nanoid';
import Label from '../Label';
import mcs from '../../utils/merge';
-import PinDigit from './digit';
-
-export type PinInputProps = {
- value: string,
- onChange?: (value: string) => void,
- digits?: number,
- label?: string,
- type?: ('text' | 'number'),
- mask?: boolean,
- id?: string,
- className?: string,
- digitClassName?: string,
- isInvalid?: boolean,
- isDisabled?: boolean,
- isRequired?: boolean,
- autoFocus?: boolean,
- labels?: {
- label?: string,
- placeholder?: string,
- invalidLength?: string,
- },
- variant?: 'minimal' | 'classic',
-};
+import PinDigit from './PinDigit';
+import { PinInputProps } from './PinInput.types';
const PinInput = ({
diff --git a/src/components/PinInput/PinInput.types.ts b/src/components/PinInput/PinInput.types.ts
new file mode 100644
index 00000000..9284f2a8
--- /dev/null
+++ b/src/components/PinInput/PinInput.types.ts
@@ -0,0 +1,21 @@
+export type PinInputProps = {
+ value: string,
+ onChange?: (value: string) => void,
+ digits?: number,
+ label?: string,
+ type?: ('text' | 'number'),
+ mask?: boolean,
+ id?: string,
+ className?: string,
+ digitClassName?: string,
+ isInvalid?: boolean,
+ isDisabled?: boolean,
+ isRequired?: boolean,
+ autoFocus?: boolean,
+ labels?: {
+ label?: string,
+ placeholder?: string,
+ invalidLength?: string,
+ },
+ variant?: 'minimal' | 'classic',
+};
diff --git a/src/components/PinInput/index.ts b/src/components/PinInput/index.ts
new file mode 100644
index 00000000..1bcd69c1
--- /dev/null
+++ b/src/components/PinInput/index.ts
@@ -0,0 +1,4 @@
+import PinInput from './PinInput';
+export { PinInputProps } from './PinInput.types';
+
+export default PinInput;
\ No newline at end of file
diff --git a/src/components/PinInput/stories/PinInput.mdx b/src/components/PinInput/stories/PinInput.mdx
new file mode 100644
index 00000000..accdd045
--- /dev/null
+++ b/src/components/PinInput/stories/PinInput.mdx
@@ -0,0 +1,39 @@
+import { Meta, Primary, Title, ArgTypes, Story } from '@storybook/blocks';
+import * as PinInputStories from "./PinInput.stories";
+import SingleLineCodeBlock from "../../../../stories/common/SingleLineCodeBlock";
+
+
+
+
PinInput
+
+
+
+
+
+
+## Variants
+
+### Minimal (Default)
+
+
+
+### Classic
+
+
+
+## Masked
+
+
+
+## Inside Form
+
+
+
+
+## API
+
+
\ No newline at end of file
diff --git a/stories/components/inputs/PinInput.stories.tsx b/src/components/PinInput/stories/PinInput.stories.tsx
similarity index 51%
rename from stories/components/inputs/PinInput.stories.tsx
rename to src/components/PinInput/stories/PinInput.stories.tsx
index e671f799..0f906d0e 100644
--- a/stories/components/inputs/PinInput.stories.tsx
+++ b/src/components/PinInput/stories/PinInput.stories.tsx
@@ -1,10 +1,12 @@
-import React, { useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
import { Meta, StoryObj } from '@storybook/react';
-import { PinInput, PinInputProps } from '../../../src';
+import PinInput from '../PinInput';
+import { PinInputProps } from '../PinInput.types';
+import Button from '../../Button/Button';
const meta: Meta
= {
- title: 'Components/Inputs/Pin Input',
+ title: 'Components/Inputs/PinInput',
component: PinInput,
parameters: {
controls: { expanded: true },
@@ -17,15 +19,18 @@ export type Story = StoryObj;
const DefaultTemplate = (args: PinInputProps) => {
- const [value, setValue] = useState(args.value ?? '');
+ const [value, setValue] = useState(args.value || '');
- return (
+ const render = useMemo(() => (
- );
+ ), [value]);
+
+ return render;
};
+
export const Primary: Story = {
args: {
labels: {
@@ -34,11 +39,15 @@ export const Primary: Story = {
},
digits: 6,
},
- render: DefaultTemplate,
+ render: (args) => (
+
+
+ ),
};
export const ClassicVariant: Story = {
- storyName: 'Classic PinInput Variant',
+ name: 'Classic PinInput Variant',
tags: ['unlisted'],
args: {
variant: 'classic',
@@ -48,11 +57,15 @@ export const ClassicVariant: Story = {
},
digits: 6,
},
- render: DefaultTemplate,
+ render: (args) => (
+
+
+ ),
};
export const MaskedVariant: Story = {
- storyName: 'Masked PinInput Variant',
+ name: 'Masked PinInput Variant',
tags: ['unlisted'],
args: {
labels: {
@@ -79,28 +92,45 @@ export const MaskedVariant: Story = {
),
};
-//
-//
-// export const FormSubmission: Story = (args) => {
-// const [value, setValue] = useState(args.value);
-// useEffect(() => setValue(args.value), [args.value]);
-//
-// return (
-//
-// );
-// };
-//
-// FormSubmission.args = {
-// isRequired: true,
-// };
+
+const FormTemplate = (args: PinInputProps) => {
+ const [value, setValue] = useState(args.value);
+ useEffect(() => setValue(args.value), [args.value]);
+
+ return (
+
+ );
+};
+
+export const InsideForm: Story = {
+ name: 'PinInput inside Form',
+ tags: ['unlisted'],
+ args: {
+ labels: {
+ label: 'Enter Your Pin',
+ },
+ isRequired: true,
+ digits: 6,
+ },
+ render: (args) => (
+
+
+ ),
+};
\ No newline at end of file
diff --git a/src/components/Popover/Popover.tsx b/src/components/Popover/Popover.tsx
new file mode 100644
index 00000000..92b35623
--- /dev/null
+++ b/src/components/Popover/Popover.tsx
@@ -0,0 +1,65 @@
+'use client';
+import React, { useMemo, useState } from 'react';
+import * as RadixHoverCard from '@radix-ui/react-hover-card';
+import clsx from 'clsx';
+import { nanoid } from 'nanoid';
+
+import { PopoverProps } from './Popover.types';
+
+const Popover = ({
+ children, cardRenderer, id, className,
+ isOpen, defaultOpen = false, duration = 100, openDelay, closeDelay,
+ role = '', side = 'auto', sideOffset = 5,
+ align = 'center', alignOffset = 5, fillTriggerWidth = false,
+}: PopoverProps) => {
+
+ const [open, setOpen] = useState(defaultOpen);
+
+ const popoverCardID = useMemo(() => id && id.length > 1 ? id : `popover-${nanoid()}`, [id]);
+
+ const isPopoverOpen = typeof isOpen === 'boolean' ? isOpen : open;
+
+ return (
+
+
+ {children}
+
+
+
+ {cardRenderer}
+
+
+
+ );
+
+};
+
+export default Popover;
diff --git a/src/components/Popover/Popover.types.ts b/src/components/Popover/Popover.types.ts
new file mode 100644
index 00000000..c457cf93
--- /dev/null
+++ b/src/components/Popover/Popover.types.ts
@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+
+export type AlignOptions = 'start' | 'center' | 'end';
+export type SideOptions = 'auto' | 'top' | 'right' | 'bottom' | 'left';
+
+export type PopoverProps = {
+ children: ReactNode,
+ cardRenderer: ReactNode,
+ id?: string,
+ className?: string,
+ isOpen?: boolean,
+ defaultOpen?: boolean,
+ duration?: number,
+ openDelay?: number,
+ closeDelay?: number,
+ role?: string,
+ side?: SideOptions,
+ sideOffset?: number,
+ align?: AlignOptions,
+ alignOffset?: number,
+ fillTriggerWidth?: boolean
+};
\ No newline at end of file
diff --git a/src/components/Popover/index.ts b/src/components/Popover/index.ts
new file mode 100644
index 00000000..34281017
--- /dev/null
+++ b/src/components/Popover/index.ts
@@ -0,0 +1,4 @@
+import Popover from './Popover';
+export { PopoverProps } from './Popover.types';
+
+export default Popover;
\ No newline at end of file
diff --git a/src/components/Radio/radio.module.scss b/src/components/Radio/Radio.module.scss
similarity index 100%
rename from src/components/Radio/radio.module.scss
rename to src/components/Radio/Radio.module.scss
diff --git a/src/components/Radio/index.tsx b/src/components/Radio/Radio.tsx
similarity index 77%
rename from src/components/Radio/index.tsx
rename to src/components/Radio/Radio.tsx
index 15c22f2f..db4eca49 100644
--- a/src/components/Radio/index.tsx
+++ b/src/components/Radio/Radio.tsx
@@ -1,26 +1,11 @@
'use client';
-import React, { forwardRef, KeyboardEvent } from 'react';
+import React, { forwardRef } from 'react';
import clsx from 'clsx';
import mcs from '../../utils/merge';
-import styled from './radio.module.scss';
-
-export type RadioColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'default';
-export type RadioSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-export type RadioProps = {
- label: string,
- value: Type,
- tabIndex?: number,
- onKeyDown?: (event: KeyboardEvent) => void,
- onChange?: (value: Type) => void,
- color?: RadioColor,
- size?: RadioSize,
- isDisabled?: boolean,
- isSelected?: boolean,
- className?: string
-};
+import styles from './Radio.module.scss';
+import { RadioProps } from './Radio.types';
const colors = {
'primary': 'bg-primary',
@@ -78,7 +63,7 @@ const Radio = forwardRef>(({
'inline-flex items-center justify-center flex-shrink-0',
'border-none rounded-full text-white transition',
sizes[size]?.button,
- isSelected ? styled.radioButton : '',
+ isSelected ? styles.radioButton : '',
isSelected ? colors[color] : 'dark:bg-white/20 bg-gray-500/20',
isFocused && 'ring-2 ring-white ring-offset-1 ring-offset-gray-900',
])}
diff --git a/src/components/Radio/Radio.types.ts b/src/components/Radio/Radio.types.ts
new file mode 100644
index 00000000..6fcce819
--- /dev/null
+++ b/src/components/Radio/Radio.types.ts
@@ -0,0 +1,17 @@
+import { KeyboardEvent } from 'react';
+
+export type RadioColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'default';
+export type RadioSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export type RadioProps = {
+ label: string,
+ value: Type,
+ tabIndex?: number,
+ onKeyDown?: (event: KeyboardEvent) => void,
+ onChange?: (value: Type) => void,
+ color?: RadioColor,
+ size?: RadioSize,
+ isDisabled?: boolean,
+ isSelected?: boolean,
+ className?: string
+};
diff --git a/src/components/Radio/index.ts b/src/components/Radio/index.ts
new file mode 100644
index 00000000..7d7a26d7
--- /dev/null
+++ b/src/components/Radio/index.ts
@@ -0,0 +1,4 @@
+import Radio from './Radio';
+export { type RadioProps, type RadioColor, type RadioSize } from './Radio.types';
+
+export default Radio;
\ No newline at end of file
diff --git a/src/components/Radio/stories/Radio.mdx b/src/components/Radio/stories/Radio.mdx
new file mode 100644
index 00000000..a5651a74
--- /dev/null
+++ b/src/components/Radio/stories/Radio.mdx
@@ -0,0 +1,20 @@
+import { Meta, Primary, Title, ArgTypes } from '@storybook/blocks';
+import * as RadioStories from "./Radio.stories";
+import SingleLineCodeBlock from "../../../../stories/common/SingleLineCodeBlock";
+
+Radio
+
+
+
+
+> = {
+ title: 'Components/Inputs/Radio',
+ component: Radio,
+};
+
+export default meta;
+
+export type Story = StoryObj>;
+
+const BaseCheckboxTemplate = (args: RadioProps) => {
+ const [isChecked, setIsChecked] = React.useState(false);
+ return (
+ setIsChecked(!isChecked)}
+ />
+ );
+};
+
+export const Primary: Story = {
+ args: {
+ label: 'Will you like to check this checkbox?',
+ value: 'checked',
+ },
+ render: (args) => extends TextInputB
min?: number
max?: number
spellCheck?: boolean,
- autoComplete?: ('off' | 'on' | 'email' | 'current-password' | 'username')
- autoCorrect?: ('off' | 'on')
- autoCapitalize?: ('off' | 'on')
+ autoComplete?: 'off' | 'on' | 'email' | 'current-password' | 'username'
+ autoCorrect?: 'off' | 'on'
+ autoCapitalize?: 'off' | 'on'
onFocus?: (event: FocusEvent) => void
onBlur?: (event: FocusEvent) => void
onKeyDown?: (event: KeyboardEvent) => void,
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index 6f0aff23..b3c68486 100644
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -13,9 +13,11 @@ export type TooltipProps = {
side?: SideOptions,
align?: AlignOptions
contentClassName?: string,
+ /** Whether to show an arrow element alongside the tooltip. */
+ showArrow?: boolean
};
-const Tooltip = ({ children, overlay, side = 'bottom', align = 'center', contentClassName }: TooltipProps) => (
+const Tooltip = ({ children, overlay, side = 'auto', align = 'center', contentClassName, showArrow = false }: TooltipProps) => (
@@ -23,20 +25,22 @@ const Tooltip = ({ children, overlay, side = 'bottom', align = 'center', content
{overlay}
-
diff --git a/src/contexts/DSRContext.tsx b/src/contexts/ChayaContext.tsx
similarity index 84%
rename from src/contexts/DSRContext.tsx
rename to src/contexts/ChayaContext.tsx
index c4741e00..bbb899ba 100644
--- a/src/contexts/DSRContext.tsx
+++ b/src/contexts/ChayaContext.tsx
@@ -15,6 +15,6 @@ export type DSRContextType = {
isDarkTheme?: boolean
};
-const DSRContext = createContext({});
+const ChayaContext = createContext({});
-export default DSRContext;
+export default ChayaContext;
diff --git a/src/hooks/useClipboard.ts b/src/hooks/useClipboard.ts
index cb350a0f..76d11866 100644
--- a/src/hooks/useClipboard.ts
+++ b/src/hooks/useClipboard.ts
@@ -14,7 +14,6 @@ const useClipboard = (): [CopiedValue, CopyFn, IsSupportedType] => {
console.warn('Clipboard not supported');
return false;
} else {
- console.warn('Clipboard is supported');
return true;
}
};
diff --git a/src/index.ts b/src/index.ts
index ca2eb804..d4c63c90 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,5 @@
// contexts
-export { default as DSRContextProvider } from './components/DSRContextProvider';
+export { default as ChayaProvider } from './components/ChayaProvider';
// components
export { default as Accordion, AccordionProps } from './components/Accordion';
@@ -7,6 +7,8 @@ export { default as Alert, AlertProps } from './components/Alert';
export { default as Icon } from './components/Icon';
export { default as Card, CardProps } from './components/Card';
export { default as Tabs, TabsProps } from './components/Tabs';
+export { default as DataTable, DataTableProps } from './components/DataTable';
+export { default as DataTableManager, DataTableManagerProps } from './components/DataTableManager';
export { default as Modal, ModalProps } from './components/Modal';
export { default as Badge, BadgeProps } from './components/Badge';
export { default as Label, LabelProps } from './components/Label';
@@ -19,16 +21,13 @@ export { default as Avatar, AvatarProps } from './components/Avatar';
export { default as Button, ButtonProps } from './components/Button';
export { default as Tooltip, TooltipProps } from './components/Tooltip';
export { default as PinInput, PinInputProps } from './components/PinInput';
-export { default as DataTable, DataTableProps } from './components/DataTable';
-export { default as DataTableManager, DataTableManagerProps } from './components/DataTableManager';
-export { default as DateTimePicker, DateTimePickerProps } from './components/DateTimePicker';
+export { default as DateTimeInput, DateTimeInputProps } from './components/DateTimeInput';
export { default as Dropzone, DropzoneProps } from './components/Dropzone';
export { default as Dropdown, DropdownProps } from './components/Dropdown';
export { default as Checkbox, CheckboxProps } from './components/Checkbox';
-export { default as HorizontalNavigator, HorizontalNavigatorProps } from './components/HorizontalNavigator';
-export { HorizontalNavigatorItemType } from './components/HorizontalNavigator/item';
+export { default as HorizontalNavigator, HorizontalNavigatorProps, HorizontalNavigatorItemType } from './components/HorizontalNavigator';
-export { default as HoverCard } from './components/HoverCard';
+export { default as Popover, PopoverProps } from './components/Popover';
export { default as TextInput, TextInputProps } from './components/TextInput';
export { default as SearchBox, SearchBoxProps } from './components/SearchBox';
export { default as RadioGroup, RadioGroupProps } from './components/RadioGroup';
@@ -46,7 +45,8 @@ export { VerticalNavigatorItemType } from './components/VerticalNavigator/Item';
export { default as Sidebar, SidebarProps } from './components/Sidebar';
export { default as DropdownMenu, DropdownMenuProps } from './components/DropdownMenu';
-export { default as SearchResults, SearchResultsProps, SearchResultType, SearchResultGroupType } from './components/SearchResults';
+export { default as SearchResults, SearchResultsProps, SearchResultGroupType } from './components/SearchResults';
+export { SearchResultType } from './components/SearchResults/result';
export { default as DropdownFilter, DropdownFilterProps } from './components/DropdownFilter';
export { default as VisualPicker, VisualPickerProps } from './components/VisualPicker';
export { default as CheckboxGroup, CheckboxGroupProps } from './components/CheckboxGroup';
@@ -64,4 +64,10 @@ export { default as useInterval } from './hooks/useInterval';
export { default as useClipboard } from './hooks/useClipboard';
export { default as useCountdown } from './hooks/useCountDown';
export { default as useNumberFormatter } from './hooks/useNumberFormatter';
-export { default as useCurrencyFormatter } from './hooks/useCurrencyFormatter';
\ No newline at end of file
+export { default as useCurrencyFormatter } from './hooks/useCurrencyFormatter';
+
+
+// deprecated
+export { default as HoverCard } from './legacy/HoverCard';
+export { default as DateTimePicker, DateTimePickerProps } from './legacy/DateTimePicker';
+export { default as DSRContextProvider } from './legacy/DSRContextProvider';
diff --git a/src/legacy/DSRContextProvider.tsx b/src/legacy/DSRContextProvider.tsx
new file mode 100644
index 00000000..d932bbb2
--- /dev/null
+++ b/src/legacy/DSRContextProvider.tsx
@@ -0,0 +1,6 @@
+import ChayaProvider from '../components/ChayaProvider';
+
+/** @deprecated DSRContextProvider is deprecated, use ChayaProvider instead */
+const DSRContextProvider = ChayaProvider;
+
+export default DSRContextProvider;
\ No newline at end of file
diff --git a/src/legacy/DateTimePicker.tsx b/src/legacy/DateTimePicker.tsx
new file mode 100644
index 00000000..d5c151a7
--- /dev/null
+++ b/src/legacy/DateTimePicker.tsx
@@ -0,0 +1,9 @@
+import DateTimeInput, { DateTimeInputProps } from '../components/DateTimeInput';
+
+/** @deprecated DateTimePicker is deprecated, use DateTimeInput instead */
+const DateTimePicker = DateTimeInput;
+/** @deprecated DateTimePickerProps is deprecated, use DateTimeInputProps instead */
+type DateTimePickerProps = DateTimeInputProps;
+
+export { DateTimePickerProps };
+export default DateTimePicker;
diff --git a/src/legacy/HoverCard.tsx b/src/legacy/HoverCard.tsx
new file mode 100644
index 00000000..5e6083de
--- /dev/null
+++ b/src/legacy/HoverCard.tsx
@@ -0,0 +1,6 @@
+import Popover from '../components/Popover';
+
+/** @deprecated HoverCard is deprecated, use Popover instead */
+const HoverCard = Popover;
+
+export default HoverCard;
\ No newline at end of file
diff --git a/src/utils/misc.tsx b/src/utils/misc.tsx
index 477e321e..faca5ad6 100644
--- a/src/utils/misc.tsx
+++ b/src/utils/misc.tsx
@@ -1,9 +1,9 @@
import React from 'react';
-import DSRContext from '../contexts/DSRContext';
+import ChayaContext from '../contexts/ChayaContext';
import Spinner from '../components/Spinner';
-import { ButtonSizesType } from '../components/Button/type';
-
+import { ButtonSizesType } from '../components/Button';
+
export type LinkTargetType = ('_blank' | '_self' | '_parent' | '_top');
export type LinkRelType = (
'noopener' | 'noreferrer' | 'noopener noreferrer' | 'alternate' | 'author' | 'bookmark' |
@@ -31,7 +31,7 @@ export type LinkOptions = {
};
export const LinkWrapper = (link: string, component: React.ReactNode, options?: LinkOptions) => (
-
+
{({ linkWrapper }) => {
return linkWrapper ? linkWrapper(
link,
@@ -61,5 +61,5 @@ export const LinkWrapper = (link: string, component: React.ReactNode, options?:
,
) : null;
}}
-
+
);
diff --git a/stories/common/SingleLineCodeBlock.tsx b/stories/common/SingleLineCodeBlock.tsx
new file mode 100644
index 00000000..1264ceb5
--- /dev/null
+++ b/stories/common/SingleLineCodeBlock.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import useClipboard from '../../src/hooks/useClipboard';
+import TextInput from '../../src/components/TextInput';
+
+const SingleLineCodeBlock = ({ text }: { text: string }) => {
+
+ const [, copy, isSupported] = useClipboard();
+
+ return (
+ copy(text)} className="p-2">
+
+
+
+ ) : null}
+ />
+ );
+
+};
+
+export default SingleLineCodeBlock;
\ No newline at end of file
diff --git a/stories/components/01-index.mdx b/stories/components/01-index.mdx
new file mode 100644
index 00000000..881cbaa2
--- /dev/null
+++ b/stories/components/01-index.mdx
@@ -0,0 +1,77 @@
+import {Meta} from "@storybook/blocks";
+
+
+
= {
title: 'Components/Display/AccordionGroup',
@@ -14,66 +14,24 @@ export default meta;
type Story = StoryObj;
-const items: AccordionGroupProps['items'] = [
- {
- title: 'What is Chaya UI?',
- text: 'Chaya UI is a React UI library that helps you build accessible and production-ready React components.',
- },
- {
- title: 'Is Chaya UI free?',
- text: 'Yes, Chaya UI is a free and open source library, licensed under the GNU License.',
- },
- {
- title: 'How do I use Chaya UI?',
- text: 'You can install Chaya UI using npm or yarn. Please check the installation instructions on the documentation.',
- },
- {
- title: 'Can I use Chaya UI with TypeScript?',
- text: 'Yes, Chaya UI is written in TypeScript and has full support for it.',
- },
-];
-
export const Primary: Story = {
- args: {
- items,
- },
-};
-
-export const KeepExpanded: Story = {
- storyName: 'Keep Expanded',
- tags: ['unlisted'],
- args: {
- items,
- keepExpanded: true,
- },
-};
-
-export const NumberedSteps: Story = {
- storyName: 'Numbered Steps',
args: {
numberItems: true,
- activeIndex: 2,
items: [
{
- title: 'Step 1',
- text: 'This is a text',
isCompleted: true,
+ title: 'Install Chaya Package',
+ text: 'Run `npm install chaya-ui` in your project directory.',
},
{
- title: 'Step 2 (Disabled)',
- isDisabled: true,
- isCompleted: true,
- text: 'This is a text',
- },
- {
- title: 'Step 3 (Active)',
- text: 'This is a text',
+ title: 'Wrap with ChayaProvider',
+ text: 'Wrap your application with `Avatar
-
-**`import { Avatar } from 'chaya-ui';`**
-
- = {
- title: 'Components/Display/Avatar',
- component: Avatar,
- parameters: {
- controls: { expanded: true },
- },
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-export const Primary: Story = {
- args: {
- size: 70,
- alt: 'John Doe',
- src: 'https://i.pravatar.cc/70',
- },
-};
-
-export const WithoutAvatar: Story = {
- tags: ['unlisted'],
- storyName: 'Without Avatar',
- args: {
- alt: 'John Doe',
- },
-};
diff --git a/stories/components/display/Badge.mdx b/stories/components/display/Badge.mdx
index 60910022..9d3ac9ed 100644
--- a/stories/components/display/Badge.mdx
+++ b/stories/components/display/Badge.mdx
@@ -1,5 +1,6 @@
-import { Meta, Primary, Title, Controls, Story } from '@storybook/blocks';
+import { Meta, Primary, Title, ArgTypes, Story } from '@storybook/blocks';
import * as BadgeStories from "./Badge.stories";
+import SingleLineCodeBlock from "../../common/SingleLineCodeBlock";
+
= {
title: 'Components/Display/Badge',
@@ -57,19 +57,19 @@ const BadgeVariants = ({ variant }: { variant: BadgeProps['variant'] }) => (
);
export const SolidVariant: Story = {
- storyName: 'Solid Variant',
+ name: 'Solid Variant',
tags: ['unlisted'],
render: () =>
@@ -110,7 +110,7 @@ export const BadgeSizes: Story = {
};
export const BadgeWithIcon: Story = {
- storyName: 'Badge with Icon',
+ name: 'Badge with Icon',
tags: ['unlisted'],
render: () => (
diff --git a/stories/components/display/Banner.mdx b/stories/components/display/Banner.mdx
deleted file mode 100644
index 9da6a3cb..00000000
--- a/stories/components/display/Banner.mdx
+++ /dev/null
@@ -1,31 +0,0 @@
-import {Meta, Primary, Title, Controls, Canvas,} from '@storybook/blocks';
-import * as BannerStories from "./Banner.stories";
-
-
-
-
Banner
-
-**`import { Banner } from 'chaya-ui';`**
-
-
-
-## Props
-
-
-
-## Variants
-
-## Float (default)
-
-
-
-### Card
-
-
-
-### Full Width
-
-
\ No newline at end of file
diff --git a/stories/components/display/Banner.stories.tsx b/stories/components/display/Banner.stories.tsx
deleted file mode 100644
index 271b6002..00000000
--- a/stories/components/display/Banner.stories.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Banner, BannerProps } from '../../../src';
-
-const meta: Meta
= {
- title: 'Components/Display/Banner',
- component: Banner,
- argTypes: {
- children: {
- control: {
- type: 'text',
- },
- },
- },
- parameters: {
- controls: { expanded: true },
- },
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-export const Primary: Story = {
- args: {
- variant: 'float',
- position: 'inline',
- learnMore: {
- link: '',
- text: 'Learn More',
- },
- className: 'w-full',
- allowDismissal: true,
- icon: 'ri-home-line',
- text: 'This is example text for the banner. Give your own text here.',
- },
-};
-
-export const CardVariant: Story = {
- args: {
- variant: 'card',
- learnMore: {
- link: '',
- text: 'Learn More',
- },
- className: 'w-full',
- allowDismissal: true,
- icon: 'ri-home-line',
- text: 'This is example text for the banner. Give your own text here.',
- },
-};
-
-export const FullWidthVariant: Story = {
- args: {
- variant: 'full-width',
- learnMore: {
- link: '',
- text: 'Learn More',
- },
- className: 'w-full',
- allowDismissal: true,
- icon: 'ri-home-line',
- text: 'This is example text for the banner. Give your own text here.',
- },
-};
-
-
-// const Template: Story = args => (
-//
-//
-// Button
-//
-//
-// );
-//
-// export const Default = Template.bind({});
-//
-// Default.args = {
-// variant: 'full-width',
-// position: 'bottom',
-// learnMore: {
-// link: '',
-// text: 'Learn More',
-// },
-// className: 'w-full',
-// allowDismissal: true,
-// icon: 'chevronUp',
-// color: 'danger',
-// text: 'This is example text for the banner. Give your own text here.',
-// };
\ No newline at end of file
diff --git a/stories/components/display/Card.mdx b/stories/components/display/Card.mdx
index b00c4c2e..ef735714 100644
--- a/stories/components/display/Card.mdx
+++ b/stories/components/display/Card.mdx
@@ -1,5 +1,6 @@
-import { Meta, Primary, Title, Controls, Story } from '@storybook/blocks';
+import { Meta, Primary, Title, ArgTypes, Story } from '@storybook/blocks';
import * as CardStories from "./Card.stories";
+import SingleLineCodeBlock from "../../common/SingleLineCodeBlock";
+
= {
title: 'Components/Display/Card',
@@ -32,7 +33,7 @@ export const Primary: Story = {
export const AsPaper: Story = {
- storyName: 'As Paper',
+ name: 'AsPaper',
tags: ['unlisted'],
args: {
children: (
@@ -60,7 +61,7 @@ export const AsPaper: Story = {
};
export const NestedCards: Story = {
- storyName: 'Nested Cards',
+ name: 'Nested Cards',
tags: ['unlisted'],
args: {
title: 'Appearance',
@@ -83,7 +84,7 @@ export const NestedCards: Story = {
};
export const NestedCardsWithCustomContent: Story = {
- storyName: 'Nested Cards With Custom Content',
+ name: 'Nested Cards With Custom Content',
tags: ['unlisted'],
args: {
children: (
@@ -102,7 +103,7 @@ export const NestedCardsWithCustomContent: Story = {
};
export const OutlineVariant: Story = {
- storyName: 'Outline Variant',
+ name: 'Outline Variant',
tags: ['unlisted'],
args: {
title: 'Add Members',
diff --git a/stories/components/display/DataTable.stories.tsx b/stories/components/display/DataTable.stories.tsx
deleted file mode 100644
index f5b10fb2..00000000
--- a/stories/components/display/DataTable.stories.tsx
+++ /dev/null
@@ -1,527 +0,0 @@
-import React, { useState } from 'react';
-import { Meta, Story } from '@storybook/react';
-import { nanoid } from 'nanoid';
-
-import { DataTable, Icon } from '../../../src';
-import { DataTableProps } from '../../../src/components/DataTable';
-import { ItemListerProperty } from '../../../src/components/DataTable/Row';
-import DataTableManager from '../../../src/components/DataTableManager';
-
-const meta: Meta = {
- title: 'Components/Display/DataTable',
- component: DataTable,
- argTypes: {
- children: {
- control: {
- type: 'text',
- },
- },
- onSelect: { action: 'select' },
- },
- parameters: {
- controls: { expanded: true },
- },
-};
-
-type ItemType = {
- id: string;
- name: string;
- points: number;
- difficultyLevel: {
- label: string;
- level: number;
- };
- category: {
- id: string;
- name: string;
- slug: string;
- };
-};
-
-let ITEMS: ItemType[] = [
- {
- id: '55',
- name: 'Attack matter ball budget pattern.',
- points: 150,
- difficultyLevel: {
- label: 'Beginner',
- level: 1,
- },
- category: {
- id: '11',
- name: 'Hardware',
- slug: 'hardware',
- },
- },
- {
- id: '54',
- name: 'Low fall nor until receive.',
- points: 150,
- difficultyLevel: {
- label: 'Medium',
- level: 3,
- },
- category: {
- id: '11',
- name: 'Hardware',
- slug: 'hardware',
- },
- },
- {
- id: '53',
- name: 'Everybody simple also.',
- points: 150,
- difficultyLevel: {
- label: 'Beginner',
- level: 1,
- },
- category: {
- id: '13',
- name: 'Pentesting',
- slug: 'pentesting',
- },
- },
- {
- id: '52',
- name: 'Summer these group.',
- points: 150,
- difficultyLevel: {
- label: 'Expert',
- level: 5,
- },
- category: {
- id: '12',
- name: 'Reversing',
- slug: 'reversing',
- },
- },
- {
- id: '51',
- name: 'News recent third environment.',
- points: 150,
- difficultyLevel: {
- label: 'Expert',
- level: 5,
- },
- category: {
- id: '14',
- name: 'Programming',
- slug: 'programming',
- },
- },
- {
- id: '50',
- name: 'Support offer concern parent.',
- points: 150,
- difficultyLevel: {
- label: 'Easy',
- level: 2,
- },
- category: {
- id: '12',
- name: 'Reversing',
- slug: 'reversing',
- },
- },
- {
- id: '49',
- name: 'Become hit order field indicate.',
- points: 150,
- difficultyLevel: {
- label: 'Easy',
- level: 2,
- },
- category: {
- id: '11',
- name: 'Hardware',
- slug: 'hardware',
- },
- },
- {
- id: '48',
- name: 'Want win third myself.',
- points: 150,
- difficultyLevel: {
- label: 'Hard',
- level: 4,
- },
- category: {
- id: '15',
- name: 'Cryptography',
- slug: 'cryptography',
- },
- },
- {
- id: '47',
- name: 'Level miss food plant back.',
- points: 150,
- difficultyLevel: {
- label: 'Medium',
- level: 3,
- },
- category: {
- id: '13',
- name: 'Pentesting',
- slug: 'pentesting',
- },
- },
- {
- id: '46',
- name: 'Meet politics look fire usually.',
- points: 150,
- difficultyLevel: {
- label: 'Beginner',
- level: 1,
- },
- category: {
- id: '14',
- name: 'Programming',
- slug: 'programming',
- },
- },
-];
-ITEMS = ITEMS.flatMap((item) => {
- const start = Math.floor(Math.random() * (ITEMS.length - 4));
- return [
- item,
- ...ITEMS.slice(start, start + Math.floor(Math.random() * 2) + 2),
- ];
-});
-
-export default meta;
-
-const columns: ItemListerProperty[] = [
- {
- id: 'name',
- label: 'Name',
- link: (i) => `#${i.id}`,
- value: (i) => {i.name} ,
- allowSort: true,
- },
- {
- id: 'category',
- label: 'Category',
- width: 150,
- value: (i) => i.category?.name,
- allowSort: true,
- },
- {
- id: 'difficultyLevel',
- label: 'Difficulty',
- width: 150,
- value: (i) => i?.difficultyLevel?.label,
- textAlign: 'right',
- allowSort: true,
- },
- {
- id: 'points',
- label: 'Points',
- value: (i) => i.points,
- textAlign: 'right',
- },
- {
- id: 'difficultyLevel1',
- label: 'Difficulty',
- value: (i) => i?.difficultyLevel?.label,
- allowSort: true,
- },
- {
- id: 'points2',
- label: 'Points',
- value: (i) => i.points,
- allowSort: true,
- textAlign: 'center',
- },
- {
- id: 'difficultyLevel3',
- label: 'Difficulty',
- value: (i) => i?.difficultyLevel?.label,
- allowSort: true,
- },
- {
- id: 'points4',
- label: 'Points',
- stickRight: true,
- value: (i) => i?.points,
- allowSort: true,
- },
-];
-const Template: Story> = (args) => {
- const [page, setPage] = useState(1);
-
- return (
-
-
- {c?.name}
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
- atque eius esse molestiae molestias, nobis, quasi quidem quis, sequi sit
- sunt suscipit veritatis. Deserunt doloremque et, officiis quia quibusdam
- quis.
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
- deleniti dicta distinctio, dolorum eligendi est illo incidunt maiores,
- necessitatibus, nemo nobis possimus quaerat quas reiciendis repellat
- sapiente unde voluptas voluptate.
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam
- consectetur dolores illo incidunt iure minima molestias non optio porro,
- possimus, quam quis rerum saepe suscipit temporibus vero vitae voluptates.
- Commodi deserunt eveniet ex illo omnis porro repellat repellendus? Debitis
- expedita fugit ipsam natus optio porro sequi tempore? Aliquid amet ea
- itaque possimus ullam. Ab atque cum debitis doloribus dolorum eligendi
- fuga inventore necessitatibus nisi nobis porro possimus reprehenderit
- temporibus totam, voluptatibus. Aspernatur facere iste iusto obcaecati
- porro quis, quos sequi suscipit unde vero! Accusantium aliquid, aperiam
- aspernatur assumenda doloribus eos expedita laudantium, odit optio
- pariatur rem reprehenderit repudiandae velit voluptate.
-
- ),
-};
-
-const ContainedTableTemplate: Story> = (args) => (
-
-
-);
-
-export const ContainedTable = ContainedTableTemplate.bind({});
-
-ContainedTable.args = {};
-
-export const StickyRowTemplate = Template.bind({});
-StickyRowTemplate.args = {
- stickyRow: {
- id: '55',
- name: 'This Row Sticks',
- points: 150,
- difficultyLevel: {
- label: 'Beginner',
- level: 1,
- },
- category: {
- id: '11',
- name: 'Hardware',
- slug: 'hardware',
- },
- },
-};
-
-export const OverflowTemplate = Template.bind({});
-OverflowTemplate.args = {
- properties: columns.map((c, i) => ({ ...c, width: i === 0 ? 100 : c.width })),
-};
-
-export const EmptyTableListing = Template.bind({});
-EmptyTableListing.args = {
- properties: columns,
- items: [],
- showTopBarOnEmpty: true,
- emptyListRenderer: () => (
-
-
- ),
-};
-
-const UNIQUE_ITEMS = ITEMS.map((i) => ({ ...i, id: nanoid() }));
-
-const DataTableManagerTemplate: Story> = (args) => {
-
- const [keyword, setKeyword] = useState('');
- const [columnsSelected, setColumns] = useState(columns.map(c => c.id));
- const [selections, setSelections] = useState({
- selectedIDs: [UNIQUE_ITEMS[0].id, UNIQUE_ITEMS[1].id],
- });
- const [filters, setFilters] = useState({
- category: ['hardware'],
- });
-
- return (
- (
- { window.alert('Download'); return []; }}
- onCreate={() => window.alert('Create')}
- tabs={[
- { label: 'All', key: 'all' },
- { label: 'Selected', key: 'selected' },
- { label: 'Excluded', key: 'excluded' },
- ]}
- currentTab="all"
- filters={filters}
- setFilters={setFilters}
- filterConfig={[
- {
- key: 'category',
- labels: {
- label: 'Category',
- searchLabel: 'Search Category',
- },
- options: [
- { value: 'hardware', label: 'Hardware' },
- { value: 'reversing', label: 'Reversing' },
- { value: 'pentesting', label: 'Pentesting' },
- { value: 'programming', label: 'Programming' },
- { value: 'cryptography', label: 'Cryptography' },
- ],
- },
- ]}
- selections={selections}
- selectionActions={[
- {
- label: 'Delete',
- onClick: () => window.alert('Delete'),
- },
- ]}
- onCancelSelections={() => setSelections({ selectedIDs: [], excludedIDs: [] })}
- selectedColumns={columnsSelected}
- setColumns={setColumns}
- columns={columns.map(c => ({ value: c.id || '-', label: c?.label ? c.label.toString() : '-' }))}
-
- />
- )}
- />
- );
-
-};
-export const WithDataTableManager = DataTableManagerTemplate.bind({});
-
-WithDataTableManager.args = {};
-
-const DataTableManagerPaginationTemplate: Story> = (args) => {
-
- const [keyword, setKeyword] = useState('');
- const [columnsSelected, setColumns] = useState(columns.map(c => c.id));
- const [selections, setSelections] = useState({
- selectedIDs: [ITEMS[0].id, ITEMS[1].id],
- });
- const [filters, setFilters] = useState({
- category: ['hardware'],
- });
-
- return (
- console.log(page)}
- customTopBarRenderer={() => (
- { window.alert('Download'); return []; }}
- onCreate={() => window.alert('Create')}
- tabs={[
- { label: 'All', key: 'all' },
- { label: 'Selected', key: 'selected' },
- { label: 'Excluded', key: 'excluded' },
- ]}
- currentTab="all"
- filters={filters}
- setFilters={setFilters}
- filterConfig={[
- {
- key: 'category',
- labels: {
- label: 'Category',
- searchLabel: 'Search Category',
- },
- options: [
- { value: 'hardware', label: 'Hardware' },
- { value: 'reversing', label: 'Reversing' },
- { value: 'pentesting', label: 'Pentesting' },
- { value: 'programming', label: 'Programming' },
- { value: 'cryptography', label: 'Cryptography' },
- ],
- },
- ]}
- selections={selections}
- selectionActions={[
- {
- label: 'Delete',
- onClick: () => window.alert('Delete'),
- },
- ]}
- onCancelSelections={() => setSelections({ selectedIDs: [], excludedIDs: [] })}
- selectedColumns={columnsSelected}
- setColumns={setColumns}
- columns={columns.map(c => ({ value: c.id || '-', label: c?.label ? c.label.toString() : '-' }))}
- />
- )}
- />
- );
-
-};
-export const WithDataTableManagerPagination = DataTableManagerPaginationTemplate.bind({});
-
-WithDataTableManagerPagination.args = {};
\ No newline at end of file
diff --git a/stories/components/display/Drawer.mdx b/stories/components/display/Drawer.mdx
new file mode 100644
index 00000000..ffe93109
--- /dev/null
+++ b/stories/components/display/Drawer.mdx
@@ -0,0 +1,20 @@
+import {Meta, Title, ArgTypes, Primary} from '@storybook/blocks';
+import * as DrawerStories from "./Drawer.stories";
+import SingleLineCodeBlock from "../../common/SingleLineCodeBlock";
+
+Drawer
+
+
+
+
+ = {
+ title: 'Components/Display/Drawer',
+ component: Drawer,
+ parameters: {
+ controls: { expanded: true },
+ },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+const IssueReportForm = () => {
+ const [data, setData] = React.useState({
+ name: '',
+ email: '',
+ issue: '',
+ });
+
+ return (
+
+ );
+};
+
+export const Primary: Story = {
+ args: {
+ isOpen: false,
+ title: 'Report an Error',
+ description: 'We are sorry to hear that you are facing an issue. Please fill out the form below to report the error.',
+ },
+ decorators: (Story, context) => {
+ const [isOpen, setIsOpen] = React.useState(context.args.isOpen);
+
+ return (
+
+ setIsOpen(true)}
+ >
+ Open Drawer
+
+ {Story({ ...context, args: {
+ ...context.args,
+ isOpen,
+ onClose: () => setIsOpen(false),
+ children:
+ );
+ },
+};
diff --git a/stories/components/display/Modal.mdx b/stories/components/display/Modal.mdx
new file mode 100644
index 00000000..f8732359
--- /dev/null
+++ b/stories/components/display/Modal.mdx
@@ -0,0 +1,20 @@
+import {Meta, Title, ArgTypes, Primary} from '@storybook/blocks';
+import * as ModalStories from "./Modal.stories";
+import SingleLineCodeBlock from "../../common/SingleLineCodeBlock";
+
+Modal
+
+
+
+
+ = {
+ title: 'Components/Display/Modal',
+ component: Modal,
+ parameters: {
+ controls: { expanded: true },
+ },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+const IssueReportForm = () => {
+ const [data, setData] = React.useState({
+ name: '',
+ email: '',
+ issue: '',
+ });
+
+ return (
+
+ );
+};
+
+export const Primary: Story = {
+ args: {
+ isOpen: false,
+ title: 'Report an Error',
+ description: 'We are sorry to hear that you are facing an issue. Please fill out the form below to report the error.',
+ maxWidth: 480,
+ primaryButton: {
+ children: 'Submit',
+ onClick: () => fn(),
+ },
+ secondaryButton: {
+ children: 'Cancel',
+ color: 'danger',
+ onClick: () => fn(),
+ },
+ },
+ decorators: (Story, context) => {
+ const [isOpen, setIsOpen] = React.useState(context.args.isOpen);
+
+ return (
+
+ setIsOpen(true)}
+ >
+ Open Modal
+
+ {Story({ ...context, args: {
+ ...context.args,
+ isOpen,
+ onClose: () => setIsOpen(false),
+ children:
+ );
+ },
+};
diff --git a/stories/components/display/PageHeader.mdx b/stories/components/display/PageHeader.mdx
deleted file mode 100644
index 20a0ebf5..00000000
--- a/stories/components/display/PageHeader.mdx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Meta, Primary, Title, Controls } from '@storybook/blocks';
-import * as PageHeaderStories from "./PageHeader.stories";
-
-PageHeader
-
-**`import { PageHeader } from 'chaya-ui';`**
-
- = {
- title: 'Components/Display/PageHeader',
- component: PageHeader,
- parameters: {
- controls: { expanded: true },
- },
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-
-const defaultArgs: Partial = {
- title: 'Page Header',
- description: 'Page header is a component that is used to display the page title and breadcrumbs. It can also optionally have a description like this, buttons and more...',
- homeLink: {
- link: '#/components',
- },
- breadcrumbItems: [
- {
- title: 'Components',
- link: '#/components',
- },
- {
- title: 'Navigation',
- link: '#/components/navigation',
- },
- {
- title: 'Page Header',
- link: '#/components/navigation/page-header',
- isActive: true,
- },
- ],
-};
-
-
-export const Primary: Story = {
- args: defaultArgs,
-};
-
-export const FullWidth: Story = {
- storyName: 'Full Width',
- tags: ['unlisted'],
- args: {
- ...defaultArgs,
- fill: true,
- },
- render: (args) => (
-
- ),
-};
-
-export const ContainedHeader: Story = {
- storyName: 'Container Width',
- tags: ['unlisted'],
- args: {
- ...defaultArgs,
- },
- render: (args) => (
-
- ),
-};
-
-
-export const SmallSize: Story = {
- storyName: 'Small Size',
- tags: ['unlisted'],
- args: {
- ...defaultArgs,
- size: 'sm',
- },
-};
diff --git a/stories/components/display/SearchResults.stories.tsx b/stories/components/display/SearchResults.stories.tsx
deleted file mode 100644
index bb3e70b1..00000000
--- a/stories/components/display/SearchResults.stories.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-
-import { Card, SearchResults, SearchResultsProps } from '../../../src';
-
-const meta: Meta = {
- title: 'Components/Display/SearchResults',
- component: SearchResults,
- parameters: {
- controls: { expanded: true },
- },
-};
-
-export default meta;
-
-const Template: Story = args => (
-
-
-
- Inside a Card
-
-
-
= args => (
-
-
- {args?.children}
-
-
-);
-
-const SettingSwitch = () => {
- const [isEnabled, setIsEnabled] = React.useState(false);
- return setIsEnabled(!isEnabled)} />;
-};
-
-
-export const WithSwitch = Template.bind({});
-
-WithSwitch.args = {
- labels: {
- title: 'Enable Notifications',
- description: 'Receive notifications for new messages',
- },
- children:
-
- ),
-};
-
-
-
diff --git a/stories/components/display/StatsCard.stories.tsx b/stories/components/display/StatsCard.stories.tsx
deleted file mode 100644
index 1ba93232..00000000
--- a/stories/components/display/StatsCard.stories.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-
-import { StatsCard, StatsCardProps } from '../../../src';
-
-const meta: Meta = {
- title: 'Components/Display/StatsCard',
- component: StatsCard,
- argTypes: {
- children: {
- control: {
- type: 'text',
- },
- },
- },
- parameters: {
- controls: { expanded: true },
- },
-};
-export default meta;
-
-const Template: Story = args => (
- = args => (
-
-);
-
-export const MultipleCards = MultipleCardsTemplate.bind({});
\ No newline at end of file
diff --git a/stories/components/display/Tabs.mdx b/stories/components/display/Tabs.mdx
index 7616ff09..49c5743d 100644
--- a/stories/components/display/Tabs.mdx
+++ b/stories/components/display/Tabs.mdx
@@ -1,5 +1,6 @@
-import { Meta, Primary, Title, Controls } from '@storybook/blocks';
+import { Meta, Primary, Title, ArgTypes } from '@storybook/blocks';
import * as TabsStories from "./Tabs.stories";
+import SingleLineCodeBlock from "../../common/SingleLineCodeBlock";
+
= {
title: 'Components/Display/Tabs',
component: Tabs,
parameters: {
controls: { expanded: true },
- },
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-
-const defaultItems: TabsProps['items'] = [
- {
- label: 'Item 1',
- rendererFunc: () => (
-
- Item 1 is here
-
- s
-
-
- s
-
-
- ),
- badge: 3,
- key: 'item-1',
- },
- {
- label: 'Item 2',
- rendererFunc: () => 'tab 2',
- badge: 5,
- key: 'item-2',
- },
- {
- label: 'Item 3',
- rendererFunc: () => 'tab 3',
- key: 'item-3',
- },
- {
- label: 'Item 4',
- rendererFunc: () => 'tab 4',
- key: 'item-4',
- },
-];
-
-export const Primary: Story = {
- args: {
- items: defaultItems,
- },
-};
-
-export const LineVariant: Story = {
- storyName: 'Line Variant',
- tags: ['unlisted'],
- args: {
- items: defaultItems,
- variant: 'line',
- },
-};
-export const BoxedVariant: Story = {
- storyName: 'Boxed Variant',
- tags: ['unlisted'],
- args: {
- items: defaultItems,
- variant: 'boxed',
},
};
-export const Vertical: Story = {
- storyName: 'Vertical Tabs',
- tags: ['unlisted'],
- args: {
- items: defaultItems,
- isVertical: true,
- },
-};
-
-export const VerticalLineVariant: Story = {
- storyName: 'Vertical Line Variant',
- tags: ['unlisted'],
- args: {
- items: defaultItems,
- isVertical: true,
- variant: 'line',
- },
-};
-
-export const VerticalBoxedVariant: Story = {
- storyName: 'Vertical Boxed Variant',
- tags: ['unlisted'],
- args: {
- items: defaultItems,
- variant: 'boxed',
- isVertical: true,
- },
-};
-
-export const ResponsiveView: Story = {
- storyName: 'Responsive Tabs',
- tags: ['unlisted'],
- args: {
- items: defaultItems,
- },
- parameters: {
- viewport: {
- defaultViewport: 'iphoneSE',
- },
- },
-};
-
-export const ResponsiveLineView: Story = {
- storyName: 'Responsive Line Tabs',
- tags: ['unlisted'],
- args: {
- items: defaultItems,
- variant: 'line',
- },
- parameters: {
- viewport: {
- defaultViewport: 'iphoneSE',
- },
- },
-};
-
-export const ResponsiveDisabledView: Story = {
- storyName: 'Responsive Disabled Tabs',
- tags: ['unlisted'],
- args: {
- items: defaultItems,
- variant: 'line',
- disableResponsive: true,
- },
- parameters: {
- viewport: {
- defaultViewport: 'iphoneSE',
- },
- },
-};
+export default meta;
+type Story = StoryObj;
+
+
+const TabsTemplate = (args: TabsProps) => {
+
+ return (
+
+ Tab
+
+ ),
+ },
+ {
+ label: 'Contact',
+ renderer: (
+
+ ),
+ },
+ ]}
+ />
+ );
-export const ResponsivePreview: Story = {
- storyName: 'Responsive Preview Tabs',
- tags: ['unlisted'],
- args: {
- items: defaultItems,
- },
- render: () => (
-
- ),
};
-export const DisableResponsivePreview: Story = {
- storyName: 'Responsive Disabled Preview Tabs',
- tags: ['unlisted'],
+export const Primary: Story = {
args: {
- items: defaultItems,
+ onChange: () => {},
},
- render: () => (
-
-
+ render: (args) => (
+
+
),
-};
+};
\ No newline at end of file
diff --git a/stories/components/feedback/Alert.mdx b/stories/components/feedback/Alert.mdx
deleted file mode 100644
index 9187f6b4..00000000
--- a/stories/components/feedback/Alert.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Meta, Primary, Title, Controls, Canvas } from '@storybook/blocks';
-import * as AlertStories from "./Alert.stories";
-
-
-
-
Alert
-
-**`import { Alert } from 'chaya-ui';`**
-
-
-
-## Props
-
-
-
-## Variants
-
-### Solid
-
-
-
-### Outline
-
-
-
-## Colors
-
-
-
-
-
-
-## Dismissible
-
-
\ No newline at end of file
diff --git a/stories/components/feedback/Alert.stories.tsx b/stories/components/feedback/Alert.stories.tsx
deleted file mode 100644
index 105c58a0..00000000
--- a/stories/components/feedback/Alert.stories.tsx
+++ /dev/null
@@ -1,269 +0,0 @@
-import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-
-import { Alert, AlertProps } from '../../../src';
-
-const meta: Meta
= {
- title: 'Components/Feedback/Alert',
- component: Alert,
- argTypes: {
- children: {
- control: {
- type: 'text',
- },
- },
- },
- parameters: {
- controls: { expanded: true },
- },
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-
-export const Primary: Story = {
- args: {
- title: 'Subscription Expiring',
- description: 'Your account is about to expire. Renew your subscription now!',
- variant: 'solid',
- primaryButton: {
- children: 'Renew',
- onClick: () => {
- alert('Renew clicked');
- },
- },
- secondaryButton: {
- children: 'Support',
- onClick: () => {
- alert('Support contacted');
- },
- },
- },
-};
-
-export const OutlineVariant: Story = {
- args: {
- title: 'Subscription Expiring',
- description: 'Your account is about to expire. Renew your subscription now!',
- variant: 'outline',
- primaryButton: {
- children: 'Renew',
- onClick: () => {
- alert('Renew clicked');
- },
- },
- secondaryButton: {
- children: 'Support',
- onClick: () => {
- alert('Support contacted');
- },
- },
- },
-};
-
-export const DismissibleAlert: Story = {
- tags: ['unlisted'],
- args: {
- title: 'Subscription Expiring',
- description: 'Your account is about to expire. Renew your subscription now!',
- variant: 'solid',
- allowDismissal: true,
- },
-};
-
-const ColorVariants: {
- color: AlertProps['type'],
- title: string,
- description: string,
-}[] = [
- {
- color: 'primary',
- title: 'New Region Launched',
- description: 'We have launched a new region to deploy your application - Mumbai. Please check the documentation for more details.',
- },
- {
- color: 'secondary',
- title: 'New Region Launched',
- description: 'We have launched a new region to deploy your application - Mumbai. Please check the documentation for more details.',
- },
- {
- color: 'success',
- title: 'Order placed',
- description: 'Your order has been placed successfully. Thank you for your purchase!',
- },
- {
- color: 'danger',
- title: 'Subscription Expiring',
- description: 'Your account is about to expire. Renew your subscription now!',
- },
- {
- color: 'warning',
- title: 'Unusual Activity Detected',
- description: 'We have detected an unusual activity in your account. Review your account activity.',
- },
- {
- color: 'black',
- title: 'New Region Launched',
- description: 'We have launched a new region to deploy your application - Mumbai. Please check the documentation for more details.',
- },
- {
- color: 'white',
- title: 'New Region Launched',
- description: 'We have launched a new region to deploy your application - Mumbai. Please check the documentation for more details.',
- },
- {
- color: 'shade',
- title: 'New Region Launched',
- description: 'We have launched a new region to deploy your application - Mumbai. Please check the documentation for more details.',
- },
- {
- color: 'contrast',
- title: 'New Region Launched',
- description: 'We have launched a new region to deploy your application - Mumbai. Please check the documentation for more details.',
- },
-];
-
-
-const AlertColorVariants = ({ variant }: { variant: AlertProps['variant'] }) => (
-
- {ColorVariants.map(({ color, title, description }) => (
-
- {color}
-
-
-
- ))}
-
-);
-
-export const SolidColorVariants: Story = {
- tags: ['unlisted'],
- args: {
- variant: 'solid',
- },
- render: (args) => = args => (
-
-
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
- value: 40,
-};
diff --git a/stories/components/feedback/ConfirmationDialog.mdx b/stories/components/feedback/ConfirmationDialog.mdx
new file mode 100644
index 00000000..d160f4a7
--- /dev/null
+++ b/stories/components/feedback/ConfirmationDialog.mdx
@@ -0,0 +1,20 @@
+import {Meta, Title, ArgTypes, Primary} from '@storybook/blocks';
+import * as ConfirmationDialogStories from "./ConfirmationDialog.stories";
+import SingleLineCodeBlock from "../../common/SingleLineCodeBlock";
+
+ConfirmationDialog
+
+
+
+
+ = {
+ title: 'Components/Feedback/ConfirmationDialog',
+ component: ConfirmationDialog,
+ parameters: {
+ controls: { expanded: true },
+ },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Primary: Story = {
+ name: 'Story',
+ args: {
+ labels: {
+ title: 'Delete All Photos',
+ description: 'Are you sure you want to delete all photos? This is permanent action.',
+ confirmationText: 'Delete',
+ },
+ confirmButtonProps: {
+ color: 'danger',
+ },
+ },
+ render: (story) => {
+
+ const [isOpen, setOpen] = useState(false);
+
+ return (
+
+ setOpen(true)}>
+ Delete
+
+ setOpen(false)}
+ onCancel={() => setOpen(false)}
+ />
+
+ );
+
+ },
+};
diff --git a/stories/components/feedback/ProgressBar.mdx b/stories/components/feedback/ProgressBar.mdx
new file mode 100644
index 00000000..1659c2a4
--- /dev/null
+++ b/stories/components/feedback/ProgressBar.mdx
@@ -0,0 +1,20 @@
+import { Meta, Primary, Title, ArgTypes } from '@storybook/blocks';
+import * as ProgressBarStories from "./ProgressBar.stories";
+import SingleLineCodeBlock from "../../common/SingleLineCodeBlock";
+
+ProgressBar
+
+
+
+
+ = {
title: 'Components/Feedback/ProgressBar',
component: ProgressBar,
parameters: {
@@ -14,34 +13,11 @@ const meta: Meta = {
export default meta;
-const Template: Story = args => (
-
-);
+type Story = StoryObj;
-export const Default = Template.bind({});
-
-Default.args = {
- value: 30,
- minVal: 1,
- maxVal: 100,
-};
-
-export const Striped = Template.bind({});
-
-Striped.args = {
- value: 30,
- minVal: 1,
- maxVal: 100,
- isStriped: true,
+export const Primary: Story = {
+ name: 'Story',
+ args: {
+ value: 65,
+ },
};
-
-export const Loading = Template.bind({});
-
-Loading.args = {
- isLoading: true,
- value: 45,
- minVal: 1,
- maxVal: 100,
-};
\ No newline at end of file
diff --git a/stories/components/feedback/SkeletonItem.stories.tsx b/stories/components/feedback/SkeletonItem.stories.tsx
deleted file mode 100644
index fcc2f966..00000000
--- a/stories/components/feedback/SkeletonItem.stories.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-
-import { SkeletonItem } from '../../../src';
-import { SkeletonItemProps } from '../../../src/components/SkeletonItem';
-
-const meta: Meta = {
- title: 'Components/Feedback/SkeletonItem',
- component: SkeletonItem,
- parameters: {
- controls: { expanded: true },
- },
-};
-
-export default meta;
-
-const Template: Story = args => (
-
-
-);
-
-export const Wave = Template.bind({});
-
-Wave.args = {};
-
-export const Pulse = Template.bind({});
-
-Pulse.args = { variant: 'pulse' };
\ No newline at end of file
diff --git a/stories/components/feedback/Spinner.stories.tsx b/stories/components/feedback/Spinner.stories.tsx
deleted file mode 100644
index 1ce699fa..00000000
--- a/stories/components/feedback/Spinner.stories.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-
-import { Spinner } from '../../../src';
-import { SpinnerProps } from '../../../src/components/Spinner';
-
-const meta: Meta = {
- title: 'Components/Feedback/Spinner',
- component: Spinner,
-};
-
-export default meta;
-
-const Template: Story = args => (
-
-
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
- size: 'md',
-};
diff --git a/stories/components/feedback/Tooltip.mdx b/stories/components/feedback/Tooltip.mdx
new file mode 100644
index 00000000..f688ffce
--- /dev/null
+++ b/stories/components/feedback/Tooltip.mdx
@@ -0,0 +1,28 @@
+import {Meta, Primary, Title, ArgTypes, Canvas } from '@storybook/blocks';
+import * as TooltipStories from "./Tooltip.stories";
+import SingleLineCodeBlock from "../../common/SingleLineCodeBlock";
+
+Tooltip
+
+
+
+
+This component is built on top of [Radix Tooltip](https://www.radix-ui.com/primitives/docs/components/tooltip)
+
+ = {
+ title: 'Components/Feedback/Tooltip',
+ component: Tooltip,
+ parameters: {
+ controls: { expanded: true },
+ },
+ argTypes: {
+ children: { control: { disable: true } },
+ overlay: { control: { disable: true } },
+ },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Primary: Story = {
+ args: {
+ overlay: (
+
+ Very Good
+
+ ),
+ children: (
+
+ Hover for Tooltip
+
+ ),
+ },
+};
+
+export const WithArrow: Story = {
+ tags: ['unlisted'],
+ args: {
+ showArrow: true,
+ overlay: (
+
+ Tooltip points to its trigger
+
+ ),
+ children: (
+
+ Hover for Tooltip with Arrow
+
+ ),
+ },
+};
\ No newline at end of file
diff --git a/stories/components/inputs/Button.mdx b/stories/components/inputs/Button.mdx
deleted file mode 100644
index 69e0ac2b..00000000
--- a/stories/components/inputs/Button.mdx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Meta, Primary, Title, Controls, Story } from '@storybook/blocks';
-import * as ButtonStories from "./Button.stories";
-
-Button
-
-**`import { Button } from 'chaya-ui';`**
-
-Checkbox
+
+
+
+
+> = {
+ title: 'Components/Inputs/Checkbox',
+ component: Checkbox,
+};
+
+export default meta;
+
+export type Story = StoryObj>;
+
+const BaseCheckboxTemplate = (args: CheckboxProps) => {
+ const [isChecked, setIsChecked] = React.useState(false);
+ return (
+ setIsChecked(!isChecked)}
+ />
+ );
+};
+
+export const Primary: Story = {
+ args: {
+ label: 'Will you like to check this checkbox?',
+ value: 'checked',
+ },
+ render: (args) =>
+
> = {
@@ -72,125 +72,4 @@ export const OptionDisabled: Story = {
label: 'Which airlines do you dislike?',
},
render: (args) => ) => {
-// const [value, setValue] = useState(props.value ?? []);
-// return (
-// > = args => > = args => (
-//
-//
-//
-// );
-//
-// export const Required = RequiredTemplate.bind({});
-//
-// Required.args = {
-// isRequired: true,
-// label: 'Select Gender',
-// options: GENDER_OPTIONS,
-// };
-//
-// export const Disabled = Template.bind({});
-//
-// Disabled.args = {
-// isDisabled: true,
-// label: 'Select Gender',
-// value: defaultValue,
-// options: GENDER_OPTIONS,
-// };
-//
-// export const Horizontal = Template.bind({});
-//
-// Horizontal.args = {
-// label: 'Select Gender',
-// value: defaultValue,
-// alignment: 'horizontal',
-// options: GENDER_OPTIONS,
-// };
-//
-// const CheckboxColorsTemplate: Story> = args => (
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
> = args => (
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
-//
DateTimeInput
+
+
+
+
+ = {
+ title: 'Components/Inputs/DateTimeInput',
+ component: DateTimeInput,
+ parameters: {
+ controls: { expanded: true },
+ },
+};
+
+export default meta;
+
+export type Story = StoryObj;
+
+const DefaultTemplate = (args: DateTimeInputProps) => {
+
+ const [value, setValue] = useState(args.value || '');
+
+ const render = useMemo(() => (
+
+
+ ), [value]);
+
+ return render;
+};
+
+
+export const Primary: Story = {
+ args: {
+ label: 'Publish Timestamp',
+ value: '2024-07-20T12:09:43Z',
+ },
+ render: (args) => (
+ = args => (
-
-
-);
-
-export const Basic = Template.bind({});
-
-Basic.args = {
- label: 'Start Time',
-};
diff --git a/stories/components/inputs/DropdownFilter.mdx b/stories/components/inputs/DropdownFilter.mdx
index 58cda923..d0c46c35 100644
--- a/stories/components/inputs/DropdownFilter.mdx
+++ b/stories/components/inputs/DropdownFilter.mdx
@@ -1,5 +1,6 @@
-import { Meta, Primary, Title, Controls, Canvas } from '@storybook/blocks';
+import { Meta, Primary, Title, ArgTypes, Canvas } from '@storybook/blocks';
import * as DropdownFilterStories from "./DropdownFilter.stories";
+import SingleLineCodeBlock from "../../common/SingleLineCodeBlock";
+
= {
title: 'Components/Inputs/DropdownFilter',
diff --git a/stories/components/inputs/Dropzone.stories.tsx b/stories/components/inputs/Dropzone.stories.tsx
deleted file mode 100644
index 2628bf15..00000000
--- a/stories/components/inputs/Dropzone.stories.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { useState } from 'react';
-import { Meta, Story } from '@storybook/react';
-
-import { Dropzone } from '../../../src';
-import { DropzoneProps } from '../../../src/components/Dropzone';
-
-const meta: Meta = {
- title: 'Components/Inputs/Dropzone',
- component: Dropzone,
- argTypes: {
- children: {
- control: {
- type: 'text',
- },
- },
- },
- parameters: {
- controls: { expanded: true },
- },
-};
-
-export default meta;
-
-const Template: Story = args => {
- const [files, setFiles] = useState([]);
- return (
- PinInput
-
-**`import { PinInput } from 'chaya-ui';`**
-
-
+
> = {
title: 'Components/Inputs/RadioGroup',
diff --git a/stories/components/inputs/SearchBox.stories.tsx b/stories/components/inputs/SearchBox.stories.tsx
deleted file mode 100644
index 178441be..00000000
--- a/stories/components/inputs/SearchBox.stories.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Meta, Story } from '@storybook/react';
-
-import { SearchBox } from '../../../src';
-import { SearchBoxProps } from '../../../src/components/SearchBox';
-
-const meta: Meta = {
- title: 'Components/Inputs/SearchBox',
- component: SearchBox,
- argTypes: {
- onSearch: { action: 'search' },
- },
- parameters: {
- controls: { expanded: true },
- },
-};
-
-export default meta;
-
-const Template: Story = args => {
-
- const [keyword, setKeyword] = useState(args?.keyword ?? '');
-
- useEffect(() => {
- setKeyword(args?.keyword ?? '');
- }, [args?.keyword]);
-
- return (
-
-
- );
-};
-
-export const Default = Template.bind({});
-
-Default.args = {
- keyword: '',
-};
-
-
-export const WithoutButton = Template.bind({});
-
-WithoutButton.args = {
- keyword: 'something',
- hideButton: true,
-};
diff --git a/stories/components/inputs/SimpleSelect.stories.tsx b/stories/components/inputs/SimpleSelect.stories.tsx
deleted file mode 100644
index 14a99e67..00000000
--- a/stories/components/inputs/SimpleSelect.stories.tsx
+++ /dev/null
@@ -1,252 +0,0 @@
-import React, { useState } from 'react';
-import { Meta, Story } from '@storybook/react';
-
-import { Card, SimpleSelect } from '../../../src';
-import { SimpleSelectProps } from '../../../src/components/SimpleSelect';
-
-const meta: Meta = {
- title: 'Components/Inputs/Simple Select',
- component: SimpleSelect,
- argTypes: {
- children: {
- control: {
- type: 'text',
- },
- },
- },
- parameters: {
- controls: { expanded: true },
- },
-};
-
-export default meta;
-
-const Template: Story> = args => {
- const [value, setValue] = useState(args.value);
- return (
- > = Template.bind({});
-
-let asyncValue;
-
-withAsync.args = {
- labels: {
- label: 'Pokemon',
- placeholder: 'Select a pokemon',
- noOptionsFound: 'No pokemon found',
- },
- isAsync: true,
- isRequired: true,
- value: asyncValue, onChange: (v: any) => asyncValue = v,
- rightIcon: 'search',
- hideArrow: true,
- onFetch: async (query: string) => {
- const response = await fetch('https://pokeapi.co/api/v2/pokemon?limit=100&offset=0');
- const data = await response.json();
- return data.results.filter((pokemon: any) => pokemon.name.includes(query)).map((pokemon: any) => ({
- label: pokemon.name,
- value: pokemon.name,
- iconRenderer: (
- > = Template.bind({});
-
-withMultiSelect.args = {
- labels: {
- label: 'Category',
- placeholder: 'Select a category',
- },
- variant: 'comma',
- isMulti: true,
- isRequired: true,
- value: ['cs', 'me'],
- options,
-};
-
-export const withAsyncMulti: Story> = Template.bind({});
-
-
-let asyncMultiValue: string[] = ['3', '6'];
-
-withAsyncMulti.args = {
- labels: {
- label: 'Pokemon',
- placeholder: 'Select a pokemon',
- noOptionsFound: 'No pokemon found',
- },
- isAsync: true,
- isRequired: true,
- isMulti: true,
- value: asyncMultiValue,
- onChange: (v: string[]) => asyncMultiValue = v,
- rightIcon: 'search',
- hideArrow: true,
- variant: 'pill',
- onFetch: async (query: string) => {
- const response = await fetch('https://pokeapi.co/api/v2/pokemon?limit=100&offset=0');
- const data = await response.json();
- return data.results.filter((pokemon: any) => pokemon.name.includes(query)).map((pokemon: any) => ({
- label: pokemon.name,
- value: pokemon.url.split('/')[6],
- iconRenderer: (
- > = Template.bind({});
-
-
-let asyncMultiTags: string[] = ['csrf'];
-
-withAsyncMultiTags.args = {
- labels: {
- label: 'Tags',
- placeholder: 'Select a tag',
- noOptionsFound: 'No tags found',
- },
- isCreatable: true,
- isRequired: true,
- isMulti: true,
- hideSelectAll: true,
- value: asyncMultiTags,
- onChange: (v: string[]) => asyncMultiTags = v,
- rightIcon: 'search',
- hideArrow: true,
- variant: 'pill',
- options: tags,
-};
-
-export const withGroups: Story> = Template.bind({});
-
-let country;
-
-withGroups.args = {
- labels: {
- label: 'Region',
- placeholder: 'Pick a Region',
- },
- isRequired: true,
- value: country, onChange: (v: any) => country = v,
- options: [
- {
- group: 'Asia',
- options: [
- { label: 'India', value: 'india' },
- { label: 'China', value: 'china' },
- { label: 'Japan', value: 'japan' },
- { label: 'Korea', value: 'korea' },
- ],
- },
- {
- group: 'Europe',
- options: [
- { label: 'France', value: 'france' },
- { label: 'Germany', value: 'germany' },
- { label: 'Italy', value: 'italy' },
- { label: 'Spain', value: 'spain' },
- ],
- },
- ],
-};
-
-const VariantsTemplate: Story> = args => {
- const [value, setValue] = useState(args.value);
- return (
-
-
-
- );
-};
-
-export const Variants = VariantsTemplate.bind({});
-
-Variants.args = {
- labels: {
- label: 'Category',
- placeholder: 'Select a category',
- },
- isMulti: true,
- isRequired: true,
- value: ['cs', 'me'],
- options,
-};
diff --git a/stories/components/inputs/Switch.mdx b/stories/components/inputs/Switch.mdx
new file mode 100644
index 00000000..f0ebe2aa
--- /dev/null
+++ b/stories/components/inputs/Switch.mdx
@@ -0,0 +1,24 @@
+import {Meta, Primary, Title, ArgTypes, Story} from '@storybook/blocks';
+import * as SwitchStories from "./Switch.stories";
+import SingleLineCodeBlock from "../../common/SingleLineCodeBlock";
+
+Switch
+
+
+
+
+ = {
title: 'Components/Inputs/Switch',
component: Switch,
- parameters: {
- controls: { expanded: true },
- },
};
export default meta;
-const Template: Story = args => {
- const [value, setValue] = useState(args.value ?? false);
+export type Story = StoryObj;
- useEffect(() => {
- setValue(args.value);
- }, [args.value]);
+const BaseSwitchTemplate = (props: Partial) => {
+ const [isChecked, setIsChecked] = React.useState(props.value || false);
return (
-
+
);
};
-export const Default = Template.bind({});
-
-Default.args = {
- value: false,
- label: 'Do you want this?',
- isRequired: true,
-};
-
-export const Disabled = Template.bind({});
-
-Disabled.args = {
- value: true,
- label: 'You cant change this. Want to try it?',
- isDisabled: true,
+export const Primary: Story = {
+ args: {
+ label: 'Should we send you notifications?',
+ },
+ render: (args) => (
+
+
+ ),
};
-const SwitchBox = (props: any) => {
- const [value, setValue] = useState(props?.value ?? true);
- return (
- = args => (
-
-
-
-
-
-
-
-
-
-
-
-
-
+const SwitchColors = () => (
+
+
);
-export const Variants = SwitchVariants.bind({});
-
-Variants.args = {
- value: true,
- label: 'Do you want this?',
-};
-
-
+export const Colors: Story = {
+ name: 'Switch Colors',
+ tags: ['unlisted'],
+ render: () =>
,
+};
\ No newline at end of file
diff --git a/stories/components/inputs/TagSelector.stories.tsx b/stories/components/inputs/TagSelector.stories.tsx
deleted file mode 100644
index 80e10a4f..00000000
--- a/stories/components/inputs/TagSelector.stories.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Meta, Story } from '@storybook/react';
-
-import { TagSelector } from '../../../src';
-import { OptionType, TagSelectorProps } from '../../../src/components/TagSelector';
-
-const meta: Meta = {
- title: 'Components/Inputs/Tag Selector',
- component: TagSelector,
- parameters: {
- controls: { expanded: true },
- },
-};
-
-export default meta;
-
-const Template: Story
> = args => {
- const [value, setValue] = useState(args.value);
-
- useEffect(() => {
- setValue(args.value);
- }, [args.value]);
-
- return ( // @ts-ignore
- TextInput
+
+
+
+
+> = {
+ title: 'Components/Inputs/TextInput',
component: TextInput,
- argTypes: {
- children: {
- control: {
- type: 'text',
- },
- },
- },
parameters: {
controls: { expanded: true },
},
@@ -21,62 +13,28 @@ const meta: Meta = {
export default meta;
-const Template: Story> = args => {
- const [value, setValue] = useState('');
+export type Story = StoryObj>;
+
+const DefaultTemplate = (args: TextInputProps) => {
+
+ const [value, setValue] = useState(args.value || '');
- return (
-
+ const render = useMemo(() => (
+
- );
+ ), [value]);
+
+ return render;
};
-export const Default = Template.bind({
+
+export const Primary: Story = {
args: {
- label: 'Label',
- name: 'field-name',
+ label: 'Your Name',
+ value: 'Ashwin',
},
-});
-
-Default.args = {};
-
-export const WithPostfix = Template.bind({});
-
-WithPostfix.args = {
- prefixRenderer:
Points
,
- postfixRenderer:
pts
,
+ render: (args) => (
+
+ ),
};
-
-const InvalidInputsTemplate: Story
> = args => (
-
-
-
-
Input with invalid parameter set
-
-
-
-
Number Input with value in invalid range (35 for 1-5)
-
-
-
-
Email Input with invalid email as value
-
-
-
> = args => {
- const [value, setValue] = useState(args.value ?? '');
-
- return (
-
-
- );
-};
-
-const items = [
- {
- icon: 'home',
- title: 'First Item',
- description: 'This is the description for the first item',
- value: 'item1',
- },
- {
- title: 'Second Bigger Item Title',
- description: 'This is the description for the second item',
- value: 'item2',
- isDisabled: true,
- },
- {
- title: 'Third Item',
- description: 'This is the description for the third item',
- value: 'item3',
- },
- {
- title: 'Fourth Item',
- description: 'This is the description for the third item',
- value: 'item4',
- },
-];
-
-export const Default = Template.bind({});
-
-Default.args = { items, colMinWidth: 300 };
-
-export const MultiSelect = Template.bind({});
-
-MultiSelect.args = {
- items,
- value: [],
- isMulti: true,
- colMinWidth: 300,
-};
-
-export const VerticalSelect = Template.bind({});
-
-VerticalSelect.args = {
- items,
- value: [],
- isVertical: true,
- colMinWidth: 300,
-};
-
-
-export const VerticalMultiSelect = Template.bind({});
-
-VerticalMultiSelect.args = {
- items,
- value: [],
- isMulti: true,
- isVertical: true,
- colMinWidth: 300,
-};
diff --git a/stories/components/navigation/Breadcrumb.mdx b/stories/components/navigation/Breadcrumb.mdx
index 0f1d6cd3..7a74d8ed 100644
--- a/stories/components/navigation/Breadcrumb.mdx
+++ b/stories/components/navigation/Breadcrumb.mdx
@@ -1,5 +1,6 @@
-import { Meta, Primary, Title, Controls } from '@storybook/blocks';
+import { Meta, Primary, Title, ArgTypes } from '@storybook/blocks';
import * as BreadcrumbStories from "./Breadcrumb.stories";
+import SingleLineCodeBlock from "../../common/SingleLineCodeBlock";
+
Breadcrumb is a component that allows users to navigate between pages and see where they are in the hierarchy of a website.
It is usually placed at the top of the page.
@@ -17,6 +19,6 @@ It is usually placed at the top of the page.
= {
title: 'Components/Navigation/Breadcrumb',
diff --git a/stories/components/navigation/DropdownMenu.mdx b/stories/components/navigation/DropdownMenu.mdx
new file mode 100644
index 00000000..38724db8
--- /dev/null
+++ b/stories/components/navigation/DropdownMenu.mdx
@@ -0,0 +1,21 @@
+import { Meta, Title, Primary, ArgTypes } from '@storybook/blocks';
+import * as DropdownMenuStories from "./DropdownMenu.stories";
+import SingleLineCodeBlock from "../../common/SingleLineCodeBlock";
+
+DropdownMenu
+
+
+
+
+ = {
+ title: 'Components/Navigation/DropdownMenu',
+ component: DropdownMenu,
+ parameters: {
+ controls: { expanded: true },
+ },
+ argTypes: {
+ children: { control: { disable: true } },
+ },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Primary: Story = {
+ args: {
+ children: (
+
+ Open Menu
+
+ ),
+ options: [
+ { link:'#/components', title:'Components' },
+ { link:'#/components/navigation', title:'Navigation' },
+ { link:'#/components/navigation/breadcrumb', title:'Breadcrumb' },
+ ],
+ },
+ render: (story) => (
+
+
+ ),
+};
diff --git a/stories/components/navigation/PageHeader.mdx b/stories/components/navigation/PageHeader.mdx
new file mode 100644
index 00000000..51b0e030
--- /dev/null
+++ b/stories/components/navigation/PageHeader.mdx
@@ -0,0 +1,21 @@
+import { Meta, Title, Primary, ArgTypes } from '@storybook/blocks';
+import * as PageHeaderStories from "./PageHeader.stories";
+import SingleLineCodeBlock from "../../common/SingleLineCodeBlock";
+
+PageHeader
+
+
+
+
+ = {
+ title: 'Components/Navigation/PageHeader',
+ component: PageHeader,
+ parameters: {
+ controls: { expanded: true },
+ },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Primary: Story = {
+ args: {
+ title: 'Breadcrumb',
+ description: 'A breadcrumb is a secondary navigation scheme that reveals the user’s location in a website or web application.',
+ breadcrumbItems: [
+ { link:'#/components', title:'Components' },
+ { link:'#/components/navigation', title:'Navigation' },
+ { link:'#/components/navigation/breadcrumb', title:'Breadcrumb', isActive:true },
+ ],
+ },
+};
diff --git a/stories/components/navigation/PageNavigator.mdx b/stories/components/navigation/PageNavigator.mdx
new file mode 100644
index 00000000..6e418964
--- /dev/null
+++ b/stories/components/navigation/PageNavigator.mdx
@@ -0,0 +1,21 @@
+import { Meta, Title, Primary, ArgTypes } from '@storybook/blocks';
+import * as PageNavigatorStories from "./PageNavigator.stories";
+import SingleLineCodeBlock from "../../common/SingleLineCodeBlock";
+
+PageNavigator
+
+
+
+
+ = {
title: 'Components/Navigation/PageNavigator',
component: PageNavigator,
parameters: {
- controls: {
- expanded: true,
- sort: 'requiredFirst',
- },
+ controls: { expanded: true },
},
};
export default meta;
-const Template: Story = args => {
- const [page, setPage] = useState(args.page ?? 11);
- const [itemsPerPage, setItemsPerPage] = useState(10);
- return (
-
- );
-};
-
-export const Default = Template.bind({});
-
-Default.args = {
- totalCount: 200,
- itemsPerPage: 10,
-};
-
-export const WithoutPages = Template.bind({});
+type Story = StoryObj;
-WithoutPages.args = {
- totalCount: 200,
- itemsPerPage: 10,
- showPages: false,
-};
-
-export const WithoutEdges = Template.bind({});
-
-WithoutEdges.args = {
- totalCount: 200,
- itemsPerPage: 10,
- showEdges: false,
+export const Primary: Story = {
+ args: {
+ totalCount: 300,
+ page: 3,
+ itemsPerPage: 50,
+ hideItemsPerPage: true,
+ },
};
-
-export const WithoutControls = Template.bind({});
-
-WithoutControls.args = {
- totalCount: 200,
- itemsPerPage: 10,
- showEdges: false,
- showControls: false,
-};
\ No newline at end of file
diff --git a/stories/components/navigation/Sidebar.stories.tsx b/stories/components/navigation/Sidebar.stories.tsx
deleted file mode 100644
index e8e07154..00000000
--- a/stories/components/navigation/Sidebar.stories.tsx
+++ /dev/null
@@ -1,300 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-
-import { Sidebar, SidebarProps, VerticalNavigatorItemType } from '../../../src';
-
-const meta: Meta = {
- title: 'Components/Navigation/Sidebar',
- component: Sidebar,
- parameters: {
- controls: { expanded: true },
- },
-};
-
-const Template: Story = args => {
-
- const [activeItem, setActiveItem] = React.useState(args?.navigationProps?.activeItem);
-
- return (
-
-
- ({
- ...item,
- onClick: () => setActiveItem(item.key),
- items: item?.items ? (item.items?.map((subItem: any) => ({
- ...subItem,
- onClick: () => setActiveItem(subItem.key),
- }))) : undefined,
- })),
- ]}
- />
-
-
-
- {args.topNavigationItems?.map((item: any) => (
-
- setActiveItem(item.key)}
- >
- {item.label}
-
- {item?.items?.map((subItem: any) => (
- setActiveItem(subItem.key)}
- >
- {subItem.label}
-
- ))}
-
- ))}
-
-
-
- {isCollapsed ? 'L' : 'Logo'}
-
- ),
-};
-
-export const WithGroupedItems = Template.bind({});
-
-WithGroupedItems.args = {
- topNavigationItems: TOP_MENU_ITEMS,
- bottomNavigationItems: BOTTOM_MENU_ITEMS.filter((i) => i.key !== 'Logout'),
- navigationGroups: [
- {
- title: 'Products',
- items: [
- {
- key: 'product-1',
- label: 'Product 1',
- icon: 'stack-line',
- },
- {
- key: 'product-2',
- label: 'Product 2',
- icon: 'stack-line',
- },
- {
- key: 'product-3',
- label: 'Product 3',
- icon: 'stack-line',
- },
- ],
- },
- {
- title: 'Orders',
- items: [
- {
- key: 'order-1',
- label: 'Order 1',
- icon: 'stack-line',
- },
- {
- key: 'order-2',
- label: 'Order 2',
- icon: 'stack-line',
- },
- {
- key: 'order-3',
- label: 'Order 3',
- icon: 'stack-line',
- },
- ],
- },
- {
- title: 'Analytics',
- items: [
- {
- key: 'order-analytics',
- label: 'Order Analytics',
- icon: 'stack-line',
- },
- {
- key: 'product-analytics',
- label: 'Product Analytics',
- icon: 'stack-line',
- },
- {
- key: 'g-user-analytics',
- label: 'User Analytics',
- icon: 'stack-line',
- items: [
- {
- key: 'user-analytics-1',
- label: 'User Analytics 1',
- icon: 'stack-line',
- },
- {
- key: 'user-analytics-2',
- label: 'User Analytics 2',
- icon: 'stack-line',
- },
- {
- key: 'user-analytics-3',
- label: 'User Analytics 3',
- icon: 'stack-line',
- },
- ],
- },
- ],
- },
- ],
- userProfile: {
- name: 'John Doe',
- avatar: {
- alt: 'John Doe',
- },
- },
- logoutButton: {
- link: '#',
- icon: 'logout-box-r-line text-3xl',
- },
- navigationProps: {
- activeItem: 'user-analytics',
- },
- topRenderer: ({ isCollapsed }) => (
-
- {isCollapsed ? 'L' : 'Logo'}
-
- ),
-};
-
-
-export const Line = Template.bind({});
-
-Line.args = {
- topNavigationItems: TOP_MENU_ITEMS,
- bottomNavigationItems: BOTTOM_MENU_ITEMS,
- navigationProps: {
- variant: 'line',
- activeItem: 'Settings',
- },
- topRenderer: ({ isCollapsed }) => (
-
- {isCollapsed ? 'L' : 'Logo'}
-
- ),
-};
-
-export const Collapsed = Template.bind({});
-
-Collapsed.args = {
- topNavigationItems: TOP_MENU_ITEMS,
- bottomNavigationItems: BOTTOM_MENU_ITEMS,
- isCollapsed: true,
-};
-
-export const CollapsedLineVariant = Template.bind({});
-
-CollapsedLineVariant.args = {
- topNavigationItems: TOP_MENU_ITEMS,
- bottomNavigationItems: BOTTOM_MENU_ITEMS,
- isCollapsed: true,
- navigationProps: {
- variant: 'line',
- activeItem: 'Products',
- },
-};
-
-
-
-export default meta;
diff --git a/stories/components/navigation/VerticalNavigator.mdx b/stories/components/navigation/VerticalNavigator.mdx
index c779eb82..95fc554e 100644
--- a/stories/components/navigation/VerticalNavigator.mdx
+++ b/stories/components/navigation/VerticalNavigator.mdx
@@ -1,5 +1,6 @@
-import {Meta, Primary, Title, Controls, Canvas, Story} from '@storybook/blocks';
+import {Meta, Primary, Title, ArgTypes, Canvas, Story} from '@storybook/blocks';
import * as VerticalNavigatorStories from "./VerticalNavigator.stories";
+import SingleLineCodeBlock from "../../common/SingleLineCodeBlock";
+
= {
title: 'Components/Navigation/VerticalNavigator',
@@ -82,7 +79,7 @@ export const Primary: Story = {
export const BoxedVariant: Story = {
tags: ['unlisted'],
- storyName: 'Vertical Navigator Boxed Variant',
+ name: 'Vertical Navigator Boxed Variant',
args: {
items: defaultMenuItems,
activeItem: 'third-second',
@@ -94,7 +91,7 @@ export const BoxedVariant: Story = {
export const LineVariant: Story = {
tags: ['unlisted'],
- storyName: 'Vertical Navigator Line Variant',
+ name: 'Vertical Navigator Line Variant',
args: {
items: defaultMenuItems,
activeItem: 'third-second',
@@ -143,20 +140,20 @@ const NavigatorVariants = ({ variant }: { variant: VerticalNavigatorProps['varia
export const NavigatorPillColors: Story = {
tags: ['unlisted'],
- storyName: 'Vertical Navigator Pill Colors',
+ name: 'Vertical Navigator Pill Colors',
render: () => = args => {
-
- const [isOpen, setIsOpen] = React.useState(args.isOpen);
-
- React.useEffect(() => {
- setIsOpen(args.isOpen);
- }, [args.isOpen]);
-
- return (
-
- setIsOpen(true)}>
- Open
-
- setIsOpen(false)}
- onConfirm={() => setIsOpen(false)}
- />
-
- );
-};
-
-export const Default = Template.bind({});
-
-Default.args = {
- isOpen: true,
- labels: {
- title: 'Are you sure?',
- description: 'This action cannot be undone.',
- },
-};
-
-
-export const RequirePassword = Template.bind({});
-
-RequirePassword.args = {
- isOpen: true,
- requirePassword: true,
- labels: {
- title: 'Are you sure?',
- description: 'This action cannot be undone.',
- },
-};
-
-export const RequireConfirmationText = Template.bind({});
-
-RequireConfirmationText.args = {
- isOpen: true,
- requireConfirmationText: true,
- labels: {
- title: 'Are you sure?',
- description: 'This action cannot be undone.',
- confirmationText: 'AMAZING',
- },
- cancelButtonProps: {
- color: 'success',
- },
- confirmButtonProps: {
- color: 'danger',
- },
-};
diff --git a/stories/components/overlays/Drawer.stories.tsx b/stories/components/overlays/Drawer.stories.tsx
deleted file mode 100644
index 05b040c1..00000000
--- a/stories/components/overlays/Drawer.stories.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Meta, Story } from '@storybook/react';
-
-import { Drawer } from '../../../src';
-import { DrawerProps } from '../../../src/components/Drawer';
-
-const meta: Meta = {
- title: 'Components/Overlays/Drawer',
- component: Drawer,
- parameters: {
- controls: { expanded: true },
- },
-};
-
-export default meta;
-
-const lorem = `Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad architecto aut consequuntur dignissimos, distinctio
- ea error magnam molestias nam quaerat qui quia ullam voluptate. Aperiam eaque est facere facilis incidunt ipsum
- iste itaque magnam minus nisi, nobis non nulla reiciendis suscipit tempore, temporibus ut veniam voluptatem?
- Aliquid explicabo, fuga iusto nam porro temporibus tenetur velit! Dicta, quis sint! Commodi consequatur cum
- deleniti dolores, quam reiciendis. Accusamus amet cum debitis, eos eum ipsam itaque modi quis repellendus
- voluptas! Consequatur, deleniti dolore eius eligendi eos excepturi fugit illum magnam molestias mollitia natus
- nemo non pariatur provident quas, reiciendis saepe similique temporibus veritatis.`;
-
-const Template: Story = args => {
- const [isOpen, setIsOpen] = useState(args.isOpen);
-
- useEffect(() => {
- setIsOpen(args.isOpen);
- }, [args.isOpen]);
-
- return (
-
-
setIsOpen(true)}>
- open
-
- {Array(8).fill(lorem).map(l =>
{l}
)}
-
setIsOpen(false)}>
-
- {Array(1).fill(lorem).map(l =>
{l}
)}
-
-
-
Heading
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolorem fugiat maiores rem? Adipisci consequatur possimus rerum. Aliquam at debitis deserunt dolorem enim et incidunt natus nulla, officia, pariatur rem.
-
- open
-
-);
-
-const Template: Story = args => {
- return (
-
-
- );
-};
-
-export const Default = Template.bind({});
-
-const FiveCorners: Story = args => {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
= args => {
- return (
-
-
-
- open
-
-
-
- );
-};
-
-export const Default = Template.bind({});
-export const withGroups = Template.bind({});
-
-withGroups.args = {
- options: [
- {
- options: [
- {
- title: 'View',
- icon: 'external-link',
- onClick: () => console.log('open viewer'),
- },
- {
- title: 'Edit',
- onClick: () => console.log('open editor'),
- },
- ],
- },
- {
- title: 'Advanced',
- icon: 'external-link',
- options: [
- {
- title: 'Item 2',
- onClick: () => console.log('clicked'),
- },
- ],
- },
- {
- title: 'Delete',
- onClick: () => console.log('delete'),
- },
- ],
-};
-
-const FiveCorners: Story = args => {
- return (
-
-
-
-
- open
-
-
-
-
-
-
- open
-
-
-
-
-
-
- open
-
-
-
-
-
-
- open
-
-
-
-
-
-
- open
-
-
-
-
- Custom renderer based component
-
- ),
- },
- {
- 'icon': 'bin',
- 'title': 'Item 4 custom styling',
- 'className': 'bg-red-600/80 text-white',
- 'link': '#/item/link',
- },
- ],
-};
diff --git a/stories/components/overlays/HoverCard.stories.tsx b/stories/components/overlays/HoverCard.stories.tsx
deleted file mode 100644
index fea2fe80..00000000
--- a/stories/components/overlays/HoverCard.stories.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-
-import { Button, HoverCard } from '../../../src';
-
-const meta: Meta = {
- title: 'Components/Overlays/HoverCard',
- component: HoverCard,
- parameters: {
- backgrounds: {},
- controls: { expanded: true },
- },
-};
-
-export default meta;
-
-
-const Card = () => (
-
-
-
-
- “Lorem ipsum dolor sit amet, ut labore et dolore magna aliqua. Ut enim ad minim veniam,
- quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.”
-
-
-
-
- Jane Doe
-
-
- Staff Engineer, Algolia
-
-
-
-
-);
-
-const Template: Story = args => (
-
-
- Hover Top-Left
-
-
-
- Hover Here
-
-
-
- Hover Here
-
-
-
- Hover Here
}
- cardRenderer={
}
- {...args}
- />
-
- Hover Here
}
- cardRenderer={ = args => {
-
- const [isOpen, setIsOpen] = React.useState(args.isOpen);
- const [subject, setSubject] = React.useState('cs');
-
- React.useEffect(() => {
- setIsOpen(args.isOpen);
- }, [args.isOpen]);
-
- return (
-
-
setIsOpen(true)}>
- open
-
-
setIsOpen(false)}>
- {l}
)}
-
- Sticky Button
-
-
-
= args => (
-
-
- Shows at the bottom of the button.
} >
-
Top Left
-
-
- Shows at the bottom of the button.
}
- >
- Top Right
-
-
-
- Shows the content at the top of the button.
}
-
- >
-
Bottom Right
-
-
- Shows the content at the top of the button.
}
-
- >
- Bottom Left
-
-
- Shows content at the top of the button.
}
- >
-
- Center
-
-
-
-
-
-
-
- {/*// @ts-ignore*/}
-
-
- {/*// @ts-ignore*/}
-
-
-
- {}} />
-
-
- {/*
-
- {/*// @ts-ignore*/}
-
-
- {/*// @ts-ignore*/}
-
-
-
-
-
- {/*// @ts-ignore*/}
-
-
- {/*// @ts-ignore*/}
-
-
- {/*// @ts-ignore*/}
-
-
- {/*// @ts-ignore*/}
-
-
-
- hi elllo
-
-
-
-
-
- hi elllo
-
-
-
-
- hi elllo
-
-
-
- {/*// @ts-ignore*/}
-
-
-
- j1
-
-
-
-
-
isActivated && (
-
-
-
- Emails You Receive
-
-
-
-
-
-
- )}
- >
-
-
Select Item
+
+ {data.map((item) => (
+ {item.name}
+ ))}
+
+```
+
+In Chaya, the same code would look like this -
+```jsx
+ ({ label: i.name, value: i.id }))}
+/>
+```
+
+This design choice and approach becomes even more obvious with more complex components like Tables, where you
+normally would -
+```tsx
+
+
+
+
+ To convert
+ into
+ multiply by
+
+
+
+
+ inches
+ millimetres (mm)
+ 25.4
+
+
+
+
+```
+
+With ChayaUI, this becomes -
+
+```tsx
+ i.from },
+ { label: 'into', key: 'to', value: (i) => i.to },
+ { label: 'multiply by', key: 'factor', textAlign: 'right', value: (i) => i.factor },
+ ]}
+ data={[
+ { id: '1', from: 'inches', to: 'millimetres (mm)', factor: 25.4 },
+ ]}
+/>
+```
+
+Because we use typescript generics, you can be sure that the data you pass into the components is correct, and
+`value: (i) => i.from` will be type-checked against the data you pass in, and in-fact you will get auto-complete
+for not just the props, or `properties`, but also for the value `i`.
+
+We do not claim that our approach is better than the other, but it is certainly different, and for us
+it has been more convenient and less error-prone. We follow this approach consistently across all our components,
+and **rarely have sub-components that need to be used in conjunction with the main component**.
+
+We, thus, **do not follow the principle of composition**, which we understand is an anti-pattern in React,
+but we believe that it is a trade-off we make.
+
+### Type-Safety & Built-in Documentation
+
+Chaya UI is built with TypeScript, which means that you can be sure that your components are used correctly, and
+that data is passed into and out of the components correctly with type-safety.
+
+It can be often difficult to learn a new component library and understand its API. Thanks to TypeScript, and
+`react-docgen-typescript`, and our simple and consistent API, you can easily understand the API of each component.
+We also accept and use typescript generics for our components so that our callbacks and props are type-safe.
+
+
+### Styling
+
+All styling in Chaya UI is done with **Tailwind CSS**, which is a utility-first CSS framework that allows you to build
+beautiful and responsive interfaces with minimal CSS. Our components are designed to be minimal and modern, and
+are designed to be easy to be overridden with in-built props such as `variant`, `size`, `color` etc., your own
+custom tailwind classes, or your own CSS overrides.
+
+All our components expose atleast one `className` prop, which allows you to add your own custom tailwind classes,
+and many expose more specific `className` props that allow you to style the component in a more granular way.
+We sometimes also expose `style` props, which allow you to add your own custom CSS styles.
+
+We let you _*compile the tailwind CSS for the components in your downstream application*_, so that you can customize
+and override the styles as you see fit.
+
+### Theming
+
+ChayaUI supports **Runtime Theming** out of the box. You can easily change the theme of your application at runtime
+(such as based on tenant, user preferences, etc) by changing the theme object that you pass to the `ThemeProvider`,
+and all the components will automatically update to reflect the new theme.
+
+ChayaUI also of-course supports **Dark Mode** out of the box, but goes a step further by integrating it with the
+theme, and **automatically deciding whether the UI must be in dark or light scheme based on the theme colors**. All
+components are designed to work well in both light and dark color themes.
+
+Such as if your theme has a dark background color, the text color will automatically switch to white, and vice-versa.
+We do not require you to pass any additional props to enable dark mode, it just works out of the box, based on
+the theme colors.
+
+If you need a switch to toggle dark mode in your application, simply switch the theme colors provided to the
+`ThemeProvider`, and the components will automatically switch to the appropriate mode.
+
+
+### Accessibility
+
+Chaya UI is built on top of **Radix Primitives**, which provides a solid foundation for building accessible
+and responsive components.
+
+We have used native HTML elements and attributes, whenever available and appropriate, instead of purely styling
+generic html elements, which makes our components more accessible.
+
+Our components also support **Keyboard Navigation**, and **Screen Readers**, and have been written with
+correct ARIA attributes and semantics.
diff --git a/stories/getting-started/01-installation.mdx b/stories/getting-started/01-installation.mdx
new file mode 100644
index 00000000..75fe11c7
--- /dev/null
+++ b/stories/getting-started/01-installation.mdx
@@ -0,0 +1,98 @@
+import {Meta, Unstyled, } from "@storybook/blocks";
+import Tabs from "../../src/components/Tabs";
+import Card from "../../src/components/Card";
+import SingleLineCodeBlock from "../common/SingleLineCodeBlock";
+
+
+
+
+
+
+
+
+## Configure Provider
+
+After installing ChayaUI, you need to set up the ChayaProvider at the root of your application. This can be either in
+your `index.tsx`, `App.tsx` etc. depending on the framework you use.
+
+```tsx
+import * as React from 'react'
+
+// 1. import `ChayaProvider` component
+import { ChayaProvider } from 'chaya-ui'
+
+function App() {
+ // 2. Wrap ChayaProvider at the root of your app
+ return (
+
+
+ )
+}
+```
+
+You can configure the ChayaProvider with the following props:
+- `theme` - The theme object to be used in the application
+- `linkWrapper` - A function that wraps the link components, useful for routing libraries like `react-router-dom`, `next/link` etc.
+- `iconWrapper` - A function that wraps the icon components, useful for icon libraries like `react-icons`, `react-feather` etc.
+
+
+## Add Tailwind Config
+
+ChayaUI uses TailwindCSS for styling, but does not compile or bundle the styles by default. You need to add the ChayaUI
+source files to your `tailwind.config.js` to process the styles. Further, you should extend the ChayaUI theme in your
+`tailwind.config.js` to customize the theme.
+
+```js
+// 1. import the chaya-ui theme
+const theme = require('chaya-ui/tailwind-theme');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: [
+ // 2. add the path to the chaya-ui source files
+ 'node_modules/chaya-ui/**/*.js',
+ // rest of your content paths
+ ],
+ // ...
+ theme: {
+ extend: theme,
+ },
+ // ...
+};
+```
\ No newline at end of file
diff --git a/stories/hooks/01_index.mdx b/stories/hooks/01_index.mdx
new file mode 100644
index 00000000..cef9d429
--- /dev/null
+++ b/stories/hooks/01_index.mdx
@@ -0,0 +1,16 @@
+import {Meta} from "@storybook/blocks";
+
+
+
+
Chaya UI
+
Chaya UI is a modern, data-first component library for React.
+
+
-
-
-
-
-
-
Chaya UI
-
-
-
- Chaya UI is a modern, functional design system & component library for React.
-
-
-
-
-
-
-
----
-
-
-
-
-## Installation
-
-
-Install the package by running -
-```bash
-npm install chaya-ui
-```
-
-## Usage
-
-To use the components from `chaya-ui` in your React project, you need to setup a Context Provider in your app.
-This is required for the components to work properly.
-
-To do this, wrap your application with the `DSRContextProvider` component provided by `chaya-ui`, and pass the relevant
-props to it.
-
-Update your `tailwind.config.js` to include the components from `chaya-ui` in the `content` array for TailwindCSS to process.
-
- ```js
- const theme = require('chaya-ui/tailwind-theme');
-
- /** @type {import('tailwindcss').Config} */
- module.exports = {
- content: [
- 'node_modules/chaya-ui/**/*.js',
- // ...
- ],
- // ...
- theme: {
- extend: theme,
- },
- // ...
- };
- ```
-
-Here is an example on a AppView wrapper component for a Next.js app, that configures `chaya-ui` for use in the app -
-
-```tsx
-'use client';
-import { ReactNode, ReactElement } from "react";
-
-import { DSRContextProvider } from 'chaya-ui';
-
-// external libraries for example usecase
-import Link from 'next/link';
-import { Search, X } from 'react-feather';
-
-
-const AppView = ({ children }: { children: ReactNode }) => (
- (
-
-);
-```
-
-This `AppView` can be then used in the global `layouts.tsx` or `pages/_app.tsx` file of your Next.js app.
\ No newline at end of file
diff --git a/stories/useClipboard.stories.tsx b/stories/useClipboard.stories.tsx
deleted file mode 100644
index c8fa9c0d..00000000
--- a/stories/useClipboard.stories.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-
-import { useClipboard } from '../src';
-
-const meta: Meta = {
- title: 'Hooks/useClipboard',
- parameters: {
- controls: { expanded: true },
- },
-};
-
-export default meta;
-
-const Template: Story = () => {
- const [value, copy, isSupported] = useClipboard();
- return (
-
-
- {isSupported() ?
-
- clipboard is supported
-
:
-
- Clipboard is not supported!!
-
- }
-
-
-
Click to copy:
- copy('ABCD')}
- >
- ABCD
-
- copy('Lorem ipsum dolor sit amet, consectetur adipiscing elit.')}
- >
- Lorem ipsum
-
- copy('123')}
- >
- 123
-
-
-
- Copied value:
- {value ?? 'Nothing is copied yet!'}
-
-
-
-
-
- {delta.days}
- {' '}
- Days
- {' '}
-
-
- {delta.hours}
- {' '}
- Hours
- {' '}
-
-
- {delta.minutes}
- {' '}
- Minutes
- {' '}
-
-
- {delta.seconds}
- {' '}
- Seconds
- {' '}
-
-
-
-
(500);
- const [count, { start, stop, reset }] = useCounter({
- initialValue: args.seconds,
- interval: args.interval,
- isIncrement: args.isIncrement,
- });
-
- const handleChangeIntervalValue = (event: ChangeEvent) => {
- setIntervalValue(Number(event.target.value));
- };
- return (
-
-
-
-
-
- start
- stop
- reset
-
-
-
-
{format(23000, 'INR')}
-
{format(320000, 'INR')}
-
{format(2300000, 'INR')}
-
{format(32000000, 'INR')}
-
{format(230000000, 'INR')}
-
-
+ 
,
+ renderer: 
,
+ renderer: 
,
+ renderer: 
+ 
+ 
+ 
-