simple-widgets
A Collection of components to make your React code simpler.
Supports React 17.02 and React 18.x
From Synk Reports:
H - word-wrap Regular Expression Denial of Service (ReDoS) Vulnerability
CWE-1333
CVE-2023-26115
CVSS 7.5 HIGH
SNYK-JS-WORDWRAP-3149973
Introduced through: pdfmake@0.2.7
Exploit maturity: PROOF OF CONCEPT
Introduced through: simple-widgets@1.35.4 › pdfmake@0.2.7 › @foliojs-fork/linebreak@1.1.1 › brfs@2.0.2 › static-module@3.0.4 › escodegen@1.14.3 › optionator@0.8.3 › word-wrap@1.2.3
Fix: No remediation path available.
Breaking Changes:
-
2023-06-05 Simple-Widgets version 1.35.0 <Form> and <FormFields> now calls the App supplied formDictionary() passing a string
instead of the previous argument {formName: string}. Below is the code change needed to be compatable with previous versions of simple-widgets. Moving forward, the App supplied formDictionary() can expest a single string.
setAppSpecificInfo({dbStruct, formDictionary, namedQueries})
const formDictionary = (search) => {
const formName = (typeof search === 'object') ? search.formName : formName
Why the breaking change?
Origial idea was the ability to search by different elements in each entry in the dictionary (gqlName, db table name, etc.) This was before introducing the concept of named forms (to support forms refereenced within other forms, records and child records).
Since forms are uniquely named and the primary form name is provided to <Form> and <FormFields> this change cleans up the design.
-
2021-09-01 DatePicker, DatePickerStyle, UnstyledDatePicker are now obsolete please used DateInput instead (same React props)
-
last version (1.11.3) of simple-widgets to have DatePicker, DatePickerStyle, UnstyledDatePicker npm install --save simple-widgets@1.11.3
Planned removal:
- dropping makeChangeHandler from library (It assumes React Component style 'this', not React components using React Hooks)
Kept back
These are kept back because we are still holding compatability with react 17.0.2 and react-dom 17.0.2
@testing-library/dom 8.19.0 → 9.3.1
@testing-library/react 12.1.5 → 14.0.0
react-test-renderer ^17.0.0 → ^18.2.0
Installation
Using npm:
npm install --save simple-widgets
or yarn:
yarn add simple-widgets
Dependencies not bundled with Simple Widgets
In order to use simple-widgets, these dependencies need to be added in the home directory of your project.
npm i @apollo/client @types/react axios deep-object-diff graphql-tag object-sizeof react react-dom --save
How to test the library locally (before publishing to npm)
cd ~/projects/simple-widgets
npm run build
npm pack
cd ~/projects/testProject
npm install ~/projects/simple-widgets/simple-widgets-1.33.11.tgz
Input Components
CheckBox, Choice, ChoiceText, List, Radio, DatePicker, DoubleListBox
Some of the basic HTML input field types reqire different functions to handle changes.
This collection of inputs is built on top of those to give a simpler standard interface.
All of these widgets require the following props:
- name: A unique name for this field with corresponding name in the parent compoent's state example name="subject"
- value: where the input value come from example value={this.state.subject}
- onChange: function in the parent component to catch/store state changes example onChange={this.handleChange}
- choices: and a array of Strings as pull down choices
- selectedValue: want the 'value' should change to when the CheckBox or Radio button is selected
- text: a label (String or component) displayed following the CheckBox or Radio button
Release Notes
1.32.0
1.33.0
1.33.1
1.34.0
Component Documents
AlertModal
AppCore
Browser Detect
CheckBox
CheckBoxGroup
Choice
ChoiceText
ChoiceTextSearchable
Common Functions
ConfirmModal
ContextMenu
CSS Rule Functions
Date Functions
DoubleListBox
Entry Form is used to help line up components in a form.
ErrorModal
Header
InputFile
Invalid
Link
List
MenuBar
Menu Utils
Modal
OpenTab
Outline
PageTitle
ProgressCircles
Radio
Redirect
Search Functions
SearchSortTable
SimpleTable
Slider
SpreadSheet
StatusBox
Theme
Getting Started_
CSS File Information
Using CSS Files
Build and Publish
- npm run pack
- npm run dry
- npm run pub
Source Code Build Dependencies
- wallaby.js needs .babelrc for code coverage testing
- webpack uses babel config in webpack.config.js babel-loader section
Contributing