Code: Moved layer panel to proper folder structure (#12065)

packages/story-editor/src/components/footer/layers/layers.js

@@ -21,12 +21,12 @@ import styled from 'styled-components';
 import { useState, useRef, useEffect } from '@googleforcreators/react';
 import { __, sprintf } from '@googleforcreators/i18n';
 import { PLACEMENT } from '@googleforcreators/design-system';
+
 /**
  * Internal dependencies
  */
 import { Z_INDEX_FOOTER } from '../../../constants/zIndex';
-import { LayerPanel } from '../../panels/design';
-import useLayers from '../../panels/design/layer/useLayers';
+import { LayerPanel, useLayers } from '../../panels/layer';
 import Popup, { NavigationWrapper } from '../../secondaryPopup';
 import { ToggleButton } from '../../toggleButton';
 import { useCanvas } from '../../../app';

packages/story-editor/src/components/panels/design/index.js

@@ -20,7 +20,6 @@ export { default as CaptionsPanel } from './captions';
 export { default as ElementAlignmentPanel } from './alignment';
 export { default as FilterPanel } from './filter';
 export { default as ImageAccessibilityPanel } from './imageAccessibility';
-export { default as LayerPanel } from './layer';
 export { default as LinkPanel } from './link';
 export { default as PageAttachmentPanel } from './pageAttachment';
 export { default as PageBackgroundPanel } from './pageBackground';

packages/story-editor/src/components/panels/design/layer/group.js → packages/story-editor/src/components/panels/layer/group.js

@@ -37,9 +37,9 @@ import { useFeature } from 'flagged';
  */
 import PropTypes from 'prop-types';
 import { v4 as uuidv4 } from 'uuid';
-import { useCanvas, useStory } from '../../../../app';
-import Tooltip from '../../../tooltip';
-import generateGroupName from '../../../../utils/generateGroupName';
+import { useCanvas, useStory } from '../../../app';
+import Tooltip from '../../tooltip';
+import generateGroupName from '../../../utils/generateGroupName';
 import { LAYER_HEIGHT, NESTED_PX } from './constants';
 import useGroupSelection from './useGroupSelection';
 

packages/story-editor/src/components/panels/design/layer/index.js → packages/story-editor/src/components/panels/layer/index.js

@@ -14,4 +14,5 @@
  * limitations under the License.
  */
 
-export { default } from './layerPanel';
+export { default as LayerPanel } from './layerPanel';
+export { default as useLayers } from './useLayers';

packages/story-editor/src/components/panels/design/layer/karma/layer.karma.js → packages/story-editor/src/components/panels/layer/karma/layer.karma.js

@@ -22,9 +22,9 @@ import { TEXT_ELEMENT_DEFAULT_FONT } from '@googleforcreators/elements';
 /**
  * Internal dependencies
  */
-import { Fixture } from '../../../../../karma';
-import { useInsertElement } from '../../../../canvas';
-import { useStory } from '../../../../../app/story';
+import { Fixture } from '../../../../karma';
+import { useInsertElement } from '../../../canvas';
+import { useStory } from '../../../../app/story';
 
 describe('Layer Panel', () => {
   let fixture;

packages/story-editor/src/components/panels/design/layer/layer.js → packages/story-editor/src/components/panels/layer/layer.js

@@ -39,13 +39,13 @@ import { useFeature } from 'flagged';
 /**
  * Internal dependencies
  */
-import StoryPropTypes from '../../../../types';
-import { useStory, useCanvas } from '../../../../app';
-import useCORSProxy from '../../../../utils/useCORSProxy';
-import usePerformanceTracking from '../../../../utils/usePerformanceTracking';
-import { TRACKING_EVENTS } from '../../../../constants';
-import Tooltip from '../../../tooltip';
-import useShapeMask from '../../../../utils/useShapeMask';
+import StoryPropTypes from '../../../types';
+import { useStory, useCanvas } from '../../../app';
+import useCORSProxy from '../../../utils/useCORSProxy';
+import usePerformanceTracking from '../../../utils/usePerformanceTracking';
+import { TRACKING_EVENTS } from '../../../constants';
+import Tooltip from '../../tooltip';
+import useShapeMask from '../../../utils/useShapeMask';
 import useLayerSelection from './useLayerSelection';
 import ShapeMaskWrapper from './shapeMaskWrapper';
 import { LAYER_HEIGHT, NESTED_PX } from './constants';

packages/story-editor/src/components/panels/design/layer/layerList.js → packages/story-editor/src/components/panels/layer/layerList.js

@@ -29,9 +29,9 @@ import {
   Reorderable,
   ReorderableSeparator,
   ReorderableItem,
-} from '../../../reorderable';
-import { useRightClickMenu, useStory, useCanvas } from '../../../../app';
-import useFocusCanvas from '../../../canvas/useFocusCanvas';
+} from '../../reorderable';
+import { useRightClickMenu, useStory, useCanvas } from '../../../app';
+import useFocusCanvas from '../../canvas/useFocusCanvas';
 import { LAYER_HEIGHT } from './constants';
 import Layer from './layer';
 import ReorderableGroup from './reorderableGroup';

packages/story-editor/src/components/panels/design/layer/layerPanel.js → packages/story-editor/src/components/panels/layer/layerPanel.js

@@ -23,8 +23,8 @@ import styled from 'styled-components';
 /**
  * Internal dependencies
  */
-import { PanelContent } from '../../panel';
-import useSidebar from '../../../sidebar/useSidebar';
+import { PanelContent } from '../panel';
+import useSidebar from '../../sidebar/useSidebar';
 import LayerList from './layerList';
 import useLayers from './useLayers';
 

packages/story-editor/src/components/panels/design/layer/reorderableGroup.js → packages/story-editor/src/components/panels/layer/reorderableGroup.js

@@ -24,7 +24,7 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
-import { ReorderableSeparator, ReorderableItem } from '../../../reorderable';
+import { ReorderableSeparator, ReorderableItem } from '../../reorderable';
 import { LAYER_HEIGHT } from './constants';
 import Group from './group';
 

packages/story-editor/src/components/panels/design/layer/shapeMaskWrapper.js → packages/story-editor/src/components/panels/layer/shapeMaskWrapper.js

@@ -22,8 +22,8 @@ import { generateMaskId } from '@googleforcreators/masks';
 /**
  * Internal dependencies
  */
-import useShapeMask from '../../../../utils/useShapeMask';
-import StoryPropTypes from '../../../../types';
+import useShapeMask from '../../../utils/useShapeMask';
+import StoryPropTypes from '../../../types';
 
 const MaskedIconWrapper = styled.div`
   position: relative;

packages/story-editor/src/components/panels/design/layer/useGroupSelection.js → packages/story-editor/src/components/panels/layer/useGroupSelection.js

@@ -20,7 +20,7 @@ import { useCallback } from '@googleforcreators/react';
 /**
  * Internal dependencies
  */
-import { useStory, useCanvas } from '../../../../app';
+import { useStory, useCanvas } from '../../../app';
 
 function useGroupSelection(groupId) {
   const { toggleLayer, groupLayers, selectedElementIds } = useStory(

packages/story-editor/src/components/panels/design/layer/useLayerSelection.js → packages/story-editor/src/components/panels/layer/useLayerSelection.js

@@ -20,7 +20,7 @@ import { useCallback } from '@googleforcreators/react';
 /**
  * Internal dependencies
  */
-import { useStory, useCanvas } from '../../../../app';
+import { useStory, useCanvas } from '../../../app';
 
 function useLayerSelection(layer) {
   const { id: elementId } = layer;

packages/story-editor/src/components/panels/design/layer/useLayers.js → packages/story-editor/src/components/panels/layer/useLayers.js

@@ -17,8 +17,8 @@
 /**
  * Internal dependencies
  */
-import { useStory } from '../../../../app';
-import { STABLE_ARRAY } from '../../../../constants';
+import { useStory } from '../../../app';
+import { STABLE_ARRAY } from '../../../constants';
 
 function useLayers() {
   const elements = useStory(

packages/story-editor/src/components/reorderable/reorderableSeparator.js

@@ -24,7 +24,7 @@ import { useCallback, useRef, useState } from '@googleforcreators/react';
 /**
  * Internal dependencies
  */
-import { NESTED_PX } from '../panels/design/layer/constants';
+import { NESTED_PX } from '../panels/layer/constants';
 import useReorderable from './useReorderable';
 
 const Wrapper = styled.div`

packages/story-editor/src/components/thumbnail/thumbnail.js

@@ -39,7 +39,7 @@ const includeDefaultScrimBackground = [
  * Element and page thumbnails, used in the prepublish checklist
  *
  * @param {Object} props Component props.
- * @param {Node} props.displayBackground Node that renders the element. Relies on PagePreview or LayerIcon (getDefinitionForType, see panels/design/layer) to keep element rendering consistent with carousel and layer panels. See /storybook for demo.
+ * @param {Node} props.displayBackground Node that renders the element. Relies on PagePreview or LayerIcon (getDefinitionForType, see panels/layer) to keep element rendering consistent with carousel and layer panels. See /storybook for demo.
  * @param {boolean} props.isError Thumbnail errors don't prevent further interaction with the thumbnail, they just change the presentation so user knows the action failed.
  * @param {boolean} props.isLoading If a thumbnail needs to show a loading progress bar this should be true.
  * @param {string} props.loadingMessage If a thumbnail needs an aria alert with loading bar this should be used.