WP Admin Components

WordPress admin UI as React components for plugin development. These are very minimal components, for building plugin UIs that look like WordPress. There is no CSS, the CSS and layout of a WordPress admin page is assumed.

When using this in a plugin or theme, make sure to use @wordpress/script. This is configured automatically when you create plugins with Plugin Machine.

- Storybook Documentation
- Github
- 
- !npm

Usage

$3

``bash
yarn add @imaginary-machines/wp-admin-components
`

or

`bash
npm i @imaginary-machines/wp-admin-components
`

$3

!buttons-first

`jsx

import {Button} from "@imaginary-machines/wp-admin-components"
{console.log('Clicked')}}>Click Me
`

$3

`jsx
import {Tabs} from "@imaginary-machines/wp-admin-components"

initialTabe={'two'}
tabs={[
{id: 'one', children:

`jsx
import {Notice} from "@imaginary-machines/wp-admin-components"

heading={"Hey You! Buy Things!"}
link={"https://hiroy.club/store"}
description={"Click This Link"}
type="ifno"
isDismissable={true}
onDismissed={()=> {
//...
}}
/>
`
#### Dismissable Error Notice

`jsx
import {Notice} from "@imaginary-machines/wp-admin-components"

description={"There Was Error"}
type="error"
isDismissable={true}
onDismissed={()=> {
//...
}}
/>
`


$3

`jsx
import {
Form,
FormTable,
FormProps,
TrInput,
TrSelect,
TrSubmitButton
}
from "@imaginary-machines/wp-admin-components";

const SettingsForm = () => {

const [values,setValues] = useState({
input:'Input',
select:'two'
});
const onSubmit = () => {}
return (


`

$3

`jsx
import {Metabox,MetaboxWrapper} from "@imaginary-machines/wp-admin-components"

Inside the box


Blocks


`

Development

The recommended workflow is to run TSDX in one terminal:

`bash
yarn start
`

This builds to /dist and runs the project in watch mode so any edits you save inside src causes a rebuild to /dist.

Then run either Storybook or tests

$3

Run inside another terminal:

`bash
yarn storybook
`

This loads the stories from ./stories.

> NOTE: Stories should reference the components as if using the library, similar to the example playground. This means importing from the root project directory. This has been aliased in the tsconfig and the storybook webpack config as a helper.

$3

Jest tests are set up to run with or yarn test.

$3

`bash
npm publish --access public
``