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

feat: added link component #266

Merged
merged 8 commits into from
Mar 3, 2024
Merged

feat: added link component #266

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a1c02c1
feat: added link component
raaymax Feb 26, 2024
db4b403
Merge branch 'dev' into link-component
raaymax Feb 28, 2024
e624faa
chore: changes according to code review
raaymax Feb 28, 2024
963b48e
chore: default link value
raaymax Feb 28, 2024
c700657
chore: changed description of the link component
raaymax Feb 28, 2024
28dacc9
chore: click prevent default
raaymax Feb 28, 2024
1ba6a76
chore: better page description
raaymax Feb 28, 2024
952dd95
Merge branch 'dev' into link-component
ramedina86 Mar 1, 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
Binary file added docs/docs/public/components/link.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 11 additions & 1 deletion ui/src/builder/BuilderFieldsText.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
:id="`list-${componentId}-${fieldKey}`"
>
<option
v-for="(option, optionKey) in templateField.options"
v-for="(option, optionKey) in options"
:key="optionKey"
:value="optionKey"
>
Expand Down Expand Up @@ -76,6 +76,16 @@ const templateField = computed(() => {
return definition.fields[fieldKey.value];
});

const options = computed(() => {
const field = templateField.value;
if (field.options) {
return typeof field.options === "function"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @FabienArcellier check this out

@raaymax worked on a dynamic list of options. You can pass it hardcoded options (as we do now), but you can also pass it a function to generate the options.

This was one of the challenges I saw for the Reuse Component component. So with this we're halfway there. I've asked him to work on Reuse Component.

@raaymax for your reference #215

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By the way I'm talking specifically about selecting the id of the component that we want to reuse.

? field.options()
: field.options;
}
return [];
});

