#9 Add TSDoc comment to ClassNamesProperty

Author: Andrii Kirmas

src/check.ts

@@ -15,9 +15,10 @@ export {
 /** Identical function */
 function classNamesCheck<T extends CssModule>(classnames: T): T
 
-/* Declares class keys
- * @example classNamesCheck() // Anything
- * @example classNamesCheck<typeof Component>()
+/** Declares class keys
+ * @example
+ * classNamesCheck() // Anything
+ * classNamesCheck<typeof Component>()
  */
 function classNamesCheck(): never
 

src/defs.ts

@@ -5,12 +5,12 @@ import type {
 } from "react"
 
 /** Multipurpose generic
- * @example ClassNames<true> === {className: string}
- * @example ClassNames<"class1"|"class2"> === {classnames: {class1: undefined|string, class2: undefined|string}}
- * @example ClassNames<Props1, Props2> === {classnames: Props1["classnames"] & Props2["classnames"]}
- * @example ClassNames<true, "class1", Props, typeof Component1, typeof FunctionalComponent>
+ * @example
+ * ClassNames<true> // {className: string}
+ * ClassNames<Props1> // {classnames: Props1["classnames"] & Props2["classnames"]}
+ * ClassNames<typeof Component>
+ * ClassNames<true, Props, typeof ClassComponent, typeof FunctionalComponent>
  */
-
 export type ClassNames<
   C0 extends true | ReactRelated,
   C1 extends ReactRelated = never,
@@ -39,13 +39,19 @@ export type ClassNames<
   & Ever<C10, ClassNamesFrom<C10>>
 >
 
+/** Declaration of self Component's classNames
+ * @example
+ * ClassNames<{class1: ClassHash, class2: ClassHash}>
+ * ClassNames<typeof some_module_css, {class1: ClassHash, class2: ClassHash}>
+*/
 export type ClassNamesProperty<
 C extends CssModule, T extends {[K in keyof C]?: ClassHash} = C
 > = {classnames: {[K in keyof T & keyof C]: ClassHash}}
-type ClassNamesCombiner<C extends CssModule> = Ever<C, Ever<keyof C, {classnames: {[K in keyof C]: ClassHash}}>>
 
+/** Primitive for global CSS and CSS module */
 export type ClassHash = undefined|string
 
+/** Shortcut to require property `className` */
 export type ClassNamed = {
   className: string
 }
@@ -58,6 +64,7 @@ export type ClassNamingContext<T extends CssModule> = Partial<ClassNamed> & {
 }
 
 /// iNTERNAL
+type ClassNamesCombiner<C extends CssModule> = Ever<C, Ever<keyof C, {classnames: {[K in keyof C]: ClassHash}}>>
 type WithClassNames = {classnames: CssModule}
 
 export type CssModule = Record<string, ClassHash>
@@ -72,6 +79,7 @@ export type GetProps<C> = C extends JSXElementConstructor<infer P> ? P : C
 /// REACT
 
 export type ReactRelated = (AnyObject & WithClassNames) | RFC | RCC
+//TODO Is there any way to require `classnames` in `props`?
 type RFC = (props: any) => ReactElement<any, any> | null
 type RCC = new (props: any) => Component<AnyObject & WithClassNames, any>
 

src/index.ts

@@ -12,18 +12,20 @@ export {classNamesCheck} from "./check"
 
 /**
  * Makes `className` string from imported CSS
- * @example <div className={`${classNamingBasic({ClassName})}`} />
- * @example <div {...classNamingBasic({ClassName})} />
- * @example const cn = classNamingBasic({C1})({C2}); <div {...cn({C3})({C4})} />
+ * @example
+ * <div className={`${classNamingBasic({ClassName})}`} />
+ * <div {...classNamingBasic({ClassName})} />
+ * const cn = classNamingBasic({C1})({C2}); <div {...cn({C3})({C4})} />
  */
 interface ClassNamingCall<
   //TODO #8 `extends ReactRelated`
   Source extends CssModule
 > {
 /**
-   * @example classes(true) === props.className
-   * @example classes({class1: true, class2: false}) === "class1"
-   * @example classes(true, {class1: true, class2: false})
+   * @example
+   * classes(true) === props.className
+   * classes({class1: true, class2: false}) === "class1"
+   * classes(true, {class1: true, class2: false})
   */
   (
     arg0?: ClassNamingContext<Source> | true | string | ActionsMap<Source>,
@@ -49,9 +51,11 @@ type ActionsMap<K extends CssModule> = {[k in keyof K]?: ClassHash|boolean}
 // type ToggleMap<K extends ClassNamesMap> = {[k in keyof K]?: boolean}
 
 /**
- * @example const classes = classNamingCtx(this.props)
- * @example const classes = classNamingCtx({className, classnames})
- * @example const classes = classNamingCtx({classnames})
+ * 
+ * @example
+ * const classes = classNaming(this.props)
+ * const classes = classNaming({classnames, className})
+ * const classes = classNaming({classnames})
  */
 
 function classNaming<