benivo-ui-library 1.9.64 → 1.9.66

package/.design-sync/NOTES.md

@@ -0,0 +1,59 @@
+# Benivo UI Library — Design Sync Notes
+
+## Build configuration
+
+- **Entry**: `src/index.js` (ES module with `export { ... }` for 49 components)
+- **Bundle global**: `window.BenivoUiLibrary`
+- **Build tool**: esbuild via `.ds-sync/lib/bundle.mjs`
+- **Alias resolution**: `tsconfigPathsPlugin` reading `tsconfig.json` (added to repo for this purpose)
+- **Synthetic `.d.ts`**: `lib/index.d.ts` enumerates all 49 PascalCase component exports — required because the package ships no TypeScript declarations. `package.json` has `"types": "lib/index.d.ts"` so `exportedNames()` in `dts.mjs` can find it.
+
+## Windows-specific fixes
+
+### `tsconfigPathsPlugin` directory-alias error
+`existsSync()` on an alias that resolves to a directory (e.g. `Component` → `src/components/`) throws "Incorrect function" on Windows. Fixed in `.ds-sync/lib/bundle.mjs` with `statSync().isFile()` check — falls through to esbuild's default resolution for directory aliases and picks up the `index.js` correctly.
+
+### JSX in `.js` files
+11 source files contain JSX but use the `.js` extension (esbuild's default loader doesn't handle JSX in `.js`). Files were renamed to `.jsx`:
+- `src/components/TableSort.js`
+- `src/components/dnd/index.js`
+- `src/components/frame/index.js`
+- `src/components/pop-up/index.js`
+- `src/contexts/entry-popup/provider.js`
+- `src/components/ErrorBoundary.js`
+- `src/lazyLoader.js`
+- `src/components/DataTable.skeleton.js`
+- `src/components/SharedCells.js`
+- `src/components/TableCheck.js`
+- `src/components/TableRowMenu.js`
+
+## Non-blocking warnings (accepted)
+
+- `[TOKENS_MISSING]`: 5 Swiper CSS vars (`--swiper-slides-offset-before`, `--swiper-slides-offset-after`, `--swiper-centered-offset-before`, `--swiper-centered-offset-after`, `--text-200`) — internal to the Swiper.js library, not part of the Benivo DS token set. Ignored.
+- `[FONT_MISSING]`: "icomoon" and "proxima-nova" — no `@font-face` declarations ship in the package CSS. The "Benivo DS" project already has Proxima Nova TTFs in `fonts/`. Designs render correctly using those. icomoon icons will render as rectangles in the design agent preview (acceptable for design use).
+
+## Component grades
+
+| Component | Verdict | Note |
+|-----------|---------|------|
+| Button | `close` (6/6) | Correct primary blue; canvas scale smaller than Storybook (consistent delta across all interactive components) |
+| Checkbox | `close` | Correct checked/unchecked state styling; smaller canvas |
+| CopyInput | `match` (6/6) | Pixel-faithful |
+| FantasyButton | `close` (6/6) | All 5 state colors correct; smaller canvas |
+| Input | `match` (6/6) | Pixel-faithful |
+| RadioButton | `close` (6/6) | Radio circle + label correct; smaller canvas |
+| TagsSelect | `match` (6/6) | Pixel-faithful |
+
+The "smaller canvas" delta is a consistent framing difference between the Storybook viewport and the preview canvas — not a component rendering issue. It cannot be fixed at the component level.
+
+## Re-sync risks
+
+- **Adding new stories to an existing component**: the `.cache/compare/<Name>.json` snapshot becomes stale → run `resync.mjs` without `--force` and the driver will detect it (sources unchanged, but story list changed) and prompt for a new grade.
+- **Upgrading benivo-ui-library**: any package version bump changes the bundle hash → all components lose their carry-forward status → full re-verify run required.
+- **Renaming an alias in tsconfig.json**: if new aliases point to a directory (not an `index.js` file), the Windows `statSync().isFile()` fix in `bundle.mjs` handles it. No extra action needed.
+- **Adding more `.js` files with JSX**: rename to `.jsx` before running the sync.
+- **Storybook configuration changes**: if `.storybook/main.js` changes the stories glob, the `sb-reference` snapshot becomes stale → delete `.design-sync/sb-reference/` and re-run `resync.mjs` to regenerate.
+
+## Scope
+
+Only 7 components were in scope for this sync (the ones with Storybook stories). The full library has 49 exports. Components without stories (`DataTable`, `Tabs`, `Drawer`, `Tooltip`, `SwiperSlider`, `GoogleAutoComplete`, etc.) are bundled in `_ds_bundle.js` and available at `window.BenivoUiLibrary.*` but have no preview cards or `.prompt.md` files. To add them: create story files and re-run `resync.mjs`.

package/.design-sync/config.json

