npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

simple-widgets

v1.41.7

Published

A Collection of React components to make your React code simpler

Downloads

152

Readme

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: [email protected] Exploit maturity: PROOF OF CONCEPT

Introduced through: [email protected][email protected] › @foliojs-fork/[email protected][email protected][email protected][email protected][email protected][email protected] 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.

    // in src/App.js
            setAppSpecificInfo({dbStruct, formDictionary, namedQueries})
    
    // in src/entry/formDictionary.js
    const formDictionary = (search) => {
    
        const formName = (typeof search === 'object') ? search.formName : formName
         // old version of simple-widgets did a structure
         // simple-widgets v1.35.0 it is now a string

    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 [email protected]

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

  1. npm run pack
  2. npm run dry
  3. 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 contributions welcome