mirror of
https://gitlab.nic.cz/turris/reforis/foris-js.git
synced 2025-06-15 13:36:35 +02:00
Compare commits
1 Commits
59af5dd92c
...
v6.7.1
| Author | SHA1 | Date | |
|---|---|---|---|
| 02671fb645 |
@ -1,27 +1,25 @@
|
||||
At some point, you'll likely need to modify the library. When that happens, your
|
||||
best friend will be [`npm link`](https://docs.npmjs.com/cli/link).
|
||||
Sooner or later, you will face with situation when you want/need to make some
|
||||
changes in the library. Then the most important tool for you it's the
|
||||
[`npm link`](https://docs.npmjs.com/cli/link).
|
||||
|
||||
**Important Note:** Simply linking from the repo root won't work because the
|
||||
source files are in `./src`. Instead, you'll need to:
|
||||
Please, notice that it will not work if you link the library just from the root
|
||||
of the repo. It happens due to the location of sources `./src`. You need to pack
|
||||
the library first, `make pack` and then link it from the `./dist` directory.
|
||||
|
||||
1. First package the library using `make pack`
|
||||
2. Then link it from the `./dist` directory
|
||||
Yeah, it's not such a comfortable solution for development. But it can be fixed
|
||||
by writing a small script similar to making a pack but by linking every file and
|
||||
directory from `./src` to the same directory and linking then from it. Notice
|
||||
that you need to link a `package.json` and a `package-lock.json` as well.
|
||||
|
||||
While this isn't the most developer-friendly workflow, you can improve it by
|
||||
creating a script that:
|
||||
|
||||
- Symlinks all files/directories from `./src` to another location
|
||||
- Also links `package.json` and `package-lock.json`
|
||||
|
||||
## Quick Start Guide
|
||||
So step by step:
|
||||
|
||||
```bash
|
||||
# Package and link the library
|
||||
make pack
|
||||
cd dist
|
||||
npm link
|
||||
make pack;
|
||||
cd dist;
|
||||
npm link;
|
||||
|
||||
# Link to your project
|
||||
cd /path/to/your/project/js # Navigate to your project's JS directory
|
||||
cd $project_dir/js # Navigate to JS directory of the project where you want to link the library
|
||||
npm link foris
|
||||
```
|
||||
|
||||
And that's it ;)
|
||||
|
||||
@ -1,37 +1,35 @@
|
||||
Welcome to the official Foris JS documentation!
|
||||
Welcome! This is the official documentation for Foris JS.
|
||||
|
||||
## About Foris JS
|
||||
## What Foris JS is
|
||||
|
||||
Foris JS is a library containing reusable components and utilities designed
|
||||
specifically for the reForis application and its plugins.
|
||||
Foris JS library is a set of components and utils for reForis application and
|
||||
plugins.
|
||||
|
||||
**Note:** All components and utilities in this library are actively used in
|
||||
reForis and its plugins. To see practical examples of how they're implemented,
|
||||
we recommend searching through those repositories.
|
||||
Please notice that all of these components or utils are used in reForis and
|
||||
plugins. If you want to study them by example, I recommend you to full-text
|
||||
search those repositories.
|
||||
|
||||
## Getting Started
|
||||
# Installation
|
||||
|
||||
### Prerequisites
|
||||
## Prerequisites
|
||||
|
||||
Before installing, ensure you have [Node.js](https://nodejs.org/en/) installed
|
||||
on your system.
|
||||
Please make sure that [Node.js](https://nodejs.org/en/) is installed on your
|
||||
system.
|
||||
|
||||
We recommend using the current Long Term Support (LTS) version for optimal
|
||||
compatibility. Check the
|
||||
[release schedule](https://github.com/nodejs/Release#release-schedule) for
|
||||
details.
|
||||
The current Long Term Support (LTS) release is an ideal starting point, see
|
||||
[here](https://github.com/nodejs/Release#release-schedule).
|
||||
|
||||
### Installation
|
||||
## Installation
|
||||
|
||||
Install the latest version with:
|
||||
To install the latest release:
|
||||
|
||||
```bash
|
||||
```plain
|
||||
npm install foris
|
||||
```
|
||||
|
||||
Or install a specific version by running:
|
||||
To install a specific version:
|
||||
|
||||
```bash
|
||||
```plain
|
||||
npm install foris@version
|
||||
```
|
||||
|
||||
|
||||
85
package-lock.json
generated
85
package-lock.json
generated
@ -450,27 +450,25 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/helpers": {
|
||||
"version": "7.27.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.27.0.tgz",
|
||||
"integrity": "sha512-U5eyP/CTFPuNE3qk+WZMxFkp/4zUzdceQlfzf7DdGdhp+Fezd7HD+i8Y24ZuTMKX3wQBld449jijbGq6OdGNQg==",
|
||||
"version": "7.26.9",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.9.tgz",
|
||||
"integrity": "sha512-Mz/4+y8udxBKdmzt/UjPACs4G3j5SshJJEFFKxlCGPydG4JAHXxjWjAwjd09tf6oINvl1VfMJo+nB7H2YKQ0dA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/template": "^7.27.0",
|
||||
"@babel/types": "^7.27.0"
|
||||
"@babel/template": "^7.26.9",
|
||||
"@babel/types": "^7.26.9"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/parser": {
|
||||
"version": "7.27.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.0.tgz",
|
||||
"integrity": "sha512-iaepho73/2Pz7w2eMS0Q5f83+0RKI7i4xmiYeBmDzfRVbQtTOG7Ts0S4HzJVsTMGI9keU8rNfuZr8DKfSt7Yyg==",
|
||||
"version": "7.26.9",
|
||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.9.tgz",
|
||||
"integrity": "sha512-81NWa1njQblgZbQHxWHpxxCzNsa3ZwvFqpUg7P+NNUU6f3UU2jBEg4OlF/J6rl8+PQGh1q6/zWScd001YwcA5A==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/types": "^7.27.0"
|
||||
"@babel/types": "^7.26.9"
|
||||
},
|
||||
"bin": {
|
||||
"parser": "bin/babel-parser.js"
|
||||
@ -1796,11 +1794,10 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/runtime": {
|
||||
"version": "7.27.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
|
||||
"integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
|
||||
"version": "7.24.7",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.7.tgz",
|
||||
"integrity": "sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"regenerator-runtime": "^0.14.0"
|
||||
},
|
||||
@ -1809,15 +1806,14 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/template": {
|
||||
"version": "7.27.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.0.tgz",
|
||||
"integrity": "sha512-2ncevenBqXI6qRMukPlXwHKHchC7RyMuu4xv5JBXRfOGVcTy1mXCD12qrp7Jsoxll1EV3+9sE4GugBVRjT2jFA==",
|
||||
"version": "7.26.9",
|
||||
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.26.9.tgz",
|
||||
"integrity": "sha512-qyRplbeIpNZhmzOysF/wFMuP9sctmh2cFzRAZOn1YapxBsE1i9bJIY586R/WBLfLcmcBlM8ROBiQURnnNy+zfA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.26.2",
|
||||
"@babel/parser": "^7.27.0",
|
||||
"@babel/types": "^7.27.0"
|
||||
"@babel/parser": "^7.26.9",
|
||||
"@babel/types": "^7.26.9"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
@ -1842,11 +1838,10 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/types": {
|
||||
"version": "7.27.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.0.tgz",
|
||||
"integrity": "sha512-H45s8fVLYjbhFH62dIJ3WtmJ6RSPt/3DRO0ZcT2SUiYiQyz3BLVb9ADEnLl91m74aQPS3AzzeajZHYOalWe3bg==",
|
||||
"version": "7.26.9",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.9.tgz",
|
||||
"integrity": "sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/helper-string-parser": "^7.25.9",
|
||||
"@babel/helper-validator-identifier": "^7.25.9"
|
||||
@ -19007,22 +19002,22 @@
|
||||
}
|
||||
},
|
||||
"@babel/helpers": {
|
||||
"version": "7.27.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.27.0.tgz",
|
||||
"integrity": "sha512-U5eyP/CTFPuNE3qk+WZMxFkp/4zUzdceQlfzf7DdGdhp+Fezd7HD+i8Y24ZuTMKX3wQBld449jijbGq6OdGNQg==",
|
||||
"version": "7.26.9",
|
||||
"resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.9.tgz",
|
||||
"integrity": "sha512-Mz/4+y8udxBKdmzt/UjPACs4G3j5SshJJEFFKxlCGPydG4JAHXxjWjAwjd09tf6oINvl1VfMJo+nB7H2YKQ0dA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/template": "^7.27.0",
|
||||
"@babel/types": "^7.27.0"
|
||||
"@babel/template": "^7.26.9",
|
||||
"@babel/types": "^7.26.9"
|
||||
}
|
||||
},
|
||||
"@babel/parser": {
|
||||
"version": "7.27.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.0.tgz",
|
||||
"integrity": "sha512-iaepho73/2Pz7w2eMS0Q5f83+0RKI7i4xmiYeBmDzfRVbQtTOG7Ts0S4HzJVsTMGI9keU8rNfuZr8DKfSt7Yyg==",
|
||||
"version": "7.26.9",
|
||||
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.9.tgz",
|
||||
"integrity": "sha512-81NWa1njQblgZbQHxWHpxxCzNsa3ZwvFqpUg7P+NNUU6f3UU2jBEg4OlF/J6rl8+PQGh1q6/zWScd001YwcA5A==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/types": "^7.27.0"
|
||||
"@babel/types": "^7.26.9"
|
||||
}
|
||||
},
|
||||
"@babel/plugin-bugfix-firefox-class-in-computed-class-key": {
|
||||
@ -19892,23 +19887,23 @@
|
||||
}
|
||||
},
|
||||
"@babel/runtime": {
|
||||
"version": "7.27.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
|
||||
"integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
|
||||
"version": "7.24.7",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.7.tgz",
|
||||
"integrity": "sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"regenerator-runtime": "^0.14.0"
|
||||
}
|
||||
},
|
||||
"@babel/template": {
|
||||
"version": "7.27.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.0.tgz",
|
||||
"integrity": "sha512-2ncevenBqXI6qRMukPlXwHKHchC7RyMuu4xv5JBXRfOGVcTy1mXCD12qrp7Jsoxll1EV3+9sE4GugBVRjT2jFA==",
|
||||
"version": "7.26.9",
|
||||
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.26.9.tgz",
|
||||
"integrity": "sha512-qyRplbeIpNZhmzOysF/wFMuP9sctmh2cFzRAZOn1YapxBsE1i9bJIY586R/WBLfLcmcBlM8ROBiQURnnNy+zfA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/code-frame": "^7.26.2",
|
||||
"@babel/parser": "^7.27.0",
|
||||
"@babel/types": "^7.27.0"
|
||||
"@babel/parser": "^7.26.9",
|
||||
"@babel/types": "^7.26.9"
|
||||
}
|
||||
},
|
||||
"@babel/traverse": {
|
||||
@ -19927,9 +19922,9 @@
|
||||
}
|
||||
},
|
||||
"@babel/types": {
|
||||
"version": "7.27.0",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.0.tgz",
|
||||
"integrity": "sha512-H45s8fVLYjbhFH62dIJ3WtmJ6RSPt/3DRO0ZcT2SUiYiQyz3BLVb9ADEnLl91m74aQPS3AzzeajZHYOalWe3bg==",
|
||||
"version": "7.26.9",
|
||||
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.9.tgz",
|
||||
"integrity": "sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/helper-string-parser": "^7.25.9",
|
||||
|
||||
@ -4,7 +4,7 @@ using in foris forms.
|
||||
All additional `props` are passed to the `<input type="checkbox">` HTML
|
||||
component.
|
||||
|
||||
```jsx
|
||||
```js
|
||||
import { useState } from "react";
|
||||
const [value, setValue] = useState(false);
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@ be used with `readOnly` and `disabled` parameters, please see an example.
|
||||
|
||||
All additional `props` are passed to the `<input type="text">` HTML component.
|
||||
|
||||
```jsx
|
||||
```js
|
||||
import React, { useState } from "react";
|
||||
const [value, setValue] = useState("Text to appear in clipboard.");
|
||||
|
||||
|
||||
@ -4,7 +4,7 @@ Adopted from `react-datetime/DateTime` datatime picker component. It uses
|
||||
It requires `ForisTranslations.locale` to be defined in order to use right
|
||||
locale.
|
||||
|
||||
```jsx
|
||||
```js
|
||||
ForisTranslations = { locale: "en" };
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
@ -5,6 +5,6 @@ Firefox. See
|
||||
[related issue](https://bugzilla.mozilla.org/show_bug.cgi?id=858538) for more
|
||||
details.
|
||||
|
||||
```jsx
|
||||
```js
|
||||
<DownloadButton href="example.zip">Download</DownloadButton>
|
||||
```
|
||||
|
||||
@ -4,12 +4,10 @@ checking. It's only meaningful using inside `<form>`.
|
||||
|
||||
All additional `props` are passed to the `<input type="email">` HTML component.
|
||||
|
||||
```jsx
|
||||
```js
|
||||
import { useState } from "react";
|
||||
import Button from "./Button";
|
||||
|
||||
const [email, setEmail] = useState("Wrong email");
|
||||
|
||||
<form onSubmit={(e) => e.preventDefault()}>
|
||||
<EmailInput
|
||||
value={email}
|
||||
|
||||
@ -3,7 +3,7 @@ structure for using in foris forms.
|
||||
|
||||
All additional `props` are passed to the `<input type="file">` HTML component.
|
||||
|
||||
```jsx
|
||||
```js
|
||||
import { useState } from "react";
|
||||
|
||||
const [files, setFiles] = useState([]);
|
||||
@ -23,7 +23,7 @@ const label = files.length === 1 ? files[0].name : "Choose file";
|
||||
|
||||
### FileInput with multiple files
|
||||
|
||||
```jsx
|
||||
```js
|
||||
import { useState } from "react";
|
||||
|
||||
const [files, setFiles] = useState([]);
|
||||
|
||||
@ -6,9 +6,9 @@ the page since modals are rendered in portals.
|
||||
Modals also have three optional sizes, which can be defined through the `size`
|
||||
prop:
|
||||
|
||||
- small - `sm`
|
||||
- large - `lg`
|
||||
- extra-large - `xl`
|
||||
- small - `sm`
|
||||
- large - `lg`
|
||||
- extra-large - `xl`
|
||||
|
||||
For more details please visit Bootstrap
|
||||
<a href="https://getbootstrap.com/docs/4.5/components/modal/#optional-sizes" target="_blank">
|
||||
@ -18,7 +18,7 @@ documentation</a>.
|
||||
<div id="modal-container" />
|
||||
```
|
||||
|
||||
```jsx
|
||||
```js
|
||||
import { ModalHeader, ModalBody, ModalFooter } from "./Modal";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
@ -3,9 +3,8 @@ structure for using in foris forms.
|
||||
|
||||
All additional `props` are passed to the `<input type="number">` HTML component.
|
||||
|
||||
```jsx
|
||||
```js
|
||||
import { useState } from "react";
|
||||
|
||||
const [value, setValue] = useState(42);
|
||||
|
||||
<NumberInput
|
||||
|
||||
@ -4,7 +4,7 @@ for using in foris forms. Can be used with "eye" button, see example.
|
||||
All additional `props` are passed to the `<input type="password">` HTML
|
||||
component.
|
||||
|
||||
```jsx
|
||||
```js
|
||||
import { useState } from "react";
|
||||
const [value, setValue] = useState("secret");
|
||||
|
||||
|
||||
@ -5,9 +5,8 @@ All additional `props` are passed to the `<input type="number">` HTML component.
|
||||
|
||||
Unless `helpText` is set for one of the options they are displayed inline.
|
||||
|
||||
```jsx
|
||||
```js
|
||||
import { useState } from "react";
|
||||
|
||||
const CHOICES = [
|
||||
{ value: "one", label: "1" },
|
||||
{ value: "two", label: "2" },
|
||||
|
||||
@ -3,9 +3,8 @@ and structure for using in foris forms.
|
||||
|
||||
All additional `props` are passed to the `<select>` HTML component.
|
||||
|
||||
```jsx
|
||||
```js
|
||||
import { useState } from "react";
|
||||
|
||||
const CHOICES = {
|
||||
apple: "Apple",
|
||||
banana: "Banana",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
Spiner Bootstrap component.
|
||||
|
||||
```jsx
|
||||
```js
|
||||
<Spinner>You can put text inside or any component you wish.</Spinner>
|
||||
```
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
Switch example:
|
||||
|
||||
```jsx
|
||||
```js
|
||||
<Switch label="Enable Switch" helpText="Toggle that switch!" />
|
||||
```
|
||||
|
||||
@ -3,9 +3,8 @@ using in foris forms.
|
||||
|
||||
All additional `props` are passed to the `<input type="text">` HTML component.
|
||||
|
||||
```jsx
|
||||
```js
|
||||
import { useState } from "react";
|
||||
|
||||
const [value, setValue] = useState("Bla bla");
|
||||
|
||||
<TextInput
|
||||
|
||||
@ -2,7 +2,7 @@ ThreeDotsMenu Bootstrap component is a dropdown menu that appears when the user
|
||||
clicks on three dots. It is used to display a list of actions that can be
|
||||
performed on a particular item.
|
||||
|
||||
```jsx
|
||||
```js
|
||||
import { useState } from "react";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faEdit, faTrash } from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
@ -4,14 +4,132 @@ Rich Table is a table component based on
|
||||
[Tanstack React Table](https://tanstack.com/table/). It adds some features to
|
||||
the table component, such as:
|
||||
|
||||
- **Pagination**: The table can be paginated.
|
||||
- **Sorting**: The table can be sorted by columns.
|
||||
- **Row Expansion**: The table rows can be expanded. (To be implemented)
|
||||
- **Pagination**: The table can be paginated.
|
||||
- **Sorting**: The table can be sorted by columns.
|
||||
- **Row Expansion**: The table rows can be expanded. (To be implemented)
|
||||
|
||||
### Example
|
||||
|
||||
```jsx
|
||||
import { columns, data } from "./mockData";
|
||||
```js
|
||||
import RichTable from "./RichTable";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
header: "Name",
|
||||
accessorKey: "name",
|
||||
},
|
||||
{
|
||||
header: "Surname",
|
||||
accessorKey: "surname",
|
||||
},
|
||||
{
|
||||
header: "Age",
|
||||
accessorKey: "age",
|
||||
},
|
||||
{
|
||||
header: "Phone",
|
||||
accessorKey: "phone",
|
||||
},
|
||||
];
|
||||
|
||||
const data = [
|
||||
{
|
||||
name: "John",
|
||||
surname: "Coltrane",
|
||||
age: 30,
|
||||
phone: "123456789",
|
||||
},
|
||||
{
|
||||
name: "Jane",
|
||||
surname: "Doe",
|
||||
age: 25,
|
||||
phone: "987654321",
|
||||
},
|
||||
{
|
||||
name: "Alice",
|
||||
surname: "Smith",
|
||||
age: 35,
|
||||
phone: "123456789",
|
||||
},
|
||||
{
|
||||
name: "Bob",
|
||||
surname: "Smith",
|
||||
age: 40,
|
||||
phone: "987654321",
|
||||
},
|
||||
{
|
||||
name: "Charlie",
|
||||
surname: "Brown",
|
||||
age: 45,
|
||||
phone: "123456789",
|
||||
},
|
||||
{
|
||||
name: "Daisy",
|
||||
surname: "Brown",
|
||||
age: 50,
|
||||
phone: "987654321",
|
||||
},
|
||||
{
|
||||
name: "Eve",
|
||||
surname: "Johnson",
|
||||
age: 55,
|
||||
phone: "123456789",
|
||||
},
|
||||
{
|
||||
name: "Frank",
|
||||
surname: "Johnson",
|
||||
age: 60,
|
||||
phone: "987654321",
|
||||
},
|
||||
{
|
||||
name: "Grace",
|
||||
surname: "Williams",
|
||||
age: 65,
|
||||
phone: "123456789",
|
||||
},
|
||||
{
|
||||
name: "Henry",
|
||||
surname: "Williams",
|
||||
age: 70,
|
||||
phone: "987654321",
|
||||
},
|
||||
{
|
||||
name: "Ivy",
|
||||
surname: "Brown",
|
||||
age: 75,
|
||||
phone: "123456789",
|
||||
},
|
||||
{
|
||||
name: "Jack",
|
||||
surname: "Brown",
|
||||
age: 80,
|
||||
phone: "987654321",
|
||||
},
|
||||
{
|
||||
name: "Kelly",
|
||||
surname: "Johnson",
|
||||
age: 85,
|
||||
phone: "123456789",
|
||||
},
|
||||
{
|
||||
name: "Liam",
|
||||
surname: "Johnson",
|
||||
age: 90,
|
||||
phone: "987654321",
|
||||
},
|
||||
{
|
||||
name: "Mia",
|
||||
surname: "Williams",
|
||||
age: 95,
|
||||
phone: "123456789",
|
||||
},
|
||||
{
|
||||
name: "Nathan",
|
||||
surname: "Williams",
|
||||
age: 100,
|
||||
phone: "987654321",
|
||||
},
|
||||
];
|
||||
|
||||
<RichTable columns={columns} data={data} withPagination />;
|
||||
```
|
||||
|
||||
@ -1,119 +0,0 @@
|
||||
const columns = [
|
||||
{
|
||||
header: "Name",
|
||||
accessorKey: "name",
|
||||
},
|
||||
{
|
||||
header: "Surname",
|
||||
accessorKey: "surname",
|
||||
},
|
||||
{
|
||||
header: "Age",
|
||||
accessorKey: "age",
|
||||
},
|
||||
{
|
||||
header: "Phone",
|
||||
accessorKey: "phone",
|
||||
},
|
||||
];
|
||||
|
||||
const data = [
|
||||
{
|
||||
name: "John",
|
||||
surname: "Coltrane",
|
||||
age: 30,
|
||||
phone: "123456789",
|
||||
},
|
||||
{
|
||||
name: "Jane",
|
||||
surname: "Doe",
|
||||
age: 25,
|
||||
phone: "987654321",
|
||||
},
|
||||
{
|
||||
name: "Alice",
|
||||
surname: "Smith",
|
||||
age: 35,
|
||||
phone: "123456789",
|
||||
},
|
||||
{
|
||||
name: "Bob",
|
||||
surname: "Smith",
|
||||
age: 40,
|
||||
phone: "987654321",
|
||||
},
|
||||
{
|
||||
name: "Charlie",
|
||||
surname: "Brown",
|
||||
age: 45,
|
||||
phone: "123456789",
|
||||
},
|
||||
{
|
||||
name: "Daisy",
|
||||
surname: "Brown",
|
||||
age: 50,
|
||||
phone: "987654321",
|
||||
},
|
||||
{
|
||||
name: "Eve",
|
||||
surname: "Johnson",
|
||||
age: 55,
|
||||
phone: "123456789",
|
||||
},
|
||||
{
|
||||
name: "Frank",
|
||||
surname: "Johnson",
|
||||
age: 60,
|
||||
phone: "987654321",
|
||||
},
|
||||
{
|
||||
name: "Grace",
|
||||
surname: "Williams",
|
||||
age: 65,
|
||||
phone: "123456789",
|
||||
},
|
||||
{
|
||||
name: "Henry",
|
||||
surname: "Williams",
|
||||
age: 70,
|
||||
phone: "987654321",
|
||||
},
|
||||
{
|
||||
name: "Ivy",
|
||||
surname: "Brown",
|
||||
age: 75,
|
||||
phone: "123456789",
|
||||
},
|
||||
{
|
||||
name: "Jack",
|
||||
surname: "Brown",
|
||||
age: 80,
|
||||
phone: "987654321",
|
||||
},
|
||||
{
|
||||
name: "Kelly",
|
||||
surname: "Johnson",
|
||||
age: 85,
|
||||
phone: "123456789",
|
||||
},
|
||||
{
|
||||
name: "Liam",
|
||||
surname: "Johnson",
|
||||
age: 90,
|
||||
phone: "987654321",
|
||||
},
|
||||
{
|
||||
name: "Mia",
|
||||
surname: "Williams",
|
||||
age: 95,
|
||||
phone: "123456789",
|
||||
},
|
||||
{
|
||||
name: "Nathan",
|
||||
surname: "Williams",
|
||||
age: 100,
|
||||
phone: "987654321",
|
||||
},
|
||||
];
|
||||
|
||||
export { columns, data };
|
||||
@ -1,5 +1,5 @@
|
||||
/*
|
||||
* Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
|
||||
* Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
|
||||
*
|
||||
* This is free software, licensed under the GNU General Public License v3.
|
||||
* See /LICENSE for more information.
|
||||
@ -9,7 +9,7 @@ import React, { useState } from "react";
|
||||
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import PropTypes from "prop-types";
|
||||
import { QRCodeSVG } from "qrcode.react";
|
||||
import QRCode from "qrcode.react";
|
||||
|
||||
import { createAndDownloadPdf, toQRCodeContent } from "./qrCodeHelpers";
|
||||
import Button from "../../bootstrap/Button";
|
||||
@ -33,7 +33,10 @@ export default function WiFiQRCode({ SSID, password }) {
|
||||
<button
|
||||
type="button"
|
||||
className="input-group-text"
|
||||
onClick={() => setModal(true)}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setModal(true);
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon="fa-solid fa-qrcode"
|
||||
@ -42,14 +45,14 @@ export default function WiFiQRCode({ SSID, password }) {
|
||||
className="text-secondary"
|
||||
/>
|
||||
</button>
|
||||
{modal && (
|
||||
{modal ? (
|
||||
<QRCodeModal
|
||||
setShown={setModal}
|
||||
shown={modal}
|
||||
SSID={SSID}
|
||||
password={password}
|
||||
/>
|
||||
)}
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -66,30 +69,31 @@ function QRCodeModal({ shown, setShown, SSID, password }) {
|
||||
<Modal setShown={setShown} shown={shown}>
|
||||
<ModalHeader setShown={setShown} title={_("Wi-Fi QR Code")} />
|
||||
<ModalBody>
|
||||
<QRCodeSVG
|
||||
<QRCode
|
||||
className="d-block mx-auto img-logo-black"
|
||||
renderAs="svg"
|
||||
value={toQRCodeContent(SSID, password)}
|
||||
level="M"
|
||||
size={350}
|
||||
marginSize={0}
|
||||
imageSettings={{
|
||||
src: "/reforis/static/reforis/imgs/turris.svg",
|
||||
height: 40,
|
||||
width: 40,
|
||||
excavate: true,
|
||||
}}
|
||||
includeMargin
|
||||
/>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button
|
||||
className="btn-secondary"
|
||||
onClick={() => setShown(false)}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setShown(false);
|
||||
}}
|
||||
>
|
||||
{_("Close")}
|
||||
</Button>
|
||||
<Button
|
||||
className="btn-primary"
|
||||
onClick={() => createAndDownloadPdf(SSID, password)}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
createAndDownloadPdf(SSID, password);
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon="fa-solid fa-file-download"
|
||||
|
||||
@ -13,7 +13,7 @@ exports[`<SubmitButton/> Render load 1`] = `
|
||||
role="status"
|
||||
/>
|
||||
<span>
|
||||
Loading
|
||||
Load settings
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -6,30 +6,26 @@ comfort API and allows to create typical Foris module forms easily.
|
||||
|
||||
You can pass more forms as children.
|
||||
|
||||
```jsx static
|
||||
export default function WAN({ ws }) {
|
||||
return (
|
||||
<ForisForm
|
||||
ws={ws}
|
||||
forisConfig={{
|
||||
endpoint: API_URLs.wan,
|
||||
wsModule: "wan",
|
||||
}}
|
||||
prepData={prepData}
|
||||
prepDataToSubmit={prepDataToSubmit}
|
||||
validator={validator}
|
||||
>
|
||||
<WANForm />
|
||||
<WAN6Form />
|
||||
<MACForm />
|
||||
</ForisForm>
|
||||
);
|
||||
}
|
||||
```js
|
||||
<ForisForm
|
||||
ws={ws}
|
||||
forisConfig={{
|
||||
endpoint: API_URLs.wan,
|
||||
wsModule: "wan",
|
||||
}}
|
||||
prepData={prepData}
|
||||
prepDataToSubmit={prepDataToSubmit}
|
||||
validator={validator}
|
||||
>
|
||||
<WANForm />
|
||||
<WAN6Form />
|
||||
<MACForm />
|
||||
</ForisForm>
|
||||
```
|
||||
|
||||
### Example of children forms `props` usage
|
||||
|
||||
```jsx static
|
||||
```js
|
||||
export default function MACForm({
|
||||
formData,
|
||||
formErrors,
|
||||
@ -68,9 +64,9 @@ export default function MACForm({
|
||||
}
|
||||
```
|
||||
|
||||
The `<ForisForm/>` passes subsequent `props` to the child components.
|
||||
The <ForisForm/> passes subsequent `props` to the child components.
|
||||
|
||||
| Prop name | Type | Description |
|
||||
| Prop | Type | Description |
|
||||
| -------------- | ------ | -------------------------------------------------------------------------- |
|
||||
| `formData` | object | Data returned from API. |
|
||||
| `formErrors` | object | Errors returned after validation via validator. |
|
||||
|
||||
@ -18,11 +18,8 @@ export const STATES = {
|
||||
};
|
||||
|
||||
SubmitButton.propTypes = {
|
||||
/** Disable button */
|
||||
disabled: PropTypes.bool,
|
||||
/** Button state */
|
||||
state: PropTypes.oneOf(Object.keys(STATES).map((key) => STATES[key])),
|
||||
/** Button label */
|
||||
label: PropTypes.string,
|
||||
};
|
||||
|
||||
@ -37,7 +34,7 @@ export function SubmitButton({ disabled, state, label, ...props }) {
|
||||
labelSubmitButton = _("Updating");
|
||||
break;
|
||||
case STATES.LOAD:
|
||||
labelSubmitButton = _("Loading");
|
||||
labelSubmitButton = _("Load settings");
|
||||
break;
|
||||
default:
|
||||
labelSubmitButton = _("Save");
|
||||
|
||||
@ -1,12 +0,0 @@
|
||||
SubmitButton is a component that renders a button with different states based on
|
||||
the `state` prop. It can be used to indicate the status of a form submission.
|
||||
|
||||
```jsx padded
|
||||
<SubmitButton state={1} />
|
||||
|
||||
<SubmitButton state={2} />
|
||||
|
||||
<SubmitButton state={3} />
|
||||
|
||||
<SubmitButton label="Submitting" state={2} />
|
||||
```
|
||||
@ -1,11 +1,10 @@
|
||||
/*
|
||||
* Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
|
||||
* Copyright (C) 2019-2022 CZ.NIC z.s.p.o. (https://www.nic.cz/)
|
||||
*
|
||||
* This is free software, licensed under the GNU General Public License v3.
|
||||
* See /LICENSE for more information.
|
||||
*/
|
||||
const path = require("path");
|
||||
|
||||
const pjson = require("./package.json");
|
||||
|
||||
module.exports = {
|
||||
@ -16,50 +15,6 @@ module.exports = {
|
||||
link: "#0075a3",
|
||||
linkHover: "#00a2e2",
|
||||
},
|
||||
fontFamily: {
|
||||
base: '"Roboto", sans-serif',
|
||||
},
|
||||
sidebarWidth: 255,
|
||||
},
|
||||
template: {
|
||||
favicon: "/docs/components/logo.svg",
|
||||
head: {
|
||||
links: [
|
||||
{
|
||||
rel: "stylesheet",
|
||||
href: "https://fonts.googleapis.com/css?family=Roboto",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
styles: {
|
||||
StyleGuide: {
|
||||
logo: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
},
|
||||
},
|
||||
Logo: {
|
||||
logo: {
|
||||
display: "inline-flex",
|
||||
},
|
||||
},
|
||||
Version: {
|
||||
version: {
|
||||
display: "inline-flex",
|
||||
margin: "none",
|
||||
marginLeft: "8px",
|
||||
fontSize: "0.6rem",
|
||||
fontWeight: "bold",
|
||||
padding: "0.1rem 0.2rem",
|
||||
color: "#fff",
|
||||
backgroundColor: "#6c757d",
|
||||
borderRadius: "5px",
|
||||
textAlign: "center",
|
||||
verticalAlign: "middle",
|
||||
whiteSpace: "nowrap",
|
||||
},
|
||||
},
|
||||
},
|
||||
tocMode: "collapse",
|
||||
pagePerSection: true,
|
||||
@ -122,6 +77,9 @@ module.exports = {
|
||||
usageMode: "expand",
|
||||
},
|
||||
],
|
||||
template: {
|
||||
favicon: "/docs/components/logo.svg",
|
||||
},
|
||||
require: [
|
||||
"babel-polyfill",
|
||||
path.join(__dirname, "src/testUtils/mockGlobals.js"),
|
||||
|
||||
Reference in New Issue
Block a user