From 9ad17e510ae96ae6b755c26acc7333535ac94570 Mon Sep 17 00:00:00 2001 From: Junior Garcia Date: Tue, 25 Oct 2022 00:34:38 -0300 Subject: [PATCH] feat(system): tokens types mapped to use the prop without the "$" symbol --- apps/docs/content/docs/manifest.json | 3 +- .../docs/content/docs/theme/default-theme.mdx | 6 +-- .../collapse/src/base/collapse-item-base.tsx | 31 +++++++------ .../components/collapse/src/collapse-item.tsx | 6 +-- packages/components/collapse/src/index.ts | 2 + .../collapse/src/use-collapse-item.tsx | 12 ++--- .../collapse/stories/collapse.stories.tsx | 4 +- packages/core/system/src/common.ts | 3 +- packages/core/system/src/types.ts | 46 ++++++++++++++++++- 9 files changed, 80 insertions(+), 33 deletions(-) diff --git a/apps/docs/content/docs/manifest.json b/apps/docs/content/docs/manifest.json index 31eff4cf6..be5f445d1 100644 --- a/apps/docs/content/docs/manifest.json +++ b/apps/docs/content/docs/manifest.json @@ -34,7 +34,8 @@ "routes": [ { "title": "Default theme", - "path": "/docs/theme/default-theme.mdx" + "path": "/docs/theme/default-theme.mdx", + "updated": true }, { "title": "Customize theme", diff --git a/apps/docs/content/docs/theme/default-theme.mdx b/apps/docs/content/docs/theme/default-theme.mdx index bcf982957..07b4c0b70 100644 --- a/apps/docs/content/docs/theme/default-theme.mdx +++ b/apps/docs/content/docs/theme/default-theme.mdx @@ -450,9 +450,9 @@ export default { -### Border weights +### Border widths -NextUI includes by default a set of common border weights. +NextUI includes by default a set of common border widths. ```js export default { @@ -463,7 +463,7 @@ export default { fontWeights: {...}, // font weights object lineHeights: {...}, // line heights object radii: {...}, // border radius object - borderWeights: { + borderWidths: { light: '1px', normal: '2px', bold: '3px', diff --git a/packages/components/collapse/src/base/collapse-item-base.tsx b/packages/components/collapse/src/base/collapse-item-base.tsx index 7f548131f..c4e2bf518 100644 --- a/packages/components/collapse/src/base/collapse-item-base.tsx +++ b/packages/components/collapse/src/base/collapse-item-base.tsx @@ -1,11 +1,20 @@ import {BaseItem, ItemProps} from "@nextui-org/aria-utils"; -import {CSS} from "@nextui-org/system"; +import {CSSProp} from "@nextui-org/system"; import {FocusableProps} from "@react-types/shared"; import {ReactNode} from "react"; -type RenderIndicatorProps = { +export type RenderIndicatorProps = { + /** + * The current indicator + */ indicator?: ReactNode; + /** + * The current open status. + */ isOpen?: boolean; + /** + * The current disabled status. + */ isDisabled?: boolean; }; @@ -18,8 +27,10 @@ export interface CollapseItemBaseProps children?: ReactNode | null; /** * The collapse item `expanded` indicator, it's usually an arrow icon. + * If you pass a function, NextUI will expose the current indicator and the open status, + * In case you want to use a custom indicator or muodify the current one. */ - indicator?: ReactNode | null; + indicator?: ReactNode | ((props: RenderIndicatorProps) => ReactNode) | null; /** * The collapse item subtitle. */ @@ -34,12 +45,12 @@ export interface CollapseItemBaseProps * The border weight for bordered collapse item variation. * @default "normal" */ - borderWeight?: CSS["borderWidth"]; + borderWeight?: CSSProp["borderWidth"]; /** * The border weight for the collapse item divider. * @default "light" */ - dividerWeight?: CSS["borderWidth"]; + dividerWeight?: CSSProp["borderWidth"]; /** * Whether the collapse item have a bottom border. * @default true @@ -50,16 +61,6 @@ export interface CollapseItemBaseProps * @default false */ disableAnimation?: boolean; - - /** - * If you pass this function NextUI will expose the current indicator and the open status, In case you want to use a custom indicator or muodify the current one. - * @param indicator The current indicator - * @param isOpen The current open status. - * @param isDisabled The current disabled status. - * - * @returns The indicator to be used. - */ - renderIndicator?: (props: RenderIndicatorProps) => ReactNode; } const CollapseItem = BaseItem as (props: CollapseItemBaseProps) => JSX.Element; diff --git a/packages/components/collapse/src/collapse-item.tsx b/packages/components/collapse/src/collapse-item.tsx index 0b63cc331..c0b06f724 100644 --- a/packages/components/collapse/src/collapse-item.tsx +++ b/packages/components/collapse/src/collapse-item.tsx @@ -49,12 +49,12 @@ const CollapseItem = forwardRef((props, ref) => { }, [indicator]); const indicatorComponent = useMemo(() => { - if (typeof item.props?.renderIndicator === "function") { - return item.props?.renderIndicator({indicator, isOpen, isDisabled}); + if (typeof item.props?.indicator === "function") { + return item.props?.indicator({indicator, isOpen, isDisabled}); } return indicatorWrapper; - }, [item.props?.renderIndicator, indicator, indicatorWrapper, isOpen, isDisabled]); + }, [item.props?.indicator, indicator, indicatorWrapper, isOpen, isDisabled]); return ( extends CollapseItemBase isDisabled?: boolean; } -// subtitle?: ReactNode | string; //TODO: unique per item -// borderWeight?: CSS["borderWidth"]; -// dividerWeight?: CSS["borderWidth"]; -// withDivider?: boolean; -// disableAnimation?: boolean; - export function useCollapseItem(props: UseCollapseItemProps) { const {item, ...propsWithoutItem} = props; @@ -51,10 +45,13 @@ export function useCollapseItem(props: UseCollapseItemProps as = item.props?.as, state, focusedKey, + subtitle = item.props?.subtitle, indicator = item.props?.indicator ?? , variant = item.props?.variant ?? "default", + withDivider = item.props?.withDivider ?? true, borderWeight = item.props?.borderWeight ?? "normal", dividerWeight = item.props?.dividerWeight ?? "light", + disableAnimation = item.props?.disableAnimation ?? false, isDisabled: groupDisabled = false, onFocusChange, ...otherProps @@ -98,10 +95,13 @@ export function useCollapseItem(props: UseCollapseItemProps item, css: itemCss, indicator, + subtitle, variant, isDisabled, isOpen, isFocusVisible, + withDivider, + disableAnimation, buttonProps, regionProps, focusProps, diff --git a/packages/components/collapse/stories/collapse.stories.tsx b/packages/components/collapse/stories/collapse.stories.tsx index cf4223dc4..3de7f39c5 100644 --- a/packages/components/collapse/stories/collapse.stories.tsx +++ b/packages/components/collapse/stories/collapse.stories.tsx @@ -10,7 +10,7 @@ export default { export const Default = () => ( - + file @@ -32,7 +32,7 @@ export const CustomIndicator = () => { return ( - + file diff --git a/packages/core/system/src/common.ts b/packages/core/system/src/common.ts index 04abf0f1c..274ff41fd 100644 --- a/packages/core/system/src/common.ts +++ b/packages/core/system/src/common.ts @@ -133,7 +133,7 @@ export const defaultTokens = { 10: "1000", max: "9999", }, - borderWeights: { + borderWidths: { light: "1px", normal: "2px", bold: "3px", @@ -515,7 +515,6 @@ export const defaultThemeMap = { inlineSize: "space", minInlineSize: "space", maxInlineSize: "space", - borderWidth: "borderWeights", }; export default { diff --git a/packages/core/system/src/types.ts b/packages/core/system/src/types.ts index 6da465e2e..dcc04c58b 100644 --- a/packages/core/system/src/types.ts +++ b/packages/core/system/src/types.ts @@ -20,7 +20,7 @@ export declare namespace ConfigType { space?: {[token in number | string]: boolean | number | string}; radii?: {[token in number | string]: boolean | number | string}; zIndices?: {[token in number | string]: boolean | number | string}; - borderWeights?: {[token in number | string]: boolean | number | string}; + borderWidths?: {[token in number | string]: boolean | number | string}; colors?: {[token in number | string]: boolean | number | string}; shadows?: {[token in number | string]: boolean | number | string}; dropShadows?: {[token in number | string]: boolean | number | string}; @@ -60,6 +60,7 @@ export type StitchesTheme = typeof theme; export type CSSComponent = typeof css; // theme types +export type BaseThemeMap = StitchesConfig["themeMap"]; export type BaseTheme = ConfigType.Theme; export type NextUITheme = StitchesTheme; export type ThemeType = "dark" | "light"; @@ -76,11 +77,34 @@ export interface TokenValue { } export type Theme = { + /** + * The theme type. + * @default "light" + */ type?: ThemeType | string; + /** + * The stitches theme class name. + * @see https://stitches.dev/docs/theming#add-a-new-theme + */ className?: string; + /** + * The stitches theme tokens object. + */ theme?: BaseTheme; + /** + * The stitches theme media object. + * @see https://stitches.dev/docs/breakpoints + */ media?: ConfigType.Media; + /** + * The theme utils object. + * @see https://stitches.dev/docs/utils + */ utils?: ConfigType.Utils; + /** + * The stitches theme themeMap object. + * @see https://stitches.dev/docs/tokens#property-mapping + */ themeMap?: ConfigType.ThemeMap; }; @@ -89,3 +113,23 @@ export type NextUIThemeContext = { theme?: NextUITheme; isDark?: boolean; }; + +type Globals = "inherit" | "initial" | "revert" | "unset"; + +type Index = (number | string) & Record; + +type TokenByScaleName = ScaleName extends keyof Theme + ? keyof Theme[ScaleName] + : never; + +type TokenByPropertyName = PropertyName extends keyof ThemeMap + ? TokenByScaleName + : never; + +export type CSSProp = { + [K in keyof CSSProperties]?: + | TokenByPropertyName + | Globals + | Index + | undefined; +};