hocs/withClassNames

hocs/with-class-names/README.md

@@ -0,0 +1,65 @@
+# `@byndyusoft-ui/with-class-names`
+
+---
+
+> High Order Component for css styles injection ...
+
+## Installation
+
+```
+npm i @byndyusoft-ui/with-class-names
+```
+
+## Method "mergeClassNames"
+Use this method for merge component styles with custom styles 
+```ts
+    mergeClassNames(targetStyles, sourceStyles, options)
+```
+
+### Option "withReplace" ("true" by default)
+
+
+## Usage example
+
+*Checkbox.tsx (Byndyusoft-UI component from "@byndyusoft-ui/Checkbox")*
+```tsx
+    // ... Some imports
+    import { IClassNames, TClassNamesRecord } from '@byndyusoft-ui/with-class-names';
+    import styles from './Checkbox.module.css';
+
+    // List of classNames for check TypeScript
+    const styleClassNames = ['container', 'disabled', 'input', 'field', 'label', 'trigger'] as const;
+
+    export type TCheckboxClassNames = TClassNamesRecord<(typeof styleClassNames)[number]>;
+    export const checkboxClassNames = styles as TCheckboxClassNames;
+
+export interface ICheckboxProps extends InputHTMLAttributes<HTMLInputElement>, IClassNames<TCheckboxClassNames> {
+    // ... some props
+}
+
+const Checkbox = forwardRef<HTMLInputElement, ICheckboxProps>(
+    (
+        {
+            classNames = checkboxClassNames,
+            // ... other props
+        },
+        forwardedRef
+    ) => {
+        // ... component body
+    }
+);
+```
+
+*Checkbox.tsx (Project component with custom styles)* 
+```tsx
+    import withClassNames, { mergeClassNames } from '@byndyusoft-ui/with-class-names';
+    import Checkbox, { TCheckboxClassNames, checkboxClassNames } from '@byndyusoft-ui/Checkbox';
+    import styles from './CheckboxWithReplacedStyles.module.css';
+
+    const Checkbox = withClassNames(
+        Checkbox,
+        mergeClassNames(checkboxClassNames, styles as TCheckboxClassNames)
+    );
+
+    export default Checkbox;
+```

