Merge pull request #252 from raaymax/grouping_components

refactor: move components to subfolders by category

ui/src/core/templateMap.ts

@@ -1,46 +1,51 @@
 // Maps Streamsync component types to renderable Vue components
-
-import CorePage from "../core_components/CorePage.vue";
-import CoreSidebar from "../core_components/CoreSidebar.vue";
-import CoreText from "../core_components/CoreText.vue";
-import CoreButton from "../core_components/CoreButton.vue";
-import CoreIcon from "../core_components/CoreIcon.vue";
-import CoreSection from "../core_components/CoreSection.vue";
-import CoreHeader from "../core_components/CoreHeader.vue";
-import CoreHeading from "../core_components/CoreHeading.vue";
-import CoreDataframe from "../core_components/CoreDataframe.vue";
-import CoreHtml from "../core_components/CoreHtml.vue";
-import CorePagination from "../core_components/CorePagination.vue";
-import CoreRepeater from "../core_components/CoreRepeater.vue";
-import CoreColumn from "../core_components/CoreColumn.vue";
-import CoreColumns from "../core_components/CoreColumns.vue";
-import CoreHorizontalStack from "../core_components/CoreHorizontalStack.vue";
-import CoreSeparator from "../core_components/CoreSeparator.vue";
-import CoreTab from "../core_components/CoreTab.vue";
-import CoreTabs from "../core_components/CoreTabs.vue";
-import CoreImage from "../core_components/CoreImage.vue";
-import CorePDF from "../core_components/embed/CorePDF.vue";
-import CoreIFrame from "../core_components/embed/CoreIFrame.vue";
-import CoreGoogleMaps from "../core_components/embed/CoreGoogleMaps.vue";
-import CoreTimer from "../core_components/CoreTimer.vue";
-import CoreWebcamCapture from "../core_components/CoreWebcamCapture.vue";
-import CoreVegaLiteChart from "../core_components/CoreVegaLiteChart.vue";
-import CorePlotlyGraph from "../core_components/CorePlotlyGraph.vue";
-import CoreRoot from "../core_components/CoreRoot.vue";
-import CoreTextInput from "../core_components/input/CoreTextInput.vue";
-import CoreTextareaInput from "../core_components/input/CoreTextareaInput.vue";
-import CoreNumberInput from "../core_components/input/CoreNumberInput.vue";
-import CoreSliderInput from "../core_components/input/CoreSliderInput.vue";
+// content
+import CoreDataframe from "../core_components/content/CoreDataframe.vue";
+import CoreHeading from "../core_components/content/CoreHeading.vue";
+import CoreIcon from "../core_components/content/CoreIcon.vue";
+import CoreImage from "../core_components/content/CoreImage.vue";
+import CoreMessage from "../core_components/content/CoreMessage.vue";
+import CoreMetric from "../core_components/content/CoreMetric.vue";
+import CorePlotlyGraph from "../core_components/content/CorePlotlyGraph.vue";
+import CoreText from "../core_components/content/CoreText.vue";
+import CoreVegaLiteChart from "../core_components/content/CoreVegaLiteChart.vue";
+import CoreVideoPlayer from "../core_components/content/CoreVideoPlayer.vue";
+// input
+import CoreCheckboxInput from "../core_components/input/CoreCheckboxInput.vue";
 import CoreDateInput from "../core_components/input/CoreDateInput.vue";
-import CoreRadioInput from "../core_components/input/CoreRadioInput.vue";
 import CoreDropdownInput from "../core_components/input/CoreDropdownInput.vue";
-import CoreSelectInput from "../core_components/input/CoreSelectInput.vue";
-import CoreMultiselectInput from "../core_components/input/CoreMultiselectInput.vue";
-import CoreCheckboxInput from "../core_components/input/CoreCheckboxInput.vue";
 import CoreFileInput from "../core_components/input/CoreFileInput.vue";
