@hubspot/cms-component-library 0.1.0-alpha.1

package/cli/utils/file-operations.ts

@@ -0,0 +1,158 @@
+import { promises as fs, readFileSync } from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+export const __dirname = path.dirname(__filename);
+
+export const getFileContents = (filePath: string): string => {
+  const fullPath = path.join(__dirname, filePath);
+  try {
+    return readFileSync(fullPath, 'utf8');
+  } catch (error: unknown) {
+    const errorMessage = `Error reading file at path "${fullPath}": ${
+      error instanceof Error ? error.message : 'Unknown error occurred'
+    }`;
+
+    throw new Error(errorMessage);
+  }
+};
+
+/**
+ * Get the components directory in the current working directory
+ * Creates it if it doesn't exist
+ */
+async function getComponentsDirectory(): Promise<string> {
+  const cwd = process.cwd();
+  const componentsPath = path.join(cwd, 'components');
+
+  // Create components directory if it doesn't exist
+  await fs.mkdir(componentsPath, { recursive: true });
+
+  return componentsPath;
+}
+
+interface CopyScaffoldsOptions {
+  sourceComponent: string;
+  targetName: string;
+}
+
+/**
+ * Copy scaffold files from a source component, replacing template variables
+ * @param sourceComponent - The name of the component to copy scaffolds from
+ * @param targetName - The new name (prefix + component name) to replace __NC__
+ * @param outputDir - Optional output directory, defaults to current working directory
+ */
+export async function copyScaffolds({
+  sourceComponent,
+  targetName,
+}: CopyScaffoldsOptions): Promise<void> {
+  const sourceDir = path.join(
+    __dirname,
+    '../../components/componentLibrary',
+    sourceComponent,
+    'scaffolds'
+  );
+
+  // Check if scaffolds directory exists
+  try {
+    await fs.access(sourceDir);
+  } catch {
+    throw new Error(
+      `Scaffolds directory not found for component: ${sourceComponent}`
+    );
+  }
+
+  // Get components directory and create hscl subdirectory
+  const componentsDir = await getComponentsDirectory();
+  const hsclDirectory = path.join(componentsDir, 'hscl');
+  const targetDir = path.join(hsclDirectory, targetName);
+
+  // Check if target directory already exists
+  try {
+    await fs.access(targetDir);
+    throw new Error(
+      `Component "${targetName}" already exists in /components/hscl/. Please choose a different prefix or remove the existing component.`
+    );
+  } catch (error: unknown) {
+    // If access fails with ENOENT, the directory doesn't exist (which is what we want)
+    // For any other error, re-throw it
+    if (
+      error instanceof Error &&
+      error.message &&
+      !error.message.includes('ENOENT')
+    ) {
+      throw error;
+    }
+    // For ENOENT errors, continue (directory doesn't exist, which is good)
+  }
+
+  await fs.mkdir(targetDir, { recursive: true });
+
+  // Read all files in scaffolds directory
+  const files = await fs.readdir(sourceDir);
+  const templateFiles = files.filter(file => file.endsWith('.template'));
+
+  await Promise.all(
+    templateFiles.map(async templateFile => {
+      const sourceFilePath = path.join(sourceDir, templateFile);
+      const targetFileName = templateFile.replace('.template', '');
+      const targetFilePath = path.join(targetDir, targetFileName);
+
+      // Read template content using the get-file utility
+      const relativePath = path.relative(__dirname, sourceFilePath);
+      const templateContent = getFileContents(relativePath);
+
+      // Replace template variables
+      const processedContent = templateContent.replace(/__NC__/g, targetName);
+
+      // Write to target file
+      await fs.writeFile(targetFilePath, processedContent, 'utf8');
+    })
+  );
+}
+
+/**
+ * Copy scaffolds for multiple components
+ */
+export async function copyMultipleScaffolds({
+  sourceComponents,
+  prefix,
+}: {
+  sourceComponents: string[];
+  prefix: string;
+}): Promise<{
+  successful: string[];
+  skipped: string[];
+  errors: Array<{ component: string; error: string }>;
+}> {
+  const results = {
+    successful: [],
+    skipped: [],
+    errors: [],
+  };
+
+  for (const component of sourceComponents) {
+    const targetName = `${prefix}${component}`;
+    try {
+      await copyScaffolds({
+        sourceComponent: component,
+        targetName,
+      });
+      results.successful.push(component);
+    } catch (error: unknown) {
+      const errorMessage =
+        error instanceof Error ? error.message : String(error);
+
+      // Check if this is a "component already exists" error
+      if (errorMessage.includes('already exists')) {
+        results.skipped.push(component);
+      } else {
+        results.errors.push({ component, error: errorMessage });
+        console.error(`❌ Error creating ${targetName}: ${errorMessage}`);
+      }
+    }
+  }
+
+  return results;
+}

