PHP Classes

WordPress React Plugin Kit: Environment to develop new WordPress plugins

Recommend this page to a friend!
  Info   Documentation   View files Files   Install with Composer Install with Composer   Download Download   Reputation   Support forum   Blog    
Ratings Unique User Downloads Download Rankings
Not yet rated by the usersTotal: 39 All time: 10,910 This week: 96Up
Version License PHP version Categories
wp-react-kit 1.0MIT/X Consortium ...5PHP 5, Content management, Blogs
Description 

Author

This package provides an environment to develop new WordPress plugins.

It comes with several packages that perform several operations to help in the development cycle of a WordPress plugin.

Currently it can:

- Provide a Web server page to activate the plugin

- Perform unit testing of the plugin code

- Check the errors in the plugin PHP code

- Provide an API to call the plugin features from an external Web services client

Innovation Award
PHP Programming Innovation award nominee
August 2022
Number 9
WordPress is a popular content management system written in PHP that allows extending its features using plugins.

This package provides a base environment that allows the creation, activation, and testing of a new WordPress plugin and an API that exposes the features of that plugin to external applications and sites.

Manuel Lemos
Picture of Maniruzzaman Akash
  Performance   Level  
Name: Maniruzzaman Akash <contact>
Classes: 19 packages by
Country: Bangladesh Bangladesh
Age: 28
All time rank: 320244 in Bangladesh Bangladesh
Week rank: 49 Up1 in Bangladesh Bangladesh Up
Innovation award
Innovation award
Nominee: 7x

Documentation

WP-React-Kit

A simple starter kit to work in WordPress plugin development using WordPress Rest API, WP-script, React, React Router, Tailwind CSS, PostCSS, Eslint, WP-Data, WP-Data Store, React Components, React CRUD, i18n, PHPUnit Test, JestUnit Test, e2e Test and PHP OOP plugin architecture easily in a minute.

What's included?

  1. WordPress Rest API
  2. WP-script Setup
  3. React
  4. React Router
  5. TypeScript
  6. Tailwind CSS [Nested + ]
  7. Scss
  8. PostCSS
  9. Eslint
  10. WP-Data
  11. WP-Data Redux Store [Redux Saga, Generator function, Thunk, Saga Middleware]
  12. React Components
  13. React CRUD Operations [Continuing...]
  14. Internationalization - WP i18n
  15. PHPUnit Test [Test + Fix]
  16. JestUnit Test
  17. Jest-Pupetter e2e Test
  18. PHP OOP plugin architecture [Traits + Interfaces + Abstract Classes]

Quick Start

# Clone the Git repository
git clone https://github.com/ManiruzzamanAkash/wp-react-kit.git

# Install PHP-composer dependencies [It's empty]
composer install

# Install node module packages
npm i

# Start development mode
npm start

# Start development with hot reload (Frontend components will be updated automatically if any changes are made)
npm run start:hot

# To run in production
npm run build

After running start, or build command, there will be a folder called /build will be generated at the root directory.

Activate the plugin

You need activate the plugin from plugin list page. http://localhost/wpex/wp-admin/plugins.php

Run PHP Unit Test

./vendor/bin/phpunit

Run Jest Unit Test

npm run test:unit

Run Jest-Pupeteer e2e Test

WordPress core doc link: https://make.wordpress.org/core/2019/06/27/introducing-the-wordpress-e2e-tests/

Requirements: - Must have docker installed and running by ensuring these commands -

npm run env:stop
npm run env:start

Normal e2e test

npm run test:e2e

Interactive e2e test

npm run test:e2e:watch

PHP Coding Standards - PHPCS

Get all errors of the project:

vendor/bin/phpcs .

Fix all errors of the project:

vendor/bin/phpcbf .

Browse Plugin

http://localhost/wpex/wp-admin/admin.php?page=jobplace#/

Where, /wpex is the project root folder inside /htdocs.

Or, it could be your custom processed URL.

REST API's

