@bailaya/react 1.0.13 → 1.0.15

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/InstructorList.d.ts

@@ -3,7 +3,7 @@ import type { Instructor } from '@bailaya/core';
 export interface InstructorListProps {
     /** Optional studio ID to override the default configured ID */
     overrideId?: string;
-    /** Locale code (e.g., "en", "es") for picking the description */
+    /** Locale code (e.g., "en", "es") for picking the bio */
     locale?: string;
     /** Root container wrapper */
     className?: string;
@@ -17,7 +17,7 @@ export interface InstructorListProps {
     bodyClassName?: string;
     /** Instructor name heading */
     nameClassName?: string;
-    /** Instructor bio paragraph(s) */
+    /** Instructor bio paragraph */
     bioClassName?: string;
     /**
      * Optional custom render function for each instructor.

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

@@ -1 +1 @@
-{"version":3,"file":"InstructorList.d.ts","sourceRoot":"","sources":["../../src/components/InstructorList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhD,MAAM,WAAW,mBAAmB;IAChC,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qCAAqC;IACrC,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,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,8BAA8B;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,KAAK,CAAC,SAAS,CAAC;CACvD;AAED;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA8CxD,CAAC"}
+{"version":3,"file":"InstructorList.d.ts","sourceRoot":"","sources":["../../src/components/InstructorList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhD,MAAM,WAAW,mBAAmB;IAChC,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qCAAqC;IACrC,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,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,8BAA8B;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,+BAA+B;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,KAAK,CAAC,SAAS,CAAC;CACvD;AAED;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAqDxD,CAAC"}

package/dist/components/InstructorList.js

@@ -17,11 +17,13 @@ const LoadingIcon_1 = require("./ui/LoadingIcon");
  */
 const InstructorList = ({ overrideId, locale, className = 'mt-6 md:mt-12 space-y-8', itemClassName = 'flex flex-col md:flex-row items-center rounded-lg border border-[#DCDCDC] shadow-lg overflow-hidden', imageWrapperClassName = 'w-full p-4 pb-0 md:pb-4 md:w-1/3 aspect-square', imageClassName = 'w-full h-full rounded-xl object-cover', bodyClassName = 'p-6 flex-1 text-left', nameClassName = 'text-xl md:text-3xl font-geologica font-semibold text-[#2A2343]', bioClassName = 'mt-2 text-xs md:text-xl font-sourcesans font-semibold text-[#464646]', renderItem, }) => {
     const { data: instructors, loading: isLoading, error } = (0, useInstructors_1.useInstructors)(overrideId);
-    if (isLoading)
+    if (isLoading) {
         return react_1.default.createElement("div", { className: className },
             react_1.default.createElement(LoadingIcon_1.LoadingIcon, null));
-    if (error)
+    }
+    if (error) {
         return react_1.default.createElement("div", { className: className }, error.message);
+    }
     return (react_1.default.createElement("div", { className: className }, instructors === null || instructors === void 0 ? void 0 : instructors.map((instr) => {
         var _a;
         return renderItem ? (renderItem(instr)) : (react_1.default.createElement("div", { key: instr.id, className: itemClassName },
@@ -31,24 +33,10 @@ const InstructorList = ({ overrideId, locale, className = 'mt-6 md:mt-12 space-y
                 react_1.default.createElement("h3", { className: nameClassName },
                     instr.name,
                     instr.lastname ? ` ${instr.lastname}` : ''),
-                renderBioParagraphs(instr.bio, locale, bioClassName))));
+                instr.bio && (react_1.default.createElement("p", { className: bioClassName }, pickLocalizedText(instr.bio, locale))))));
     })));
 };
 exports.InstructorList = InstructorList;
-/** Safely render localized bio as multiple <p> paragraphs. */
-function renderBioParagraphs(bio, locale, bioClassName) {
-    const text = pickLocalizedText(bio, locale);
-    if (!text)
-        return null;
-    const lines = splitMultiline(text);
-    if (lines.length === 0)
-        return null;
-    // Keep the original classes on the first paragraph.
-    const firstClass = bioClassName;
-    // For subsequent paragraphs, remove any mt-* to avoid stacking big gaps.
-    const restClass = bioClassName.replace(/\bmt-\d+\b/g, '').trim() || bioClassName;
-    return (react_1.default.createElement(react_1.default.Fragment, null, lines.map((line, i) => (react_1.default.createElement("p", { key: i, className: i === 0 ? firstClass : restClass }, line)))));
-}
 /** Pick localized text with fallback to first available. */
 function pickLocalizedText(map, locale) {
     const obj = map !== null && map !== void 0 ? map : {};
@@ -57,13 +45,3 @@ function pickLocalizedText(map, locale) {
     const keys = Object.keys(obj);
     return keys.length ? obj[keys[0]] : '';
 }
-/** Convert <br> -> newlines, then split, trim, and filter empty lines */
-function splitMultiline(text) {
-    if (!text)
-        return [];
-    const normalized = text.replace(/<br\s*\/?>/gi, '\n');
-    return normalized
-        .split(/\r?\n/)
-        .map((l) => l.trim())
-        .filter(Boolean);
-}

package/package.json

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