package/cli/utils/logging.ts

@@ -0,0 +1,13 @@
+import chalk from 'chalk';
+
+export const logSuccess = (message: string): void => {
+  console.log(chalk.green(message));
+};
+
+export const logError = (message: string): void => {
+  console.error(chalk.red(message));
+};
+
+export const logWarning = (message: string): void => {
+  console.error(chalk.magenta(message));
+};

package/cli/utils/prompts.ts

@@ -0,0 +1,80 @@
+import prompts from 'prompts';
+import chalk from 'chalk';
+
+// Helper for styling help text
+const helpText = (text: string): string => chalk.dim.gray(text);
+
+interface SelectPromptOptions {
+  type: 'select' | 'multiselect';
+  message: string;
+  choices: (string | { title: string; value: string })[];
+  helpMessage?: string;
+}
+
+interface TextPromptOptions {
+  message: string;
+  defaultValue: string;
+}
+
+// Reusable prompt functions
+export const selectPrompt = async ({
+  type,
+  message,
+  choices,
+  helpMessage,
+}: SelectPromptOptions) => {
+  const fullMessage = helpMessage
+    ? `${message} ${helpText(helpMessage)}`
+    : message;
+
+  return await prompts({
+    type: type,
+    name: 'value',
+    message: fullMessage,
+    choices: choices.map(choice =>
+      typeof choice === 'string' ? { title: choice, value: choice } : choice
+    ),
+  });
+};
+
+export const multiselectPrompt = async ({
+  message,
+  choices,
+  helpMessage,
+}: Omit<SelectPromptOptions, 'type'>): Promise<{ value: string[] }> => {
+  return await selectPrompt({
+    type: 'multiselect',
+    message,
+    helpMessage,
+    choices: choices.map(choice =>
+      typeof choice === 'string' ? { title: choice, value: choice } : choice
+    ),
+  });
+};
+
+export const textPromptWithDefault = async ({
+  message,
+  defaultValue,
+}: TextPromptOptions): Promise<string> => {
+  const { value } = await prompts({
+    type: 'text',
+    name: 'value',
+    message: `${message} ${helpText(`(default: ${defaultValue})`)}`,
+  });
+
+  return value || defaultValue;
+};
+
+export const promptForNamingPrefix = async (
+  defaultValue: string,
+  numberOfComponents: number
+): Promise<string> => {
+  const isMultipleComponents = numberOfComponents > 1;
+
+  return await textPromptWithDefault({
+    message: `What prefix should we use for your new component${
+      isMultipleComponents ? 's' : ''
+    }?`,
+    defaultValue,
+  });
+};

package/cli/utils/version.ts

@@ -0,0 +1,33 @@
+import { getFileContents } from './file-operations.js';
+
+interface PackageJson {
+  name: string;
+  version: string;
+  description?: string;
+  license?: string;
+  scripts?: Record<string, string>;
+  repository?: {
+    type: string;
+    url: string;
+  };
+  dependencies?: Record<string, string>;
+  devDependencies?: Record<string, string>;
+  author?: string;
+  'lint-staged'?: Record<string, string[]>;
+  resolutions?: Record<string, string>;
+}
+
+export const getVersion = (): string => {
+  try {
+    const packageJson: PackageJson = JSON.parse(
+      getFileContents('../../package.json')
+    );
+    return packageJson.version;
+  } catch (error) {
+    console.error(
+      'Error reading package.json:',
+      error instanceof Error ? error.message : error
+    );
+    return '1.0.0';
+  }
+};

package/components/componentLibrary/Button/index.module.scss

@@ -0,0 +1,9 @@
+@use '../styles/_component-base';
+
+@layer hscl-library {
+  .button {
+
+    @include component-base.hscl-component-conditional('button');
+    @include component-base.hscl-component-hover-conditional('button');
+  }
+}

package/components/componentLibrary/Button/index.tsx