Postman API Link - https://www.getpostman.com/collections/f94073131fc1411506e8

REST API Documentation

  1. Job Types - Method: `GET` - URL: http://localhost/wpex/wp-json/job-place/v1/job-types
  2. Job Lists - Method: `GET` - URL: http://localhost/wpex/wp-json/job-place/v1/jobs
  3. Job Details - Method: `GET` - URL By ID: http://localhost/wpex/wp-json/job-place/v1/jobs/1 - URL By Slug: http://localhost/wpex/wp-json/job-place/v1/jobs/first-job
  4. Create Job
    - Method: `POST`
    - URL: http://localhost/wpex/wp-json/job-place/v1/Jobs
    - Body:
    {
        "title": "Simple Job Post",
        "slug": "simple-job-post",
        "description": "Simple job post description",
        "company_id": 1,
        "job_type_id": 2,
        "is_active": 1
    }
    
  5. Update Job
    - Method: `PUT`
    - URL: http://localhost/wpex/wp-json/job-place/v1/jobs/1
    - Body:
    {
        "title": "Simple Job Post Updated",
        "slug": "simple-job-post-updated",
        "description": "Simple job post description",
        "company_id": 1,
        "job_type_id": 2,
        "is_active": 1
    }
    
  6. Delete Jobs
    - Method: `DELETE`
    - URL: http://localhost/wpex/wp-json/job-place/v1/jobs
    - Body:
    {
        "ids": [1, 2]
    }
    

Detailed Documentation - View Detailed documentations with parameters and responses of the REST API

Version & Changelogs

v0.4.1 - 18/08/2022

  1. Added Jest Unit Test Setup.
  2. Added some dummy Jest Unit Test.
  3. Fix #11 - Version naming while installing.

v0.4.0 - 12/08/2022

  1. Added many re-usable general components.
  2. Header Component refactored and re-designed.
  3. WP-Data setup and made Job Store.
  4. Job List Page frontend added.

v0.3.1 - 11/08/2022

  1. PHPUnit Test cases setup.
  2. PHPUnit Test cases added for Job Manager and Job REST API's.

v0.3.0 - 02/08/2022

  1. Necessary traits to handle - sanitization, query.
  2. Advanced setup for migration, seeder, REST API.
  3. Jobs, Job Types REST API developed.

<details>

<summary>Options for specific files:</summary>

Get specific file errors of the project:

vendor/bin/phpcs job-place.php

Fix specific file errors of the project:

vendor/bin/phpcbf job-place.php

</details>

Versions

<details>

<summary>Simple Version with raw PHP</summary>

https://github.com/ManiruzzamanAkash/wp-react-kit/releases/tag/vSimple </details>

<details>

<summary>Version with EsLint and i18n Setup</summary>

https://github.com/ManiruzzamanAkash/wp-react-kit/releases/tag/vSimpleEslint </details>

<details>

<summary>Version with EsLint, i18n and React Router Setup</summary>

https://github.com/ManiruzzamanAkash/wp-react-kit/releases/tag/vReactRouter </details>

<details>

<summary>Version with PostCSS and Tailwind CSS Setup</summary>

https://github.com/ManiruzzamanAkash/wp-react-kit/releases/tag/vTailwindCss </details>

<details>

<summary>Version with PHPCS setup</summary>

https://github.com/ManiruzzamanAkash/wp-react-kit/releases/tag/vPHPCS </details>

<details>

<summary>Version with PHP OOP Architecture</summary>

https://github.com/ManiruzzamanAkash/wp-react-kit/releases/tag/vPhpOOP </details>

File structure:

<details>

<summary>Simple Version Code-Structure:</summary>

Simple Version </details>

Demo with Simple Version

<details>

<summary>Demo in WordPress plugin:</summary>

Demo Plugin </details>

Demo With React Router & Menu

Demo Plugin

Final Demos

Job List Page

Job List Page

Job List Page with Pagination

Job List Page with Pagination

Job List Page with search

Job List Page with Search


  Files folder image Files (134)  
