diff --git a/TODO.md b/TODO.md index 3f4d1d21..c2eee87d 100644 --- a/TODO.md +++ b/TODO.md @@ -6,3 +6,4 @@ - React - DTS + - enable/disable touch ripple diff --git a/src/react/components/Badge.jsx b/src/react/components/Badge.jsx index 30772c16..36fd6b25 100644 --- a/src/react/components/Badge.jsx +++ b/src/react/components/Badge.jsx @@ -6,7 +6,7 @@ const Badge = forwardRef((props, ref) => { component = 'span', className, colors: colorsProp, - sm, + small, ios, material, @@ -38,7 +38,7 @@ const Badge = forwardRef((props, ref) => { ...colorsProp, }; - const size = sm ? 'sm' : 'md'; + const size = small ? 'sm' : 'md'; const c = themeClasses( { diff --git a/src/react/components/ListItem.jsx b/src/react/components/ListItem.jsx index 02e9b343..00af8da3 100644 --- a/src/react/components/ListItem.jsx +++ b/src/react/components/ListItem.jsx @@ -82,7 +82,7 @@ const ListItem = forwardRef((props, ref) => { const colors = { text: cls(`text-black`, dark('dark:text-white')), menuListItemText: cls(`text-primary`, dark('dark:text-white')), - menuListItemBg: 'bg-primary', + menuListItemActiveBg: 'bg-primary dark:bg-primary', ...colorsProp, }; @@ -116,7 +116,7 @@ const ListItem = forwardRef((props, ref) => { dark('dark:touch-ripple-white z-10') ), isMenuListItemActive - ? 'bg-primary bg-opacity-15 dark:bg-primary' + ? cls(colors.menuListItemActiveBg, 'bg-opacity-15') : cls( `active:bg-black active:bg-opacity-10`, dark('dark:active:bg-white dark:active:bg-opacity-10') diff --git a/src/react/components/Navbar.jsx b/src/react/components/Navbar.jsx index b9136821..85d95997 100644 --- a/src/react/components/Navbar.jsx +++ b/src/react/components/Navbar.jsx @@ -1,7 +1,6 @@ import React, { useRef, forwardRef, useImperativeHandle } from 'react'; import { cls } from '../shared/cls.js'; import { positionClass } from '../shared/position-class.js'; -import { useTheme } from '../shared/use-theme.js'; import { useThemeClasses } from '../shared/use-theme-classes.js'; import { useDarkClasses } from '../shared/use-dark-classes.js'; @@ -41,7 +40,6 @@ const Navbar = forwardRef((props, ref) => { const Component = component; - const theme = useTheme({ ios, material }); const themeClasses = useThemeClasses({ ios, material }); const dark = useDarkClasses(); @@ -50,10 +48,11 @@ const Navbar = forwardRef((props, ref) => { }; const colors = { - bg: - theme === 'ios' - ? cls('bg-bars-ios-light', dark('dark:bg-bars-ios-dark')) - : cls('bg-bars-material-light', dark('dark:bg-bars-material-dark')), + bgIos: cls('bg-bars-ios-light', dark('dark:bg-bars-ios-dark')), + bgMaterial: cls( + 'bg-bars-material-light', + dark('dark:bg-bars-material-dark') + ), title: cls('text-black', dark('dark:text-white')), ...colorsProp, }; @@ -68,11 +67,11 @@ const Navbar = forwardRef((props, ref) => { bg: { common: cls('absolute w-full h-full left-0 top-0', bgClassName), ios: cls( - colors.bg, + colors.bgIos, hairlines && 'hairline-b', translucent && 'translucent' ), - material: `shadow-md ${colors.bg}`, + material: `shadow-md ${colors.bgMaterial}`, }, subnavbar: { common: cls('relative flex items-center', subnavbarClassName), diff --git a/src/react/components/Preloader.jsx b/src/react/components/Preloader.jsx index d0aa5151..dcb673c1 100644 --- a/src/react/components/Preloader.jsx +++ b/src/react/components/Preloader.jsx @@ -40,7 +40,7 @@ const Preloader = forwardRef((props, ref) => { const themeClasses = useThemeClasses({ ios, material }); const colors = { - text: 'text-primary', + icon: 'text-primary', ...colorsProp, }; @@ -51,7 +51,7 @@ const Preloader = forwardRef((props, ref) => { base: { common: cls( theme === 'ios' ? 'twm-ios-preloader' : 'twm-material-preloader', - `inline-block ${size} ${colors.text}` + `inline-block ${size} ${colors.icon}` ), material: `stroke-4`, }, diff --git a/src/react/components/Range.jsx b/src/react/components/Range.jsx index effd814e..f7bac16f 100644 --- a/src/react/components/Range.jsx +++ b/src/react/components/Range.jsx @@ -21,7 +21,7 @@ const Range = forwardRef((props, ref) => { defaultValue, readOnly, disabled, - step, + step = 1, min = 0, max = 100, onChange, diff --git a/src/react/components/Stepper.jsx b/src/react/components/Stepper.jsx index 84a9e33b..b936b395 100644 --- a/src/react/components/Stepper.jsx +++ b/src/react/components/Stepper.jsx @@ -10,7 +10,7 @@ const Stepper = forwardRef((props, ref) => { className, colors: colorsProp, - value, + value = 0, defaultValue, input = false, inputType = 'text', diff --git a/src/react/components/Toolbar.jsx b/src/react/components/Toolbar.jsx index 59b7b915..b2ad45e8 100644 --- a/src/react/components/Toolbar.jsx +++ b/src/react/components/Toolbar.jsx @@ -1,7 +1,6 @@ import React, { useRef, forwardRef, useImperativeHandle } from 'react'; import { cls } from '../shared/cls.js'; import { positionClass } from '../shared/position-class.js'; -import { useTheme } from '../shared/use-theme.js'; import { useThemeClasses } from '../shared/use-theme-classes.js'; import { useDarkClasses } from '../shared/use-dark-classes.js'; @@ -37,7 +36,6 @@ const Toolbar = forwardRef((props, ref) => { const Component = component; - const theme = useTheme({ ios, material }); const themeClasses = useThemeClasses({ ios, material }); const dark = useDarkClasses(); @@ -46,10 +44,11 @@ const Toolbar = forwardRef((props, ref) => { }; const colors = { - bg: - theme === 'ios' - ? cls('bg-bars-ios-light', dark('dark:bg-bars-ios-dark')) - : cls('bg-bars-material-light', dark('dark:bg-bars-material-dark')), + bgIos: cls('bg-bars-ios-light', dark('dark:bg-bars-ios-dark')), + bgMaterial: cls( + 'bg-bars-material-light', + dark('dark:bg-bars-material-dark') + ), ...colorsProp, }; @@ -70,10 +69,13 @@ const Toolbar = forwardRef((props, ref) => { common: cls('absolute w-full h-full left-0 top-0', bgClassName), ios: cls( hairlines && (top ? 'hairline-b' : 'hairline-t'), - colors.bg, + colors.bgIos, translucent && 'translucent' ), - material: cls(`shadow-md ${colors.bg}`, !top && 'transform rotate-180'), + material: cls( + `shadow-md ${colors.bgMaterial}`, + !top && 'transform rotate-180' + ), }, inner: { common: cls( diff --git a/src/types/App.d.ts b/src/types/App.d.ts index 530bfc81..edf3fca3 100644 --- a/src/types/App.d.ts +++ b/src/types/App.d.ts @@ -1,5 +1,20 @@ interface Props { + /** + * Component's HTML Element + * + * @default 'div' + */ component?: string; + /** + * App theme + * + * @default 'material' + */ theme?: 'ios' | 'material'; + /** + * Include `dark:` variants (if dark theme is in use) + * + * @default false + * */ dark?: boolean; } diff --git a/src/types/Badge.d.ts b/src/types/Badge.d.ts index 89c76582..2fd5f69d 100644 --- a/src/types/Badge.d.ts +++ b/src/types/Badge.d.ts @@ -1,5 +1,29 @@ interface Props { + /** + * Component's HTML Element + * + * @default 'span' + */ component?: string; - colors?: object; - sm?: boolean; + /** + * Object with Tailwind CSS colors classes + * */ + colors?: { + /** + * Badge bg color + * + * @default 'bg-primary' + */ + bg?: string; + /** + * Badge text color + * + * @default 'text-white' + */ + text?: string; + }; + /** + * Makes small badge + */ + small?: boolean; } diff --git a/src/types/Block.d.ts b/src/types/Block.d.ts index 3bbf3345..1ca9d421 100644 --- a/src/types/Block.d.ts +++ b/src/types/Block.d.ts @@ -1,9 +1,49 @@ interface Props { + /** + * Component's HTML Element + * + * @default 'div' + */ component?: string; - colors?: object; + /** + * Object with Tailwind CSS colors classes + * */ + colors?: { + /** + * Strong block bg color + * + * Default 'bg-block-strong-light dark:bg-block-strong-dark' + */ + strongBg?: string; + }; + /** + * Tailwind CSS margin class + * + * @default 'my-8' + * */ margin?: string; + /** + * Adds extra highlighting and padding block content + * + * @default false + */ strong?: boolean; + /** + * Makes block inset + * + * @default false + */ inset?: boolean; + /** + * Removes hairlines and margins, useful for case nesting block within other blocks + * + * @default false + */ nested?: boolean; + /** + * Renders outer hairlines (borders) when the block is `strong` + * + * @default true + */ hairlines?: boolean; } diff --git a/src/types/BlockFooter.d.ts b/src/types/BlockFooter.d.ts index 678e4331..e26bc969 100644 --- a/src/types/BlockFooter.d.ts +++ b/src/types/BlockFooter.d.ts @@ -1,3 +1,8 @@ interface Props { + /** + * Component's HTML Element + * + * @default 'div' + */ component?: string; } diff --git a/src/types/BlockHeader.d.ts b/src/types/BlockHeader.d.ts index 678e4331..e26bc969 100644 --- a/src/types/BlockHeader.d.ts +++ b/src/types/BlockHeader.d.ts @@ -1,3 +1,8 @@ interface Props { + /** + * Component's HTML Element + * + * @default 'div' + */ component?: string; } diff --git a/src/types/BlockTitle.d.ts b/src/types/BlockTitle.d.ts index b425dfd5..b8ed423d 100644 --- a/src/types/BlockTitle.d.ts +++ b/src/types/BlockTitle.d.ts @@ -1,4 +1,14 @@ interface Props { + /** + * Component's HTML Element + * + * @default 'div' + */ component?: string; + /** + * Useful to disable when there is no Block or List component right after the Block Title + * + * @default true + */ withBlock?: boolean; } diff --git a/src/types/Button.d.ts b/src/types/Button.d.ts index 50652d6e..e1b57db2 100644 --- a/src/types/Button.d.ts +++ b/src/types/Button.d.ts @@ -1,15 +1,113 @@ interface Props { + /** + * Component's HTML Element + * + * @default 'button' + */ component?: string; - colors?: object; + /** + * Object with Tailwind CSS colors classes + * */ + colors?: { + /** + * Button text color + * + * @default 'text-primary' + */ + text?: string; + /** + * Outline button border color + * + * @default 'border-primary' + */ + border?: string; + /** + * Full button bg color + * + * @default 'bg-primary' + */ + bg?: string; + /** + * Clicked fill button bg color + * + * @default 'active:bg-primary' + */ + activeBg?: string; + /** + * Clicked fill button bg color in dark theme + * + * @default 'active:bg-primary-dark' + */ + activeBgDark?: string; + /** + * Touch ripple color + * + * @default 'touch-ripple-primary' + */ + touchRipple?: string; + }; + /** + * Link's `href` attribute, when specified will also be rendered as `` element + * */ href?: string; + /** + * Makes button outline + * + * @default undefined + */ outline?: boolean; + /** + * Makes button in clear style (without fill color) + * + * @default false + */ clear?: boolean; + /** + * Makes button rounded + * + * @default false + */ rounded?: boolean; + /** + * Makes button small + * + * @default false + */ small?: boolean; + /** + * Makes button large + * + * @default false + */ large?: boolean; + /** + * Makes button raised (with shadow) + * + * @default false + */ raised?: boolean; + /** + * Makes button inline (e.g. `display: inline-flex`) + * + * @default false + */ inline?: boolean; + /** + * Renders segmented button, same as `` + * + * @default false + */ segmented?: boolean; + /** + * Renders segmented strong button, same as `` + * + * @default false + */ segmentedStrong?: boolean; + /** + * Renders segmented active button, same as `` + * + * @default false + */ segmentedActive?: boolean; } diff --git a/src/types/Card.d.ts b/src/types/Card.d.ts index 935e73e2..a81d6ea6 100644 --- a/src/types/Card.d.ts +++ b/src/types/Card.d.ts @@ -1,8 +1,43 @@ interface Props { + /** + * Component's HTML Element + * + * @default 'div' + */ component?: string; - colors?: object; + /** + * Object with Tailwind CSS colors classes + * */ + colors?: { + /** + * Card bg color + * + * @default 'bg-block-strong-light dark:bg-block-strong-dark' + */ + bg?: string; + /** + * Card footer text color + * + * @default 'text-black dark:text-white' + */ + footerText?: string; + }; + /** + * Tailwind CSS margin class + * + * @default 'm-4' + * */ margin?: string; + /** + * Content of the Card header + */ header?: React.ReactNode | string; + /** + * Content of the Card footer + */ footer?: React.ReactNode | string; + /** + * Makes card outline + */ outline?: boolean; } diff --git a/src/types/Checkbox.d.ts b/src/types/Checkbox.d.ts index b1bc5b73..ef6dd956 100644 --- a/src/types/Checkbox.d.ts +++ b/src/types/Checkbox.d.ts @@ -1,12 +1,79 @@ interface Props { + /** + * Component's HTML Element + * + * @default 'label' + */ component?: string; - colors?: object; + /** + * Object with Tailwind CSS colors classes + * */ + colors?: { + /** + * Checkbox border color in iOS theme + * + * @default 'border-black border-opacity-30 dark:border-white dark:border-opacity-30' + */ + borderIos?: string; + /** + * Checkbox border color in Material theme + * + * @default 'border-black border-opacity-40 dark:border-white dark:border-opacity-40' + */ + borderMaterial?: string; + /** + * Bg color when it is checked + * + * @default 'bg-primary' + */ + bgChecked?: string; + /** + * Border color when it is checked + * + * @default 'border-primary' + */ + borderChecked?: string; + }; + /** + * Defines whether the checkbox input is checked or not, for the case if it is uncontrolled component + * + * @default false + */ defaultChecked?: boolean; + /** + * Defines whether the checkbox input is checked or not + * + * @default false + */ checked?: boolean; + /** + * Defines whether the checkbox input is in indeterminate state or not + * + * @default false + */ indeterminate?: boolean; + /** + * Checkbox input name + */ name?: string; + /** + * Checkbox input value + */ value?: any; + /** + * Defines whether the checkbox input is disabled + * + * @default false + */ disabled?: boolean; + /** + * Defines whether the checkbox input is readonly + * + * @default false + */ readOnly?: boolean; + /** + * Event will be triggered when checkbox state changed + */ onChange?: (e: any) => void; } diff --git a/src/types/Chip.d.ts b/src/types/Chip.d.ts index d49e3d51..1a2baaf3 100644 --- a/src/types/Chip.d.ts +++ b/src/types/Chip.d.ts @@ -1,8 +1,51 @@ interface Props { + /** + * Component's HTML Element + * + * @default 'div' + */ component?: string; - colors?: object; + /** + * Object with Tailwind CSS colors classes + * */ + colors?: { + /** + * Chip bg color + * + * @default 'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-10' + */ + bg?: string; + /** + * Chip text color + * + * @default 'text-current' + */ + text?: string; + /** + * Chip border color + * + * @default 'border-black border-opacity-10 dark:border-white dark:border-opacity-10' + */ + border?: string; + }; + /** + * Content of the chip media area (e.g. icon) + */ media?: React.ReactNode; + /** + * Defines whether the Chip has additional "delete" button or not + * + * @default false + */ deleteButton?: boolean; - onDelete?: (e: any) => void; + /** + * Makes chip outline + * + * @default false + */ outline?: boolean; + /** + * Event will be triggered on Chip delete button click + */ + onDelete?: (e: any) => void; } diff --git a/src/types/Fab.d.ts b/src/types/Fab.d.ts index f2268e2f..850a76af 100644 --- a/src/types/Fab.d.ts +++ b/src/types/Fab.d.ts @@ -1,8 +1,49 @@ interface Props { + /** + * Component's HTML Element + * + * @default 'a' + */ component?: string; - colors?: object; + /** + * Object with Tailwind CSS colors classes + * */ + colors?: { + /** + * FAB bg color + * + * @default 'bg-primary' + */ + bg?: string; + /** + * FAB pressed bg color + * + * @default 'active:bg-primary-dark' + */ + activeBg?: string; + /** + * FAB text color + * + * @default 'text-white' + */ + text?: string; + }; + /** + * Fab's link `href` attribute + */ href?: string; + /** + * Button text (content) + */ text?: string | React.ReactNode; + /** + * Text position, can be `after` icon or `before` icon + * + * @default 'after' + */ textPosition?: 'after' | 'before'; + /** + * Fab's icon + */ icon?: React.ReactNode; } diff --git a/src/types/Icon.d.ts b/src/types/Icon.d.ts index faf92d0e..39c30181 100644 --- a/src/types/Icon.d.ts +++ b/src/types/Icon.d.ts @@ -1,6 +1,29 @@ interface Props { + /** + * Component's HTML Element + * + * @default 'i' + */ component?: string; - colors?: object; - badge?: React.ReactNode; - badgeColors?: object; + + /** Icon badge */ + badge?: string | number | React.ReactNode; + + /** + * Badge colors. Object with Tailwind CSS colors classes + * */ + badgeColors?: { + /** + * Badge bg color + * + * @default 'bg-primary' + */ + bg?: string; + /** + * Badge text color + * + * @default 'text-white' + */ + text?: string; + }; } diff --git a/src/types/Link.d.ts b/src/types/Link.d.ts index d7004770..84b8b4c0 100644 --- a/src/types/Link.d.ts +++ b/src/types/Link.d.ts @@ -1,10 +1,59 @@ interface Props { + /** + * Component's HTML Element + * + * @default 'a' + */ component?: string; - colors?: object; + /** + * Object with Tailwind CSS colors classes + * */ + colors?: { + /** + * Link text color + * + * @default 'text-primary' + */ + text?: string; + /** + * Inactive tabbar link text color + * + * @default 'text-black dark:text-white dark:text-opacity-55' + */ + tabbarInactive?: string; + }; + /** + * Should be enabled if Link is in the Navbar + * + * @default false + * */ navbar?: boolean; + /** + * Should be enabled if Link is in the Toolbar + * + * @default false + */ toolbar?: boolean; + /** + * Enable if Link doesn't contain anything except icon + * + * @default false + */ iconOnly?: boolean; + /** + * Should be enabled if Link is in the Tabbar + * + * @default false + */ tabbar?: boolean; + /** + * Highlights Tabbar Link as currently active + * + * @default false + */ tabbarActive?: boolean; + /** + * Click handler + */ onClick?: (e: any) => void; } diff --git a/src/types/List.d.ts b/src/types/List.d.ts index d94ee4f8..fe0837e8 100644 --- a/src/types/List.d.ts +++ b/src/types/List.d.ts @@ -1,9 +1,47 @@ interface Props { + /** + * Component's HTML Element + * + * @default 'ul' + */ component?: string; - colors?: object; + /** + * Object with Tailwind CSS colors classes + * */ + colors?: { + /** + * List bg color + * + * @default 'bg-block-strong-light dark:bg-block-strong-dark' + */ + bg?: string; + }; + /** + * Tailwind CSS margin class + * + * @default 'my-8' + * */ margin?: string; + /** + * Makes list block inset + * + * @default false + */ inset?: boolean; + /** + * Removes hairlines and margins, useful for case nesting list block within other blocks + * + * @default false + */ nested?: boolean; + /** + * Renders list as Menu List (same as ``) + */ menuList?: boolean; + /** + * Renders outer hairlines (borders) + * + * @default true + */ hairlines?: boolean; } diff --git a/src/types/ListButton.d.ts b/src/types/ListButton.d.ts index fbd89de2..469d3c97 100644 --- a/src/types/ListButton.d.ts +++ b/src/types/ListButton.d.ts @@ -1,11 +1,65 @@ interface Props { + /** + * Component's HTML Element + * + * @default 'li' + */ component?: string; - colors?: object; + /** + * Object with Tailwind CSS colors classes + * */ + colors?: { + /** + * List button text color + * + * @default 'text-primary' + */ + text?: string; + /** + * List button pressed bg color + * + * @default 'active:bg-primary' + */ + activeBg?: string; + /** + * List button touch ripple color + * + * @default 'touch-ripple-primary' + */ + touchRipple?: string; + }; + /** + * Renders button outer hairlines (borders) + * + * @default true + */ hairlines?: boolean; + /** + * Button's link `href` attribute + */ href?: string; + /** + * Button's link `target` attribute + */ target?: string; + /** + * Button's `type` attribute (if rendered as `