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/'),