@@ -0,0 +1,11 @@
+{
+  "projectId": "019e21a8-1874-714a-bb62-eeaa9040ee77",
+  "pkg": "benivo-ui-library",
+  "shape": "storybook",
+  "storybookConfigDir": ".storybook",
+  "storybookStatic": ".design-sync/sb-reference",
+  "entry": "src/index.js",
+  "tsconfig": "tsconfig.json",
+  "buildCmd": "npm run build",
+  "readmeHeader": ".design-sync/conventions.md"
+}

package/.design-sync/conventions.md

@@ -0,0 +1,71 @@
+# Benivo UI Library — Design Conventions
+
+**Package:** `benivo-ui-library` · **Global:** `window.BenivoUiLibrary`
+
+This is the Benivo component library used across all Benivo React frontend apps (EPApp, MPApp, VPApp, AdminApp). Import from `'benivo-ui-library'`.
+
+---
+
+## Component categories
+
+### Form inputs
+`Input`, `Textarea`, `Checkbox`, `RadioButton`, `Select`, `AsyncSelect`, `TagsSelect`, `DatePicker`, `CopyInput`
+
+All form inputs expose a controlled-value `value` prop and an `onChange` callback. Most pair with a hook: `useInput`, `useCheckbox`, `useRadioButton`, `useSelect`, `useDatePicker`, `useTextarea`. Use hooks for clean state management.
+
+`Input` accepts optional `prePost` (object with `pre`/`post` string labels, e.g. `{ pre: "$", post: "USD" }`) and `icons` (object with `start`/`end` icomoon class strings).
+
+`TagsSelect` wraps react-select for multi-value tag selection. Use `value`/`onChange` with an array; pass `getOptionLabel`/`getOptionValue` for custom shapes.
+
+### Buttons
+`Button`, `FantasyButton`, `ArrowButton`, `DropdownButton`
+
+`Button` variants: `type` prop (`"contained"` default, `"ghost"`, `"text"`); `color` prop (`"primary"`, `"danger"`, `"success"`, `"warning"`, `"grey"`). Always pass `onClick`; use `disabled` for non-interactive states.
+
+`FantasyButton` is the async-action button with built-in state machine: `status` prop (`"idle"` | `"loading"` | `"completed"` | `"failed"`). Shows animated progress fill during loading.
+
+### Data display
+`DataTable`, `Status`, `Amount`, `CountryFlag`, `Expander`, `AsideSummaryCard`, `AsideSummaryCardSection`, `InfoMessageBanner`, `PageNoData`
+
+`DataTable` wraps PrimeReact DataTable. Pass `columns` array with `{field, header}` and `data` array. Supports sorting, pagination, and row menus via `rowMenu` prop.
+
+### Navigation & layout
+`Tabs`, `TabGroup`, `TabItem`, `Drawer`, `SidebarMenu`, `SidebarMenuItem`, `SidebarMenuButton`
+
+`Tabs` is the full tab component; use `TabGroup`/`TabItem` for custom compositions.
+
+### Overlays & portals
+`Tooltip`, `WithPortal`
+
+`Tooltip` wraps any child and shows tooltip text on hover. `WithPortal` renders children into a portal.
+
+### Media & assets
+`Image`, `Logo`, `BnvLogo`, `SwiperSlider`, `CountryFlag`
+
+### Loaders
+`Loader`, `Spinner`, `SplashScreen`
+
+### Address / location
+`GoogleAutoComplete`, `AzureAutoComplete`, `HereAutocomplete`, `FallbackAutoComplete`, `AddressView`
+
+### Entry popup system
+`EntryPopupProvider`, `EntryPopupFrame`
+
+Wrap the app tree in `EntryPopupProvider` to use the entry popup context. Use `useEntryPopup` hook to open/close.
+
+---
+
+## Styling conventions
+
+- Components consume CSS variables from the Benivo token set (e.g. `--primary-color`, `--danger-color`). Always render within the Benivo LESS/CSS environment.
+- The icomoon icon font is required for icon-bearing components (`Input` with icons, action indicators). Icons are passed as CSS class strings (e.g. `"icon-search"`).
+- Proxima Nova is the brand typeface. Components fall back to system sans-serif gracefully.
+
+---
+
+## Key patterns
+
+- **Controlled inputs only.** All form components are fully controlled; never rely on uncontrolled behavior.
+- **Hooks for form state.** Prefer `useInput(initialValue)` → `{ value, onChange, reset }` over bare `useState`.
+- **`label` prop for field labels.** Most form inputs accept a `label` string and render it above the field. Pass `required` boolean for the asterisk indicator.
+- **`error` prop for validation messages.** Pass a string to show an error below the field with red styling.

package/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "semi": true,
+    "singleQuote": true,
+    "jsxSingleQuote": true,
+    "printWidth": 200
+}

