feat: React Skeleton

base-tailwind.config.js

@@ -0,0 +1,66 @@
+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)',
+                    },
+                },
+            },
+            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)',
+                    },
+                },
+            },
+            borderColor: {
+                dokan: {
+                    btn: {
+                        DEFAULT: 'var(--dokan-button-border-color, #F05025)',
+                        hover: 'var(--dokan-button-hover-border-color, #F05025)',
+                    },
+                },
+            },
+            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' ),
+    ],
+};
+
+module.exports = baseConfig;

includes/Assets.php

@@ -352,6 +352,10 @@ public function get_styles() {
                 'src'       => DOKAN_PLUGIN_ASSEST . '/css/dokan-tailwind.css',
                 'version'   => filemtime( DOKAN_DIR . '/assets/css/dokan-tailwind.css' ),
             ],
+            'dokan-react-frontend' => [
+                'src'       => DOKAN_PLUGIN_ASSEST . '/css/frontend.css',
+                'version'   => filemtime( DOKAN_DIR . '/assets/css/frontend.css' ),
+            ],
         ];
 
         return $styles;
@@ -365,6 +369,7 @@ public function get_styles() {
     public function get_scripts() {
         global $wp_version;
 
+        $frontend_shipping_asset = require DOKAN_DIR . '/assets/js/frontend.asset.php';
         $suffix         = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
         $asset_url      = DOKAN_PLUGIN_ASSEST;
         $asset_path     = DOKAN_DIR . '/assets/';
@@ -554,6 +559,11 @@ public function get_scripts() {
                 'deps'    => [ 'jquery' ],
                 'version' => filemtime( $asset_path . 'js/dokan-frontend.js' ),
             ],
+            'dokan-react-frontend'           => [
+                'src'     => $asset_url . '/js/frontend.js',
+                'deps'    => $frontend_shipping_asset['dependencies'],
+                'version' => $frontend_shipping_asset['version'],
+            ],
         ];
 
         return $scripts;
@@ -856,6 +866,8 @@ public function dokan_dashboard_scripts() {
             self::load_form_validate_script();
             $this->load_gmap_script();
 
+            wp_enqueue_script( 'dokan-react-frontend' );
+            wp_enqueue_style( 'dokan-react-frontend' );
             wp_enqueue_script( 'jquery' );
             wp_enqueue_script( 'jquery-ui' );
             wp_enqueue_script( 'jquery-ui-autocomplete' );

package.json

@@ -22,6 +22,8 @@
     "release:dev": "npm install && npm run build && npm run clean-files && npm run makepot && npm run zip"
   },
   "devDependencies": {
+    "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/typography": "^0.5.15",
     "@wordpress/scripts": "^27.9.0",
     "chartjs-adapter-moment": "^1.0.1",
     "debounce": "^1.2.1",
@@ -34,6 +36,7 @@
     "papaparse": "^5.4.1",
     "replace-in-file": "^6.3.5",
     "tailwindcss": "^3.3.3",
+    "tailwindcss-scoped-preflight": "^3.4.5",
     "vue": "^2.7.14",
     "vue-chartjs": "^3.5.1",
     "vue-color": "^2.8.1",
@@ -50,6 +53,13 @@
     "wp-readme-to-markdown": "^1.0.1"
   },
   "dependencies": {
-    "@wordpress/i18n": "^5.8.0"
+    "@wordpress/components": "^28.9.0",
+    "@wordpress/data": "^10.9.0",
+    "@wordpress/dom-ready": "^4.9.0",
+    "@wordpress/element": "^6.9.0",
+    "@wordpress/hooks": "^4.9.0",
+    "@wordpress/i18n": "^5.8.0",
+    "@wordpress/plugins": "^7.10.0",
+    "react-router-dom": "^6.27.0"
   }
 }

src/Dashboard/index.tsx

@@ -0,0 +1,32 @@
+import {createRoot} from "@wordpress/element";
+import domReady from "@wordpress/dom-ready";
+import Layout from "../Layout";
+import getRoutes from "../Routing";
+import {
+    createBrowserRouter, createHashRouter,
+    RouterProvider,
+} from "react-router-dom";
+import './tailwind.scss';
+
+const App = () => {
+    const routes = getRoutes();
+
+    const mapedRoutes = routes.map((route) => {
+        return {
+            path: route.path,
+            element: <Layout headerComponent={route?.header} footerComponent={route?.footer} route={route} title={route?.title}>{route.element}</Layout>,
+        }
+    });
+
+    const router = createHashRouter(mapedRoutes);
+
+    return <RouterProvider router={router} />;
+}
+
+domReady( function () {
+    const rootElement = document.querySelector( '.dashboard-content-area' );
+    const root = createRoot( rootElement! );
+    root.render(
+        <App />
+    );
+} );

src/Dashboard/tailwind.scss

@@ -0,0 +1,2 @@
+@config './../../base-tailwind.config.js';
+@import '../base-tailwind';

src/Layout/404.tsx

@@ -0,0 +1,9 @@
+const NotFound =  () => {
+  return (
+    <div>
+      <h1>404 - Not Found!</h1>
+    </div>
+  );
+}
+
+export default NotFound;

src/Layout/ContentArea.tsx

@@ -0,0 +1,17 @@
+import Sidebar from './Sidebar';
+import {Slot} from "@wordpress/components";
+
+const ContentArea = ( { children } ) => {
+    return (
+        <>
+            <Sidebar />
+            <div className="dokan-layout-content-area">
+                <Slot name="dokan-layout-content-area-before" />
+                { children }
+                <Slot name="dokan-layout-content-area-after" />
+            </div>
+        </>
+    );
+};
+
+export default ContentArea;