-import CoreMetric from "../core_components/CoreMetric.vue";
-import CoreMessage from "../core_components/CoreMessage.vue";
-import CoreVideoPlayer from "../core_components/CoreVideoPlayer.vue";
+import CoreMultiselectInput from "../core_components/input/CoreMultiselectInput.vue";
+import CoreNumberInput from "../core_components/input/CoreNumberInput.vue";
+import CoreRadioInput from "../core_components/input/CoreRadioInput.vue";
+import CoreSelectInput from "../core_components/input/CoreSelectInput.vue";
+import CoreSliderInput from "../core_components/input/CoreSliderInput.vue";
+import CoreTextInput from "../core_components/input/CoreTextInput.vue";
+import CoreTextareaInput from "../core_components/input/CoreTextareaInput.vue";
+// layout
+import CoreColumn from "../core_components/layout/CoreColumn.vue";
+import CoreColumns from "../core_components/layout/CoreColumns.vue";
+import CoreHeader from "../core_components/layout/CoreHeader.vue";
+import CoreHorizontalStack from "../core_components/layout/CoreHorizontalStack.vue";
+import CoreSection from "../core_components/layout/CoreSection.vue";
+import CoreSeparator from "../core_components/layout/CoreSeparator.vue";
+import CoreSidebar from "../core_components/layout/CoreSidebar.vue";
+import CoreTab from "../core_components/layout/CoreTab.vue";
+import CoreTabs from "../core_components/layout/CoreTabs.vue";
+// other
+import CoreButton from "../core_components/other/CoreButton.vue";
+import CoreHtml from "../core_components/other/CoreHtml.vue";
+import CorePagination from "../core_components/other/CorePagination.vue";
+import CoreRepeater from "../core_components/other/CoreRepeater.vue";
+import CoreTimer from "../core_components/other/CoreTimer.vue";
+import CoreWebcamCapture from "../core_components/other/CoreWebcamCapture.vue";
+// embed
+import CorePDF from "../core_components/embed/CorePDF.vue";
+import CoreIFrame from "../core_components/embed/CoreIFrame.vue";
+import CoreGoogleMaps from "../core_components/embed/CoreGoogleMaps.vue";
+// root
+import CorePage from "../core_components/root/CorePage.vue";
+import CoreRoot from "../core_components/root/CoreRoot.vue";
 
 import { StreamsyncComponentDefinition } from "../streamsyncTypes";
 import { h } from "vue";

ui/src/core_components/CoreDataframe.vue → ui/src/core_components/content/CoreDataframe.vue

@@ -96,13 +96,13 @@
 
 <script lang="ts">
 import { Ref, computed, inject, ref } from "vue";
-import { FieldCategory, FieldType } from "../streamsyncTypes";
+import { FieldCategory, FieldType } from "../../streamsyncTypes";
 import {
 	cssClasses,
 	primaryTextColor,
 	secondaryTextColor,
 	separatorColor,
-} from "../renderer/sharedStyleFields";
+} from "../../renderer/sharedStyleFields";
 import { onMounted } from "vue";
 import { watch } from "vue";
 import { nextTick } from "vue";
@@ -204,7 +204,7 @@ export default {
 };
 </script>
 <script setup lang="ts">
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 import * as aq from "arquero";
 import { tableFromIPC, Table } from "apache-arrow";
 