hocs/with-class-names/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@byndyusoft-ui/with-class-names",
+  "version": "0.0.0",
+  "description": "Byndyusoft UI React High Order Component for css styles injection",
+  "keywords": [
+    "byndyusoft",
+    "byndyusoft-ui",
+    "react",
+    "hoc"
+  ],
+  "author": "Byndyusoft Frontend Stream <frontend@byndyusoft.com>",
+  "homepage": "https://github.com/Byndyusoft/ui/tree/master/hocs/with-class-names#readme",
+  "license": "Apache-2.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Byndyusoft/ui.git"
+  },
+  "scripts": {
+    "build": "tsc",
+    "clean": "rimraf dist",
+    "lint": "eslint src --config ../../eslint.config.js",
+    "test": "jest --config ../../jest.config.js --roots ./hocs/with-class-names/src"
+  },
+  "bugs": {
+    "url": "https://github.com/Byndyusoft/ui/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

hocs/with-class-names/src/index.ts

@@ -0,0 +1,3 @@
+export type { IClassNames, TClassNamesRecord } from './withClassNames';
+export { default as mergeClassNames } from './mergeClassNames';
+export { default } from './withClassNames';

hocs/with-class-names/src/mergeClassNames.tests.ts

@@ -0,0 +1,23 @@
+import mergeClassNames from './mergeClassNames';
+
+describe('hocs / withClassNames / mergeClassNames', () => {
+    test('should return different classes', () => {
+        expect(mergeClassNames({}, { b: '2' })).toEqual({ b: '2' });
+        expect(mergeClassNames({ a: '1' }, {})).toEqual({ a: '1' });
+        expect(mergeClassNames({ a: '1' }, { b: '2' })).toEqual({ a: '1', b: '2' });
+    });
+
+    test('should return replaced classes', () => {
+        expect(mergeClassNames({ a: '1' }, { a: '' })).toEqual({ a: '' });
+        expect(mergeClassNames({ a: '1' }, { a: undefined })).toEqual({ a: undefined });
+        expect(mergeClassNames({ a: '1' }, { a: '2', b: '3' })).toEqual({ a: '2', b: '3' });
+    });
+
+    test('should return merged classes', () => {
+        expect(mergeClassNames({ a: '1', b: '3' }, { a: '2' }, { withReplace: false })).toEqual({ a: '1 2', b: '3' });
+        expect(mergeClassNames({ a: '1', b: '' }, { a: '', b: '3' }, { withReplace: false })).toEqual({
+            a: '1',
+            b: '3'
+        });
+    });
+});

hocs/with-class-names/src/mergeClassNames.ts

@@ -0,0 +1,37 @@
+interface IMergeOptions {
+    withReplace?: boolean;
+}
+
+const getDefaultOptions = (): IMergeOptions => ({
+    withReplace: true
+});
+
+const joinClassNames = <CN extends object>(target: CN, source: CN): CN => {
+    const result = Object.assign({}, target);
+
+    for (const key in source) {
+        if (!source[key]) {
+            continue;
+        }
+
+        if (result[key]) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-expect-error
+            result[key] = [result[key], source[key]].join(' ');
+        } else {
+            result[key] = source[key];
+        }
+    }
+
+    return result;
+};
+
+export default function mergeClassNames<CN extends object>(target: CN, source: CN, options: IMergeOptions = {}): CN {
+    const mergedOptions = Object.assign(getDefaultOptions(), options);
+
+    if (mergedOptions.withReplace) {
+        return Object.assign({}, target, source);
+    }
+
+    return joinClassNames(target, source);
+}

hocs/with-class-names/src/withClassNames.tsx

@@ -0,0 +1,15 @@
+import React, { ComponentType, FunctionComponent, PropsWithChildren } from 'react';
+
+export interface IClassNames<CN> {
+    classNames?: CN;
+}
+
+export type TClassNamesRecord<K extends string> = Partial<Record<K, string>>;
+
+export default function withClassNames<P, CN>(
+    Component: ComponentType<P & IClassNames<CN>>,
+    classNames: CN
+): FunctionComponent<PropsWithChildren<P>> {
+    // eslint-disable-next-line react/display-name
+    return (props: PropsWithChildren<P>) => <Component {...props} classNames={classNames} />;
+}

hocs/with-class-names/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationDir": "dist",
+    "outDir": "dist",
+    "module": "commonjs",
+    "target": "es6"
+  },
+  "include": [
+    "src"
+  ],
+  "exclude": [
+    "node_modules",
+    "src/*.tests.ts"
+  ]
+}

jest.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-    roots: ['<rootDir>/components', '<rootDir>/hooks', '<rootDir>/services'],
+    roots: ['<rootDir>/components', '<rootDir>/hocs', '<rootDir>/hooks', '<rootDir>/services'],
     setupFilesAfterEnv: ['<rootDir>/.jest/setup.ts'],
     transform: {
         '^.+\\.tsx?$': 'ts-jest'

lerna.json

@@ -1,11 +1,5 @@
 {
-  "packages": [
-    "components/*",
-    "hooks/*",
-    "packages/*",
-    "services/*",
-    "styles/*"
-  ],
+  "packages": ["components/*", "hocs/*", "hooks/*", "packages/*", "services/*", "styles/*"],
   "useWorkspaces": true,
   "version": "independent",
   "npmClient": "npm",

package.json

@@ -3,6 +3,7 @@
   "private": true,
   "workspaces": [
     "components/*",
+    "hocs/*",
     "hooks/*",
     "packages/*",
     "services/*",