@behivetech/get-class-name 0.0.0-stage → 0.0.6

package/README.md

@@ -1,3 +1,287 @@
-# Temporary Holding Version
+# getClassName
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A utility for generating BEM-style class names with support for CSS modules, modifiers, and child elements.
+
+A powerful utility for generating BEM (Block Element Modifier) style class names with built-in support for CSS modules, conditional modifiers, and child element naming.
+
+## Features
+
+- **BEM Convention**: Automatically generates proper BEM-style class names
+- **CSS Modules Support**: Works seamlessly with CSS/SCSS modules and styled components
+- **Conditional Modifiers**: Apply modifiers based on boolean conditions
+- **Child Element Helper**: Generate consistent child element class names
+- **TypeScript Support**: Fully typed with comprehensive interfaces
+
+## Basic Usage
+
+```tsx
+import { getClassName } from '@behivetech/get-class-name';
+
+// Basic component setup
+const [rootClass, getChildClass] = getClassName({
+  rootClass: 'button',
+});
+
+console.log(rootClass); // 'button'
+console.log(getChildClass('text')); // 'button__text'
+console.log(getChildClass('icon')); // 'button__icon'
+```
+
+## With Modifiers
+
+```tsx
+const [buttonClass, getChildClass] = getClassName({
+  rootClass: 'button',
+  modifiers: {
+    primary: true,
+    large: true,
+    disabled: false,
+  },
+});
+
+console.log(buttonClass);
+// 'button button--primary button--large'
+```
+
+## With Custom className
+
+```tsx
+const [buttonClass] = getClassName({
+  rootClass: 'button',
+  className: 'my-custom-class another-class',
+  modifiers: {
+    primary: true,
+  },
+});
+
+console.log(buttonClass);
+// 'my-custom-class another-class button button--primary'
+```
+
+## With CSS Modules
+
+```tsx
+import styles from './Button.module.css';
+
+const [buttonClass, getChildClass] = getClassName({
+  rootClass: 'button',
+  styles,
+  modifiers: {
+    primary: isActive,
+    disabled: !isEnabled,
+  },
+});
+
+// If styles object contains:
+// {
+//   'button': 'Button_button__3xKl2',
+//   'button--primary': 'Button_primary__8mN4k',
+//   'button__text': 'Button_text__5pL9x'
+// }
+
+console.log(buttonClass);
+// 'Button_button__3xKl2 Button_primary__8mN4k'
+console.log(getChildClass('text'));
+// 'Button_text__5pL9x'
+```
+
+## React Component Example
+
+```tsx
+import React from 'react';
+import { getClassName } from '@behivetech/get-class-name';
+import styles from './Button.module.css';
+
+interface ButtonProps {
+  children: React.ReactNode;
+  className?: string;
+  variant?: 'primary' | 'secondary';
+  size?: 'small' | 'medium' | 'large';
+  disabled?: boolean;
+  onClick?: () => void;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  children,
+  className,
+  variant = 'primary',
+  size = 'medium',
+  disabled = false,
+  onClick,
+}) => {
+  const [rootClass, getChildClass] = getClassName({
+    rootClass: 'button',
+    className,
+    styles,
+    modifiers: {
+      [variant]: true,
+      [size]: true,
+      disabled,
+    },
+  });
+
+  return (
+    <button className={rootClass} disabled={disabled} onClick={onClick}>
+      <span className={getChildClass('text')}>{children}</span>
+    </button>
+  );
+};
+```
+
+## CSS Example
+
+```css
+/* Button.module.css */
+.button {
+  display: inline-flex;
+  align-items: center;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.button--primary {
+  background-color: #007bff;
+  color: white;
+}
+
+.button--secondary {
+  background-color: #6c757d;
+  color: white;
+}
+
+.button--small {
+  padding: 4px 8px;
+  font-size: 12px;
+}
+
+.button--large {
+  padding: 12px 24px;
+  font-size: 18px;
+}
+
+.button--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.button__text {
+  font-weight: 500;
+}
+```
+
+## API Reference
+
+### getClassName(props)
+
+#### Parameters
+
+| Parameter   | Type                      | Required | Description                                                                  |
+| ----------- | ------------------------- | -------- | ---------------------------------------------------------------------------- |
+| `rootClass` | `string`                  | yes      | The base class name for the component                                        |
+| `className` | `string`                  | no       | Additional custom class names                                                |
+| `modifiers` | `Record<string, boolean>` | no       | Object where keys are modifier names and values determine if they're applied |
+| `styles`    | `Record<string, string>`  | no       | CSS modules styles object for class name mapping                             |
+
+#### Returns
+
+Returns a tuple `[rootClass, getChildClass]`:
+
+- **`rootClass`** (`string`): The computed root class name with all modifiers and custom classes
+- **`getChildClass`** (`function`): Function that takes a child element name and returns the BEM child class
+
+### getChildClass(childClassName)
+
+#### Parameters
+
+| Parameter        | Type     | Required | Description               |
+| ---------------- | -------- | -------- | ------------------------- |
+| `childClassName` | `string` | yes      | Name of the child element |
+
+#### Returns
+
+- **`string`**: The computed BEM child class name (e.g., `block__element`)
+
+## Best Practices
+
+### Consistent Naming Convention
+
+```tsx
+// Good: Use clear, descriptive names
+const [cardClass, getChildClass] = getClassName({
+  rootClass: 'product-card',
+  modifiers: { featured: true, soldOut: false },
+});
+```
+
+### Organize Modifiers Logically
+
+```tsx
+const modifiers = {
+  // State modifiers
+  active: isActive,
+  disabled: isDisabled,
+  loading: isLoading,
+
+  // Appearance modifiers
+  primary: variant === 'primary',
+  large: size === 'large',
+  outlined: appearance === 'outlined',
+};
+```
+
+### Use with CSS Custom Properties
+
+```css
+.button {
+  --button-color: #007bff;
+  --button-padding: 8px 16px;
+
+  background-color: var(--button-color);
+  padding: var(--button-padding);
+}
+
+.button--large {
+  --button-padding: 12px 24px;
+}
+```
+
+## Common Patterns
+
+### Conditional Styling
+
+```tsx
+const [alertClass] = getClassName({
+  rootClass: 'alert',
+  modifiers: {
+    success: type === 'success',
+    error: type === 'error',
+    warning: type === 'warning',
+    dismissible: onClose !== undefined,
+  },
+});
+```
+
+### Complex Component Structure
+
+```tsx
+const [modalClass, getChildClass] = getClassName({
+  rootClass: 'modal',
+  modifiers: { open: isOpen, fullscreen: isFullscreen },
+});
+
+return (
+  <div className={modalClass}>
+    <div className={getChildClass('backdrop')} />
+    <div className={getChildClass('content')}>
+      <header className={getChildClass('header')}>
+        <h2 className={getChildClass('title')}>{title}</h2>
+        <button className={getChildClass('close-button')} />
+      </header>
+      <div className={getChildClass('body')}>{children}</div>
+    </div>
+  </div>
+);
+```