@@ -514,7 +514,7 @@ onUnmounted(() => {
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreDataframe {
 	font-size: 0.8rem;

ui/src/core_components/CoreHeading.vue → ui/src/core_components/content/CoreHeading.vue

@@ -12,8 +12,8 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../streamsyncTypes";
-import { cssClasses, primaryTextColor } from "../renderer/sharedStyleFields";
+import { FieldCategory, FieldType } from "../../streamsyncTypes";
+import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
 
 const description =
 	"A text component used to display headings or titles in different sizes and styles.";
@@ -62,11 +62,11 @@ export default {
 </script>
 <script setup lang="ts">
 import { inject } from "vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 const fields = inject(injectionKeys.evaluatedFields);
 </script>
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreHeading {
 	color: var(--primaryTextColor);

ui/src/core_components/CoreIcon.vue → ui/src/core_components/content/CoreIcon.vue

@@ -12,8 +12,8 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../streamsyncTypes";
-import { cssClasses } from "../renderer/sharedStyleFields";
+import { FieldCategory, FieldType } from "../../streamsyncTypes";
+import { cssClasses } from "../../renderer/sharedStyleFields";
 
 const docs = `
 Streamsync uses the library RemixIcon to display icons. To include an icon, check remixicon.com, find the icon's id (such as \`arrow-up\`)
@@ -54,13 +54,13 @@ export default {
 
 <script setup lang="ts">
 import { inject } from "vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 
 const fields = inject(injectionKeys.evaluatedFields);
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .icon {
 	display: flex;

ui/src/core_components/CoreImage.vue → ui/src/core_components/content/CoreImage.vue

@@ -16,9 +16,12 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../streamsyncTypes";
-import { cssClasses, secondaryTextColor } from "../renderer/sharedStyleFields";
-import { getClick } from "../renderer/syntheticEvents";
+import { FieldCategory, FieldType } from "../../streamsyncTypes";
+import {
+	cssClasses,
+	secondaryTextColor,
+} from "../../renderer/sharedStyleFields";
+import { getClick } from "../../renderer/syntheticEvents";
 
 const description = "A component to display images.";
 
@@ -92,7 +95,7 @@ export default {
 
 <script setup lang="ts">
 import { Ref, computed, inject, ref } from "vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const ss = inject(injectionKeys.core);
@@ -124,7 +127,7 @@ function handleClick(ev: MouseEvent) {
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreImage {
 	width: fit-content;

ui/src/core_components/CoreMessage.vue → ui/src/core_components/content/CoreMessage.vue

@@ -18,9 +18,9 @@
 </template>
 
 <script lang="ts">
-import LoadingSymbol from "../renderer/LoadingSymbol.vue";
-import { FieldCategory, FieldType } from "../streamsyncTypes";
-import { cssClasses, primaryTextColor } from "../renderer/sharedStyleFields";
+import LoadingSymbol from "../../renderer/LoadingSymbol.vue";
+import { FieldCategory, FieldType } from "../../streamsyncTypes";
+import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
 
 const description =
 	"A component that displays a message in various styles, including success, error, warning, and informational.";
@@ -92,7 +92,7 @@ export default {
 </script>
 <script setup lang="ts">
 import { computed, inject } from "vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 
 const fields = inject(injectionKeys.evaluatedFields);
 const isBeingEdited = inject(injectionKeys.isBeingEdited);
@@ -142,7 +142,7 @@ const rootStyle = computed(() => {
 });
 </script>
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreMessage {
 	color: var(--primaryTextColor);

ui/src/core_components/CoreMetric.vue → ui/src/core_components/content/CoreMetric.vue

@@ -10,12 +10,12 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldType } from "../streamsyncTypes";
+import { FieldCategory, FieldType } from "../../streamsyncTypes";
 import {
 	cssClasses,
 	primaryTextColor,
 	secondaryTextColor,
-} from "../renderer/sharedStyleFields";
+} from "../../renderer/sharedStyleFields";
 
 const description =
 	"A component that prominently displays a metric value and associated information.";
@@ -75,7 +75,7 @@ export default {
 </script>
 <script setup lang="ts">
 import { computed, inject } from "vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 const fields = inject(injectionKeys.evaluatedFields);
 
 const sentiment = computed(() => {
@@ -112,7 +112,7 @@ const rootStyle = computed(() => {
 });
 </script>
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreMetric {
 	color: var(--primaryTextColor);

ui/src/core_components/CorePlotlyGraph.vue → ui/src/core_components/content/CorePlotlyGraph.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../streamsyncTypes";
-import { cssClasses } from "../renderer/sharedStyleFields";
+import { FieldType } from "../../streamsyncTypes";
+import { cssClasses } from "../../renderer/sharedStyleFields";
 
 const description = "A component that displays Plotly graphs.";
 
@@ -56,7 +56,7 @@ export default {
 
 <script setup lang="ts">
 import { computed, inject, onMounted, Ref, ref, watch } from "vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const chartTargetEl: Ref<HTMLElement> = ref(null);
@@ -147,7 +147,7 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CorePlotlyGraph {
 	min-height: 1px;

ui/src/core_components/CoreText.vue → ui/src/core_components/content/CoreText.vue

@@ -16,9 +16,9 @@
 </template>
 
 <script lang="ts">
-import { FieldCategory, FieldControl, FieldType } from "../streamsyncTypes";
-import { cssClasses, primaryTextColor } from "../renderer/sharedStyleFields";
-import { getClick } from "../renderer/syntheticEvents";
+import { FieldCategory, FieldControl, FieldType } from "../../streamsyncTypes";
+import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
+import { getClick } from "../../renderer/syntheticEvents";
 
 const clickHandlerStub = `
 def click_handler(state):
@@ -80,7 +80,7 @@ export default {
 <script setup lang="ts">
 import { marked } from "marked";
 import { Ref, computed, inject, ref } from "vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const fields = inject(injectionKeys.evaluatedFields);
@@ -114,7 +114,7 @@ function handleClick(ev: MouseEvent) {
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreText {
 	color: var(--primaryTextColor);

ui/src/core_components/CoreVegaLiteChart.vue → ui/src/core_components/content/CoreVegaLiteChart.vue

@@ -5,8 +5,8 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../streamsyncTypes";
-import { cssClasses } from "../renderer/sharedStyleFields";
+import { FieldType } from "../../streamsyncTypes";
+import { cssClasses } from "../../renderer/sharedStyleFields";
 
 const description = "A component that displays Vega-Lite/Altair charts.";
 
@@ -60,7 +60,7 @@ export default {
 
 <script setup lang="ts">
 import { inject, onMounted, Ref, ref, watch } from "vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 
 const rootEl: Ref<HTMLElement> = ref(null);
 const chartTargetEl: Ref<HTMLElement> = ref(null);
@@ -90,7 +90,7 @@ onMounted(() => {
 </script>
 
 <style scoped>
-@import "../renderer/sharedStyles.css";
+@import "../../renderer/sharedStyles.css";
 
 .CoreVegaLiteChart {
 	min-height: 1px;

ui/src/core_components/CoreVideoPlayer.vue → ui/src/core_components/content/CoreVideoPlayer.vue

@@ -11,8 +11,8 @@
 </template>
 
 <script lang="ts">
-import { FieldType } from "../streamsyncTypes";
-import { cssClasses } from "../renderer/sharedStyleFields";
+import { FieldType } from "../../streamsyncTypes";
+import { cssClasses } from "../../renderer/sharedStyleFields";
 
 const description =
 	"A video player component that can play various video formats.";
@@ -91,7 +91,7 @@ export default {
 
 <script setup lang="ts">
 import { inject } from "vue";
-import injectionKeys from "../injectionKeys";
+import injectionKeys from "../../injectionKeys";
 
 const fields = inject(injectionKeys.evaluatedFields);
 </script>