Change folder structure

src/app.js → src/scripts/app.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import Main from './components/Main';
-import { H5PContext } from './context/H5PContext';
-import './playlist-widget/widget';
+import Main from '@components/Main.js';
+import { H5PContext } from '@context/H5PContext.js';
+import '@scripts/playlist-widget/widget.js';
 
 export default class NDLAThreeImage {
   /**

src/components/ControlBar/ControlBar.js → src/scripts/components/ControlBar/ControlBar.js

@@ -1,13 +1,13 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { SceneEditingType } from '../EditingDialog/SceneEditor';
+import { SceneEditingType } from '@components/EditingDialog/SceneEditor.js';
+import { H5PContext } from '@context/H5PContext.js';
+import { SceneTypes } from '@components/Scene/Scene.js';
+import { getSceneFromId } from '@h5phelpers/sceneParams.js';
+import SceneList from './SceneSelector/SceneList.js';
+import SceneSelectorSubmenu from './SceneSelector/Row/Submenu/SceneSelectorSubmenu.js';
+import SceneSelector from './SceneSelector/SceneSelector.js';
 import './ControlBar.scss';
-import { H5PContext } from '../../context/H5PContext';
-import { SceneTypes } from '../Scene/Scene';
-import { getSceneFromId } from '../../h5phelpers/sceneParams';
-import SceneList from './SceneSelector/SceneList';
-import SceneSelectorSubmenu from './SceneSelector/Row/Submenu/SceneSelectorSubmenu';
-import SceneSelector from './SceneSelector/SceneSelector';
 
 export default class ControlBar extends Component {
   /**

src/components/ControlBar/SceneSelector/Row/ActiveSceneRow.js → src/scripts/components/ControlBar/SceneSelector/Row/ActiveSceneRow.js

@@ -1,8 +1,8 @@
+import PropTypes from 'prop-types';
 import React from 'react';
-import { sceneType } from '../../../../types/types';
+import { sceneType } from '@types/types';
+import { SceneTypes } from '@components/Scene/Scene.js';
 import './ActiveSceneRow.scss';
-import { SceneTypes } from '../../../Scene/Scene';
-import PropTypes from 'prop-types';
 
 /**
  * @param {object} props React props.

src/components/ControlBar/SceneSelector/Row/ActiveSceneRow.scss → src/scripts/components/ControlBar/SceneSelector/Row/ActiveSceneRow.scss

@@ -1,4 +1,4 @@
-@import '../../../../styles/icons';
+@import '@styles/icons.scss';
 
 .active-scene {
   padding: 0.5em;

src/components/ControlBar/SceneSelector/Row/SceneRow.js → src/scripts/components/ControlBar/SceneSelector/Row/SceneRow.js

@@ -1,9 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { SceneTypes } from '../../../Scene/Scene';
+import { SceneTypes } from '@components/Scene/Scene.js';
+import { H5PContext, getImageSource } from '@context/H5PContext.js';
 import './SceneRow.scss';
-import { getImageSource } from '../../../../context/H5PContext';
-import { H5PContext } from '../../../../context/H5PContext';
 
 export default class SceneRow extends Component {
 /**

src/components/ControlBar/SceneSelector/Row/SceneRow.scss → src/scripts/components/ControlBar/SceneSelector/Row/SceneRow.scss

@@ -1,4 +1,4 @@
-@import '../../../../styles/icons';
+@import '@styles/icons.scss';
 
 .h5p-scene-row {
   padding: 0.625em;

src/components/ControlBar/SceneSelector/Row/Submenu/SceneSelectorSubmenu.scss → src/scripts/components/ControlBar/SceneSelector/Row/Submenu/SceneSelectorSubmenu.scss

@@ -1,4 +1,4 @@
-@import '../../../../../styles/icons';
+@import '@styles/icons.scss';
 
 .scene-selector-submenu {
   display: inline-block;

src/components/ControlBar/SceneSelector/SceneSelector.js → src/scripts/components/ControlBar/SceneSelector/SceneSelector.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { H5PContext } from '../../../context/H5PContext';
+import { H5PContext } from '@context/H5PContext.js';
+import ActiveSceneRow from './Row/ActiveSceneRow.js';
+import ExpandedSceneSelector from './ExpandedSceneSelector.js';
 import './SceneSelector.scss';
-import ActiveSceneRow from './Row/ActiveSceneRow';
-import ExpandedSceneSelector from './ExpandedSceneSelector';
 
 export default class SceneSelector extends React.Component {
   /**

src/components/ControlBar/SceneSelector/SceneSelector.scss → src/scripts/components/ControlBar/SceneSelector/SceneSelector.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/icons';
+@import '@styles/icons.scss';
 
 .scene-selector-wrapper {
   position: relative;
@@ -64,4 +64,4 @@
 .h5p-select-handle:before {
   font-family: "360-image";
   content: $dropdown;
-}
+}

src/components/EditingDialog/GoToScene/GoToSceneWrapper.js → src/scripts/components/EditingDialog/GoToScene/GoToSceneWrapper.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import GoToScene from './Selector/GoToScene';
-import { createSceneForm, getDefaultSceneParams } from '../../../h5phelpers/forms/sceneForm';
-import { H5PContext } from '../../../context/H5PContext';
+import GoToScene from './Selector/GoToScene.js';
+import { createSceneForm, getDefaultSceneParams } from '@h5phelpers/forms/sceneForm.js';
+import { H5PContext } from '@context/H5PContext.js';
 
 export default class GoToSceneWrapper extends Component {
   /**

src/components/EditingDialog/GoToScene/Selector/GoToScene.js → src/scripts/components/EditingDialog/GoToScene/Selector/GoToScene.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { H5PContext } from '../../../../context/H5PContext';
+import { H5PContext } from '@context/H5PContext.js';
+import GoToSceneSelector from './GoToSceneSelector.js';
 import './GoToScene.scss';
-import GoToSceneSelector from './GoToSceneSelector';
 
 export default class GoToScene extends Component {
   /**

src/components/EditingDialog/GoToScene/Selector/GoToSceneSelector.js → src/scripts/components/EditingDialog/GoToScene/Selector/GoToSceneSelector.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import SceneList from '../../../ControlBar/SceneSelector/SceneList';
+import SceneList from '@components/ControlBar/SceneSelector/SceneList.js';
 import './GoToSceneSelector.scss';
 
 /**

src/components/EditingDialog/InteractionEditor.js → src/scripts/components/EditingDialog/InteractionEditor.js

@@ -1,19 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import EditingDialog from './EditingDialog';
-import { H5PContext } from '../../context/H5PContext';
-import './InteractionEditor.scss';
-import { SceneTypes } from '../Scene/Scene';
-import { getDefaultLibraryParams, isGoToScene } from '../../h5phelpers/libraryParams';
-import { getSceneFromId } from '../../h5phelpers/sceneParams';
-import { getLibraryDataFromFields } from '../../h5phelpers/editorForms';
+import EditingDialog from './EditingDialog.js';
+import { H5PContext } from '@context/H5PContext.js';
+import { SceneTypes } from '@components/Scene/Scene.js';
+import { getDefaultLibraryParams, isGoToScene } from '@h5phelpers/libraryParams.js';
+import { getSceneFromId } from '@h5phelpers/sceneParams.js';
+import { getLibraryDataFromFields } from '@h5phelpers/editorForms.js';
 import {
   createInteractionForm,
   sanitizeInteractionParams,
   validateInteractionForm
-} from '../../h5phelpers/forms/interactionForm';
-import GoToSceneWrapper from './GoToScene/GoToSceneWrapper';
-import { sanitizeSceneForm, sanitizeInteractionGeometry, validateSceneForm } from '../../h5phelpers/forms/sceneForm';
+} from '@h5phelpers/forms/interactionForm.js';
+import GoToSceneWrapper from './GoToScene/GoToSceneWrapper.js';
+import { sanitizeSceneForm, sanitizeInteractionGeometry, validateSceneForm } from '@h5phelpers/forms/sceneForm.js';
+import './InteractionEditor.scss';
 
 export const InteractionEditingType = {
   NOT_EDITING: null,

src/components/EditingDialog/InteractionEditor.scss → src/scripts/components/EditingDialog/InteractionEditor.scss

@@ -1,4 +1,4 @@
-@import "../../styles/icons";
+@import "@styles/icons.scss";
 
 .h5p-editing-dialog-body {
   .field.library .libwrap {
@@ -12,7 +12,7 @@
   .semantics-wrapper{
     &.go-to-scene {
       margin-top: 0;
-      
+
       .library {
         display: none;
       }
@@ -78,4 +78,4 @@
   .h5p-blanks:before {
     content: $blanks;
   }
-}
+}

src/components/EditingDialog/SceneEditor.js → src/scripts/components/EditingDialog/SceneEditor.js

@@ -1,18 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { editingSceneType } from '../../types/types';
-import EditingDialog from './EditingDialog';
-import { H5PContext } from '../../context/H5PContext';
-import './SceneEditor.scss';
-import { getSceneFromId } from '../../h5phelpers/sceneParams';
-import { createSceneForm } from '../../h5phelpers/forms/sceneForm';
-import { showConfirmationDialog } from '../../h5phelpers/h5pComponents';
+import { editingSceneType } from '@types/types.js';
+import EditingDialog from './EditingDialog.js';
+import { H5PContext } from '@context/H5PContext.js';
+import { getSceneFromId } from '@h5phelpers/sceneParams.js';
+import { createSceneForm } from '@h5phelpers/forms/sceneForm.js';
+import { showConfirmationDialog } from '@h5phelpers/h5pComponents.js';
 import {
   getDefaultSceneParams,
   isInteractionsValid,
   sanitizeSceneForm,
   validateSceneForm
-} from '../../h5phelpers/forms/sceneForm';
+} from '@h5phelpers/forms/sceneForm.js';
+import './SceneEditor.scss';
 
 export const SceneEditingType = {
   NOT_EDITING: null,

src/components/EditingDialog/SceneEditor.scss → src/scripts/components/EditingDialog/SceneEditor.scss

@@ -1,8 +1,8 @@
-@import '../../styles/icons';
+@import '@styles/icons.scss';
 
 .h5p-editing-dialog-header {
   .title.scene:before {
     font-family: "360-image";
     content: $scene;
   }
-}
+}

src/components/InteractionsBar/InteractionsBar.js → src/scripts/components/InteractionsBar/InteractionsBar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import './InteractionsBar.scss';
-import { getLibraries, H5PContext } from '../../context/H5PContext';
+import { getLibraries, H5PContext } from '@context/H5PContext.js';
 
 export default class InteractionsBar extends React.Component {
   /**

src/components/InteractionsBar/InteractionsBar.scss → src/scripts/components/InteractionsBar/InteractionsBar.scss

@@ -1,4 +1,4 @@
-@import "../../styles/icons";
+@import "@styles/icons.scss";
 
 .h5p-interactions-bar {
   padding: 0.5em;

src/components/Main.js → src/scripts/components/Main.js

@@ -1,16 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Scene, { SceneTypes } from './Scene/Scene';
-import ControlBar from './ControlBar/ControlBar';
-import SceneEditor, { SceneEditingType } from './EditingDialog/SceneEditor';
-import InteractionsBar from './InteractionsBar/InteractionsBar';
-import './Main.scss';
-import InteractionEditor, { InteractionEditingType } from './EditingDialog/InteractionEditor';
-import { H5PContext } from '../context/H5PContext';
-import { deleteScene, getSceneFromId, setScenePositionFromCamera, updateScene } from '../h5phelpers/sceneParams';
-import { getInteractionFromElement, isGoToScene, updatePosition } from '../h5phelpers/libraryParams';
-import { showConfirmationDialog } from '../h5phelpers/h5pComponents';
-import { addBehavioralListeners } from '../h5phelpers/editorForms';
+import Scene, { SceneTypes } from '@components/Scene/Scene.js';
+import ControlBar from './ControlBar/ControlBar.js';
+import SceneEditor, { SceneEditingType } from '@components/EditingDialog/SceneEditor.js';
+import InteractionsBar from '@components/InteractionsBar/InteractionsBar.js';
+import InteractionEditor, { InteractionEditingType } from '@components/EditingDialog/InteractionEditor.js';
+import { H5PContext } from '@context/H5PContext.js';
+import { deleteScene, getSceneFromId, setScenePositionFromCamera, updateScene } from '@h5phelpers/sceneParams.js';
+import { getInteractionFromElement, isGoToScene, updatePosition } from '@h5phelpers/libraryParams.js';
+import { showConfirmationDialog } from '@h5phelpers/h5pComponents.js';
+import { addBehavioralListeners } from '@h5phelpers/editorForms.js';
+import '@components/Main.scss';
 
 export default class Main extends React.Component {
   /**

src/components/Main.scss → src/scripts/components/Main.scss

@@ -1,10 +1,10 @@
 @font-face {
   font-family: '360-image';
-  src:  url('../assets/360-image.eot?nghxo3');
-  src:  url('../assets/360-image.eot?nghxo3#iefix') format('embedded-opentype'),
-  url('../assets/360-image.ttf?nghxo3') format('truetype'),
-  url('../assets/360-image.woff?nghxo3') format('woff'),
-  url('../assets/360-image.svg?nghxo3#360-image') format('svg');
+  src:  url('@assets/360-image.eot?nghxo3');
+  src:  url('@assets/360-image.eot?nghxo3#iefix') format('embedded-opentype'),
+  url('@assets/360-image.ttf?nghxo3') format('truetype'),
+  url('@assets/360-image.woff?nghxo3') format('woff'),
+  url('@assets/360-image.svg?nghxo3#360-image') format('svg');
   font-weight: normal;
   font-style: normal;
 }

src/components/Scene/NoScene.js → src/scripts/components/Scene/NoScene.js

@@ -1,6 +1,6 @@
 import React from 'react';
+import { H5PContext } from '@context/H5PContext.js';
 import './NoScene.scss';
-import { H5PContext } from '../../context/H5PContext';
 
 export default class NoScene extends React.Component {
   /**

src/components/Scene/NoScene.scss → src/scripts/components/Scene/NoScene.scss

@@ -1,4 +1,4 @@
-@import '../../styles/icons';
+@import '@styles/icons.scss';
 
 .no-scene-container {
   min-height: 30em;

src/components/Scene/Scene.js → src/scripts/components/Scene/Scene.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import NoScene from './NoScene';
+import { H5PContext } from '@context/H5PContext.js';
+import { initializeThreeSixtyPreview } from '@h5phelpers/h5pComponents.js';
 import './Scene.scss';
-import { H5PContext } from '../../context/H5PContext';
-import { initializeThreeSixtyPreview } from '../../h5phelpers/h5pComponents';
 
 export const SceneTypes = {
   THREE_SIXTY_SCENE: '360',

src/context/H5PContext.js → src/scripts/context/H5PContext.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { getInteractionsField } from '../h5phelpers/editorForms';
+import { getInteractionsField } from '@h5phelpers/editorForms.js';
 
 /**
  * Get loaded libraries that are available of the ones defined by action

src/h5phelpers/editorForms.js → src/scripts/h5phelpers/editorForms.js

@@ -1,4 +1,4 @@
-import { getLibraries } from '../context/H5PContext';
+import { getLibraries } from '@context/H5PContext.js';
 
 /**
  * Get scenes field from Three Image semantics structure.

src/h5phelpers/forms/interactionForm.js → src/scripts/h5phelpers/forms/interactionForm.js

@@ -1,4 +1,4 @@
-import { getInteractionsField, areChildrenValid } from '../editorForms';
+import { getInteractionsField, areChildrenValid } from '@h5phelpers/editorForms.js';
 
 /**
  * Create interaction form and append it to wrapper.

src/h5phelpers/forms/playlistForm.js → src/scripts/h5phelpers/forms/playlistForm.js

@@ -1,4 +1,4 @@
-import { getPlaylistField, areChildrenValid } from '../editorForms';
+import { getPlaylistField, areChildrenValid } from '@h5phelpers/editorForms.js';
 
 /**
  * Creates playlist form and appends it to wrapper

src/h5phelpers/forms/sceneForm.js → src/scripts/h5phelpers/forms/sceneForm.js

@@ -1,5 +1,5 @@
-import { getSceneField, areChildrenValid } from '../editorForms';
-import { SceneTypes } from './../../components/Scene/Scene';
+import { getSceneField, areChildrenValid } from '@h5phelpers/editorForms.js';
+import { SceneTypes } from '@components/Scene/Scene.js';
 
 /** @typedef {{ playlistId: string, title: string, audioTracks: object }} Playlist */
 /** @typedef {{ playlist: Playlist }} Scene */

src/h5phelpers/playlistParams.js → src/scripts/h5phelpers/playlistParams.js

@@ -1,4 +1,4 @@
-import { PlaylistEditingType } from '../playlist-widget/widget-components/PlaylistEditor';
+import { PlaylistEditingType } from '@scripts/playlist-widget/widget-components/PlaylistEditor.js';
 
 /** @typedef {{ playlistId: string, title: string, audioTracks: object }} Playlist */
 

src/h5phelpers/sceneParams.js → src/scripts/h5phelpers/sceneParams.js

@@ -1,4 +1,4 @@
-import { SceneEditingType } from '../components/EditingDialog/SceneEditor';
+import { SceneEditingType } from '@components/EditingDialog/SceneEditor.js';
 import { isGoToScene } from './libraryParams';
 
 /** @typedef {{ playlistId: string, title: string, audioTracks: object }} Playlist */

src/playlist-widget/widget-components/ChoosePlaylist/ChoosePlaylistWrapper.js → src/scripts/playlist-widget/widget-components/ChoosePlaylist/ChoosePlaylistWrapper.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ChoosePlaylist from './Selector/ChoosePlaylist';
-import { H5PContext } from '../../../context/H5PContext';
+import { H5PContext } from '@context/H5PContext.js';
 
 export default class ChoosePlaylistWrapper extends Component {
   /**

src/playlist-widget/widget-components/ChoosePlaylist/Selector/ChoosePlaylist.js → src/scripts/playlist-widget/widget-components/ChoosePlaylist/Selector/ChoosePlaylist.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { H5PContext } from '../../../../context/H5PContext';
-import './ChoosePlaylist.scss';
+import { H5PContext } from '@context/H5PContext.js';
 import ChoosePlaylistSelector from './ChoosePlaylistSelector';
+import './ChoosePlaylist.scss';
 
 export default class ChoosePlaylist extends Component {
   /**

src/playlist-widget/widget-components/ChoosePlaylist/Selector/List/PlaylistRow.js → src/scripts/playlist-widget/widget-components/ChoosePlaylist/Selector/List/PlaylistRow.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { H5PContext } from '@context/H5PContext.js';
 import './PlaylistRow.scss';
-import { H5PContext } from '../../../../../context/H5PContext';
 
 export default class PlaylistRow extends Component {
   /**

src/playlist-widget/widget-components/ChoosePlaylist/Selector/List/PlaylistRow.scss → src/scripts/playlist-widget/widget-components/ChoosePlaylist/Selector/List/PlaylistRow.scss

@@ -1,4 +1,4 @@
-@import '../../../../../styles/icons';
+@import '@styles/icons.scss';
 
 .h5p-playlist-listitem {
   display: block;