Which components do we want to ship in v1?

[MarvinKlein1508]

Right now there are some components which have been added by @JeremyJ78

• FluentCxTileGrid
• FluentCxResizer
• FluentCxFilemanager
• FluentCxImageGroup & FluentCxImage
• FluentCxDropZone & FluentCxDropZoneContainer
• FluentCxDeviceDetector (No demos yet)
• BarChart, BoxChart, ChartBase, PieChart (they need FluentCx prefix)
• FluentCxAIPrompt

As we have discussed before I believe we shouldn't ship FluentCxDropZoneContainer and FluentCxDropZone as we don't want to create community components to replace existing components in the library.

I also wouldn't ship any AI related stuff. Perhaps we should seperate this kind of components to another package FluentUI.Blazor.Community.Components.AI as this stuff comes with a lot of third party dependencies.

What do you guys think? @oneolddev @PascalVorwerk

[JeremyJ78]

I can answer for few things :

• FluentCxFileManager uses FluentCxTileGrid (to render mosaic, small, medium, large and very large icons)
• FluentCxTileGrid uses FluentCxResizer and FluentCxDropZone and FluentCxDropZoneContainer

I had an issue with FluentDropContainer...
In the TileGrid if I use the above component, I can't resize the component after I reorder it :(

For exemple :
I resize the component, and I reorder it => OK
I reorder the component first => I can resize it
I resize the component, reorder it and resize again => I can't

And I don't why we have this issue :(

That's why I create a new DropZoneContainer...
To be able to resize the tile after I reorder it...

BUT : We can remove the FluentCxDropZoneContainer from the samples :)

---

The FluentCxTileGrid allow us to create UI like dashboard (or profile menu)

---

The FluentCxFileManager is an Windows explorer like file manager

---

The FluentCxDeviceDetector allow us to detect if we run on smartphone, Edge, Chrome, Desktop, Tablet... (I will add a sample for that soon)

---

The AIPrompt is like a little chat (For example : Can you give the spec of the Asus Rog Ally ? and it gives to you a response)

---

You are right :) Maybe we can create a specific AI package for this component (I haven't though about that)
I will split the icons files for Manager into its own package I think (because I will create icons for many extensions)

The Chart (I will rename them with the prefix FluentCx - my bad) is, for now, a test to have chart with fluent design

[JeremyJ78]

Oh ! I forgot :(

FluentCxImage is for V4 fluentui...
I see in V5 that we have a much better component : FluentImage :)

FluentCxImageGroup is an AvatarGroup like component but for image...
It could be useful to stack image (for a chat, as example)

[MarvinKlein1508]

@JeremyJ78 thanks for the information. Perhaps we should then make the Dropzone an internal component.

I will merge the open PR in a bit which updates a large chunk of the demo. Perhaps you might want to wait for it since it touches almost every file.

[PascalVorwerk]

As we have discussed before I believe we shouldn't ship FluentCxDropZoneContainer and FluentCxDropZone as we don't want to create community components to replace existing components in the library.

I agree, end users should not have to decide between a dropzone component from either the main package or this package. I would either: use the dropzone from the main package for internal use, or make this component internal and not for consuming purposes.

I also wouldn't ship any AI related stuff. Perhaps we should seperate this kind of components to another package FluentUI.Blazor.Community.Components.AI as this stuff comes with a lot of third party dependencies.

Agreed. Let's keep the dependencies as minimum as possible.

I have a few questions about some components:

• FileManager, how does this work in webassembly render mode? Does it NEED to be a server side rendered component? If so, i don't really like that.. I believe any component should always be compatible on either render mode.

• The charts. I'm not sure how much added value this provides, it doesn't seem like it is really 'Fluent' like. I mean it's nice to have a wrapper around the chart library! But is this the place for it to be done?

• FluentCxImage, i have a small issue with this, it is too much like FluentImage. I can understand the FluentImageGroup more.

So yes, whilst i do appreciate all the work ofcourse, i do think these ones should atleast need some more review before we expose them in a nuget package.

[PascalVorwerk]

@MarvinKlein1508 What do u think about the FileManager? Should we support components that only really work on server side? Or should we specifically state such a thing somewhere.. I can see the benefits of such a component, specially for admin portals.

IMO, in first instance, i would say we also remove the charts. I saw we basicly use the Plotly.Blazor package. What does the FluentCX implementation add to that package that makes it a component for the FluentUI library?

I feel like we are all actively working on it right now, let's agree to not push anymore to the main branch, but work through PR's. I can take a look on setting a restriction on the main branch? Agree?

[JeremyJ78]

@PascalVorwerk , @MarvinKlein1508 :

I have a great news...
For me, it's great ...

I create a webassembly project and try the file manager in it...
A very little issue is that the webassembly is uploading or downloading files a little slower than the server side...

On server side : 8 MB => around 0.5 s on my desktop (uploading)
On Webassembly : 8 MB => around 0.8 s on my desktop (uploading)

But the component works :)

I do these tests :

