@hanamura/rcgen/dist/templates/components/Cluster.tsx.tmpl.js

Generate optimized React container components from configuration

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = render;
const utils_1 = require("../../src/utils");
/**
 * Render the Cluster component
 */
function render(config) {
    // If a variable prefix is provided, use it
    const prefix = config.variablePrefix ? `${config.variablePrefix}-` : '';
    return `// generated by static-generator

import React from 'react'

import { QueryName, Spacing } from '../types'
import { getSpacingValue } from '../utils'

import styles from './Cluster.module.css'

/**
 * Options for the Cluster component
 */
export type ClusterOptions = {
  /**
   * Gap between items
   */
  gap?: Spacing | [gap: Spacing] | [rowGap: Spacing, columnGap: Spacing] | undefined

  /**
   * Alignment of items
   */
  align?: 'start' | 'center' | 'end' | 'stretch' | undefined

  /**
   * Justification of items
   */
  justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly' | undefined

  /**
   * Wrap items
   */
  wrap?: 'wrap' | 'nowrap' | 'wrap-reverse' | undefined

  /**
   * Padding block
   */
  paddingBlock?: Spacing | [padding: Spacing] | [start: Spacing, end: Spacing] | undefined

  /**
   * Padding inline
   */
  paddingInline?: Spacing | [padding: Spacing] | [start: Spacing, end: Spacing] | undefined
}

/**
 * Props for the Cluster component
 */
export type ClusterProps = {
  /**
   * Options for the Cluster component
   */
  options?: ClusterOptions | undefined

  /**
   * Adaptive options for the Cluster component
   */
  adaptiveOptions?: Record<QueryName, ClusterOptions> | undefined

  /**
   * HTML element for the Cluster component
   */
  as?: React.ElementType | undefined

  /**
   * Class name for the Cluster component
   */
  className?: string | undefined

  /**
   * Style for the Cluster component
   */
  style?: React.CSSProperties | undefined

  /**
   * Children for the Cluster component
   */
  children?: React.ReactNode | undefined
}

/**
 * Cluster component
 */
export function Cluster({
  options,
  adaptiveOptions,
  as: Component = 'div',
  className,
  style,
  children,
}: ClusterProps) {
  return (
    <Component
      className={\`\${styles['cluster']} \${className ?? ''}\`}
      style={
        {
          ${config.queries
        .map(({ name }) => {
        const n = (0, utils_1.normalizeName)(name);
        return [
            // gap
            [
                `'--${prefix}cluster-${n}-gap':`,
                `getSpacingValue(adaptiveOptions?.['${n}']?.gap ?? options?.gap) ?? 0`,
            ].join(' '),
            // align
            [
                `'--${prefix}cluster-${n}-align':`,
                `adaptiveOptions?.['${n}']?.align ?? options?.align ?? 'initial'`,
            ].join(' '),
            // justify
            [
                `'--${prefix}cluster-${n}-justify':`,
                `adaptiveOptions?.['${n}']?.justify ?? options?.justify ?? 'initial'`,
            ].join(' '),
            // wrap
            [
                `'--${prefix}cluster-${n}-wrap':`,
                `adaptiveOptions?.['${n}']?.wrap ?? options?.wrap ?? 'initial'`,
            ].join(' '),
            // padding block
            [
                `'--${prefix}cluster-${n}-padding-block':`,
                `getSpacingValue(adaptiveOptions?.['${n}']?.paddingBlock ?? options?.paddingBlock) ?? 0`,
            ].join(' '),
            // padding inline
            [
                `'--${prefix}cluster-${n}-padding-inline':`,
                `getSpacingValue(adaptiveOptions?.['${n}']?.paddingInline ?? options?.paddingInline) ?? 0`,
            ].join(' '),
        ].join(',\n');
    })
        .join(',\n') || '...({})' // If no styles are provided, return an empty object
    },
          ...style,
        } as React.CSSProperties
      }
    >
      {children}
    </Component>
  )
}
`;
}