File Role Description
Files folder imageincludes (10 directories)
Files folder imagesrc (2 files, 7 directories)
Files folder imagetemplates (1 file)
Files folder imagetests (3 directories)
Accessible without login Plain text file .babelrc.js Data Auxiliary data
Accessible without login Plain text file .eslintignore Data Auxiliary data
Accessible without login Plain text file .eslintrc Data Auxiliary data
Accessible without login Plain text file .php_cs Example Example script
Accessible without login Plain text file composer.json Data Auxiliary data
Accessible without login Plain text file composer.lock Data Auxiliary data
Accessible without login Plain text file jest-unit.config.js Data Auxiliary data
Plain text file job-place.php Class Class source
Accessible without login Plain text file package-lock.json Data Auxiliary data
Accessible without login Plain text file package.json Data Auxiliary data
Accessible without login Plain text file phpcs.xml Data Auxiliary data
Accessible without login Plain text file phpunit.xml.dist Data Auxiliary data
Accessible without login Plain text file postcss.config.js Data Auxiliary data
Accessible without login Plain text file README.md Doc. Documentation
Accessible without login Plain text file Rest-API-Docs.MD Data Auxiliary data
Accessible without login Plain text file tailwind.config.js Data Auxiliary data
Accessible without login Plain text file tsconfig.json Data Auxiliary data
Accessible without login Plain text file webpack.config.js Data Auxiliary data

  Files folder image Files (134)  /  includes  
File Role Description
Files folder imageAbstracts (4 files)
Files folder imageAdmin (1 file)
Files folder imageAssets (1 file)
Files folder imageCommon (1 file)
Files folder imageDatabases (2 directories)
Files folder imageJobs (4 files)
Files folder imageREST (3 files)
Files folder imageSetup (1 file)
Files folder imageTraits (2 files)
Files folder imageUser (1 file)

  Files folder image Files (134)  /  includes  /  Abstracts  
File Role Description
  Plain text file BaseModel.php Class Class source
  Plain text file DBMigrator.php Class Class source
  Plain text file DBSeeder.php Class Class source
  Plain text file RESTController.php Class Class source

  Files folder image Files (134)  /  includes  /  Admin  
File Role Description
  Plain text file Menu.php Class Class source

  Files folder image Files (134)  /  includes  /  Assets  
File Role Description
  Plain text file Manager.php Class Class source

  Files folder image Files (134)  /  includes  /  Common  
File Role Description
  Plain text file Keys.php Class Class source

  Files folder image Files (134)  /  includes  /  Databases  
File Role Description
Files folder imageMigrations (1 file)
Files folder imageSeeder (2 files)

  Files folder image Files (134)  /  includes  /  Databases  /  Migrations  
File Role Description
  Plain text file JobsMigration.php Class Class source

  Files folder image Files (134)  /  includes  /  Databases  /  Seeder  
File Role Description
  Plain text file JobsSeeder.php Class Class source
  Plain text file Manager.php Class Class source

  Files folder image Files (134)  /  includes  /  Jobs  
File Role Description
  Plain text file Job.php Class Class source
  Plain text file JobStatus.php Class Class source
  Plain text file JobType.php Class Class source
  Plain text file Manager.php Class Class source

  Files folder image Files (134)  /  includes  /  REST  
File Role Description
  Plain text file JobsController.php Class Class source
  Plain text file JobTypesController.php Class Class source
  Plain text file Manager.php Class Class source

  Files folder image Files (134)  /  includes  /  Setup  
File Role Description
  Plain text file Installer.php Class Class source

  Files folder image Files (134)  /  includes  /  Traits  
File Role Description
  Plain text file InputSanitizer.php Class Class source
  Plain text file Queryable.php Class Class source

  Files folder image Files (134)  /  includes  /  User  
File Role Description
  Plain text file Hooks.php Class Class source

  Files folder image Files (134)  /  src  
