chore(.storybook): forenkle og standardiser live code editorer #3031

hagenek · 2025-08-19T08:39:29Z

Nye live code editorer opprettet for 12 pakker:

ffe-accordion-react: Enkelt, multiple og interaktive eksempler
ffe-account-selector-react: Komprehensiv editor for alle selector-komponenter
ffe-buttons-react: Alle button-typer med interaktive eksempler
ffe-cards-react: Card-varianter og layouts
ffe-chips-react: Enkelt template med grunnleggende chip-eksempler
ffe-form-react: Komprehensiv form-komponenter med validering
ffe-grid-react: Layout og responsive eksempler
ffe-icons-react: Icon-bruk eksempler
ffe-lists-react: Liste-komponenter
ffe-messages-react: SystemMessage og ContextMessage templates
ffe-tabs-react: Enkelt template med tab-navigasjon
ffe-tags-react: Enkelt template med tag-visning

Infrastruktur og verktøy:

Opprettet LiveCodeEditor.tsx utility for konsistent implementasjon
Lagt til dokumentasjon i
LIVE_CODE_GUIDE.md
Audit-script (audit-live-code.js) for å spore implementering
Genererings-script (generate-livecode.js) for automatisering
Konsistent filnavn: LiveCodeEditor.stories.tsx for alle pakker

Designprinsipper:

Fokus på 'enkelt' template som standard for enkel bruk
Monaco editor integrering for syntax highlighting
Real-time preview funksjonalitet
Konsistent norsk navngiving og struktur
Progressive kompleksitet fra enkle til avanserte eksempler

Resultat:

Introduserer en standardisert live code editor løsning som dekker 12 pakker og forbedrer utvikleropplevelsen betydelig på tvers av hele FFE design systemet.

github-actions · 2025-08-19T08:44:51Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-beach-0d62d0d03-3031.westeurope.2.azurestaticapps.net

github-actions · 2025-08-19T08:50:41Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-beach-0d62d0d03-3031.westeurope.2.azurestaticapps.net

github-actions · 2025-08-19T08:55:26Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-beach-0d62d0d03-3031.westeurope.2.azurestaticapps.net

Copilot

Pull Request Overview

This PR standardizes and simplifies live code editors across the FFE design system by introducing a shared utility and implementing live code editors for 12 packages. The solution replaces manual code transformation approaches with a Monaco Editor-based system that provides real-time preview, syntax highlighting, and template management.

Creates a unified LiveCodeEditor utility with consistent implementation patterns
Implements live code editors for 12 core packages including buttons, forms, grids, and more
Introduces automation scripts for generating and auditing live code implementations

Reviewed Changes

