Sulu

https://github.com/sulu/sulu
Admin
Sulu is an extensible open-source PHP content management system built on the Symfony framework,...
Tokens:72,133
Snippets:738
Trust Score:9.8
License:MIT
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install Loupe adapter

Source: https://github.com/sulu/sulu/blob/3.0/UPGRADE-3.x.md

Install the required SEAL Loupe adapter via composer.

```bash
composer require cmsig/seal-loupe-adapter --no-scripts
```

--------------------------------

### Basic Toolbar Implementation

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/components/Toolbar/README.md

A simple example showing how to wrap Toolbar.Button components within Toolbar.Controls.

```javascript
<Toolbar>
    <Toolbar.Controls>
        <Toolbar.Button onClick={() => null}>Test 1</Toolbar.Button>
        <Toolbar.Button onClick={() => null}>Test 2</Toolbar.Button>
    </Toolbar.Controls>
</Toolbar>
```

--------------------------------

### Install PHPCR Migration Bundle

Source: https://github.com/sulu/sulu/blob/3.0/UPGRADE-3.x.md

Install the migration bundle via composer to facilitate the transition from PHPCR to the new content storage.

```shell
composer require sulu/phpcr-migration-bundle
```

--------------------------------

### Install Doctrine Migrations Bundle

Source: https://github.com/sulu/sulu/blob/3.0/UPGRADE-3.x.md

Install the required bundle to manage core migrations.

```bash
composer require doctrine/doctrine-migrations-bundle
```

--------------------------------

### Install SQLite extension

Source: https://github.com/sulu/sulu/blob/3.0/UPGRADE-3.x.md

Install the necessary PHP SQLite extension on Linux.

```bash
apt-get update
apt-get install php8.4-sqlite3
```

--------------------------------

### Implementing the Matrix component

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/components/Matrix/README.md

This example demonstrates how to initialize the Matrix component state and render the structure using Row and Item sub-components.

```javascript
const [value, setValue] = React.useState({
    'global.articles': {
        'view': true,
        'edit': true,
        'delete': false,
    },
    'global.redirects': {
        'view': true,
    },
    'global.settings': {
        'view': true,
        'edit': false,
    },
});

const onChange = (value) => setValue(value);

const Row = Matrix.Row;
const Item = Matrix.Item;

<Matrix title="Global" onChange={onChange} values={value}>
    <Row name="global.articles">
        <Item name="view" icon="su-pen" />
        <Item name="edit" icon="su-plus" />
        <Item name="delete" icon="su-trash-alt" />
    </Row>
    <Row name="global.redirects">
        <Item name="view" icon="su-pen" />
    </Row>
    <Row name="global.settings">
        <Item name="view" icon="su-pen" />
        <Item name="edit" icon="su-plus" />
    </Row>
</Matrix>
```

--------------------------------

### Basic MultiItemSelection implementation

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/components/MultiItemSelection/README.md

Demonstrates a basic setup with sorting and item addition capabilities.

```javascript
const arrayMove = require('sulu-admin-bundle/utils').arrayMove;
const Item = MultiItemSelection.Item;

const [items, setItems] = React.useState([
    {
        id: 1,
        content: 'I am an item. Hihi :)'
    },
    {
        id: 2,
        content: 'Lorem ipsum doloris sit amet'
    },
    {
        id: 3,
        content: 'Thomas the little locomotive'
    },
]);

const handleItemsSorted = (oldItemIndex, newItemIndex) => {
    setItems(arrayMove(items, oldItemIndex, newItemIndex));
};

const handleAddItem = () => {
    items.push({
        id: Date.now(),
        content: 'I was added :D'
    }),

    setItems(items);
};

<MultiItemSelection
    label="Select an item"
    leftButton={{
        icon: 'su-plus-circle',
        onClick: handleAddItem,
    }}
    onItemsSorted={handleItemsSorted}
>
    {items.map((item, index) =>
        <Item
            key={item.id}
            id={item.id}
            index={index + 1}
        >
            <div style={{height: '40px', lineHeight: '40px'}}>
                {item.content}
            </div>
        </Item>
    )}
</MultiItemSelection>
```

--------------------------------

### Implementing FieldBlocks with custom types

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/containers/FieldBlocks/README.md

Example showing how to register a field type and initialize the FieldBlocks component with a schema and state.

```javascript
const fieldRegistry = require('../Form/registries/fieldRegistry').default;

if (!fieldRegistry.has('text_line')) {
    fieldRegistry.add('text_line', () => (<input type="text" />));
}

const [value, setValue] = React.useState([
    {
        type: 'default',
        text: 'Test',
    }
]);

const types = {
    default: {
    	title: 'Default',
        form: {
            text: {
                type: 'text_line',
            },
        },
    },
    extended: {
    	title: 'Extended',
        form: {
        	text1: {
            	type: 'text_line',
            },
            text2: {
            	type: 'text_line',
            }
        }
    }
};

const formInspector = {
    getSchemaEntryByPath: () => ({types}),
    isFieldModified: () => {},
};

<FieldBlocks
    defaultType="default"
    formInspector={formInspector}
    onChange={setValue}
    onFinish={() => alert('Some field in the block lost its focus')}
    types={types}
    value={value}
/>
```

--------------------------------

### Implement a Grid layout

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/components/Grid/README.md

Example showing the nesting of Grid, Section, and Item components to create a structured layout.

