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
• 
• 

Usage

Install

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

or

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

Buttons

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

Tabs

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

<Tabs
  initialTabe={'two'}
  tabs={[
    {id: 'one', children:<div>Tab One Content</div>,label:'One'},
    {id: 'two', children:<div>Tab Two Content</div>,label:'Two'},
    {id: 'three', children:<div>Tab Three Content</div>,label:'Three'},
]}/>

Notices

Dismissable Info Notice

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

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

Dismissable Error Notice

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

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

Forms

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 (
      <Form id={id} onSubmit={onSubmit}>
        <FormTable >
            <>
                <TrInput
                    label={'Input Field'}
                    id={'input'}
                    name={'input'}
                    value={values.input}
                    onChange={(value:string) => setValues({...values,input:value})}
                />
                <TrSelect
                    label={'Select Field'}
                    id={'select'}
                    name={'select'}
                    value={values.select}
                    onChange={(value:string) => setValues({...values,select:value})}
                />
                <TrSubmitButton
                    id={'submit-button'}
                    name={'submit-button'}
                    value={'Save'}
                />
            </>
        </FormTable>
    </Form>
  )
}

Collapsable Metabox

import {Metabox,MetaboxWrapper} from  "@imaginary-machines/wp-admin-components"
<MetaboxWrapper>
  <Metabox title={'Metabox Tile'}> Inside the box</Metabox>
    <Metabox title={'Another Metabox Tile'}><p>Blocks</p></Metabox>

</MetaboxWrapper>

Development

The recommended workflow is to run TSDX in one terminal:

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

Storybook

Run inside another terminal:

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.

Tests

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

Publish to npm

npm publish --access public