enhance: Introduce dataviews component and update webpack. (#2497)

* feat: introduce dataviews from dokan free. * feat: introduce dataviews from dokan free. * revert: add dokan category comission js. * update: remove category commission js updates. * remove: revert component package js file. * remove: dokan sidebar class from data view table. * enhance: update dataviews doc. * update: filter naming convension for dataviews property. * remove: module federation node package from json file. * remove: example dataviews table usage component. * remove: example dataviews table usage component. * update: button class name for color scheme customizer. * update: split webpack entries, use change-case for namespace cases, handle responsive preview from base components. * update: introduce utilities directory, make exporter from dokan free & add documentation for components, utilities. * update: routing folder naming convesional stuff. * update: add component and utilities accessor doc for dokan free. * Add router param add dataview table id * fix: add file exists check before register components scripts. * revert: remove default config from webpack entries. * enhance: separate hooks & introduce @dokan/hooks. * enhance: add documentation for hooks and update viewport file extension. * remove: react components manual enqueue. * update: variable name of component assets path. --------- Co-authored-by: Aunshon <[email protected]>
getdokan · Jan 20, 2025 · 4692634 · 4692634
1 parent 7a1c587
commit 4692634
Show file tree

Hide file tree

Showing 25 changed files with 9,323 additions and 3,896 deletions.
diff --git a/docs/frontend/components.md b/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';
+```