src/Layout/Footer.tsx

@@ -0,0 +1,7 @@
+import {Slot} from "@wordpress/components";
+
+const Footer = () => {
+    return <><Slot name="dokan-footer-area" /></>;
+};
+
+export default Footer;

src/Layout/Header.tsx

@@ -0,0 +1,19 @@
+import {Slot} from "@wordpress/components";
+
+const Header = ( { title = '' } ) => {
+
+    return (
+        <>
+            <Slot name="dokan-before-header" />
+            <div className="dokan-header-title">
+                { title && (<h1 className="mb-4 text-3xl font-extrabold text-gray-900 dark:text-white md:text-5xl lg:text-6xl">{title}</h1>)}
+            </div>
+            <div className="dokan-header-actions">
+                <Slot name="dokan-header-actions"/>
+            </div>
+            <Slot name="dokan-after-header"/>
+        </>
+    );
+};
+
+export default Header;

src/Layout/Sidebar.tsx

@@ -0,0 +1,5 @@
+const Sidebar = () => {
+    return <></>;
+};
+
+export default Sidebar;

src/Layout/index.tsx

@@ -0,0 +1,76 @@
+import { createContext, useContext, useState } from '@wordpress/element';
+import Header from './Header';
+import Footer from './Footer';
+import ContentArea from './ContentArea';
+import {
+    SlotFillProvider
+} from '@wordpress/components';
+import { PluginArea } from '@wordpress/plugins';
+
+// Create a ThemeContext
+const ThemeContext = createContext( null );
+
+// Create a ThemeProvider component
+const ThemeProvider = ( { children } ) => {
+    const [ theme, setTheme ] = useState( 'light' ); // Example theme state
+
+    return (
+        <ThemeContext.Provider value={ { theme, setTheme } }>
+            { children }
+        </ThemeContext.Provider>
+    );
+};
+
+export type DokanRoute = {
+    id: string;
+    title?: string;
+    icon?: JSX.Element | React.ReactNode;
+    element: JSX.Element | React.ReactNode;
+    header?: JSX.Element | React.ReactNode;
+    footer?: JSX.Element | React.ReactNode;
+    path: string;
+    exact?: boolean;
+    order?: number;
+    parent?: string;
+};
+
+interface LayoutProps {
+    children: React.ReactNode;
+    route: DokanRoute;
+    title?: string;
+    headerComponent?: JSX.Element|React.ReactNode;
+    footerComponent?: JSX.Element|React.ReactNode;
+}
+
+// Create a Layout component that uses the ThemeProvider
+const Layout = ( {
+    children,
+    route,
+    title = '',
+    headerComponent,
+    footerComponent,
+}: LayoutProps ) => {
+    return (
+        <ThemeProvider>
+            <SlotFillProvider>
+            <div className="dokan-layout">
+                { headerComponent ? (
+                    headerComponent
+                ) : (
+                    <Header title={ title } />
+                ) }
+                <ContentArea>{ children }</ContentArea>
+                { footerComponent ? footerComponent : <Footer /> }
+            </div>
+            <PluginArea scope={route.id} />
+            </SlotFillProvider>
+        </ThemeProvider>
+    );
+};
+
+// Custom hook to use the ThemeContext
+export const useTheme = () => {
+    return useContext( ThemeContext );
+};
+
+export default Layout;

src/Routing/index.tsx

@@ -0,0 +1,32 @@
+import NotFound from "../Layout/404";
+import {__} from "@wordpress/i18n";
+import {DokanRoute} from "../Layout";
+
+const getRoutes = () => {
+    let routes : Array<DokanRoute> = [];
+
+    routes.push(
+        {
+            id: 'dokan-base',
+            title: __( 'Dashboard', 'dokan-lite' ),
+            element: <h1>Dashboard body</h1>,
+            path: '/',
+            exact: true,
+            order: 10,
+        }
+    );
+
+    // @ts-ignore
+    routes = wp.hooks.applyFilters('dokan-dashboard-routes', routes) as Array<DokanRoute>;
+    routes.push(
+        {
+            id: 'dokan-404',
+            element: <NotFound />,
+            path: '*',
+        }
+    );
+
+    return routes;
+}
+
+export default getRoutes;

src/base-tailwind.scss

@@ -0,0 +1,21 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+// Reset unwanted table styles but keep structure intact
+@layer base {
+    .dokan-layout {
+        table, th, td {
+            margin: 0;
+            padding: 0;
+            border: 0;
+            border-spacing: 0;
+            border-collapse: collapse;
+            font-size: inherit;
+            font-weight: inherit;
+            text-align: inherit;
+            vertical-align: inherit;
+            box-sizing: border-box;
+        }
+    }
+}

webpack.config.js

@@ -9,6 +9,7 @@ const entryPoint = {
   // Dokan tailwind css
   'dokan-tailwind': './src/tailwind.css',
 
+  'frontend': './src/Dashboard/index.tsx',
   'vue-frontend': './src/frontend/main.js',
   'vue-admin': './src/admin/main.js',
   'vue-bootstrap': './src/utils/Bootstrap.js',
@@ -66,6 +67,7 @@ const updatedConfig = {
   },
 
   resolve: {
+    ...defaultConfig.resolve,
     alias: {
       'vue$': 'vue/dist/vue.esm.js',
       '@': path.resolve('./src/'),