Publish react native dev docs

docs/README.md

@@ -2,6 +2,29 @@
 
 This repository serves as the comprehensive documentation hub for the Brightlayer UI component library, your suite of reusable React Native components. Here, you'll find detailed information on using each component effectively to build user-friendly and interactive React Native applications.
 
+## Versioned Releases
+
+The current documentation is deployed at the root of each hosting repository. Frozen release snapshots are deployed to version folders, and every refreshed snapshot loads its version menu from a shared manifest.
+
+| Environment | Current docs         | Version snapshot        |
+| ----------- | -------------------- | ----------------------- |
+| Dev         | `/react-native-dev/` | `/react-native-dev/vN/` |
+| Production  | `/react-native/`     | `/react-native/vN/`     |
+
+`N` is the numeric `docsVersion` in `package.json`.
+
+If a requested `/vN/` snapshot is unavailable, the GitHub Pages 404 handler redirects to the current documentation root. Available snapshots retain deep-link routing, query parameters, and fragments.
+
+Before publishing a snapshot, update `docsVersion` and the entries in `public/version-history.json`. Keep entries newest-to-oldest, use `url: ''` for the current root release, and use the deployed folder (for example, `url: '/v1'`) for previous releases. Enter the package versions manually using the published stable versions rather than alpha or beta qualifiers. Add a historical entry only after its snapshot has deployed successfully.
+
+To publish, run **Deploy React Native Docs Release Snapshot** from GitHub Actions for `dev`, verify the snapshot and a deep link, then run the normal dev deployment. Repeat the snapshot deployment for `prod` and verify it alongside the current docs deployed from `master`.
+
+The snapshot workflow publishes `version-history.json` to the stable docs root. Refreshed snapshots fetch that file at runtime and therefore receive future dropdown updates automatically.
+
+The workflow retains the three highest `vN` folders in each hosting repository. Remove the corresponding oldest entry from `version-history.json` whenever a snapshot is pruned.
+
+Snapshots that predate the shared manifest need one rebuild with `snapshot_version` set to their version number. After that one-time refresh, future manifest updates do not require rebuilding them.
+
 ## Exploring the Documentation
 
 The documentation is organized into individual pages for each Brightlayer UI component. You can navigate to specific components using the file structure.
@@ -15,13 +38,13 @@ Component Overview: A concise description of the component's purpose and key fea
 
 A comprehensive list of properties, events, and methods supported by the component. Each API entry includes details on:
 
--   Data Type: The expected format of the data passed to the property or returned by the method.
+- Data Type: The expected format of the data passed to the property or returned by the method.
 
--   Description: A clear explanation of what the property/event/method does.
+- Description: A clear explanation of what the property/event/method does.
 
--   Required: Indicates whether the property is mandatory for the component to function correctly (Yes or No).
+- Required: Indicates whether the property is mandatory for the component to function correctly (Yes or No).
 
--   Default: Specifies the default value assigned to the property if no value is provided (if applicable).
+- Default: Specifies the default value assigned to the property if no value is provided (if applicable).
 
 ### Usage Examples
 

docs/package.json

@@ -2,6 +2,7 @@
     "name": "docs",
     "private": true,
     "version": "0.0.0",
