Remove old contexted implementation

Author: Andrii Kirmas

__recipes__/cra/src/App.tsx

@@ -1,5 +1,5 @@
 import { Component, LinkHTMLAttributes, PropsWithChildren } from "react";
-import classNaming from "react-classnaming"
+import {classNamingBasic, classNamingCtx} from "react-classnaming"
 import type { ClassNames } from "react-classnaming"
 
 type AppProps = PropsWithChildren<
@@ -16,19 +16,21 @@ function App({
     App__Container
   }
 }: AppProps) {
-  const classes = classNaming(classNames)
+  const classes = classNamingCtx({classNames}, {withClassNames: true})
 
   return (
-    <div {...classNaming(className, {App__Container})} id={classNaming<string>({App__Container})}>
+    <div
+      {...classNamingBasic(className, {App__Container})}
+      id={classNamingBasic<string>({App__Container})}
+    >
       <Header
         // TODO Why TS doesn't check object
         {...classes({App__Header: true})}
-        {...{classNames}}
         //@ts-expect-error Property 'className' does not exist
         className="" 
       />
       <Content {...{
-        ...classes("App__Content"),
+        ...classes(),
         classNames
       }}>
         <Link {...{classNames}} href="https://reactjs.org">
@@ -44,7 +46,7 @@ function App({
 type LinkProps = ClassNames<"App__link"> & PropsWithChildren<LinkHTMLAttributes<HTMLLinkElement>>
 function Link({href, children, "classNames": {App__link}}: LinkProps) {
   return <a {...{
-    ...classNaming({App__link}),
+    ...classNamingBasic({App__link}),
     href,
     "target": "_blank",
     "rel": "noopener noreferrer"
@@ -54,7 +56,7 @@ function Link({href, children, "classNames": {App__link}}: LinkProps) {
 }
 
 function Header({classNames: {Header}}: ClassNames<"Header">) {
-  return <header {...classNaming({Header})}>Header</header>
+  return <header {...classNamingBasic({Header})}>Header</header>
 }
 class Content extends Component<PropsWithChildren<ClassNames<true, "Content">>> {
   render() {
@@ -64,7 +66,7 @@ class Content extends Component<PropsWithChildren<ClassNames<true, "Content">>>
       children
     } = this.props
 
-    return <main {...classNaming(className, {Content})}>{children}</main>
+    return <main {...classNamingBasic(className, {Content})}>{children}</main>
   }
 }
 

src/ctx.test.ts

@@ -89,13 +89,12 @@ describe(classNamingCtx.name, () => {
     }))
   })
 
-  it("for component", () => expect(classNamingCtx(
+  it("only propagate classNames", () => expect(classNamingCtx(
     {classNames},
     {withClassNames: true}
-  )(
-    false
-  )).toStrictEqual({
+  )()).toStrictEqual({
     className: "",
     classNames
   }))
+
 })

src/ctx.ts

@@ -16,7 +16,7 @@ interface tClassNaming<
   */
  // Using overloads will make error not in certain argument but on all call - 'No overload found'
   (
-    propagate_or_map_or_expression: true | ToggleMap<ClassKeys> | ClassKeys | Falsy,
+    propagate_or_map_or_expression?: true | ToggleMap<ClassKeys> | ClassKeys | Falsy,
     map_or_expression?: (
       [Extract<typeof propagate_or_map_or_expression, true>] extends [never]
       ? never
@@ -59,7 +59,7 @@ function classNamer<
   withClassNames extends boolean|undefined
 >(
   this: Partial<ClassNamer<ClassKeys> & ClassNamerOptions<withClassNames>>,
-  arg0: true | ToggleMap<ClassKeys> | ClassKeys,
+  arg0?: true | ToggleMap<ClassKeys> | ClassKeys,
   arg1?: ToggleMap<ClassKeys> | ClassKeys,
   ...args: (ClassKeys | Falsy)[]
 ): ClassNamed & Partial<Pick<typeof this, "classNames">> {
@@ -71,7 +71,6 @@ function classNamer<
   } = this
   , withPropagation = arg0 === true
   , allowed: ClassKeys[] = truthyKeys(arg0 === true ? false : arg0)
-  //@ts-expect-error
   .concat(truthyKeys(arg1))
   //@ts-expect-error
   .concat(args)

src/defs.ts

@@ -1,21 +1,12 @@
 import type { JSXElementConstructor } from "react"
-export interface ClassToggling<K extends string> {
-  /**
-   * @example <div {...classToggling({class1: !isHidden}, isOpen2 && class2)} />
-   */
-  (toggleMapOrKeyExpression: Falsy|K|ToggleMap<K>, ...classKeyExpressions: (Falsy|K)[]): ClassNamed
-  //TODO (withClassName: true|false, ...toggles: K[]): tClassNamed
-}
-
-export interface ClassNaming<K extends string> extends ClassNamed, ClassToggling<K> {}
 
 /** 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>
  */
-//TODO string | ClassNamesMap
+//TODO Consider string | ClassNamesMap
 export type ClassNames<
   C0 extends true | string| ReactRelated,
   C1 extends (C0 extends true ? string : never) | ReactRelated = never,

src/index.spec.tsx

@@ -8,9 +8,7 @@ function Root(_: ClassNames<"fc1"|"fc2">) {
 }
 
 describe(classNamingBasic.name, () => {
-  function Button({
-    className, "classNames": { Btn }
-  }: ClassNames<true, "Btn">) {
+  function Button({className, "classNames": { Btn }}: ClassNames<true, "Btn">) {
     return <button {...classNamingBasic(className, { Btn })}/>
   }
 
@@ -29,14 +27,26 @@ describe(classNamingBasic.name, () => {
     </>
   }
 
-  it("demo", () => expectToRender(
+  it("not css module", () => expectToRender(
     <Root classNames={classNamesCheck()}/>,
     [
       '<button class="App__Item Btn"></button>',
       '<div class="App__Footer" data-class="App__Footer"></div>'
     ]
   ))
 
+  it("css module", () => expectToRender(
+    <Root classNames={{
+      App__Footer: "footer-hash",
+      App__Item: "item-hash",
+      Btn: "btn-hash"
+    }}/>,
+    [
+      '<button class="item-hash btn-hash"></button>',
+      '<div class="footer-hash" data-class="footer-hash"></div>'
+    ]
+  ))
+
   it("vscode renamed", () => {
     function Root({
       "classNames": {App: App__Container}