@@ -0,0 +1,83 @@
+/* eslint-disable */
+
+import createHsclComponent from '../utils/createHsclComponent.js';
+import styles from './index.module.scss';
+import { BaseAndInternalComponentProps } from '../types/index.js';
+
+// Base props shared by all variants
+type BaseButtonProps = BaseAndInternalComponentProps & {
+  disabled?: boolean;
+  children?: React.ReactNode;
+};
+
+// Button variant props
+type ButtonVariantProps = {
+  buttonType: 'button';
+  onClick?: () => void;
+};
+
+// Link variant props
+type LinkVariantProps = {
+  buttonType: 'link';
+  href?: string;
+  target?: string;
+  rel?: string;
+};
+
+// Main component props using discriminated union
+export type ButtonProps = BaseButtonProps &
+  (ButtonVariantProps | LinkVariantProps);
+
+const componentName = 'button';
+
+const Component = (props: ButtonProps) => {
+  // Extract shared/base props that are always consumed
+  const {
+    buttonType = 'link',
+    hsclInternal: { hsclProcessedClasses, hsclProcessedStyles },
+    ...rest
+  } = props;
+
+  // Shared props for both elements
+  const sharedProps = {
+    className: hsclProcessedClasses,
+    style: hsclProcessedStyles,
+  };
+
+  function renderButton(
+    props: Omit<ButtonVariantProps, 'buttonType' | 'hsclInternal'> &
+      Partial<BaseButtonProps>
+  ) {
+    const { onClick, disabled = false, children, ...rest } = props;
+    return (
+      <button {...sharedProps} onClick={onClick} disabled={disabled} {...rest}>
+        {children}
+      </button>
+    );
+  }
+
+  function renderLink(
+    props: Omit<LinkVariantProps, 'buttonType' | 'hsclInternal'> &
+      Partial<BaseButtonProps>
+  ) {
+    const { href = '', target = '_self', rel = '', children, ...rest } = props;
+    return (
+      <a {...sharedProps} href={href} target={target} rel={rel} {...rest}>
+        {children}
+      </a>
+    );
+  }
+
+  // TypeScript properly discriminates based on buttonType
+  if (buttonType === 'button') return renderButton(rest);
+
+  // For link variant
+  return renderLink(rest);
+};
+
+Component.hsclComponentName = componentName;
+Component.cssModule = styles;
+
+const Button = createHsclComponent(Component);
+
+export default Button;

package/components/componentLibrary/Button/scaffolds/fields.tsx.template

@@ -0,0 +1,70 @@
+import { LinkField, TextField } from '@hubspot/cms-components/fields'
+import __NC__ from './buttonIndex.js';
+
+export type __NC__ContentFieldsProps = {
+  buttonTextDefault?: string;
+  buttonTextLabel?: string;
+  buttonTextName?: string;
+  buttonLinkLabel?: string;
+  buttonLinkName?: string;
+  buttonLinkDefault?: {url: {type: 'EXTERNAL', content_id: number, href: string}};
+  showButtonLink?: boolean;
+}
+
+export function contentFields(props: __NC__ContentFieldsProps) {
+  const { buttonTextDefault, buttonTextLabel, buttonTextName, buttonLinkLabel, buttonLinkName, buttonLinkDefault, showButtonLink = true } = props;
+
+  return (
+    <>
+      <TextField
+        label={buttonTextLabel || 'Button Text'}
+        name={buttonTextName || 'buttonText'}
+        default={buttonTextDefault || 'Button Text'}
+      />
+      {showButtonLink && (
+        <LinkField
+          label={buttonLinkLabel || 'Button Link'}
+          name={buttonLinkName || 'buttonLink'}
+          default={buttonLinkDefault || {url: {type: 'EXTERNAL', content_id: 0, href: 'https://www.google.com'}}}
+        />
+      )}
+    </>
+  )
+}
+
+export type __NC__StyleFieldsProps = {
+  buttonVariantLabel?: string;
+  buttonVariantName?: string;
+  buttonVariantDefault?: string;
+  buttonSizeLabel?: string;
+  buttonSizeName?: string;
+  buttonSizeDefault?: string;
+  buttonBorderRadiusLabel?: string;
+  buttonBorderRadiusName?: string;
+  buttonBorderRadiusDefault?: string;
+}
+
+export function styleFields(props: __NC__StyleFieldsProps) {
+  const { buttonVariantLabel, buttonVariantName, buttonVariantDefault, buttonSizeLabel, buttonSizeName, buttonSizeDefault, buttonBorderRadiusLabel, buttonBorderRadiusName, buttonBorderRadiusDefault } = props;
+
+  return (
+    <>
+      <__NC__.DimensionChoiceFields.variant
+        label={buttonVariantLabel || 'Variant'}
+        name={buttonVariantName || 'buttonVariant'}
+        default={buttonVariantDefault || 'solid'}
+      />
+      <__NC__.DimensionChoiceFields.size
+        label={buttonSizeLabel || 'Size'}
+        name={buttonSizeName || 'buttonSize'}
+        default={buttonSizeDefault || 'medium'}
+      />
+      <__NC__.DimensionChoiceFields.borderRadius
+        label={buttonBorderRadiusLabel || 'Border Radius'}
+        name={buttonBorderRadiusName || 'buttonBorderRadius'}
+        default={buttonBorderRadiusDefault || 'medium'}
+      />
+    </>
+  )
+}
+