+    "docsVersion": "1",
     "type": "module",
     "scripts": {
         "start": "vite",
@@ -10,16 +11,16 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "@brightlayer-ui/colors": "^3.1.1",
-        "@brightlayer-ui/icons": "^2.3.0",
-        "@brightlayer-ui/icons-mui": "^3.6.0",
-        "@brightlayer-ui/react-components": "^8.0.2",
+        "@brightlayer-ui/colors": "^3.2.0",
+        "@brightlayer-ui/icons": "^2.6.0",
+        "@brightlayer-ui/icons-mui": "^4.3.0",
+        "@brightlayer-ui/react-components": "^8.0.5",
         "@brightlayer-ui/react-doc-components": "^3.0.0-alpha.0",
         "@brightlayer-ui/react-native-components": "^9.3.0",
-        "@brightlayer-ui/react-native-progress-icons": "^2.1.0",
+        "@brightlayer-ui/react-native-progress-icons": "^2.3.0-alpha.0",
         "@brightlayer-ui/react-native-themes": "^8.1.1",
-        "@brightlayer-ui/react-native-vector-icons": "^3.2.0",
-        "@brightlayer-ui/react-themes": "^9.0.1",
+        "@brightlayer-ui/react-native-vector-icons": "4.0.0-alpha.0",
+        "@brightlayer-ui/react-themes": "^9.1.0",
         "@emotion/css": "^11.11.2",
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
@@ -47,7 +48,7 @@
         "react-native-vector-icons": "^10.3.0",
         "react-redux": "^9.1.2",
         "react-router": "6.30.4",
-        "react-router-dom": "6.30.4",
+        "react-router-dom": "6.30.6",
         "remark-gfm": "^4.0.0",
         "typewriter-effect": "^2.21.0",
         "vite-plugin-prismjs": "^0.0.11",
@@ -57,15 +58,15 @@
     "devDependencies": {
         "@babel/core": "^7.14.5",
         "@babel/preset-react": "^7.24.7",
-        "@brightlayer-ui/eslint-config": "^3.0.1",
+        "@brightlayer-ui/eslint-config": "^4.0.1",
         "@brightlayer-ui/prettier-config": "^1.0.3",
         "@eslint/js": "^9.30.1",
         "@react-native-community/cli-platform-android": "20.1.2",
         "@react-native/babel-preset": "0.84.1",
         "@react-native/metro-config": "0.84.1",
         "@swc-node/register": "~1.8.0",
         "@swc/cli": "~0.1.62",
-        "@swc/core": "~1.3.85",
+        "@swc/core": "~1.16.1",
         "@swc/helpers": "~0.5.20",
         "@testing-library/jest-dom": "~6.4.2",
         "@testing-library/jest-native": "~5.4.3",
@@ -94,7 +95,7 @@
         "jest-circus": "^29.4.1",
         "jest-react-native": "18.0.0",
         "jsdom": "~22.1.0",
-        "prettier": "^2.6.2",
+        "prettier": "^3.9.6",
         "react-native-svg": "^15.4.0",
         "react-native-svg-transformer": "1.5.0",
         "react-native-web": "^0.21.2",

docs/public/404.html

@@ -22,23 +22,50 @@
             // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
             // https://username.github.io/repo-name/?/one/two&a=b~and~c=d#qwe
             // Otherwise, leave pathSegmentsToKeep as 0.
-            var pathSegmentsToKeep = 1;
-
             var l = window.location;
-            l.replace(
-                l.protocol +
-                    '//' +
-                    l.hostname +
-                    (l.port ? ':' + l.port : '') +
-                    l.pathname
-                        .split('/')
-                        .slice(0, 1 + pathSegmentsToKeep)
-                        .join('/') +
-                    '/?/' +
-                    l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
-                    (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
-                    l.hash
-            );
+            var pathSegments = l.pathname.split('/');
+            var projectRoot = '/' + pathSegments[1];
+            var version = pathSegments[2];
+
+            var redirectToSpaRoute = function (pathSegmentsToKeep) {
+                l.replace(
+                    l.protocol +
+                        '//' +
+                        l.hostname +
+                        (l.port ? ':' + l.port : '') +
+                        l.pathname
+                            .split('/')
+                            .slice(0, 1 + pathSegmentsToKeep)
+                            .join('/') +
+                        '/?/' +
+                        l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
+                        (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
+                        l.hash
+                );
+            };
+
+            // Current docs live at /react-native or /react-native-dev; snapshots add /vN.
+            if (/^v\d+$/.test(version)) {
+                fetch(projectRoot + '/version-history.json')
+                    .then(function (response) {
+                        return response.ok ? response.json() : [];
+                    })
+                    .then(function (versions) {
+                        var isAvailable = versions.some(function (item) {
+                            return item.url === '/' + version;
+                        });
+                        if (isAvailable) {
+                            redirectToSpaRoute(2);
+                        } else {
+                            l.replace(projectRoot + '/');
+                        }
+                    })
+                    .catch(function () {
+                        l.replace(projectRoot + '/');
+                    });
+            } else {
+                redirectToSpaRoute(1);
+            }
         </script>
     </head>
     <body></body>

docs/public/version-history.json

@@ -0,0 +1,13 @@
+[
+    {
+        "date": "October 2026",
+        "url": "",
+        "version": "1",
+        "packages": [
+            { "name": "@brightlayer-ui/react-native-components", "version": "9.3.0" },
+            { "name": "@brightlayer-ui/react-native-themes", "version": "8.1.1" },
+            { "name": "@brightlayer-ui/react-native-progress-icons", "version": "2.2.2" },
+            { "name": "@brightlayer-ui/react-native-auth-workflow", "version": "8.3.1" }
+        ]
+    }
+]

docs/src/__configuration__/navigationMenu.tsx

@@ -75,6 +75,12 @@ import SpacerExamples from '../componentDocs/Spacer/markdown/SpacerExamples.mdx'
 import UserMenuExamples from '../componentDocs/UserMenu/markdown/UserMenuExamples.mdx';
 import ProgressIconExamples from '../componentDocs/ProgressIcon/markdown/ProgressIconExamples.mdx';
 import ProgressIconAPIDocs from '../componentDocs/ProgressIcon/markdown/ProgressIconAPIDocs.mdx';
+import SlashedIconExamples from '../componentDocs/SlashedIcon/markdown/SlashedIconExamples.mdx';
+import SlashedIconAPIDocs from '../componentDocs/SlashedIcon/markdown/SlashedIconAPIDocs.mdx';
+import { SlashedIconPlaygroundComponent } from '../componentDocs/SlashedIcon/playground';
+import SlashedIconMaskExamples from '../componentDocs/SlashedIcon/markdown/SlashedIconMaskExamples.mdx';
+import SlashedIconMaskAPIDocs from '../componentDocs/SlashedIcon/markdown/SlashedIconMaskAPIDocs.mdx';
+import { SlashedIconMaskPlaygroundComponent } from '../componentDocs/SlashedIcon/playground/SlashedIconMaskPlayground';
 
 // API Docs markdown
 import AutoCompleteAPIDocs from '../componentDocs/AutoComplete/markdown/AutoCompleteAPIDocs.mdx';
@@ -906,6 +912,59 @@ export const pageDefinitions: RouteConfig[] = [
                             },
                         ],
                     },
+                    {
+                        title: 'Slashed Icons',
+                        path: 'slashed-icons/',
+                        element: <Outlet />,
+                        pages: [
+                            {
+                                title: 'Slashed BLUI Icon',
+                                path: 'blui-icon/',
+                                element: <ComponentPreviewPage title={'Slashed BLUI Icon'} />,
+                                sx: { '& .MuiListItemAvatar-root': { marginLeft: 4 } },
+                                children: [
+                                    {
+                                        title: 'examples',
+                                        path: 'examples',
+                                        element: <SlashedIconExamples />,
+                                    },
+                                    {
+                                        title: 'API Docs',
+                                        path: 'api-docs',
+                                        element: <SlashedIconAPIDocs />,
+                                    },
+                                    {
+                                        title: 'playground',
+                                        path: 'playground',
+                                        element: <SlashedIconPlaygroundComponent />,
+                                    },
+                                ],
+                            },
+                            {
+                                title: 'Slashed SVG Mask Icon',
+                                path: 'svg-mask-icon/',
+                                element: <ComponentPreviewPage title={'Slashed SVG Mask Icon'} />,
+                                sx: { '& .MuiListItemAvatar-root': { marginLeft: 4 } },
+                                children: [
+                                    {
+                                        title: 'examples',
+                                        path: 'examples',
+                                        element: <SlashedIconMaskExamples />,
+                                    },
+                                    {
+                                        title: 'API Docs',
+                                        path: 'api-docs',
+                                        element: <SlashedIconMaskAPIDocs />,
+                                    },
+                                    {
+                                        title: 'playground',
+                                        path: 'playground',
+                                        element: <SlashedIconMaskPlaygroundComponent />,
+                                    },
+                                ],
+                            },
+                        ],
+                    },
                 ],
             },
         ],