const handleInput = (ev: Event) => {
setContentValue(
component.value.id,
Expand Down
2 changes: 2 additions & 0 deletions ui/src/core/templateMap.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ 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";
import CoreLink from "../core_components/content/CoreLink.vue";
// input
import CoreCheckboxInput from "../core_components/input/CoreCheckboxInput.vue";
import CoreDateInput from "../core_components/input/CoreDateInput.vue";
Expand Down Expand Up @@ -67,6 +68,7 @@ const templateMap = {
columns: CoreColumns,
tab: CoreTab,
tabs: CoreTabs,
link: CoreLink,
horizontalstack: CoreHorizontalStack,
separator: CoreSeparator,
image: CoreImage,
Expand Down
86 changes: 86 additions & 0 deletions ui/src/core_components/content/CoreLink.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
<template>
<div class="CoreLink">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since you're working on links, can you please check how the Markdown links are working, if everything is alright with them?

I assume that with a Text component, markdown mode, I can [hello](https://streamsync.cloud).

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just checked and yes - you can. You can also [Next page](#next-page) to navigate between pages.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So it's basically the same, only difference is that you can select page in component and define rel and target.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for checking!

Yes they're quite similar, that's what kept me from creating this component. However, now that I think more about it:

  • Agreed, there's the rel and target
  • You can change the color
  • It's more semantic. If you see a component tree with 3 Link, you it's self-explanatory. You see 3 Text, could be anything.
  • It's more easily discoverable. "I need to create a link, so I'll create a Text component which probably supports markdown and I'll []() my way into it." -Probably no one ever, at least not on their first try.

By the way there's the possibility of opening URLs from the backend via backend actions too.

<a
:href="fields.url.value"
:target="fields.target.value"
:rel="fields.rel.value"
>
{{ displayText }}
</a>
</div>
</template>

<script lang="ts">
import { FieldType } from "../../streamsyncTypes";
import { cssClasses, primaryTextColor } from "../../renderer/sharedStyleFields";
import injectionKeys from "../../injectionKeys";
let options = [];

export default {
streamsync: {
name: "Link",
description: "A component to create a hyperlink.",
category: "Content",
fields: {
url: {
name: "URL",
type: FieldType.Text,
desc: "A valid URL.",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was quite confused by the list of pages at first, when I got to try this component. Took me a while to be like "Ah, of course, the pages are accessible via #".

I love the new dynamic options capability, but it makes you think the right options are the ones listed, when I expect most people to enter a "standard" URL e.g. "github.com".

If we keep it:

  • I'd make it clearer in the desc like, "Specify a URL or choose a page."
  • I'd set the default to https://streamsync.cloud. Bit of self promotion but it'd make it clear right away that yes, you can include "normal" URLs and not just #fragments.

I'm also not sure how it'd behave when the list is empty, needs checking. I expect most apps to not have any keyed pages.

Also, something to keep in mind... The hash can contain parameters that will be lost when switching pages this way.

https://www.streamsync.cloud/page-routes.html#routes-with-parameters

For example if you have /#detailPage/product_id=32&country=AR and you switch via event handler or backend action it'll preserve the rest of the hash.

If someone types #mypage then they literally asked for the parameters to be removed, but if they select it from a list they might have the expectation that it behaves like other page-jumping functionality.

I'm more inclined towards not keeping the dynamic options here, but they'd certainly come in handy for Reuse Component.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The logic that manages the hash is in CoreRoot.vue if you're interested.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see that we've been explicitly asked to link pages. So maybe let's try how it'd look like with the minor changes I suggested under "If we keep it".

desc should probably be "Specify a URL or choose a page. Keep in mind that you can only link to pages for which a key has been specified."

Keen to hear your thoughts. Apologies for the verbosity, you probably weren't expecting an essay after submitting a PR for an a href.

Copy link
Collaborator Author

@raaymax raaymax Feb 28, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it's just how these kinds of links work. Personally, it would be really confusing for me if the link appended parameters at the end of the URL. I expect that most people using this app will have at least a really basic knowledge about HTML, and <a href> is probably the first thing they learn.

options: () => Object.fromEntries(options.value),
},
target: {
name: "Target",
type: FieldType.Text,
options: {
_self: "Self",
_blank: "Blank",
_parent: "Parent",
_top: "Top",
},
desc: "Specifies where to open the linked document.",
default: "_self",
},
rel: {
name: "Rel",
type: FieldType.Text,
desc: "Specifies the relationship between the current document and the linked document.",
},
text: {
name: "Text",
default: "",
type: FieldType.Text,
desc: "The text to display in the link.",
},
primaryTextColor,
cssClasses,
},
},
};
</script>

<script setup lang="ts">
import { inject, computed } from "vue";
const ss = inject(injectionKeys.core);
const fields = inject(injectionKeys.evaluatedFields);

options = computed(() => {
raaymax marked this conversation as resolved.
Show resolved Hide resolved
return ss
.getComponents("root", true)
.map((page) => page.content.key)
raaymax marked this conversation as resolved.
Show resolved Hide resolved
.filter((key) => Boolean(key))
.map((key) => [`#${key}`, key]);
});

const displayText = computed(() => {
return fields.text.value || fields.url.value || "Link";
raaymax marked this conversation as resolved.
Show resolved Hide resolved
});
</script>

<style scoped>
.CoreLink a {
color: var(--primaryTextColor);
}
.CoreLink.beingEdited:not(.selected) a {
raaymax marked this conversation as resolved.
Show resolved Hide resolved
pointer-events: none;
}
</style>
2 changes: 1 addition & 1 deletion ui/src/streamsyncTypes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export type StreamsyncComponentDefinition = {
desc?: string; // Description
default?: string; // Value used if the field is empty, e.g. "(No text)"
control?: FieldControl; // Which control (text, textarea, etc) to use if not the default for the type
options?: Record<string, string>; // List of values to be provided as autocomplete options
options?: Record<string, string> | (() => Record<string, string>); // List of values to be provided as autocomplete options
type: FieldType; // Data type for the field
category?: FieldCategory; // Category (Layout, Content, etc)
applyStyleVariable?: boolean; // Use the value of this field as a CSS variable
Expand Down
Loading