File Role Description
Files folder imagecomponents (16 directories)
Files folder imagedata (1 file, 1 directory)
Files folder imagehooks (3 files)
Files folder imagepages (1 file, 1 directory)
Files folder imageroutes (1 file)
Files folder imagestyle (2 files)
Files folder imageutils (8 files)
  Accessible without login Plain text file App.tsx Data Auxiliary data
  Accessible without login Plain text file index.tsx Data Auxiliary data

  Files folder image Files (134)  /  src  /  components  
File Role Description
Files folder imagebadge (2 files, 1 directory)
Files folder imagebutton (2 files)
Files folder imagedashboard (1 file)
Files folder imagedate-picker (3 files)
Files folder imageinputs (7 files)
Files folder imagejobs (3 files)
Files folder imagelayout (4 files)
Files folder imageloading (14 files)
Files folder imagemodal (2 files)
Files folder imagepage-partials (2 files)
Files folder imagepagination (2 files)
Files folder imagespinner (2 files)
Files folder imagesvg (5 files)
Files folder imagetab (2 files)
Files folder imagetable (3 files)
Files folder imagetooltip (3 files)

  Files folder image Files (134)  /  src  /  components  /  badge  
File Role Description
Files folder image__tests__ (1 file)
  Accessible without login Plain text file Badge.stories.tsx Data Auxiliary data
  Accessible without login Plain text file Badge.tsx Data Auxiliary data

  Files folder image Files (134)  /  src  /  components  /  badge  /  __tests__  
File Role Description
  Accessible without login Plain text file Badge.test.tsx Data Auxiliary data

  Files folder image Files (134)  /  src  /  components  /  button  
File Role Description
  Accessible without login Plain text file Button.stories.tsx Data Auxiliary data
  Accessible without login Plain text file Button.tsx Data Auxiliary data

  Files folder image Files (134)  /  src  /  components  /  dashboard  
File Role Description
  Accessible without login Plain text file Dashboard.tsx Data Auxiliary data

  Files folder image Files (134)  /  src  /  components  /  date-picker  
File Role Description
  Accessible without login Plain text file DatePicker.stories.tsx Data Auxiliary data
  Accessible without login Plain text file DatePicker.tsx Data Auxiliary data
  Accessible without login Plain text file DatePickerData.ts Data Auxiliary data

  Files folder image Files (134)  /  src  /  components  /  inputs  
File Role Description
  Accessible without login Plain text file Input.stories.tsx Data Auxiliary data
  Accessible without login Plain text file Input.tsx Data Auxiliary data
  Accessible without login Plain text file InputLabel.tsx Data Auxiliary data
  Accessible without login Plain text file Select2Input.stories.tsx Data Auxiliary data
  Accessible without login Plain text file Select2Input.tsx Data Auxiliary data
  Accessible without login Plain text file SwitchCheckbox.tsx Data Auxiliary data
  Accessible without login Plain text file SwitchInput.stories.tsx Data Auxiliary data

  Files folder image Files (134)  /  src  /  components  /  jobs  
File Role Description
  Accessible without login Plain text file ListItemMenu.tsx Data Auxiliary data
  Accessible without login Plain text file SelectCheckBox.tsx Data Auxiliary data
  Accessible without login Plain text file use-table-data.tsx Data Auxiliary data

  Files folder image Files (134)  /  src  /  components  /  layout  
File Role Description
  Accessible without login Plain text file Header.tsx Data Auxiliary data
  Accessible without login Plain text file Layout.tsx Data Auxiliary data
  Accessible without login Plain text file NavMenu.tsx Data Auxiliary data
  Accessible without login Plain text file PageHeading.tsx Data Auxiliary data

  Files folder image Files (134)  /  src  /  components  /  loading  