docs/src/__configuration__/versionHistory.ts

@@ -0,0 +1,8 @@
+export type VersionHistoryItem = {
+    date: string;
+    url: string;
+    packages: Array<{
+        name: string;
+        version: string;
+    }>;
+};

docs/src/componentDocs/ProgressIcon/examples/BatteryLargeProgressIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared';
+import { BatteryLargeProgressIconExample } from './BatteryLargeProgressIconExample';
+
+const codeSnippet = `<BatteryLarge
+    percent={75}
+    size={50}
+    color="#3431d2"
+    showPercentLabel={true}
+    labelPosition={'bottom'}
+/>`;
+
+export const BatteryLargeProgressIcon = (): React.JSX.Element => (
+    <Box>
+        <BatteryLargeProgressIconExample />
+        <CodeBlock code={codeSnippet} language="jsx" />
+        <CodeBlockActionButtonRow
+            copyText={codeSnippet}
+            url="componentDocs/ProgressIcon/examples/BatteryLargeProgressIconExample.tsx"
+        />
+    </Box>
+);

docs/src/componentDocs/ProgressIcon/examples/BatteryLargeProgressIconExample.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ExampleShowcase } from '../../../shared';
+import { BatteryLarge } from '@brightlayer-ui/react-native-progress-icons';
+
+export const BatteryLargeProgressIconExample = (): React.JSX.Element => (
+    <ExampleShowcase sx={{ display: 'flex', justifyContent: 'center' }}>
+        <BatteryLarge percent={75} size={50} color="#3431d2" showPercentLabel={true} labelPosition={'bottom'} />
+    </ExampleShowcase>
+);

