diff --git a/__sandbox__/atom.test.ts b/__sandbox__/atom.test.ts index 0db9cf8..911329e 100644 --- a/__sandbox__/atom.test.ts +++ b/__sandbox__/atom.test.ts @@ -6,33 +6,59 @@ type After = Str extends `${Start}${in type StrToInt = K extends keyof ReactClassNaming.StrToNum ? ReactClassNaming.StrToNum[K] : K type Merge = [Result] extends [never] ? Base : [UnionToIntersection] extends [never] ? Base : Result -type RootProps = { - [root in Strip]: Merge, "-">}`> -}[Strip] +type RootProps< + classes extends string, + delimiter extends string +> = { + [root in Strip]: Merge, delimiter>}`> +}[Strip] -type MiddleProps = { - [root in Strip]: Exclude -}[Strip] +type MiddleProps< + classes extends string, + delimiter extends string +> = { + [root in Strip]: Exclude +}[Strip] -type ValuesQ = ( +type ValuesQ< + classes extends string, + props extends string, + values extends boolean|string|number, + delimiter extends string, + selfKey extends string +> = ( false | values - | {[p in props|"_"]?: p extends "_" ? values : After} + | {[p in props|selfKey]?: p extends selfKey ? values : After} | [ values, - {[p in props]?: After} + {[p in props]?: After} ] ) -type Values = ValuesQ< +type Values< + classes extends string, + delimiter extends string, + selfKey extends string +> = ValuesQ< classes, - MiddleProps, - Ever0}-`>>, true> + MiddleProps, + Ever0}${delimiter}`>>, true>, + delimiter, + selfKey > -type AtomicQuery = { - //TODO #38 Make good values hint here - [p in RootProps]?: Values> +type AtomicQuery< + classes extends string, + delimiter extends string = "delimiter" extends keyof ReactClassNaming.AtomOptions + ? ReactClassNaming.AtomOptions["delimiter"] + : ReactClassNaming.AtomOptions["$default"]["delimiter"], + selfKey extends string = "selfKey" extends keyof ReactClassNaming.AtomOptions + ? ReactClassNaming.AtomOptions["selfKey"] + : ReactClassNaming.AtomOptions["$default"]["selfKey"] +> = { + //TODO #38 Make good values hint here and without delimiter and selfkey + [p in RootProps]?: Values, delimiter, selfKey> } it("atomic bootstrap", () => { @@ -58,7 +84,7 @@ it("merge values",() => { |"inline" |`${"inline-"|""}${"block"|"flex"}` }` - const check: Record> = { + const check: Record> = { "1": ["block", {lg: "block"}] } expect(check).toBeInstanceOf(Object) diff --git a/src/global.d.ts b/src/global.d.ts index 6d67c33..cf92bad 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -1,15 +1,29 @@ /** * Tools to establish CSS classes as an explicit abstraction layer and to handle it as an interface between React and CSSStyleDeclaration + * * GitHub: https://github.com/askirmas/react-classnaming * * Contains: * ```typescript * interface BemOptions {} + * interface AtomOptions {} + * interface StrToNum {} * ``` */ declare namespace ReactClassNaming { /** - * Add your own `elementDelimiter` and `modDelimiter`. + * Add your own `elementDelimiter` and `modDelimiter` + * @description + * ```typescript + * `block${elementDelimiter}element${modDelimiter}mod${modDelimiter}value` + * ``` + * @example + * ```typescript + * interface BemOptions { + * elementDelimiter: "_", + * modDelimiter: "-" + * } + * ``` * @default * ```javascript * { @@ -24,7 +38,40 @@ declare namespace ReactClassNaming { modDelimiter: "--" } } + /** + * Add your own `delimiter` and `selfKey` + * @description + * ```typescript + * { + * "justify-content": { + * [selfKey]: "around", + * lg: "between" + * } + * } => `justify-content${delimiter}around justify-content${delimiter}lg${delimiter}between` + * ``` + * @example + * interface AtomOptions { + * delimiter: "--" + * selfKey: "$", + * } + * @default + * ```javascript + * { + * delimiter: "-" + * selfKey: "_", + * } + * ``` + */ + interface AtomOptions { + $default: { + delimiter: "-" + selfKey: "_" + } + } + /** + * Extend with needed `string`:`number` pairs + */ interface StrToNum { "0": 0 "1": 1