package/components/componentLibrary/Button/scaffolds/index.ts.template

@@ -0,0 +1,95 @@
+import Button, { ButtonProps } from '@hubspot/cms-component-library/Button';
+import { createComponentInstance } from '@hubspot/cms-component-library';
+import { __NC__ContentFieldsProps, __NC__StyleFieldsProps, contentFields, styleFields } from './fields.js';
+
+export type __NC__Props = ButtonProps & {
+  variant: 'solid' | 'outline' | 'unstyled';
+  size: 'small' | 'medium' | 'large' | 'xlarge';
+  borderRadius: 'none' | 'small' | 'medium' | 'large' | 'full';
+};
+
+const  __NC__ = createComponentInstance<__NC__Props>(Button)
+  .withContentFields<__NC__ContentFieldsProps>(contentFields)
+  .withStyleFields<__NC__StyleFieldsProps>(styleFields);
+
+  const sharedVariantProps = {
+    display: 'inline-block',
+    textDecoration: 'none',
+  }
+
+__NC__.setDimension('variant')
+.setOption('solid')
+  .setProps({
+    backgroundColor: 'black',
+    color: 'white',
+    hoverBackgroundColor: '#262626',
+    ...sharedVariantProps
+  })
+.setOption('outline')
+  .setProps({
+    backgroundColor: 'transparent',
+    color: 'black',
+    border: '1px solid black',
+    hoverBackgroundColor: '#E6E6E6',
+    ...sharedVariantProps
+  })
+.setOption('unstyled')
+  .setProps({})
+.createDimensionChoiceField();
+
+const sharedSizeProps = {
+  fontWeight: '600',
+  lineHeight: '1.3',
+}
+
+__NC__.setDimension('size')
+.setOption('small')
+  .setProps({
+    fontSize: '12px',
+    padding: '12px 16px',
+    ...sharedSizeProps
+  })
+.setOption('medium')
+  .setProps({
+    fontSize: '16px',
+    padding: '16px 20px',
+    ...sharedSizeProps
+  })
+.setOption('large')
+  .setProps({
+    fontSize: '24px',
+    padding: '20px 24px',
+    ...sharedSizeProps
+  })
+.setOption('extraLarge')
+  .setProps({
+    fontSize: '30px',
+    padding: '24px 30px',
+    ...sharedSizeProps
+  })
+.createDimensionChoiceField();
+
+__NC__.setDimension('borderRadius')
+.setOption('none')
+  .setProps({
+    borderRadius: '0',
+  })
+.setOption('small')
+  .setProps({
+    borderRadius: '4px',
+  })
+.setOption('medium')
+  .setProps({
+    borderRadius: '8px',
+  })
+.setOption('large')
+  .setProps({
+    borderRadius: '12px',
+  })
+.setOption('full')
+  .setProps({
+    borderRadius: '50px',
+  })
+.createDimensionChoiceField();
+
+export default __NC__;

package/components/componentLibrary/Heading/index.module.scss

@@ -0,0 +1,9 @@
+@use '../styles/_component-base';
+
+@layer hscl-library {
+  .heading {
+
+    @include component-base.hscl-component-conditional('heading');
+    @include component-base.hscl-component-hover-conditional('heading');
+  }
+}

package/components/componentLibrary/Heading/index.tsx

@@ -0,0 +1,34 @@
+/* eslint-disable */
+
+import createHsclComponent from '../utils/createHsclComponent.js';
+import styles from './index.module.scss';
+import { BaseAndInternalComponentProps } from '../types/index.js';
+
+export type HeadingProps = BaseAndInternalComponentProps & {
+  text: string;
+  headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+};
+
+const componentName = 'heading';
+
+const Component = (props: HeadingProps) => {
+  const {
+    headingLevel = 'h1',
+    hsclInternal: { hsclProcessedClasses, hsclProcessedStyles },
+  } = props;
+
+  const HeadingLevel = headingLevel;
+
+  return (
+    <HeadingLevel style={hsclProcessedStyles} className={hsclProcessedClasses}>
+      {props.text}
+    </HeadingLevel>
+  );
+};
+
+Component.hsclComponentName = componentName;
+Component.cssModule = styles;
+
+const Heading = createHsclComponent(Component);
+
+export default Heading;

