@contember/react-utils 1.3.0-alpha.8 → 2.0.0-alpha.1

package/src/theming/ColorSchemeProvider.tsx

@@ -1,16 +0,0 @@
-import { memo } from 'react'
-import { ColorSchemeContext, useColorScheme } from './contexts'
-
-export type ColorSchemeProviderProps = {
-	children: React.ReactNode
-	scheme?: string
-}
-
-export const ColorSchemeProvider = memo(({ children, scheme }: ColorSchemeProviderProps) => {
-	const inheritedColorScheme = useColorScheme()
-
-	return (
-		<ColorSchemeContext.Provider value={scheme ?? inheritedColorScheme}>{children}</ColorSchemeContext.Provider>
-	)
-})
-ColorSchemeProvider.displayName = 'Interface.ColorSchemeProvider'

package/src/theming/GlobalClassNamePrefixContext.ts

@@ -1,3 +0,0 @@
-import { createContext } from 'react'
-
-export const GlobalClassNamePrefixContext = createContext<string>('cui-')

package/src/theming/contexts.ts

@@ -1,18 +0,0 @@
-import { createOptionalContextFactory } from '../context'
-
-export const DEFAULT_COLOR_SCHEME = 'system'
-
-
-/**
- * @group UI
- *
- * @description
- * Provides the current color scheme, possible values are `'light'`, `'dark'` or `'system'`.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
- *
- */
-export const [ColorSchemeContext, useColorScheme] = createOptionalContextFactory<string>(
-	'Interface.ColorScheme',
-	DEFAULT_COLOR_SCHEME,
-)

package/src/theming/index.ts

@@ -1,7 +0,0 @@
-export * from './ColorSchemeProvider'
-export * from './GlobalClassNamePrefixContext'
-export * from './contexts'
-export * from './useClassName'
-export * from './useClassNameFactory'
-export * from './useThemedClassName'
-export * from './useThemedClassNameFactory'

package/src/theming/useClassName.ts

@@ -1,28 +0,0 @@
-import { NestedClassName, deduplicateClassName, flatClassNameList } from '@contember/utilities'
-import { useContext } from 'react'
-import { GlobalClassNamePrefixContext } from './GlobalClassNamePrefixContext'
-
-/**
- * Hook for component class name accepting outer class name
- *
- * @param componentClassName - Component class name
- * @param additionalClassName - Additional class name
- * @param prefixOverride - Context component prefix override
- * @returns Prefixed component class name.
- */
-export function useClassName (
-	componentClassName: NestedClassName,
-	additionalClassName: NestedClassName = null,
-	prefixOverride?: string | null | undefined,
-) {
-	const contextPrefix = useContext(GlobalClassNamePrefixContext)
-	const classNamePrefix: string = prefixOverride === null || prefixOverride === '' ? '' : prefixOverride || contextPrefix
-
-	const componentClassNameList: string[] = flatClassNameList(componentClassName).map(
-		componentClassName => `${classNamePrefix}${componentClassName}`,
-	)
-
-	return deduplicateClassName(componentClassNameList.concat(
-		flatClassNameList(additionalClassName),
-	)).join(' ')
-}

package/src/theming/useClassNameFactory.ts

@@ -1,50 +0,0 @@
-import { NestedClassName, deduplicateClassName, flatClassNameList } from '@contember/utilities'
-import { useContext } from 'react'
-import { useReferentiallyStableCallback } from '../referentiallyStable'
-import { GlobalClassNamePrefixContext } from './GlobalClassNamePrefixContext'
-
-/**
- * Hook for component class name accepting outer class name
- *
- * Returns a reusable function almost that is handy for components
- * with many sub-component parts that should inherit the root component
- * name.
- *
- * Also, product of the factory is a function that can be used outside of rules of hooks.
- *
- * @param componentClassName - Component class name
- * @param glue - String to use to glue component and sub-component suffix
- * @param prefixOverride - Context component prefix override
- * @returns
- */
-export function useClassNameFactory(
-	componentClassName: NestedClassName,
-	glue: string | null = '-',
-	prefixOverride?: string | null | undefined,
-) {
-	const contextPrefix = useContext(GlobalClassNamePrefixContext)
-	const classNamePrefix: string = prefixOverride === null || prefixOverride === '' ? '' : prefixOverride || contextPrefix
-
-	const componentClassNameList: string[] = flatClassNameList(componentClassName).map(
-		componentClassName => `${classNamePrefix}${componentClassName}`,
-	)
-
-	function componentClassNameFor(
-		suffix: string | null | undefined = null,
-		additionalClassName: NestedClassName = null,
-	): string {
-		const classNameSuffix: string = suffix ?? ''
-
-		return deduplicateClassName((classNameSuffix
-			? (classNameSuffix.match(/^[a-zA-Z0-9]/)
-				? componentClassNameList.map(componentClassName => `${componentClassName}${glue}${classNameSuffix}`)
-				: componentClassNameList.map(componentClassName => `${componentClassName}${classNameSuffix}`)
-			)
-			: componentClassNameList
-		).concat(
-			flatClassNameList(additionalClassName),
-		)).join(' ')
-	}
-
-	return useReferentiallyStableCallback(componentClassNameFor)
-}

