techsbcn-storybook 2.0.2 → 2.0.4

package/README.md

@@ -1,140 +1,140 @@
-# techsbcn-storybook
-
-A React component library built by [TechsBCN](https://techsbcn.com) on top of Material UI. It provides a set of ready-to-use components — form fields, tables, layouts, navigation, modals and wrappers — designed to be consumed across internal projects with a consistent look and feel.
-
-Components are developed and documented in [Storybook](https://storybook.js.org/) and shipped as an npm package.
-
-## Requirements
-
-- **Node.js** `>= 18`
-- **React** `>= 18` (declared as a peer dependency)
-- **Yarn** (the repository is pinned to Yarn 4 via `packageManager`)
-
-## Installation
-
-```bash
-yarn add techsbcn-storybook
-```
-
-or
-
-```bash
-npm install techsbcn-storybook
-```
-
-Because MUI, Emotion, React Hook Form, Yup, i18next, dayjs and Font Awesome are runtime dependencies of this library, they are installed automatically.
-
-## Usage
-
-Import components directly from the package root:
-
-```tsx
-import { TextFieldComponent, ButtonComponent, TableComponent } from 'techsbcn-storybook';
-
-export const Example = () => (
-  <>
-    <TextFieldComponent name="email" label="Email" />
-    <ButtonComponent onClick={() => console.log('clicked')}>Send</ButtonComponent>
-  </>
-);
-```
-
-### Available component groups
-
-| Group | Components |
-| --- | --- |
-| **Fields** | `ButtonComponent`, `TextFieldComponent`, `TextSimpleComponent`, `SelectField`, `SelectAsyncField`, `DatePickerComponent` |
-| **Forms** | `LoginForm`, `ChangePasswordForm`, `ResetPasswordForm` |
-| **Tables** | `TableComponent`, `SimpleTableComponent`, `SearchComponent` |
-| **Layouts** | `MainLayoutSimple`, `AppHeader`, `AppSidebar`, `DrawerSidebar` |
-| **Navigation** | `VerticalNav`, `UserInfo` |
-| **Modals** | `ModalComponent` |
-| **Wrappers** | `MainWrapperComponent`, `PublicFormWrapper`, `TabsComponent`, `LinearProgressComponent`, `CardComponent` |
-
-See the Storybook documentation for the full API of each component.
-
-## Development
-
-### Getting started
-
-```bash
-yarn install
-yarn storybook
-```
-
-Storybook runs on [http://localhost:6006](http://localhost:6006) and hot-reloads on changes inside `src/`.
-
-### Project structure
-
-```txt
-src/
-  components/       # Library source — grouped by category
-    fields/
-    forms/
-    layouts/
-    modals/
-    navigation/
-    tables/
-    wrappers/
-  content/          # Static assets (images, icons) used by stories
-  data/             # Mock data and enums used only by stories
-  helpers/          # Shared utilities and hooks
-  interfaces/       # Shared TypeScript interfaces
-  stories/          # Storybook stories
-  i18n.tsx          # Storybook-only i18n bootstrap
-  index.tsx         # Public entry point (barrel of every exported component)
-.storybook/         # Storybook configuration
-tsup.config.ts      # Build configuration (JS bundles)
-tsconfig.build.json # Build configuration (type declarations)
-```
-
-Only files under `src/components/` are shipped in the published package. Stories, mock data and the Storybook i18n bootstrap are excluded from the build.
-
-### Scripts
-
-| Script | Description |
-| --- | --- |
-| `yarn start` | Runs `tsup` in watch mode (rebuilds `dist/` on every change) |
-| `yarn build` | Produces the distributable output in `dist/`: CJS + ESM bundles, sourcemaps and type declarations |
-| `yarn storybook` | Starts Storybook in development mode |
-| `yarn build-storybook` | Builds the static Storybook site |
-| `yarn lint` | Runs ESLint with autofix over the codebase |
-| `yarn test` | Runs the Jest test suite |
-| `yarn size` | Reports the bundle size using [size-limit](https://github.com/ai/size-limit) |
-| `yarn analyze` | Opens the size-limit visual report |
-
-## Build pipeline
-
-The library is built in three steps, wired together in the `build` script:
-
-1. **`tsup`** bundles `src/index.tsx` into CommonJS (`dist/index.js`) and ES Modules (`dist/index.mjs`) using esbuild, with SCSS compiled through `esbuild-sass-plugin` and static assets (SVG/PNG) emitted as separate files.
-2. **`tsc -p tsconfig.build.json`** emits `.d.ts` declarations for the public API, excluding stories, tests, mock data and the Storybook i18n bootstrap.
-3. **`node strip-asset-imports-dts.mjs`** post-processes the emitted declarations to remove side-effect imports of `.scss`, `.css`, `.svg` and `.png` files, so consumers do not need loaders for those assets.
-
-## Tech stack
-
-- **UI**: React 19, Material UI 9, Emotion, Font Awesome 7
-- **Forms & validation**: React Hook Form 7, Yup 1, `@hookform/resolvers`
-- **Dates**: `@mui/x-date-pickers`, `dayjs`
-- **i18n**: `i18next`, `react-i18next`, `i18next-browser-languagedetector`
-- **Routing (form components)**: `react-router` 8
-- **Language & tooling**: TypeScript 6, ESLint 9 (flat config), Prettier 3, Jest 30, Storybook 10, tsup 8
-
-## Publishing
-
-The package is published to npm with only the `dist/` folder included (whitelisted through the `files` field in `package.json`). Before publishing, you can preview the tarball contents with:
-
-```bash
-npm pack --dry-run
-```
-
-To publish a new version:
-
-```bash
-yarn build
-yarn npm publish
-```
-
-## License
-
-[MIT](./LICENSE) © TechsBCN
+# techsbcn-storybook
+
+A React component library built by [TechsBCN](https://techsbcn.com) on top of Material UI. It provides a set of ready-to-use components — form fields, tables, layouts, navigation, modals and wrappers — designed to be consumed across internal projects with a consistent look and feel.
+
+Components are developed and documented in [Storybook](https://storybook.js.org/) and shipped as an npm package.
+
+## Requirements
+
+- **Node.js** `>= 18`
+- **React** `>= 18` (declared as a peer dependency)
+- **Yarn** (the repository is pinned to Yarn 4 via `packageManager`)
+
+## Installation
+
+```bash
+yarn add techsbcn-storybook
+```
+
+or
+
+```bash
+npm install techsbcn-storybook
+```
+
+Because MUI, Emotion, React Hook Form, Yup, i18next, dayjs and Font Awesome are runtime dependencies of this library, they are installed automatically.
+
+## Usage
+
+Import components directly from the package root:
+
+```tsx
+import { TextFieldComponent, ButtonComponent, TableComponent } from 'techsbcn-storybook';
+
+export const Example = () => (
+  <>
+    <TextFieldComponent name="email" label="Email" />
+    <ButtonComponent onClick={() => console.log('clicked')}>Send</ButtonComponent>
+  </>
+);
+```
+
+### Available component groups
+
+| Group | Components |
+| --- | --- |
+| **Fields** | `ButtonComponent`, `TextFieldComponent`, `TextSimpleComponent`, `SelectField`, `SelectAsyncField`, `DatePickerComponent` |
+| **Forms** | `LoginForm`, `ChangePasswordForm`, `ResetPasswordForm` |
+| **Tables** | `TableComponent`, `SimpleTableComponent`, `SearchComponent` |
+| **Layouts** | `MainLayoutSimple`, `AppHeader`, `AppSidebar`, `DrawerSidebar` |
+| **Navigation** | `VerticalNav`, `UserInfo` |
+| **Modals** | `ModalComponent` |
+| **Wrappers** | `MainWrapperComponent`, `PublicFormWrapper`, `TabsComponent`, `LinearProgressComponent`, `CardComponent` |
+
+See the Storybook documentation for the full API of each component.
+
+## Development
+
+### Getting started
+
+```bash
+yarn install
+yarn storybook
+```
+
+Storybook runs on [http://localhost:6006](http://localhost:6006) and hot-reloads on changes inside `src/`.
+
+### Project structure
+
+```txt
+src/
+  components/       # Library source — grouped by category
+    fields/
+    forms/
+    layouts/
+    modals/
+    navigation/
+    tables/
+    wrappers/
+  content/          # Static assets (images, icons) used by stories
+  data/             # Mock data and enums used only by stories
+  helpers/          # Shared utilities and hooks
+  interfaces/       # Shared TypeScript interfaces
+  stories/          # Storybook stories
+  i18n.tsx          # Storybook-only i18n bootstrap
+  index.tsx         # Public entry point (barrel of every exported component)
+.storybook/         # Storybook configuration
+tsup.config.ts      # Build configuration (JS bundles)
+tsconfig.build.json # Build configuration (type declarations)
+```
+
+Only files under `src/components/` are shipped in the published package. Stories, mock data and the Storybook i18n bootstrap are excluded from the build.
+
+### Scripts
+
+| Script | Description |
+| --- | --- |
+| `yarn start` | Runs `tsup` in watch mode (rebuilds `dist/` on every change) |
+| `yarn build` | Produces the distributable output in `dist/`: CJS + ESM bundles, sourcemaps and type declarations |
+| `yarn storybook` | Starts Storybook in development mode |
+| `yarn build-storybook` | Builds the static Storybook site |
+| `yarn lint` | Runs ESLint with autofix over the codebase |
+| `yarn test` | Runs the Jest test suite |
+| `yarn size` | Reports the bundle size using [size-limit](https://github.com/ai/size-limit) |
+| `yarn analyze` | Opens the size-limit visual report |
+
+## Build pipeline
+
+The library is built in three steps, wired together in the `build` script:
+
+1. **`tsup`** bundles `src/index.tsx` into CommonJS (`dist/index.js`) and ES Modules (`dist/index.mjs`) using esbuild, with SCSS compiled through `esbuild-sass-plugin` and static assets (SVG/PNG) emitted as separate files.
+2. **`tsc -p tsconfig.build.json`** emits `.d.ts` declarations for the public API, excluding stories, tests, mock data and the Storybook i18n bootstrap.
+3. **`node strip-asset-imports-dts.mjs`** post-processes the emitted declarations to remove side-effect imports of `.scss`, `.css`, `.svg` and `.png` files, so consumers do not need loaders for those assets.
+
+## Tech stack
+
+- **UI**: React 19, Material UI 9, Emotion, Font Awesome 7
+- **Forms & validation**: React Hook Form 7, Yup 1, `@hookform/resolvers`
+- **Dates**: `@mui/x-date-pickers`, `dayjs`
+- **i18n**: `i18next`, `react-i18next`, `i18next-browser-languagedetector`
+- **Routing (form components)**: `react-router` 8
+- **Language & tooling**: TypeScript 6, ESLint 9 (flat config), Prettier 3, Jest 30, Storybook 10, tsup 8
+
+## Publishing
+
+The package is published to npm with only the `dist/` folder included (whitelisted through the `files` field in `package.json`). Before publishing, you can preview the tarball contents with:
+
+```bash
+npm pack --dry-run
+```
+
+To publish a new version:
+
+```bash
+yarn build
+yarn npm publish
+```
+
+## License
+
+[MIT](./LICENSE) © TechsBCN

package/dist/helpers/AuthHelper.d.ts

@@ -0,0 +1,7 @@
+export interface Session {
+    nameidentifier: string;
+    role: string[];
+}
+export declare const getSession: () => Session | null;
+export declare const saveSession: (jwt: string) => void;
+export declare const clearSession: () => void;

package/dist/helpers/index.d.ts

@@ -1,3 +1,4 @@
+export * from './AuthHelper';
 export * from './CheckPermission';
 export * from './GroupBy';
 export * from './FileDownloader';

package/dist/index.d.ts

@@ -23,3 +23,4 @@ export * from './components/wrappers/TabsComponent/TabsComponent';
 export * from './components/wrappers/LinearProgressComponent/LinearProgressComponent';
 export * from './components/fields/DatePickerComponent/DatePickerComponent';
 export * from './components/wrappers/CardComponent/CardComponent';
+export * from './helpers/index';

package/dist/index.js

@@ -594,6 +594,51 @@ var TextFieldComponent = ({
   ));
 };
 
+// src/helpers/AuthHelper.tsx
+var AUTH_COOKIE_NAME = "auth_token";
+var NAME_IDENTIFIER_CLAIM = "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/nameidentifier";
+var ROLE_CLAIM = "http://schemas.microsoft.com/ws/2008/06/identity/claims/role";
+var getCookie = (name) => {
+  if (typeof document === "undefined") return null;
+  const cookie = document.cookie.split("; ").find((c) => c.startsWith(`${name}=`));
+  return cookie ? decodeURIComponent(cookie.substring(name.length + 1)) : null;
+};
+var decodeJwtPayload = (jwt) => {
+  try {
+    const payload = jwt.split(".")[1];
+    if (!payload) return null;
+    const base64 = payload.replace(/-/g, "+").replace(/_/g, "/").padEnd(Math.ceil(payload.length / 4) * 4, "=");
+    const binary = window.atob(base64);
+    const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0));
+    return JSON.parse(new TextDecoder().decode(bytes));
+  } catch {
+    return null;
+  }
+};
+var getSession = () => {
+  const jwt = getCookie(AUTH_COOKIE_NAME);
+  if (!jwt) return null;
+  const payload = decodeJwtPayload(jwt);
+  if (!payload) return null;
+  if (typeof payload.exp === "number" && payload.exp * 1e3 <= Date.now()) return null;
+  const roles = payload[ROLE_CLAIM];
+  return {
+    nameidentifier: payload[NAME_IDENTIFIER_CLAIM],
+    role: roles === void 0 || roles === null ? [] : Array.isArray(roles) ? roles : [roles]
+  };
+};
+var saveSession = (jwt) => {
+  if (typeof document === "undefined") return;
+  const payload = decodeJwtPayload(jwt);
+  const expires = typeof payload?.exp === "number" ? `; expires=${new Date(payload.exp * 1e3).toUTCString()}` : "";
+  const secure = window.location.protocol === "https:" ? "; Secure" : "";
+  document.cookie = `${AUTH_COOKIE_NAME}=${encodeURIComponent(jwt)}${expires}; path=/; SameSite=Lax${secure}`;
+};
+var clearSession = () => {
+  if (typeof document === "undefined") return;
+  document.cookie = `${AUTH_COOKIE_NAME}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/; SameSite=Lax`;
+};
+
 // src/helpers/CheckPermission.tsx
 var checkPermission = (persmisionAvailable, userRoles) => {
   if (persmisionAvailable === null || persmisionAvailable === void 0 || persmisionAvailable.length === 0) {
@@ -614,6 +659,46 @@ var checkPermission = (persmisionAvailable, userRoles) => {
   }
   return userRoles.indexOf(persmisionAvailable) >= 0;
 };
+
+// src/helpers/GroupBy.tsx
+var GroupBy = (xs, f) => {
+  return xs.reduce((r, v, _i, _a, k = f(v)) => {
+    (r[k] || (r[k] = [])).push(v);
+    return r;
+  }, {});
+};
+
+// src/helpers/FileDownloader.tsx
+var downloadFileBlob = (binaryString) => {
+  const data = window.URL.createObjectURL(new Blob([binaryString.blob]));
+  const fileName = binaryString.contentDisposition.split("filename=")[1];
+  redirectDownload(data, fileName);
+};
+var redirectDownload = (url, fileName) => {
+  const a = document.createElement("a");
+  a.setAttribute("href", url);
+  a.setAttribute("download", fileName);
+  a.style.visibility = "hidden";
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+};
+var getImageByBlob = (binaryString) => {
+  return URL.createObjectURL(new Blob([binaryString.blob])).toString();
+};
+var getImageByBase64 = (content) => {
+  const binaryString = window.atob(content);
+  const blob = new Uint8Array(binaryString.length).map((_byte, i) => binaryString.charCodeAt(i));
+  return URL.createObjectURL(new Blob([blob])).toString();
+};
+var toBase64 = (file) => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => reader.result && resolve(reader.result.toString());
+    reader.onerror = (error) => reject(error);
+  });
+};
 var usePrevious = (value) => {
   const ref2 = React7.useRef(void 0);
   React7.useEffect(() => {
@@ -2682,6 +2767,7 @@ exports.CardComponent = CardComponent;
 exports.ChangePasswordForm = ChangePasswordForm;
 exports.DatePickerComponent = DatePickerComponent;
 exports.DrawerSidebar = DrawerSidebar;
+exports.GroupBy = GroupBy;
 exports.LinearProgressComponent = LinearProgressComponent;
 exports.LoginForm = LoginForm;
 exports.MainLayoutSimple = MainLayoutSimple;
@@ -2701,5 +2787,16 @@ exports.TextFieldComponent = TextFieldComponent;
 exports.TextSimpleComponent = TextSimpleComponent;
 exports.UserInfo = UserInfo;
 exports.VerticalNav = VerticalNav;
+exports.checkPermission = checkPermission;
+exports.clearSession = clearSession;
+exports.downloadFileBlob = downloadFileBlob;
+exports.getImageByBase64 = getImageByBase64;
+exports.getImageByBlob = getImageByBlob;
+exports.getSession = getSession;
+exports.redirectDownload = redirectDownload;
+exports.saveSession = saveSession;
+exports.toBase64 = toBase64;
+exports.useIsMounted = useIsMounted;
+exports.usePrevious = usePrevious;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map