package/components/componentLibrary/Heading/scaffolds/fields.tsx.template

@@ -0,0 +1,62 @@
+import React from 'react'
+import { __NC__ } from './index.js'
+import { TextField, AlignmentField } from '@hubspot/cms-components/fields'
+
+export type __NC__ContentFieldsProps = {
+  HeadingDefault?: string;
+  HeadingLabel?: string;
+  HeadingName?: string;
+  HeadingLevelLabel?: string;
+  HeadingLevelName?: string;
+  HeadingLevelDefault
+}
+
+export function contentFields(props: __NC__ContentFieldsProps) {
+  const { HeadingDefault, HeadingLabel, HeadingName, HeadingLevelLabel, HeadingLevelName, HeadingLevelDefault } = props;
+
+  return (
+    <>
+      <TextField
+        label={HeadingLabel || 'Heading Text'}
+        name={HeadingName || 'headingText'}
+        default={HeadingDefault || 'Default Heading Text'}
+      />
+      <ChoiceField
+        label={HeadingLevelLabel || "Heading Level"}
+        name={HeadingLevelName || "headingLevel"}
+        choices={[['h1', 'h1'],['h2', 'h2'],['h3', 'h3'],['h4', 'h4'],['h5', 'h5'],['h6', 'h6']]}
+        default={HeadingLevelDefault || 'h1'}
+      />
+    </>
+  )
+}
+
+export type __NC__StyleFieldsProps = {
+  displayAsLabel?: string;
+  displayAsName?: string;
+  displayAsDefault?: string;
+  alignmentLabel?: string;
+  alignmentName?: string;
+  alignmentDefault?: 'LEFT' | 'CENTER' | 'RIGHT';
+}
+
+export function styleFields(props: __NC__StyleFieldsProps) {
+  const { displayAsLabel, displayAsName, displayAsDefault, alignmentLabel, alignmentName, alignmentDefault } = props;
+
+  return (
+    <>
+    <AlignmentField
+      label={alignmentLabel || 'Heading Alignment'}
+      default={{ horizontal_align: alignmentDefault || 'LEFT' }}
+      name={alignmentName || 'headingAlignment'}
+      alignmentDirection="HORIZONTAL"
+    />
+    <__NC__.DimensionChoiceFields.displayAs
+      label={displayAsLabel || 'Display as'}
+      default={displayAsDefault || 'h1'}
+      name={displayAsName || 'headingDisplayAs'}
+    />
+    </>
+  )
+}
+

package/components/componentLibrary/Heading/scaffolds/index.ts.template

@@ -0,0 +1,46 @@
+import { createComponentInstance } from '@hubspot/cms-component-library/';
+import Heading from '@hubspot/cms-component-library/Heading'
+import { HeadingProps } from '@hubspot/cms-component-library/Heading'
+import { __NC__ContentFieldsProps, __NC__StyleFieldsProps, contentFields, styleFields } from './fields.js';
+
+export type __NC__Props = HeadingProps & {
+  displayAs: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+};
+
+export const __NC__ = createComponentInstance<__NC__Props>(Heading)
+  .withContentFields<__NC__ContentFieldsProps>(contentFields)
+  .withStyleFields<__NC__StyleFieldsProps>(styleFields);
+
+__NC__.setDimension('displayAs')
+.setOption('h1')
+  .setProps({
+    fontSize: '2.125rem',
+    fontWeight: '700',
+  })
+.setOption('h2')
+  .setProps({
+    fontSize: '1.875rem',
+    fontWeight: '700',
+  })
+.setOption('h3')
+  .setProps({
+    fontSize: '1.5rem',
+    fontWeight: '700',
+  })
+.setOption('h4')
+  .setProps({
+    fontSize: '1.25rem',
+    fontWeight: '700',
+  })
+.setOption('h5')
+  .setProps({
+    fontSize: '1rem',
+    fontWeight: '700',
+  })
+.setOption('h6')
+  .setProps({
+    fontSize: '0.875rem',
+    fontWeight: '700',
+  })
+.createDimensionChoiceField();
+