@bailaya/react 1.0.14 → 1.0.16

package/README.md

@@ -6,39 +6,37 @@
 
 `@bailaya/react` builds on top of **@bailaya/core** to provide:
 
-- A **`BailayaProvider`** + **`useBailayaClient`** context  
-- React **hooks** for fetching all core data (with `loading`, `error`, `data`, and `refetch`)  
-- **Components** with sensible Tailwind defaults (and full styling slots)  
-- Full TypeScript support, including localized text & date formatting  
+* A **`BailayaProvider`** + **`useBailayaClient`** context
+* React **hooks** for fetching all core data (with `loading`, `error`, `data`, and `refetch`)
+* **Components** with sensible Tailwind defaults (and full styling slots)
+* Full TypeScript support, including localized text & date formatting
 
-Whether you need a quick `<StudioProfileCard />` or fine-grained hooks like `useClassesByType()`, this package has you covered.
+> Works **with or without Tailwind**. If you don’t use Tailwind, just override the class props (or use the render props) to apply your own styling.
 
 ## Features
 
-- **Context + client** (`BailayaProvider` + `useBailayaClient`)  
-- **Hooks** (all return `{ data, error, loading, refetch }`)  
-  - `useStudioProfile(overrideId?)`  
-  - `useUserProfile(userId)`  
-  - `useInstructors(overrideId?)`  
-  - `useClasses(from?, overrideId?)`  
-  - `useClassesByType(typeName, from?, overrideId?)`  
-- **Components** (all props overridable)  
-  - `<StudioProfileCard />`  
-  - `<UserProfileCard />`  
-  - `<InstructorList />`  
-  - `<ClassSchedule />`  
-  - `<ClassScheduleByType />`  
-  - `<StudioDescription />`
-- **Localization**  
-  - Select description by `locale` prop  
-  - Date formatting via Intl  
-  - Custom text labels  
+* **Context + client** (`BailayaProvider` + `useBailayaClient`)
+* **Hooks** (all return `{ data, error, loading, refetch }`)
+
+  * `useStudioProfile(overrideId?)`
+  * `useUserProfile(userId)`
+  * `useInstructors(overrideId?)`
+  * `useClasses(from?, overrideId?)`
+  * `useClassesByType(typeName, from?, overrideId?)`
+* **Components** (all props overridable)
+
+  * `<StudioProfileCard />`
+  * `<UserProfileCard />`
+  * `<InstructorList />`
+  * `<ClassSchedule />`
+  * `<ClassScheduleByType />`
+  * `<StudioDescription />`
 
 ## Installation
 
 ```bash
 npm install @bailaya/react
-````
+```
 
 or with Yarn:
 
@@ -51,6 +49,52 @@ yarn add @bailaya/react
 > * `"react": ">=17"`
 > * `"react-dom": ">=17"`
 
+---
+
+## Tailwind Setup (optional)
+
+If your app uses Tailwind, add this glob so JIT scans our package classes:
+
+```js
+// tailwind.config.js or tailwind.config.ts
+module.exports = {
+  content: [
+    './node_modules/@bailaya/**/*.{js,mjs,ts,tsx}',
+  ],
+}
+```
+
+> If you’re not using Tailwind, skip this section.
+
+---
+
+## Styling without Tailwind
+
+You can use all components in non-Tailwind projects:
+
+* Pass your own `className`/`*ClassName` props to inject your CSS classes.
+* Or use `renderItem` / `renderProfile` props to fully control markup.
+
+```tsx
+import { InstructorList } from '@bailaya/react'
+
+export function Team() {
+  return (
+    <InstructorList
+      className="team"
+      itemClassName="card"
+      imageWrapperClassName="avatarWrap"
+      imageClassName="avatar"
+      bodyClassName="cardBody"
+      nameClassName="cardTitle"
+      bioClassName="cardText"
+    />
+  )
+}
+```
+
+---
+
 ## Quick Start
 
 First, wrap your app with **BailayaProvider**:
@@ -69,8 +113,6 @@ export default function App() {
 }
 ```
 
----
-
 ### Using a Hook
 
 ```tsx
@@ -96,8 +138,6 @@ export function TeamSection() {
 }
 ```
 
----
-
 ### Using a Component
 
 ```tsx
