{label}
{number.charAt(i)}
- ))
- }
-
- return (
- self.instance = el} >
- {numberHTML}
-
- );
-
- }
-
-}
diff --git a/packages/components/src/comments/comment-form.jsx b/packages/components/src/comments/comment-form.jsx
deleted file mode 100755
index d4049c5dd..000000000
--- a/packages/components/src/comments/comment-form.jsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import merge from 'merge';
-import { useState, useEffect, useCallback } from 'react';
-import DataStore from '../data-store';
-import Button from '../button';
-import InputWithCounter from '../forms/input-with-counter';
-import LoginButton from '../user/login-button';
-import hasRole from '../lib/user-has-role';
-
-function CommentForm(props) {
-
- props = merge.recursive({}, {
- descriptionMinLength: 30,
- descriptionMaxLength: 500,
- placeholder: '',
- formIntro: '',
- requiredUserRole: 'member',
- }, props.config, props);
-
- const datastore = new DataStore(props);
- const [ currentUser, currentUserError, currentUserIsLoading ] = datastore.useCurrentUser({ ...props });
-
- function canSubmit() {
- return hasRole(currentUser, props.requiredUserRole)
- }
-
- let parentIdHTML = null;
- if (props.parentId) {
- parentIdHTML =
- }
-
- let formIntroHTML = null;
- if (props.formIntro) {
- formIntroHTML = (
- {props.formIntro}
- );
- }
-
- let submitButtonHTML =
- if (!currentUser || currentUser.role != props.requiredUserRole) { // TODO: hasrole
- submitButtonHTML = {userName}
);
-
- function toggleReplyForm() {
- setIsReplyFromActive(!isReplyFromActive);
- }
-
- function toggleEditForm(what) {
- setEditMode(!editMode);
- }
-
- function canReply() {
- if (props.isClosed) return false;
- if (hasRole(props.currentUser, 'moderator')) return true;
- return props.can && props.can.reply;
- }
-
- function canLike() {
- if (props.isClosed) return false;
- if (hasRole(props.currentUser, 'moderator')) return true;
- return hasRole(props.currentUser, props.requiredUserRole);
- }
-
- function canEdit() {
- if (props.isClosed) return false;
- if (hasRole(props.currentUser, 'moderator')) return true;
- return props.can && props.can.edit;
- }
-
- function canDelete() {
- if (props.isClosed) return false;
-
- if (hasRole(props.currentUser, 'moderator')) return true;
- return props.can && props.can.delete;
- }
-
- let menuHTML = null;
- if ( canEdit() && canDelete() ) {
- menuHTML = (
- { setIsMenuActive(true); }}>
- { if (confirm('Weet u het zeker?')) props.delete(props.id); } }/>
- toggleEditForm() }/>
-
- );
- }
-
- let descriptionHTML = ();
- if (editMode) {
- descriptionHTML = (
-
- { props.submitComment(e); setEditMode(!editMode) }}/>
-
- );
- }
-
- let likeButtonHTML = null;
- if (!props.parentId) {
- if (props.isVotingEnabled) {
- if (canLike()) {
- likeButtonHTML = (
- props.submitLike() }>
- Mee eens ({props.yes || 0})
-
- );
- } else {
- likeButtonHTML = (
-
- Mee eens ({props.yes || 0})
-
- );
- }
- }
- }
- likeButtonHTML = likeButtonHTML ||
- { props.submitComment(e); setEditMode(!editMode) }}/>
-
- );
- }
- }
- }
- }
-
- let repliesHTML = null;
- if (props.replies && props.replies.length) {
- repliesHTML = (
- -
- {props.replies.map((reply, index) => {
- let attributes = { ...props };
- delete attributes.replies;
- attributes = merge.recursive(attributes, reply);
- let key = `osc-reply-key-${ reply.id || parseInt( 1000000 * Math.random() )}`;
- return (
-
-
-
-
- );
-
- })}
-
-
-
-
- );
-
-}
-
-export default Comment;
diff --git a/packages/components/src/comments/comments.jsx b/packages/components/src/comments/comments.jsx
deleted file mode 100755
index 3fb1c2dea..000000000
--- a/packages/components/src/comments/comments.jsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import merge from 'merge';
-import { useState, useEffect, useCallback } from 'react';
-import DataStore from '../data-store';
-import hasRole from '../lib/user-has-role';
-import Comment from './comment';
-import CommentForm from './comment-form';
-
-// TODO: op verzoek van Daan; gaan we dat gebruiken?
-// TODO: dit moet, sort of, passen op NLDS
-import { cva } from "class-variance-authority";
-const commentVariants = cva(
- "osc-comments-component osc-comments inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
- {
- variants: {
- variant: {
- default: "bg-primary text-primary-foreground hover:bg-primary/90",
- destructive:
- "bg-destructive text-destructive-foreground hover:bg-destructive/90",
- outline:
- "border border-input hover:bg-accent hover:text-accent-foreground",
- secondary:
- "bg-secondary text-secondary-foreground hover:bg-secondary/80",
- ghost: "hover:bg-accent hover:text-accent-foreground",
- icon: "w-10 hover:bg-foreground/10",
- link: "underline-offset-4 hover:underline text-primary",
- },
- size: {
- default: "h-12 py-4 px-4",
- sm: "h-10 px-2",
- lg: "h-14 px-8",
- },
- },
- defaultVariants: {
- variant: "default",
- size: "default",
- },
- }
-);
-
-const Comments = function(props) {
-
- props = merge.recursive({}, {
- sentiment: 'no sentiment',
- emptyListText: 'Nog geen reacties',
- title: '[[nr]] comments',
- requiredUserRole: 'member', // TODO
- }, props.config, props);
-
- const datastore = new DataStore(props);
-
- const [ currentUser, currentUserError, currentUserIsLoading ] = datastore.useCurrentUser({ ...props });
- const [ comments, commentsError, commentsIsLoading ] = datastore.useComments({ ...props });
-
- let [ submitError, setSubmitError ] = useState();
-
- async function submitComment(e) {
-
- setSubmitError(null)
- e.preventDefault();
-
- let formData = new FormData(e.target);
- formData = Object.fromEntries(formData.entries());
-
- formData.resourceId = props.resourceId;
-
- try {
- if ( formData.id ) {
- let comment = comments.find( c => c.id == formData.id );
- await comment.update(formData)
- } else {
- await comments.create(formData)
- }
- } catch(err) {
- console.log(err);
- setSubmitError(err)
- }
-
- }
-
- // TODO: dit komt uit de oude; willen we dit zo?
- // showNotLoggedInPopup() {
- // this.notLoggedInPopup.showPopup();
- // }
-
- let titleHTML = props.title ?
-
- {menuHTML}
-
- {metadataHTML}
-
-
- {replyFormHTML}
- {repliesHTML}
-
- {props.createDateHumanized}
- {descriptionHTML}
-
- {likeButtonHTML}
- {replyButtonHTML}
-
- {props.title.replace(/\[\[nr\]\]/, comments.length)}
: null; - - let commentsFormHTML ={props.closedText}
- } else {
- commentsFormHTML = null
- }
- }
-
- // TODO: errors moeten nog
- let errorHTML = null;
- let error = submitError || commentsError;
- if (error) {
- console.log(error);
- errorHTML = {error.message}
- }
-
- let commentsHTML = null;
- if (comments.length) {
- commentsHTML = comments.map( ( comment, index ) => {
- let attributes = { ...props, ...comment, currentUser, submitComment };
- // todo: maar er een ul met li van
- return Loading...
- } else {
- commentsHTML = {props.emptyListText}
- }
-
- }
-
- return (
-
- {titleHTML}
- {errorHTML}
- {commentsFormHTML}
- {commentsHTML}
-
- );
-
-}
-
-export default Comments;
diff --git a/packages/components/src/comments/css/comment.less b/packages/components/src/comments/css/comment.less
deleted file mode 100755
index fa23097fe..000000000
--- a/packages/components/src/comments/css/comment.less
+++ /dev/null
@@ -1,203 +0,0 @@
-.osc-comments {
-
- @import 'form';
-
- width: 100%;
-
- ul {
- list-style-type: none;
- padding: 0;
- margin: 0;
- }
-
- .osc-button-blue {
- .osc-button-blue();
-
- &.osc-not-logged-in-button {
- .osc-inloggen-background;
- padding-left: 40px;
- }
-
- }
-
- .osc-intro {
- font-weight: bold;
- margin-bottom: 10px;
- }
-
- .osc-closed-text {
- background-color: #f5f5f5;
- padding: 20px 30px 20px 24px;
- }
-
- .osc-empty-list-text {
- margin-top: 20px;
- background-color: #f5f5f5;
- padding: 20px 30px 20px 24px;
- }
-
- .osc-reply,
- .osc-comment {
-
- position: relative;
- margin-top: 20px;
- padding: 20px;
- background-color: #f5f5f5;
- border-left: 3px solid #004699;
-
- .osc-comment-menu {
- .osc-hamburger-button-background();
- position: absolute;
- top: 0;
- right: 0;
- width: 40px;
- height: 40px;
- cursor: pointer;
-
- .osc-comment-delete,
- .osc-comment-edit {
- display: none;
- width: 40px;
- height: 40px;
- border: 0 none;
- outline: 0;
- cursor: pointer;
- }
-
- .osc-comment-delete {
- .osc-delete-button-background();
- background-color: #f34541;
- }
-
- .osc-comment-edit {
- .osc-edit-button-background();
- background-color: #c9cbcc;
- }
-
- &.osc-comment-hamburger-active {
-
- width: 80px;
-
- .osc-comment-delete,
- .osc-comment-edit {
- display: inline-block;
- }
-
- }
-
- }
-
- .osc-comment-user {
- display: inline-block;
- font-size: 16px;
- font-weight: 600;
- line-height: 1.38;
-
- &:after {
- display: inline-block;
- padding: 0 10px;
- content: ' | ';
- }
-
- &.osc-is-admin {
- position: relative;
- padding-left: 20px;
-
- &:before {
- .osc-flag-background();
- position: absolute;
- top: 2px;
- left: 0px;
- width: 16px;
- height: 16px;
- content: '';
- }
-
- }
-
- }
-
- .osc-comment-date {
- display: inline-block;
- font-size: 16px;
- line-height: 1.38;
- }
-
- .osc-comment-default-text {
- }
-
- .osc-comment-description {
- margin-top: 20px;
- }
-
- .osc-comment-like-button {
-
- position: relative;
- display: block;
- appearance: none;
- margin-top: 20px;
- font-size: 14px;
- font-weight: normal;
- padding: 3px 0 0 35px;
- background: none;
- border: 0 none;
- color: black;
- outline: none;
-
- &:before {
- display: block;
- top: 0;
- left: 0;
- width: 25px;
- height: 25px;
- background-color: #656565;
- background-position: center;
- background-repeat: no-repeat;
- background-size: auto 14px;
- background-image: @osc-thumbs-up-white-image;
- position: absolute;
- content: '';
- }
-
- &.osc-comment-like-button-hasvoted {
-
- font-weight: bold;
-
- &:before {
- background-color: #b1cc06;
- }
- }
-
- }
-
- a.osc-comment-like-button {
- cursor: pointer;
- }
-
- .osc-reply-button {
- position: relative;
- display: block;
- float: right;
- margin-top: -20px;
- padding-right: 15px;
- font-weight: 600;
- line-height: 21px;
- color: #000;
- text-decoration: none;
- background-image: @osc-arrow-right-black-image;
- background-size: auto 12px;
- background-position: top 4px right;
- background-repeat: no-repeat;
- cursor: pointer;
- }
-
- }
-
- .osc-reply {
- margin-left: 20px;
- background-color: transparent;
- border-left: 3px solid #B0B0B0;
- padding-right: 0;
- }
-
-}
diff --git a/packages/components/src/comments/css/default.less b/packages/components/src/comments/css/default.less
deleted file mode 100755
index 45fbaa334..000000000
--- a/packages/components/src/comments/css/default.less
+++ /dev/null
@@ -1,6 +0,0 @@
-@import (reference) '../../css/default.less';
-@import '../../css/error.less';
-@import 'comment';
-
-@phone: ~'only screen and (max-width: 700px)';
-
diff --git a/packages/components/src/comments/css/form.less b/packages/components/src/comments/css/form.less
deleted file mode 100755
index 4819672ec..000000000
--- a/packages/components/src/comments/css/form.less
+++ /dev/null
@@ -1,16 +0,0 @@
-@import (reference) '../../css/default.less';
-
-.osc-input-with-counter {
-// .osc-input-with-counter();
-}
-
-.osc-button-blue {
- .osc-button-blue();
-}
-
-.osc-align-right-container {
- display: flex;
- flex-direction: row;
- justify-content: flex-end;
- margin-top: -30px;
-}
diff --git a/packages/components/src/comments/index.jsx b/packages/components/src/comments/index.jsx
deleted file mode 100755
index 0a3ecccfc..000000000
--- a/packages/components/src/comments/index.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import loadWidget from '../lib/load-widget';
-import Comments from './comments';
-
-import './css/default.less'; // add css to result - TODO: dit moet beter
-
-Comments.loadWidget = loadWidget;
-
-export {
- Comments as default,
- Comments,
-};
diff --git a/packages/components/src/comments/not-logged-in-popup (copy 1).jsx b/packages/components/src/comments/not-logged-in-popup (copy 1).jsx
deleted file mode 100755
index 0655485ea..000000000
--- a/packages/components/src/comments/not-logged-in-popup (copy 1).jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-'use strict';
-
-import OpenStadComponent from '../../component/index.jsx';
-import OpenStadComponentLibs from '../../libs/index.jsx';
-import OpenStadComponentModalPopup from '../../modal-popup/index.jsx';
-
-export default class OpenStadComponentNotLoggedInPopup extends OpenStadComponent {
-
- constructor(props) {
- super(props, {
- loginUrl: '',
- });
- }
-
- showPopup() {
- // dispatch an event
- let self = this;
- let loginUrl = OpenStadComponentLibs.auth.getLoginUrl(self.config);
- var event = new window.CustomEvent('osc-show-modal-popup', { detail: {
- divId: self.divId,
- title: 'Login om verder te gaan',
- text: 'Login om een argument te plaatsen, te reageren of een argument te liken',
- buttonAction: () => { OpenStadComponentLibs.localStorage.set('osc-login-pending-scroll-to-reactions', true); OpenStadComponentLibs.localStorage.set('osc-login-pending-show-details', self.config.resourceId); document.location.href = loginUrl; },
- buttonText: 'Inloggen',
- }});
- document.dispatchEvent(event);
- }
-
- render() {
- return (
- {message}
- }
-
- // listen to events
- useEffect(() => {
- let errorListener = function(event) {
- console.log(event.detail);
- setMessage(event.detail.message)
- }
- document.addEventListener('osc-error', errorListener);
- return () => {
- document.removeEventListener('osc-error', errorListener);
- };
- }, []);
-
- return (
-
- {errorHTML}
-
- );
-
-}
-
-export default Error;
diff --git a/packages/components/src/error/index.jsx b/packages/components/src/error/index.jsx
deleted file mode 100644
index 08d10f744..000000000
--- a/packages/components/src/error/index.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import loadWidget from '../lib/load-widget';
-import Error from './error';
-
-import './css/default.less'; // add css to result - TODO: dit moet beter
-
-Error.loadWidget = loadWidget;
-
-export {
- Error as default,
- Error,
-};
-
diff --git a/packages/components/src/forms/css/default.less b/packages/components/src/forms/css/default.less
deleted file mode 100755
index fda2e13f1..000000000
--- a/packages/components/src/forms/css/default.less
+++ /dev/null
@@ -1,97 +0,0 @@
-@import (reference) '../../css/default.less';
-@import (reference) 'form-field';
-@import (reference) 'htmlarea';
-@import (reference) 'image-upload';
-@import (reference) 'input-with-counter';
-@import (reference) 'radios';
-@import (reference) 'select';
-@import (reference) 'slider';
-@import (reference) 'textinput';
-@import (reference) 'textarea';
-
-.osc-form {
-
- h2 {
- margin: 20px 0;
- padding: 0;
- font-size: 29px;
- }
-
- .osc-form-field {
- .osc-form-field();
- }
-
- .osc-htmlarea {
- .osc-htmlarea();
- }
-
- .osc-image-upload {
- .osc-image-upload();
- }
-
- .osc-input-with-counter {
- .osc-input-with-counter();
- }
-
- .osc-radios {
- .osc-radios();
- }
-
- .osc-select {
- .osc-select();
- }
-
- .osc-slider {
- .osc-slider();
- }
-
- .osc-textinput {
- .osc-textinput();
- }
-
- .osc-input-with-counter {
- .osc-input-with-counter();
- }
-
- .osc-select {
- .osc-select();
- }
-
- .osc-slider {
- .osc-slider();
- }
-
- .osc-textarea {
- .osc-textarea();
- }
-
- .osc-form-info {
- margin-left: 30px;
- }
-
- .osc-form-info::before {
- .osc-infopin-background;
- position: absolute;
- top: 0px;
- left: -30px;
- width: 30px;
- height: 30px;
- content: "";
- }
-
- .osc-form-warning,
- .osc-form-error,
- .osc-form-counter {
- position: absolute;
- font-size: 14px;
- bottom: -35px;
- margin-top: 2px;
- color: #9a9a9a;
- }
-
- .osc-form-warning,
- .osc-form-error {
- color: #ea1d25;
- }
-
-}
diff --git a/packages/components/src/forms/css/form-field.less b/packages/components/src/forms/css/form-field.less
deleted file mode 100755
index 1f6f3278a..000000000
--- a/packages/components/src/forms/css/form-field.less
+++ /dev/null
@@ -1,27 +0,0 @@
-.osc-form-field() {
-
- position: relative;
- margin-bottom: 36px;
-
- h3 {
- margin: 10px 0;
- padding: 0;
- font-size: 24px;
- }
-
- .osc-form-info,
- .osc-form-warning,
- .osc-form-counter {
- position: relative;
- margin: -16px 0 10px 0;
- padding: 0;
- }
-
- .osc-form-description {
- .osc-infopin-background();
- margin-bottom: 10px;
- padding-left: 30px;
- }
-
-}
-
diff --git a/packages/components/src/forms/css/htmlarea.less b/packages/components/src/forms/css/htmlarea.less
deleted file mode 100755
index 5b96066fa..000000000
--- a/packages/components/src/forms/css/htmlarea.less
+++ /dev/null
@@ -1,55 +0,0 @@
-@import (reference) '../../css/images';
-
-.osc-htmlarea() {
-
- .osc-htmlarea-content {
- border: solid 1px #434343;
- padding: 15px;
- }
-
- .osc-htmlarea-buttons {
-
- margin-bottom: 5px;
-
- .osc-htmlarea-button {
- display: inline-block;
- width: 40px;
- height: 40px;
- margin-right: 5px;
- padding: 5px;
- border: solid 1px #434343;
- background-color: #eee;
- font-weight: bold;
- text-align: center;
- cursor: pointer;
-
- &.osc-htmlarea-button-bold {
- .osc-button-bold-background();
- background-position: 5px 5px;
- }
-
- &.osc-htmlarea-button-italic {
- .osc-button-italic-background();
- background-position: 5px 5px;
- }
-
- &.osc-htmlarea-button-insertunorderedlist {
- .osc-button-insertunorderedlist-background();
- background-position: 5px 5px;
- }
-
- &.osc-htmlarea-button-createlink {
- .osc-button-createlink-background();
- background-position: 5px 5px;
- }
-
- }
-
- }
-
-}
-
-.osc-htmlarea {
- .osc-htmlarea();
-}
-
diff --git a/packages/components/src/forms/css/image-upload.less b/packages/components/src/forms/css/image-upload.less
deleted file mode 100755
index 6e5d8d568..000000000
--- a/packages/components/src/forms/css/image-upload.less
+++ /dev/null
@@ -1,13 +0,0 @@
-.osc-image-upload() {
-
- background-color: green;
-
-}
-
-/*!
- * FilePond 4.20.1
- * Licensed under MIT, https://opensource.org/licenses/MIT/
- * Please visit https://pqina.nl/filepond/ for details.
- */
-
-.filepond--assistant{position:absolute;overflow:hidden;height:1px;width:1px;padding:0;border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.filepond--browser.filepond--browser{position:absolute;margin:0;padding:0;left:1em;top:1.75em;width:calc(100% - 2em);opacity:0;font-size:0}.filepond--data{position:absolute;width:0;height:0;padding:0;margin:0;border:none;visibility:hidden;pointer-events:none;contain:strict}.filepond--drip{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;opacity:.1;pointer-events:none;border-radius:.5em;background:rgba(0,0,0,.01)}.filepond--drip-blob{-webkit-transform-origin:center center;transform-origin:center center;width:8em;height:8em;margin-left:-4em;margin-top:-4em;background:#292625;border-radius:50%}.filepond--drip-blob,.filepond--drop-label{position:absolute;top:0;left:0;will-change:transform,opacity}.filepond--drop-label{right:0;margin:0;color:#4f4f4f;display:flex;justify-content:center;align-items:center;height:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.filepond--drop-label.filepond--drop-label label{display:block;margin:0;padding:.5em}.filepond--drop-label label{cursor:default;font-size:.875em;font-weight:400;text-align:center;line-height:1.5}.filepond--label-action{text-decoration:underline;-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto;-webkit-text-decoration-color:#a7a4a4;text-decoration-color:#a7a4a4;cursor:pointer}.filepond--root[data-disabled] .filepond--drop-label label{opacity:.5}.filepond--file-action-button.filepond--file-action-button{font-size:1em;width:1.625em;height:1.625em;font-family:inherit;line-height:inherit;margin:0;padding:0;border:none;outline:none;will-change:transform,opacity}.filepond--file-action-button.filepond--file-action-button span{position:absolute;overflow:hidden;height:1px;width:1px;padding:0;border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.filepond--file-action-button.filepond--file-action-button svg{width:100%;height:100%}.filepond--file-action-button.filepond--file-action-button:after{position:absolute;left:-.75em;right:-.75em;top:-.75em;bottom:-.75em;content:""}.filepond--file-action-button{cursor:auto;color:#fff;border-radius:50%;background-color:rgba(0,0,0,.5);background-image:none;box-shadow:0 0 0 0 hsla(0,0%,100%,0);transition:box-shadow .25s ease-in}.filepond--file-action-button:focus,.filepond--file-action-button:hover{box-shadow:0 0 0 .125em hsla(0,0%,100%,.9)}.filepond--file-action-button[disabled]{color:hsla(0,0%,100%,.5);background-color:rgba(0,0,0,.25)}.filepond--file-action-button[hidden]{display:none}.filepond--file-info{position:static;display:flex;flex-direction:column;align-items:flex-start;flex:1;margin:0 .5em 0 0;min-width:0;will-change:transform,opacity;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.filepond--file-info *{margin:0}.filepond--file-info .filepond--file-info-main{font-size:.75em;line-height:1.2;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:100%}.filepond--file-info .filepond--file-info-sub{font-size:.625em;opacity:.5;transition:opacity .25s ease-in-out;white-space:nowrap}.filepond--file-info .filepond--file-info-sub:empty{display:none}.filepond--file-status{position:static;display:flex;flex-direction:column;align-items:flex-end;flex-grow:0;flex-shrink:0;margin:0;min-width:2.25em;text-align:right;will-change:transform,opacity;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.filepond--file-status *{margin:0;white-space:nowrap}.filepond--file-status .filepond--file-status-main{font-size:.75em;line-height:1.2}.filepond--file-status .filepond--file-status-sub{font-size:.625em;opacity:.5;transition:opacity .25s ease-in-out}.filepond--file-wrapper.filepond--file-wrapper{border:none;margin:0;padding:0;min-width:0;height:100%}.filepond--file-wrapper.filepond--file-wrapper>legend{position:absolute;overflow:hidden;height:1px;width:1px;padding:0;border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}.filepond--file{position:static;display:flex;height:100%;align-items:flex-start;padding:.5625em;color:#fff;border-radius:.5em}.filepond--file .filepond--file-status{margin-left:auto;margin-right:2.25em}.filepond--file .filepond--processing-complete-indicator{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:3}.filepond--file .filepond--file-action-button,.filepond--file .filepond--processing-complete-indicator,.filepond--file .filepond--progress-indicator{position:absolute}.filepond--file [data-align*=left]{left:.5625em}.filepond--file [data-align*=right]{right:.5625em}.filepond--file [data-align*=center]{left:calc(50% - .8125em)}.filepond--file [data-align*=bottom]{bottom:1.125em}.filepond--file [data-align=center]{top:calc(50% - .8125em)}.filepond--file .filepond--progress-indicator{margin-top:.1875em}.filepond--file .filepond--progress-indicator[data-align*=right]{margin-right:.1875em}.filepond--file .filepond--progress-indicator[data-align*=left]{margin-left:.1875em}[data-filepond-item-state*=error] .filepond--file-info,[data-filepond-item-state*=invalid] .filepond--file-info,[data-filepond-item-state=cancelled] .filepond--file-info{margin-right:2.25em}[data-filepond-item-state~=processing] .filepond--file-status-sub{opacity:0}[data-filepond-item-state~=processing] .filepond--action-abort-item-processing~.filepond--file-status .filepond--file-status-sub{opacity:.5}[data-filepond-item-state=processing-error] .filepond--file-status-sub{opacity:0}[data-filepond-item-state=processing-error] .filepond--action-retry-item-processing~.filepond--file-status .filepond--file-status-sub{opacity:.5}[data-filepond-item-state=processing-complete] .filepond--action-revert-item-processing svg{-webkit-animation:fall .5s linear .125s both;animation:fall .5s linear .125s both}[data-filepond-item-state=processing-complete] .filepond--file-status-sub{opacity:.5}[data-filepond-item-state=processing-complete] .filepond--file-info-sub,[data-filepond-item-state=processing-complete] .filepond--processing-complete-indicator:not([style*=hidden])~.filepond--file-status .filepond--file-status-sub{opacity:0}[data-filepond-item-state=processing-complete] .filepond--action-revert-item-processing~.filepond--file-info .filepond--file-info-sub{opacity:.5}[data-filepond-item-state*=error] .filepond--file-wrapper,[data-filepond-item-state*=error] .filepond--panel,[data-filepond-item-state*=invalid] .filepond--file-wrapper,[data-filepond-item-state*=invalid] .filepond--panel{-webkit-animation:shake .65s linear both;animation:shake .65s linear both}[data-filepond-item-state*=busy] .filepond--progress-indicator svg{-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes shake{10%,90%{-webkit-transform:translateX(-.0625em);transform:translateX(-.0625em)}20%,80%{-webkit-transform:translateX(.125em);transform:translateX(.125em)}30%,50%,70%{-webkit-transform:translateX(-.25em);transform:translateX(-.25em)}40%,60%{-webkit-transform:translateX(.25em);transform:translateX(.25em)}}@keyframes shake{10%,90%{-webkit-transform:translateX(-.0625em);transform:translateX(-.0625em)}20%,80%{-webkit-transform:translateX(.125em);transform:translateX(.125em)}30%,50%,70%{-webkit-transform:translateX(-.25em);transform:translateX(-.25em)}40%,60%{-webkit-transform:translateX(.25em);transform:translateX(.25em)}}@-webkit-keyframes fall{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}70%{opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}to{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes fall{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}70%{opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1);-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}to{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}.filepond--hopper[data-hopper-state=drag-over]>*{pointer-events:none}.filepond--hopper[data-hopper-state=drag-over]:after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;z-index:100}.filepond--progress-indicator{z-index:103}.filepond--file-action-button{z-index:102}.filepond--file-status{z-index:101}.filepond--file-info{z-index:100}.filepond--item{position:absolute;top:0;left:0;right:0;z-index:1;padding:0;margin:.25em;will-change:transform,opacity}.filepond--item>.filepond--panel{z-index:-1}.filepond--item>.filepond--panel .filepond--panel-bottom{box-shadow:0 .0625em .125em -.0625em rgba(0,0,0,.25)}.filepond--item>.filepond--file-wrapper,.filepond--item>.filepond--panel{transition:opacity .15s ease-out}.filepond--item[data-drag-state]{cursor:-webkit-grab;cursor:grab}.filepond--item[data-drag-state]>.filepond--panel{transition:box-shadow .125s ease-in-out;box-shadow:0 0 0 transparent}.filepond--item[data-drag-state=drag]{cursor:-webkit-grabbing;cursor:grabbing}.filepond--item[data-drag-state=drag]>.filepond--panel{box-shadow:0 .125em .3125em rgba(0,0,0,.325)}.filepond--item[data-drag-state]:not([data-drag-state=idle]){z-index:2}.filepond--item-panel{background-color:#64605e}[data-filepond-item-state=processing-complete] .filepond--item-panel{background-color:#369763}[data-filepond-item-state*=error] .filepond--item-panel,[data-filepond-item-state*=invalid] .filepond--item-panel{background-color:#c44e47}.filepond--item-panel{border-radius:.5em;transition:background-color .25s}.filepond--list-scroller{position:absolute;top:0;left:0;right:0;margin:0;will-change:transform}.filepond--list-scroller[data-state=overflow]{overflow-y:scroll;overflow-x:hidden;-webkit-overflow-scrolling:touch;-webkit-mask:linear-gradient(180deg,#000 calc(100% - .5em),transparent);mask:linear-gradient(180deg,#000 calc(100% - .5em),transparent)}.filepond--list-scroller[data-state=overflow] .filepond--list{bottom:0;right:0}.filepond--list-scroller::-webkit-scrollbar{background:transparent}.filepond--list-scroller::-webkit-scrollbar:vertical{width:1em}.filepond--list-scroller::-webkit-scrollbar:horizontal{height:0}.filepond--list-scroller::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3);border-radius:99999px;border:.3125em solid transparent;background-clip:content-box}.filepond--list.filepond--list{position:absolute;top:0;margin:0;padding:0;list-style-type:none;will-change:transform}.filepond--list{left:.75em;right:.75em}.filepond--root[data-style-panel-layout~=integrated]{width:100%;height:100%;max-width:none;margin:0}.filepond--root[data-style-panel-layout~=circle] .filepond--panel-root,.filepond--root[data-style-panel-layout~=integrated] .filepond--panel-root{border-radius:0}.filepond--root[data-style-panel-layout~=circle] .filepond--panel-root>*,.filepond--root[data-style-panel-layout~=integrated] .filepond--panel-root>*{display:none}.filepond--root[data-style-panel-layout~=circle] .filepond--drop-label,.filepond--root[data-style-panel-layout~=integrated] .filepond--drop-label{bottom:0;height:auto;display:flex;justify-content:center;align-items:center;z-index:7}.filepond--root[data-style-panel-layout~=circle] .filepond--item-panel,.filepond--root[data-style-panel-layout~=integrated] .filepond--item-panel{display:none}.filepond--root[data-style-panel-layout~=compact] .filepond--list-scroller,.filepond--root[data-style-panel-layout~=integrated] .filepond--list-scroller{overflow:hidden;height:100%;margin-top:0;margin-bottom:0}.filepond--root[data-style-panel-layout~=compact] .filepond--list,.filepond--root[data-style-panel-layout~=integrated] .filepond--list{left:0;right:0;height:100%}.filepond--root[data-style-panel-layout~=compact] .filepond--item,.filepond--root[data-style-panel-layout~=integrated] .filepond--item{margin:0}.filepond--root[data-style-panel-layout~=compact] .filepond--file-wrapper,.filepond--root[data-style-panel-layout~=integrated] .filepond--file-wrapper{height:100%}.filepond--root[data-style-panel-layout~=compact] .filepond--drop-label,.filepond--root[data-style-panel-layout~=integrated] .filepond--drop-label{z-index:7}.filepond--root[data-style-panel-layout~=circle]{border-radius:99999rem;overflow:hidden}.filepond--root[data-style-panel-layout~=circle]>.filepond--panel{border-radius:inherit}.filepond--root[data-style-panel-layout~=circle] .filepond--file-info,.filepond--root[data-style-panel-layout~=circle] .filepond--file-status,.filepond--root[data-style-panel-layout~=circle]>.filepond--panel>*{display:none}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent){.filepond--root[data-style-panel-layout~=circle]{will-change:transform}}}.filepond--panel-root{border-radius:.5em;background-color:#f1f0ef}.filepond--panel{position:absolute;left:0;top:0;right:0;margin:0;height:100%!important;pointer-events:none}.filepond-panel:not([data-scalable=false]){height:auto!important}.filepond--panel[data-scalable=false]>div{display:none}.filepond--panel[data-scalable=true]{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;background-color:transparent!important;border:none!important}.filepond--panel-bottom,.filepond--panel-center,.filepond--panel-top{position:absolute;left:0;top:0;right:0;margin:0;padding:0}.filepond--panel-bottom,.filepond--panel-top{height:.5em}.filepond--panel-top{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important;border-bottom:none!important}.filepond--panel-top:after{content:"";position:absolute;height:2px;left:0;right:0;bottom:-1px;background-color:inherit}.filepond--panel-bottom,.filepond--panel-center{will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-origin:left top;transform-origin:left top;-webkit-transform:translate3d(0,.5em,0);transform:translate3d(0,.5em,0)}.filepond--panel-bottom{border-top-left-radius:0!important;border-top-right-radius:0!important;border-top:none!important}.filepond--panel-bottom:before{content:"";position:absolute;height:2px;left:0;right:0;top:-1px;background-color:inherit}.filepond--panel-center{height:100px!important;border-top:none!important;border-bottom:none!important;border-radius:0!important}.filepond--panel-center:not([style]){visibility:hidden}.filepond--progress-indicator{position:static;width:1.25em;height:1.25em;color:#fff;margin:0;pointer-events:none;will-change:transform,opacity}.filepond--progress-indicator svg{width:100%;height:100%;vertical-align:top;transform-box:fill-box}.filepond--progress-indicator path{fill:none;stroke:currentColor}.filepond--list-scroller{z-index:6}.filepond--drop-label{z-index:5}.filepond--drip{z-index:3}.filepond--root>.filepond--panel{z-index:2}.filepond--browser{z-index:1}.filepond--root{box-sizing:border-box;position:relative;margin-bottom:1em;font-size:1rem;line-height:normal;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-weight:450;text-align:left;text-rendering:optimizeLegibility;direction:ltr;contain:layout style size}.filepond--root *{box-sizing:inherit;line-height:inherit}.filepond--root :not(text){font-size:inherit}.filepond--root[data-disabled]{pointer-events:none}.filepond--root[data-disabled] .filepond--list-scroller{pointer-events:all}.filepond--root[data-disabled] .filepond--list{pointer-events:none}.filepond--root .filepond--drop-label{min-height:4.75em}.filepond--root .filepond--list-scroller{margin-top:1em;margin-bottom:1em}
diff --git a/packages/components/src/forms/css/input-with-counter.less b/packages/components/src/forms/css/input-with-counter.less
deleted file mode 100755
index 287d1f36f..000000000
--- a/packages/components/src/forms/css/input-with-counter.less
+++ /dev/null
@@ -1,55 +0,0 @@
-@import (reference) '../../css/images';
-
-.osc-input-with-counter() {
-
- position: relative;
- margin-bottom: 36px;
-
- input, textarea {
- width: 100%;
- padding: 15px;
- border: 1px solid #767676;
- border-radius: 0;
- }
-
- .osc-form-info,
- .osc-form-warning,
- .osc-form-counter {
- position: relative;
- margin: -16px 0 10px 0;
- padding: 0;
- }
-
- .osc-form-info {
- margin-left: 30px;
- }
-
- .osc-form-warning,
- .osc-form-counter {
- position: absolute;
- font-size: 14px;
- bottom: -35px;
- margin-top: 2px;
- color: #9a9a9a;
- }
-
- .osc-form-warning,
- .osc-form-error {
- color: #ea1d25;
- }
-
- .osc-form-info::before {
- .osc-infopin-background;
- position: absolute;
- top: 0px;
- left: -30px;
- width: 30px;
- height: 30px;
- content: "";
- }
-
-}
-
-.osc-input-with-counter {
- .osc-input-with-counter();
-}
diff --git a/packages/components/src/forms/css/radios.less b/packages/components/src/forms/css/radios.less
deleted file mode 100755
index 37df13f90..000000000
--- a/packages/components/src/forms/css/radios.less
+++ /dev/null
@@ -1,60 +0,0 @@
-.osc-radios() {
-
- .osc-radio-container {
-
- h4 {
- padding: 0 !important;
- margin: 0 !important;
- font-size: 1em !important;
- line-height: 1em !important;
- font-weight: bold !important;
- }
-
- margin-bottom: 10px;
- overflow: hidden;
-
- input[type="radio"] {
- opacity: 0;
- width: 24px;
- height: 24px;
- margin: 0;
- padding: 0;
- }
-
- .osc-radio-input {
- position: relative;
- float: left;
- width: 24px;
- height: 24px;
- margin-right: 12px;
- border: solid 1px #767676;
- border-radius: 12px;
- background-color: white;
-
-
- &.osc-radio-input-checked {
-
- &:after {
- position: absolute;
- top: 2px;
- left: 2px;
- width: 0px;
- height: 0px;
- border: solid 9px black;
- border-radius: 9px;
- content: '';
- }
- }
-
- }
-
- .osc-radio-text {
- float: left;
- width: calc(100% - 37px);
- margin-top: 3px;
- line-height: 1.38;
- }
-
- }
-
-}
diff --git a/packages/components/src/forms/css/select.less b/packages/components/src/forms/css/select.less
deleted file mode 100755
index f7a566d0d..000000000
--- a/packages/components/src/forms/css/select.less
+++ /dev/null
@@ -1,25 +0,0 @@
-.osc-select() {
-
- select {
- .osc-arrow-down-black-background();
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- height: 44px;
- padding: 0 20px;
- padding-right: 40px;
- border: solid 1px #434343;
- outline: none;
- font-size: 16px;
- font-weight: 400;
- line-height: 44px;
- text-align: left;
- background-color: white;
-
- @media @phone {
- width: 100%;
- }
-
- }
-
-}
diff --git a/packages/components/src/forms/css/slider.less b/packages/components/src/forms/css/slider.less
deleted file mode 100755
index dc5fb6120..000000000
--- a/packages/components/src/forms/css/slider.less
+++ /dev/null
@@ -1,224 +0,0 @@
-.osc-slider() {
-
- /* padding: 30px; */
- position: relative;
- height: 44px;
- cursor: pointer;
-
- /* For debugging */
- /* border: solid 1px green; */
-
- .osc-slider-input-range {
- height: 44px;
- position: absolute;
- margin: 0;
- }
-
- /* Slider track styling in background */
-
- .osc-slider-track-container {
- position: absolute;
- height: 42px;
- left: 0;
- right: 0;
- /* pointer-events: none; */
-
- /* For debugging */
- /* border: solid 1px purple; */
- }
-
- .osc-slider-track-container > div {
- position: absolute;
- }
-
- .osc-slider-track-dot-start {
- width: 22px;
- height: 22px;
- background-color: #004699;
- border-radius: 11px;
- }
-
- .osc-slider-track-dot-end {
- width: 22px;
- height: 22px;
- background-color: white;
- border: solid 2px #004699;
- border-radius: 11px;
- box-sizing: border-box;
- }
-
- .osc-slider-track-dot-center {
- margin: 11px auto 11px auto;
- left: 0;
- right: 0;
- }
-
- .osc-slider-track-dot-left {
- margin: 11px 0 11px 11px;
- left: 0;
- /* top: 0; */
- /* bottom: 0; */
- }
-
- .osc-slider-track-dot-right {
- margin: 11px 11px 11px 0;
- right: 0;
- }
-
- .osc-slider-track {
- height: 2px;
- left: 22px;
- right: 22px;
- /* width: 100%; */
- background-color: #004699;
- margin: 21px 0 21px 0;
- }
-
- .osc-slider-track-progress-container {
- left: 22px;
- right: 22px;
- bottom: 0;
- top: 0;
- }
-
- .osc-slider-track-progress {
- height: 10px;
- width: 50%;
- background-color: #004699;
- margin: 17px 0 17px 0;
- left: 50%;
- position: absolute;
- transform-origin: left;
- }
-
- /* Styling of handle, based on https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */
- .osc-slider-input-range {
- height: 48px;
- padding: 0;
- top: -3px;
- }
-
- .osc-slider-input-range::-ms-fill-lower {
- background: transparent;
- }
-
- .osc-slider-input-range::-ms-fill-upper {
- background: transparent;
- }
-
- input[type=range] {
- -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
- width: 100%; /* Specific width is required for Firefox. */
- background: transparent; /* Otherwise white in Chrome */
- }
-
- input[type=range]:focus {
- outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
- }
-
- input[type=range]::-ms-track {
- width: 100%;
- cursor: pointer;
-
- /* Hides the slider so custom styles can be added */
- background: transparent;
- border-color: transparent;
- color: transparent;
- }
-
- input[type=range]::-webkit-slider-thumb {
- .osc-chevron-left-right-white-background();
- -webkit-appearance: none;
- height: 44px;
- width: 44px;
- background-color: #004699;
- cursor: pointer;
- border-radius: 22px;
- }
-
- input.osc-slider-untouched[type=range]::-webkit-slider-thumb {
- .osc-chevron-left-right-blue-background();
- background-color: white;
- border: solid 2px #004699;
- }
-
- input[type=range]::-moz-range-thumb {
- .osc-chevron-left-right-white-background();
- box-sizing: border-box;
- height: 44px;
- width: 44px;
- background-color: #004699;
- cursor: pointer;
- border-width: 0;
- border-radius: 22px;
- }
-
- input.osc-slider-untouched[type=range]::-moz-range-thumb {
- .osc-chevron-left-right-blue-background();
- background-color: white;
- border: solid 2px #004699;
- border-radius: 22px;
- }
-
- input[type=range]::-ms-thumb {
- .osc-chevron-left-right-white-background();
- height: 44px;
- width: 44px;
- background-color: #004699;
- cursor: pointer;
- border-radius: 22px;
- }
-
- input.osc-slider-untouched[type=range]::-ms-thumb {
- .osc-chevron-left-right-blue-background();
- background-color: white;
- border: solid 2px #004699;
- }
-
- input[type=range]::-webkit-slider-runnable-track {
- cursor: pointer;
- }
-
- input[type=range]::-moz-range-track {
- cursor: pointer;
- }
-
- input[type=range]::-ms-track {
- cursor: pointer;
- }
-
- input[type=range]::-moz-focus-outer {
- border: 0;
- }
-
-
-}
-
-.osc-error {
-
- .osc-slider {
-
- input.osc-slider-untouched[type=range]::-webkit-slider-thumb {
- .osc-chevron-left-right-red-background();
- border: solid 2px #ec0000;
- }
-
- input.osc-slider-untouched[type=range]::-moz-range-thumb {
- .osc-chevron-left-right-red-background();
- border: solid 2px #ec0000;
- }
-
- }
-
- .osc-slider-track-dot-start {
- background-color: #ec0000;
- }
-
- .osc-slider-track-dot-end {
- border: solid 2px #ec0000;
- }
-
- .osc-slider-track {
- background-color: #ec0000;
- }
-}
diff --git a/packages/components/src/forms/css/textarea.less b/packages/components/src/forms/css/textarea.less
deleted file mode 100755
index 3ad5e5d42..000000000
--- a/packages/components/src/forms/css/textarea.less
+++ /dev/null
@@ -1,10 +0,0 @@
-.osc-textarea() {
-
- textarea {
- width: 100%;
- padding: 15px;
- border: 1px solid #767676;
- border-radius: 0;
- }
-
-}
diff --git a/packages/components/src/forms/css/textinput.less b/packages/components/src/forms/css/textinput.less
deleted file mode 100755
index 2e8d5c890..000000000
--- a/packages/components/src/forms/css/textinput.less
+++ /dev/null
@@ -1,17 +0,0 @@
-.osc-textinput() {
-
- input {
- height: 44px;
- padding: 0 20px;
- padding-right: 40px;
- border: solid 1px #767676;
- outline: none;
- font-size: 16px;
- font-weight: 400;
- line-height: 44px;
- text-align: left;
- background-color: white;
- }
-
-}
-
diff --git a/packages/components/src/forms/form.jsx b/packages/components/src/forms/form.jsx
deleted file mode 100755
index 3e2bf3d25..000000000
--- a/packages/components/src/forms/form.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import merge from 'merge';
-import { useState, useEffect, useCallback } from 'react';
-
-import { cva } from "class-variance-authority";
-const formVariants = cva(
- "osc-form-component osc-form",
- {}
-);
-
-const Forms = function(props) {
-
- props = merge.recursive({}, {
- }, props.config, props);
-
- const [ currentUser, currentUserError, currentUserIsLoading ] = datastore.useCurrentUser({ ...props });
-
- return (
-
- FORM
-
- );
-
-}
-
-export default Forms;
diff --git a/packages/components/src/forms/htmlarea.jsx b/packages/components/src/forms/htmlarea.jsx
deleted file mode 100755
index 9de389138..000000000
--- a/packages/components/src/forms/htmlarea.jsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import merge from 'merge';
-import { useState, useRef, useEffect } from 'react';
-
-import './css/htmlarea.less'; // add css to result - TODO: dit moet beter
-
-const HTMLArea = function( props ) {
-
- props = merge.recursive({}, {
- }, props.config, props);
-
- const [currentValue, setCurrentValue] = useState(props.value || props.defaultValue || '');
- const inputRef = useRef(null);
-
- useEffect(() => {
- inputRef.current.innerHTML = currentValue;
- }, []);
-
- function filterHTML(value) {
- value = value.replace(/<(\/?\s*(?:a [^>]+|a|b|i|strong|em|p|div|br|ul|li)\s*\/?)>/g, "[[[$1]]]");
- value = value.replace(/<[^>]+>/g, "");
- value = value.replace(/\[\[\[([^\]]+)\]\]\]/g, "<$1>");
- return value;
- }
-
- function onKeyUp() {
- let value = inputRef.current.innerHTML;
- value = filterHTML(value);
- setCurrentValue(value)
- if (props.onChange) {
- props.onChange({ name: props.name, value });
- }
- }
-
- function executeAction(e, command, args) {
- e.preventDefault()
- e.stopPropagation();
- document.execCommand(command,false,args);
- onKeyUp();
- }
-
- function onFocus(e) {
- if (props.onFocus) {
- props.onFocus(e);
- }
- }
-
- function onBlur(e) {
- if (props.onBlur) {
- props.onBlur(e);
- }
- if (props.onChange) {
- props.onChange({ name: props.name, value: currentValue });
- }
- }
-
- return (
-
-
-
-
-
-
- );
- break;
-
- case 1: // preview selection
- allHTML = (
- <>
-
-
-
-
- );
- break;
-
- case 2: // login
- if (currentUser && currentUser.role && hasRole(currentUser, props.votes.requiredUserRole) ) nextStep();
- allHTML = (
- <>
- Nu moet je inloggen
-
-
-
- executeAction(e, 'bold')}>
- executeAction(e, 'italic')}>
- executeAction(e, 'insertunorderedlist')}>
- executeAction(e, 'createlink', prompt('Lank naar','http://'))}>
- onFocus(e)} onBlur={ e => onBlur(e)} onKeyUp={ e => onKeyUp(e)} ref={inputRef}/>
-
- );
-
-}
-
-export default HTMLArea;
diff --git a/packages/components/src/forms/index.jsx b/packages/components/src/forms/index.jsx
deleted file mode 100755
index e492342f4..000000000
--- a/packages/components/src/forms/index.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import loadWidget from '../lib/load-widget';
-import Form from './form';
-
-import './css/default.less'; // add css to result - TODO: dit moet beter
-
-Form.loadWidget = loadWidget;
-
-export {
- Form as default,
- Form,
-};
diff --git a/packages/components/src/forms/input-with-counter.jsx b/packages/components/src/forms/input-with-counter.jsx
deleted file mode 100755
index 2d70e5dea..000000000
--- a/packages/components/src/forms/input-with-counter.jsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import merge from 'merge';
-import { useState, useRef, useEffect } from 'react';
-import HTMLArea from './htmlarea';
-
-import './css/input-with-counter.less'; // add css to result - TODO: dit moet beter
-
-// TODO: ik denk dat hij met HTML area niet meer werkt omdat de value niet goed wordt doorgegeven
-
-const InputWithCounter = function( props ) {
-
- props = merge.recursive({}, {
- name: 'tekst',
- inputType: 'input',
- minLength: 5,
- maxLength: 1024,
- placeholder: '',
- }, props.config, props);
-
- const [currentValue, setCurrentValue] = useState(props.value || props.defaultValue || '');
- const [focused, setFocused] = useState(props.focused || false);
- const [valid, setIsValid] = useState(true);
- const [showWarning, setShowWarning] = useState(false);
- const inputRef = useRef(null);
-
- function isValid() {
- let state = {};
- state.isValid = true;
- state.warning = null;
- if (currentValue.length < props.minLength) {
-// xxx
- state.warning = `De tekst is te kort`;
- state.isValid = false;
- }
- if (currentValue.length > props.maxLength) {
- state.warning = `De tekst is te lang`;
- state.isValid = false;
- }
- this.setState(state)
- return state.isValid;
- }
-
- function validate() {
- this.setState({ showWarning: true })
- return this.isValid();
- }
-
- function handleOnChange({name, value}) {
- setCurrentValue(value);
- setIsValid(value.length >= props.minLength && value.length <= props.maxLength);
- if (typeof props.onChange == 'function') {
- props.onChange({ name, value });
- }
- }
-
- function onInputFocus() {
- setFocused(true);
- setShowWarning(false);
- }
-
- function onInputBlur() {
- setFocused(false);
- }
-
- let counter = null;
- let warning = null;
- if (focused) {
- if (currentValue.length < props.minLength) {
- counter = (Nog minimaal {props.minLength - currentValue.length} tekens
)
- } else {
- let error = currentValue.length > props.maxLength ? 'osc-form-error' : '';
- counter = (Je hebt nog {props.maxLength - currentValue.length} tekens over.
)
- }
- }
-
- if (showWarning && warning) {
- warning = ( this['form-warning'] = el }>{warning}
)
- }
-
- let inputHTML = null;
- switch(props.inputType) {
-
- case 'htmlarea':
- inputHTML = (
- (self.instance = el)} className="osc-input-with-counter">
-
-
- );
-
-}
-
-export default InputWithCounter;
diff --git a/packages/components/src/index.jsx b/packages/components/src/index.jsx
deleted file mode 100755
index 28b18acb8..000000000
--- a/packages/components/src/index.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from "react";
-
-import About from './about/index.jsx';
-import Button from './button/index.jsx';
-import Comments from './comments/index.jsx';
-import ResourceDetails from './resource-details/index.jsx';
-import ResourcesOverview from './resources-overview/index.jsx';
-import ParticipativeBudgeting from './participative-budgeting/index.jsx';
-import User from './user/index.jsx';
-
-// Lazy zou misschien mooier zijn, maar dan heb je de loadWidget functie niet beschikbaar
-//
-// import { lazy } from 'react';
-//
-// let Button = lazy(() => import('./button/index.jsx'));
-// let User = lazy(() => import('./user/index.jsx'));
-
-export {
- About,
- Button,
- Comments,
- ResourcesOverview,
- ResourceDetails,
- ParticipativeBudgeting,
- User,
-}
-
diff --git a/packages/components/src/lib/has-role.js b/packages/components/src/lib/has-role.js
deleted file mode 100644
index 7fa6d483d..000000000
--- a/packages/components/src/lib/has-role.js
+++ /dev/null
@@ -1,28 +0,0 @@
-const roles = {
- admin: ['admin', 'editor', 'moderator', 'member', 'anonymous', 'all'],
- editor: ['editor', 'moderator', 'member', 'anonymous', 'all'],
- moderator: ['moderator', 'member', 'anonymous', 'all'],
- member: ['member', 'anonymous', 'all'],
- anonymous: ['anonymous', 'all'],
- all: ['all'], // special
- owner: null, // special
-}
-
-module.exports = function hasRole(user, minRoles, ownerId) {
-
- minRoles = minRoles || 'admin'; // admin can do anything
- if (!Array.isArray(minRoles)) minRoles = [minRoles];
-
- let userRole = user && user.role;
-
- let valid = minRoles.find( minRole => {
- return roles[userRole] && roles[userRole].indexOf(minRole) != -1
- });
-
- if (minRoles.includes('owner') && ownerId) {
- valid = valid || ( user.id == ownerId );
- }
-
- return valid;
-
-}
diff --git a/packages/components/src/lib/load-widget.js b/packages/components/src/lib/load-widget.js
deleted file mode 100755
index f791958f2..000000000
--- a/packages/components/src/lib/load-widget.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import { createRoot } from "react-dom/client";
-
-export default function loadWidget(elementId, props) {
-
- const Component = this;
-
- const container = document.getElementById(elementId);
- const root = createRoot(container);
- root.render(
- {inputHTML}
- {counter}
- {warning}
-
- Loading...
- );
-
-}
-
-export {
- Loading as default,
- Loading,
-};
diff --git a/packages/components/src/participative-budgeting/css/default.less b/packages/components/src/participative-budgeting/css/default.less
deleted file mode 100644
index df1b64cc0..000000000
--- a/packages/components/src/participative-budgeting/css/default.less
+++ /dev/null
@@ -1,6 +0,0 @@
-@import (reference) '../../css/default.less';
-@import '../../css/error.less';
-@import 'participative-budgeting';
-
-@phone: ~'only screen and (max-width: 700px)';
-
diff --git a/packages/components/src/participative-budgeting/css/participative-budgeting.less b/packages/components/src/participative-budgeting/css/participative-budgeting.less
deleted file mode 100644
index 1567b8d1b..000000000
--- a/packages/components/src/participative-budgeting/css/participative-budgeting.less
+++ /dev/null
@@ -1,2 +0,0 @@
-.osc-participative-budgeting {
-}
diff --git a/packages/components/src/participative-budgeting/index.jsx b/packages/components/src/participative-budgeting/index.jsx
deleted file mode 100644
index ab4801803..000000000
--- a/packages/components/src/participative-budgeting/index.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import loadWidget from '../lib/load-widget';
-import ParticipativeBudgeting from './participative-budgeting';
-
-import './css/default.less'; // add css to result - TODO: dit moet beter
-
-ParticipativeBudgeting.loadWidget = loadWidget;
-
-export {
- ParticipativeBudgeting as default,
- ParticipativeBudgeting,
-};
diff --git a/packages/components/src/participative-budgeting/participative-budgeting.jsx b/packages/components/src/participative-budgeting/participative-budgeting.jsx
deleted file mode 100644
index fd31b65d6..000000000
--- a/packages/components/src/participative-budgeting/participative-budgeting.jsx
+++ /dev/null
@@ -1,185 +0,0 @@
-import merge from 'merge';
-import { useState, useEffect, useCallback } from 'react';
-import hasRole from '../lib/has-role';
-import DataStore from '../data-store';
-import SessionStorage from '../lib/session-storage.js';
-import Button from '../button';
-import LoginButton from '../user/login-button';
-import VoteSelection from '../voting/vote-selection';
-import ResourcesOverview from '../resources-overview';
-import ErrorComponent from '../error';
-
-import { cva } from "class-variance-authority";
-const commentVariants = cva(
- "",
- {
- variants: {
- },
- }
-);
-
-const ParticipativeBudgeting = function(props) {
-
- props = merge.recursive({}, {
- title: 'Participative Budgeting',
- }, props.config, props);
-
- const datastore = new DataStore(props);
- const session = new SessionStorage(props);
-
- const [ currentUser, currentUserError, currentUserIsLoading ] = datastore.useCurrentUser({ ...props });
- const [ userVote, userVoteError, userVoteIsLoading ] = datastore.useUserVote({ ...props });
- const [ isBusy, setIsBusy ] = useState(false)
- const [ selection, setSelection ] = useState([]);
- const [ step, setStep ] = useState(0);
- const [ voteResult, setVoteResult ] = useState({});
-
- useEffect(() => {
- setSelection(session.get('osc-voting-selection') || []);
- setStep(session.get('osc-voting-step') || 0);
- }, []);
-
- function addToSelection(e, resource) {
- let result = [...selection];
- result.push(resource)
- setSelection(result);
- session.set('osc-voting-selection', result);
- }
-
- function removeFromSelection(e, resource) {
- let index = selection.findIndex(elem => elem.id == resource.id);
- if (index != -1) {
- let result = [...selection]
- result.splice(index, 1)
- setSelection(result);
- session.set('osc-voting-selection', result);
- }
- }
-
- function toggleSelection(e, resource) {
- let index = selection.findIndex(elem => elem.id == resource.id);
- if (index == -1) {
- addToSelection(e, resource);
- } else {
- removeFromSelection(e, resource);
- }
- }
-
- function gotoStep(targetStep) {
- setStep(targetStep);
- session.set('osc-voting-step', targetStep);
- }
-
- function nextStep() {
- if (step <= 4) gotoStep(step + 1);
- }
-
- function previousStep() {
- if (step > 0) gotoStep(step - 1);
- }
-
- async function doVote(e, value) {
-
- console.log('DOVOTE');
-
- if (e) e.stopPropagation();
-
- if (isBusy) return;
- setIsBusy(true);
-
- if (!props.votes.isActive) {
- return;
- }
-
- if (!currentUser || !currentUser.role || !hasRole(currentUser, props.votes.requiredUserRole) ) {
- // how did you get here
- let error = new Error('Deze gebruiker kan niet stemmen');
- let event = new window.CustomEvent('osc-error', { detail: error });
- document.dispatchEvent(event);
- }
-
- let result = await userVote.submitVote(selection);
-
- setVoteResult(voteResult);
- nextStep();
-
- setIsBusy(false);
-
- }
-
- function reset() {
- setStep(0);
- session.remove('osc-voting-step');
- setSelection([]);
- session.remove('osc-voting-selection');
- }
-
- let allHTML = null;
-
- switch (step) {
- case 0: // select resources
- allHTML = (
- <>
- { props.title } - stap {step + 1}
: null; - - return ( -
-
- );
-
-}
-
-export default ParticipativeBudgeting;
diff --git a/packages/components/src/resource-details/css/default.less b/packages/components/src/resource-details/css/default.less
deleted file mode 100644
index 44aa2ecb3..000000000
--- a/packages/components/src/resource-details/css/default.less
+++ /dev/null
@@ -1,6 +0,0 @@
-@import (reference) '../../css/default.less';
-@import '../../css/error.less';
-@import 'resource-details';
-
-@phone: ~'only screen and (max-width: 700px)';
-
diff --git a/packages/components/src/resource-details/css/resource-details.less b/packages/components/src/resource-details/css/resource-details.less
deleted file mode 100644
index 4d2d6de26..000000000
--- a/packages/components/src/resource-details/css/resource-details.less
+++ /dev/null
@@ -1,2 +0,0 @@
-.osc-resource-details {
-}
diff --git a/packages/components/src/resource-details/index.jsx b/packages/components/src/resource-details/index.jsx
deleted file mode 100644
index 2591a1814..000000000
--- a/packages/components/src/resource-details/index.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import loadWidget from '../lib/load-widget';
-import ResourceDetails from './resource-details';
-
-import './css/default.less'; // add css to result - TODO: dit moet beter
-
-ResourceDetails.loadWidget = loadWidget;
-
-export {
- ResourceDetails as default,
- ResourceDetails,
-};
diff --git a/packages/components/src/resource-details/like-buttons.jsx b/packages/components/src/resource-details/like-buttons.jsx
deleted file mode 100644
index cc748ae13..000000000
--- a/packages/components/src/resource-details/like-buttons.jsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import merge from 'merge';
-import { useState, useEffect, useCallback } from 'react';
-import SessionStorage from '../lib/session-storage.js';
-import DataStore from '../data-store';
-import Button from '../button';
-import Error from '../error';
-
-// TODO: op verzoek van Daan; gaan we dat gebruiken?
-// TODO: dit moet, sort of, passen op NLDS
-import { cva } from "class-variance-authority";
-const commentVariants = cva(
- "osc-likebuttons-component osc-likebuttons inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
- {
- variants: {
- variant: {
- default: "bg-primary text-primary-foreground hover:bg-primary/90",
- destructive:
- "bg-destructive text-destructive-foreground hover:bg-destructive/90",
- outline:
- "border border-input hover:bg-accent hover:text-accent-foreground",
- secondary:
- "bg-secondary text-secondary-foreground hover:bg-secondary/80",
- ghost: "hover:bg-accent hover:text-accent-foreground",
- icon: "w-10 hover:bg-foreground/10",
- link: "underline-offset-4 hover:underline text-primary",
- },
- size: {
- default: "h-12 py-4 px-4",
- sm: "h-10 px-2",
- lg: "h-14 px-8",
- },
- },
- defaultVariants: {
- variant: "default",
- size: "default",
- },
- }
-);
-
-const LikeButtons = function(props) {
-
- props = merge.recursive({}, {
- resource: {},
- votes: {
- isActive: false,
- requiredUserRole: 'member',
- voteType: 'likes',
- voteValues: [
- {
- label: 'Like',
- value: 'yes'
- }
- ]
- },
- }, props.config, props);
-
- console.log(props);
-
- const datastore = new DataStore(props);
- const session = new SessionStorage(props);
-
- const [ currentUser, currentUserError, currentUserIsLoading ] = datastore.useCurrentUser({ ...props });
- const [ isBusy, setIsBusy ] = useState(false)
-
- useEffect(() => {
- let pending = session.get('osc-resource-vote-pending');
- console.log('PENDING', pending, props.resource.id, pending && pending[props.resource.id])
- if (pending && pending[props.resource.id]) {
- if (currentUser && currentUser.role) {
- doVote(null, pending[props.resource.id])
- session.remove('osc-resource-vote-pending');
- }
- }
- }, [props.resource, currentUser]);
-
- async function doVote(e, value) {
-
- console.log('VOTE', value);
-
- if (e) e.stopPropagation();
-
- if (isBusy) return;
- setIsBusy(true);
-
- // if (!props.votes.isActive) return;
-
- console.log('currentUser', currentUser);
- if (!currentUser.role) {
- // login
- session.set('osc-resource-vote-pending', { [props.resource.id]: value });
- return document.location.href = props.loginUrl;
- }
-
- let change = {};
- if (props.resource.userVote) change[props.resource.userVote.opinion] = -1;
-
- await props.resource.submitLike({
- opinion: value
- })
-
- setIsBusy(false);
-
- }
-
- let className = 'osc-numberplate-button';
- if (!props.votes.isActive) className += ' osc-inactive';
-
- let buttonsHTML = [];
- for (let value of props.votes.voteValues) {
- let isBusy = false;
- let VoteButton = (
-
- );
- buttonsHTML.push(VoteButton);
- }
-
- return (
-
- {buttonsHTML}
-
- );
-
-}
-
-export default LikeButtons;
diff --git a/packages/components/src/resource-details/resource-details.jsx b/packages/components/src/resource-details/resource-details.jsx
deleted file mode 100644
index 725fdf64b..000000000
--- a/packages/components/src/resource-details/resource-details.jsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import merge from 'merge';
-import { useState, useEffect, useCallback } from 'react';
-import DataStore from '../data-store';
-import LikeButtons from '../voting/like-buttons';
-import Error from '../error';
-
-// TODO: op verzoek van Daan; gaan we dat gebruiken?
-// TODO: dit moet, sort of, passen op NLDS
-import { cva } from "class-variance-authority";
-const commentVariants = cva(
- "osc-resourceDetails-component osc-resourceDetails inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
- {
- variants: {
- variant: {
- default: "bg-primary text-primary-foreground hover:bg-primary/90",
- destructive:
- "bg-destructive text-destructive-foreground hover:bg-destructive/90",
- outline:
- "border border-input hover:bg-accent hover:text-accent-foreground",
- secondary:
- "bg-secondary text-secondary-foreground hover:bg-secondary/80",
- ghost: "hover:bg-accent hover:text-accent-foreground",
- icon: "w-10 hover:bg-foreground/10",
- link: "underline-offset-4 hover:underline text-primary",
- },
- size: {
- default: "h-12 py-4 px-4",
- sm: "h-10 px-2",
- lg: "h-14 px-8",
- },
- },
- defaultVariants: {
- variant: "default",
- size: "default",
- },
- }
-);
-
-const ResourceDetails = function(props) {
-
- props = merge.recursive({}, {
- title: 'Resource details',
- }, props.config, props);
-
- const datastore = new DataStore(props);
-
- const [ currentUser, currentUserError, currentUserIsLoading ] = datastore.useCurrentUser({ ...props });
- const [ resource, resourceError, resourceIsLoading ] = datastore.useResource({ ...props });
-
- let resourceHTML = null;
- if (resource) {
- resourceHTML = (
- <>
- {resource.title}
-- Images: {JSON.stringify(resource.images, null, 2)} -
-- Summary: {resource.summary} -
-- Description: {resource.description} -
- - ); - } else{ - if (resourceIsLoading) { // TODO: i18n - resourceHTML =Loading...
- } else {
- resourceHTML = {props.emptyListText}
- }
- }
-
- return (
-
-
-
- );
-
-}
-
-export default ResourceDetails;
diff --git a/packages/components/src/resources-filter/css/default.less b/packages/components/src/resources-filter/css/default.less
deleted file mode 100644
index 2cbe62b24..000000000
--- a/packages/components/src/resources-filter/css/default.less
+++ /dev/null
@@ -1,6 +0,0 @@
-@import (reference) '../../css/default.less';
-@import '../../css/error.less';
-@import 'resources-filter';
-
-@phone: ~'only screen and (max-width: 700px)';
-
diff --git a/packages/components/src/resources-filter/css/resources-filter.less b/packages/components/src/resources-filter/css/resources-filter.less
deleted file mode 100644
index 017061641..000000000
--- a/packages/components/src/resources-filter/css/resources-filter.less
+++ /dev/null
@@ -1,2 +0,0 @@
-.osc-resources-filter {
-}
diff --git a/packages/components/src/resources-filter/index.jsx b/packages/components/src/resources-filter/index.jsx
deleted file mode 100644
index c2da8dc26..000000000
--- a/packages/components/src/resources-filter/index.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import loadWidget from '../lib/load-widget';
-import ResourcesFilter from './resources-filter';
-
-import './css/default.less'; // add css to result - TODO: dit moet beter
-
-ResourcesFilter.loadWidget = loadWidget;
-
-export {
- ResourcesFilter as default,
- ResourcesFilter,
-};
diff --git a/packages/components/src/resources-filter/resources-filter.jsx b/packages/components/src/resources-filter/resources-filter.jsx
deleted file mode 100644
index 59eb06f04..000000000
--- a/packages/components/src/resources-filter/resources-filter.jsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import merge from 'merge';
-import { useState, useEffect, useCallback } from 'react';
-import DataStore from '../data-store';
-import hasRole from '../lib/user-has-role';
-
-// TODO: op verzoek van Daan; gaan we dat gebruiken?
-// TODO: dit moet, sort of, passen op NLDS
-import { cva } from "class-variance-authority";
-const commentVariants = cva(
- "osc-resourcesFilter-component osc-resourcesFilter inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
- {
- variants: {
- variant: {
- default: "bg-primary text-primary-foreground hover:bg-primary/90",
- destructive:
- "bg-destructive text-destructive-foreground hover:bg-destructive/90",
- outline:
- "border border-input hover:bg-accent hover:text-accent-foreground",
- secondary:
- "bg-secondary text-secondary-foreground hover:bg-secondary/80",
- ghost: "hover:bg-accent hover:text-accent-foreground",
- icon: "w-10 hover:bg-foreground/10",
- link: "underline-offset-4 hover:underline text-primary",
- },
- size: {
- default: "h-12 py-4 px-4",
- sm: "h-10 px-2",
- lg: "h-14 px-8",
- },
- },
- defaultVariants: {
- variant: "default",
- size: "default",
- },
- }
-);
-
-const ResourcesFilter = function(props) {
-
- props = merge.recursive({}, {
- title: 'Resources filter',
- search: true,
- tagTypes: [ 'theme', 'area' ],
- onUpdateFilter: filter => console.log(filter),
- }, props.config, props);
-
- const datastore = new DataStore(props);
-
- let defaultFilter = { tags: {}, search: { text: '' } };
- props.tagTypes.forEach(tagType => {
- defaultFilter.tags[tagType] = null;
- });
-
- const [filter, setFilter] = useState(defaultFilter);
- function updateFilter(newFilter) {
- setFilter(newFilter);
- props.onUpdateFilter(newFilter);
- }
-
- function setTag(type, value) {
- let newFilter = {
- ...filter,
- tags: {
- ...filter.tags,
- [type]: filter.tags[type] == value ? null : value,
- }
- };
- updateFilter(newFilter);
- }
-
- function setSearch(value) {
- let newFilter = {
- ...filter,
- search: {
- text: value,
- }
- };
- updateFilter(newFilter);
- }
-
- let tagsByType = [];
- for (let tagType of props.tagTypes) {
- const [ tags, tagsError, tagsIsLoading ] = datastore.useTags({ ...props, type: tagType });
- tagsByType[tagType] = { tags, tagsError, tagsIsLoading };
- }
-
- let errorHTML = null;
- let error = null; // todo: samenvoegen uit lijst
- if (error) {
- console.log(error);
- errorHTML = {error.message}
- }
-
- let tagsHTML = [];
- for (let tagType of props.tagTypes) {
- let tagHTML = null;
- if (tagsByType[tagType].tags.length) {
- tagHTML = (
-
-
- );
- } else{
- if (tagsByType[tagType].tagsIsLoading) { // TODO: i18n
- tagHTML = {tagType.charAt(0).toUpperCase() + tagType.slice(1)}
- { tagsByType[tagType].tags.map( ( tag, index ) => { - return ( - setTag(tagType, tag.id) } key={`osc-tag-${ tagType }-${ index }`}>
-
- {tag.name}
-
- );
- })
- }
- Loading...
- }
- }
- if (tagHTML) {
- tagsHTML.push(tagHTML);
- }
- }
-
- let searchHTML = [];
- if (props.search) {
- searchHTML =
-
- setSearch(e.target.value) } value={filter.search.text}/>
-
- }
-
- return (
-
- {errorHTML}
- {searchHTML}
- {tagsHTML}
-
- );
-
-}
-
-export default ResourcesFilter;
diff --git a/packages/components/src/resources-overview/css/default.less b/packages/components/src/resources-overview/css/default.less
deleted file mode 100644
index 551350fcf..000000000
--- a/packages/components/src/resources-overview/css/default.less
+++ /dev/null
@@ -1,6 +0,0 @@
-@import (reference) '../../css/default.less';
-@import '../../css/error.less';
-@import 'resources-overview';
-
-@phone: ~'only screen and (max-width: 700px)';
-
diff --git a/packages/components/src/resources-overview/css/resources-overview.less b/packages/components/src/resources-overview/css/resources-overview.less
deleted file mode 100644
index 7d44f80bc..000000000
--- a/packages/components/src/resources-overview/css/resources-overview.less
+++ /dev/null
@@ -1,2 +0,0 @@
-.osc-resources-overview {
-}
diff --git a/packages/components/src/resources-overview/index.jsx b/packages/components/src/resources-overview/index.jsx
deleted file mode 100644
index 24bd28350..000000000
--- a/packages/components/src/resources-overview/index.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import loadWidget from '../lib/load-widget';
-import ResourcesOverview from './resources-overview';
-
-import './css/default.less'; // add css to result - TODO: dit moet beter
-
-ResourcesOverview.loadWidget = loadWidget;
-
-export {
- ResourcesOverview as default,
- ResourcesOverview,
-};
diff --git a/packages/components/src/resources-overview/resources-overview.jsx b/packages/components/src/resources-overview/resources-overview.jsx
deleted file mode 100644
index c6a82a56b..000000000
--- a/packages/components/src/resources-overview/resources-overview.jsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import merge from 'merge';
-import { useState, useEffect, useCallback } from 'react';
-import DataStore from '../data-store';
-import ResourcesFilter from '../resources-filter';
-
-// TODO: op verzoek van Daan; gaan we dat gebruiken?
-// TODO: dit moet, sort of, passen op NLDS
-import { cva } from "class-variance-authority";
-const commentVariants = cva(
- "osc-resourcesOverview-component osc-resourcesOverview inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
- {
- variants: {
- variant: {
- default: "bg-primary text-primary-foreground hover:bg-primary/90",
- destructive:
- "bg-destructive text-destructive-foreground hover:bg-destructive/90",
- outline:
- "border border-input hover:bg-accent hover:text-accent-foreground",
- secondary:
- "bg-secondary text-secondary-foreground hover:bg-secondary/80",
- ghost: "hover:bg-accent hover:text-accent-foreground",
- icon: "w-10 hover:bg-foreground/10",
- link: "underline-offset-4 hover:underline text-primary",
- },
- size: {
- default: "h-12 py-4 px-4",
- sm: "h-10 px-2",
- lg: "h-14 px-8",
- },
- },
- defaultVariants: {
- variant: "default",
- size: "default",
- },
- }
-);
-
-const ResourcesOverview = function(props) {
-
- props = merge.recursive({}, {
- title: 'Resources overview',
- onResourceClick: onResourceClick,
- }, props.config, props);
-
- const datastore = new DataStore(props);
-
- const [ currentUser, currentUserError, currentUserIsLoading ] = datastore.useCurrentUser({ ...props });
- const [ tags, tagsError, tagsIsLoading ] = datastore.useTags({ ...props });
- const [ resources, resourcesError, resourcesIsLoading ] = datastore.useResources({ ...props });
-
- function onResourceClick(e, resource) {
- console.log('ONRESOURCECLICK', resource.id);
- }
-
- let titleHTML = props.title ? { props.title }
: null; - - // TODO: errors moeten nog - let errorHTML = null; - // let error = submitError || resourcesOverviewError; - // if (error) { - // console.log(error); - // errorHTML ={error.message}
- // }
-
- let resourcesHTML = null;
- if (resources.length) {
- resourcesHTML = (
- <>
- { resources.map( ( resource, index ) => {
- return (
- props.onResourceClick(e, resource)} key={`osc-resource-${ index }`}>
- {resource.title} ({ resource.tags && resource.tags.map( ( tag, jndex ) => tag.name).join(', ') })
-
- );
- })
- }
-
- );
- } else{
- if (resourcesIsLoading) { // TODO: i18n
- resourcesHTML = Loading...
- } else {
- resourcesHTML = {props.emptyListText}
- }
- }
-
- return (
-
- {titleHTML}
- {errorHTML}
-
-
- );
-
-}
-
-export default ResourcesOverview;
diff --git a/packages/components/src/user/css/default.less b/packages/components/src/user/css/default.less
deleted file mode 100755
index 43dafb2d6..000000000
--- a/packages/components/src/user/css/default.less
+++ /dev/null
@@ -1,6 +0,0 @@
-//@import (reference) '../../component/css/default.less';
-@import 'user';
-
-* {
- box-sizing: border-box;
-}
diff --git a/packages/components/src/user/css/user.less b/packages/components/src/user/css/user.less
deleted file mode 100755
index 9afdbb426..000000000
--- a/packages/components/src/user/css/user.less
+++ /dev/null
@@ -1,7 +0,0 @@
-.osc-user {
-
- h3 {
- padding: 0;
- }
-
-}
diff --git a/packages/components/src/user/index.jsx b/packages/components/src/user/index.jsx
deleted file mode 100755
index 8a8e11aac..000000000
--- a/packages/components/src/user/index.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import loadWidget from '../lib/load-widget';
-import User from './user';
-
-import './css/default.less'; // add css to result - TODO: dit moet beter
-
-User.loadWidget = loadWidget;
-
-export {
- User as default,
- User,
-};
diff --git a/packages/components/src/user/login-button.jsx b/packages/components/src/user/login-button.jsx
deleted file mode 100644
index acb4add19..000000000
--- a/packages/components/src/user/login-button.jsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import merge from 'merge';
-import { useState, useEffect, useCallback } from 'react';
-import Button from '../button';
-
-const LoginButton = function( props ) {
-
- props = merge.recursive({}, {
- currentUser: {},
- label: 'Login',
- }, props.config, props.config?.login, props.login, props);
-
- function doLogin(e) {
- if (e) e.stopPropagation();
- return document.location.href = props.url;
- }
-
- let label = props.label;
- label.replace(/[[username]]/, props.currentUser.displayName || '');
-
- return (
-
- );
-
-}
-
-export {
- LoginButton as default,
- LoginButton,
-};
diff --git a/packages/components/src/user/logout-button.jsx b/packages/components/src/user/logout-button.jsx
deleted file mode 100644
index fb1bf18ce..000000000
--- a/packages/components/src/user/logout-button.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import merge from 'merge';
-import { useState, useEffect, useCallback } from 'react';
-import Button from '../button';
-
-const LogoutButton = function( props ) {
-
- props = merge.recursive({}, {
- currentUser: {},
- label: 'Logout',
- }, props.config, props.config?.logout, props.logout, props);
-
- function doLogout(e) {
- if (e) e.stopPropagation();
-
- // delete sessionData[projectId]
- // window.sessionStorage.setItem('openstad', JSON.stringify(sessionData))
-
- return document.location.href = props.url;
- }
-
- let label = props.label;
- label.replace(/[[username]]/, props.currentUser.displayName || '');
-
- return (
-
- );
-
-}
-
-export {
- LogoutButton as default,
- LogoutButton,
-};
diff --git a/packages/components/src/user/user.jsx b/packages/components/src/user/user.jsx
deleted file mode 100644
index 4ee626d28..000000000
--- a/packages/components/src/user/user.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import merge from 'merge';
-import { useState, useEffect, useCallback } from 'react';
-import DataStore from '../data-store';
-import Loading from '../loading';
-import LoginButton from './login-button';
-import LogoutButton from './logout-button';
-
-const User = function( props ) {
-
- // dit zou denk ik een profile knop of zo moeten worden
- // voor nu is het: toon een login button als er geen user is,
- // en anders een logout button plus een json dump van de user
-
- props = merge.recursive({}, {
- loginLabel: 'Login',
- logoutLabel: 'Logout',
- }, props.config, props);
-
- const datastore = new DataStore(props);
-
- const [ currentUser, currentUserError, currentUserIsLoading ] = datastore.useCurrentUser({ ...props });
-
- let titleHTML = null;
- if (currentUser && currentUser.id) {
- titleHTML = Resources
- {resourcesHTML} -User
- } - - let userHTML = currentUserIsLoading ?
- {JSON.stringify(currentUser, null, 2)}
-
- );
- }
-
- let buttonHTML = null;
- if (currentUser && currentUser.id) {
- buttonHTML =
- {buttonHTML}
- {titleHTML}
- {userHTML}
-
- );
-
-}
-
-export {
- User as default,
- User,
-};
diff --git a/packages/components/src/voting/like-buttons.jsx b/packages/components/src/voting/like-buttons.jsx
deleted file mode 100644
index f0fd696d9..000000000
--- a/packages/components/src/voting/like-buttons.jsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import merge from 'merge';
-import { useState, useEffect, useCallback } from 'react';
-import SessionStorage from '../lib/session-storage.js';
-import hasRole from '../lib/has-role';
-import DataStore from '../data-store';
-import Button from '../button';
-import Error from '../error';
-
-// TODO: op verzoek van Daan; gaan we dat gebruiken?
-// TODO: dit moet, sort of, passen op NLDS
-import { cva } from "class-variance-authority";
-const commentVariants = cva(
- "osc-likebuttons-component osc-likebuttons inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
- {
- variants: {
- variant: {
- default: "bg-primary text-primary-foreground hover:bg-primary/90",
- destructive:
- "bg-destructive text-destructive-foreground hover:bg-destructive/90",
- outline:
- "border border-input hover:bg-accent hover:text-accent-foreground",
- secondary:
- "bg-secondary text-secondary-foreground hover:bg-secondary/80",
- ghost: "hover:bg-accent hover:text-accent-foreground",
- icon: "w-10 hover:bg-foreground/10",
- link: "underline-offset-4 hover:underline text-primary",
- },
- size: {
- default: "h-12 py-4 px-4",
- sm: "h-10 px-2",
- lg: "h-14 px-8",
- },
- },
- defaultVariants: {
- variant: "default",
- size: "default",
- },
- }
-);
-
-const LikeButtons = function(props) {
-
- props = merge.recursive({}, {
- resource: {},
- votes: {
- isActive: false,
- requiredUserRole: 'member',
- voteType: 'likes',
- voteValues: [
- {
- label: 'Like',
- value: 'yes'
- }
- ]
- },
- }, props.config, props);
-
- const datastore = new DataStore(props);
- const session = new SessionStorage(props);
-
- const [ currentUser, currentUserError, currentUserIsLoading ] = datastore.useCurrentUser({ ...props });
- const [ isBusy, setIsBusy ] = useState(false)
-
- useEffect(() => {
- let pending = session.get('osc-resource-vote-pending');
- if (pending && pending[props.resource.id]) {
- if (currentUser && currentUser.role) {
- doVote(null, pending[props.resource.id])
- session.remove('osc-resource-vote-pending');
- }
- }
- }, [props.resource, currentUser]);
-
- async function doVote(e, value) {
-
- if (e) e.stopPropagation();
-
- if (isBusy) return;
- setIsBusy(true);
-
- if (!props.votes.isActive) {
- return;
- }
-
- if (!currentUser.role || !hasRole(currentUser, props.votes.requiredUserRole) ) {
- // login
- session.set('osc-resource-vote-pending', { [props.resource.id]: value });
- return document.location.href = props.login.url;
- }
-
- let change = {};
- if (props.resource.userVote) change[props.resource.userVote.opinion] = -1;
-
- await props.resource.submitLike({
- opinion: value
- })
-
- setIsBusy(false);
-
- }
-
- let className = 'osc-numberplate-button';
- if (!props.votes.isActive) className += ' osc-inactive';
-
- let buttonsHTML = [];
- for (let value of props.votes.voteValues) {
- let isBusy = false;
- let VoteButton = (
-
- );
- buttonsHTML.push(VoteButton);
- }
-
- return (
-
- {buttonsHTML}
-
- );
-
-}
-
-export default LikeButtons;
diff --git a/packages/components/src/voting/vote-selection.jsx b/packages/components/src/voting/vote-selection.jsx
deleted file mode 100644
index 226b6d141..000000000
--- a/packages/components/src/voting/vote-selection.jsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import merge from 'merge';
-import { useState, useEffect, useCallback } from 'react';
-import SessionStorage from '../lib/session-storage.js';
-import hasRole from '../lib/has-role';
-import DataStore from '../data-store';
-import Button from '../button';
-import Error from '../error';
-
-import { cva } from "class-variance-authority";
-const commentVariants = cva(
- "",
- {
- variants: {
- variant: {
- },
- size: {
- },
- },
- defaultVariants: {
- },
- }
-);
-
-const VoteSelection = function(props) {
-
- props = merge.recursive({}, {
- selection: [],
- votes: {
- isActive: false,
- requiredUserRole: 'member',
- voteType: 'likes',
- voteValues: [
- {
- label: 'Like',
- value: 'yes'
- }
- ]
- },
- }, props.config, props);
-
- const datastore = new DataStore(props);
- const session = new SessionStorage(props);
-
- let selectionHTML = (
- <>
- {props.selection.map((resource, index) => {
- return (
- - {resource.title} -
); - })} - - ) - - return ( -
-
- );
-
-}
-
-export default VoteSelection;
diff --git a/packages/components/webpack.config.js b/packages/components/webpack.config.js
deleted file mode 100755
index f88505fff..000000000
--- a/packages/components/webpack.config.js
+++ /dev/null
@@ -1,205 +0,0 @@
-const webpack = require('webpack');
-const path = require("path");
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
-
-module.exports = {
-
- mode: 'production',
-
- entry: {
-
- 'all': {
- import: './src/index.jsx',
- filename: 'index.js',
- library: {
- name: 'OS20',
- type: 'assign-properties',
- },
- },
-
- 'about': {
- import: './src/about/index.jsx',
- filename: 'about.js',
- library: {
- name: 'OS20',
- type: 'assign-properties',
- },
- },
-
- 'button': {
- import: './src/button/index.jsx',
- filename: 'button.js',
- library: {
- name: 'OS20',
- type: 'assign-properties',
- },
- },
-
- 'forms': {
- import: './src/forms/index.jsx',
- filename: 'forms.js',
- library: {
- name: 'OS20',
- type: 'assign-properties',
- },
- },
-
- 'comments': {
- import: './src/comments/index.jsx',
- filename: 'comments.js',
- library: {
- name: 'OS20',
- type: 'assign-properties',
- },
- },
-
- 'resource-details': {
- import: './src/resource-details/index.jsx',
- filename: 'resource-details.js',
- library: {
- name: 'OS20',
- type: 'assign-properties',
- },
- },
-
- 'resources-filter': {
- import: './src/resources-filter/index.jsx',
- filename: 'resources-filter.js',
- library: {
- name: 'OS20',
- type: 'assign-properties',
- },
- },
-
- 'resources-overview': {
- import: './src/resources-overview/index.jsx',
- filename: 'resources-overview.js',
- library: {
- name: 'OS20',
- type: 'assign-properties',
- },
- },
-
- 'participative-budgeting': {
- import: './src/participative-budgeting/index.jsx',
- filename: 'participative-budgeting.js',
- library: {
- name: 'OS20',
- type: 'assign-properties',
- },
- },
-
- 'user': {
- import: './src/user/index.jsx',
- filename: 'user.js',
- library: {
- name: 'OS20',
- type: 'assign-properties',
- },
- },
-
- },
-
- output: {
- devtoolNamespace: 'mycomponents',
- path: path.resolve(__dirname + '/dist'),
- filename: '[name].js',
- library: ['OpenStad', '[name]'],
- libraryTarget: 'window',
- },
-
- externals: {
- 'react': 'React',
- 'react-dom': 'ReactDOM',
- },
-
- devtool: false,
-
- plugins: [
- new webpack.SourceMapDevToolPlugin({
- filename: '[file].map',
- }),
- new MiniCssExtractPlugin({
- filename: 'css/[name].css',
- ignoreOrder: false,
- }),
-// new webpack.ProvidePlugin({
-// Promise: 'es6-promise-promise',
-// }),
- ],
-
- optimization: {
- minimize: true,
- minimizer: [new TerserPlugin()],
- },
-
- resolve: {
- extensions: [".*", ".js", ".jsx", ".css", ".less"],
- },
-
- module: {
- rules: [
-
- // js and react
- {
- test: /\.(js|jsx)$/,
- exclude: /node_modules/,
- use: ["babel-loader"],
- },
-
- {
- test: /\.less$/,
- use: [
- {
- loader: MiniCssExtractPlugin.loader,
- options: {
-// hmr: process.env.NODE_ENV === 'development',
- },
- },
- 'css-loader',
- 'less-loader',
- ],
- },
-
- {
- test: /\.css$/,
- use: [
- {
- loader: MiniCssExtractPlugin.loader,
- options: {
- publicPath: '../'
- }
- },
- 'css-loader',
- {
- loader: 'postcss-loader',
- options: {
- postcssOptions: {
- plugins: [
- [
- 'postcss-preset-env',
- {
- // Options
- },
- ],
- ],
- },
- },
- },
- ]
- },
-
- { // other images
- test: /\.(png|jpe?g|gif|svg)$/i,
- type: 'asset/resource',
- generator: {
- filename: 'images/[name].[ext]'
-
- },
- },
-
- ],
- },
-
-};