@arkitektum/altinn-studio-custom-components 9.3.0 → 9.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +130 -63
- package/package.json +3 -1
package/README.md
CHANGED
|
@@ -1,96 +1,163 @@
|
|
|
1
1
|
# altinn-studio-custom-components
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
This repository provides a collection of reusable custom components designed for Altinn Studio, enabling standardized presentation of various data types in digital public services.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## 📦 Installation
|
|
8
|
+
|
|
9
|
+
To integrate these components into your Altinn Studio application, follow these steps:
|
|
10
|
+
|
|
11
|
+
1. Init NPM:
|
|
4
12
|
|
|
5
|
-
|
|
13
|
+
```bash
|
|
14
|
+
npm init -y
|
|
15
|
+
```
|
|
6
16
|
|
|
7
|
-
|
|
17
|
+
2. Install the package via npm:
|
|
8
18
|
|
|
9
|
-
|
|
19
|
+
```bash
|
|
20
|
+
npm install @arkitektum/altinn-studio-custom-components --save
|
|
21
|
+
```
|
|
10
22
|
|
|
11
|
-
|
|
23
|
+
3. Add the following configuration to your `/App/App.csproj` file to ensure proper installation and asset copying during build:
|
|
12
24
|
|
|
13
|
-
|
|
25
|
+
```xml
|
|
26
|
+
<Target Name="NpmInstall" Inputs="package.json" Outputs="node_modules/.install-stamp">
|
|
27
|
+
<Exec Command="npm ci" Condition="'$(RestorePackagesWithLockFile)' == 'true'" />
|
|
28
|
+
<Exec Command="npm install" Condition="'$(RestorePackagesWithLockFile)' != 'true'" />
|
|
29
|
+
<Touch Files="node_modules/.install-stamp" AlwaysCreate="true" />
|
|
30
|
+
</Target>
|
|
14
31
|
|
|
15
|
-
|
|
32
|
+
<ItemGroup>
|
|
33
|
+
<MyAssets Include="node_modules/@arkitektum/altinn-studio-custom-components/**/*.*" />
|
|
34
|
+
</ItemGroup>
|
|
16
35
|
|
|
17
|
-
|
|
36
|
+
<Target Name="CopyAssetsToWwwroot" DependsOnTargets="NpmInstall" AfterTargets="Build">
|
|
37
|
+
<Message Text="Copying assets to wwwroot..." Importance="High" />
|
|
38
|
+
<MakeDir Directories="wwwroot/altinn-studio-custom-components" />
|
|
39
|
+
<Copy
|
|
40
|
+
SourceFiles="@(MyAssets)"
|
|
41
|
+
DestinationFolder="wwwroot/altinn-studio-custom-components"
|
|
42
|
+
SkipUnchangedFiles="true" />
|
|
43
|
+
</Target>
|
|
44
|
+
```
|
|
18
45
|
|
|
19
|
-
|
|
46
|
+
4. Add the following configuration to your `/views/Home/index.cshtml` file:
|
|
20
47
|
|
|
21
|
-
|
|
48
|
+
Make sure you replace `[APP NAME]` with the actual app name
|
|
22
49
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
50
|
+
```html
|
|
51
|
+
<html>
|
|
52
|
+
<head>
|
|
53
|
+
<link rel="stylesheet" type="text/css" href="/dibk/[APP NAME]/altinn-studio-custom-components/main.css">
|
|
54
|
+
</head>
|
|
55
|
+
<body>
|
|
56
|
+
<script type="module" src="/dibk/[APP NAME]/altinn-studio-custom-components/main.js"></script>
|
|
57
|
+
</body>
|
|
58
|
+
</html>
|
|
59
|
+
```
|
|
32
60
|
|
|
33
|
-
|
|
61
|
+
5. Add npm to `Dockerfile`
|
|
34
62
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
- [Feedback](src/components/data-components/custom-feedbacklist-data/) - viser liste med tilbakemeldinger i skjema
|
|
38
|
-
- [ValidationMessages](src/components/data-components/custom-feedbacklist-validation-messages/) - viser lister med valideringsmeldinger i skjema
|
|
63
|
+
```dockerfile
|
|
64
|
+
WORKDIR /App
|
|
39
65
|
|
|
40
|
-
|
|
66
|
+
RUN apk add --no-cache npm
|
|
67
|
+
```
|
|
41
68
|
|
|
42
|
-
|
|
69
|
+
This will handle the installation of the necessary npm packages and copy the assets to the `wwwroot/altinn-studio-custom-components` directory during the build process.
|
|
43
70
|
|
|
44
|
-
|
|
71
|
+
---
|
|
45
72
|
|
|
46
|
-
|
|
73
|
+
## 🧩 Available Components
|
|
47
74
|
|
|
48
|
-
|
|
75
|
+
These components are tailored to display specific data types consistently across Altinn Studio applications:
|
|
49
76
|
|
|
50
|
-
|
|
77
|
+
- **Typography**
|
|
78
|
+
- [Header](src/components/data-components/custom-header-text/) – Displays a title with text from a resource.
|
|
79
|
+
- [Subheader](src/components/data-components/custom-subheader-text) – Displays a title with text from a resource.
|
|
80
|
+
- [Paragraph](src/components/data-components/custom-paragraph-text/) – Displays a paragraph with text from a resource.
|
|
81
|
+
- **Fields**
|
|
82
|
+
- [Data](src/components/data-components/custom-field-data/) – Displays a data field with a label.
|
|
83
|
+
- [Boolean Data](src/components/data-components/custom-field-boolean-data/) – Displays different data model values based on a boolean value.
|
|
84
|
+
- [Boolean Text](src/components/data-components/custom-field-boolean-text/) – Displays different text resources based on a boolean value.
|
|
85
|
+
- [Feedback](src/components/data-components/custom-feedback-data/) – Displays a single feedback message.
|
|
86
|
+
- [Adresse](src/components/data-components/custom-field-adresse/) – Displays a complete address object
|
|
87
|
+
- [Part-navn](src/components/data-components/custom-field-part-navn/) – Displays a part's name, optionally with an organization number.
|
|
88
|
+
- [Kommunens saksnummer](src/components/data-components/custom-field-kommunens-saksnummer/) – Displays a municipal case number composed of the case year and sequence number.
|
|
89
|
+
- [Prosjekt](src/components/data-components/custom-field-prosjekt/) – Displays a project number composed of a number and name.
|
|
90
|
+
- [Telefonnummer](src/components/data-components/custom-field-telefonnummer/) – Displays all phone numbers associated with a part object.
|
|
91
|
+
- [Utfallbesvarelse](src/components/data-components/custom-field-utfall-svar-status/) – Displays the status based on the 'Utfallbesvarelse' object.
|
|
92
|
+
- **Lists**
|
|
93
|
+
- [Data](src/components/data-components/custom-list-data/) – Displays a list of values from an array.
|
|
94
|
+
- [Vedlegg](src/components/data-components/custom-list-vedlegg/) – Displays a list of attachments.
|
|
95
|
+
- [Feedback](src/components/data-components/custom-feedbacklist-data/) – Displays a list of feedback messages for a feedback type.
|
|
96
|
+
- [ValidationMessages](src/components/data-components/custom-feedbacklist-validation-messages/) – Displays lists of feedback messages for all feedback types.
|
|
97
|
+
- **Group lists**
|
|
98
|
+
- [Utfall svar](src/components/data-components/custom-grouplist-utfall-svar-type/) – Displays a list of [`Utfallsvar`](src/classes/data-classes/UtfallSvar.js) component groups.
|
|
99
|
+
- **Tables**
|
|
100
|
+
- [Data](src/components/data-components/custom-table-data/) – Displays data table with customizable columns and rows.
|
|
101
|
+
- [Eiendom](src/components/data-components/custom-table-eiendom/) – Displays table with data from an array with [`Eiendom`](src/classes/data-classes/Eiendom.js) objects.
|
|
102
|
+
- [Tiltakshaver](src/components/data-components/custom-table-tiltakshaver/) – Displays table with data from an array with [`Part`](src/classes/data-classes/Part.js) objects for `tiltakshaver`.
|
|
51
103
|
|
|
52
|
-
|
|
104
|
+
These components adhere to the standards set by the Norwegian Building Authority (Direktoratet for Byggkvalitet) within the Fellestjenester BYGG platform.
|
|
53
105
|
|
|
54
|
-
|
|
106
|
+
---
|
|
55
107
|
|
|
56
|
-
|
|
57
|
-
C:\dev\src\dibk\ig-v3\App> libman init
|
|
58
|
-
DefaultProvider [cdnjs]: unpkg
|
|
59
|
-
```
|
|
108
|
+
## 🧪 Development & Testing
|
|
60
109
|
|
|
61
|
-
|
|
110
|
+
To set up a local development environment for testing these components:
|
|
62
111
|
|
|
63
|
-
|
|
64
|
-
C:\dev\src\dibk\ig-v3\App> libman install @arkitektum/altinn-studio-custom-components@1.5.1 -d wwwroot/ftpb-components
|
|
112
|
+
### Run development environment
|
|
65
113
|
|
|
66
|
-
|
|
67
|
-
wwwroot/ftpb-components/package.json written to disk
|
|
68
|
-
wwwroot/ftpb-components/README.md written to disk
|
|
69
|
-
Installed library "@arkitektum/altinn-studio-custom-components@1.5.1" to "wwwroot/ftpb-components"
|
|
70
|
-
```
|
|
114
|
+
1. Clone the repository:
|
|
71
115
|
|
|
72
|
-
|
|
116
|
+
```bash
|
|
117
|
+
git clone https://github.com/Arkitektum/altinn-studio-custom-components.git
|
|
118
|
+
```
|
|
73
119
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
```
|
|
120
|
+
2. Navigate into the project directory:
|
|
121
|
+
|
|
122
|
+
```bash
|
|
123
|
+
cd altinn-studio-custom-components
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
3. Install dependencies:
|
|
127
|
+
|
|
128
|
+
```bash
|
|
129
|
+
yarn install
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
4. Start the development server:
|
|
77
133
|
|
|
78
|
-
|
|
134
|
+
```bash
|
|
135
|
+
yarn start
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
This will launch a local server where you can preview and test the components in isolation.
|
|
139
|
+
|
|
140
|
+
### Run unit tests
|
|
141
|
+
|
|
142
|
+
To ensure everything is working as expected, run the tests:
|
|
79
143
|
|
|
80
144
|
```bash
|
|
81
|
-
|
|
145
|
+
yarn test
|
|
82
146
|
```
|
|
83
147
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
148
|
+
This will execute the test suite and help validate that the components behave as intended.
|
|
149
|
+
|
|
150
|
+
---
|
|
151
|
+
|
|
152
|
+
## 🔗 Resources
|
|
153
|
+
|
|
154
|
+
- [Altinn Studio Documentation](https://docs.altinn.studio/)
|
|
155
|
+
- [Altinn Studio GitHub Repository](https://github.com/Altinn/altinn-studio)
|
|
156
|
+
- [Altinn Studio Customm Component Documentation](https://docs.altinn.studio/altinn-studio/reference/ux/components/custom/)
|
|
157
|
+
- [POC: Use of third party components in apps](https://github.com/Altinn/altinn-studio/issues/8681)
|
|
158
|
+
|
|
159
|
+
---
|
|
160
|
+
|
|
161
|
+
## 📝 Changelog
|
|
162
|
+
|
|
163
|
+
The [changelog](https://github.com/Arkitektum/altinn-studio-custom-components/releases) is regularly updated to reflect what's changed in each new release.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arkitektum/altinn-studio-custom-components",
|
|
3
|
-
"version": "9.3.
|
|
3
|
+
"version": "9.3.6",
|
|
4
4
|
"description": "Custom components for Altinn Studio",
|
|
5
5
|
"main": "dist/main.js",
|
|
6
6
|
"module": "dist/main.js",
|
|
@@ -26,6 +26,8 @@
|
|
|
26
26
|
"@babel/preset-env": "^7.26.9",
|
|
27
27
|
"css-loader": "^7.1.2",
|
|
28
28
|
"css-minimizer-webpack-plugin": "^7.0.0",
|
|
29
|
+
"date-fns": "^4.1.0",
|
|
30
|
+
"date-fns-tz": "^3.2.0",
|
|
29
31
|
"jest": "^29.7.0",
|
|
30
32
|
"jest-environment-jsdom": "^29.7.0",
|
|
31
33
|
"jsdom": "^26.0.0",
|