Creating folders, delete, move or rename them.
Uploading files, rename, delete or move them.
Changing the view works.
Changing the sort works.
And the search function works.

A little issue on the treeview... Binding issue... But I see in V4 that the binding bug is known...
I will try to work on that too this week end...

[MarvinKlein1508]

@PascalVorwerk I actually like the FileManager. Out of the box I know of 3 use-cases for this in my apps. The component is working fine on both server and WASM (the GitHub Pages website is fully running on WASM).

I agree on the charts though. There isn't really anything related to fluent here. It is a nice to have for sure but why shouldn't I install this package then if I need it. When we add it we would basically providing support for a third party library.

For the start I would stick with FluentCxResize, FluentCxTileGrid, FluentCxFilemanager, FluentCxImageGroup & FluentCxImage. We should focus on these components being fully documented in the code (so the 1000 warnings go away) and add some basic unit tests. If this is settled up I would start with a v1 release and add new components through it later on.

[PascalVorwerk]

@MarvinKlein1508 Can we maybe work out an example on how to use the file manager in the example pages? I don't really understand how the filemanager component is going to edit/create/manage files on a server when it is running webassembly without a bunch of different API calls?

This is why i am wondering how it is working.

[JeremyJ78]

@PascalVorwerk , @MarvinKlein1508 :

The file manager has some event callbacks when some operations are executed. The file manager store the data in a structure like a tree.
When we click on create folder, we have three steps :

• Ask the name of the folder
• Create a node and append it into the tree
• Raise a callback which contains the node as argument

When the callback is raised, the user has two choices :

• If the app is running on the server side, the user can store the data in the disk file, in a database, in azure storage. The user has the node, so he can get the stored data and he do whatever he wants to do.

• If the app is running on the webassembly side, the user can do whatever he wants. If he wants to store the data on its own disk, he can, if he wants to store the data in a storage manager, maybe he can use an API or maybe he has a StorageManager class which manage such things...

All data in the file manager are stored in memory at first step...
After that, you can easily, after stored the data, reload the file manager... And when you reload the data (with GetItemsAsync) you can create an async function to retrieve the data, so the data are not in memory anymore...

Feel free to ask questions if I'm not very clear

[MarvinKlein1508]

@JeremyJ78 can you also explain why you have added this class?
https://github.com/Community-Toolkit-for-Fluent-UI-Blazor/fluentui-blazor-community-extensions/blob/main/src/Community.Components/Helpers/StringHelper.cs

When you inherit from FluentComponentBase an ID is already generated for you automatically.

[JeremyJ78]

@MarvinKlein1508 : My bad :(

I had no idea that FluentComponentBase automatically generates an identifier.
That's why I create this stringhelper class...

I learn a new thing today :)

[MarvinKlein1508]

It does for some components. Otherwise you can use Identifier.NewId() to generate an ID

[JeremyJ78]

@MarvinKlein1508 , @PascalVorwerk : Do you know how to make component internal ?

The razor generator build a public class :(
Is there a way to make the class internal ?

for example, in razor code, do we have a thing like this :

@componentVisibility internal

Or we need to drop the component into a specific folder (like __Internal)

[MarvinKlein1508]

I've seen that .razor files do not support any other modifiers yet.

The only way I can think of is creating an internal class which inherits from FluentComponentBase and then build the UI uisng the builder syntax. Which is quite painful.

[JeremyJ78]

Oh yes...

Write such thing in .cs file :

__builder.OpenComponent<>();

I will try to do that this week end...
Yes, it's quite painful but I will do it :)

[PascalVorwerk]

Hey guys! Been a bit on downlow a few weeks, busy at work! What are some steps we still need to take in order to ship our first version of the components?

[JeremyJ78]

Hi @PascalVorwerk,
For me, the 1st version is near to be shipped.

We have a strange issue with FluentCxMediaQuery. It doesn't work on the github client...
But I don't know why... And I can't investigate, because on localhost, the client side doesn't work on my computer (the loading status is infinite)

[PascalVorwerk]

Hey guys, lately i have been working with azure foudnry and i have had to build a chat agent in my web app. It requires alot of manual work and reading the docs, i think it would be a great possible component.. what do you think? I do realize that not everyone wants to import AI packages in their component package, so it would probably have to be a another separate package?

Also, i am not sure how to handle webassembly, i have been working mostly with a server side / signal R way of dealing with it..

Maybe we can try to work on it together?

[JeremyJ78]

@PascalVorwerk : Thios is a great idea...
With an AI package, we can use you chat bot and the AI Prompt I built...

I don't know if a chat bot can fully run on wasm...
(Because all the data that the bot can use is always on a server and we send the message with an endpoint)

[PascalVorwerk]

https://www.nuget.org/packages/FluentUI.Blazor.Community.Components/

@JeremyJ78 @MarvinKlein1508 I added both of you to the org in nuget! Hopefully u can also see when it is indexed and scanned?

Also, im not sure if im the only one able to approve the deploy action.. if so, let me know. I want all maintainers to be able to approve ofcourse..