@alexandregme/zljs 1.17.0 → 1.18.0

package/CHANGELOG.md

@@ -8,6 +8,34 @@ A change that needs action in an app has a **Migration** note. When updating, re
 
 ## [Unreleased]
 
+## [1.18.0] - 2026-11-02
+
+### Added
+
+- `AppProviders` in `@alexandregme/zljs/next`: the app's global configuration, with the Redux store, `Loader`, `Toaster` and the route in `useRouterStore`. It takes `children`, `reducers`, `coreReducers`, `middlewares` and `preloadedState`
+- `PageConfig` in `@alexandregme/zljs/next`: a feature's state configuration, with `title`, `reducers` and `initPage`. It renders only its children
+
+### Changed
+
+- `ReduxProvider` creates a store per mount. It was a single store in the module, which on the server was shared between requests. Props changed after the first render no longer change the reducers. A page's reducers still change with `setDynamicReducers`, which is now required on `ReduxStore`
+- `InitPageFunction` moved to `@alexandregme/zljs/next`. Its `dispatch` accepts thunks
+
+### Removed
+
+- `AppWrapper` and `AppWrapperProps`. The route it synced never ran on the App Router, because `next/compat/router` returns `null` there
+- `PageWrapper` and `PageWrapperProps`
+- `DocumentWrapper` and `DocumentWrapperProps`
+- `next-auth` from the peer dependencies. An app that uses it keeps it in its own `package.json`
+
+#### Migration
+
+Search the app for `AppWrapper`, `PageWrapper`, `InitPageFunction` and `DocumentWrapper` imported from `@alexandregme/zljs`. A local component with the same name, as in `ruralissima-diagnostico`, stays.
+
+- `AppWrapper`: use `AppProviders` from `@alexandregme/zljs/next`, with the same `reducers`, `middlewares` and `coreReducers`, in a `'use client'` file of the app, because a Server Component can't pass a function. An app that used the session adds `SessionProvider` from `next-auth/react` around it, and installs `next-auth` if it isn't in its `package.json`
+- `PageWrapper`: use `PageConfig` from `@alexandregme/zljs/next`, with the same `title`, `reducers` and `initPage`, and start the file that renders it with `'use client'`
+- `InitPageFunction`: import it from `@alexandregme/zljs/next`
+- `DocumentWrapper`: write `<html lang="…">` and `<body>` directly in `app/layout.tsx`
+
 ## [1.17.0] - 2026-11-02
 
 ### Added
@@ -221,7 +249,8 @@ Replace the shade with the class of the `color` being tested, for example `/(^|\
 
 The message of `Error` is `text-zl-danger`. `none` and `ghost` didn't change.
 
-[Unreleased]: https://github.com/alexandregme/zljs/compare/v1.17.0...HEAD
+[Unreleased]: https://github.com/alexandregme/zljs/compare/v1.18.0...HEAD
+[1.18.0]: https://github.com/alexandregme/zljs/compare/v1.17.0...v1.18.0
 [1.17.0]: https://github.com/alexandregme/zljs/compare/v1.16.0...v1.17.0
 [1.16.0]: https://github.com/alexandregme/zljs/compare/v1.15.0...v1.16.0
 [1.15.0]: https://github.com/alexandregme/zljs/compare/v1.14.0...v1.15.0

package/README.md

@@ -25,7 +25,7 @@ Checked items exist today; unchecked items are planned, not implemented.
 pnpm add @alexandregme/zljs
 ```
 
-Peer dependencies: `react@19`, `react-dom@19`, `next@>=16`, `next-auth@4`, `@reduxjs/toolkit@2`, `react-redux@9`.
+Peer dependencies: `react@19`, `react-dom@19`, `next@>=16`, `@reduxjs/toolkit@2`, `react-redux@9`.
 
 Import the global styles once (e.g. in your root layout). It already tells Tailwind CSS v4 to scan the library classes, so no `@source` is needed:
 

package/dist/chunk-BYW2ZJKS.js

