@cerberus-design/react

Version:

The Cerberus Design React component library.

1 lines • 19.3 kB

Source Map (JSON)

{"version":3,"sources":["../../../../src/components/rating/rating.tsx","../../../../src/utils/index.ts","../../../../src/components/show/show.tsx","../../../../src/components/rating/primitives.tsx","../../../../src/system/primitive-factory.tsx","../../../../src/system/index.ts","../../../../src/components/rating/parts.tsx"],"sourcesContent":["import type {\n UseRatingGroupContext,\n UseRatingGroupItemContext,\n} from '@ark-ui/react/rating-group'\nimport type { ReactNode } from 'react'\nimport { splitProps } from '../../utils/index'\nimport { Show } from '../show/index'\nimport { RatingParts } from './parts'\nimport type { RatingRootProps } from './primitives'\n\n/**\n * This module contains the abstracted Rating component.\n * @module 'react/rating'\n */\n\nexport interface RatingProps extends Omit<RatingRootProps, 'children'> {\n /**\n * The label of the rating component.\n */\n label?: string\n /**\n * The children of the rating component.\n */\n children: (context: UseRatingGroupItemContext) => ReactNode\n}\n\n/**\n * The Rating component is an abstraction of the primitives which provides a\n * visual rating system for a user to select a value.\n * @description [Cerberus Docs](https://cerberus.digitalu.design/react/rating)\n * @description [Ark Docs](https://ark-ui.com/react/docs/components/rating-group#api-reference)\n * @example\n * ```tsx\n * <Rating count={5} defaultValue={3} allowHalf>\n * {({ half, highlighted }) => {\n * if (half) return <StarHalfIcon fill=\"current\" />\n * if (highlighted) return <StarIcon fill=\"current\" />\n * return <StarIcon />\n * }}\n * </Rating>\n * ```\n */\nexport function Rating(props: RatingProps) {\n const [{ label }, styleProps, rootProps] = splitProps(\n props,\n ['label'],\n ['orientation', 'palette', 'size'],\n )\n\n return (\n <RatingParts.Root {...styleProps} {...rootProps}>\n <Show when={label}>\n <RatingParts.Label>{label}</RatingParts.Label>\n </Show>\n\n <RatingParts.Control>\n <RatingParts.Context>\n {(context: UseRatingGroupContext) =>\n context.items.map((item) => (\n <RatingParts.Item\n key={item}\n index={item}\n palette={styleProps.palette}\n >\n <RatingParts.ItemContext>\n {rootProps.children}\n </RatingParts.ItemContext>\n </RatingParts.Item>\n ))\n }\n </RatingParts.Context>\n </RatingParts.Control>\n </RatingParts.Root>\n )\n}\n","/**\n * This module contains utility functions that are used across your app.\n * @module Utils\n */\n\n/**\n * Formats the count of notifications to be displayed in the notification badge.\n * @param count - The number of notifications.\n * @returns The formatted count of notifications.\n * @example\n * ```tsx\n * const count = formatNotifyCount(100)\n * console.log(count) // '99+'\n * ```\n */\nexport function formatNotifyCount(count: number): string {\n if (count > 99) return '99+'\n return count.toString()\n}\n\n/**\n * Splits the properties of an object into multiple groups based on lists of keys.\n * @param props - The object to split.\n * @param keyGroups - The lists of keys to include in each group.\n * @returns An array of objects: each containing the properties specified in the corresponding key group, and the last object containing the remaining keys.\n */\nexport function splitProps<T extends object>(\n props: T,\n ...keyGroups: (keyof T)[][]\n): { [K in keyof T]?: T[K] }[] {\n const result = keyGroups.map(() => ({}) as { [K in keyof T]?: T[K] })\n const rest = {} as { [K in keyof T]?: T[K] }\n\n for (const key in props) {\n let assigned = false\n for (let i = 0; i < keyGroups.length; i++) {\n if (keyGroups[i].includes(key as keyof T)) {\n result[i][key as keyof T] = props[key]\n assigned = true\n break\n }\n }\n if (!assigned) {\n rest[key as keyof T] = props[key]\n }\n }\n\n return [...result, rest]\n}\n\nexport * from './localStorage'\n","import { type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps<T> {\n /**\n * The condition to render memoized children or the fallback content.\n */\n when: T | boolean | null | undefined\n /**\n * The children to render when the condition is false.\n */\n fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n * <Dashboard />\n * </Show>\n */\nexport function Show<T>(props: PropsWithChildren<ShowProps<T>>) {\n const { when, children, fallback } = props\n\n if (when) {\n return <>{children}</>\n }\n\n if (fallback) {\n return <>{fallback}</>\n }\n\n return null\n}\n","import {\n RatingGroup,\n type RatingGroupContextProps as ArkRatingGroupContextProps,\n type RatingGroupControlProps as ArkRatingGroupControlProps,\n type RatingGroupHiddenInputProps as ArkRatingGroupHiddenInputProps,\n type RatingGroupItemContextProps as ArkRatingGroupItemContextProps,\n type RatingGroupItemProps as ArkRatingGroupItemProps,\n type RatingGroupLabelProps as ArkRatingGroupLabelProps,\n type RatingGroupRootProps as ArkRatingGroupRootProps,\n} from '@ark-ui/react/rating-group'\nimport {\n ratingGroup,\n type RatingGroupVariantProps,\n} from 'styled-system/recipes'\nimport {\n createCerberusPrimitive,\n type CerberusPrimitiveProps,\n} from '../../system/index'\n\n/**\n * This module contains the primitives of the Rating component.\n * @module 'rating/primitives'\n */\n\nconst { withSlotRecipe } = createCerberusPrimitive(ratingGroup)\n\n// Root\n\nexport type RatingRootProps = CerberusPrimitiveProps<\n ArkRatingGroupRootProps & RatingGroupVariantProps\n>\nexport const RatingRoot = withSlotRecipe<RatingRootProps>(\n RatingGroup.Root,\n 'root',\n)\n\n// Label\n\nexport type RatingLabelProps = CerberusPrimitiveProps<ArkRatingGroupLabelProps>\nexport const RatingLabel = withSlotRecipe<RatingLabelProps>(\n RatingGroup.Label,\n 'label',\n)\n\n// Control\n\nexport type RatingGroupControlProps =\n CerberusPrimitiveProps<ArkRatingGroupControlProps>\nexport const RatingControl = withSlotRecipe<RatingGroupControlProps>(\n RatingGroup.Control,\n 'control',\n)\n\n// Context\n\nexport type RatingGroupContextProps = ArkRatingGroupContextProps\nexport const RatingContext = RatingGroup.Context\n\n// Item\n\nexport type RatingGroupItemProps = CerberusPrimitiveProps<\n ArkRatingGroupItemProps & RatingGroupVariantProps\n>\nexport const RatingItem = withSlotRecipe<RatingGroupItemProps>(\n RatingGroup.Item,\n 'item',\n)\n\n// Item Context\nexport type RatingGroupItemContextProps = ArkRatingGroupItemContextProps\nexport const RatingItemContext = RatingGroup.ItemContext\n\n// Hidden Input\n\nexport type RatingGroupHiddenInputProps = ArkRatingGroupHiddenInputProps\nexport const RatingHiddenInput = RatingGroup.HiddenInput\n","import { css, cx } from 'styled-system/css'\nimport type { RecipeVariantRecord } from 'styled-system/types'\nimport {\n type ComponentType,\n type ElementType,\n type HTMLAttributes,\n type PropsWithChildren,\n} from 'react'\nimport type { WithCss } from '../types'\nimport type {\n CerberusPrimitiveEl,\n CerberusPrimitiveRecipe,\n CerberusRecipe,\n CerberusSlotRecipe,\n WithRecipeOptions,\n} from './types'\n\n/**\n * This module contains a factory for creating Cerberus primitives.\n * @module @cerberus/core/system/factory\n */\n\nexport class CerberusPrimitive {\n recipe: CerberusPrimitiveRecipe | null\n\n constructor(recipe?: CerberusPrimitiveRecipe) {\n this.recipe = recipe ?? null\n }\n\n private hasStyles(styles: string | undefined): Record<string, unknown> {\n if (styles) {\n return {\n className: styles,\n }\n }\n return {}\n }\n\n private validateComponent>(\n Component: ComponentType | string,\n ) {\n if (typeof Component !== 'function' && typeof Component !== 'object') {\n return false\n }\n return true\n }\n\n /**\n * Creates a Cerberus component with bare features and no recipe.\n * @param Component - The React component to enhance with Cerberus features.\n * Can be a string or a component reference.\n * @returns A new React component that applies Cerberus features to the\n * original component.\n *\n * @example\n * ```ts\n * const { withNoRecipe } = createCerberusPrimitive(buttonRecipe)\n * const Button = withNoRecipe('button')\n * ```\n */\n withNoRecipe = >(\n Component: ComponentType | string,\n options?: WithRecipeOptions,\n ): CerberusPrimitiveEl => {\n const { defaultProps } = options || {}\n const El = Component as ComponentType | ElementType\n\n const CerbComponent = (props: PropsWithChildren & WithCss) => {\n const { css: customCss, className, ...nativeProps } = props\n const styles = this.hasStyles(cx(className, css(customCss)))\n return <El {...defaultProps} {...styles} {...(nativeProps as P)} />\n }\n\n if (this.validateComponent(El)) {\n const ElName = typeof El === 'string' ? El : El.displayName || El.name\n CerbComponent.displayName = ElName\n }\n\n return CerbComponent\n }\n\n /**\n * Creates a Cerberus component with the given recipe.\n * @param Component - The React component to enhance with the recipe.\n * @param options - Options for the recipe.\n * @returns A new React component that applies the recipe to the original\n * component.\n */\n withRecipe = >(\n Component: ComponentType | string,\n options?: WithRecipeOptions,\n ): CerberusPrimitiveEl => {\n const { defaultProps } = options || {}\n const El = Component as ComponentType | ElementType\n\n const recipe = this.recipe as CerberusRecipe\n\n const CerbComponent = (internalProps: PropsWithChildren & WithCss) => {\n const {\n css: customCss,\n className,\n ...restOfInternalProps\n } = internalProps\n\n const [variantOptions, nativeProps] =\n recipe.splitVariantProps(restOfInternalProps)\n const recipeStyles = recipe(variantOptions)\n\n return (\n <Component\n {...defaultProps}\n {...(nativeProps as P)}\n className={cx(className, recipeStyles, css(customCss))}\n />\n )\n }\n\n if (this.validateComponent(El)) {\n const ElName = typeof El === 'string' ? El : El.displayName || El.name\n CerbComponent.displayName = ElName\n }\n\n return CerbComponent\n }\n\n /**\n * Creates a Cerberus component with a slot recipe applied.\n * @param Component - The React component to enhance with Cerberus features.\n * @param recipe - The slot recipe to apply to the component.\n * @returns A new React component that applies Cerberus features and the\n * specified slot recipe to the original component.\n * @example\n * ```typescript\n * const { withSlotRecipe } = createCerberusPrimitive(field)\n * const Field = withSlotRecipe(RawField, field)\n * ```\n */\n withSlotRecipe = >(\n Component: ComponentType | string,\n slot: keyof RecipeVariantRecord,\n options?: WithRecipeOptions,\n ) => {\n const { defaultProps } = options || {}\n const El = Component as ComponentType | ElementType\n\n const recipe = this.recipe as CerberusSlotRecipe<typeof slot>\n\n const CerbComponent = (internalProps: PropsWithChildren & WithCss) => {\n const {\n css: customCss,\n className,\n ...restOfInternalProps\n } = internalProps\n\n const [variantOptions, nativeProps] =\n recipe.splitVariantProps(restOfInternalProps)\n const styles = recipe(variantOptions)\n const slotStyles = styles[slot as keyof typeof styles]\n\n return (\n <Component\n {...defaultProps}\n {...(nativeProps as P)}\n className={cx(className, slotStyles, css(customCss))}\n />\n )\n }\n\n if (this.validateComponent(El)) {\n const ElName = typeof El === 'string' ? El : El.displayName || El.name\n CerbComponent.displayName = ElName\n }\n\n return CerbComponent\n }\n}\n","import { CerberusPrimitive } from './primitive-factory'\nimport type { CerberusFactory, CerberusPrimitiveRecipe } from './types'\nimport { cerberusFactoryProxy } from './factory'\n\n/**\n * This module contains the user interface for creating Cerberus primitives.\n * @module @cerberus/core/system/create-cerb-primitive\n */\n\n/**\n * A factory function that creates a Cerberus primitive instance with the given\n * recipe.\n * @param recipe\n * @returns An object with three methods: `withNoRecipe`, `withRecipe`, and `withSlotRecipe` that\n * apply the recipes and special Cerberus helpers like `css`.\n *\n * @example\n * ```tsx\n * const { withRecipe } = createCerberusPrimitive(myCustomRecipe);\n * export const Button = withRecipe(MyCustomButton)\n * ```\n */\nexport function createCerberusPrimitive<T extends CerberusPrimitiveRecipe>(\n recipe?: T,\n) {\n return new CerberusPrimitive(recipe)\n}\n\n/**\n * A utility function to access Cerberus components by their name.\n * @param component - The name of the Cerberus component to access.\n * @returns The Cerberus component corresponding to the provided name.\n * @throws An error if the component name is not valid.\n *\n * @example\n * ```tsx\n * import { cerberus } from '@cerberus/react'\n * const Button = cerberus('button')\n *\n * <Button css={{ color: 'blue' }} asChild>\n * <Link href=\"/some-page\">Click me</Link>\n * </Button>\n * ```\n */\nexport const cerberus = cerberusFactoryProxy as CerberusFactory\n\nexport * from './types'\n","import type { ElementType } from 'react'\nimport {\n RatingContext,\n RatingControl,\n RatingHiddenInput,\n RatingItem,\n RatingItemContext,\n RatingLabel,\n RatingRoot,\n} from './primitives'\n\n/**\n * This module contains the parts of the Rating component.\n * @module 'rating/parts'\n */\n\ninterface RatingPartsValue {\n /**\n * The container of the rating.\n */\n Root: ElementType\n /**\n * The label of the rating.\n */\n Label: ElementType\n /**\n * The visual representation of the rating.\n */\n Control: ElementType\n /**\n * The context of the rating.\n */\n Context: ElementType\n /**\n * The item to display for the rating.\n */\n Item: ElementType\n /**\n * The context provider for the rating items.\n */\n ItemContext: ElementType\n /**\n * The native input of the rating.\n */\n HiddenInput: ElementType\n}\n\n/**\n * An Object containing the parts of the Rating component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the RatingParts object and\n * the entire family of components vs. only what you use.\n */\nexport const RatingParts: RatingPartsValue = {\n Root: RatingRoot,\n Label: RatingLabel,\n Control: RatingControl,\n Context: RatingContext,\n Item: RatingItem,\n ItemContext: RatingItemContext,\n HiddenInput: RatingHiddenInput,\n}\n"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime"]}