Add documentation on adding a component to Studio

content/altinn-studio/guides/contributing/_index.en.md

@@ -0,0 +1,11 @@
+---
+title: Contributing to Altinn Studio
+description: Contribute to the development of Altinn Studio
+weight: 1000
+---
+
+## Contributing to Altinn Studio
+
+// TODO: Write about what contributing means and how to do it --> redirect to github contributing readme
+
+{{<children description="true" />}}

content/altinn-studio/guides/contributing/_index.nb.md

@@ -0,0 +1,12 @@
+---
+title: Bidra inn i Altinn Studio
+description: Bidra i utviklingen av Altinn Studio
+weight: 1000
+---
+
+## Bidra inn i Altinn Studio
+
+// TODO: Write about what contributing means and how to do it --> redirect to github contributing readme
+
+{{<children description="true" />}}
+

content/altinn-studio/guides/contributing/add-new-component/_index.en.md

@@ -0,0 +1,46 @@
+---
+title: Add a new component in Studio
+description: Add a new component from Apps to make it configurable in Studio
+weight: 20
+---
+
+## Add a new component in Studio
+
+If new components are introduced to the Apps, either by the Apps team or by external contributors, the component can be added as a configurable component in Studio. This means that the properties for the component when used in a form, can be edited directly in Studio, just as any other component. 
+
+### Step-by-step guide
+
+1. [Get json schema for the new component](#1-get-json-schema-for-the-new-component)
+2. [Add an icon for the component](#2-add-an-icon-for-the-component)
+3. [Add the new component in the list of Studio components](#3-add-the-new-component-in-the-list-of-studio-components)
+4. [Ensure potential other component updates are supported*](#4-ensure-potential-other-component-updates-are-supported)
+
+_*Only relevant if running the schema generation script in step 1._
+
+### 1. Get json schema for the new component
+In order to retrieve the json schemas that defines the component config there are different options:
+- Manually write the json schema based on the `config.ts` in the apps repo for the component.
+- Run the script in `frontend/scripts/`. The usage of the script is described in the README. In order for the script to work the component you wish to add must have been released by app-frontend.
+
+### 2. Add an icon for the component
+Either create an SVG for the component yourself or outsource this task to the designers in Altinn Studio by reaching out to them in GitHub[Link] or in Slack[Link]. When an SVG is created for the icon convert the SVG to JSX, e.g. using this [tool](https://svg2jsx.com/). Create a new file in `libs/studio-icons/src/react/icons/[YOUR_COMPONENT_NAME]Icon.tsx` and use the same format as for the other icons in the folder. The icon file must be added to the index file in the same folder.
+
+### 3. Add the new component in the list of Studio components
+For providing fully support for a new component in Studio, there are a few things to do. The order is arbitrary. 
+- Adding the new schema
+  - If you did run the script from step 1, the schema has been added for you in the correct folder.
+  - If you did _**not**_ run the script, the json schema definition file must be placed in this folder: `packages/ux-editor/src/testing/schemas/component`
+- Adding the component to the `ComponentType` enum, alphabetically, in this file: `packages/ux-editor/src/types/ComponentType.ts`
+- Adding the component to the components list in the file: `packages/ux-editor/src/data/formItemConfig.ts` by 
+  - first adding it, alphabetically, to the `formItemConfigs` object, with the appropriate default configs and an icon,
+  - then adding it to an appropriate list in the same file; **schemaComponents**, **advancedItems** or **textComponents**
+  // WHAT ABOUT **confOnScreenComponents** AND **paymentLayoutComponents** - SHOULD THEY BE MENTIONED HERE
+- Adding texts for the new component in `nb.json`:
+  - A title on the format **ux_editor.component_title.[COMPONENT_TYPE]** 
+  - If the component has any new properties that does not exist from before, these must also be added on the format **ux_editor.component_properties.[PROPERTY_NAME]**
+  - If the component has any new _**object**_ properties that does not exist from before, a description must also be added on the format **ux_editor.component_properties_description.[PROPERTY_NAME]**
+
+### 4. Ensure potential other component updates are supported
+Check if the script updated any other component schema configs and ensure stable (unchanged?) support.
+- Ensure potential new added properties exists from before, or else add necessary texts for them
+- Ensure ...?

content/altinn-studio/guides/contributing/add-new-component/_index.nb.md

@@ -0,0 +1,52 @@
+---
+title: Legg til en ny komponent i Studio
+description: Legg til en ny komponent fra Apps slik at den kan konfigureres i Studio
+weight: 20
+---
+
+## Legg til en ny komponent i Studio
+
+Hvis nye komponenter blir introdusert i Appene, enten av Apps-teamet eller av eksterne bidragsytere, kan komponenten legges til som en konfigurerbar komponent i Studio. Dette betyr at egenskapene for komponenten når den brukes i et skjema, kan redigeres direkte i Studio, akkurat som enhver annen komponent.
+
+### Steg-for-steg guide
+1. [Få json-skjema for den nye komponenten](#1-få-json-skjema-for-den-nye-komponenten)
+2. [Legg til et ikon for komponenten](#2-legg-til-et-ikon-for-komponenten)
+3. [Legg til den nye komponenten i listen over Studio-komponenter](#3-legg-til-den-nye-komponenten-i-listen-over-studio-komponenter)
+4. [Sørg for at potensielle andre komponentoppdateringer støttes*](#4-sørg-for-at-potensielle-andre-komponentoppdateringer-støttes)
+
+_*Bare relevant hvis du kjører skjema genereringsskriptet i steg 1._
+
+
+### 1. Få json-skjema for den nye komponenten
+
+For å hente json-skjemaene som definerer komponentkonfigurasjonen er det forskjellige alternativer:
+
+- Skriv json-skjemaet manuelt basert på `config.ts` i apps repo for komponenten.
+- Kjør skriptet i `frontend/scripts/`. Bruken av skriptet er beskrevet i README. For at skriptet skal fungere må komponenten du ønsker å legge til ha blitt utgitt av app-frontend.
+
+### 2. Legg til et ikon for komponenten
+
+Enten lag en SVG for komponenten selv eller deleger denne oppgaven til designerne i Altinn Studio ved å kontakte dem på GitHub[Lenke] eller på Slack[Lenke]. Når en SVG er laget for ikonet, konverter SVG-en til JSX, f.eks. ved å bruke [dette verktøyet](https://svg2jsx.com/). Lag en ny fil i `libs/studio-icons/src/react/icons/[YOUR_COMPONENT_NAME]Icon.tsx` og bruk samme format som for de andre ikonene i mappen. Ikonfilen må legges til i indeksfilen i samme mappe.
+
+### 3. Legg til den nye komponenten i listen over Studio-komponenter
+
+For å gi full støtte for en ny komponent i Studio, er det noen få ting å gjøre. Rekkefølgen er vilkårlig.
+
+- Legg til det nye skjemaet
+  - Hvis du kjørte skriptet fra steg 1, har skjemaet blitt lagt til for deg i riktig mappe.
+  - Hvis du _**ikke**_ kjørte skriptet, må json-skjema definisjonsfilen plasseres i denne mappen: `packages/ux-editor/src/testing/schemas/component`
+- Legge til komponenten i `ComponentType`-enumen, alfabetisk, i denne filen: `packages/ux-editor/src/types/ComponentType.ts`
+- Legge til komponenten i komponentlisten i filen: `packages/ux-editor/src/data/formItemConfig.ts` ved å først legge den til, alfabetisk, i `formItemConfigs`-objektet, med passende standardkonfigurasjoner og et ikon,
+deretter legge den til i en passende liste i samme fil; **schemaComponents**, **advancedItems** eller **textComponents**
+// HVA MED **confOnScreenComponents** OG **paymentLayoutComponents** - BØR DE NEVNES HER
+- Legge til tekster for den nye komponenten i `nb.json`:
+  - En tittel i formatet **ux_editor.component_title.[COMPONENT_TYPE]**
+  - Hvis komponenten har noen nye egenskaper som _ikke_ eksisterer fra før, må disse også legges til i formatet **ux_editor.component_properties.[PROPERTY_NAME]**
+  - Hvis komponenten har noen nye objekt egenskaper som ikke eksisterer fra før, må en beskrivelse også legges til i formatet **ux_editor.component_properties_description.[PROPERTY_NAME]**
+
+### 4. Sørg for at potensielle andre komponentoppdateringer støttes
+
+Sjekk om skriptet oppdaterte andre komponentskjema konfigurasjoner og sørg for stabil (uendret?) støtte.
+
+- Sørg for at potensielt nye lagt til egenskaper eksisterer fra før, ellers legg til nødvendige tekster for dem
+- Sørg for ...?

content/altinn-studio/guides/contributing/create-new-component/_index.en.md

@@ -0,0 +1,7 @@
+---
+title: Create a new component
+description: Create a new component
+weight: 10
+---
+
+## Create a new component in App-frontend

content/altinn-studio/guides/contributing/create-new-component/_index.nb.md

@@ -0,0 +1,7 @@
+---
+title: Opprett en ny komponent
+description: Opprett en ny komponent i app-frontend 
+weight: 10
+---
+
+## Opprett en ny komponent i app-frontend

content/altinn-studio/guides/local-dev/_index.en.md

@@ -3,7 +3,7 @@ title: Local Development
 linktitle: Local Development
 description: Getting started with local development
 toc: true
-weight: 999
+weight: 900
 ---
 
 During application development, you will need to work both in Altinn Studio and in a local development environment.