@@ -0,0 +1,366 @@
+"use client";
+
+// core/icon/icon.tsx
+import * as LucideIcons from "lucide-react";
+
+// core/icon/icon.const.ts
+import { SiWhatsapp, SiFacebook, SiInstagram, SiShopify } from "react-icons/si";
+var iconBrands = {
+  SiWhatsapp,
+  SiFacebook,
+  SiInstagram,
+  SiShopify
+};
+var iconSizes = {
+  sm: 12,
+  md: 16,
+  lg: 24
+};
+
+// core/icon/icon.styles.ts
+import { tv } from "tailwind-variants";
+
+// core/types/colors/colors.const.ts
+var semanticTextColors = {
+  primary: "text-zl-primary",
+  success: "text-zl-success",
+  danger: "text-zl-danger",
+  warning: "text-zl-warning",
+  info: "text-zl-info",
+  muted: "text-zl-muted",
+  none: ""
+};
+
+// core/icon/icon.styles.ts
+var icon = tv({
+  variants: {
+    color: semanticTextColors
+  }
+});
+
+// core/icon/icon.tsx
+import { Fragment, jsx } from "react/jsx-runtime";
+var Icon = ({
+  name,
+  size = "md",
+  color,
+  "aria-label": ariaLabel
+}) => {
+  const isBrand = name.startsWith("Si");
+  const IconComponent = isBrand ? iconBrands[name] : LucideIcons[name];
+  if (!IconComponent) return /* @__PURE__ */ jsx(Fragment, {});
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-testid": name,
+      className: icon({ color }),
+      role: ariaLabel ? "img" : void 0,
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsx(IconComponent, { size: iconSizes[size], "aria-hidden": "true" })
+    }
+  );
+};
+
+// core/text/text.styles.ts
+import { tv as tv2 } from "tailwind-variants";
+var text = tv2({
+  variants: {
+    variant: {
+      body: "text-base",
+      caption: "text-sm",
+      display: "text-3xl font-bold"
+    },
+    color: semanticTextColors
+  },
+  defaultVariants: {
+    variant: "body"
+  }
+});
+
+// core/text/text.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Text = ({
+  children,
+  as: Tag = "p",
+  variant = "body",
+  color
+}) => {
+  return /* @__PURE__ */ jsx2(Tag, { "data-testid": "text", className: text({ variant, color }), children });
+};
+
+// core/heading/heading.const.ts
+var headingTags = {
+  1: "h1",
+  2: "h2",
+  3: "h3",
+  4: "h4",
+  5: "h5",
+  6: "h6"
+};
+
+// core/heading/heading.styles.ts
+import { tv as tv3 } from "tailwind-variants";
+var heading = tv3({
+  variants: {
+    level: {
+      1: "text-3xl font-bold",
+      2: "text-2xl font-bold",
+      3: "text-xl font-semibold",
+      4: "text-lg font-semibold",
+      5: "text-base font-medium",
+      6: "text-sm font-medium"
+    },
+    color: semanticTextColors
+  },
+  defaultVariants: {
+    level: 1
+  }
+});
+
+// core/heading/heading.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Heading = ({ children, level = 1, color }) => {
+  const Tag = headingTags[level];
+  return /* @__PURE__ */ jsx3(Tag, { className: heading({ level, color }), children });
+};
+
+// core/state/toast/toast.store.ts
+import { create } from "zustand";
+import { devtools } from "zustand/middleware";
+var toastId = 0;
+var useToastStore = create()(
+  devtools(
+    (set, get) => ({
+      toasts: [],
+      addToast: (message, type = "error") => {
+        const id = ++toastId;
+        set(
+          (s) => ({ toasts: [...s.toasts, { id, message, type }] }),
+          false,
+          "addToast"
+        );
+        return id;
+      },
+      removeToast: (id) => set(
+        (s) => ({ toasts: s.toasts.filter((t) => t.id !== id) }),
+        false,
+        "removeToast"
+      ),
+      success: (message) => get().addToast(message, "success"),
+      error: (message) => get().addToast(message, "error"),
+      info: (message) => get().addToast(message, "info"),
+      warning: (message) => get().addToast(message, "warning")
+    }),
+    { name: "zljs", store: "toast" }
+  )
+);
+
+// core/toaster/toaster.tsx
+import { useEffect } from "react";
+import { Toaster as SonnerToaster, toast } from "sonner";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Toaster = () => {
+  const toasts = useToastStore((s) => s.toasts);
+  const removeToast = useToastStore((s) => s.removeToast);
+  useEffect(() => {
+    toasts.forEach((t) => {
+      toast[t.type](t.message, {
+        id: t.id,
+        onDismiss: () => removeToast(t.id)
+      });
+      removeToast(t.id);
+    });
+  }, [toasts, removeToast]);
+  return /* @__PURE__ */ jsx4(
+    SonnerToaster,
+    {
+      position: "bottom-right",
+      richColors: true,
+      closeButton: true,
+      duration: 4e3,
+      expand: true,
+      visibleToasts: 5
+    }
+  );
+};
+
+// core/toaster/index.ts
+import { toast as toast2 } from "sonner";
+
+// core/state/app/app.store.ts
+import { create as create2 } from "zustand";
+import { devtools as devtools2 } from "zustand/middleware";
+var useAppStore = create2()(
+  devtools2(
+    (set) => ({
+      fetchingCalls: 0,
+      fetching: false,
+      startFetching: () => set(
+        (s) => {
+          const fetchingCalls = s.fetchingCalls + 1;
+          return { fetchingCalls, fetching: true };
+        },
+        false,
+        "startFetching"
+      ),
+      finishFetching: () => set(
+        (s) => {
+          const fetchingCalls = Math.max(0, s.fetchingCalls - 1);
+          return { fetchingCalls, fetching: fetchingCalls > 0 };
+        },
+        false,
+        "finishFetching"
+      )
+    }),
+    { name: "zljs", store: "app" }
+  )
+);
+
+// core/redux/redux-provider/redux-provider.tsx
+import { useState } from "react";
+import { Provider } from "react-redux";
+
+// core/redux/store/store.ts
+import {
+  combineReducers,
+  configureStore
+} from "@reduxjs/toolkit";
+var createReduxStore = ({
+  reducers,
+  middlewares,
+  preloadedState,
+  coreReducers
+}) => {
+  let dynamicReducers = {};
+  const createReducer = () => combineReducers({
+    ...dynamicReducers,
+    ...reducers,
+    ...coreReducers
+  });
+  const store = configureStore({
+    reducer: createReducer(),
+    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(middlewares),
+    preloadedState
+  });
+  store.setDynamicReducers = (newDynamicReducers = {}) => {
+    dynamicReducers = newDynamicReducers;
+    store.replaceReducer(createReducer());
+  };
+  return store;
+};
+
+// core/redux/redux-provider/redux-provider.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var ReduxProvider = ({
+  children,
+  reducers = {},
+  middlewares = [],
+  preloadedState = {},
+  coreReducers = {}
+}) => {
+  const [store] = useState(
+    () => createReduxStore({
+      reducers,
+      middlewares,
+      preloadedState,
+      coreReducers
+    })
+  );
+  return /* @__PURE__ */ jsx5(Provider, { store, children });
+};
+
+// core/state/router/router.utils.ts
+var splitURLasPath = (urlAsPath) => {
+  let queryWithoutPath = "";
+  if (urlAsPath?.indexOf("?") >= 0) {
+    const [, query] = urlAsPath.split("?");
+    queryWithoutPath = query ?? "";
+  }
+  if (urlAsPath?.indexOf("#") >= 0) {
+    const [, query] = urlAsPath.split("#");
+    queryWithoutPath = query ?? "";
+  }
+  const parametersAsObject = {};
+  if (queryWithoutPath.length > 0) {
+    queryWithoutPath.split("&").forEach((p) => {
+      const [parameter, value] = p.split("=");
+      if (parameter) {
+        parametersAsObject[parameter] = value ?? "";
+      }
+    });
+  }
+  return parametersAsObject;
+};
+
+// core/state/router/router.store.ts
+import { create as create3 } from "zustand";
+import { devtools as devtools3 } from "zustand/middleware";
+var useRouterStore = create3()(
+  devtools3(
+    (set) => ({
+      urlAsPath: "/",
+      query: {},
+      setRoute: (urlAsPath) => set({ urlAsPath, query: splitURLasPath(urlAsPath) }, false, "setRoute")
+    }),
+    { name: "zljs", store: "router" }
+  )
+);
+
+// core/state/page/page.store.ts
+import { create as create4 } from "zustand";
+import { devtools as devtools4 } from "zustand/middleware";
+var usePageStore = create4()(
+  devtools4(
+    (set) => ({
+      title: "",
+      setTitle: (title) => set({ title }, false, "setTitle")
+    }),
+    { name: "zljs", store: "page" }
+  )
+);
+
+// core/spinner/spinner.const.ts
+var spinnerIcons = {
+  circle: "LoaderCircle",
+  dots: "Loader",
+  refresh: "RefreshCw"
+};
+
+// core/spinner/spinner.styles.ts
+import { tv as tv4 } from "tailwind-variants";
+var spinner = tv4({
+  base: "inline-flex animate-spin text-white"
+});
+
+// core/spinner/spinner.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Spinner = ({ variant = "circle", size = "md" }) => /* @__PURE__ */ jsx6("span", { "data-testid": "spinner", className: spinner(), children: /* @__PURE__ */ jsx6(Icon, { name: spinnerIcons[variant], size }) });
+
+// core/loader/loader.styles.ts
+import { tv as tv5 } from "tailwind-variants";
+var overlay = tv5({
+  base: "flex fixed justify-center items-center w-full h-full bg-black/20 z-50"
+});
+
+// core/loader/loader.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var Loader = ({ label = "Loading" }) => {
+  const fetching = useAppStore((s) => s.fetching);
+  if (!fetching) return null;
+  return /* @__PURE__ */ jsx7("div", { role: "status", "aria-label": label, className: overlay(), children: /* @__PURE__ */ jsx7(Spinner, { size: "lg" }) });
+};
+
+export {
+  Icon,
+  Text,
+  Heading,
+  useToastStore,
+  Toaster,
+  useAppStore,
+  ReduxProvider,
+  splitURLasPath,
+  useRouterStore,
+  usePageStore,
+  Spinner,
+  Loader
+};

