superapp_lib_sections

Suajam catalog components for Suajam store, Codenation Studio

Install

npm install --save superapp_lib_sections

Usage

import { Sections } from 'superapp_lib_sections'

const SECA = new Sections()

// Render all sections from an API or mock data array
return (
  <div>
    {sections.map((element, index) => (
      <div key={index}>
        {SECA.sections[element.type].component(element)}
      </div>
    ))}
  </div>
)

Each element in the sections array must have the shape described below. element.type is the numeric index that selects which section component to render.

Data Shape

Every section object follows this top-level structure:

{
  "id": 1,
  "type": 0,
  "name": "Banner",
  "index_by": 0,
  "view": 1,
  "date_created": "...",
  "component": {
    "id": 1,
    "layout": 0,
    "layout_active": true,
    "type": 0,
    "title": "Section title",
    "justify_content": "center",
    "date_created": "...",
    "subcomponent": [ /* array of items — see each section below */ ]
  }
}

| Field | Type | Description | |---|---|---| | type | number | Selects the section (0–8, see table below) | | component.layout | number | Selects the layout variant (currently always 0) | | component.justify_content | "left" \| "center" \| "right" | Text alignment / direction | | component.title | string | Section heading | | component.subcomponent | array | Items rendered inside the section |

Subcomponent item — common fields

| Field | Type | Description | |---|---|---| | image.url | string | Image URL | | image_scale | string | CSS scale factor, e.g. "1.00" | | image_transform_x | number | Horizontal CSS translate (%) | | image_transform_y | number | Vertical CSS translate (%) | | title | string | Item heading | | subtitle | string \| null | Item sub-heading | | description | string \| null | Body text (HTML allowed) | | text_color | string | Hex color for text | | label | string \| null | Badge/chip text | | label_color | string | Badge hex color | | label_active | boolean | Whether to show the badge | | button_title | string \| null | CTA button label | | button_action | string | CTA href | | button_active | boolean | Whether to show the button | | link | 1 \| 2 \| 3 \| 4 | 4 opens in _blank, others in _self |

Sections Index

| type | Class | Name | |--------|-------|------| | 0 | Banner | Banner | | 1 | TextPlusImg | Texto + Imágenes | | 2 | Quotes | Citas / Testimonios | | 3 | Gallery | Galería | | 4 | Text | Texto | | 5 | List | Lista | | 6 | Brands | Marcas | | 7 | FAQ | Preguntas frecuentes | | 8 | Categories | Categorías |

Section Reference

0 — Banner

Hero section. Full-width background image with headline, description and optional CTA.

component.subcomponent cardinality: single item (subcomponent[0] only).

Required subcomponent fields:

| Field | Notes | |---|---| | image.url | Used as CSS background-image (covers full section) | | title | Rendered as <h1> | | description | Rendered as <p> | | label / label_active | Optional chip above the title | | button_title / button_action / button_active | Optional CTA button | | link | 4 = opens in new tab |

Minimum mock:

{
  "type": 0,
  "component": {
    "layout": 0,
    "justify_content": "center",
    "title": "",
    "subcomponent": [{
      "image": { "url": "https://..." },
      "label_active": false,
      "label": null,
      "label_color": "#000000",
      "title": "Bienvenidos",
      "description": "Texto de descripción.",
      "text_color": "#000000",
      "image_scale": "1.00",
      "image_transform_x": 0,
      "image_transform_y": 0,
      "button_active": true,
      "button_title": "Ver más",
      "button_action": "/about",
      "link": 1
    }]
  }
}

1 — TextPlusImg

Two-column layout: image on one side, text content on the other. Direction is controlled by justify_content.

component.subcomponent cardinality: single item (subcomponent[0] only).

Required subcomponent fields:

| Field | Notes | |---|---| | image.url | Displayed in the image column | | image_scale / image_transform_x / image_transform_y | Image CSS transform | | title | Rendered as <h2> | | description | Rendered as <p> | | label / label_active | Optional chip | | button_title / button_action / button_active | Optional CTA | | link | 4 = new tab |

justify_content: "right" reverses the column order (text left, image right).

2 — Quotes ⚠️

Testimonials / quote cards section.

Known issue: The carousel that renders individual quote cards is currently commented out. Only the section title (<h2>) is rendered. Subcomponent items are parsed but not displayed.

component.subcomponent cardinality: multiple items.

Required subcomponent fields (for when the carousel is re-enabled):

| Field | Notes | |---|---| | image.url | Circular avatar photo | | image_scale / image_transform_x / image_transform_y | Avatar transform | | title | Author name | | description | Quote body text | | label / label_active | Optional role/badge chip |

3 — Gallery

Image grid. Three columns on desktop, one on mobile.

component.subcomponent cardinality: multiple items (recommended 3 or multiples of 3).

Required subcomponent fields:

| Field | Notes | |---|---| | image.url | Displayed in the card | | image_scale / image_transform_x / image_transform_y | Image CSS transform | | description | Used as alt text |

Title, buttons, and labels are not rendered in this section.

4 — Text

Plain text block. No image.