Copilot reviewed 25 out of 25 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
scripts/generate-livecode.js	Automation script for generating standardized live code stories
.storybook/shared/LiveCodeEditor.tsx	Core shared utility component with Monaco editor integration
packages/*/src/LiveCodeEditor.stories.tsx	Live code editor implementations for 12 packages
.storybook/shared/LIVE_CODE_GUIDE.md	Documentation for implementing live code editors
package.json	Added dependencies for Monaco editor and React Live

Comments suppressed due to low confidence (1)

packages/ffe-lists-react/src/LiveCodeEditor.stories.tsx:231

BulletList component is referenced in the template code but may not be available in the live code scope, potentially causing runtime errors.

                <h3 style={{ margin: '0 0 8px 0' }}>📖 Produktspesifikasjoner</h3>

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

packages/ffe-grid-react/src/LiveCodeEditor.stories.tsx

.storybook/shared/LiveCodeEditor.tsx

packages/ffe-buttons-react/src/InlineExpandButton.stories.tsx

package.json

scripts/generate-livecode.js

.storybook/shared/LiveCodeEditor.tsx

github-actions · 2025-08-19T10:21:11Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-beach-0d62d0d03-3031.westeurope.2.azurestaticapps.net

tuva-odegard · 2025-08-20T06:59:59Z

Såå nice at du har fått det opp!
Klikket meg litt rundt, det dukket opp noen ting:

Jeg prøvde meg på accordion, det interaktive eksempelet fungerer ikke

Ikonet er ikke der på knappene

Når jeg gjør en endring står det at jeg har ulagrede endringer, men at koden lagres automatisk 🤔

Skjønner ikke hva jeg skal gjøre som bruker da..

Trenger vi "last ned" knappen? De fleste kopierer vel bare? 🤔
Det her burde vel være en ffe-dropdown med tydelig label?

Button-eksempelet bruker ikoner vi ikke støtter 🤔

Burde vel kanskje bruke kun ting fra designsystemet ❤️
Har ikke sett igjennom resten men det er kanskje en start? 🙌

github-actions · 2025-08-26T10:57:00Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-beach-0d62d0d03-3031.westeurope.2.azurestaticapps.net

- Fjern icon-egenskaper fra alle LiveCodeEditor-maler - Fjern emoji-ikoner fra template-kode i grid-react og andre pakker - Erstatt native confirm() med tilpasset bekreftelsesdialog for tilbakestill-knappen - Legg til Enter/Escape tastaturstøtte for bekreftelsesdialogene - Gjør Template.icon valgfri i shared LiveCodeEditor interface

github-actions · 2025-08-26T12:56:26Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-beach-0d62d0d03-3031.westeurope.2.azurestaticapps.net

tuva-odegard · 2025-08-29T07:47:11Z

Flott med endringer! Det er en veldig stor endring, det er kult! Noen ting til 😄 (nummererer bare så det er lettere å skille de fra hverandre)

Ser at det ikke fungerer så bra med accent mode, kanskje man ikke trenger live code i alle modes og kontekster, altså at det ikke trenger å være en story?

Ser ikke ut som at Lagre fungerer helt som tiltenkt 🤔

Står "Lagret" men fikk opp denne beskjeden ❤️ Auto-save ser ikke ut som at den gjør noe 🤔

Ser også ut som at Accordion har byttet på "grunnleggende" og "avansert" eksempelet. Det er vel egentlig ikke vits med en gunnleggende, de var veldig like 🤔

Hadde det vært mulig å bruke våre egne farger på cardene? 😄

Kan vi ha "preview" på norsk?

😄

Flere av accountselectoreksempelet er brukket :(

Og ett av de ser ikke så bra ut..

F.eks Cards: Trenger kanskje ikke dropdownen når det bare er ett eksempel? 🤔

Ser ut som det fortsatt er mange av eksemplene som bruker ikoner vi ikke støtter ❤️ Men vet ikke om du var ferdig da!

- Fjern alle emojier fra LiveCodeEditor.stories.tsx filer - Skjul template-dropdown når kun én template eksisterer - Flytt Tilbakestill-knapp til øvre høyre hjørne av kodeeditoren - Forbedre dialog-tekster og oversettelser til norsk - Standardiser import-rekkefølge og code formatting - Rette template-referanse feil i Accordion stories - Forenkle AccountSelector templates ved å fjerne komplekse eksempler Endringene gjør grensesnittet renere og mer profesjonelt ved å fjerne dekorative emojier, samtidig som UX forbedres med betinget visning av kontroller og bedre posisjonering av handlingsknapper.

hagenek · 2025-08-29T10:54:24Z

Flott med endringer! Det er en veldig stor endring, det er kult! Noen ting til 😄 (nummererer bare så det er lettere å skille de fra hverandre)

Ser at det ikke fungerer så bra med accent mode, kanskje man ikke trenger live code i alle modes og kontekster, altså at det ikke trenger å være en story?

2. Ser ikke ut som at Lagre fungerer helt som tiltenkt 🤔
Står "Lagret" men fikk opp denne beskjeden ❤️ Auto-save ser ikke ut som at den gjør noe 🤔
3. Ser også ut som at Accordion har byttet på "grunnleggende" og "avansert" eksempelet. Det er vel egentlig ikke vits med en gunnleggende, de var veldig like 🤔
4. Hadde det vært mulig å bruke våre egne farger på cardene? 😄 5. Kan vi ha "preview" på norsk?
😄
6. Flere av accountselectoreksempelet er brukket :(

Og ett av de ser ikke så bra ut..
7. F.eks Cards: Trenger kanskje ikke dropdownen når det bare er ett eksempel? 🤔
Ser ut som det fortsatt er mange av eksemplene som bruker ikoner vi ikke støtter ❤️ Men vet ikke om du var ferdig da!

Litt usikker på hvordan jeg kan gjøre at den ikke kommer opp der, vet ikke om det er så stort problem?
Lagringen handler om at det du skriver inn blir lagret, selv ved refresh av siden. Teksten om ulagrede endringer ved tilbakestill er litt uklar, jeg skal forbedre den! =)
Enig, jeg har gjort så det bare er ett eksempel nå!
Kan gjøres i ny PR.
Endret til norsk
Forenklet og fjerner emojier!
Veldig godt forslag, fjernet dropdownen nå ved bare et eksempel
Fjernet alle Emojier nå! (Håper jeg...)

github-actions · 2025-08-29T10:59:15Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-beach-0d62d0d03-3031.westeurope.2.azurestaticapps.net

tuva-odegard · 2025-09-01T07:30:56Z

Flott med endringer! 😄

Har klikket meg gjennom enda mer og funnet enda litt til, sorry!

Chips-eksempelet har feil

2. Accountselector også :/

Ang. nr 2 på forrige kommentar, auto-lagringen ved refresh av siden ser ut til å fungere fint!
Men hvis jeg gjør en endring og så prøver å bytte eksempel (med dropdown-lista) så får jeg opp denne meldingen

Hvis jeg refresher siden og så bytter, går det fint. Så auto-lagringa fungerer fortsatt ikke helt som forventet 🤔 3.1 I den samme ruta, er det noen grunn til at knappene er små? 😆 Synes godt de kan være vanlig størrelse, er jo plass til det..

Dette blir litt synsing fra min side (sammen med UX-prinispper), men kunne du flyttet auto-save ned til ved siden av Preview? 💯 Så er den litt nærmere det den hører til. Og helst den også på norsk 😄

Jeg synes fortsatt også at dropdown skal få en label! ❤️

.storybook/stories/LiveCodeEditor.stories.tsx

.storybook/shared/LiveCodeEditor.tsx

tuva-odegard · 2025-09-01T09:14:52Z

.storybook/shared/LiveCodeEditor.tsx

+    return (
+        <div style={{ fontFamily: 'system-ui, -apple-system, sans-serif' }}>
+            <h3 className="ffe-h3">
+                {title} - {theme === 'light' ? 'Light' : 'Dark'} mode


Sånn som her 😊

tuva-odegard · 2025-09-01T09:15:21Z

.storybook/shared/LiveCodeEditor.tsx

+            {/* Custom confirmation dialog */}
+            {showConfirmDialog && (
+                <div
+                    style={{


Ikke viktig, men hvorfor ikke bruke ffe-modal her? 🤔

Kan ta det i en ny PR =)

tuva-odegard · 2025-09-01T09:16:52Z

.storybook/shared/LiveCodeEditor.tsx

+                        `
+**🔥 Live ${storageKey} Code Editor**
+
+Skriv JSX-kode og se resultatet umiddelbart! Editoren støtter:


Hvor dukker det her opp? Er det bare når man skal bruke den?

Dette er hvis man ikke gir noen description når man lager en live code editor spesifikt for en komponent. Har kortet ned denne alternative beskrivelsen betraktelig nå.

tuva-odegard · 2025-09-01T09:19:28Z

packages/ffe-accordion-react/src/LiveCodeEditor.stories.tsx

+    defaultTemplate: 'basic',
+    title: 'Accordion Live Code Editor',
+    description:
+        'Live code editor for Accordion komponenten med alle templates og funksjonalitet.',


"med alle templates og funksjonalitet." er litt intentsigende 😅
Kanskje det kan stå noe som at "Her kan du endre på et eksempel med bruk av Accordion" eller noe?

tuva-odegard · 2025-09-01T09:21:47Z

packages/ffe-account-selector-react/src/LiveCodeEditor.stories.tsx

+        docs: {
+            description: {
+                component:
+                    'Comprehensive live code editor for all account selector components in the FFE AccountSelector package. Explore AccountSelector and AccountSelectorMulti with interactive examples for single and multi-account selection scenarios.',


Dette burde være på norsk. Gjelder alle live kode editorene! Og burde kanskje ikke si at det er flere eksempler når det bare er ett nå 🤔

tuva-odegard · 2025-09-01T09:23:22Z

packages/ffe-account-selector-react/src/LiveCodeEditor.stories.tsx

+    defaultTemplate: 'simple',
+    title: 'AccountSelector Live Code Editor',
+    description:
+        'Comprehensive live code editor for all account selector components in the FFE AccountSelector package. Explore AccountSelector and AccountSelectorMulti with interactive examples for single and multi-account selection scenarios.',


Norsk? 🫶

tuva-odegard · 2025-09-01T09:28:21Z

.storybook/shared/LiveCodeEditor.tsx

+    defaultTemplate = Object.keys(templates)[0],
+    storageKey,
+    title = 'Live Code Editor',
+    description = 'Skriv JSX-kode og se resultatet umiddelbart!',


haha, det blir så tydelig at det ikke er vi som har skrevet det 🙃
Hva med "Her kan du redigere komponenten og se resultatet før du tar den i bruk." eller noe?

github-actions · 2025-09-08T10:13:41Z

Azure Static Web Apps: Your stage site is ready! Visit it here: https://black-beach-0d62d0d03-3031.westeurope.2.azurestaticapps.net

hagenek requested a review from a team as a code owner August 19, 2025 08:39

hagenek force-pushed the develop_add-live-coding branch 2 times, most recently from a3a894c to 42f0192 Compare August 19, 2025 08:50

hagenek requested review from antidecaf, Copilot, dagfrode and tuva-odegard August 19, 2025 08:50

Copilot AI reviewed Aug 19, 2025

View reviewed changes

SpareBank1 deleted a comment from Copilot AI Aug 19, 2025

chore(.storybook): forenkle og standardiser live code editorer

25a0d94

hagenek force-pushed the develop_add-live-coding branch from 5456364 to 25a0d94 Compare August 19, 2025 10:15

hagenek force-pushed the develop_add-live-coding branch from 35ce576 to f89ce37 Compare August 26, 2025 12:51

tuva-odegard reviewed Sep 1, 2025

View reviewed changes

.storybook/stories/LiveCodeEditor.stories.tsx Outdated Show resolved Hide resolved

tuva-odegard reviewed Sep 1, 2025

View reviewed changes

.storybook/shared/LiveCodeEditor.tsx Outdated Show resolved Hide resolved

tuva-odegard reviewed Sep 1, 2025

View reviewed changes

.storybook/shared/LiveCodeEditor.tsx Outdated Show resolved Hide resolved

tuva-odegard reviewed Sep 1, 2025

View reviewed changes

feat(.storybook): forbedret featuren etter kommentarer i PR

8eb8fb2

hagenek requested a review from tuva-odegard September 8, 2025 10:17

chore(.storybook): forenkle og standardiser live code editorer #3031

Are you sure you want to change the base?

chore(.storybook): forenkle og standardiser live code editorer #3031

Uh oh!

Conversation

hagenek commented Aug 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Aug 19, 2025

Uh oh!

github-actions bot commented Aug 19, 2025

Uh oh!

github-actions bot commented Aug 19, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Aug 19, 2025

Uh oh!

tuva-odegard commented Aug 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Aug 26, 2025

Uh oh!

github-actions bot commented Aug 26, 2025

Uh oh!

tuva-odegard commented Aug 29, 2025

Uh oh!

hagenek commented Aug 29, 2025

Uh oh!

github-actions bot commented Aug 29, 2025

Uh oh!

tuva-odegard commented Sep 1, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Sep 8, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

hagenek commented Aug 19, 2025 •

edited

Loading

tuva-odegard commented Aug 20, 2025 •

edited

Loading