File Role Description
  Accessible without login Plain text file BarChartLoading.stories.tsx Data Auxiliary data
  Accessible without login Plain text file BarChartLoading.tsx Data Auxiliary data
  Accessible without login Plain text file DashboardCardLoading.stories.tsx Data Auxiliary data
  Accessible without login Plain text file DashboardCardLoading.tsx Data Auxiliary data
  Accessible without login Plain text file LineChartLoading.stories.tsx Data Auxiliary data
  Accessible without login Plain text file LineChartLoading.tsx Data Auxiliary data
  Accessible without login Plain text file Loading.stories.tsx Data Auxiliary data
  Accessible without login Plain text file Loading.tsx Data Auxiliary data
  Accessible without login Plain text file OverlayLoading.tsx Data Auxiliary data
  Accessible without login Plain text file SettingsLoading.stories.tsx Data Auxiliary data
  Accessible without login Plain text file SettingsLoading.tsx Data Auxiliary data
  Accessible without login Plain text file SettingsSectionLoading.tsx Data Auxiliary data
  Accessible without login Plain text file TableLoading.stories.tsx Data Auxiliary data
  Accessible without login Plain text file TableLoading.tsx Data Auxiliary data

  Files folder image Files (134)  /  src  /  components  /  modal  
File Role Description
  Accessible without login Plain text file Modal.stories.tsx Data Auxiliary data
  Accessible without login Plain text file Modal.tsx Data Auxiliary data

  Files folder image Files (134)  /  src  /  components  /  page-partials  
File Role Description
  Accessible without login Plain text file SelectedItem.tsx Data Auxiliary data
  Accessible without login Plain text file SelectListItem.tsx Data Auxiliary data

  Files folder image Files (134)  /  src  /  components  /  pagination  
File Role Description
  Accessible without login Plain text file Pagination.stories.tsx Data Auxiliary data
  Accessible without login Plain text file Pagination.tsx Data Auxiliary data

  Files folder image Files (134)  /  src  /  components  /  spinner  
File Role Description
  Accessible without login Plain text file Spinner.stories.tsx Data Auxiliary data
  Accessible without login Plain text file Spinner.tsx Data Auxiliary data

  Files folder image Files (134)  /  src  /  components  /  svg  
File Role Description
  Accessible without login Plain text file LogoIcon.tsx Data Auxiliary data
  Accessible without login Plain text file SvgCircleDefaultIcon.tsx Data Auxiliary data
  Accessible without login Plain text file SvgCirclePrimaryIcon.tsx Data Auxiliary data
  Accessible without login Plain text file SvgCircleSuccessIcon.tsx Data Auxiliary data
  Accessible without login Plain text file SvgCircleWarningIcon.tsx Data Auxiliary data

  Files folder image Files (134)  /  src  /  components  /  tab  
File Role Description
  Accessible without login Plain text file Tab.stories.tsx Data Auxiliary data
  Accessible without login Plain text file Tab.tsx Data Auxiliary data

  Files folder image Files (134)  /  src  /  components  /  table  
File Role Description
  Accessible without login Plain text file Table.stories.tsx Data Auxiliary data
  Accessible without login Plain text file Table.tsx Data Auxiliary data
  Accessible without login Plain text file TableInterface.ts Data Auxiliary data

  Files folder image Files (134)  /  src  /  components  /  tooltip  
File Role Description
  Accessible without login Plain text file ProNotExistTooltip.tsx Data Auxiliary data
  Accessible without login Plain text file tooltip-style.scss Data Auxiliary data
  Accessible without login Plain text file Tooltip.tsx Data Auxiliary data

  Files folder image Files (134)  /  src  /  data  
File Role Description
Files folder imagejobs (9 files)
  Accessible without login Plain text file store.ts Data Auxiliary data

  Files folder image Files (134)  /  src  /  data  /  jobs  
File Role Description
  Accessible without login Plain text file actions.ts Data Auxiliary data
  Accessible without login Plain text file controls.ts Data Auxiliary data
  Accessible without login Plain text file endpoint.ts Data Auxiliary data
  Accessible without login Plain text file index.ts Data Auxiliary data
  Accessible without login Plain text file interfaces.ts Data Auxiliary data
  Accessible without login Plain text file reducer.ts Data Auxiliary data
  Accessible without login Plain text file resolvers.ts Data Auxiliary data
  Accessible without login Plain text file selectors.ts Data Auxiliary data
  Accessible without login Plain text file types.ts Data Auxiliary data

  Files folder image Files (134)  /  src  /  hooks  