docs/src/componentDocs/ProgressIcon/markdown/ProgressIconExamples.mdx

@@ -1,5 +1,6 @@
 import { ProgressIcon } from '../examples/ProgressIcon';
 import { BatteryProgressIcon } from '../examples/BatteryProgressIcon';
+import { BatteryLargeProgressIcon } from '../examples/BatteryLargeProgressIcon';
 import { HeartProgressIcon } from '../examples/HeartProgressIcon';
 import { PieProgressIcon } from '../examples/PieProgressIcon';
 import { UpsProgressIcon } from '../examples/UpsProgressIcon';
@@ -20,6 +21,12 @@ The Battery Progress Icon shows remaining charge or power level at a glance.
 
 <BatteryProgressIcon />
 
+## Battery Large
+
+The Battery Large Progress Icon displays remaining charge or power level in a larger battery shape.
+
+<BatteryLargeProgressIcon />
+
 ## Heart
 
 The Heart Progress Icon visualizes wellness-style metrics such as health, effort, or activity.

docs/src/componentDocs/ProgressIcon/playground/PlaygroundPage.tsx

@@ -9,21 +9,22 @@ import {
     getPropsMapping,
     Playground,
 } from '@brightlayer-ui/react-doc-components';
-import { Battery, Heart, Pie, Signal, Ups } from '@brightlayer-ui/react-native-progress-icons';
+import { Battery, BatteryLarge, Heart, Pie, Signal, Ups } from '@brightlayer-ui/react-native-progress-icons';
 import { removeEmptyProps } from '../../../utils';
 import 'prismjs/components/prism-jsx.min';
 
 const inputConfig: InputConfig = [
     {
         id: 'iconType',
         type: 'select',
-        typeLabel: `'Signal' | 'Battery' | 'Pie' | 'Heart' | 'Ups'`,
+        typeLabel: `'Signal' | 'Battery' | 'BatteryLarge' | 'Pie' | 'Heart' | 'Ups'`,
         description: 'Choose which progress icon component to render',
         required: true,
         initialValue: 'Signal',
         options: [
             { label: 'Signal', value: 'Signal' },
             { label: 'Battery', value: 'Battery' },
+            { label: 'Battery Large', value: 'BatteryLarge' },
             { label: 'Pie', value: 'Pie' },
             { label: 'Heart', value: 'Heart' },
             { label: 'Ups', value: 'Ups' },
@@ -159,7 +160,7 @@ const inputConfig: InputConfig = [
 
 const ProgressIconPreview: PreviewComponent = ({ data }) => {
     const { iconType, charging, ring, ...commonProps } = data as {
-        iconType: 'Signal' | 'Battery' | 'Pie' | 'Heart' | 'Ups';
+        iconType: 'Signal' | 'Battery' | 'BatteryLarge' | 'Pie' | 'Heart' | 'Ups';
         charging?: boolean;
         ring?: number;
         [key: string]: unknown;
@@ -185,6 +186,9 @@ const ProgressIconPreview: PreviewComponent = ({ data }) => {
                 />
             );
             break;
+        case 'BatteryLarge':
+            iconElement = <BatteryLarge {...sanitizedProps} color={iconColor} labelColor={safeLabelColor} />;
+            break;
         case 'Pie':
             iconElement = <Pie {...sanitizedProps} color={iconColor} labelColor={safeLabelColor} ring={ringValue} />;
             break;