package/dist/index.d.ts

@@ -1,10 +1,10 @@
 import * as react from 'react';
 import { ReactNode, ChangeEvent, FormEvent, HTMLInputAutoCompleteAttribute, FocusEvent, KeyboardEvent, Ref } from 'react';
-import { S as SemanticColor, D as DataColor } from './colors-CvgrDPVc.js';
+import { S as SemanticColor, D as DataColor, R as ReduxProviderProps } from './redux-provider.interface-BmROR8Ev.js';
 export { FormInput, FormInputProps, FormProvider, FormProviderProps } from './rhf/index.js';
 export { toast } from 'sonner';
 import * as zustand from 'zustand';
-import { Reducer, Middleware, Store, Dispatch } from '@reduxjs/toolkit';
+import { Store, Reducer } from '@reduxjs/toolkit';
 import 'react-hook-form';
 
 /**
@@ -362,18 +362,10 @@ declare const useModalStore: zustand.UseBoundStore<Omit<zustand.StoreApi<ModalSt
     };
 }>;
 
-interface ReduxProviderProps {
-    children: ReactNode;
-    reducers?: Record<string, Reducer>;
-    middlewares?: Middleware[];
-    preloadedState?: Record<string, unknown>;
-    coreReducers?: Record<string, Reducer>;
-}
-
 declare const ReduxProvider: ({ children, reducers, middlewares, preloadedState, coreReducers, }: ReduxProviderProps) => react.JSX.Element;
 
 interface ReduxStore extends Store {
-    setDynamicReducers?: (reducers: Record<string, Reducer>) => void;
+    setDynamicReducers: (reducers: Record<string, Reducer>) => void;
 }
 
 interface RouterState {
@@ -425,16 +417,6 @@ declare const usePageStore: zustand.UseBoundStore<Omit<zustand.StoreApi<PageStat
     };
 }>;
 
-type InitPageFunction = (dispatch: Dispatch) => void;
-interface PageWrapperProps {
-    title: string;
-    children?: ReactNode;
-    reducers?: Record<string, Reducer>;
-    initPage?: InitPageFunction;
-}
-
-declare const PageWrapper: ({ reducers, title, initPage, children, }: PageWrapperProps) => react.JSX.Element;
-
 interface ConnectedModalProps {
     modalId: string;
     title: string;
@@ -459,23 +441,6 @@ interface LoaderProps {
 
 declare const Loader: ({ label }: LoaderProps) => react.JSX.Element | null;
 
-interface AppWrapperProps {
-    children: ReactNode;
-    reducers?: Record<string, Reducer>;
-    middlewares?: Middleware[];
-    coreReducers?: Record<string, Reducer>;
-}
-
-declare const AppWrapper: ({ children, reducers, middlewares, coreReducers, }: AppWrapperProps) => react.JSX.Element;
-
-interface DocumentWrapperProps {
-    children: ReactNode;
-    lang?: string;
-    className?: string;
-}
-
-declare const DocumentWrapper: ({ children, lang, className, }: DocumentWrapperProps) => react.JSX.Element;
-
 interface HttpClientConfig {
     baseUrl?: string;
     headers?: Record<string, string>;
@@ -499,5 +464,5 @@ declare class HTTPClient {
     patch<T = unknown>(url: string, config?: HttpRequestConfig): Promise<T | undefined>;
 }
 
-export { AppWrapper, Button, Checkbox, ConnectedModal, DataColor, DataGrid, DocumentWrapper, Error, Form, HTTPClient, Heading, Icon, Input, Loader, Modal, PageWrapper, Radio, ReduxProvider, Select, SemanticColor, Sidebar, Spinner, StatsCard, Tag, Text, TextArea, Toaster, WhatsAppButton, splitURLasPath, useAppStore, useModalStore, usePageStore, useRouterStore, useToastStore };
-export type { AppState, AppWrapperProps, ButtonColor, ButtonProps, ButtonVariant, CheckboxProps, CheckboxVariant, ConnectedModalProps, DataGridColumn, DataGridProps, DocumentWrapperProps, ErrorProps, FormProps, HeadingProps, HttpClientConfig, HttpRequestConfig, IconName, IconProps, InitPageFunction, InputProps, LoaderProps, ModalEntry, ModalProps, ModalState, PageState, PageWrapperProps, RadioProps, ReduxProviderProps, ReduxStore, RouterState, SelectOption, SelectProps, SidebarItem, SidebarProps, SidebarSection, SidebarUser, Size, SpinnerProps, SpinnerVariant, StatsCardProps, TagProps, TextAreaProps, TextProps, TextVariant, Toast, ToastState, ToastType, WhatsAppButtonProps };
+export { Button, Checkbox, ConnectedModal, DataColor, DataGrid, Error, Form, HTTPClient, Heading, Icon, Input, Loader, Modal, Radio, ReduxProvider, ReduxProviderProps, Select, SemanticColor, Sidebar, Spinner, StatsCard, Tag, Text, TextArea, Toaster, WhatsAppButton, splitURLasPath, useAppStore, useModalStore, usePageStore, useRouterStore, useToastStore };
+export type { AppState, ButtonColor, ButtonProps, ButtonVariant, CheckboxProps, CheckboxVariant, ConnectedModalProps, DataGridColumn, DataGridProps, ErrorProps, FormProps, HeadingProps, HttpClientConfig, HttpRequestConfig, IconName, IconProps, InputProps, LoaderProps, ModalEntry, ModalProps, ModalState, PageState, RadioProps, ReduxStore, RouterState, SelectOption, SelectProps, SidebarItem, SidebarProps, SidebarSection, SidebarUser, Size, SpinnerProps, SpinnerVariant, StatsCardProps, TagProps, TextAreaProps, TextProps, TextVariant, Toast, ToastState, ToastType, WhatsAppButtonProps };