#203 Creates new folders for organizing components and elements.

- Creates layouts folder
- Creates elements folder
- Refactors component import paths
- Renames component.ts to ssr-component.ts
- Removes global component imports

src/components/c-modal.vue

@@ -48,6 +48,7 @@
   import { defineComponent, ref, Ref } from 'vue';
   import propScale from '@/helpers/prop.scale';
   import { IModifiers } from '@/plugins/vue-bem-cn/src/globals';
+  import eIcon from '@/elements/e-icon.vue';
 
   interface ISetup {
     container: Ref<HTMLDivElement>;
@@ -61,7 +62,9 @@
   export default defineComponent({
     name: 'c-modal',
 
-    // components: {},
+    components: {
+      eIcon,
+    },
 
     props: {
       /**
@@ -314,7 +317,7 @@
       align-items: center;
     }
 
-    &__content, {
+    &__content {
       flex: 1 0 auto;
       padding: variables.$spacing--25;
 

src/components/c-notification.vue

@@ -16,6 +16,7 @@
   import { defineComponent, PropType } from 'vue';
   import { IModifiers } from '@/plugins/vue-bem-cn/src/globals';
   import notificationStore, { INotificationItem, TNotificationStore } from '@/stores/notification';
+  import eIcon from '@/elements/e-icon.vue';
 
   interface ISetup {
     notificationStore: TNotificationStore
@@ -32,8 +33,9 @@
     name: 'c-notification',
     status: 0, // TODO: remove when component was prepared for current project.
 
-    // components: {},
-    // components: {},
+    components: {
+      eIcon,
+    },
 
     props: {
       /**

src/components/c-slider.vue

@@ -32,7 +32,7 @@
     Ref,
     ref,
   } from 'vue';
-  import eIcon from '@/components/e-icon.vue';
+  import eIcon from '@/elements/e-icon.vue';
 
   interface ISetup {
     stage: Ref<HTMLDivElement>;

src/components/e-button.vue → src/elements/e-button.vue

@@ -318,9 +318,9 @@
   @use '../setup/scss/mixins';
   @use '../setup/scss/variables';
 
-  $_e-button__radius: 3px;
-
   .e-button {
+    $border-radius: 3px;
+
     @include mixins.font(14, 18, variables.$font-weight--semi-bold);
 
     position: relative;
@@ -329,7 +329,7 @@
     padding: 6px variables.$spacing--10;
     outline: none;
     border: 1px solid variables.$color-grayscale--500;
-    border-radius: $_e-button__radius;
+    border-radius: $border-radius;
     background: transparent;
     cursor: pointer;
     color: variables.$color-grayscale--400;

src/components/e-input.vue → src/elements/e-input.vue

@@ -47,6 +47,7 @@
   import cFormNotification from '@/components/c-form-notification.vue';
   import useFormStates, { IFormStates, withProps } from '@/compositions/form-states';
   import { IModifiers } from '@/plugins/vue-bem-cn/src/globals';
+  import eIcon from '@/elements/e-icon.vue';
 
   interface ISetup extends IFormStates {
     input: Ref<HTMLInputElement | null>;
@@ -67,6 +68,7 @@
     status: 0, // TODO: remove when component was prepared for current project.
 
     components: {
+      eIcon,
       cFormNotification,
     },
 

src/components/e-logo.vue → src/elements/e-logo.vue

@@ -21,6 +21,7 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
   import useTheme, { ITheme } from '@/compositions/themes';
+  import eIcon from '@/elements/e-icon.vue';
 
   interface ILogo {
     icon: string;
@@ -37,7 +38,9 @@
     name: 'e-logo',
     status: 0, // TODO: remove when component was prepared for current project.
 
-    // components: {},
+    components: {
+      eIcon,
+    },
 
     inheritAttrs: false,
 

src/components/e-multiselect.vue → src/elements/e-multiselect.vue

@@ -76,6 +76,8 @@
   import useUuid, { IUuid } from '@/compositions/uuid';
   import useFormStates, { IFormStates, withProps } from '@/compositions/form-states';
   import { IModifiers } from '@/plugins/vue-bem-cn/src/globals';
+  import eCheckbox from '@/elements/e-checkbox.vue';
+  import eIcon from '@/elements/e-icon.vue';
 
   interface IOption {
     value: string;
@@ -98,7 +100,11 @@
    */
   export default defineComponent({
     name: 'e-multiselect',
-    // components: {},
+    
+    components: {
+      eCheckbox,
+      eIcon
+    },
 
     props: {
       ...withProps(),

src/components/e-select.vue → src/elements/e-select.vue

@@ -40,6 +40,7 @@
   import i18n from '@/setup/i18n';
   import useFormStates, { IFormStates, withProps } from '@/compositions/form-states';
   import { IModifiers } from '@/plugins/vue-bem-cn/src/globals';
+  import eIcon from '@/elements/e-icon.vue';
 
   interface IData {
     internalValue: string;
@@ -56,7 +57,9 @@
     name: 'e-select',
     status: 0, // TODO: remove when component was prepared for current project.
 
-    // components: {},
+    components: {
+      eIcon,
+    },
     inheritAttrs: false,
 
     props: {

src/components/e-table.vue → src/elements/e-table.vue

@@ -192,8 +192,8 @@
     Ref,
     ref,
   } from 'vue';
-  import eIcon from '@/components/e-icon.vue';
-  import eCheckbox from '@/components/e-checkbox.vue';
+  import eIcon from '@/elements/e-icon.vue';
+  import eCheckbox from '@/elements/e-checkbox.vue';
   import useUuid, { IUuid } from '@/compositions/uuid';
   import { IModifiers } from '@/plugins/vue-bem-cn/src/globals';
 

src/components/e-textarea.vue → src/elements/e-textarea.vue

@@ -31,6 +31,7 @@
   import cFormNotification from '@/components/c-form-notification.vue';
   import useFormStates, { IFormStates, withProps } from '@/compositions/form-states';
   import { IModifiers } from '@/plugins/vue-bem-cn/src/globals';
+  import eIcon from '@/elements/e-icon.vue';
 
   /**
    * Renders a styled `<textarea>` element which supports the default form state-types.
@@ -43,6 +44,7 @@
     status: 0, // TODO: remove when component was prepared for current project.
 
     components: {
+      eIcon,
       cFormNotification,
     },
     inheritAttrs: false,

src/main.ts

@@ -3,9 +3,9 @@ import './setup/styles.scss';
 
 import { createApp, Plugin } from 'vue';
 import { createPinia } from 'pinia';
-import api from '@/stores/plugins/api';
-import options from '@/setup/options';
-import plugins from '@/setup/plugins';
+import api from './stores/plugins/api';
+import options from './setup/options';
+import plugins from './setup/plugins';
 
 const vuePlugins = plugins;
 const pinia = createPinia();

src/setup/plugins.ts

@@ -4,7 +4,7 @@ import resizeEnd from '@/plugins/resize-end';
 import viewport from '@/plugins/viewport';
 import i18n from '@/setup/i18n'; // MUST come after i18n because of build order.
 import directives from '@/setup/directives';
-import components from '@/setup/components';
+import components from '@/setup/ssr-components';
 import dayjs from '@/plugins/dayjs';
 // import VueFocus from '@/plugins/v-focus';
 // import tooltip from '@/plugins/tooltip';

src/setup/ssr-components.ts

@@ -0,0 +1,23 @@
+import { Plugin } from 'vue';
+
+// SSR related
+import lDefault from '@/layouts/l-default.vue';
+import cHeader from '@/components/c-header.vue';
+import cFooter from '@/components/c-footer.vue';
+
+const plugin: Plugin = {
+  install(app) {
+    const components = [
+      // SSR related
+      lDefault,
+      cHeader,
+      cFooter,
+    ];
+
+    components.forEach((component) => {
+      app.component(component.name, component);
+    });
+  },
+};
+
+export default plugin;

src/setup/styleguide/routes.ts

@@ -1,5 +1,5 @@
 import { ComponentPublicInstance } from 'vue';
-import lDefault from '@/components/l-default.vue';
+import lDefault from '@/layouts/l-default.vue';
 
 import index from '@/styleguide/routes/r-index.vue';
 import sandbox from '@/styleguide/routes/r-sandbox.vue';

src/stories/components/c-modal.stories.js

@@ -1,7 +1,7 @@
 import { faker } from '@faker-js/faker/locale/en';
 
 import cModal from '@/components/c-modal';
-import eButton from '@/components/e-button';
+import eButton from '@/elements/e-button';
 
 export default {
   component: cModal,

src/stories/components/c-slider.stories.js

@@ -1,6 +1,6 @@
 import cSlider from '@/components/c-slider.vue';
 import cSliderItemX from '@/components/c-slider-item-x.vue';
-import ePicture from '@/components/e-picture.vue';
+import ePicture from '@/elements/e-picture.vue';
 import { createSrcSetImage } from '@/styleguide/mock-data/data-object/image';
 
 export default {

src/stories/components/c-tabs.stories.js

@@ -1,6 +1,6 @@
 import mapComponentEventsToStorybookActions from '@/stories/helpers/map-component-events-to-storybook-actions';
 import cTabs from '@/components/c-tabs.vue';
-import eIcon from '@/components/e-icon.vue';
+import eIcon from '@/elements/e-icon.vue';
 
 export default {
   component: cTabs,

src/stories/components/e-button.stories.js

@@ -1,5 +1,5 @@
 import mapComponentEventsToStorybookActions from '@/stories/helpers/map-component-events-to-storybook-actions';
-import eButton from '@/components/e-button.vue';
+import eButton from '@/elements/e-button.vue';
 
 export default {
   component: eButton,

src/styleguide/components/s-api-mock-test.vue

@@ -83,8 +83,8 @@
     rest,
   } from 'msw';
   import mockWorker from '@/styleguide/api/browser';
-  import eCheckbox from '@/components/e-checkbox.vue';
-  import eSelect from '@/components/e-select.vue';
+  import eCheckbox from '@/elements/e-checkbox.vue';
+  import eSelect from '@/elements/e-select.vue';
 
   interface IDebugConfiguration {
     header: string;

src/styleguide/components/s-demo-settings.vue

@@ -25,7 +25,7 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
   import sHtmlValidation from '@/styleguide/components/s-html-validation.vue';
-  import eCheckbox from '@/components/e-checkbox.vue';
+  import eCheckbox from '@/elements/e-checkbox.vue';
   import sApiMockTest from '@/styleguide/components/s-api-mock-test.vue';
 
   interface IData {

src/styleguide/components/s-html-validation.vue

@@ -10,7 +10,7 @@
 
 <script lang="ts">
   import { defineComponent } from 'vue';
-  import eCheckbox from '@/components/e-checkbox.vue';
+  import eCheckbox from '@/elements/e-checkbox.vue';
 
   interface IData {
 

src/styleguide/components/s-icon-finder.vue

@@ -69,6 +69,7 @@
 <script lang="ts">
   import { defineComponent, Ref, ref } from 'vue';
   import spritePath from '@/assets/icons.svg';
+  import eIcon from '@/elements/e-icon.vue';
 
   interface ISetup {
     input: Ref<HTMLInputElement | null>;
@@ -121,7 +122,10 @@
   export default defineComponent({
     name: 's-icon-finder',
 
-    // props: {},
+    components: { 
+      eIcon, 
+    },
+    // props: {}, 
 
     setup(): ISetup {
       const input = ref();