@bailaya/react 1.0.20 → 1.0.21

package/dist/components/StudioTypesList.d.ts

@@ -0,0 +1,51 @@
+import React from "react";
+import type { StudioType, StudioProfile } from "@bailaya/core";
+export interface StudioTypesListProps {
+    overrideId?: string;
+    locale?: string;
+    /** Root list wrapper */
+    className?: string;
+    /** Each row/card wrapper */
+    itemClassName?: string;
+    /** Wrapper around the image */
+    imageWrapperClassName?: string;
+    /** The `<img>` element itself */
+    imageClassName?: string;
+    /** Container for title/desc/CTA */
+    bodyClassName?: string;
+    /** Dance name heading */
+    titleClassName?: string;
+    /** Optional description paragraph */
+    descriptionClassName?: string;
+    /** CTA button/link class */
+    buttonClassName?: string;
+    /** Text for the CTA (i18n-friendly). Default: "See Classes" */
+    seeClassesText?: string;
+    /** Prefix for the href. Default: "/classes/" */
+    hrefPrefix?: string;
+    /** Hide the CTA entirely. Default: false */
+    hideButton?: boolean;
+    /**
+     * Optional link renderer.
+     * If not provided, a plain <a> will be rendered.
+     */
+    renderLink?: (opts: {
+        href: string;
+        className?: string;
+        children: React.ReactNode;
+    }) => React.ReactNode;
+    /** Optional custom render per item; bypasses default */
+    renderItem?: (type: StudioType, profile: StudioProfile) => React.ReactNode;
+    /** Show localized description text. Default: true (since your sample includes it) */
+    showDescription?: boolean;
+    /** Optional filter/sort hook before render */
+    transformTypes?: (types: StudioType[]) => StudioType[];
+    /** Optional custom href builder; defaults to hrefPrefix + slug(name) */
+    hrefBuilder?: (type: StudioType) => string;
+}
+/**
+ * List-style display of studio dance types (Salsa, Bachata, etc.) with optional CTA.
+ * Matches your sample Tailwind layout but implemented with low-specificity CSS classes.
+ */
+export declare const StudioTypesList: React.FC<StudioTypesListProps>;
+//# sourceMappingURL=StudioTypesList.d.ts.map

package/dist/components/StudioTypesList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StudioTypesList.d.ts","sourceRoot":"","sources":["../../src/components/StudioTypesList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAyB/D,MAAM,WAAW,oBAAoB;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4BAA4B;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+BAA+B;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,iCAAiC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yBAAyB;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qCAAqC;IACrC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,4BAA4B;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,+DAA+D;IAC/D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE;QAChB,IAAI,EAAE,MAAM,CAAC;QACb,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;KAC7B,KAAK,KAAK,CAAC,SAAS,CAAC;IAEtB,wDAAwD;IACxD,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,aAAa,KAAK,KAAK,CAAC,SAAS,CAAC;IAE3E,qFAAqF;IACrF,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,8CAA8C;IAC9C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,UAAU,EAAE,CAAC;IAEvD,wEAAwE;IACxE,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,MAAM,CAAC;CAC9C;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA4E1D,CAAC"}

package/dist/components/StudioTypesList.js