@@ -107,10 +147,7 @@ import { StudioProfileCard } from "@bailaya/react";
 export function Dashboard() {
   return (
     <div className="max-w-md mx-auto">
-      <StudioProfileCard
-        locale="en"
-        className="bg-white rounded-lg shadow p-6"
-      />
+      <StudioProfileCard locale="en" />
     </div>
   );
 }

package/dist/components/StudioTypesGrid.d.ts

@@ -0,0 +1,52 @@
+import React from "react";
+import type { StudioType, StudioProfile } from "@bailaya/core";
+export interface StudioTypesGridProps {
+    /** Optional studio ID to override the default configured ID */
+    overrideId?: string;
+    /** Locale code (e.g., "en", "es") for localized descriptions (if shown) */
+    locale?: string;
+    /** Root grid wrapper */
+    className?: string;
+    /** Each card wrapper */
+    itemClassName?: string;
+    /** Wrapper around the image */
+    imageWrapperClassName?: string;
+    /** The `<img>` element itself */
+    imageClassName?: string;
+    /** Container for title (+ optional description) + CTA */
+    bodyClassName?: string;
+    /** Dance name heading */
+    titleClassName?: string;
+    /** Optional description paragraph (if you enable it) */
+    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 to use custom component.
+     * If not provided, a plain <a> will be rendered.
+     */
+    renderLink?: (opts: {
+        href: string;
+        className?: string;
+        children: React.ReactNode;
+    }) => React.ReactNode;
+    /** Optional custom render for each studio type; bypasses the default card layout entirely. */
+    renderItem?: (type: StudioType, profile: StudioProfile) => React.ReactNode;
+    /** Show localized description text under the title. Default: false */
+    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;
+}
+/**
+ * Grid of studio dance types (Salsa, Bachata, etc.) with optional CTA button.
+ */
+export declare const StudioTypesGrid: React.FC<StudioTypesGridProps>;
+//# sourceMappingURL=StudioTypesGrid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StudioTypesGrid.d.ts","sourceRoot":"","sources":["../../src/components/StudioTypesGrid.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,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,2EAA2E;IAC3E,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,wBAAwB;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,+BAA+B;IAC/B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAE/B,iCAAiC;IACjC,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,yDAAyD;IACzD,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,yBAAyB;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,wDAAwD;IACxD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B,4BAA4B;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB,+DAA+D;IAC/D,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAExG,8FAA8F;IAC9F,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,aAAa,KAAK,KAAK,CAAC,SAAS,CAAC;IAE3E,sEAAsE;IACtE,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;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA+E1D,CAAC"}

package/dist/components/StudioTypesGrid.js

@@ -0,0 +1,72 @@
+"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.StudioTypesGrid = 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, "-");
+}
+/**
+ * Grid of studio dance types (Salsa, Bachata, etc.) with optional CTA button.
+ */
+const StudioTypesGrid = ({ overrideId, locale, className = "my-3 md:my-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", itemClassName = "flex flex-col rounded-lg border border-[#DCDCDC] shadow-lg overflow-hidden", imageWrapperClassName = "w-full aspect-square p-2", imageClassName = "w-full h-full object-cover", bodyClassName = "p-3 flex flex-col flex-1", titleClassName = "text-3xl md:text-5xl font-geologica font-semibold text-[#2A2343] pb-4 text-start", descriptionClassName = "text-sm md:text-base text-[#464646] pb-3", buttonClassName = "mt-auto inline-flex items-center gap-2 px-6 py-3 rounded-md font-medium border border-transparent shadow-sm bg-[#2A2343] text-white hover:opacity-90 transition", seeClassesText = "See Classes", hrefPrefix = "/classes/", hideButton = false, renderLink, renderItem, showDescription = false, 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.StudioTypesGrid = StudioTypesGrid;

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 { 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,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,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.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.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 StudioTypesGrid_1 = require("./components/StudioTypesGrid");
+Object.defineProperty(exports, "StudioTypesGrid", { enumerable: true, get: function () { return StudioTypesGrid_1.StudioTypesGrid; } });
 var UserProfileCard_1 = require("./components/UserProfileCard");
 Object.defineProperty(exports, "UserProfileCard", { enumerable: true, get: function () { return UserProfileCard_1.UserProfileCard; } });
 var StudioDescription_1 = require("./components/StudioDescription");

package/package.json

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