feat: React Skeleton

base-tailwind.config.js

@@ -0,0 +1,96 @@
+import {
+    scopedPreflightStyles,
+    isolateInsideOfContainer,
+} from 'tailwindcss-scoped-preflight';
+
+const rootClass = '.dokan-layout'; //We will use this class to scope the styles.
+
+/** @type {import('tailwindcss').Config} */
+const baseConfig = {
+    important: rootClass,
+    content: [ './src/**/*.{js,jsx,ts,tsx}', '!./**/*.asset.php' ],
+    theme: {
+        extend: {
+            backgroundColor: {
+                dokan: {
+                    sidebar: {
+                        DEFAULT:
+                            'var(--dokan-sidebar-background-color, #F05025)',
+                        hover: 'var(--dokan-sidebar-hover-background-color, #F05025)',
+                    },
+                    btn: {
+                        DEFAULT:
+                            'var(--dokan-button-background-color, #F05025)',
+                        hover: 'var(--dokan-button-hover-background-color, #F05025)',
+                        secondary: {
+                            DEFAULT:
+                                'var(--dokan-button-secondary-background-color, var(--dokan-button-text-color))',
+                            hover: 'var(--dokan-button-secondary-hover-background-color, var(--dokan-button-background-color))',
+                        },
+                        tertiary: {
+                            DEFAULT:
+                                'var(--dokan-button-tertiary-background-color, #00000000)',
+                            hover: 'var(--dokan-button-tertiary-hover-background-color, var(--dokan-button-text-color))',
+                        },
+                    },
+                },
+            },
+            textColor: {
+                dokan: {
+                    sidebar: {
+                        DEFAULT: 'var(--dokan-sidebar-text-color, #CFCFCF)',
+                        hover: 'var(--dokan-sidebar-hover-text-color, #ffffff)',
+                    },
+                    btn: {
+                        DEFAULT: 'var(--dokan-button-text-color, #ffffff)',
+                        hover: 'var(--dokan-button-hover-text-color, #ffffff)',
+                        secondary: {
+                            DEFAULT:
+                                'var(--dokan-button-secondary-text-color, var(--dokan-button-background-color))',
+                            hover: 'var(--dokan-button-secondary-hover-text-color, var(--dokan-button-text-color))',
+                        },
+                        tertiary: {
+                            DEFAULT:
+                                'var(--dokan-button-tertiary-text-color, var(--dokan-button-background-color))',
+                            hover: 'var(--dokan-button-tertiary-hover-text-color, var(--dokan-button-background-color))',
+                        },
+                    },
+                },
+            },
+            borderColor: {
+                dokan: {
+                    btn: {
+                        DEFAULT: 'var(--dokan-button-border-color, #F05025)',
+                        hover: 'var(--dokan-button-hover-border-color, #F05025)',
+                        secondary: {
+                            DEFAULT:
+                                'var(--dokan-button-secondary-border-color, var(--dokan-button-border-color))',
+                            hover: 'var(--dokan-button-secondary-hover-border-color, var(--dokan-button-border-color))',
+                        },
+                        tertiary: {
+                            DEFAULT:
+                                'var(--dokan-button-tertiary-border-color, #00000000)',
+                            hover: 'var(--dokan-button-tertiary-hover-border-color, var(--dokan-button-border-color))',
+                        },
+                    },
+                },
+            },
+            colors: {
+                primary: 'var(--dokan-button-background-color, #F05025)',
+                dokan: {
+                    sidebar: 'var(--dokan-button-background-color, #1B233B)',
+                    btn: 'var(--dokan-button-background-color, #F05025)',
+                },
+            },
+        },
+    },
+    plugins: [
+        scopedPreflightStyles( {
+            isolationStrategy: isolateInsideOfContainer( rootClass, {} ),
+        } ),
+        require( '@tailwindcss/typography' ),
+        require( '@tailwindcss/forms' ),
+    ],
+};
+
+export default baseConfig;

docs/feature-override/readme.md

