Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: move components to subfolders by category #252

Merged
merged 2 commits into from
Feb 20, 2024
Merged

refactor: move components to subfolders by category #252

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5a42476
refactor: move components to subfolders by category
raaymax Feb 19, 2024
d25f967
Merge branch 'dev' into grouping_components
raaymax Feb 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 44 additions & 39 deletions ui/src/core/templateMap.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand Down
8 changes: 4 additions & 4 deletions ui/src/core_components/CoreDataframe.vue → ...core_components/content/CoreDataframe.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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";

Expand Down Expand Up @@ -514,7 +514,7 @@ onUnmounted(() => {
</script>

<style scoped>
@import "../renderer/sharedStyles.css";
@import "../../renderer/sharedStyles.css";

.CoreDataframe {
font-size: 0.8rem;
Expand Down
8 changes: 4 additions & 4 deletions ui/src/core_components/CoreHeading.vue → ...c/core_components/content/CoreHeading.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.";
Expand Down Expand Up @@ -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);
Expand Down
8 changes: 4 additions & 4 deletions ui/src/core_components/CoreIcon.vue → ui/src/core_components/content/CoreIcon.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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\`)
Expand Down Expand 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;
Expand Down
13 changes: 8 additions & 5 deletions ui/src/core_components/CoreImage.vue → ui/src/core_components/content/CoreImage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.";

Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -124,7 +127,7 @@ function handleClick(ev: MouseEvent) {
</script>

<style scoped>
@import "../renderer/sharedStyles.css";
@import "../../renderer/sharedStyles.css";

.CoreImage {
width: fit-content;
Expand Down
10 changes: 5 additions & 5 deletions ui/src/core_components/CoreMessage.vue → ...c/core_components/content/CoreMessage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.";
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -142,7 +142,7 @@ const rootStyle = computed(() => {
});
</script>
<style scoped>
@import "../renderer/sharedStyles.css";
@import "../../renderer/sharedStyles.css";

.CoreMessage {
color: var(--primaryTextColor);
Expand Down
8 changes: 4 additions & 4 deletions ui/src/core_components/CoreMetric.vue → ...rc/core_components/content/CoreMetric.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.";
Expand Down Expand Up @@ -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(() => {
Expand Down Expand Up @@ -112,7 +112,7 @@ const rootStyle = computed(() => {
});
</script>
<style scoped>
@import "../renderer/sharedStyles.css";
@import "../../renderer/sharedStyles.css";

.CoreMetric {
color: var(--primaryTextColor);
Expand Down
8 changes: 4 additions & 4 deletions ui/src/core_components/CorePlotlyGraph.vue → ...re_components/content/CorePlotlyGraph.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.";

Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -147,7 +147,7 @@ onMounted(async () => {
</script>

<style scoped>
@import "../renderer/sharedStyles.css";
@import "../../renderer/sharedStyles.css";

.CorePlotlyGraph {
min-height: 1px;
Expand Down
10 changes: 5 additions & 5 deletions ui/src/core_components/CoreText.vue → ui/src/core_components/content/CoreText.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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):
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -114,7 +114,7 @@ function handleClick(ev: MouseEvent) {
</script>

<style scoped>
@import "../renderer/sharedStyles.css";
@import "../../renderer/sharedStyles.css";

.CoreText {
color: var(--primaryTextColor);
Expand Down
8 changes: 4 additions & 4 deletions ui/src/core_components/CoreVegaLiteChart.vue → ..._components/content/CoreVegaLiteChart.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.";

Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -90,7 +90,7 @@ onMounted(() => {
</script>

<style scoped>
@import "../renderer/sharedStyles.css";
@import "../../renderer/sharedStyles.css";

.CoreVegaLiteChart {
min-height: 1px;
Expand Down
6 changes: 3 additions & 3 deletions ui/src/core_components/CoreVideoPlayer.vue → ...re_components/content/CoreVideoPlayer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.";
Expand Down Expand Up @@ -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>
Expand Down
Loading
Loading