```javascript
import Input from '../Input';

const boxStyles = {
    width: `100%`,
    height: 30,
    margin: 2,
};

<Grid>
    <Grid.Section colSpan={4}>
        <Grid.Item colSpan={12}>
            <div style={{width: `100%`, height: 200, backgroundColor: '#bada55'}} />
        </Grid.Item>
    </Grid.Section>
    <Grid.Section colSpan={8}>
        <Grid.Item colSpan={4} spaceAfter={4}>
            <div style={boxStyles}>
                <Input />
            </div>
        </Grid.Item>
        <Grid.Item colSpan={4}>
            <div style={boxStyles}>
                <Input />
            </div>
        </Grid.Item>
        <Grid.Item colSpan={4}>
            <div style={boxStyles}>
                <Input />
            </div>
        </Grid.Item>
        <Grid.Item colSpan={2}>
            <div style={boxStyles}>
                <Input />
            </div>
        </Grid.Item>
        <Grid.Item colSpan={2}>
            <div style={boxStyles}>
                <Input />
            </div>
        </Grid.Item>
        <Grid.Item colSpan={4}>
            <div style={boxStyles}>
                <Input />
            </div>
        </Grid.Item>
        <Grid.Item colSpan={4}>
            <div style={boxStyles}>
                <Input />
            </div>
        </Grid.Item>
        <Grid.Item colSpan={4}>
            <div style={boxStyles}>
                <Input />
            </div>
        </Grid.Item>
        <Grid.Item colSpan={4}>
            <div style={boxStyles}>
                <Input />
            </div>
        </Grid.Item>
        <Grid.Item colSpan={4}>
            <div style={boxStyles}>
                <Input />
            </div>
        </Grid.Item>
        <Grid.Item colSpan={4}>
            <div style={boxStyles}>
                <Input />
            </div>
        </Grid.Item>
        <Grid.Item colSpan={8}>
            <div style={boxStyles}>
                <Input />
            </div>
        </Grid.Item>
        <Grid.Item colSpan={4}>
            <div style={boxStyles}>
                <Input />
            </div>
        </Grid.Item>
    </Grid.Section>
    <Grid.Section colSpan={12}>
        <Grid.Item colSpan={4}>
            <div style={boxStyles}>
                <Input />
            </div>
        </Grid.Item>
        <Grid.Item colSpan={4}>
            <div style={boxStyles}>
                <Input />
            </div>
        </Grid.Item>
        <Grid.Item colSpan={4}>
            <div style={boxStyles}>
                <Input />
            </div>
        </Grid.Item>
    </Grid.Section>
</Grid>
```

--------------------------------

### Initializing Property Attributes

Source: https://github.com/sulu/sulu/wiki/Sulu-PHPCR-API

Example of setting attributes on properties within a structure cache initialization.

```php
class SomeStructureCache extends Structure
{
    public function init()
    {
        $this->getProperty('???')->setFoo();
        $this->getProperty('???')->setFoo();
    }
}
```

--------------------------------

### Wrapping Properties in StructureCache

Source: https://github.com/sulu/sulu/wiki/Sulu-PHPCR-API

Example of iterating over parent properties to wrap them in a StructureProperty class.

```php
class SomeStructureCache extends Structure
{
    public function getProperties()
    {
        foreach (parent::getProperties() as $phpcrProperty) {
            $this->addChild(new StructureProperty(
                $phpcrProperty,

        }
    }
}
```

--------------------------------

### Button with icons

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/components/Button/README.md

Examples of buttons combined with icons using different skins.

```javascript
<Button skin="primary" icon="su-plus">
    Add something
</Button>
```

```javascript
<Button skin="secondary" icon="su-plus">
    Add something
</Button>
```

```javascript
<Button skin="link" icon="su-plus">
    Add something
</Button>
```

```javascript
<Button skin="link" icon="su-trash-alt" />
```

--------------------------------

### Basic Menu usage

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/components/Menu/README.md

A simple example of a Menu component containing list items with a defined maximum width.

```jsx
<Menu style={{maxWidth: '200px'}}>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</Menu>
```

--------------------------------

### Proposed Structure API Methods

Source: https://github.com/sulu/sulu/wiki/Sulu-PHPCR-API

Example usage of the proposed unified Structure API, including locale, system, and navigation methods.

```php
$structure = $session->getNode('/sulu/sulu_io/contents/hello');

# Locale methods
(string)  $structure->getLocale(); // COMPUTED: return the runtime locale of the node (aka LanguageCode)
(array)   $structure->getLocales(); // get all mapped locales on this node (including shadows)
(array)   $structure->getConcreteLocales(); // COMPUTED: return the concrete locales (i.e. locales which are not shadows)
(string)  $structure->getShadowBaseLocale();
(array)   $structure->getShadowLocales(); // return the locales for which shadowing is enabled
(boolean) $structure->isShadow(); // COMPUTED: If the current node is a shadow of a different concrete language

# System methods
(integer) $structure->getRole();  // CONTENT, INTERNAL_LINK, EXTERNAL_LINK (aka NodeType)
(integer) $structure->getCreator();
(integer) $structure->getChanger();
(integer) $structure->getState();
(integer) $structure->getComputedState(); // COMPUTED: aka. Global state, aka. Inherited State
(boolean) $structure->getPublished();
(string)  $structure->getWebspaceKey(); // COMPUTED: do we really need this?

// Navigation
(array)   $structure->getNavContexts();
```

--------------------------------

### Button with dropdown icon

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/components/Button/README.md

Examples of buttons configured with the showDropdownIcon prop to display a dropdown indicator.

```javascript
<Button skin="icon" icon="su-plus" showDropdownIcon={true} />
```

```javascript
<Button skin="primary" showDropdownIcon={true}>
    Add something
</Button>
```

```javascript
<Button skin="secondary" showDropdownIcon={true}>
    Add something
</Button>
```

```javascript
<Button skin="link" showDropdownIcon={true}>
    Add something
</Button>
```

```javascript
<Button icon="su-plus" skin="primary" showDropdownIcon={true}>
    Add something
</Button>
```

--------------------------------

### Performing HTTP requests with Requester

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/services/Requester/README.md

Demonstrates GET, DELETE, and PUT operations using the Requester service. Note that responses are already parsed as JSON.

```javascript
Requester.get('/admin/api/snippets')
    .then((response) => {
        console.log(response._embedded.snippets);
    });

Requester.delete('/admin/api/snippets/5');

Requester.put('/admin/api/snippets/2', {title: 'Title'});
```

--------------------------------

### Compose Query Parameters for jsonRequest

Source: https://github.com/sulu/sulu/blob/3.0/UPGRADE-3.x.md

Use http_build_query to construct the query string when dealing with multiple parameters in a GET request.

```php
$param = [
    'some_param' => '12345'
];
$this->client->jsonRequest('GET', '/some-endpoint?'. http_build_query($param));
```

--------------------------------

### Registering and Using a List Adapter

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/containers/List/README.md

Register a new adapter in the registry and initialize the List component with a ListStore.

```javascript
const TableAdapter = require('./adapters/TableAdapter');
const listAdapterRegistry = require('./registries/listAdapterRegistry');
adapterStore.add('table', TableAdapter);

const store = new ListStore('snippets');

<List store={store} views={['table']} />

store.selections; // returns the selected items
store.selectionIds; // returns the IDs of the selected items
store.destroy();
```

--------------------------------

### Basic Toolbar Implementation

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/containers/Toolbar/README.md

Demonstrates a simple Toolbar configuration with a single button item.

```javascript
import withToolbar from './withToolbar';

class Page extends React.PureComponent {
    render() {
        return (
            <h1>My awesome Page</h1>
        );
    }
}

const PageWithToolbar = withToolbar(Page, function() {
    return {
        items: [
            {
                type: 'button',
                value: 'Click me!',
                icon: 'fa-plus-circle',
                onClick: () => {
                    alert('Hi!');
                },
            },
        ],
    };
}, 'toolbar-demo-1');

// instead of this mocked Router you would usually use a real one
const router = {
    addUpdateRouteHook: () => () => undefined,
};

<div style={{overflow: 'hidden'}}>
    <Toolbar storeKey="toolbar-demo-1" />
    <PageWithToolbar router={router} />
</div>
```

--------------------------------

### Toolbar Success State

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/components/Toolbar/README.md

Example of triggering a temporary success state on a Toolbar button.

```javascript
const [success, setSuccess] = React.useState(false);

const buttonClick = () => {
    setSuccess(true);
    setTimeout(() => setSuccess(false), 1500);
};

<Toolbar>
    <Toolbar.Controls>
        <Toolbar.Button onClick={buttonClick} success={success}>Cause success</Toolbar.Button>
    </Toolbar.Controls>
</Toolbar>
```

--------------------------------

### Basic Overlay Implementation

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/components/Overlay/README.md

Displays an overlay with custom actions and a confirmation callback.

```javascript
const [open, setOpen] = React.useState(false);
const actions = [
    {title: 'Destroy world', onClick: () => {/* destroy world */}},
    {title: 'Save world', onClick: () => {/* save world */}},
];
const onConfirm = () => {
    /* do confirm things */
    setOpen(false);
};

<div>
    <button onClick={() => setOpen(true)}>Open overlay</button>
    <Overlay
        title="Njan Njan Njan"
        onClose={() => setOpen(false)}
        actions={actions}
        confirmText="Apply"
        onConfirm={onConfirm}
        open={open}>
        <div style={{width: '900px', height: '500px', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
            <img src="http://www.nyan.cat/cats/original.gif" />
        </div>
    </Overlay>
</div>
```

--------------------------------

### Basic Masonry implementation

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/components/Masonry/README.md

Demonstrates how to manage a list of items with a Masonry component, including adding and removing elements.

```javascript
const [items, setItems] = React.useState([
    { id: 1, color: '#4a86e8', height: 300 },
    { id: 2, color: '#bb5ac4', height: 200 },
    { id: 3, color: '#5ac4b2', height: 150 },
]);

const createItems = () => {
    let id = Date.now();

    return [
        { id: id + 1, color: '#c4825a', height: 200 },
        { id: id + 2, color: '#96c45a', height: 250 },
        { id: id + 3, color: '#c45a72', height: 180 },
    ];
};

const prepend = () => {
    setItems([...createItems(), ...items]);
};

const append = () => {
    setItems([...items, ...createItems()]);
};

const remove = () => {
    setItems(items.filter((item, index) => index !== 3));
};

<div>
    <div style={{marginBottom: 30}}>
        <button onClick={() => prepend()}>Prepend</button>        
        <button onClick={() => append()}>Append</button>
        <button onClick={() => remove()}>Remove</button>
    </div>
    <Masonry>
        {
            items.map((item) => {
                return (
                    <div
                        key={item.id}
                        style={{
                            width: '260px',
                            height: item.height,
                            borderRadius: 6,
                            backgroundColor: item.color,
                        }}
                    />
                )
            })
        }
    </Masonry>
</div>
```

--------------------------------

### Implement MediaCard with selection and download

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/MediaBundle/Resources/js/components/MediaCard/README.md

Configures a MediaCard with selection state, image size options, and a direct download handler.

```javascript
const [selected, setSelected] = React.useState(false);

const imageSizes = [
    {
        url: 'https://unsplash.it/300/200',
        label: '300/200',
    },
    {
        url: 'https://unsplash.it/600/300',
        label: '600/300',
    },
    {
        url: 'https://unsplash.it/150/200',
        label: '150/200',
    }
];

const handleSelection = () => {
    setSelected(!selected);
};

const handleClick = (id) => {
    setSelected(!selected);
};

const handleDirectDownload = (url) => {
    alert(`(Fake) Download started for: ${url}`);
};

<div style={{backgroundColor: '#e5e5e5', padding: 20}}>
    <MediaCard
        id="What is luv?"
        icon="su-checkmark"
        onSelectionChange={handleSelection}
        onClick={handleClick}
        selected={selected}
        meta="image/png, 3,2 MB"
        title="This is a great title that is too too long"
        image={'https://unsplash.it/300/200'}
        imageSizes={imageSizes}
        directDownload={{
            url: 'https://unsplash.it/300/200',
            label: 'This is a downloadable image'
        }}
        onDirectDownload={handleDirectDownload}
        downloadCopyText="Copy URL"
        showCover={selected}
    />
</div>
```

--------------------------------

### Requester.get

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/services/Requester/README.md

Performs a GET request to the specified URL and returns a promise with the parsed JSON response.

```APIDOC
## GET [url]

### Description
Performs a GET request to the specified URL. The response is automatically parsed as JSON.

### Example
```javascript
Requester.get('/admin/api/snippets')
    .then((response) => {
        console.log(response._embedded.snippets);
    });
```
```

--------------------------------

### Checkbox Skin and Active Attributes

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/components/Checkbox/README.md

Examples of using the light skin and active attribute for custom styling.

```javascript
const [checked, setChecked] = React.useState(false);

const onChange = (checked) => setChecked(checked);
<div style={{background: 'black', padding: '10px'}}>
    <Checkbox skin="light" checked={checked} onChange={onChange}>Save the world</Checkbox>
</div>
```

```javascript
const [checked, setChecked] = React.useState(false);

const onChange = (checked) => setChecked(checked);
<div style={{background: 'black', padding: '10px'}}>
    <Checkbox active={false} checked={checked} onChange={onChange}>Buy groceries</Checkbox>
</div>
```

--------------------------------

### Implementing a Popover with an anchor element

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/components/Popover/README.md

This example demonstrates how to toggle a Popover component using a button as the anchor element.

```javascript
const Menu = require('../Menu').default;
const Option = require('../Select').default.Option;

const [open, setOpen] = React.useState(false);
const [anchorElement, setAnchorElement] = React.useState(null);

const handleClose = () => {
    setOpen(false);
};

const handleOpen = (event) => {
    setOpen(true);
    setAnchorElement(event.currentTarget);
};

<div>
    <button onClick={handleOpen}>Pop me over bae!</button>
    <Popover
        open={open}
        anchorElement={anchorElement}
        onClose={handleClose}>
        {
            (setPopoverRef, styles) => (
                <Menu menuRef={setPopoverRef} style={styles}>
                    <Option>Cornelius</Option>
                    <Option>Handsome</Option>
                    <Option>Jakob</Option>
                </Menu>
            )
        }
    </Popover>
</div>
```

--------------------------------

### Register and render a component with ViewRenderer

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/containers/ViewRenderer/README.md

Demonstrates how to register a component in the ViewRegistry and render it using the ViewRenderer component with a mocked router.

```javascript
const viewRegistry = require('./registries/viewRegistry').default;
viewRegistry.clear(); // Just to make sure the ViewRegistry is empty, not needed in a real world application

const Component = ({router}) => (
    <div>
        <h1>View component</h1>
        <p>The next paragraph will show an attribute from the mocked Router.</p>
        <p>{router.attributes.content}</p>
    </div>
);
viewRegistry.add('view', Component);

// instead of this mocked Router you would usually use a real one
const route = {
    type: 'view',
};
const router = {
    addUpdateRouteHook: () => () => undefined,
    attributes: {
        content: 'Some trivial content!',
    },
    route: route,
};

<ViewRenderer route={route} router={router} />
```

--------------------------------

### Basic TextArea usage

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/components/TextArea/README.md

Demonstrates a standard TextArea with onChange and onFinish callbacks.

```javascript
const [value, setValue] = React.useState('');

<TextArea
    value={value}
    placeholder="Tell me something about yourself..."
    onChange={setValue}
    onFinish={() => alert('TextArea lost focus!')}
/>
```

--------------------------------

### Basic Chip Usage

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/components/Chip/README.md

Demonstrates basic Chip implementation with different size and skin configurations.

```javascript
<div style={{backgroundColor: 'white', padding: '10px'}}>
    <Chip>Tag 1</Chip>
</div>
<div style={{backgroundColor: 'white', padding: '10px'}}>
    <Chip skin="primary">Tag 2</Chip>
</div>
<div style={{backgroundColor: 'white', padding: '10px'}}>
    <Chip size="medium" skin="primary">Tag 3</Chip>
</div>
```

--------------------------------

### Initialize and render a Form component

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/containers/Form/README.md

Create a FormStore instance and pass it to the Form component along with an onSubmit callback.

```javascript
const store = new FormStore('snippets');

function handleSubmit() {
    console.log(store.data);
}

<Form store={store} onSubmit={handleSubmit} />
```

--------------------------------

### Implement Navigation with all properties

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/components/Navigation/README.md

Configures the Navigation component with full user details, version links, and a nested item structure.

```javascript
const handleLogoutClick = () => {
    // Do what every you like..
    alert('Handle logout click');
};

const handleProfileClick = () => {
    // Do what ever you like..
    alert('Handle profile click');
};

const handleNavigationClick = (value) => {
    // Do what ever you like..
    alert('Navigate to ' + value);
};

<div style={{height: '800px'}}>
    <Navigation
        title="sulu.io"
        username="John Travolta"
        userImage={'https://unsplash.it/200/200'}
        onItemClick={handleNavigationClick}
        onLogoutClick={handleLogoutClick}
        onProfileClick={handleProfileClick}
        suluVersion="2.0.0-RC1"
        suluVersionLink="http://link.com"
        appVersion="1.0.0"
        appVersionLink="http://link.com"
    >
        <Navigation.Item value="search" title="Search" icon="su-search" />
        <Navigation.Item value="webspaces" title="Webspaces" icon="su-webspace" />
        <Navigation.Item value="media" title="Media" icon="fa-image" />
        <Navigation.Item value="articles" title="Article" icon="fa-newspaper-o" />
        <Navigation.Item value="snippets" title="Snippets" icon="fa-sticky-note-o" />
        <Navigation.Item value="contact" title="Contact" icon="fa-user">
            <Navigation.Item value="contact_1" title="Contact 1" />
            <Navigation.Item value="contact_2" title="Contact 2" active={true} />
            <Navigation.Item value="contact_3" title="Contact 3" />
        </Navigation.Item>
        <Navigation.Item value="settings" title="Settings" icon="fa-gear">
            <Navigation.Item value="setting_1" title="Setting 1" />
            <Navigation.Item value="setting_2" title="Setting 2" />
            <Navigation.Item value="setting_3" title="Setting 3" />
        </Navigation.Item>
    </Navigation>
</div>
```

--------------------------------

### Basic MultiSelect Implementation

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/components/MultiSelect/README.md

Demonstrates how to use the MultiSelect component with state management, options, a divider, and an action button.

```javascript
const [contributors, setContributors] = React.useState([]);
const onClose = () => console.log('The overlay was closed with the selection: ' + contributors.join(', '));
const onChange = (contributors) => setContributors(contributors);

<div style={{maxWidth: '200px'}}>
    <MultiSelect
        allSelectedText="All"
        noneSelectedText="Choose contributors"
        onClose={onClose}
        onChange={onChange}
        values={contributors}
    >
        <MultiSelect.Option value="linus">Linus Torvald</MultiSelect.Option>
        <MultiSelect.Option value="dennis">Dennis Ritchie</MultiSelect.Option>
        <MultiSelect.Option value="larry">Larry Page</MultiSelect.Option>
        <MultiSelect.Option value="bill">Bill Gates</MultiSelect.Option>
        <MultiSelect.Divider />
        <MultiSelect.Action onClick={() => {/* do something */}}>Add new contributor</MultiSelect.Action>
    </MultiSelect>
</div>
```

--------------------------------

### Execute Database Migrations

Source: https://github.com/sulu/sulu/blob/3.0/UPGRADE-3.x.md

Run migrations to convert tag names to tag IDs after backing up the database.

```bash
bin/console doctrine:migrations:migrate
```

--------------------------------

### Button with different skins

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/components/Button/README.md

Examples of the Button component using primary, secondary, link, text, and icon skins with an onClick handler.

```javascript
const onClick = () => {
    /* do click things */
    alert('Clicked this nice button, congrats!');
};

<Button
    skin="primary"
    onClick={onClick}>
    Click me dude
</Button>
```

```javascript
const onClick = () => {
    /* do click things */
    alert('Clicked this nice button, congrats!');
};

<Button
    skin="secondary"
    onClick={onClick}>
    Click me dude
</Button>
```

```javascript
const onClick = () => {
    /* do click things */
    alert('Clicked this nice button, congrats!');
};

<Button
    skin="link"
    onClick={onClick}>
    Click me dude
</Button>
```

```javascript
const onClick = () => {
    /* do click things */
    alert('Clicked this nice button, congrats!');
};

<Button
    skin="text"
    onClick={onClick}>
    Click me dude
</Button>
```

```javascript
const onClick = () => {
    /* do click things */
    alert('Clicked this nice button, congrats!');
};

<Button
    skin="icon"
    icon="su-plus"
    onClick={onClick}
/>
```

--------------------------------

### Implement basic SingleAutoComplete usage

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/components/SingleAutoComplete/README.md

Demonstrates how to manage state for values, loading status, and suggestions, along with a search handler to filter data.

```javascript
const [value, setValue] = React.useState('');
const [loading, setLoading] = React.useState(false);
const [suggestions, setSuggestions] = React.useState([]);

const data = [
    {id: 1, name: 'Donald Duck'},
    {id: 2, name: 'Mickey Mouse'},
    {id: 3, name: 'Dagobert Duck'},
    {id: 4, name: 'Tick Duck'},
    {id: 5, name: 'Trick Duck'},
    {id: 6, name: 'Track Duck'},
    {id: 7, name: 'Minney Mouse'},
    {id: 8, name: 'Goofey'},
    {id: 9, name: 'Superman'},
    {id: 10, name: 'Batman'},
    {id: 11, name: 'Harry Potter'},
    {id: 12, name: 'Lilly Potter'},
    {id: 13, name: 'James Potter'},
    {id: 14, name: 'Albus Dumbledore'},
    {id: 15, name: 'Severus Snape'},
    {id: 16, name: 'Ron Weasly'},
    {id: 17, name: 'Hermoine Granger'},
    {id: 18, name: 'Tom Riddle'},
    {id: 19, name: 'Bathilda Bagshot'},
    {id: 20, name: 'Susan Bones'},
    {id: 21, name: 'Marvolo Gaunt'},
    {id: 22, name: 'Godric Gryffindor'},
];

const handleSearch = (value) => {
    const regexp = new RegExp(value, 'gi');

    setLoading(!!value);
    setSuggestions([]);
    
    if (value) {
        // Fake Request
        setTimeout(() => {
            setLoading(false);
            setSuggestions(data.filter((suggestion) => suggestion.name.match(regexp)));
        }, 500);
    }
};

const handleChange = (value) => {
    setValue(value);
    setSuggestions([]);
};

<SingleAutoComplete
    displayProperty="name"
    loading={loading}
    onChange={handleChange}
    onSearch={handleSearch}
    placeholder="Enter something fun..."
    searchProperties={['name']}
    suggestions={suggestions}
    value={value}
/>
```

--------------------------------

### Encoded data structure for frontend requests

Source: https://github.com/sulu/sulu/wiki/Content-System-Roadmap

Example of the proposed namespaced data format for content and extension key/value pairs sent from the frontend.

```text
[structure][content][title]=foo&[structure][body]=bar&[extension][seo][keywords][0]=bar
```

--------------------------------

### Configure Migration Bundle

Source: https://github.com/sulu/sulu/blob/3.0/UPGRADE-3.x.md

Define the DSN and target connection in the package configuration file.

```yaml
# config/packages/sulu_phpcr_migration.yaml

sulu_phpcr_migration:
    # dbal://<dbalConnection>?workspace=<workspaceName>
    # jackrabbit://<user>:<password>@<host>:<port>/server?workspace=<workspaceName>
    #    DSN: "dbal://default?workspace=%env(PHPCR_WORKSPACE)%"
    #    DSN: "jackrabbit://admin:admin@127.0.0.1:8080/server?workspace=%env(PHPCR_WORKSPACE)%"
    DSN: "dbal://default?workspace=%env(PHPCR_WORKSPACE)%"
    target:
        dbal:
            connection: default
```

--------------------------------

### Basic URL component usage

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/components/Url/README.md

Initializes the URL component with a list of selectable protocols.

```javascript
const [value, setValue] = React.useState(undefined);

const protocols = ['http://', 'https://'];

<div>
    <Url onChange={setValue} protocols={protocols} value={value} />
    <p>Returned URL: {value}</p>
</div>
```

--------------------------------

### Initialize Preview Sidebar

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/PreviewBundle/Resources/js/containers/Preview/README.md

Use the withSidebar higher-order component to register the preview sidebar with the required router and formStore props.

```javascript
const PageWithSidebar = withSidebar(Page, function() {
    const {
        router,
        formStore,
    } = this.props;

    return {
        view: 'sulu_preview.preview',
        sizes: ['medium', 'large'],
        props: {
            router: router,
            formStore: formStore,
        },
    };
});
```

--------------------------------

### Basic QRCode usage

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/components/QRCode/README.md

Initializes a basic QRCode component with state management for the input value.

```javascript
const [value, setValue] = React.useState('');

<QRCode value={value} onChange={setValue} />
```

--------------------------------

### Basic SingleSelect implementation

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/components/SingleSelect/README.md

Demonstrates the usage of SingleSelect with Options, a Divider, and Actions.

```javascript
const Action = SingleSelect.Action;
const Option = SingleSelect.Option;
const Divider = SingleSelect.Divider;

const [selectValue, setSelectedValue] = React.useState('page-1');

const onChange = (selectValue) => setSelectedValue(selectValue);
const onActionClick = (actionValue) => console.log('clicked action with value:', actionValue);

<SingleSelect value={selectValue} onChange={onChange}>
    <Option value="page-1">Page 1 of 4</Option>
    <Option value="page-2">Page 2 of 4</Option>
    <Option value="page-3">Page 3 of 4</Option>
    <Option value="page-4">Page 4 of 4</Option>
    <Divider />
    <Action onClick={onActionClick}>Action without value</Action>
    <Action onClick={onActionClick} value="my-value">Action with value</Action>
</SingleSelect>
```

--------------------------------

### Basic ImageRectangleSelection usage

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/components/ImageRectangleSelection/README.md

Demonstrates the basic implementation of the component with an initial selection state.

```javascript
const initialSelection = {width: 1000, height: 800, top: 200, left: 300};

const [selection, setSelection] = React.useState(initialSelection);

<div style={{width: 500, height: 500, background: '#e8e8e8'}}>
    <ImageRectangleSelection
        image="https://picsum.photos/1920/1080"
        onChange={setSelection}
        value={selection}
    />
</div>
```

--------------------------------

### Run PHPCR migrations

Source: https://github.com/sulu/sulu/blob/3.0/UPGRADE-3.x.md

Execute this command to ensure all PHPCR migrations are applied before upgrading.

```shell
php bin/adminconsole phpcr:migrations:migrate
```

--------------------------------

### Configure default Flysystem storage

Source: https://github.com/sulu/sulu/blob/3.0/UPGRADE-3.x.md

Set up the default local storage adapter in the Flysystem bundle configuration.

```yaml
# config/packages/flysystem.yaml
flysystem:
    storages:
        default.storage:
            adapter: 'local'
            options:
                directory: '%kernel.project_dir%/var/uploads/media'
```

--------------------------------

### Configure ColumnList with Buttons, Toolbar, and Indicators

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/components/ColumnList/README.md

Demonstrates how to define buttons, toolbar items, and indicators for a ColumnList component.

```javascript
const Icon = require('../Icon').default;

const buttons = [
    {
        icon: 'fa-heart',
        onClick: (id) => {
            alert('Clicked heart button for item with id: ' + id);
        }, 
    },
    {
        icon: 'fa-pencil',
        onClick: (id) => {
            alert('Clicked pencil button for item with id: ' + id);
        }, 
    },
];

const handleItemClick = (id) => {
    alert('Item with id: ' + id + ' clicked');
};

const toolbarItems = () => [
    {
        icon: 'fa-plus',
        type: 'button',
        onClick: (index) => {
            alert('Clicked plus button for item with index: ' + index);
        },
    },
    {
        icon: 'fa-search',
        type: 'button',
        skin: 'secondary',
        onClick: (index) => {
            alert('Clicked search button for column with index: ' + index);
        },
    },
    {
        icon: 'fa-gear',
        type: 'dropdown',
        options: [
            {
                label: 'Option1 ',
                onClick: (index) => {
                    alert('Clicked option1 for column with index: ' + index);
                },
            },
            {
                label: 'Option2 ',
                onClick: (index) => {
                    alert('Clicked option2 for column with index: ' + index);
                },
            },
            {
                isDisabled: (index) => true,
                label: 'Option3 ',
                onClick: (index) => {
                    alert('This alert will never be called, because the button is disabled...');
                },
            },
        ],
    },
];

const indicators = [
    <Icon name="fa-square" />,
    <Icon name="fa-square-o" />,
];

<div style={{height: '60vh'}}>
    <ColumnList buttons={buttons} onItemClick={handleItemClick} toolbarItemsProvider={toolbarItems}>
        <ColumnList.Column>
            <ColumnList.Item buttons={buttons} id="1">Google 1</ColumnList.Item>
            <ColumnList.Item buttons={buttons} id="2" hasChildren="true" disabled={true}>Apple 1</ColumnList.Item>
            <ColumnList.Item buttons={buttons} id="3">Microsoft 1</ColumnList.Item>
        </ColumnList.Column>
        <ColumnList.Column>
            <ColumnList.Item buttons={buttons} id="1-1" indicators={indicators}>Item 1</ColumnList.Item>
            <ColumnList.Item buttons={buttons} id="1-2" hasChildren="true" indicators={indicators}>Item 1</ColumnList.Item>
        </ColumnList.Column>
        <ColumnList.Column>
            <ColumnList.Item buttons={buttons} id="1-1-1">Item 1</ColumnList.Item>
            <ColumnList.Item buttons={buttons} id="1-1-2">Item 1</ColumnList.Item>
        </ColumnList.Column>
        <ColumnList.Column />
    </ColumnList>
</div>
```

--------------------------------

### Configure Smart Content Resource Loaders

Source: https://github.com/sulu/sulu/blob/3.0/UPGRADE-3.x.md

Enable tag and category resource loading in smart content properties by adding the appropriate parameters.

```xml
<property name="my_smart_content" type="smart_content">
    <params>
        <param name="provider" value="pages"/>
        <param name="tagResourceLoader" value="tag"/>
        <param name="categoryResourceLoader" value="category"/>
    </params>
</property>
```

--------------------------------

### Render a structured form with sections and fields

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/components/Form/README.md

Demonstrates how to use Form, Form.Section, and Form.Field components to build a layout with specific column spans and type selection.

```javascript
const types = [
    {label: 'Work', value: 'work'},
    {label: 'Private', value: 'private'},
];

const [type, setType] = React.useState('work');

<Form>
    <Form.Section label="Section 1" colSpan={3}>
        <Form.Field label="Author" onTypeChange={setType} types={types} type={type}>
            <input type="text" style={{width: '100%'}} />
        </Form.Field>
    </Form.Section>
    <Form.Section label="Section 2" colSpan={9}>
        <Form.Field description="This is the title" label="Title" required={true} colSpan={3}>
            <input type="text" style={{width: '100%'}} />
        </Form.Field>
        <Form.Field
            description="This is the second title"
            error="Error!"
            label="Second title"
            required={true}
            colSpan={9}
        >
            <input type="text" style={{width: '100%'}} />
        </Form.Field>
        <Form.Field description="Article" label="Article">
            <input type="text" style={{width: '100%'}} />
        </Form.Field>
    </Form.Section>
    <Form.Field label="Value">
        <input type="text" style={{width: '100%'}} />
    </Form.Field>
</Form>
```

--------------------------------

### QRCode with attributes

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/components/QRCode/README.md

Demonstrates passing additional attributes like icon, type, and placeholder to the underlying input component.

```javascript
const [value, setValue] = React.useState('');

<QRCode icon="fa-key" type="password" placeholder="Password" value={value} onChange={setValue} />
```

--------------------------------

### Toolbar with Multiple Item Types

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/containers/Toolbar/README.md

Shows how to implement button, dropdown, and select items within a single Toolbar configuration.

```javascript
import withToolbar from './withToolbar';

const [selectValue, setSelectValue] = React.useState(1);

class Page extends React.PureComponent {
    render() {
        return (
            <h1>Whoat?! The Toolbar has 3 different items!</h1>
        );
    }
}

const PageWithToolbar = withToolbar(Page, function() {
    return {
        items: [
            {
                type: 'button',
                value: 'I\'m a Button',
                icon: 'fa-smile-o',
                onClick: () => {
                    alert('What do you expect me to do?!');
                },
            },
            {
                type: 'dropdown',
                label: 'Mr. Dropdown',                
                icon: 'fa-smile-o',
                options: [
                    {
                        label: 'Now click me!',
                        onClick: () => {
                            alert('Hah! You just took commands from an option.');
                        },
                    },
                    {
                        disabled: true,
                        label: 'Who disabled me?!',
                        onClick: () => {
                            alert('Disabled onClicks won`\t fire.');
                        },
                    },
                ],
            },
            {
                type: 'select',
                label: 'Mrs. Select',
                value: selectValue,
                icon: 'fa-venus',
                onChange: (value) => {
                    setSelectValue(value);
                },
                options: [
                    {
                        value: 'first',
                        label: 'The dropdown is so silly...',
                    },
                    {
                        value: 2,
                        label: 'Selects are much cooler!',
                    },
                ],
            },
        ],
    };
}, 'toolbar-demo-2');

// instead of this mocked Router you would usually use a real one
const router = {
    addUpdateRouteHook: () => () => undefined,
};

<div style={{overflow: 'hidden'}}>
    <Toolbar storeKey="toolbar-demo-2" />
    <PageWithToolbar router={router} />
</div>
```

--------------------------------

### Implement Navigation with minimal properties

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/components/Navigation/README.md

Configures the Navigation component using only the required properties for basic functionality.

```javascript
const handleLogoutClick = () => {
    // Do what every you like..
    alert('Handle logout click');
};

const handleProfileClick = () => {
    // Do what ever you like..
    alert('Handle profile click');
};

const handleNavigationClick = (value) => {
    // Do what ever you like..
    alert('Navigate to ' + value);
};

<div style={{height: '500px'}}>
    <Navigation
        onItemClick={handleNavigationClick}
        onLogoutClick={handleLogoutClick}
        onProfileClick={handleProfileClick}
        suluVersion="2.0.0-RC1"
        suluVersionLink="http://link.com"
        title="sulu.io"
        username="John Terence Maximilian Travolta"
    >
        <Navigation.Item value="search" title="Search" icon="su-search" />
        <Navigation.Item value="webspaces" title="Webspaces" icon="su-webspace" />
    </Navigation>
</div>
```

--------------------------------

### Implementing RectangleSelection with React

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/components/RectangleSelection/README.md

Demonstrates how to manage multiple RectangleSelection instances with state and image loading.

```javascript
// preload image
let image = new Image();
image.src = 'https://unsplash.it/800/500';

const [imageLoaded, setImageLoaded] = React.useState(image.complete);
const [firstSelection, setFirstSelection] = React.useState({width: 100, height: 200, top: 50, left: 50});
const [secondSelection, setSecondSelection] = React.useState({width: 400, height: 200, top: 150, left: 250});
const [active, setActive] = React.useState(1);

image.onload = () => setImageLoaded(true);

imageLoaded
    ? <div>
        <div style={{ width: '800px', height: '500px', position: 'relative', overflow: 'hidden', display: 'inline-flex' }}>
            <img src="https://unsplash.it/800/500" style={{ userSelect: 'none', pointerEvents: 'none' }} alt="Unsplash image" />
            <RectangleSelection
                backdrop={false}
                minSizeNotification={false}
                minWidth={100}
                minHeight={200}
                disabled={active !== 1}
                onChange={setFirstSelection}
                value={firstSelection}
                label="1"
                containerWidth={800}
                containerHeight={500}
            />
            <RectangleSelection
                backdrop={false}
                minSizeNotification={false}
                minHeight={200}
                disabled={active !== 2}
                onChange={setSecondSelection}
                value={secondSelection}
                label="2"
                containerWidth={800}
                containerHeight={500}
            />
        </div>
        <div>
            <p>Active: {active}</p>
            <button onClick={() => {setActive(1)}}>#1</button>
            <button onClick={() => {setActive(2)}}>#2</button>
        </div>
    </div>
    : null
```

--------------------------------

### Basic Radio Component Usage

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/components/Radio/README.md

Demonstrates how to manage the state of individual Radio components externally.

```javascript
const [value, setValue] = React.useState('1');

<div>
    <Radio checked={value === '1'} onChange={() => setValue('1')}>Radio 1</Radio>
    <Radio checked={value === '2'} onChange={() => setValue('2')}>Radio 2</Radio>
    <Radio checked={value === '3'} onChange={() => setValue('3')}>Radio 3</Radio>
</div>
```

--------------------------------

### Basic CKEditor 5 Implementation

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/containers/CKEditor5/README.md

Demonstrates the basic usage of the CKEditor 5 component with value state management and event handlers.

```javascript
const [value, setValue] = React.useState('');

const handleChange = (newValue) => setValue(newValue);
const handleBlur = () => alert('Text editing finished!');

<div>
    <CKEditor5 onBlur={this.handleBlur} onChange={handleChange} value={value} />

    Output: <pre>{value}</pre>
</div>
```

--------------------------------

### Execute Migration Command

Source: https://github.com/sulu/sulu/blob/3.0/UPGRADE-3.x.md

Run the migration command to update the content structure after database migrations are complete.

```shell
php bin/adminconsole sulu:phpcr-migration:migrate
```

--------------------------------

### Basic Backdrop Usage

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/components/Backdrop/README.md

Renders a standard backdrop within a relative container.

```javascript
<div style={{height: '200px', position: 'relative'}}>
    <Backdrop fixed={false} />
</div>
```

--------------------------------

### SingleSelect with icons

Source: https://github.com/sulu/sulu/blob/3.0/src/Sulu/Bundle/AdminBundle/Resources/js/components/SingleSelect/README.md

Demonstrates rendering components like Icons inside SingleSelect options.

```javascript
import {Icon} from 'sulu-admin-bundle/components';

const Option = SingleSelect.Option;

const [selectValue, setSelectedValue] = React.useState('page-1');

const onChange = (value) => setSelectedValue(value);

<SingleSelect value={selectValue} onChange={onChange}>
    <Option disabled>Choose an icon</Option>
    <Option value="fa-user"><Icon name="fa-user"/> fa-user</Option>
    <Option value="su-inbox"><Icon name="su-inbox"/> su-inbox</Option>
    <Option value="su-umbrella"><Icon name="su-umbrella"/> su-umbrella</Option>
</SingleSelect>
```
Tokens:
Raw