@hanamura/rcgen/dist/templates/components/Tile.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 Tile 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 './Tile.module.css'

/**
 * Options for the Tile component
 */
export type TileOptions = {
  /**
   * Number of columns to display
   */
  columns?: number | undefined

  /**
   * Gap between items
   */
  gap?: Spacing | [gap: Spacing] | [rowGap: Spacing, columnGap: Spacing] | 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 Tile component
 */
export type TileProps = {
  /**
   * Options for the Tile component
   */
  options?: TileOptions | undefined

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

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

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

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

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

  /**
   * Any other props
   */
  [key: string]: any
}

/**
 * Tile component
 */
export function Tile({
  options,
  adaptiveOptions,
  as: Component = 'div',
  className,
  style,
  children,
  ...rest
}: TileProps) {
  return (
    <Component
      className={\`\${styles['tile']} \${className ?? ''}\`}
      style={
        {
          ${config.queries
        .map(({ name }) => {
        const n = (0, utils_1.normalizeName)(name);
        return [
            // columns
            [
                `'--${prefix}tile-${n}-columns':`,
                `adaptiveOptions?.['${n}']?.columns ?? options?.columns ?? 1`,
            ].join(' '),
            // gap
            [
                `'--${prefix}tile-${n}-gap':`,
                `getSpacingValue(adaptiveOptions?.['${n}']?.gap ?? options?.gap) ?? 0`,
            ].join(' '),
            // padding block
            [
                `'--${prefix}tile-${n}-padding-block':`,
                `getSpacingValue(adaptiveOptions?.['${n}']?.paddingBlock ?? options?.paddingBlock) ?? 0`,
            ].join(' '),
            // padding inline
            [
                `'--${prefix}tile-${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
      }
      {...rest}
    >
      {children}
    </Component>
  )
}
`;
}