|
| 1 | +--- |
| 2 | +layout: post |
| 3 | +title: Showcase-time |
| 4 | +author: [gallayl] |
| 5 | +tags: ['shades', 'shades-common-components', 'shades-showcase-app'] |
| 6 | +image: img/010-showcase-app.jpg |
| 7 | +date: '2022-08-14T18:00:00.257Z' |
| 8 | +draft: false |
| 9 | +excerpt: Updates on Shades - Kick-ass DataGrid updates, fragments and a brand new Showcase app |
| 10 | +--- |
| 11 | + |
| 12 | +## Fragments 🔪 |
| 13 | + |
| 14 | +Using [fragments](https://reactjs.org/docs/fragments.html) in React is not a new concept so I've implemented this also in Shades. The concept is the same - you can avoid unneccessary DOM nesting with them. The syntax is also the same - you can check out some [common component code](https://github.com/furystack/furystack/blob/e6edd24c9a196f56ba5b3b2dd65f062c8d68cdd5/packages/shades-common-components/src/components/data-grid/body.tsx#L52) to get the idea. |
| 15 | + |
| 16 | +```tsx |
| 17 | +export const HelloWorld = Shades({ |
| 18 | + shadowDomName: 'shades-hello-world', |
| 19 | + render: ()=> <> |
| 20 | + <p>Hello</p> |
| 21 | + <p>World</p> |
| 22 | + </> |
| 23 | +}) |
| 24 | +``` |
| 25 | + |
| 26 | +## Compare component states 🔎 |
| 27 | + |
| 28 | +Now the [state comparison API](https://github.com/furystack/furystack/blob/e6edd24c9a196f56ba5b3b2dd65f062c8d68cdd5/packages/shades/src/shade.ts#L41) has been opened up - you can optimize the performance of your components to avoid unneccessary re-renders. |
| 29 | + |
| 30 | +## DataGrid upgrades |
| 31 | + |
| 32 | +One of the most powerful component in Shades is the `<DataGrid />`. It can be easily extended with custom view components, ordering, filtering, etc... but I've implemented more goodies recently. |
| 33 | + |
| 34 | +### Focused item 👓 |
| 35 | + |
| 36 | +Now you can focus on an item (at row level) by just simply clicking on it. The Grid and the `CollectionService` will update an observable (you can also use the same service at cell level). Only one item *can have* focus at the same time. |
| 37 | + |
| 38 | +### Selection ☑️ |
| 39 | + |
| 40 | +The DataGrid (and the underlying `CollectionService`) now have an info about what *row* or *rows* are currently selected. Row selection can be used e.g. to trigger a bulk operation on items (e.g. bulk delete some entries) |
| 41 | + |
| 42 | +### Keyboard shortcuts and mouse getsures ⌨️ |
| 43 | + |
| 44 | +Usability has been also improved with the followings: |
| 45 | + - **Up/down** keys moves the focus up/down |
| 46 | + - The focused item will be scrolled into the view, if neccessary |
| 47 | + - **Space** toggles the *selection* of the current item |
| 48 | + - **Insert** toggles the selection of the current item and moves the focus down |
| 49 | + - **\+ / -** keys selects / deselects all items |
| 50 | + - **\*** key inverts the selection |
| 51 | + - **CTRL + Mouse click** toggles the selection of the clicked element and also updates the focus |
| 52 | + - **SHIFT + Mouse click** *selects* all element between the old focused one and the *clicked* one, also updates the focus |
| 53 | + |
| 54 | +### Some thoughts on the performance ⚡ |
| 55 | + |
| 56 | +Performance is a *key concept* when working with grids. The underlying CollectionService and its observables serve the reson to avoid re-rendering the whole grid when something (e.g. a selection) changes. |
| 57 | + |
| 58 | +## And finally, The Showcase App 🏪 |
| 59 | + |
| 60 | +I've started to work on a "Showcase App" with Shades in the FuryStack monorepo. I wanted to try out some controls and mechanisms inside the monorepo and also speed up component development - so I've created a new package called `@furystack/shades-showcase-app`. |
| 61 | + |
| 62 | +It's also deployed via Netlify so you can check it out right now ;) |
| 63 | + |
| 64 | +Pls visit [https://shades-showcase.netlify.app/](https://shades-showcase.netlify.app/) |
| 65 | + |
| 66 | +It contains the followings: |
| 67 | + - Demo for a Grid with an in-memory random collection with the new features ✨ |
| 68 | + - Demo for a Shades wrapper of my favorite joystick component called [NippleJS](https://yoannmoi.net/nipplejs/) 🕹️ |
| 69 | + - Demo for my favourite Semi-IDE in Shades called Monaco Editor 📝 |
| 70 | + - Demo page for Inputs (I want to extend this in a near future) |
| 71 | + - Demo page for Buttons |
| 72 | + - A simple lorem ipsum welcome page 😁 |
| 73 | + - And last but not least, a light / dark theme switch 😉 |
| 74 | + |
| 75 | +Regarding the Showcase App, I've also experimented with some interesting new tools (esbuild, playwright), I want to write about in the near future. Cheeers :) |
0 commit comments