package/dist/index.cjs

@@ -0,0 +1,76 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// index.ts
+var index_exports = {};
+__export(index_exports, {
+  getClassName: () => getClassName
+});
+module.exports = __toCommonJS(index_exports);
+
+// get-class-name.ts
+var import_classnames = __toESM(require("classnames"), 1);
+var getClassName = ({
+  className,
+  modifiers = {},
+  rootClass,
+  styles = {}
+}) => {
+  function getModifiers() {
+    const updatedModifiers = {};
+    const modifierKeys = Object.keys(modifiers);
+    if (modifierKeys.length) {
+      modifierKeys.forEach((modKey) => {
+        const classKey = `${rootClass}--${modKey}`;
+        const newClassName = styles[classKey] || classKey;
+        updatedModifiers[newClassName] = modifiers[modKey] ?? false;
+      });
+    }
+    return updatedModifiers;
+  }
+  function getChildClass(childClassName) {
+    const classKey = `${rootClass}__${childClassName}`;
+    return styles[classKey] || classKey;
+  }
+  function getRootStyles() {
+    return (0, import_classnames.default)(
+      className,
+      {
+        ...getModifiers()
+      },
+      styles[rootClass] || rootClass
+    );
+  }
+  return [getRootStyles(), getChildClass];
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getClassName
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../index.ts","../get-class-name.ts"],"sourcesContent":["export { getClassName } from './get-class-name.js';\n","import classnames from 'classnames';\n\ninterface IGetClassNameProps {\n  /** className prop generally passed in from the parent component */\n  className?: string;\n  /**\n        object where the key is any additional classNames used to modify the elements of the compoent.\n        If the value of the key is true, it will add the name of the key to the className\n    */\n  modifiers?: { [key: string]: boolean };\n  /** className for the component */\n  rootClass: string;\n  styles?: { [key: string]: string };\n}\n\nexport const getClassName = ({\n  className,\n  modifiers = {},\n  rootClass,\n  styles = {},\n}: IGetClassNameProps): [string, (childClassName: string) => string] => {\n  function getModifiers() {\n    const updatedModifiers: { [key: string]: boolean } = {};\n    const modifierKeys = Object.keys(modifiers);\n    if (modifierKeys.length) {\n      modifierKeys.forEach((modKey) => {\n        const classKey = `${rootClass}--${modKey}`;\n        const newClassName: string = styles[classKey] || classKey;\n\n        updatedModifiers[newClassName] = modifiers[modKey] ?? false;\n      });\n    }\n\n    return updatedModifiers;\n  }\n\n  function getChildClass(childClassName: string) {\n    const classKey = `${rootClass}__${childClassName}`;\n    return styles[classKey] || classKey;\n  }\n\n  function getRootStyles() {\n    return classnames(\n      className,\n      {\n        ...getModifiers(),\n      },\n      styles[rootClass] || rootClass\n    );\n  }\n\n  return [getRootStyles(), getChildClass];\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,wBAAuB;AAehB,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA,YAAY,CAAC;AAAA,EACb;AAAA,EACA,SAAS,CAAC;AACZ,MAAwE;AACtE,WAAS,eAAe;AACtB,UAAM,mBAA+C,CAAC;AACtD,UAAM,eAAe,OAAO,KAAK,SAAS;AAC1C,QAAI,aAAa,QAAQ;AACvB,mBAAa,QAAQ,CAAC,WAAW;AAC/B,cAAM,WAAW,GAAG,SAAS,KAAK,MAAM;AACxC,cAAM,eAAuB,OAAO,QAAQ,KAAK;AAEjD,yBAAiB,YAAY,IAAI,UAAU,MAAM,KAAK;AAAA,MACxD,CAAC;AAAA,IACH;AAEA,WAAO;AAAA,EACT;AAEA,WAAS,cAAc,gBAAwB;AAC7C,UAAM,WAAW,GAAG,SAAS,KAAK,cAAc;AAChD,WAAO,OAAO,QAAQ,KAAK;AAAA,EAC7B;AAEA,WAAS,gBAAgB;AACvB,eAAO,kBAAAA;AAAA,MACL;AAAA,MACA;AAAA,QACE,GAAG,aAAa;AAAA,MAClB;AAAA,MACA,OAAO,SAAS,KAAK;AAAA,IACvB;AAAA,EACF;AAEA,SAAO,CAAC,cAAc,GAAG,aAAa;AACxC;","names":["classnames"]}

package/dist/index.d.cts

@@ -0,0 +1,19 @@
+interface IGetClassNameProps {
+    /** className prop generally passed in from the parent component */
+    className?: string;
+    /**
+          object where the key is any additional classNames used to modify the elements of the compoent.
+          If the value of the key is true, it will add the name of the key to the className
+      */
+    modifiers?: {
+        [key: string]: boolean;
+    };
+    /** className for the component */
+    rootClass: string;
+    styles?: {
+        [key: string]: string;
+    };
+}
+declare const getClassName: ({ className, modifiers, rootClass, styles, }: IGetClassNameProps) => [string, (childClassName: string) => string];
+
+export { getClassName };

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+interface IGetClassNameProps {
+    /** className prop generally passed in from the parent component */
+    className?: string;
+    /**
+          object where the key is any additional classNames used to modify the elements of the compoent.
+          If the value of the key is true, it will add the name of the key to the className
+      */
+    modifiers?: {
+        [key: string]: boolean;
+    };
+    /** className for the component */
+    rootClass: string;
+    styles?: {
+        [key: string]: string;
+    };
+}
+declare const getClassName: ({ className, modifiers, rootClass, styles, }: IGetClassNameProps) => [string, (childClassName: string) => string];
+
+export { getClassName };

package/dist/index.js

@@ -0,0 +1,39 @@
+// get-class-name.ts
+import classnames from "classnames";
+var getClassName = ({
+  className,
+  modifiers = {},
+  rootClass,
+  styles = {}
+}) => {
+  function getModifiers() {
+    const updatedModifiers = {};
+    const modifierKeys = Object.keys(modifiers);
+    if (modifierKeys.length) {
+      modifierKeys.forEach((modKey) => {
+        const classKey = `${rootClass}--${modKey}`;
+        const newClassName = styles[classKey] || classKey;
+        updatedModifiers[newClassName] = modifiers[modKey] ?? false;
+      });
+    }
+    return updatedModifiers;
+  }
+  function getChildClass(childClassName) {
+    const classKey = `${rootClass}__${childClassName}`;
+    return styles[classKey] || classKey;
+  }
+  function getRootStyles() {
+    return classnames(
+      className,
+      {
+        ...getModifiers()
+      },
+      styles[rootClass] || rootClass
+    );
+  }
+  return [getRootStyles(), getChildClass];
+};
+export {
+  getClassName
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../get-class-name.ts"],"sourcesContent":["import classnames from 'classnames';\n\ninterface IGetClassNameProps {\n  /** className prop generally passed in from the parent component */\n  className?: string;\n  /**\n        object where the key is any additional classNames used to modify the elements of the compoent.\n        If the value of the key is true, it will add the name of the key to the className\n    */\n  modifiers?: { [key: string]: boolean };\n  /** className for the component */\n  rootClass: string;\n  styles?: { [key: string]: string };\n}\n\nexport const getClassName = ({\n  className,\n  modifiers = {},\n  rootClass,\n  styles = {},\n}: IGetClassNameProps): [string, (childClassName: string) => string] => {\n  function getModifiers() {\n    const updatedModifiers: { [key: string]: boolean } = {};\n    const modifierKeys = Object.keys(modifiers);\n    if (modifierKeys.length) {\n      modifierKeys.forEach((modKey) => {\n        const classKey = `${rootClass}--${modKey}`;\n        const newClassName: string = styles[classKey] || classKey;\n\n        updatedModifiers[newClassName] = modifiers[modKey] ?? false;\n      });\n    }\n\n    return updatedModifiers;\n  }\n\n  function getChildClass(childClassName: string) {\n    const classKey = `${rootClass}__${childClassName}`;\n    return styles[classKey] || classKey;\n  }\n\n  function getRootStyles() {\n    return classnames(\n      className,\n      {\n        ...getModifiers(),\n      },\n      styles[rootClass] || rootClass\n    );\n  }\n\n  return [getRootStyles(), getChildClass];\n};\n"],"mappings":";AAAA,OAAO,gBAAgB;AAehB,IAAM,eAAe,CAAC;AAAA,EAC3B;AAAA,EACA,YAAY,CAAC;AAAA,EACb;AAAA,EACA,SAAS,CAAC;AACZ,MAAwE;AACtE,WAAS,eAAe;AACtB,UAAM,mBAA+C,CAAC;AACtD,UAAM,eAAe,OAAO,KAAK,SAAS;AAC1C,QAAI,aAAa,QAAQ;AACvB,mBAAa,QAAQ,CAAC,WAAW;AAC/B,cAAM,WAAW,GAAG,SAAS,KAAK,MAAM;AACxC,cAAM,eAAuB,OAAO,QAAQ,KAAK;AAEjD,yBAAiB,YAAY,IAAI,UAAU,MAAM,KAAK;AAAA,MACxD,CAAC;AAAA,IACH;AAEA,WAAO;AAAA,EACT;AAEA,WAAS,cAAc,gBAAwB;AAC7C,UAAM,WAAW,GAAG,SAAS,KAAK,cAAc;AAChD,WAAO,OAAO,QAAQ,KAAK;AAAA,EAC7B;AAEA,WAAS,gBAAgB;AACvB,WAAO;AAAA,MACL;AAAA,MACA;AAAA,QACE,GAAG,aAAa;AAAA,MAClB;AAAA,MACA,OAAO,SAAS,KAAK;AAAA,IACvB;AAAA,EACF;AAEA,SAAO,CAAC,cAAc,GAAG,aAAa;AACxC;","names":[]}

package/package.json

@@ -1,6 +1,43 @@
 {
   "name": "@behivetech/get-class-name",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.0.6",
+  "type": "module",
+  "private": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "classnames": "^2.5.1"
+  },
+  "devDependencies": {
+    "eslint": "^9.39.5",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.3",
+    "@behivetech/eslint-config": "0.1.0",
+    "@behivetech/typescript-config": "0.0.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/behivetech/bht-galaxy.git",
+    "directory": "packages/utils/get-class-name"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint . --max-warnings 0",
+    "check-types": "tsc --noEmit",
+    "test": "vitest run"
+  }
 }