File Role Description
  Accessible without login Plain text file useConfirmReload.tsx Data Auxiliary data
  Accessible without login Plain text file useMenuFix.tsx Data Auxiliary data
  Accessible without login Plain text file useOutsideClick.tsx Data Auxiliary data

  Files folder image Files (134)  /  src  /  pages  
File Role Description
Files folder imagejobs (1 file)
  Accessible without login Plain text file HomePage.tsx Data Auxiliary data

  Files folder image Files (134)  /  src  /  pages  /  jobs  
File Role Description
  Accessible without login Plain text file JobsPage.tsx Data Auxiliary data

  Files folder image Files (134)  /  src  /  routes  
File Role Description
  Accessible without login Plain text file index.ts Data Auxiliary data

  Files folder image Files (134)  /  src  /  style  
File Role Description
  Accessible without login Plain text file main.scss Data Auxiliary data
  Accessible without login Plain text file tailwind.css Data Auxiliary data

  Files folder image Files (134)  /  src  /  utils  
File Role Description
  Accessible without login Plain text file DateHelper.ts Data Auxiliary data
  Accessible without login Plain text file global-data.ts Data Auxiliary data
  Accessible without login Plain text file http.ts Data Auxiliary data
  Accessible without login Plain text file MenuFix.ts Data Auxiliary data
  Accessible without login Plain text file NumberFormat.ts Data Auxiliary data
  Accessible without login Plain text file Select2Helper.ts Data Auxiliary data
  Accessible without login Plain text file StringHelper.ts Data Auxiliary data
  Accessible without login Plain text file text-parser.ts Data Auxiliary data

  Files folder image Files (134)  /  templates  
File Role Description
  Accessible without login Plain text file app.php Aux. Auxiliary script

  Files folder image Files (134)  /  tests  
File Role Description
Files folder imagee2e (2 directories)
Files folder imagephpunit (2 files, 3 directories)
Files folder imageunit (1 directory)

  Files folder image Files (134)  /  tests  /  e2e  
File Role Description
Files folder imagespecs (1 file)
Files folder imageunit (1 file)

  Files folder image Files (134)  /  tests  /  e2e  /  specs  
File Role Description
  Accessible without login Plain text file env.spec.js Data Auxiliary data

  Files folder image Files (134)  /  tests  /  e2e  /  unit  
File Role Description
  Accessible without login Plain text file example.test.ts Data Auxiliary data

  Files folder image Files (134)  /  tests  /  phpunit  
File Role Description
Files folder imageApi (1 file)
Files folder imageInstall (1 file)
Files folder imageJobs (1 file)
  Accessible without login Plain text file bootstrap.php Example Example script
  Accessible without login Plain text file wp-config.php Aux. Auxiliary script

  Files folder image Files (134)  /  tests  /  phpunit  /  Api  
File Role Description
  Plain text file JobRestApiTest.php Class Class source

  Files folder image Files (134)  /  tests  /  phpunit  /  Install  
File Role Description
  Plain text file RunnerTest.php Class Class source

  Files folder image Files (134)  /  tests  /  phpunit  /  Jobs  
File Role Description
  Plain text file JobManagerTest.php Class Class source

  Files folder image Files (134)  /  tests  /  unit  
File Role Description
Files folder imageconfig (1 file)

  Files folder image Files (134)  /  tests  /  unit  /  config  
File Role Description
  Accessible without login Plain text file testing-library.js Data Auxiliary data

The PHP Classes site has supported package installation using the Composer tool since 2013, as you may verify by reading this instructions page.
Install with Composer Install with Composer
 Version Control Unique User Downloads Download Rankings  
 100%
Total:39
This week:0
All time:10,910
This week:96Up