package/.storybook/main.js

@@ -0,0 +1,65 @@
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const config = {
+    stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+
+    addons: [
+        '@storybook/addon-webpack5-compiler-swc',
+        '@storybook/addon-onboarding',
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@chromatic-com/storybook',
+        '@storybook/addon-interactions',
+        '@storybook/addon-styling-webpack',
+    ],
+
+    framework: {
+        name: '@storybook/react-webpack5',
+        options: {
+            builder: { useSWC: true }
+        }
+    },
+
+    swc: () => ({
+        jsc: {
+            parser: {
+                syntax: 'ecmascript',
+                jsx: true,
+            },
+            transform: {
+                react: {
+                    runtime: 'automatic',
+                },
+            },
+        },
+    }),
+
+    webpackFinal: async (config) => {
+        config.resolve.alias = {
+            ...config.resolve.alias,
+            '@': path.resolve(__dirname, '../src/'),
+            Hooks: path.resolve(__dirname, '../src/hooks'),
+            HOC: path.resolve(__dirname, '../src/components/HOC'),
+            Utils: path.resolve(__dirname, '../src/utils'),
+            Component: path.resolve(__dirname, '../src/components'),
+            Contexts: path.resolve(__dirname, '../src/contexts'),
+        };
+
+        config.module.rules.push({
+            test: /\.less$/,
+            use: [
+                MiniCssExtractPlugin.loader,
+                { loader: 'css-loader', options: { sourceMap: true } },
+                { loader: 'less-loader', options: { sourceMap: true } }
+            ]
+        });
+
+        config.plugins.push(new MiniCssExtractPlugin());
+
+        return config;
+    },
+};
+
+export default config;

package/.storybook/preview.js

@@ -0,0 +1,15 @@
+/** @type { import('@storybook/react').Preview } */
+import '../src/assets/main.less';
+
+const preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+    },
+};
+
+export default preview;

package/.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "esbenp.prettier-vscode",
+    ]
+}

package/.vscode/mcp.json

@@ -0,0 +1,9 @@
+{
+    "inputs": [],
+    "servers": {
+        "figma": {
+            "url": "https://mcp.figma.com/mcp",
+            "type": "http"
+        }
+    }
+}

package/.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "editor.formatOnSave": true,
+    "[javascript]": {
+        "editor.defaultFormatter": "vscode.typescript-language-features"
+    }
+}

package/Benivo.UI.lib.csproj

@@ -0,0 +1,21 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup Label="Globals">
+    <SccProjectName>SAK</SccProjectName>
+    <SccProvider>SAK</SccProvider>
+    <SccAuxPath>SAK</SccAuxPath>
+    <SccLocalPath>SAK</SccLocalPath>
+  </PropertyGroup>
+
+  <PropertyGroup>
+    <TargetFramework>netcoreapp3.1</TargetFramework>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <Compile Remove="lib\**" />
+    <Content Remove="lib\**" />
+    <EmbeddedResource Remove="lib\**" />
+    <None Remove="lib\**" />
+  </ItemGroup>
+
+</Project>

package/Benivo.UI.lib.sln

@@ -0,0 +1,33 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 16
+VisualStudioVersion = 16.0.30503.244
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Benivo.UI.lib", "Benivo.UI.lib.csproj", "{1AA1D8F2-00EE-407C-8520-FB4A67381AF5}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{1AA1D8F2-00EE-407C-8520-FB4A67381AF5}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{1AA1D8F2-00EE-407C-8520-FB4A67381AF5}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{1AA1D8F2-00EE-407C-8520-FB4A67381AF5}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{1AA1D8F2-00EE-407C-8520-FB4A67381AF5}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {262C0D48-5B19-41E7-96BD-5B2C9D72BD07}
+	EndGlobalSection
+	GlobalSection(TeamFoundationVersionControl) = preSolution
+		SccNumberOfProjects = 2
+		SccEnterpriseProvider = {4CA58AB2-18FA-4F8D-95D4-32DDF27D184C}
+		SccTeamFoundationServer = https://brandjourney.visualstudio.com/
+		SccLocalPath0 = .
+		SccProjectUniqueName1 = Benivo.UI.lib.csproj
+		SccLocalPath1 = .
+	EndGlobalSection
+EndGlobal

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Benivo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/Properties/launchSettings.json

@@ -0,0 +1,27 @@
+{
+  "iisSettings": {
+    "windowsAuthentication": false,
+    "anonymousAuthentication": true,
+    "iisExpress": {
+      "applicationUrl": "http://localhost:62524/",
+      "sslPort": 44383
+    }
+  },
+  "profiles": {
+    "IIS Express": {
+      "commandName": "IISExpress",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "Benivo.UI.lib": {
+      "commandName": "Project",
+      "launchBrowser": true,
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      },
+      "applicationUrl": "https://localhost:5001;http://localhost:5000"
+    }
+  }
+}

