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,41 @@
+import {createRoot} from "@wordpress/element";
+import domReady from "@wordpress/dom-ready";
+import Layout from "../Layout";
+import getRoutes, { withRouter } from "../Routing";
+import {
+    createHashRouter,
+    RouterProvider,
+} from "react-router-dom";
+import './tailwind.scss';
+
+const App = () => {
+    const routes = getRoutes();
+
+    const mapedRoutes = routes.map((route) => {
+        const WithRouterComponent = withRouter( route.element );
+
+        return {
+            path: route.path,
+            element: <Layout
+                headerComponent={route?.header}
+                footerComponent={route?.footer}
+                route={route}
+                title={route?.title}
+            >
+                <WithRouterComponent/>
+            </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,70 @@
+import NotFound from "../Layout/404";
+import {__} from "@wordpress/i18n";
+import {DokanRoute} from "../Layout";
+import { isValidElement, cloneElement, createElement } from '@wordpress/element';
+import { useNavigate, useParams, useLocation, redirect, replace, useMatches, useNavigation,  } from 'react-router-dom';
+
+export function withRouter(Component) {
+    function ComponentWithRouterProp(props) {
+        let navigate = useNavigate();
+        let params   = useParams();
+        let location = useLocation();
+        let matches = useMatches();
+        const navigation = useNavigation();
+
+        const routerProps = {
+            router: {
+                navigate,
+                params,
+                location,
+                redirect,
+                replace,
+                matches,
+                navigation
+            }
+        };
+
+        // Check if Component is a valid element
+        if (isValidElement(Component)) {
+            // If it's a valid element, clone it and pass the router props
+            return cloneElement(Component, { ...props, ...routerProps });
+        }
+
+        // If it's a function component, render it with the router props
+        return createElement(Component, {
+            ...props,
+            ...routerProps
+        });
+    }
+
+    return ComponentWithRouterProp;
+}
+
+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;