package/src/theming/useThemedClassName.ts

@@ -1,54 +0,0 @@
-import { NestedClassName, colorSchemeClassName, filterThemedClassName } from '@contember/utilities'
-import { useColorScheme } from './contexts'
-import { useClassName } from './useClassName'
-
-/**
- * Hook for component class name accepting outer class name with theme-* and scheme-* class manes
- *
- * It looks for theme CSS classes in the given class name, deduplicates them and returns final theme class name with scheme CSS class set
- * @internal
- *
- * @param componentClassName - Component class name
- * @param additionalClassName - Additional class name
- * @param prefixOverride - Context component prefix override
- * @returns string
- * @see useColorScheme
- *
- * @example
- * ```tsx
- * function Button({ className }: { className?: string | string[] }) {
- * 	 const [contentThemeClassName, controlsThemeClassName] = useThemedClassName(className)
- *
- * 	 return (
- * 		 <div className={contentThemeClassName}>
- * 			 <button className={controlsThemeClassName}>Click me</button>
- * 		 </div>
- * 	 )
- * }
- *
- * function App() {
- * 	 return (
- * 		 <Button className="theme-default theme-danger:hover" />
- * 	 )
- * }
- *
- * // renders:
- * // <div class="scheme-system theme-default-content theme-danger-content:hover">
- * // 	<button class="scheme-system theme-default-controls theme-danger-controls:hover">Click me</button>
- * // </div>
- * ```
- */
-export function useThemedClassName(
-	componentClassName: NestedClassName,
-	additionalClassName: NestedClassName,
-	prefixOverride?: string | null | undefined,
-): string {
-	return useClassName(
-		componentClassName,
-		filterThemedClassName(
-			additionalClassName,
-			colorSchemeClassName(useColorScheme()),
-		),
-		prefixOverride,
-	)
-}

package/src/theming/useThemedClassNameFactory.ts

@@ -1,44 +0,0 @@
-import { NestedClassName, colorSchemeClassName, deduplicateClassName, filterThemedClassName, flatClassNameList } from '@contember/utilities'
-import { useContext } from 'react'
-import { useReferentiallyStableCallback } from '../referentiallyStable'
-import { GlobalClassNamePrefixContext } from './GlobalClassNamePrefixContext'
-import { useColorScheme } from './contexts'
-
-export function useThemedClassNameFactory(
-	componentClassName: NestedClassName,
-	glue: string | null = '-',
-	prefixOverride?: string | null | undefined,
-) {
-	const contextPrefix = useContext(GlobalClassNamePrefixContext)
-	const classNamePrefix: string = prefixOverride === null || prefixOverride === '' ? '' : prefixOverride || contextPrefix
-
-	const componentClassNameList: string[] = flatClassNameList(componentClassName).map(
-		componentClassName => `${classNamePrefix}${componentClassName}`,
-	)
-
-	const colorScheme = colorSchemeClassName(useColorScheme())
-
-	function componentClassNameFor(
-		suffix: string | null | undefined = null,
-		additionalClassName: NestedClassName = null,
-	): string {
-		const classNameSuffix: string = suffix ?? ''
-
-		return deduplicateClassName((classNameSuffix
-			? (classNameSuffix.match(/^[a-zA-Z0-9]/)
-				? componentClassNameList.map(componentClassName => `${componentClassName}${glue}${classNameSuffix}`)
-				: componentClassNameList.map(componentClassName => `${componentClassName}${classNameSuffix}`)
-			)
-			: componentClassNameList
-		).concat(
-			flatClassNameList(
-				filterThemedClassName(
-					additionalClassName,
-					colorScheme,
-				),
-			),
-		)).join(' ')
-	}
-
-	return useReferentiallyStableCallback(componentClassNameFor)
-}