@@ -0,0 +1,70 @@
+"use strict";
+"use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StudioTypesList = void 0;
+const react_1 = __importDefault(require("react"));
+const lucide_react_1 = require("lucide-react");
+const useStudioProfile_1 = require("../hooks/useStudioProfile");
+const LoadingIcon_1 = require("./ui/LoadingIcon");
+/** Picks localized text with fallback to first available. */
+function pickLocalizedText(map, locale) {
+    const obj = map !== null && map !== void 0 ? map : {};
+    if (locale && obj[locale])
+        return obj[locale];
+    const keys = Object.keys(obj);
+    return keys.length ? obj[keys[0]] : "";
+}
+/** Slugify dance names: lower, spaces→hyphens, strip accents & non-alphanum. */
+function slugifyName(name) {
+    return name
+        .normalize("NFD")
+        .replace(/[\u0300-\u036f]/g, "") // strip accents
+        .toLowerCase()
+        .replace(/[^a-z0-9\s-]/g, "") // remove special chars
+        .trim()
+        .replace(/\s+/g, "-");
+}
+/**
+ * List-style display of studio dance types (Salsa, Bachata, etc.) with optional CTA.
+ * Matches your sample Tailwind layout but implemented with low-specificity CSS classes.
+ */
+const StudioTypesList = ({ overrideId, locale, className = "by-classesList", itemClassName = "by-listCard", imageWrapperClassName = "by-listImageWrap", imageClassName = "by-listImg", bodyClassName = "by-listBody", titleClassName = "by-listTitle", descriptionClassName = "by-listDesc", buttonClassName = "by-btn by-btnList", seeClassesText = "See Classes", hrefPrefix = "/classes/", hideButton = false, renderLink, renderItem, showDescription = true, transformTypes, hrefBuilder, }) => {
+    var _a;
+    const { data: profile, loading, error } = (0, useStudioProfile_1.useStudioProfile)(overrideId);
+    if (loading)
+        return react_1.default.createElement("div", { className: className },
+            react_1.default.createElement(LoadingIcon_1.LoadingIcon, null));
+    if (error)
+        return react_1.default.createElement("div", { className: className }, error.message);
+    if (!profile || !((_a = profile.studioTypes) === null || _a === void 0 ? void 0 : _a.length))
+        return react_1.default.createElement("div", { className: className });
+    const types = transformTypes ? transformTypes(profile.studioTypes) : profile.studioTypes;
+    return (react_1.default.createElement("div", { className: className }, types.map((type) => {
+        if (renderItem) {
+            return react_1.default.createElement(react_1.default.Fragment, { key: type.name }, renderItem(type, profile));
+        }
+        const href = hrefBuilder ? hrefBuilder(type) : `${hrefPrefix}${slugifyName(type.name)}`;
+        return (react_1.default.createElement("div", { key: type.name, className: itemClassName },
+            type.image && (react_1.default.createElement("div", { className: imageWrapperClassName },
+                react_1.default.createElement("img", { src: type.image, alt: type.name, className: imageClassName }))),
+            react_1.default.createElement("div", { className: bodyClassName },
+                react_1.default.createElement("h3", { className: titleClassName }, type.name),
+                showDescription && type.description && (react_1.default.createElement("p", { className: descriptionClassName }, pickLocalizedText(type.description, locale))),
+                !hideButton &&
+                    (renderLink ? (renderLink({
+                        href,
+                        className: buttonClassName,
+                        children: (react_1.default.createElement(react_1.default.Fragment, null,
+                            seeClassesText,
+                            " ",
+                            react_1.default.createElement(lucide_react_1.ArrowRight, null))),
+                    })) : (react_1.default.createElement("a", { href: href, className: buttonClassName },
+                        seeClassesText,
+                        " ",
+                        react_1.default.createElement(lucide_react_1.ArrowRight, null)))))));
+    })));
+};
+exports.StudioTypesList = StudioTypesList;

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export { ClassSchedule, ClassScheduleProps } from './components/ClassSchedule';
 export { ClassScheduleByType, ClassScheduleByTypeProps } from './components/ClassScheduleByType';
 export { InstructorList, InstructorListProps } from './components/InstructorList';
 export { StudioProfileCard, StudioProfileCardProps } from './components/StudioProfileCard';
+export { StudioTypesList, StudioTypesListProps } from './components/StudioTypesList';
 export { StudioTypesGrid, StudioTypesGridProps } from './components/StudioTypesGrid';
 export { UserProfileCard, UserProfileCardProps } from './components/UserProfileCard';
 export { StudioDescription } from './components/StudioDescription';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;GAEG;AACH,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE9E;;GAEG;AACH,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D;;GAEG;AACH,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAC/E,OAAO,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AACjG,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClF,OAAO,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAC3F,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACrF,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACrF,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE;;GAEG;AACH,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;GAEG;AACH,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE9E;;GAEG;AACH,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D;;GAEG;AACH,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAC/E,OAAO,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAC;AACjG,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAClF,OAAO,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AAC3F,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACrF,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACrF,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACrF,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE;;GAEG;AACH,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -19,7 +19,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StudioDescription = exports.UserProfileCard = exports.StudioTypesGrid = exports.StudioProfileCard = exports.InstructorList = exports.ClassScheduleByType = exports.ClassSchedule = exports.useClassesByType = exports.useClasses = exports.useInstructors = exports.useStudioProfile = exports.useBailayaClient = exports.BailayaProvider = void 0;