component.subcomponent cardinality: single item (subcomponent[0] only).

Required subcomponent fields:

| Field | Notes | |---|---| | title | Rendered as <h2> | | description | Rendered as <p> |

justify_content: "center" makes the description full-width; any other value constrains it to ~70% width.

5 — List

Product/item card grid with image, title, subtitle and CTA button.

component.subcomponent cardinality: multiple items.

Required subcomponent fields:

| Field | Notes | |---|---| | image.url | Square card image (300×300) | | image_scale / image_transform_x / image_transform_y | Image CSS transform | | title | Card title | | subtitle | Card sub-title | | button_title / button_action | CTA — button is always rendered (ignores button_active) | | link | 4 = new tab |

Known issue: button_active is ignored — the button renders for all items unconditionally.

6 — Brands

Logo carousel. Scrolls infinitely when item count meets the breakpoint threshold (xs ≥ 3, default ≥ 4, xl ≥ 5). Renders a static flex row for fewer items.

component.subcomponent cardinality: multiple items (≥ 3 recommended to trigger scroll).

Required subcomponent fields:

| Field | Notes | |---|---| | image.url | Brand logo (rendered 1:1 aspect ratio, object-fit: cover) |

Title, description, and buttons are not rendered. The button_action field exists in the data but is not used.

7 — FAQ

Accordion list of questions and answers.

component.subcomponent cardinality: multiple items.

Required subcomponent fields:

| Field | Notes | |---|---| | title | Question text (accordion header, <h3>) | | description | Answer text (accordion body) |

Image, label, subtitle, and buttons are not rendered in this section.

component.title is rendered as the section <h2> heading above the accordion.

8 — Categories

Horizontal navigation links to product categories. Each item renders as a styled text link with a bottom border.

component.subcomponent cardinality: multiple items.

Required subcomponent fields:

| Field | Notes | |---|---| | button_title | Link label text | | button_action | Link href | | button_active | If false the link is not rendered | | link | 4 = new tab |

Title, image, description, and label are not rendered. This section acts as a category navigation menu.

component.title is rendered as the section <h2> heading above the links.

API / Sections class

import { Sections } from 'superapp_lib_sections'

const SECA = new Sections()

// Render a specific section by index
SECA.sections[type].component(sectionObject)   // → React element

// Get layout count for a section
SECA.sections[type].layoutLength()             // → number

// Get footprint (preview image + field requirements) for a layout
SECA.sections[type].getFootPrint(layoutIndex)  // → { img: string, req: object }

// Get the full name map
SECA.getSectionList()
// → { 0: 'Banner', 1: 'Texto + Imágenes', ... }

// Get a section instance by index
SECA.getLayoutsFromSection(index)              // → Section instance

Development

1. Install Dependencies

From the repository root:

npm install

Install example dependencies:

cd example
npm install

2. Run The Library In Watch Mode

From the repository root:

npm run start

This runs Rollup in watch mode and rebuilds dist every time you edit sections/components in src.

3. Run The Example App

In another terminal:

cd example
npm run dev

The example is linked to the local library with file:.., so it uses your local changes while you develop sections.

4. Recommended Daily Workflow

1. Keep npm run start running in the root terminal (library watch).
2. Keep npm run dev running in example (preview app).
3. Edit section files in src (for example: src/banner, src/text, src/gallery, etc.).
4. Validate changes immediately in the example app.

Useful Commands

From repository root:

npm run build      # one-time library build
npm run test       # run unit test + build checks
npm run test:lint  # run linter
npm run release:check   # tests + build + pack dry-run
npm run release:quality # lint + release:check

From example:

npm run build      # production build of the example app

Publish Process (QA + npm)

This library is published from your local machine. npm publish uploads what exists locally in this repository folder, not what is in GitHub main by itself.

In this project, package.json has "files": ["dist"], so the published package includes only dist (plus metadata files like package.json and README.md).

1. Start from a clean local state

# from repository root
npm ci

Optional but recommended before a release:

git status

2. Run quality checks

npm run release:quality

npm run release:quality is the strict gate (lint + tests + build + npm pack --dry-run).

npm run release:check is the practical publish gate when lint debt exists, and still validates unit tests, build and publishable artifacts.

3. Build the distributable

npm run build

Even though prepare runs build in publish lifecycle, running it manually helps catch issues before release.

4. Verify exactly what will be published

npm pack --dry-run

Check that only expected files are included (mainly dist/*, README.md, and package metadata).

5. Verify account and version

npm whoami
node -p "require('./package.json').version"

Make sure the version is new (npm will reject already published versions).

6. Publish

npm publish

If this is ever moved to a scoped package (@scope/name), use:

npm publish --access public

7. Post-publish validation

npm view superapp_lib_sections version

Then validate install in a fresh project:

npm i superapp_lib_sections

Recommended release discipline

Not required for npm, but highly recommended:

1. Commit release changes.
2. Push to remote (usually main or a release branch).
3. Tag the release in git.
4. Publish from that exact commit.

This keeps Git history and published artifacts aligned.

License

© [Francisco Marmolejo](https://github.com/Francisco Marmolejo)