@stokr/components-library 3.0.16-alpha.5 → 3.0.16-alpha.6

package/README.md

@@ -1,262 +1,261 @@
-# @stokr/components-library
-
-React component library for STOKR applications. Includes modals, forms, buttons, tables, and shared styles.
-
-## Table of contents
-
-- [Installation](#installation)
-- [How to start](#how-to-start)
-- [Configuration](#configuration)
-  - [Runtime config (npm consumers)](#runtime-config)
-  - [Ionicons](#ionicons)
-  - [React Router](#react-router)
-- [Troubleshooting](#troubleshooting)
-- [Development & publishing](#development--publishing)
-
----
-
-## Installation
-
-```bash
-npm install @stokr/components-library
-```
-
-**Peer dependencies** (install in your app if not already present):
-
-```bash
-npm install react react-dom styled-components react-router-dom
-```
-
-- **React** 18 or 19
-- **styled-components** 6.x
-- **react-router-dom** 6.x (required if you use routing-dependent components)
-
----
-
-## How to start
-
-### 1. Install the package and peers
-
-```bash
-npm install @stokr/components-library react react-dom styled-components react-router-dom
-```
-
-### 2. Wrap your app with a Router (if you use routing)
-
-Components that use navigation (e.g. `MainMenu`, `LearnMore`, `HeaderHo`) must live inside a React Router:
-
-```jsx
-// main.jsx or App.jsx
-import { BrowserRouter } from 'react-router-dom'
-import App from './App'
-
-root.render(
-  <BrowserRouter>
-    <App />
-  </BrowserRouter>,
-)
-```
-
-### 3. (Optional) Add Ionicons for icons
-
-If you use **Modal**, **ConfirmModal**, **BackButton**, **Select**, **InfoIcon**, etc., add the icon styles once at the root:
-
-```jsx
-import { IoniconsStyles } from '@stokr/components-library'
-
-function App() {
-  return (
-    <>
-      <IoniconsStyles />
-      {/* your app */}
-    </>
-  )
-}
-```
-
-You can skip this; the library will inject icon styles when you first use a component that needs them.
-
-### 4. Import and use components
-
-```jsx
-import { ConfirmModal, Button } from '@stokr/components-library'
-
-function MyPage() {
-  const [open, setOpen] = useState(false)
-  return (
-    <>
-      <Button onClick={() => setOpen(true)}>Open</Button>
-      <ConfirmModal isOpen={open} onClose={() => setOpen(false)} onConfirm={() => {}} title="Confirm?" />
-    </>
-  )
-}
-```
-
----
-
-## Configuration
-
-### Runtime config (required when consuming as npm package) {#runtime-config}
-
-Since v3.0.16, the library uses a **runtime config** system. When this package is consumed by an external Vite app, `import.meta.env` values are baked at **library build time** and do not reflect the consuming app's `.env` file. Pass a `config` prop to `<AuthProvider>` so API URLs, Firebase credentials, and cookie domain are resolved from **your** environment:
-
-```jsx
-import { AuthProvider } from '@stokr/components-library'
-
-function App() {
-  return (
-    <AuthProvider
-      config={{
-        apiUrl: import.meta.env.VITE_API_URL,
-        baseUrlPublic: import.meta.env.VITE_BASE_URL_PUBLIC,
-        cookieDomain: import.meta.env.VITE_COOKIE_DOMAIN,
-        websiteDomain: import.meta.env.VITE_WEBSITE_DOMAIN,
-        photoApiUrl: import.meta.env.VITE_PHOTO_API_URL,
-        firebase: {
-          apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
-          authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
-          projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
-          storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
-          messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
-          appId: import.meta.env.VITE_FIREBASE_APP_ID,
-          measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID,
-        },
-      }}
-    >
-      {/* your app */}
-    </AuthProvider>
-  )
-}
-```
-
-| Prop key | Env variable it replaces | Purpose |
-| --- | --- | --- |
-| `apiUrl` | `VITE_API_URL` | Backend API base URL |
-| `baseUrlPublic` | `VITE_BASE_URL_PUBLIC` | Public (no-auth) API base URL |
-| `cookieDomain` | `VITE_COOKIE_DOMAIN` | Domain attribute for auth cookies |
-| `websiteDomain` | `VITE_WEBSITE_DOMAIN` | Platform domain (redirects, links) |
-| `photoApiUrl` | `VITE_PHOTO_API_URL` | Photo upload / avatar API URL |
-| `firebase` | `VITE_FIREBASE_*` | Full Firebase config object |
-
-> **Why is this needed?** With the old CRA / `react-scripts` build, Webpack re-processed library code through the consuming app's build pipeline, so the app's `.env` values were injected automatically. Vite treats npm packages as pre-built — `import.meta.env` values in the compiled library are frozen at library build time. The `config` prop passes them at runtime instead.
-
-If you also need config values **before** `<AuthProvider>` mounts (e.g. for analytics init), you can call `configure()` directly:
-
-```js
-import { configure } from '@stokr/components-library'
-
-configure({
-  apiUrl: import.meta.env.VITE_API_URL,
-  cookieDomain: import.meta.env.VITE_COOKIE_DOMAIN,
-  // ...
-})
-```
-
-### Ionicons
-
-Components such as **Modal**, **ConfirmModal**, **BackButton**, **InfoIcon**, **Select**, **MainMenu**, and **RegisterLiquidSteps** use [Ionicons](http://ionicons.com/). You can enable them in three ways:
-
-| Approach             | When to use                                                                                                                   |
-| -------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
-| **Global injection** | Render `<IoniconsStyles />` once at app root. Full icon set, singleton.                                                       |
-| **No setup**         | Don’t render anything; styles inject on first use of an icon component.                                                       |
-| **CSS import**       | Prefer loading via CSS: `import '@stokr/components-library/styles.css'` or `import '@stokr/components-library/ionicons.css'`. |
-
-**Global injection example:**
-
-```jsx
-import { IoniconsStyles } from '@stokr/components-library'
-
-function App() {
-  return (
-    <>
-      <IoniconsStyles />
-      {/* your routes, layout, etc. */}
-    </>
-  )
-}
-```
-
-If you use **Layout**, **GlobalStyle**, or need **Open Sans**, import the full styles once:
-
-```js
-import '@stokr/components-library/styles.css'
-```
-
-### React Router
-
-Any component that uses `useNavigate()` or routing must be rendered inside a `Router` from `react-router-dom` (e.g. `BrowserRouter`). See [How to start – step 2](#2-wrap-your-app-with-a-router-if-you-use-routing).
-
----
-
-## Troubleshooting
-
-### "useNavigate() may be used only in the context of a \<Router\> component"
-
-Wrap your app with a Router:
-
-```jsx
-import { BrowserRouter } from 'react-router-dom'
-
-root.render(
-  <BrowserRouter>
-    <App />
-  </BrowserRouter>,
-)
-```
-
-Install the peer dependency: `npm install react-router-dom`
-
-### "Invalid hook call" / "Cannot read properties of null (reading 'use')"
-
-Your app and the library must use the **same** React instance.
-
-1. Install peer dependencies:  
-   `npm install react react-dom styled-components`
-
-2. **Vite apps** – add dedupe in `vite.config.js` or `vite.config.ts`:
-
-   ```js
-   export default defineConfig({
-     resolve: {
-       dedupe: ['react', 'react-dom', 'styled-components'],
-     },
-     // ...rest of config
-   })
-   ```
-
-3. Reinstall or refresh the library after updating (e.g. `npm install` or clear cache and reinstall).
-
----
-
-## Development & publishing
-
-### Run Storybook
-
-```bash
-npm run storybook
-```
-
-Use **Story Source** for consumption examples and **Viewport** for different screen sizes.
-
-### Build for distribution
-
-```bash
-npm run build:dist
-```
-
-This runs `vite build` and copies static assets to `dist/`.
-
-### Publish a new version
-
-1. Commit your changes.
-2. Update [CHANGELOG.md](CHANGELOG.md) – add a new `# vX.Y.Z` section at the top with the list of changes.
-3. Bump the version: `npm version <version>` (e.g. `npm version 3.0.7`).
-4. (ensure you are authenticated) Run `npm login` to log first on NPM package (only needed one time a day)
-5. Run `npm run pub` (will first run `npm run build:dist`).
-
-Consumers can see what changed in each release in [CHANGELOG.md](CHANGELOG.md).
-
-### Reference
-
-- [How to publish a React component library](https://medium.com/better-programming/how-to-publish-a-react-component-library-c89a07566770)
+# @stokr/components-library
+
+React component library for STOKR applications. Includes modals, forms, buttons, tables, and shared styles.
+
+## Table of contents
+
+- [Installation](#installation)
+- [How to start](#how-to-start)
+- [Configuration](#configuration)
+  - [Runtime config (npm consumers)](#runtime-config)
+  - [Ionicons](#ionicons)
+  - [React Router](#react-router)
+- [Troubleshooting](#troubleshooting)
+- [Development & publishing](#development--publishing)
+
+---
+
+## Installation
+
+```bash
+npm install @stokr/components-library
+```
+
+**Peer dependencies** (install in your app if not already present):
+
+```bash
+npm install react react-dom styled-components react-router-dom
+```
+
+- **React** 18 or 19
+- **styled-components** 6.x
+- **react-router-dom** 6.x (required if you use routing-dependent components)
+
+---
+
+## How to start
+
+### 1. Install the package and peers
+
+```bash
+npm install @stokr/components-library react react-dom styled-components react-router-dom
+```
+
+### 2. Wrap your app with a Router (if you use routing)
+
+Components that use navigation (e.g. `MainMenu`, `LearnMore`, `HeaderHo`) must live inside a React Router:
+
+```jsx
+// main.jsx or App.jsx
+import { BrowserRouter } from 'react-router-dom'
+import App from './App'
+
+root.render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
+)
+```
+
+### 3. (Optional) Add Ionicons for icons
+
+If you use **Modal**, **ConfirmModal**, **BackButton**, **Select**, **InfoIcon**, etc., add the icon styles once at the root:
+
+```jsx
+import { IoniconsStyles } from '@stokr/components-library'
+
+function App() {
+  return (
+    <>
+      <IoniconsStyles />
+      {/* your app */}
+    </>
+  )
+}
+```
+
+You can skip this; the library will inject icon styles when you first use a component that needs them.
+
+### 4. Import and use components
+
+```jsx
+import { ConfirmModal, Button } from '@stokr/components-library'
+
+function MyPage() {
+  const [open, setOpen] = useState(false)
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open</Button>
+      <ConfirmModal isOpen={open} onClose={() => setOpen(false)} onConfirm={() => {}} title="Confirm?" />
+    </>
+  )
+}
+```
+
+---
+
+## Configuration
+
+### Runtime config (required when consuming as npm package) {#runtime-config}
+
+Since v3.0.16, the library uses a **runtime config** system. When this package is consumed by an external Vite app, `import.meta.env` values are baked at **library build time** and do not reflect the consuming app's `.env` file. Pass a `config` prop to `<AuthProvider>` so API URLs, Firebase credentials, and cookie domain are resolved from **your** environment:
+
+```jsx
+import { AuthProvider } from '@stokr/components-library'
+
+function App() {
+  return (
+    <AuthProvider
+      config={{
+        apiUrl: import.meta.env.VITE_API_URL,
+        baseUrlPublic: import.meta.env.VITE_BASE_URL_PUBLIC,
+        cookieDomain: import.meta.env.VITE_COOKIE_DOMAIN,
+        websiteDomain: import.meta.env.VITE_WEBSITE_DOMAIN,
+        photoApiUrl: import.meta.env.VITE_PHOTO_API_URL,
+        firebase: {
+          apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
+          authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
+          projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
+          storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
+          messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
+          appId: import.meta.env.VITE_FIREBASE_APP_ID,
+          measurementId: import.meta.env.VITE_FIREBASE_MEASUREMENT_ID,
+        },
+      }}>
+      {/* your app */}
+    </AuthProvider>
+  )
+}
+```
+
+| Prop key        | Env variable it replaces | Purpose                            |
+| --------------- | ------------------------ | ---------------------------------- |
+| `apiUrl`        | `VITE_API_URL`           | Backend API base URL               |
+| `baseUrlPublic` | `VITE_BASE_URL_PUBLIC`   | Public (no-auth) API base URL      |
+| `cookieDomain`  | `VITE_COOKIE_DOMAIN`     | Domain attribute for auth cookies  |
+| `websiteDomain` | `VITE_WEBSITE_DOMAIN`    | Platform domain (redirects, links) |
+| `photoApiUrl`   | `VITE_PHOTO_API_URL`     | Photo upload / avatar API URL      |
+| `firebase`      | `VITE_FIREBASE_*`        | Full Firebase config object        |
+
+> **Why is this needed?** With the old CRA / `react-scripts` build, Webpack re-processed library code through the consuming app's build pipeline, so the app's `.env` values were injected automatically. Vite treats npm packages as pre-built — `import.meta.env` values in the compiled library are frozen at library build time. The `config` prop passes them at runtime instead.
+
+If you also need config values **before** `<AuthProvider>` mounts (e.g. for analytics init), you can call `configure()` directly:
+
+```js
+import { configure } from '@stokr/components-library'
+
+configure({
+  apiUrl: import.meta.env.VITE_API_URL,
+  cookieDomain: import.meta.env.VITE_COOKIE_DOMAIN,
+  // ...
+})
+```
+
+### Ionicons
+
+Components such as **Modal**, **ConfirmModal**, **BackButton**, **InfoIcon**, **Select**, **MainMenu**, and **RegisterLiquidSteps** use [Ionicons](http://ionicons.com/). You can enable them in three ways:
+
+| Approach             | When to use                                                                                                                   |
+| -------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| **Global injection** | Render `<IoniconsStyles />` once at app root. Full icon set, singleton.                                                       |
+| **No setup**         | Don’t render anything; styles inject on first use of an icon component.                                                       |
+| **CSS import**       | Prefer loading via CSS: `import '@stokr/components-library/styles.css'` or `import '@stokr/components-library/ionicons.css'`. |
+
+**Global injection example:**
+
+```jsx
+import { IoniconsStyles } from '@stokr/components-library'
+
+function App() {
+  return (
+    <>
+      <IoniconsStyles />
+      {/* your routes, layout, etc. */}
+    </>
+  )
+}
+```
+
+If you use **Layout**, **GlobalStyle**, or need **Open Sans**, import the full styles once:
+
+```js
+import '@stokr/components-library/styles.css'
+```
+
+### React Router
+
+Any component that uses `useNavigate()` or routing must be rendered inside a `Router` from `react-router-dom` (e.g. `BrowserRouter`). See [How to start – step 2](#2-wrap-your-app-with-a-router-if-you-use-routing).
+
+---
+
+## Troubleshooting
+
+### "useNavigate() may be used only in the context of a \<Router\> component"
+
+Wrap your app with a Router:
+
+```jsx
+import { BrowserRouter } from 'react-router-dom'
+
+root.render(
+  <BrowserRouter>
+    <App />
+  </BrowserRouter>,
+)
+```
+
+Install the peer dependency: `npm install react-router-dom`
+
+### "Invalid hook call" / "Cannot read properties of null (reading 'use')"
+
+Your app and the library must use the **same** React instance.
+
+1. Install peer dependencies:  
+   `npm install react react-dom styled-components`
+
+2. **Vite apps** – add dedupe in `vite.config.js` or `vite.config.ts`:
+
+   ```js
+   export default defineConfig({
+     resolve: {
+       dedupe: ['react', 'react-dom', 'styled-components'],
+     },
+     // ...rest of config
+   })
+   ```
+
+3. Reinstall or refresh the library after updating (e.g. `npm install` or clear cache and reinstall).
+
+---
+
+## Development & publishing
+
+### Run Storybook
+
+```bash
+npm run storybook
+```
+
+Use **Story Source** for consumption examples and **Viewport** for different screen sizes.
+
+### Build for distribution
+
+```bash
+npm run build:dist
+```
+
+This runs `vite build` and copies static assets to `dist/`.
+
+### Publish a new version
+
+1. Commit your changes.
+2. Update [CHANGELOG.md](CHANGELOG.md) – add a new `# vX.Y.Z` section at the top with the list of changes.
+3. Bump the version: `npm version <version>` (e.g. `npm version 3.0.7`).
+4. (ensure you are authenticated) Run `npm login` to log first on NPM package (only needed one time a day)
+5. Run `npm run pub` (will first run `npm run build:dist`).
+
+Consumers can see what changed in each release in [CHANGELOG.md](CHANGELOG.md).
+
+### Reference
+
+- [How to publish a React component library](https://medium.com/better-programming/how-to-publish-a-react-component-library-c89a07566770)

package/dist/auth/index.js

@@ -1,4 +1,4 @@
-import { A as o, a as e, b as t, c as n, s as A, D as r, d as i, e as u, f as F, L as d, g as h, h as l, i as g, S as C, j as L, k as E, l as S, m as c } from "../main-flow-CEV3qVYo.js";
+import { A as o, a as e, b as t, c as n, s as A, D as r, d as i, e as u, f as F, L as d, g as h, h as l, i as g, S as C, j as L, k as E, l as S, m as c } from "../main-flow-DZCI5ZeQ.js";
 export {
   o as Auth,
   e as AuthConsumer,

package/dist/index.js

@@ -2,8 +2,8 @@ import { jsxs as o, jsx as e, Fragment as j } from "react/jsx-runtime";
 import * as P from "react";
 import VA, { useRef as lA, useEffect as $, PureComponent as xA, useMemo as We, useId as rt, useState as O, useCallback as AA, Fragment as NA, createContext as it, useContext as DA, memo as Zn, Component as Nn } from "react";
 import V from "prop-types";
-import { I as hA, r as h, t as d, n as QA, o as nA, C as y, B as K, p as PA, T as R, q as qe, u as oV, v as u, w as Wn, W as de, x as qn, F as Y, y as wA, z as ot, E as Un, G as gA, H as Ct, R as oA, J as at, K as dA, M as st, N as lt, O as BA, P as rA, Q as CV, U as WA, V as Rn, b as ce, X as Ue, Y as jA, Z as iA, _ as Bt, $ as Hn, a0 as dt, a1 as Me, m as Kn, c as Fn, a2 as jn, a3 as Oe, a4 as ct, a5 as Qt, a6 as Le, a7 as N, a8 as Gn, a9 as Et, aa as Yn, ab as aV, ac as It, ad as pt, k as $n, ae as _n, af as Ag, ag as sV, ah as eg, ai as Vg, e as tg, i as ng, aj as gg, ak as rg, al as ig, am as og } from "./main-flow-CEV3qVYo.js";
-import { an as kQ, A as zQ, a as xQ, ao as DQ, ap as PQ, aq as SQ, ar as TQ, as as MQ, at as OQ, au as LQ, av as JQ, aw as XQ, ax as ZQ, ay as NQ, s as WQ, az as qQ, aA as UQ, D as RQ, aB as HQ, aC as KQ, d as FQ, aD as jQ, aE as GQ, aF as YQ, aG as $Q, aH as _Q, aI as AE, aJ as eE, aK as VE, aL as tE, aM as nE, aN as gE, aO as rE, aP as iE, aQ as oE, aR as CE, f as aE, aS as sE, aT as lE, aU as BE, L as dE, aV as cE, aW as QE, g as EE, aX as IE, h as pE, aY as uE, aZ as mE, a_ as fE, a$ as wE, b0 as hE, b1 as vE, b2 as bE, b3 as yE, b4 as kE, b5 as zE, b6 as xE, b7 as DE, b8 as PE, b9 as SE, ba as TE, bb as ME, bc as OE, bd as LE, be as JE, bf as XE, bg as ZE, bh as NE, bi as WE, bj as qE, bk as UE, bl as RE, bm as HE, bn as KE, bo as FE, S as jE, j as GE, bp as YE, bq as $E, br as _E, bs as AI, bt as eI, bu as VI, bv as tI, bw as nI, bx as gI, by as rI, l as iI, bz as oI, bA as CI, bB as aI, bC as sI, bD as lI, bE as BI, bF as dI, bG as cI, bH as QI, bI as EI, bJ as II, bK as pI, bL as uI, bM as mI, bN as fI, bO as wI, bP as hI, bQ as vI, bR as bI, bS as yI, bT as kI, bU as zI, bV as xI, bW as DI, bX as PI, bY as SI } from "./main-flow-CEV3qVYo.js";
+import { I as hA, r as h, t as d, n as QA, o as nA, C as y, B as K, p as PA, T as R, q as qe, u as oV, v as u, w as Wn, W as de, x as qn, F as Y, y as wA, z as ot, E as Un, G as gA, H as Ct, R as oA, J as at, K as dA, M as st, N as lt, O as BA, P as rA, Q as CV, U as WA, V as Rn, b as ce, X as Ue, Y as jA, Z as iA, _ as Bt, $ as Hn, a0 as dt, a1 as Me, m as Kn, c as Fn, a2 as jn, a3 as Oe, a4 as ct, a5 as Qt, a6 as Le, a7 as N, a8 as Gn, a9 as Et, aa as Yn, ab as aV, ac as It, ad as pt, k as $n, ae as _n, af as Ag, ag as sV, ah as eg, ai as Vg, e as tg, i as ng, aj as gg, ak as rg, al as ig, am as og } from "./main-flow-DZCI5ZeQ.js";
+import { an as kQ, A as zQ, a as xQ, ao as DQ, ap as PQ, aq as SQ, ar as TQ, as as MQ, at as OQ, au as LQ, av as JQ, aw as XQ, ax as ZQ, ay as NQ, s as WQ, az as qQ, aA as UQ, D as RQ, aB as HQ, aC as KQ, d as FQ, aD as jQ, aE as GQ, aF as YQ, aG as $Q, aH as _Q, aI as AE, aJ as eE, aK as VE, aL as tE, aM as nE, aN as gE, aO as rE, aP as iE, aQ as oE, aR as CE, f as aE, aS as sE, aT as lE, aU as BE, L as dE, aV as cE, aW as QE, g as EE, aX as IE, h as pE, aY as uE, aZ as mE, a_ as fE, a$ as wE, b0 as hE, b1 as vE, b2 as bE, b3 as yE, b4 as kE, b5 as zE, b6 as xE, b7 as DE, b8 as PE, b9 as SE, ba as TE, bb as ME, bc as OE, bd as LE, be as JE, bf as XE, bg as ZE, bh as NE, bi as WE, bj as qE, bk as UE, bl as RE, bm as HE, bn as KE, bo as FE, S as jE, j as GE, bp as YE, bq as $E, br as _E, bs as AI, bt as eI, bu as VI, bv as tI, bw as nI, bx as gI, by as rI, l as iI, bz as oI, bA as CI, bB as aI, bC as sI, bD as lI, bE as BI, bF as dI, bG as cI, bH as QI, bI as EI, bJ as II, bK as pI, bL as uI, bM as mI, bN as fI, bO as wI, bP as hI, bQ as vI, bR as bI, bS as yI, bT as kI, bU as zI, bV as xI, bW as DI, bX as PI, bY as SI } from "./main-flow-DZCI5ZeQ.js";
 import n, { css as v, styled as Cg, keyframes as SA } from "styled-components";
 import { Scrollbars as ag } from "react-custom-scrollbars-2";
 import { useTable as sg, useExpanded as lg, usePagination as Bg } from "react-table";