package/jest.config.js

@@ -0,0 +1,20 @@
+
+module.exports = {
+    testEnvironment: 'jsdom',
+    setupFiles: ['<rootDir>/mocking/setup.js', '<rootDir>/mocking/mock.worker.js'],
+    moduleFileExtensions: ["js", "json", "jsx"],
+    moduleNameMapper: {
+        "\\.(css|less)$": "identity-obj-proxy",
+        "\\.(gif|ttf|eot|svg)$": "<rootDir>/mocking/fileMock.js",
+        "^Component(.*)$": "<rootDir>/src/components$1",
+        "^Utils(.*)$": "<rootDir>/src/utils$1",
+        "^Hooks(.*)$": "<rootDir>/src/hooks$1",
+        "^HOK(.*)$": "<rootDir>/src/HOK$1",
+        "^Contexts(.*)$": "<rootDir>/src/contexts$1",
+    },
+    transform: {
+        "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/mocking/fileMock.js",
+        "^.+\\.jsx?$": "babel-jest"
+    },
+    transformIgnorePatterns: ["/node_modules/"],
+}

package/lib/README.md

@@ -0,0 +1,38 @@
+# benivo-ui-library
+
+[![Build Status](https://travis-ci.org/joemccann/dillinger.svg?branch=master)](https://travis-ci.org/joemccann/dillinger)
+
+`benivo-ui-library` is a collection of react hooks and components for faster development.
+
+# Installation
+
+```sh
+$npm install benivo-ui-library --save
+```
+# Basic usage
+
+```js
+import React from 'react';
+import { Input, Select, Checkbox, Button } from 'benivo-ui-library';
+import { useInput, useSelect, useCheckbox } from 'benivo-ui-library';
+import { withTransition } from 'benivo-ui-library';
+
+function MyApp() {
+  const email = useInput('initialvalue@gmail.com');
+  const agree = useCheckbox(false);
+  const event= useSelect('all');
+  const eventOptions=['all', 'news', 'promotional'];
+  const handleSubmit=()=>{
+      //some smart code here
+  };
+  
+  return (
+    <form>
+      <Input label="Email"  {...email.bind} />
+      <Select label="Events" options={eventOptions} {...event.bind}/>
+      <Checkbox label="I agree" {...agree.bind} />
+      <Button onClick={handleSubmit}>Subscribe</Button>
+    </form>
+  );
+}
+```

package/{currencyInput.less → lib/currencyInput.less}

@@ -134,39 +134,6 @@
         }
     }
 
-    .currency-input-menu {
-        position: absolute;
-        top: ~'calc(100% + 6px)';
-        right: 0;
-        min-width: 100%;
-        margin: 0;
-        padding: 0.25rem 0;
-        list-style: none;
-        z-index: @zindex-dropdown;
-        background: var(--white);
-        border: 1px solid var(--border-200);
-        .border-radius(@form-border-radius);
-        .box-shadow(0 4px 12px 0 rgba(16, 24, 40, 0.12));
-        max-height: 240px;
-        overflow-y: auto;
-    }
-
-    .currency-input-option {
-        padding: 0.5rem 0.75rem;
-        font-size: @font-size-sm;
-        cursor: pointer;
-        white-space: nowrap;
-
-        &:hover {
-            background: var(--bg-50);
-        }
-
-        &.selected {
-            font-weight: @font-weight-semibold;
-            background: var(--bg-50);
-        }
-    }
-
     .currency-input-hint {
         display: block;
         margin-top: 0.25rem;
@@ -175,3 +142,44 @@
         color: var(--text-300);
     }
 }
+
+// Menu is rendered through a portal into document.body, so its styles must live
+// at the top level rather than nested under .currency-input.
+.currency-input-menu {
+    position: absolute;
+    top: ~'calc(100% + 6px)';
+    right: 0;
+    min-width: 100%;
+    margin: 0;
+    padding: 0.25rem 0;
+    list-style: none;
+    z-index: @zindex-dropdown;
+    background: var(--white);
+    border: 1px solid var(--border-200);
+    .border-radius(@form-border-radius);
+    .box-shadow(0 4px 12px 0 rgba(16, 24, 40, 0.12));
+    max-height: 240px;
+    overflow-y: auto;
+
+    &.currency-input-menu--portal {
+        position: fixed;
+        top: auto;
+        z-index: @zindex-modal;
+    }
+}
+
+.currency-input-option {
+    padding: 0.5rem 0.75rem;
+    font-size: @font-size-sm;
+    cursor: pointer;
+    white-space: nowrap;
+
+    &:hover {
+        background: var(--bg-50);
+    }
+
+    &.selected {
+        font-weight: @font-weight-semibold;
+        background: var(--bg-50);
+    }
+}