+exports.StudioDescription = exports.UserProfileCard = exports.StudioTypesGrid = exports.StudioTypesList = exports.StudioProfileCard = exports.InstructorList = exports.ClassScheduleByType = exports.ClassSchedule = exports.useClassesByType = exports.useClasses = exports.useInstructors = exports.useStudioProfile = exports.useBailayaClient = exports.BailayaProvider = void 0;
 /**
  * Re-exported context and hooks for easy import
  */
@@ -48,6 +48,8 @@ var InstructorList_1 = require("./components/InstructorList");
 Object.defineProperty(exports, "InstructorList", { enumerable: true, get: function () { return InstructorList_1.InstructorList; } });
 var StudioProfileCard_1 = require("./components/StudioProfileCard");
 Object.defineProperty(exports, "StudioProfileCard", { enumerable: true, get: function () { return StudioProfileCard_1.StudioProfileCard; } });
+var StudioTypesList_1 = require("./components/StudioTypesList");
+Object.defineProperty(exports, "StudioTypesList", { enumerable: true, get: function () { return StudioTypesList_1.StudioTypesList; } });
 var StudioTypesGrid_1 = require("./components/StudioTypesGrid");
 Object.defineProperty(exports, "StudioTypesGrid", { enumerable: true, get: function () { return StudioTypesGrid_1.StudioTypesGrid; } });
 var UserProfileCard_1 = require("./components/UserProfileCard");

package/dist/styles.css

@@ -85,15 +85,9 @@
     font-weight: 600;
     color: var(--by-color-heading);
     padding-bottom: var(--by-title-pb);
-    text-align: start;
+    text-align: center;
     line-height: 1.1;
-    font-size: 1.875rem;
-}
-
-@media (min-width: 768px) {
-    :where(.by-title) {
-        font-size: 3rem;
-    }
+    font-size: 1rem;
 }
 
 /* Description */
@@ -133,3 +127,101 @@
 :where(.by-btn svg) {
     flex-shrink: 0;
 }
+
+/* Container */
+:where(.by-classesList) {
+    margin-top: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    row-gap: 2rem;
+}
+@media (min-width: 768px) {
+    :where(.by-classesList) {
+        margin-top: 3rem;
+    }
+}
+
+/* Card */
+:where(.by-listCard) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border: 1px solid var(--by-border);
+    border-radius: var(--by-radius-lg);
+    box-shadow: var(--by-shadow);
+    overflow: hidden;
+    background: #fff;
+}
+@media (min-width: 768px) {
+    :where(.by-listCard) {
+        flex-direction: row;
+    }
+}
+
+/* Image wrapper */
+:where(.by-listImageWrap) {
+    width: 100%;
+    padding: 1rem;
+    aspect-ratio: 1 / 1;
+}
+@media (min-width: 768px) {
+    :where(.by-listImageWrap) {
+        width: 25%;
+    }
+}
+
+/* Image */
+:where(.by-listImg) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    border-radius: 1rem;
+}
+
+/* Body */
+:where(.by-listBody) {
+    padding: 1.5rem;
+    padding-top: 0;
+    flex: 1 1 auto;
+    text-align: left;
+    font-family: var(--by-body-font);
+    color: var(--by-color-text);
+}
+@media (min-width: 768px) {
+    :where(.by-listBody) {
+        padding-top: 1.5rem;
+    }
+}
+
+/* Title */
+:where(.by-listTitle) {
+    font-family: var(--by-heading-font);
+    font-weight: 600;
+    color: var(--by-color-heading);
+    line-height: 1.1;
+    font-size: 1.875rem;
+}
+@media (min-width: 768px) {
+    :where(.by-listTitle) {
+        font-size: 3rem;
+    }
+}
+
+/* Description */
+:where(.by-listDesc) {
+    margin-top: 0.5rem;
+    color: var(--by-color-text);
+    font-weight: 600;
+    font-size: 0.75rem;
+}
+@media (min-width: 768px) {
+    :where(.by-listDesc) {
+        font-size: 1.25rem;
+    }
+}
+
+/* Button spacing */
+:where(.by-btnList) {
+    margin-top: 1rem;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bailaya/react",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "description": "A React component library for the BailaYa public API",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",