-
Notifications
You must be signed in to change notification settings - Fork 204
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: React Skeleton #2403
base: develop
Are you sure you want to change the base?
feat: React Skeleton #2403
Changes from 1 commit
a2701f5
e931d06
057a92f
0077f78
3d4d19c
9beb3b3
15994f8
c27f504
c295722
0b1ce02
25b4a1a
c56dacb
e59521e
e6bf1ec
8b2b753
a064fe7
322dc62
c9478eb
46bcda5
5f7ea35
16f8a1d
c8719b5
d045a63
44370c8
2585e5b
125f1b7
66f84ea
3e3ddd0
198afb2
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -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)', | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Potential typo in 'sidebar' color variable In line 51, the Apply this diff to correct the variable name: sidebar: 'var(--dokan-button-background-color, #1B233B)',
+ sidebar: 'var(--dokan-sidebar-background-color, #1B233B)', 📝 Committable suggestion
Suggested change
|
||||||
btn: 'var(--dokan-button-background-color, #F05025)', | ||||||
}, | ||||||
}, | ||||||
}, | ||||||
}, | ||||||
plugins: [ | ||||||
scopedPreflightStyles( { | ||||||
isolationStrategy: isolateInsideOfContainer( rootClass, {} ), | ||||||
} ), | ||||||
require( '@tailwindcss/typography' ), | ||||||
require( '@tailwindcss/forms' ), | ||||||
], | ||||||
}; | ||||||
|
||||||
module.exports = baseConfig; |
Original file line number | Diff line number | Diff line change | ||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
@@ -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'; | ||||||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Correct the variable name to match the asset being loaded The variable Apply this diff to correct the variable name: -$frontend_shipping_asset = require DOKAN_DIR . '/assets/js/frontend.asset.php';
+$frontend_asset = require DOKAN_DIR . '/assets/js/frontend.asset.php'; Ensure to update all references to 📝 Committable suggestion
Suggested change
|
||||||||||||||||||||||
$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'], | ||||||||||||||||||||||
], | ||||||||||||||||||||||
Comment on lines
+581
to
+585
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Update variable references after renaming Following the renaming of Apply this diff to update the variable references: 'dokan-react-frontend' => [
'src' => $asset_url . '/js/frontend.js',
- 'deps' => $frontend_shipping_asset['dependencies'],
- 'version' => $frontend_shipping_asset['version'],
+ 'deps' => $frontend_asset['dependencies'],
+ 'version' => $frontend_asset['version'],
], 📝 Committable suggestion
Suggested change
|
||||||||||||||||||||||
]; | ||||||||||||||||||||||
|
||||||||||||||||||||||
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' ); | ||||||||||||||||||||||
Comment on lines
+895
to
+896
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🛠️ Refactor suggestion Conditionally enqueue 'dokan-react-frontend' assets to optimize performance Currently, the scripts and styles for For example, you can modify the code to enqueue the assets conditionally: if ( /* condition to check if the assets are needed */ ) {
wp_enqueue_script( 'dokan-react-frontend' );
wp_enqueue_style( 'dokan-react-frontend' );
} Replace |
||||||||||||||||||||||
wp_enqueue_script( 'jquery' ); | ||||||||||||||||||||||
wp_enqueue_script( 'jquery-ui' ); | ||||||||||||||||||||||
wp_enqueue_script( 'jquery-ui-autocomplete' ); | ||||||||||||||||||||||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
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) => { | ||
|
||
|
||
// TODO add Parent route support. | ||
|
||
return { | ||
path: route.path, | ||
element: <Layout 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 /> | ||
); | ||
} ); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
@config './../../base-tailwind.config.js'; | ||
@import '../base-tailwind'; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
const NotFound = () => { | ||
return ( | ||
<div> | ||
<h1>404 - Not Found!</h1> | ||
</div> | ||
); | ||
} | ||
Comment on lines
+1
to
+7
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🛠️ Refactor suggestion Consider enhancing the NotFound component for better user experience and maintainability. While the current implementation is functional, consider the following improvements:
Here's an example of how you could improve the component: import React from 'react';
import { Link } from 'react-router-dom';
const NotFound: React.FC = () => {
return (
<main className="not-found">
<h1>404 - Not Found!</h1>
<p>Sorry, the page you are looking for does not exist.</p>
<Link to="/">Go back to homepage</Link>
</main>
);
}
export default NotFound; Note: This assumes you're using React Router for navigation. If not, adjust the import and |
||
|
||
export default NotFound; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import {Slot} from "@wordpress/components"; | ||
|
||
const Footer = () => { | ||
return <><Slot name="dokan-footer-area" /></>; | ||
}; | ||
|
||
export default Footer; | ||
Comment on lines
+1
to
+7
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🛠️ Refactor suggestion Consider enhancing type safety and documentation. The Footer component looks good overall, but consider these enhancements:
These changes would improve type safety and make the component's purpose clearer to other developers. Would you like me to prepare a diff with these changes? |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
import {Slot} from "@wordpress/components"; | ||
|
||
const Header = ( { title = '' } ) => { | ||
|
||
return ( | ||
<> | ||
<Slot name="dokan-before-header" /> | ||
<div className="dokan-header-title"> | ||
<h1 className="mb-4 text-3xl font-extrabold text-gray-900 dark:text-white md:text-5xl lg:text-6xl"><span | ||
className="text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400">{title}</span> </h1> | ||
</div> | ||
<div className="dokan-header-actions"> | ||
<Slot name="dokan-header-actions"/> | ||
</div> | ||
<Slot name="dokan-after-header"/> | ||
</> | ||
); | ||
}; | ||
|
||
export default Header; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
const Sidebar = () => { | ||
return <></>; | ||
}; | ||
|
||
export default Sidebar; |
Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
@@ -0,0 +1,74 @@ | ||||||||||||||||||||||||||||||||||||||||||
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 ); | ||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||
Comment on lines
+12
to
+13
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Provide a default value for Currently, Apply this diff to set a default value for -const ThemeContext = createContext( null );
+interface ThemeContextType {
+ theme: string;
+ setTheme: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const ThemeContext = createContext<ThemeContextType>({
+ theme: 'light',
+ setTheme: () => {},
+}); This defines an interface for the context and provides a default implementation. 📝 Committable suggestion
Suggested change
|
||||||||||||||||||||||||||||||||||||||||||
// Create a ThemeProvider component | ||||||||||||||||||||||||||||||||||||||||||
const ThemeProvider = ( { children } ) => { | ||||||||||||||||||||||||||||||||||||||||||
const [ theme, setTheme ] = useState( 'light' ); // Example theme state | ||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||
return ( | ||||||||||||||||||||||||||||||||||||||||||
<ThemeContext.Provider value={ { theme, setTheme } }> | ||||||||||||||||||||||||||||||||||||||||||
{ children } | ||||||||||||||||||||||||||||||||||||||||||
</ThemeContext.Provider> | ||||||||||||||||||||||||||||||||||||||||||
); | ||||||||||||||||||||||||||||||||||||||||||
}; | ||||||||||||||||||||||||||||||||||||||||||
Comment on lines
+15
to
+23
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🛠️ Refactor suggestion Enhance type safety for theme values. The theme state should be constrained to specific valid values. +type ThemeType = 'light' | 'dark';
+
const ThemeProvider = ( { children } ) => {
- const [ theme, setTheme ] = useState( 'light' ); // Example theme state
+ const [ theme, setTheme ] = useState<ThemeType>( 'light' ); 📝 Committable suggestion
Suggested change
|
||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||
export type DokanRoute = { | ||||||||||||||||||||||||||||||||||||||||||
id: string; | ||||||||||||||||||||||||||||||||||||||||||
title?: string; | ||||||||||||||||||||||||||||||||||||||||||
icon?: JSX.Element | React.ReactNode; | ||||||||||||||||||||||||||||||||||||||||||
element: JSX.Element | React.ReactNode; | ||||||||||||||||||||||||||||||||||||||||||
path: string; | ||||||||||||||||||||||||||||||||||||||||||
exact?: boolean; | ||||||||||||||||||||||||||||||||||||||||||
order?: number; | ||||||||||||||||||||||||||||||||||||||||||
parent?: string; | ||||||||||||||||||||||||||||||||||||||||||
}; | ||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||
interface LayoutProps { | ||||||||||||||||||||||||||||||||||||||||||
children: React.ReactNode; | ||||||||||||||||||||||||||||||||||||||||||
route: DokanRoute; | ||||||||||||||||||||||||||||||||||||||||||
title?: string; | ||||||||||||||||||||||||||||||||||||||||||
headerComponent?: JSX.Element; | ||||||||||||||||||||||||||||||||||||||||||
footerComponent?: JSX.Element; | ||||||||||||||||||||||||||||||||||||||||||
} | ||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||
// 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} /> | ||||||||||||||||||||||||||||||||||||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Add a null check for In Apply this diff to add a safety check: -<PluginArea scope={route.id} />
+{ route?.id && <PluginArea scope={route.id} /> } This change ensures that the 📝 Committable suggestion
Suggested change
|
||||||||||||||||||||||||||||||||||||||||||
</SlotFillProvider> | ||||||||||||||||||||||||||||||||||||||||||
</ThemeProvider> | ||||||||||||||||||||||||||||||||||||||||||
); | ||||||||||||||||||||||||||||||||||||||||||
}; | ||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||
// Custom hook to use the ThemeContext | ||||||||||||||||||||||||||||||||||||||||||
export const useTheme = () => { | ||||||||||||||||||||||||||||||||||||||||||
return useContext( ThemeContext ); | ||||||||||||||||||||||||||||||||||||||||||
}; | ||||||||||||||||||||||||||||||||||||||||||
Comment on lines
+74
to
+76
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🛠️ Refactor suggestion Add error handling to useTheme hook. The hook should handle cases where it's used outside of ThemeProvider. export const useTheme = () => {
- return useContext( ThemeContext );
+ const context = useContext( ThemeContext );
+ if (context === null) {
+ throw new Error('useTheme must be used within a ThemeProvider');
+ }
+ return context;
}; 📝 Committable suggestion
Suggested change
|
||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||
export default Layout; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use 'exclude' option instead of negation in 'content' array
In line 11, the
content
array includes a negation pattern'!./**/*.asset.php'
. Tailwind CSS does not support negation patterns in thecontent
array. Instead, you should use theexclude
option to exclude files or directories.Apply this diff to correct the configuration: