Imports, chunks, config, webpack

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<part>
    <display-name>Multi-Color</display-name>
    <description>Add your own clickable colors</description>

    <form>
        <input name="SSR" type="CheckBox">          <!-- <1> -->
            <label>Server-side rendering</label>
            <occurrences minimum="0" maximum="1"/>
        </input>

        <input name="colors" type="TextLine">       <!-- <2> -->
            <label>Color</label>
            <occurrences minimum="0" maximum="0"/>
        </input>
    </form>
</part>

import type {PartComponent} from '@enonic-types/core';
import type {MultiColorProps} from '../../../react4xp/myEntries/MultiColor.d';


import {forceArray} from '@enonic/js-utils/array/forceArray';
import {getComponent} from '/lib/xp/portal';
import {render} from '/lib/enonic/react4xp';


declare global {
  interface XpPartMap {
    ['com.enonic.app.samples-react4xp:multi-color']: {
      colors?: string|string[]
      SSR?: boolean
    }
  }
}


const ENTRY = 'MultiColor';


export function get(request) {
  const component = getComponent<PartComponent<'com.enonic.app.samples-react4xp:multi-color'>>();

  const {
    colors = [],
    SSR: ssr = false, (1)
  } = component.config;

  const props: MultiColorProps = {
    colors: forceArray(colors).map(c => (c || '').trim()).filter(c => !!c) (2)
  };

  return render(
    ENTRY, (3)
    props,
    request,
    { ssr }
  );
}

import type {MultiColorProps} from './MultiColor.d';

import React from 'react';

import Button from '../shared/Button';                  (1)
import ColorButtons from '../shared/ColorButtons';
import ActiveColorOval from '../shared/ActiveColorOval';

import './MultiColor.scss';                             (2)
import '../shared/shared-styles.scss';                  (3)


class MultiColor extends React.Component<MultiColorProps> { (4)
  state: { selected: number } = { selected: 0 };        (5)

  constructor(props: MultiColorProps) {
      super(props);
      // this.state = {
      //     selected: 0                              (5)
      // };

      this.shiftUp = this.shiftUp.bind(this);         (6)
      this.shiftDown = this.shiftDown.bind(this);
  }

  shiftUp() {                                         (7)
      this.setState({
          selected: (this.state.selected + 1) % this.props.colors.length
      });
  };
  shiftDown() {
      this.setState({
          selected: (this.props.colors.length + this.state.selected - 1) % this.props.colors.length
      });
  };

  render() {
      const props = this.props;
      const state = this.state;
      return props.colors.length ?                    (8)
          <div className="multi-color">

                                                      {/* <9> */}
              <Button className="my-button" clickFunc={this.shiftDown}>Previous color</Button>
              <Button className="my-button" clickFunc={this.shiftUp}>Next color</Button>

                                                      {/* <10> */}
              <ActiveColorOval color={props.colors[state.selected]} />

                                                      {/* <11> */}
              <ColorButtons colors={props.colors}
                            selectedIndex={state.selected}
                            clickFunc={ i => {
                                this.setState({selected: (i) % props.colors.length});
                            }}
              />

          </div> :

                                                      (12)
          <p>Add some color!</p>
  }
}

                                                      (13)
export default (props: MultiColorProps) => <MultiColor {...props} />;

entryDirs: 'myEntries'   (1)

chunkDirs: 'shared'    (2)

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = function(env, config) { (1)

	// This makes 'npm link' symlinks in node_modules work:
	config.resolve.symlinks = true;

	config.module.rules = [ (2)
		...(config.module.rules || []),
		{
			test: /\.((sa|sc|c))ss$/i,
			use: [
				MiniCssExtractPlugin.loader,
				{
					loader: 'css-loader',
					options: {
						importLoaders: 1,
						modules: { auto: true }
					}
				},
				{
					loader: 'sass-loader',
					options: {
						sassOptions: {
							outputStyle: 'compressed'
						}
					}
				}
			]
		}
	]

	// Set up how the compiled assets are exported:
	config.plugins = [
		...(config.plugins || []),
		new MiniCssExtractPlugin({
			filename: '[name].css',
			chunkFilename: '[id].[contenthash:9].css'
		})
	]

	return config; (3)
};