@@ -0,0 +1,165 @@
+[//]: # (TODO: Update the document with the correct information and hook name.)
+# How to define a menu is available in `React` and its `PHP` override information.
+
+- [Introduction](#introduction)
+- [1. Declare a menu is available in `React`.](#1-declare-a-menu-is-available-in-react)
+  - [Declare `React` menu in **Dokan Lite.**](#declare-react-menu-in-dokan-lite)
+  - [Declare `React` menu in **Dokan Pro** or **External Plugin**.](#declare-react-menu-in-dokan-pro-or-external-plugin)
+- [2. Declare the Override templates for a React route.](#2-declare-the-override-templates-for-a-react-route) 
+    - [Define the override templates for a React route in Dokan Lite.](#define-the-override-templates-for-a-react-route-in-dokan-lite)
+    - [Define the override templates for a React route in **Dokan Pro** or **External Plugin**.](#define-the-override-templates-for-a-react-route-in-dokan-pro-or-external-plugin)
+    - [Define the override templates array structure.](#define-the-override-templates-array-structure)
+- [Manual Override from External Plugin](#manual-override-from-external-plugin)
+
+## Introduction
+This document will help you to define a menu is available in `React` and its `PHP` override information.
+
+
+## 1. Declare a menu is available in `React`.
+To declare a menu is available in `React`, you need to define `route` property during the menu registration.
+
+### Declare `React` menu in **Dokan Lite**.
+```php
+// includes/functions-dashboard-navigation.php#L27-L66
+$menus = [
+        'dashboard' => [
+            'title'      => __( 'Dashboard', 'dokan-lite' ),
+            'icon'       => '<i class="fas fa-tachometer-alt"></i>',
+            'url'        => dokan_get_navigation_url(),
+            'pos'        => 10,
+            'permission' => 'dokan_view_overview_menu',
+            'react_route'      => '/', // <-- Define the route here
+        ],
+        'products'  => [
+            'title'      => __( 'Products', 'dokan-lite' ),
+            'icon'       => '<i class="fas fa-briefcase"></i>',
+            'url'        => dokan_get_navigation_url( 'products' ),
+            'pos'        => 30,
+            'permission' => 'dokan_view_product_menu',
+            'react_route'      => 'products', // <-- Define the route here
+        ],
+        'orders'    => [
+            'title'      => __( 'Orders', 'dokan-lite' ),
+            'icon'       => '<i class="fas fa-shopping-cart"></i>',
+            'url'        => dokan_get_navigation_url( 'orders' ),
+            'pos'        => 50,
+            'permission' => 'dokan_view_order_menu',
+            'react_route'      => 'orders', // <-- Define the route here
+        ],
+        'withdraw'  => [
+            'title'      => __( 'Withdraw', 'dokan-lite' ),
+            'icon'       => '<i class="fas fa-upload"></i>',
+            'url'        => dokan_get_navigation_url( 'withdraw' ),
+            'pos'        => 70,
+            'permission' => 'dokan_view_withdraw_menu',
+        ],
+        'settings'  => [
+            'title' => __( 'Settings', 'dokan-lite' ),
+            'icon'  => '<i class="fas fa-cog"></i>',
+            'url'   => dokan_get_navigation_url( 'settings/store' ),
+            'pos'   => 200,
+        ],
+    ];
+```
+In the above example, the `route` property is defined for each menu which we are indicating that the react route is available. 
+This will be used to determine if the menu is pointing to the react Application or to the Legacy PHP Route.
+
+The `route` property should be the same as the route defined in the `React` application in Router Array.
+
+It is important to note that the `route` property should be defined for the menu which is available in the `React` application. 
+If the `route` key is not defined for the menu, then the menu will be considered as a legacy menu and will be rendered using the PHP template.
+
+
+### Declare `React` menu in **Dokan Pro** or **External Plugin**.
+
+```php
+add_filter( 'dokan_get_dashboard_nav', function ( $menus ) {
+    $menus['products'] = [
+        'title'      => __( 'Products', 'dokan-lite' ),
+        'icon'       => '<i class="fas fa-briefcase"></i>',
+        'url'        => dokan_get_navigation_url( 'products' ),
+        'pos'        => 30,
+        'permission' => 'dokan_view_product_menu',
+        'react_route'      => 'products', // <-- Define the route here
+    ];
+
+    return $menus;
+} );
+```
+
+
+## 2. Declare the Override templates for a React route.
+If you are writing a new feature or modifying an existing feature in the `React` application, you do not need to define the override templates for the `React` route.
+But if you are modifying or migrating an existing feature written in PHP to the `React` application and you want that if some of the PHP template is overridden by the existing PHP template then the legacy PHP page will be displayed, then you need to define the override templates for the `React` route.
+### Define the override templates for a React route in Dokan Lite.
+```php
+// VendorNavMenuChecker.php#L13-L26
+protected array $template_dependencies = [
+        '' => [
+            [ 'slug' => 'dashboard/dashboard' ],
+            [ 'slug' => 'dashboard/orders-widget' ],
+            [ 'slug' => 'dashboard/products-widget' ],
+        ],
+        'products' => [
+            [ 'slug' => 'products/products' ],
+            [
+				'slug' => 'products/products',
+				'name' => 'listing',
+			],
+        ],
+    ];
+```
+
+In the above example, the `template_dependencies` property is defined for each route which we are indicating that the override templates are available for the route. This will be used to determine if the override templates are available for the route or not.
+
+### Define the override templates for a React route in **Dokan Pro** or **External Plugin**.
+From Dokan Pro, we can add dependencies by using the filter `dokan_get_dashboard_nav_template_dependency`.
+
+```php
+add_filter( 'dokan_get_dashboard_nav_template_dependency', function ( array $dependencies ) {
+    $dependencies['products'] = [
+        [ 'slug' => 'products/products' ],
+        [
+            'slug' => 'products/products',
+            'name' => 'listing',
+        ],
+    ];
+
+    return $dependencies;
+} );
+```
+### Define the override templates array structure.
+```php
+/**
+* @var array $template_dependencies Array of template dependencies for the route.
+ */
+
+[ 
+    'route_name' => [ 
+            [
+                'slug' => 'template-slug', 
+                'name' => 'template-name' // (Optional),
+                'args' = [] // (Optional)
+            ], 
+        ]
+]
+```
+
+- **Slug:** The slug of the template file which is used to display the php content.
+- **Name:** The name of the template file which is used to display the php content. (Optional)
+- **Args:** The arguments which are passed to the template file in `dokan_get_template_part()` function. (Optional)
+
+## Manual Override from External Plugin
+If you did not override any of the template file directly but you have override functionality by using `add_action` or `add_filter` then you can forcefully override the php route and template rendering for the route by using the `dokan_is_dashboard_nav_dependency_cleared` filter hook.
+
+```php
+
+add_filter( 'dokan_is_dashboard_nav_dependency_resolved', function ( $is_cleared, $route ) {
+    if ( 'products' === $route ) {
+        return false;
+    }
+
+    return $is_cleared;
+}, 10, 2 );
+
+```

docs/frontend/components.md

@@ -0,0 +1,93 @@
+# Dokan Components
+
+## Overview
+
+`Dokan` provides a set of reusable `components` that can be used across both `Free` and `Pro` versions. This documentation explains how to properly set up and use these `components` in your project.
+
+## Important Dependencies
+
+For both `Dokan Free and Pro` versions, we must register the `dokan-react-components` dependency when using `global` components.
+
+### Implementation Example
+
+```php
+// Register scripts with dokan-react-components dependency
+$script_assets = 'add_your_script_assets_path_here';
+
+if (file_exists($script_assets)) {
+    $vendor_asset = require $script_assets;
+    $version      = $vendor_asset['version'] ?? '';
+
+    // Add dokan-react-components as a dependency
+    $component_handle = 'dokan-react-components';
+    $dependencies    = $vendor_asset['dependencies'] ?? [];
+    $dependencies[]  = $component_handle;
+
+    // Register Script
+    wp_register_script(
+        'handler-name',
+        'path_to_your_script_file',
+        $dependencies,
+        $version,
+        true
+    );
+
+    // Register Style
+    wp_register_style(
+        'handler-name',
+        'path_to_your_style_file',
+        [ $component_handle ],
+        $version
+    );
+}
+```
+
+## Component Access
+
+For `Dokan Free`, we can import the components via `@/components`:
+
+```js
+import { DataViews } from '@/components';
+```
+
+In `Dokan Pro`, components can be imported directly from `@dokan/components`:
+
+```js
+import { DataViews } from '@dokan/components';
+```
+
+For external `plugins`, we must include the `dokan-react-components` as scripts dependency and the `@dokan/components` should be introduced as an external resource configuration to resolve the path via `webpack`:
+
+```js
+externals: {
+    '@dokan/components': 'dokan.components',
+    ...
+},
+```
+
+## Adding Global Components
+
+### File Structure
+
+```
+|____ src/
+|        |___ components/
+|        |      |___ index.tsx         # Main export file
+|        |      |___ DataViews/        # Existing component
+|        |      |___ YourComponent/   # Your new component directory
+|        |      |     |___ index.tsx
+|        |      |     |___ style.scss
+|        |      |
+|        |      |___ Other Files
+|        |
+|        |___ Other Files
+|
+|____ Other Files
+```
+
+**Finally,** we need to export the new `component` from the `src/components/index.tsx` file. Then, we can import the new component from `@dokan/components` in `dokan pro` version.
+
+```ts
+export { default as DataViews } from './dataviews/DataViewTable';
+export { default as ComponentName } from './YourComponent';
+```