From f8614349fdf23c050f3019064373b4b460f91713 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Tue, 28 Dec 2021 03:36:16 +0530 Subject: [PATCH 001/310] Bulk actions component. --- packages/react-bulk-actions/README.md | 11 + .../__tests__/react-bulk-actions.test.js | 7 + .../docs/bulk-actions.stories.js | 93 +++++++++ .../lib/react-bulk-actions.js | 189 ++++++++++++++++++ packages/react-bulk-actions/package.json | 30 +++ 5 files changed, 330 insertions(+) create mode 100644 packages/react-bulk-actions/README.md create mode 100644 packages/react-bulk-actions/__tests__/react-bulk-actions.test.js create mode 100644 packages/react-bulk-actions/docs/bulk-actions.stories.js create mode 100644 packages/react-bulk-actions/lib/react-bulk-actions.js create mode 100644 packages/react-bulk-actions/package.json diff --git a/packages/react-bulk-actions/README.md b/packages/react-bulk-actions/README.md new file mode 100644 index 00000000..f18259f1 --- /dev/null +++ b/packages/react-bulk-actions/README.md @@ -0,0 +1,11 @@ +# `@wpmudev/react-bulk-actions` + +> TODO: description + +## Usage + +``` +const reactBulkActions = require('@wpmudev/react-bulk-actions'); + +// TODO: DEMONSTRATE API +``` diff --git a/packages/react-bulk-actions/__tests__/react-bulk-actions.test.js b/packages/react-bulk-actions/__tests__/react-bulk-actions.test.js new file mode 100644 index 00000000..51cd2228 --- /dev/null +++ b/packages/react-bulk-actions/__tests__/react-bulk-actions.test.js @@ -0,0 +1,7 @@ +'use strict'; + +const reactBulkActions = require('..'); + +describe('@wpmudev/react-bulk-actions', () => { + it('needs tests'); +}); diff --git a/packages/react-bulk-actions/docs/bulk-actions.stories.js b/packages/react-bulk-actions/docs/bulk-actions.stories.js new file mode 100644 index 00000000..caa49afc --- /dev/null +++ b/packages/react-bulk-actions/docs/bulk-actions.stories.js @@ -0,0 +1,93 @@ +import React from "react"; +import { Box, BoxHeader, BoxBody } from "@wpmudev/react-box"; +import { ReactBulkActions } from "../lib/react-bulk-actions"; + +export default { + title: "Components/Actions", + component: ReactBulkActions, +}; + +export const primary = args => { + return ( + + + + + + + ); +}; + +// delete function +const deleteFunc = (ids) => { + console.log("Delete bulk action."); + console.log(ids); +}; + +// edit section +const editFunc = (ids) => { + console.log("Edit bulk action."); + console.log(ids); +}; + +primary.storyName = "Bulk Actions"; +primary.args = { + description: "Bulk Actions", + bulkActionsLabel: [ + { + title: "Delete", + value: "delete", + actionName: "deleteAction" // action name should be same match with bulkActions key. + }, + { + title: "Edit", + value: "edit", + actionName: "editAction" + } + ], + + // actionName as key and function or script that will be executed when apply button clicked. + bulkActions: { "deleteAction": deleteFunc, "editAction": editFunc }, + buttonLabel: 'Apply', + + // this function will execute when bulk actions is not available or only one bulk action is present then this function will execute on click of Apply button. + buttonAction: deleteFunc, + + // accordin items + listItems: [ + { + id: 1, + title: 'Accordion Item 1', + children: ( + + +

Accordion Item 1 – Hello world!

+ + + ) + }, + { + id: 2, + title: 'Accordion Item 2', + children: ( + + +

Accordion Item 2 – Hello world!

+ + + ) + }, + { + id: 3, + title: 'Accordion Item 3', + children: ( + + +

Accordion Item 3 – Hello world!

+ + + ) + } + ] +}; +primary.argTypes = {}; \ No newline at end of file diff --git a/packages/react-bulk-actions/lib/react-bulk-actions.js b/packages/react-bulk-actions/lib/react-bulk-actions.js new file mode 100644 index 00000000..908049ae --- /dev/null +++ b/packages/react-bulk-actions/lib/react-bulk-actions.js @@ -0,0 +1,189 @@ +/* eslint-disable jsx-a11y/no-onchange */ +/* eslint-disable prettier/prettier */ +import React, { useState, useRef } from "react"; +import { Button } from "@wpmudev/react-button"; +import { Accordion, AccordionItem } from "@wpmudev/react-accordion"; +import { Box } from "@wpmudev/react-box"; + +export const ReactBulkActions = ({ + buttonLabel, + bulkActionsLabel, + bulkActions, + listItems, + buttonAction + }) => { + const [selectedIds, setSelectedIds] = useState([]); + const [buttonState, setButtonState] = useState(true); + const [applyState, setApplyState] = useState(null); + const optionElem = useRef(null); + + // bulk action options + const bulkOptions = bulkActionsLabel; + + // if option is selected change button status + const selectedOption = (e) => { + e.preventDefault(); + if (optionElem.current.value !== "null") { + setButtonState(false); + setApplyState(e.target[e.target.selectedIndex].getAttribute("data-action")); + } else { + setButtonState(true); + setApplyState(null); + } + }; + + const applyAction = (e) => { + e.preventDefault(); + if(selectedIds.length){ + bulkActionsLabel.length > 1 ? + bulkActions[e.target.getAttribute("data-action")](selectedIds) : + buttonAction(selectedIds); + } else { + alert("Please select some items"); + } + }; + + // add/remove ids from array + const updateSelectedId = (e, id) => { + !e.target.checked ? + setSelectedIds(selectedIds.filter(item => item.id !== id)) : setSelectedIds([...selectedIds, {id: id}]); + } + + return ( + <> + { + BulkActions( + bulkOptions, + selectedOption, + optionElem, + buttonLabel, + applyState, + buttonState, + applyAction + ) + } +
+ { + ItemsTable( + listItems, + updateSelectedId, + setSelectedIds + ) + } +
+ + ); +}; + +// bulk actions +export const BulkActions = ( + bulkOptions, + selectedOption, + optionElem, + buttonLabel, + applyState, + buttonState, + applyAction +) => { + + return( +
+ {bulkOptions.length > 1 ? ( + + ) : ( + "" + )} + +
+ ); +} + +// select all checkbox +export const SelectAll = ( + elemName, + setSelectedIds, + listItems +) => { + const arrItems = listItems.map(function(data) {return {id: data.id};}); + // select all ids + const selectAllIds = (e) => { + const checkboxes = document.getElementsByName(elemName); + var i = 0; + if(e.target.checked){ + for (i = 0; i < checkboxes.length; i++) { + checkboxes[i].checked = true; + } + setSelectedIds(arrItems) + } else { + for (i = 0; i < checkboxes.length; i++) { + checkboxes[i].checked = false; + } + setSelectedIds([]); + } + } + return ( + <> + + + + ); +}; + +// table items +export const ItemsTable = ( + listItems, + updateSelectedId, + setSelectedIds +) => { + return ( + + + { SelectAll( + "sui checkbox", + setSelectedIds, + listItems + )} + {listItems.map(( data, index ) => ( +
+ updateSelectedId(e, data.id)} + value={data.id} + name="sui checkbox" + aria-label="Item" + /> + +
+ ))} + + + ); +}; diff --git a/packages/react-bulk-actions/package.json b/packages/react-bulk-actions/package.json new file mode 100644 index 00000000..b6034c0c --- /dev/null +++ b/packages/react-bulk-actions/package.json @@ -0,0 +1,30 @@ +{ + "name": "@wpmudev/react-bulk-actions", + "version": "1.0.0", + "description": "Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth is in ya face when ya hear the British cannons go / BOOM", + "keywords": [], + "author": "Pawan Kumar ", + "license": "ISC", + "main": "lib/react-bulk-actions.js", + "directories": { + "lib": "lib", + "test": "__tests__" + }, + "files": [ + "lib" + ], + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/creador-dev/shared-ui-react.git" + }, + "scripts": { + "test": "echo \"Error: run tests from root\" && exit 1" + }, + "bugs": { + "url": "https://github.com/creador-dev/shared-ui-react/issues" + }, + "homepage": "https://github.com/creador-dev/shared-ui-react#readme" +} From ca9e5e8157d861043e7b8712490abff3d10f6bc1 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Fri, 21 Jan 2022 14:15:39 +0530 Subject: [PATCH 002/310] created react toggle new component --- packages/react-toggles/README.md | 11 +++++++ .../__tests__/react-toggles.test.js | 7 +++++ .../docs/react-toggles.stories.js | 21 +++++++++++++ packages/react-toggles/lib/react-toggles.js | 26 ++++++++++++++++ packages/react-toggles/package.json | 30 +++++++++++++++++++ 5 files changed, 95 insertions(+) create mode 100644 packages/react-toggles/README.md create mode 100644 packages/react-toggles/__tests__/react-toggles.test.js create mode 100644 packages/react-toggles/docs/react-toggles.stories.js create mode 100644 packages/react-toggles/lib/react-toggles.js create mode 100644 packages/react-toggles/package.json diff --git a/packages/react-toggles/README.md b/packages/react-toggles/README.md new file mode 100644 index 00000000..ef05276b --- /dev/null +++ b/packages/react-toggles/README.md @@ -0,0 +1,11 @@ +# `@wpmudev/react-toggles` + +> TODO: description + +## Usage + +``` +const reactToggles = require('@wpmudev/react-toggles'); + +// TODO: DEMONSTRATE API +``` diff --git a/packages/react-toggles/__tests__/react-toggles.test.js b/packages/react-toggles/__tests__/react-toggles.test.js new file mode 100644 index 00000000..b6cd76e9 --- /dev/null +++ b/packages/react-toggles/__tests__/react-toggles.test.js @@ -0,0 +1,7 @@ +'use strict'; + +const reactToggles = require('..'); + +describe('@wpmudev/react-toggles', () => { + it('needs tests'); +}); diff --git a/packages/react-toggles/docs/react-toggles.stories.js b/packages/react-toggles/docs/react-toggles.stories.js new file mode 100644 index 00000000..2ea057cd --- /dev/null +++ b/packages/react-toggles/docs/react-toggles.stories.js @@ -0,0 +1,21 @@ +import React from 'react'; +import { Box, BoxBody } from '@wpmudev/react-box'; +import { Toggles } from '../lib/react-toggles'; + +export default { + title: 'Components/Toggles', + component: Toggles, + args: {}, + argTypes: {}, +}; + +const Template = (args) => ( + + + + + +); + +export const primary = Template.bind({}); +primary.storyName = 'Default'; diff --git a/packages/react-toggles/lib/react-toggles.js b/packages/react-toggles/lib/react-toggles.js new file mode 100644 index 00000000..63e53a12 --- /dev/null +++ b/packages/react-toggles/lib/react-toggles.js @@ -0,0 +1,26 @@ +import React from 'react'; + +export const Toggles = ({}) => { + return ( +
+ +
+ ); +}; diff --git a/packages/react-toggles/package.json b/packages/react-toggles/package.json new file mode 100644 index 00000000..24dfb2f2 --- /dev/null +++ b/packages/react-toggles/package.json @@ -0,0 +1,30 @@ +{ + "name": "@wpmudev/react-toggles", + "version": "1.0.0", + "description": "Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth is in ya face when ya hear the British cannons go / BOOM", + "keywords": [], + "author": "Pawan Kumar ", + "license": "ISC", + "main": "lib/react-toggles.js", + "directories": { + "lib": "lib", + "test": "__tests__" + }, + "files": [ + "lib" + ], + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/wpmudev/shared-ui-react.git" + }, + "scripts": { + "test": "echo \"Error: run tests from root\" && exit 1" + }, + "bugs": { + "url": "https://github.com/wpmudev/shared-ui-react/issues" + }, + "homepage": "https://github.com/wpmudev/shared-ui-react#readme" +} From 675aa5a3a3517275d3c5991ea2c093e0e4c31c27 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Fri, 21 Jan 2022 22:57:51 +0530 Subject: [PATCH 003/310] created new element react toggles --- .../docs/react-subcontent.stories.js | 99 ++++++++++++++++ .../docs/react-toggles-disabled.stories.js | 100 ++++++++++++++++ .../docs/react-toggles.stories.js | 86 +++++++++++++- .../docs/react-variations.stories.js | 109 ++++++++++++++++++ packages/react-toggles/lib/react-toggles.js | 97 +++++++++++++--- 5 files changed, 473 insertions(+), 18 deletions(-) create mode 100644 packages/react-toggles/docs/react-subcontent.stories.js create mode 100644 packages/react-toggles/docs/react-toggles-disabled.stories.js create mode 100644 packages/react-toggles/docs/react-variations.stories.js diff --git a/packages/react-toggles/docs/react-subcontent.stories.js b/packages/react-toggles/docs/react-subcontent.stories.js new file mode 100644 index 00000000..ae8e77c0 --- /dev/null +++ b/packages/react-toggles/docs/react-subcontent.stories.js @@ -0,0 +1,99 @@ +import React from 'react'; +import { Box, BoxBody } from '@wpmudev/react-box'; +import { Toggles } from '../lib/react-toggles'; + +export default { + title: 'Components/Toggles/Sub Content', + component: Toggles, + args: { + toggleState: true, + disabled: false, + htmlFor: 'unique-id', + arialabelldby: 'unique-id-label', + ariadescribedby: 'unique-id-description', + label: 'Toggle Label', + description: 'Toggle description goes here.', + id: 'unique-id', + subContent: true, + labelHidden: false, + }, + argTypes: { + toggleState: { + description: 'Toggle state', + control: { + type: 'boolean', + }, + }, + disabled: { + description: 'Toggle disabled', + control: { + type: 'boolean', + }, + }, + htmlFor: { + description: 'HTML for', + control: { + type: 'text', + }, + }, + arialabelldby: { + description: 'ARIA label by', + control: { + type: 'text', + }, + }, + ariadescribedby: { + description: 'ARIA described by', + control: { + type: 'text', + }, + }, + label: { + description: 'Label', + control: { + type: 'text', + }, + }, + description: { + description: 'Description', + control: { + type: 'text', + }, + }, + id: { + description: 'ID', + control: { + type: 'text', + }, + }, + subContent: { + description: 'Sub content', + control: { + type: 'boolean', + }, + }, + labelHidden: { + description: 'The label is visually hidden but available for screen readers.', + control: { + type: 'boolean', + }, + }, + }, +}; + +const Template = (args) => ( + + + + + +); + +export const primary = Template.bind({}); +primary.storyName = 'On - Default'; + +export const label = Template.bind({}); +label.storyName = 'Off - Active'; +label.args = { + toggleState: false, +}; diff --git a/packages/react-toggles/docs/react-toggles-disabled.stories.js b/packages/react-toggles/docs/react-toggles-disabled.stories.js new file mode 100644 index 00000000..c6d05411 --- /dev/null +++ b/packages/react-toggles/docs/react-toggles-disabled.stories.js @@ -0,0 +1,100 @@ +import React from 'react'; +import { Box, BoxBody } from '@wpmudev/react-box'; +import { Toggles } from '../lib/react-toggles'; + +export default { + title: 'Components/Toggles/Disabled', + component: Toggles, + args: { + toggleState: true, + disabled: true, + htmlFor: 'unique-id', + arialabelldby: 'unique-id-label', + ariadescribedby: 'unique-id-description', + label: 'Toggle Label', + description: 'Toggle description goes here.', + id: 'unique-id', + subContent: false, + labelHidden: false, + }, + argTypes: { + toggleState: { + description: 'Toggle state', + control: { + type: 'boolean', + }, + }, + disabled: { + description: 'Toggle disabled', + control: { + type: 'boolean', + }, + }, + htmlFor: { + description: 'HTML for', + control: { + type: 'text', + }, + }, + arialabelldby: { + description: 'ARIA label by', + control: { + type: 'text', + }, + }, + ariadescribedby: { + description: 'ARIA described by', + control: { + type: 'text', + }, + }, + label: { + description: 'Label', + control: { + type: 'text', + }, + }, + description: { + description: 'Description', + control: { + type: 'text', + }, + }, + id: { + description: 'ID', + control: { + type: 'text', + }, + }, + subContent: { + description: 'Sub content', + control: { + type: 'boolean', + }, + }, + labelHidden: { + description: 'The label is visually hidden but available for screen readers.', + control: { + type: 'boolean', + }, + }, + }, +}; + +const Template = (args) => ( + + + + + +); + +export const primary = Template.bind({}); +primary.storyName = 'On - Disabled'; + +export const disabled = Template.bind({}); +disabled.storyName = 'Off - Disabled'; +disabled.args = { + toggleState: false, + disabled: true, +}; diff --git a/packages/react-toggles/docs/react-toggles.stories.js b/packages/react-toggles/docs/react-toggles.stories.js index 2ea057cd..ac18a948 100644 --- a/packages/react-toggles/docs/react-toggles.stories.js +++ b/packages/react-toggles/docs/react-toggles.stories.js @@ -3,10 +3,82 @@ import { Box, BoxBody } from '@wpmudev/react-box'; import { Toggles } from '../lib/react-toggles'; export default { - title: 'Components/Toggles', + title: 'Components/Toggles/Active', component: Toggles, - args: {}, - argTypes: {}, + args: { + toggleState: true, + disabled: false, + htmlFor: 'unique-id', + arialabelldby: 'unique-id-label', + ariadescribedby: 'unique-id-description', + label: 'Toggle Label', + description: 'Toggle description goes here.', + id: 'unique-id', + subContent: false, + labelHidden: false, + }, + argTypes: { + toggleState: { + description: 'Toggle state', + control: { + type: 'boolean', + }, + }, + disabled: { + description: 'Toggle disabled', + control: { + type: 'boolean', + }, + }, + htmlFor: { + description: 'HTML for', + control: { + type: 'text', + }, + }, + arialabelldby: { + description: 'ARIA label by', + control: { + type: 'text', + }, + }, + ariadescribedby: { + description: 'ARIA described by', + control: { + type: 'text', + }, + }, + label: { + description: 'Label', + control: { + type: 'text', + }, + }, + description: { + description: 'Description', + control: { + type: 'text', + }, + }, + id: { + description: 'ID', + control: { + type: 'text', + }, + }, + subContent: { + description: 'Sub content', + control: { + type: 'boolean', + }, + }, + labelHidden: { + description: 'The label is visually hidden but available for screen readers.', + control: { + type: 'boolean', + }, + }, + }, }; const Template = (args) => ( @@ -18,4 +90,10 @@ const Template = (args) => ( ); export const primary = Template.bind({}); -primary.storyName = 'Default'; +primary.storyName = 'On - Default'; + +export const label = Template.bind({}); +label.storyName = 'Off - Default'; +label.args = { + toggleState: false, +}; diff --git a/packages/react-toggles/docs/react-variations.stories.js b/packages/react-toggles/docs/react-variations.stories.js new file mode 100644 index 00000000..1bbf4a29 --- /dev/null +++ b/packages/react-toggles/docs/react-variations.stories.js @@ -0,0 +1,109 @@ +import React from 'react'; +import { Box, BoxBody } from '@wpmudev/react-box'; +import { Toggles } from '../lib/react-toggles'; + +export default { + title: 'Components/Toggles/Variations', + component: Toggles, + args: { + toggleState: true, + disabled: false, + htmlFor: 'unique-id', + arialabelldby: 'unique-id-label', + ariadescribedby: 'unique-id-description', + label: 'Toggle Label', + description: '', + id: 'unique-id', + subContent: false, + labelHidden: false, + }, + argTypes: { + toggleState: { + description: 'Toggle state', + control: { + type: 'boolean', + }, + }, + disabled: { + description: 'Toggle disabled', + control: { + type: 'boolean', + }, + }, + htmlFor: { + description: 'HTML for', + control: { + type: 'text', + }, + }, + arialabelldby: { + description: 'ARIA label by', + control: { + type: 'text', + }, + }, + ariadescribedby: { + description: 'ARIA described by', + control: { + type: 'text', + }, + }, + label: { + description: 'Label', + control: { + type: 'text', + }, + }, + description: { + description: 'Description', + control: { + type: 'text', + }, + }, + id: { + description: 'ID', + control: { + type: 'text', + }, + }, + subContent: { + description: 'Sub content', + control: { + type: 'boolean', + }, + }, + labelHidden: { + description: 'The label is visually hidden but available for screen readers.', + control: { + type: 'boolean', + }, + }, + }, +}; + +const Template = (args) => ( + + + + + +); + +export const primary = Template.bind({}); +primary.storyName = 'Label - Default'; + +export const label = Template.bind({}); +label.storyName = 'Label - Hidden'; +label.args = { + toggleState: false, + labelHidden: true, + description: '', +}; + +export const description = Template.bind({}); +description.storyName = 'Description - Default'; +description.args = { + toggleState: false, + labelHidden: false, + description: 'Toggle description goes here.', +}; diff --git a/packages/react-toggles/lib/react-toggles.js b/packages/react-toggles/lib/react-toggles.js index 63e53a12..859c70f8 100644 --- a/packages/react-toggles/lib/react-toggles.js +++ b/packages/react-toggles/lib/react-toggles.js @@ -1,26 +1,95 @@ -import React from 'react'; +import React, { useState } from 'react'; + +export const Toggles = ({ + toggleState, + disabled, + arialabelledby, + ariadescribedby, + label, + description, + id, + subContent, + labelHidden, +}) => { + const [state, setState] = useState(toggleState); + + const changeState = () => { + setState(!state); + }; -export const Toggles = ({}) => { return ( -
-
+ {subContent && ( +
+
+
+
+ + +
+
+ +
+
+ + +
+
+
+
+ )} + ); }; From af45d0575098bb17149fb1f93e844072085ff30a Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Tue, 25 Jan 2022 21:11:01 +0530 Subject: [PATCH 004/310] made changes in docs and added some extra features --- ...s => react-additional-settings.stories.js} | 56 ++++++++--------- .../docs/react-toggles-disabled.stories.js | 52 ++++++++-------- ...js => react-toggles-variations.stories.js} | 61 +++++++++++-------- .../docs/react-toggles.stories.js | 52 ++++++++-------- packages/react-toggles/lib/react-toggles.js | 26 ++++---- 5 files changed, 129 insertions(+), 118 deletions(-) rename packages/react-toggles/docs/{react-subcontent.stories.js => react-additional-settings.stories.js} (54%) rename packages/react-toggles/docs/{react-variations.stories.js => react-toggles-variations.stories.js} (56%) diff --git a/packages/react-toggles/docs/react-subcontent.stories.js b/packages/react-toggles/docs/react-additional-settings.stories.js similarity index 54% rename from packages/react-toggles/docs/react-subcontent.stories.js rename to packages/react-toggles/docs/react-additional-settings.stories.js index ae8e77c0..37220001 100644 --- a/packages/react-toggles/docs/react-subcontent.stories.js +++ b/packages/react-toggles/docs/react-additional-settings.stories.js @@ -3,77 +3,77 @@ import { Box, BoxBody } from '@wpmudev/react-box'; import { Toggles } from '../lib/react-toggles'; export default { - title: 'Components/Toggles/Sub Content', + title: 'Components/Toggles/Additional Settings', component: Toggles, args: { toggleState: true, disabled: false, - htmlFor: 'unique-id', - arialabelldby: 'unique-id-label', - ariadescribedby: 'unique-id-description', + labelId: 'unique-id-label', + descriptionId: 'unique-id-description', label: 'Toggle Label', description: 'Toggle description goes here.', id: 'unique-id', - subContent: true, + additionalSettingsId: 'unique-id-additional-settings', + additionalSettings: true, labelHidden: false, }, argTypes: { + id: { + description: 'This will be unique id of the toggle.', + control: { + type: 'text', + }, + }, toggleState: { - description: 'Toggle state', + description: 'The toggle will be on/off.', control: { type: 'boolean', }, }, disabled: { - description: 'Toggle disabled', + description: 'The toggle will be disabled.', control: { type: 'boolean', }, }, - htmlFor: { - description: 'HTML for', + labelId: { + description: 'This will be unique label id of toggle.', control: { type: 'text', }, }, - arialabelldby: { - description: 'ARIA label by', + label: { + description: 'This will be label of the toggle.', control: { type: 'text', }, }, - ariadescribedby: { - description: 'ARIA described by', + labelHidden: { + description: 'The label will be visually hidden but available for screen readers.', control: { - type: 'text', + type: 'boolean', }, }, - label: { - description: 'Label', + descriptionId: { + description: 'This will be the unique id of the toggle description.', control: { type: 'text', }, }, description: { - description: 'Description', + description: 'This will be description of the toggle.', control: { type: 'text', }, }, - id: { - description: 'ID', + additionalSettingsId: { + description: 'This will be the id of the additional settings.', control: { type: 'text', }, }, - subContent: { - description: 'Sub content', - control: { - type: 'boolean', - }, - }, - labelHidden: { - description: 'The label is visually hidden but available for screen readers.', + additionalSettings: { + description: 'This will show additional settings when turned on.', control: { type: 'boolean', }, @@ -93,7 +93,7 @@ export const primary = Template.bind({}); primary.storyName = 'On - Default'; export const label = Template.bind({}); -label.storyName = 'Off - Active'; +label.storyName = 'Off - Inactive'; label.args = { toggleState: false, }; diff --git a/packages/react-toggles/docs/react-toggles-disabled.stories.js b/packages/react-toggles/docs/react-toggles-disabled.stories.js index c6d05411..7a835160 100644 --- a/packages/react-toggles/docs/react-toggles-disabled.stories.js +++ b/packages/react-toggles/docs/react-toggles-disabled.stories.js @@ -8,72 +8,72 @@ export default { args: { toggleState: true, disabled: true, - htmlFor: 'unique-id', - arialabelldby: 'unique-id-label', - ariadescribedby: 'unique-id-description', + labelId: 'unique-id-label', + descriptionId: 'unique-id-description', label: 'Toggle Label', description: 'Toggle description goes here.', id: 'unique-id', - subContent: false, + additionalSettingsId: 'unique-id-additional-settings', + additionalSettings: false, labelHidden: false, }, argTypes: { + id: { + description: 'This will be unique id of the toggle.', + control: { + type: 'text', + }, + }, toggleState: { - description: 'Toggle state', + description: 'The toggle will be on/off.', control: { type: 'boolean', }, }, disabled: { - description: 'Toggle disabled', + description: 'The toggle will be disabled.', control: { type: 'boolean', }, }, - htmlFor: { - description: 'HTML for', + labelId: { + description: 'This will be unique label id of toggle.', control: { type: 'text', }, }, - arialabelldby: { - description: 'ARIA label by', + label: { + description: 'This will be label of the toggle.', control: { type: 'text', }, }, - ariadescribedby: { - description: 'ARIA described by', + labelHidden: { + description: 'The label will be visually hidden but available for screen readers.', control: { - type: 'text', + type: 'boolean', }, }, - label: { - description: 'Label', + descriptionId: { + description: 'This will be the unique id of the toggle description.', control: { type: 'text', }, }, description: { - description: 'Description', + description: 'This will be description of the toggle.', control: { type: 'text', }, }, - id: { - description: 'ID', + additionalSettingsId: { + description: 'This will be the id of the additional settings.', control: { type: 'text', }, }, - subContent: { - description: 'Sub content', - control: { - type: 'boolean', - }, - }, - labelHidden: { - description: 'The label is visually hidden but available for screen readers.', + additionalSettings: { + description: 'This will show additional settings when turned on.', control: { type: 'boolean', }, diff --git a/packages/react-toggles/docs/react-variations.stories.js b/packages/react-toggles/docs/react-toggles-variations.stories.js similarity index 56% rename from packages/react-toggles/docs/react-variations.stories.js rename to packages/react-toggles/docs/react-toggles-variations.stories.js index 1bbf4a29..f1e4b757 100644 --- a/packages/react-toggles/docs/react-variations.stories.js +++ b/packages/react-toggles/docs/react-toggles-variations.stories.js @@ -8,72 +8,72 @@ export default { args: { toggleState: true, disabled: false, - htmlFor: 'unique-id', - arialabelldby: 'unique-id-label', - ariadescribedby: 'unique-id-description', + labelId: 'unique-id-label', + descriptionId: 'unique-id-description', label: 'Toggle Label', description: '', id: 'unique-id', - subContent: false, + additionalSettingsId: 'unique-id-additional-settings', + additionalSettings: false, labelHidden: false, }, argTypes: { + id: { + description: 'This will be unique id of the toggle.', + control: { + type: 'text', + }, + }, toggleState: { - description: 'Toggle state', + description: 'The toggle will be on/off.', control: { type: 'boolean', }, }, disabled: { - description: 'Toggle disabled', + description: 'The toggle will be disabled.', control: { type: 'boolean', }, }, - htmlFor: { - description: 'HTML for', + labelId: { + description: 'This will be unique label id of toggle.', control: { type: 'text', }, }, - arialabelldby: { - description: 'ARIA label by', + label: { + description: 'This will be label of the toggle.', control: { type: 'text', }, }, - ariadescribedby: { - description: 'ARIA described by', + labelHidden: { + description: 'The label will be visually hidden but available for screen readers.', control: { - type: 'text', + type: 'boolean', }, }, - label: { - description: 'Label', + descriptionId: { + description: 'This will be the unique id of the toggle description.', control: { type: 'text', }, }, description: { - description: 'Description', + description: 'This will be description of the toggle.', control: { type: 'text', }, }, - id: { - description: 'ID', + additionalSettingsId: { + description: 'This will be the id of the additional settings.', control: { type: 'text', }, }, - subContent: { - description: 'Sub content', - control: { - type: 'boolean', - }, - }, - labelHidden: { - description: 'The label is visually hidden but available for screen readers.', + additionalSettings: { + description: 'This will show additional settings when turned on.', control: { type: 'boolean', }, @@ -98,6 +98,7 @@ label.args = { toggleState: false, labelHidden: true, description: '', + descriptionId: '', }; export const description = Template.bind({}); @@ -107,3 +108,11 @@ description.args = { labelHidden: false, description: 'Toggle description goes here.', }; + +export const descriptionLabelHidden = Template.bind({}); +descriptionLabelHidden.storyName = 'Description - Label Hidden'; +descriptionLabelHidden.args = { + toggleState: false, + labelHidden: true, + description: 'Toggle description goes here.', +}; diff --git a/packages/react-toggles/docs/react-toggles.stories.js b/packages/react-toggles/docs/react-toggles.stories.js index ac18a948..56fe0f6b 100644 --- a/packages/react-toggles/docs/react-toggles.stories.js +++ b/packages/react-toggles/docs/react-toggles.stories.js @@ -8,72 +8,72 @@ export default { args: { toggleState: true, disabled: false, - htmlFor: 'unique-id', - arialabelldby: 'unique-id-label', - ariadescribedby: 'unique-id-description', + labelId: 'unique-id-label', + descriptionId: 'unique-id-description', label: 'Toggle Label', description: 'Toggle description goes here.', id: 'unique-id', - subContent: false, + additionalSettingsId: 'unique-id-additional-settings', + additionalSettings: false, labelHidden: false, }, argTypes: { + id: { + description: 'This will be unique id of the toggle.', + control: { + type: 'text', + }, + }, toggleState: { - description: 'Toggle state', + description: 'The toggle will be on/off.', control: { type: 'boolean', }, }, disabled: { - description: 'Toggle disabled', + description: 'The toggle will be disabled.', control: { type: 'boolean', }, }, - htmlFor: { - description: 'HTML for', + labelId: { + description: 'This will be unique label id of toggle.', control: { type: 'text', }, }, - arialabelldby: { - description: 'ARIA label by', + label: { + description: 'This will be label of the toggle.', control: { type: 'text', }, }, - ariadescribedby: { - description: 'ARIA described by', + labelHidden: { + description: 'The label will be visually hidden but available for screen readers.', control: { - type: 'text', + type: 'boolean', }, }, - label: { - description: 'Label', + descriptionId: { + description: 'This will be the unique id of the toggle description.', control: { type: 'text', }, }, description: { - description: 'Description', + description: 'This will be description of the toggle.', control: { type: 'text', }, }, - id: { - description: 'ID', + additionalSettingsId: { + description: 'This will be the id of the additional settings.', control: { type: 'text', }, }, - subContent: { - description: 'Sub content', - control: { - type: 'boolean', - }, - }, - labelHidden: { - description: 'The label is visually hidden but available for screen readers.', + additionalSettings: { + description: 'This will show additional settings when turned on.', control: { type: 'boolean', }, diff --git a/packages/react-toggles/lib/react-toggles.js b/packages/react-toggles/lib/react-toggles.js index 859c70f8..5d08a872 100644 --- a/packages/react-toggles/lib/react-toggles.js +++ b/packages/react-toggles/lib/react-toggles.js @@ -3,18 +3,19 @@ import React, { useState } from 'react'; export const Toggles = ({ toggleState, disabled, - arialabelledby, - ariadescribedby, + labelId, + descriptionId, label, description, id, - subContent, + additionalSettingsId, + additionalSettings, labelHidden, }) => { - const [state, setState] = useState(toggleState); + const [checkedState, setCheckedState] = useState(toggleState); const changeState = () => { - setState(!state); + setCheckedState(!checkedState); }; return ( @@ -23,18 +24,19 @@ export const Toggles = ({ {label && ( {label} @@ -47,13 +49,13 @@ export const Toggles = ({ )} - {subContent && ( + {additionalSettings && (
From be80badea4589bd5c1ab696341e39156dc2e6a11 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Mon, 31 Jan 2022 11:39:33 +0530 Subject: [PATCH 005/310] made changes in docs --- .../docs/react-additional-settings.stories.js | 99 --------------- ...> react-toggles-hidden-content.stories.js} | 24 ++-- ...ies.js => react-toggles-simple.stories.js} | 17 ++- .../docs/react-toggles-variations.stories.js | 118 ------------------ 4 files changed, 26 insertions(+), 232 deletions(-) delete mode 100644 packages/react-toggles/docs/react-additional-settings.stories.js rename packages/react-toggles/docs/{react-toggles.stories.js => react-toggles-hidden-content.stories.js} (83%) rename packages/react-toggles/docs/{react-toggles-disabled.stories.js => react-toggles-simple.stories.js} (88%) delete mode 100644 packages/react-toggles/docs/react-toggles-variations.stories.js diff --git a/packages/react-toggles/docs/react-additional-settings.stories.js b/packages/react-toggles/docs/react-additional-settings.stories.js deleted file mode 100644 index 37220001..00000000 --- a/packages/react-toggles/docs/react-additional-settings.stories.js +++ /dev/null @@ -1,99 +0,0 @@ -import React from 'react'; -import { Box, BoxBody } from '@wpmudev/react-box'; -import { Toggles } from '../lib/react-toggles'; - -export default { - title: 'Components/Toggles/Additional Settings', - component: Toggles, - args: { - toggleState: true, - disabled: false, - labelId: 'unique-id-label', - descriptionId: 'unique-id-description', - label: 'Toggle Label', - description: 'Toggle description goes here.', - id: 'unique-id', - additionalSettingsId: 'unique-id-additional-settings', - additionalSettings: true, - labelHidden: false, - }, - argTypes: { - id: { - description: 'This will be unique id of the toggle.', - control: { - type: 'text', - }, - }, - toggleState: { - description: 'The toggle will be on/off.', - control: { - type: 'boolean', - }, - }, - disabled: { - description: 'The toggle will be disabled.', - control: { - type: 'boolean', - }, - }, - labelId: { - description: 'This will be unique label id of toggle.', - control: { - type: 'text', - }, - }, - label: { - description: 'This will be label of the toggle.', - control: { - type: 'text', - }, - }, - labelHidden: { - description: 'The label will be visually hidden but available for screen readers.', - control: { - type: 'boolean', - }, - }, - descriptionId: { - description: 'This will be the unique id of the toggle description.', - control: { - type: 'text', - }, - }, - description: { - description: 'This will be description of the toggle.', - control: { - type: 'text', - }, - }, - additionalSettingsId: { - description: 'This will be the id of the additional settings.', - control: { - type: 'text', - }, - }, - additionalSettings: { - description: 'This will show additional settings when turned on.', - control: { - type: 'boolean', - }, - }, - }, -}; - -const Template = (args) => ( - - - - - -); - -export const primary = Template.bind({}); -primary.storyName = 'On - Default'; - -export const label = Template.bind({}); -label.storyName = 'Off - Inactive'; -label.args = { - toggleState: false, -}; diff --git a/packages/react-toggles/docs/react-toggles.stories.js b/packages/react-toggles/docs/react-toggles-hidden-content.stories.js similarity index 83% rename from packages/react-toggles/docs/react-toggles.stories.js rename to packages/react-toggles/docs/react-toggles-hidden-content.stories.js index 56fe0f6b..0470fe10 100644 --- a/packages/react-toggles/docs/react-toggles.stories.js +++ b/packages/react-toggles/docs/react-toggles-hidden-content.stories.js @@ -3,19 +3,19 @@ import { Box, BoxBody } from '@wpmudev/react-box'; import { Toggles } from '../lib/react-toggles'; export default { - title: 'Components/Toggles/Active', + title: 'Components/Toggles/Hidden Content', component: Toggles, args: { - toggleState: true, + toggleState: false, disabled: false, labelId: 'unique-id-label', descriptionId: 'unique-id-description', label: 'Toggle Label', - description: 'Toggle description goes here.', + description: '', id: 'unique-id', additionalSettingsId: 'unique-id-additional-settings', additionalSettings: false, - labelHidden: false, + labelHidden: true, }, argTypes: { id: { @@ -90,10 +90,16 @@ const Template = (args) => ( ); export const primary = Template.bind({}); -primary.storyName = 'On - Default'; +primary.storyName = 'Default'; -export const label = Template.bind({}); -label.storyName = 'Off - Default'; -label.args = { - toggleState: false, +export const active = Template.bind({}); +active.storyName = 'Active'; +active.args = { + toggleState: true, +}; + +export const disabled = Template.bind({}); +disabled.storyName = 'Disabled'; +disabled.args = { + disabled: true, }; diff --git a/packages/react-toggles/docs/react-toggles-disabled.stories.js b/packages/react-toggles/docs/react-toggles-simple.stories.js similarity index 88% rename from packages/react-toggles/docs/react-toggles-disabled.stories.js rename to packages/react-toggles/docs/react-toggles-simple.stories.js index 7a835160..42fc1dc5 100644 --- a/packages/react-toggles/docs/react-toggles-disabled.stories.js +++ b/packages/react-toggles/docs/react-toggles-simple.stories.js @@ -3,11 +3,11 @@ import { Box, BoxBody } from '@wpmudev/react-box'; import { Toggles } from '../lib/react-toggles'; export default { - title: 'Components/Toggles/Disabled', + title: 'Components/Toggles/Simple', component: Toggles, args: { - toggleState: true, - disabled: true, + toggleState: false, + disabled: false, labelId: 'unique-id-label', descriptionId: 'unique-id-description', label: 'Toggle Label', @@ -90,11 +90,16 @@ const Template = (args) => ( ); export const primary = Template.bind({}); -primary.storyName = 'On - Disabled'; +primary.storyName = 'Default'; + +export const active = Template.bind({}); +active.storyName = 'Active'; +active.args = { + toggleState: true, +}; export const disabled = Template.bind({}); -disabled.storyName = 'Off - Disabled'; +disabled.storyName = 'Disabled'; disabled.args = { - toggleState: false, disabled: true, }; diff --git a/packages/react-toggles/docs/react-toggles-variations.stories.js b/packages/react-toggles/docs/react-toggles-variations.stories.js deleted file mode 100644 index f1e4b757..00000000 --- a/packages/react-toggles/docs/react-toggles-variations.stories.js +++ /dev/null @@ -1,118 +0,0 @@ -import React from 'react'; -import { Box, BoxBody } from '@wpmudev/react-box'; -import { Toggles } from '../lib/react-toggles'; - -export default { - title: 'Components/Toggles/Variations', - component: Toggles, - args: { - toggleState: true, - disabled: false, - labelId: 'unique-id-label', - descriptionId: 'unique-id-description', - label: 'Toggle Label', - description: '', - id: 'unique-id', - additionalSettingsId: 'unique-id-additional-settings', - additionalSettings: false, - labelHidden: false, - }, - argTypes: { - id: { - description: 'This will be unique id of the toggle.', - control: { - type: 'text', - }, - }, - toggleState: { - description: 'The toggle will be on/off.', - control: { - type: 'boolean', - }, - }, - disabled: { - description: 'The toggle will be disabled.', - control: { - type: 'boolean', - }, - }, - labelId: { - description: 'This will be unique label id of toggle.', - control: { - type: 'text', - }, - }, - label: { - description: 'This will be label of the toggle.', - control: { - type: 'text', - }, - }, - labelHidden: { - description: 'The label will be visually hidden but available for screen readers.', - control: { - type: 'boolean', - }, - }, - descriptionId: { - description: 'This will be the unique id of the toggle description.', - control: { - type: 'text', - }, - }, - description: { - description: 'This will be description of the toggle.', - control: { - type: 'text', - }, - }, - additionalSettingsId: { - description: 'This will be the id of the additional settings.', - control: { - type: 'text', - }, - }, - additionalSettings: { - description: 'This will show additional settings when turned on.', - control: { - type: 'boolean', - }, - }, - }, -}; - -const Template = (args) => ( - - - - - -); - -export const primary = Template.bind({}); -primary.storyName = 'Label - Default'; - -export const label = Template.bind({}); -label.storyName = 'Label - Hidden'; -label.args = { - toggleState: false, - labelHidden: true, - description: '', - descriptionId: '', -}; - -export const description = Template.bind({}); -description.storyName = 'Description - Default'; -description.args = { - toggleState: false, - labelHidden: false, - description: 'Toggle description goes here.', -}; - -export const descriptionLabelHidden = Template.bind({}); -descriptionLabelHidden.storyName = 'Description - Label Hidden'; -descriptionLabelHidden.args = { - toggleState: false, - labelHidden: true, - description: 'Toggle description goes here.', -}; From 06431bfb658fa1ff71f8a1b05b98a85a168fbdd0 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Mon, 31 Jan 2022 23:56:55 +0530 Subject: [PATCH 006/310] added args in react bulk stories --- .../docs/bulk-actions.stories.js | 205 +++++++++++------- 1 file changed, 122 insertions(+), 83 deletions(-) diff --git a/packages/react-bulk-actions/docs/bulk-actions.stories.js b/packages/react-bulk-actions/docs/bulk-actions.stories.js index caa49afc..8dc8827c 100644 --- a/packages/react-bulk-actions/docs/bulk-actions.stories.js +++ b/packages/react-bulk-actions/docs/bulk-actions.stories.js @@ -1,93 +1,132 @@ -import React from "react"; -import { Box, BoxHeader, BoxBody } from "@wpmudev/react-box"; -import { ReactBulkActions } from "../lib/react-bulk-actions"; - -export default { - title: "Components/Actions", - component: ReactBulkActions, -}; - -export const primary = args => { - return ( - - - - - - - ); -}; +import React from 'react'; +import { Box, BoxHeader, BoxBody } from '@wpmudev/react-box'; +import { ReactBulkActions } from '../lib/react-bulk-actions'; // delete function const deleteFunc = (ids) => { - console.log("Delete bulk action."); - console.log(ids); + alert('Delete bulk action.'); + console.log(ids); }; // edit section const editFunc = (ids) => { - console.log("Edit bulk action."); - console.log(ids); + alert('Edit bulk action.'); + console.log(ids); +}; + +export default { + title: 'Components/Actions', + component: ReactBulkActions, + args: { + description: 'Bulk Actions', + bulkActionsLabel: [ + { + title: 'Delete', + value: 'delete', + actionName: 'deleteAction', // action name should be same match with bulkActions key. + }, + { + title: 'Edit', + value: 'edit', + actionName: 'editAction', + }, + ], + + // actionName as key and function or script that will be executed when apply button clicked. + bulkActions: { deleteAction: deleteFunc, editAction: editFunc }, + buttonLabel: 'Apply', + + // this function will execute when bulk actions is not available or only one bulk action is present then this function will execute on click of Apply button. + buttonAction: deleteFunc, + + // accordin items + listItems: [ + { + id: 1, + title: 'Accordion Item 1', + children: ( + + +

Accordion Item 1 – Hello world!

+ + + ), + }, + { + id: 2, + title: 'Accordion Item 2', + children: ( + + +

Accordion Item 2 – Hello world!

+ + + ), + }, + { + id: 3, + title: 'Accordion Item 3', + children: ( + + +

Accordion Item 3 – Hello world!

+ + + ), + }, + ], + }, + argTypes: { + description: { + description: 'Description', + control: { + type: 'text', + }, + }, + bulkActionsLabel: { + description: 'Bulk Actions Label', + control: { + type: 'array', + }, + }, + bulkActions: { + description: 'Bulk Actions', + control: { + type: 'object', + }, + }, + buttonLabel: { + description: 'Button Label', + control: { + type: 'text', + }, + }, + buttonAction: { + description: 'Button Action', + control: { + type: 'function', + }, + }, + listItems: { + description: 'List Items', + control: { + type: 'array', + }, + }, + }, }; -primary.storyName = "Bulk Actions"; -primary.args = { - description: "Bulk Actions", - bulkActionsLabel: [ - { - title: "Delete", - value: "delete", - actionName: "deleteAction" // action name should be same match with bulkActions key. - }, - { - title: "Edit", - value: "edit", - actionName: "editAction" - } - ], - - // actionName as key and function or script that will be executed when apply button clicked. - bulkActions: { "deleteAction": deleteFunc, "editAction": editFunc }, - buttonLabel: 'Apply', - - // this function will execute when bulk actions is not available or only one bulk action is present then this function will execute on click of Apply button. - buttonAction: deleteFunc, - - // accordin items - listItems: [ - { - id: 1, - title: 'Accordion Item 1', - children: ( - - -

Accordion Item 1 – Hello world!

- - - ) - }, - { - id: 2, - title: 'Accordion Item 2', - children: ( - - -

Accordion Item 2 – Hello world!

- - - ) - }, - { - id: 3, - title: 'Accordion Item 3', - children: ( - - -

Accordion Item 3 – Hello world!

- - - ) - } - ] +export const primary = (args) => { + return ( + + + + + + + ); }; -primary.argTypes = {}; \ No newline at end of file + +primary.storyName = 'Bulk Actions'; +primary.args = {}; +primary.argTypes = {}; From 0e377622083ecd659b07c24690bc69cd9dbc1527 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Tue, 1 Feb 2022 10:33:27 +0530 Subject: [PATCH 007/310] made few changes --- packages/react-bulk-actions/docs/bulk-actions.stories.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-bulk-actions/docs/bulk-actions.stories.js b/packages/react-bulk-actions/docs/bulk-actions.stories.js index 8dc8827c..b783b10a 100644 --- a/packages/react-bulk-actions/docs/bulk-actions.stories.js +++ b/packages/react-bulk-actions/docs/bulk-actions.stories.js @@ -86,7 +86,7 @@ export default { bulkActionsLabel: { description: 'Bulk Actions Label', control: { - type: 'array', + type: 'object', }, }, bulkActions: { @@ -110,7 +110,7 @@ export default { listItems: { description: 'List Items', control: { - type: 'array', + type: 'object', }, }, }, From c32f188c10493e22a558e17d7e6e5b86507e7083 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 23 Mar 2022 17:31:56 +0530 Subject: [PATCH 008/310] compiler builder added react-dom in external to skip it from rollup --- packages/compiler/lib/builder.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/compiler/lib/builder.js b/packages/compiler/lib/builder.js index 099631b1..9080688e 100755 --- a/packages/compiler/lib/builder.js +++ b/packages/compiler/lib/builder.js @@ -34,6 +34,7 @@ const inputOptions = { ], external: [ 'react', + 'react-dom', 'styled-components', '@justfixnyc/react-aria-modal' ], From 551d9c6f0d4afc089ae16249f2292411fae6380e Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Thu, 31 Mar 2022 10:55:16 +0530 Subject: [PATCH 009/310] added checkbox in react accordion. --- .../docs/react-accordion.stories.js | 6 +++++ .../react-accordion/lib/react-accordion.js | 26 ++++++++++++++++++- 2 files changed, 31 insertions(+), 1 deletion(-) diff --git a/packages/react-accordion/docs/react-accordion.stories.js b/packages/react-accordion/docs/react-accordion.stories.js index 0b1655a5..7787ef9c 100644 --- a/packages/react-accordion/docs/react-accordion.stories.js +++ b/packages/react-accordion/docs/react-accordion.stories.js @@ -30,6 +30,8 @@ primary.args = { title: 'Accordion Item 1', icon: 'forminator', image: 'https://pbs.twimg.com/profile_images/671394755951984640/GSkxXgDp_400x400.png', + checkboxInput: true, + checkboxId: 'accordion-item-1', children: ( @@ -42,6 +44,8 @@ primary.args = { title: 'Accordion Item 2', icon: 'hustle', image: 'https://pbs.twimg.com/profile_images/671394755951984640/GSkxXgDp_400x400.png', + checkboxInput: true, + checkboxId: 'accordion-item-2', children: ( @@ -54,6 +58,8 @@ primary.args = { title: 'Accordion Item 3', icon: 'hummingbird', image: 'https://pbs.twimg.com/profile_images/671394755951984640/GSkxXgDp_400x400.png', + checkboxInput: true, + checkboxId: 'accordion-item-3', children: ( diff --git a/packages/react-accordion/lib/react-accordion.js b/packages/react-accordion/lib/react-accordion.js index 17e83224..fcc6e2cf 100644 --- a/packages/react-accordion/lib/react-accordion.js +++ b/packages/react-accordion/lib/react-accordion.js @@ -2,6 +2,7 @@ import React, { Component, useState, useEffect, setState, useCallback } from 're import styled from 'styled-components'; import { ButtonIcon } from '@wpmudev/react-button-icon'; +import { RadioCheckboxInput } from '@wpmudev/react-radio-checkbox'; const ItemImage = styled.span` width: 30px; @@ -37,6 +38,10 @@ const AccordionItem = ({ icon, image, children, + checkboxInput, + checkboxId, + checkboxSelected, + checkboxClickHandler, ...props }) => { const [ isOpen, setIsOpen ] = useToggle(); @@ -53,6 +58,10 @@ const AccordionItem = ({ icon={ icon } image={ image } onClick={ setIsOpen } + checkboxInput={ checkboxInput } + checkboxId={ checkboxId } + checkboxSelected={ checkboxSelected } + checkboxClickHandler={ checkboxClickHandler } /> { children } @@ -67,6 +76,10 @@ const AccordionItemHeader = ({ icon, image, children, + checkboxInput, + checkboxId, + checkboxSelected, + checkboxClickHandler, ...props }) => { const [ isOpen ] = useState( false ); @@ -84,9 +97,20 @@ const AccordionItemHeader = ({ ? ' sui-accordion-col-' + titleSize : ''; + const checkboxItem = checkboxInput ? ( + + ) : ''; + + const titleColumn = (
- { titleColumnIcon }{ titleColumnImage }{ title } + { checkboxItem }{ titleColumnIcon }{ titleColumnImage }{ title }
); From 4522066e53a8b5f635a18468da384992f296d460 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Thu, 31 Mar 2022 11:09:37 +0530 Subject: [PATCH 010/310] new(checkbox/radio) created new component. --- packages/react-radio-checkbox/README.md | 11 ++ .../__tests__/react-radio-checkbox.test.js | 7 + .../dist/react-radio-checkbox.cjs.js | 159 ++++++++++++++++++ .../dist/react-radio-checkbox.esm.js | 150 +++++++++++++++++ .../docs/react-checkbox.stories.js | 150 +++++++++++++++++ .../docs/react-radio.stories.js | 150 +++++++++++++++++ .../lib/react-radio-checkbox.js | 105 ++++++++++++ packages/react-radio-checkbox/package.json | 35 ++++ 8 files changed, 767 insertions(+) create mode 100644 packages/react-radio-checkbox/README.md create mode 100644 packages/react-radio-checkbox/__tests__/react-radio-checkbox.test.js create mode 100644 packages/react-radio-checkbox/dist/react-radio-checkbox.cjs.js create mode 100644 packages/react-radio-checkbox/dist/react-radio-checkbox.esm.js create mode 100644 packages/react-radio-checkbox/docs/react-checkbox.stories.js create mode 100644 packages/react-radio-checkbox/docs/react-radio.stories.js create mode 100644 packages/react-radio-checkbox/lib/react-radio-checkbox.js create mode 100644 packages/react-radio-checkbox/package.json diff --git a/packages/react-radio-checkbox/README.md b/packages/react-radio-checkbox/README.md new file mode 100644 index 00000000..0bf2ef71 --- /dev/null +++ b/packages/react-radio-checkbox/README.md @@ -0,0 +1,11 @@ +# `@wpmudev/react-radio-checkbox` + +> TODO: description + +## Usage + +``` +const reactRadioAndCheckbox = require('@wpmudev/react-radio-checkbox'); + +// TODO: DEMONSTRATE API +``` diff --git a/packages/react-radio-checkbox/__tests__/react-radio-checkbox.test.js b/packages/react-radio-checkbox/__tests__/react-radio-checkbox.test.js new file mode 100644 index 00000000..0144c5b2 --- /dev/null +++ b/packages/react-radio-checkbox/__tests__/react-radio-checkbox.test.js @@ -0,0 +1,7 @@ +'use strict'; + +const reactRadioAndCheckbox = require('..'); + +describe('@wpmudev/react-radio-checkbox', () => { + it('needs tests'); +}); diff --git a/packages/react-radio-checkbox/dist/react-radio-checkbox.cjs.js b/packages/react-radio-checkbox/dist/react-radio-checkbox.cjs.js new file mode 100644 index 00000000..c1d839fd --- /dev/null +++ b/packages/react-radio-checkbox/dist/react-radio-checkbox.cjs.js @@ -0,0 +1,159 @@ +'use strict'; + +Object.defineProperty(exports, '__esModule', { value: true }); + +var React = require('react'); + +function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } + +var React__default = /*#__PURE__*/_interopDefaultLegacy(React); + +function _extends() { + _extends = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; + }; + + return _extends.apply(this, arguments); +} + +function _objectWithoutPropertiesLoose(source, excluded) { + if (source == null) return {}; + var target = {}; + var sourceKeys = Object.keys(source); + var key, i; + + for (i = 0; i < sourceKeys.length; i++) { + key = sourceKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + target[key] = source[key]; + } + + return target; +} + +function _objectWithoutProperties(source, excluded) { + if (source == null) return {}; + + var target = _objectWithoutPropertiesLoose(source, excluded); + + var key, i; + + if (Object.getOwnPropertySymbols) { + var sourceSymbolKeys = Object.getOwnPropertySymbols(source); + + for (i = 0; i < sourceSymbolKeys.length; i++) { + key = sourceSymbolKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; + target[key] = source[key]; + } + } + + return target; +} + +var RadioCheckboxInput = function RadioCheckboxInput(_ref) { + var type = _ref.type, + label = _ref.label, + labelId = _ref.labelId, + mainClasses = _ref.mainClasses, + id = _ref.id, + name = _ref.name, + image = _ref.image, + defaultChecked = _ref.defaultChecked, + disabled = _ref.disabled, + props = _objectWithoutProperties(_ref, ["type", "label", "labelId", "mainClasses", "id", "name", "image", "defaultChecked", "disabled"]); + + return image ? /*#__PURE__*/React__default['default'].createElement("label", { + className: "sui-".concat(type, "-image"), + htmlFor: id + }, /*#__PURE__*/React__default['default'].createElement("img", { + src: image.src, + srcSet: image.srcset, + alt: image.alt + }), /*#__PURE__*/React__default['default'].createElement("span", { + className: mainClasses + }, /*#__PURE__*/React__default['default'].createElement("input", _extends({ + id: id, + type: type, + name: name, + "aria-labelledby": labelId, + disabled: disabled, + defaultChecked: defaultChecked + }, props)), /*#__PURE__*/React__default['default'].createElement("span", { + "aria-hidden": "true" + }), label && /*#__PURE__*/React__default['default'].createElement("span", { + id: labelId + }, label))) : /*#__PURE__*/React__default['default'].createElement("label", { + className: mainClasses, + htmlFor: id + }, /*#__PURE__*/React__default['default'].createElement("input", _extends({ + id: id, + type: type, + name: name, + "aria-labelledby": labelId, + defaultChecked: defaultChecked, + disabled: disabled + }, props)), /*#__PURE__*/React__default['default'].createElement("span", { + "aria-hidden": "true" + }), label && /*#__PURE__*/React__default['default'].createElement("span", { + id: labelId + }, label)); +}; + +var RadioCheckboxGroup = function RadioCheckboxGroup(_ref2) { + var size = _ref2.size, + stacked = _ref2.stacked, + type = _ref2.type, + options = _ref2.options; + var mainClasses = ["sui-".concat(type)]; + + if (size === 'small') { + mainClasses.push("sui-".concat(type, "-sm")); + } + + if (stacked) { + mainClasses.push("sui-".concat(type, "-stacked")); + } + + return /*#__PURE__*/React__default['default'].createElement("div", { + className: "sui-form-field", + role: type == 'radio' ? 'radiogroup' : 'group' + }, options === null || options === void 0 ? void 0 : options.map(function (option, index) { + return option.image ? /*#__PURE__*/React__default['default'].createElement(RadioCheckboxInput, { + index: index, + type: type, + label: option.label, + labelId: option.labelId, + mainClasses: mainClasses.join(' '), + id: option.id, + name: option.name, + image: option.image, + defaultChecked: option.defaultChecked, + disabled: option.disabled + }) : /*#__PURE__*/React__default['default'].createElement(RadioCheckboxInput, { + index: index, + type: type, + label: option.label, + labelId: option.labelId, + mainClasses: mainClasses.join(' '), + id: option.id, + name: option.name, + defaultChecked: option.defaultChecked, + disabled: option.disabled + }); + })); +}; + +exports.RadioCheckboxGroup = RadioCheckboxGroup; +exports.RadioCheckboxInput = RadioCheckboxInput; diff --git a/packages/react-radio-checkbox/dist/react-radio-checkbox.esm.js b/packages/react-radio-checkbox/dist/react-radio-checkbox.esm.js new file mode 100644 index 00000000..e1ba63c5 --- /dev/null +++ b/packages/react-radio-checkbox/dist/react-radio-checkbox.esm.js @@ -0,0 +1,150 @@ +import React from 'react'; + +function _extends() { + _extends = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; + }; + + return _extends.apply(this, arguments); +} + +function _objectWithoutPropertiesLoose(source, excluded) { + if (source == null) return {}; + var target = {}; + var sourceKeys = Object.keys(source); + var key, i; + + for (i = 0; i < sourceKeys.length; i++) { + key = sourceKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + target[key] = source[key]; + } + + return target; +} + +function _objectWithoutProperties(source, excluded) { + if (source == null) return {}; + + var target = _objectWithoutPropertiesLoose(source, excluded); + + var key, i; + + if (Object.getOwnPropertySymbols) { + var sourceSymbolKeys = Object.getOwnPropertySymbols(source); + + for (i = 0; i < sourceSymbolKeys.length; i++) { + key = sourceSymbolKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; + target[key] = source[key]; + } + } + + return target; +} + +var RadioCheckboxInput = function RadioCheckboxInput(_ref) { + var type = _ref.type, + label = _ref.label, + labelId = _ref.labelId, + mainClasses = _ref.mainClasses, + id = _ref.id, + name = _ref.name, + image = _ref.image, + defaultChecked = _ref.defaultChecked, + disabled = _ref.disabled, + props = _objectWithoutProperties(_ref, ["type", "label", "labelId", "mainClasses", "id", "name", "image", "defaultChecked", "disabled"]); + + return image ? /*#__PURE__*/React.createElement("label", { + className: "sui-".concat(type, "-image"), + htmlFor: id + }, /*#__PURE__*/React.createElement("img", { + src: image.src, + srcSet: image.srcset, + alt: image.alt + }), /*#__PURE__*/React.createElement("span", { + className: mainClasses + }, /*#__PURE__*/React.createElement("input", _extends({ + id: id, + type: type, + name: name, + "aria-labelledby": labelId, + disabled: disabled, + defaultChecked: defaultChecked + }, props)), /*#__PURE__*/React.createElement("span", { + "aria-hidden": "true" + }), label && /*#__PURE__*/React.createElement("span", { + id: labelId + }, label))) : /*#__PURE__*/React.createElement("label", { + className: mainClasses, + htmlFor: id + }, /*#__PURE__*/React.createElement("input", _extends({ + id: id, + type: type, + name: name, + "aria-labelledby": labelId, + defaultChecked: defaultChecked, + disabled: disabled + }, props)), /*#__PURE__*/React.createElement("span", { + "aria-hidden": "true" + }), label && /*#__PURE__*/React.createElement("span", { + id: labelId + }, label)); +}; + +var RadioCheckboxGroup = function RadioCheckboxGroup(_ref2) { + var size = _ref2.size, + stacked = _ref2.stacked, + type = _ref2.type, + options = _ref2.options; + var mainClasses = ["sui-".concat(type)]; + + if (size === 'small') { + mainClasses.push("sui-".concat(type, "-sm")); + } + + if (stacked) { + mainClasses.push("sui-".concat(type, "-stacked")); + } + + return /*#__PURE__*/React.createElement("div", { + className: "sui-form-field", + role: type == 'radio' ? 'radiogroup' : 'group' + }, options === null || options === void 0 ? void 0 : options.map(function (option, index) { + return option.image ? /*#__PURE__*/React.createElement(RadioCheckboxInput, { + index: index, + type: type, + label: option.label, + labelId: option.labelId, + mainClasses: mainClasses.join(' '), + id: option.id, + name: option.name, + image: option.image, + defaultChecked: option.defaultChecked, + disabled: option.disabled + }) : /*#__PURE__*/React.createElement(RadioCheckboxInput, { + index: index, + type: type, + label: option.label, + labelId: option.labelId, + mainClasses: mainClasses.join(' '), + id: option.id, + name: option.name, + defaultChecked: option.defaultChecked, + disabled: option.disabled + }); + })); +}; + +export { RadioCheckboxGroup, RadioCheckboxInput }; diff --git a/packages/react-radio-checkbox/docs/react-checkbox.stories.js b/packages/react-radio-checkbox/docs/react-checkbox.stories.js new file mode 100644 index 00000000..1f6c6468 --- /dev/null +++ b/packages/react-radio-checkbox/docs/react-checkbox.stories.js @@ -0,0 +1,150 @@ +import React from 'react'; +import { Box, BoxBody } from '@wpmudev/react-box'; +import { RadioCheckboxGroup } from '../lib/react-radio-checkbox'; + +export default { + title: 'Components/Radio and Checkbox/Checkbox', + args: { + size: 'default', + type: 'checkbox', + options: [ + { + id: 'checkbox1', + name: 'checkbox', + label: 'Unchecked', + labelId: 'checkbox1-label', + defaultChecked: false, + disabled: false, + }, + { + id: 'checkbox2', + name: 'checkbox', + label: 'Unchecked', + labelId: 'checkbox2-label', + defaultChecked: false, + disabled: false, + }, + { + id: 'checkbox3', + name: 'checkbox', + label: 'Checked', + labelId: 'checkbox3-label', + defaultChecked: true, + disabled: false, + } + ], + }, + argTypes: { + size: { + control: { + type: 'select', + options: ['default', 'small'], + }, + }, + type: { + control: { + type: 'select', + options: ['radio', 'checkbox'], + }, + } + }, +}; + +const Template = ({ ...props }) => { + return ( + + + + + + ); +} + +export const primary = Template.bind({}); +primary.storyName = 'Default'; +primary.args = { + stacked: false, +}; + +export const stacked = Template.bind({}); +stacked.storyName = 'Stacked'; +stacked.args = { + stacked: true, +} + +export const small = Template.bind({}); +small.storyName = 'Small'; +small.args = { + size: 'small', + stacked: false, +} + +export const disabled = Template.bind({}); +disabled.storyName = 'Disabled'; +disabled.args = { + stacked: false, + options: [ + { + id: 'checkbox1', + name: 'checkbox', + label: 'Disabled (Unchecked)', + labelId: 'checkbox1-label', + defaultChecked: false, + disabled: true, + }, + { + id: 'checkbox2', + name: 'checkbox', + label: 'Disabled (Checked)', + labelId: 'checkbox2-label', + defaultChecked: true, + disabled: true, + }, + ], +} + +export const image = Template.bind({}); +image.storyName = 'Image'; +image.args = { + options: [ + { + id: 'checkbox1', + name: 'checkbox', + label: 'Unchecked', + labelId: 'checkbox1-label', + defaultChecked: false, + disabled: false, + image: { + src: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-smartcrawl-icon.png', + srcset: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-smartcrawl-icon@2x.png 2x', + alt: 'SmartCrawl plugin character in a red circular background', + }, + }, + { + id: 'checkbox2', + name: 'checkbox', + label: 'Unchecked', + labelId: 'checkbox2-label', + defaultChecked: false, + disabled: false, + image: { + src: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-defender-icon.png', + srcset: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-defender-icon@2x.png 2x', + alt: 'Defender plugin character in a black circular background', + }, + }, + { + id: 'checkbox3', + name: 'checkbox', + label: 'Checked', + labelId: 'checkbox3-label', + defaultChecked: true, + disabled: false, + image: { + src: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-smush-icon.png', + srcset: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-smush-icon@2x.png 2x', + alt: 'Smush plugin character in a green circular background', + }, + } + ], +} \ No newline at end of file diff --git a/packages/react-radio-checkbox/docs/react-radio.stories.js b/packages/react-radio-checkbox/docs/react-radio.stories.js new file mode 100644 index 00000000..b671f9fa --- /dev/null +++ b/packages/react-radio-checkbox/docs/react-radio.stories.js @@ -0,0 +1,150 @@ +import React from 'react'; +import { Box, BoxBody } from '@wpmudev/react-box'; +import { RadioCheckboxGroup } from '../lib/react-radio-checkbox'; + +export default { + title: 'Components/Radio and Checkbox/Radio', + args: { + size: 'default', + type: 'radio', + options: [ + { + id: 'radio1', + name: 'radio', + label: 'Unchecked', + labelId: 'radio1-label', + defaultChecked: false, + disabled: false, + }, + { + id: 'radio2', + name: 'radio', + label: 'Unchecked', + labelId: 'radio2-label', + defaultChecked: false, + disabled: false, + }, + { + id: 'radio3', + name: 'radio', + label: 'Checked', + labelId: 'radio3-label', + defaultChecked: true, + disabled: false, + } + ], + }, + argTypes: { + size: { + control: { + type: 'select', + options: ['default', 'small'], + }, + }, + type: { + control: { + type: 'select', + options: ['radio', 'checkbox'], + }, + } + }, +}; + +const Template = ({ ...props }) => { + return ( + + + + + + ); +} + +export const primary = Template.bind({}); +primary.storyName = 'Default'; +primary.args = { + stacked: false, +}; + +export const stacked = Template.bind({}); +stacked.storyName = 'Stacked'; +stacked.args = { + stacked: true, +} + +export const small = Template.bind({}); +small.storyName = 'Small'; +small.args = { + size: 'small', + stacked: false, +} + +export const disabled = Template.bind({}); +disabled.storyName = 'Disabled'; +disabled.args = { + stacked: false, + options: [ + { + id: 'radio1', + name: 'radio', + label: 'Disabled (Unchecked)', + labelId: 'radio1-label', + defaultChecked: false, + disabled: true, + }, + { + id: 'radio2', + name: 'radio', + label: 'Disabled (Checked)', + labelId: 'radio2-label', + defaultChecked: true, + disabled: true, + }, + ], +} + +export const image = Template.bind({}); +image.storyName = 'Image'; +image.args = { + options: [ + { + id: 'radio1', + name: 'radio', + label: 'Unchecked', + labelId: 'radio1-label', + defaultChecked: false, + disabled: false, + image: { + src: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-smartcrawl-icon.png', + srcset: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-smartcrawl-icon@2x.png 2x', + alt: 'SmartCrawl plugin character in a red circular background', + }, + }, + { + id: 'radio2', + name: 'radio', + label: 'Unchecked', + labelId: 'radio2-label', + defaultChecked: false, + disabled: false, + image: { + src: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-defender-icon.png', + srcset: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-defender-icon@2x.png 2x', + alt: 'Defender plugin character in a black circular background', + }, + }, + { + id: 'radio3', + name: 'radio', + label: 'Checked', + labelId: 'radio3-label', + defaultChecked: true, + disabled: false, + image: { + src: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-smush-icon.png', + srcset: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-smush-icon@2x.png 2x', + alt: 'Smush plugin character in a green circular background', + }, + } + ], +} \ No newline at end of file diff --git a/packages/react-radio-checkbox/lib/react-radio-checkbox.js b/packages/react-radio-checkbox/lib/react-radio-checkbox.js new file mode 100644 index 00000000..fce19c3f --- /dev/null +++ b/packages/react-radio-checkbox/lib/react-radio-checkbox.js @@ -0,0 +1,105 @@ +import React from 'react' + +const RadioCheckboxInput = ({ + type, + label, + labelId, + id, + name, + image, + defaultChecked, + disabled, + ...props +}) => { + + const mainClasses = [`sui-${type}`]; + + if (props.size === 'small') { + mainClasses.push(`sui-${type}-sm`); + } + + if (props.stacked) { + mainClasses.push(`sui-${type}-stacked`); + } + + return ( + image ? ( + + ) : ( + + ) + ); +} + +const RadioCheckboxGroup = ({ type, options, ...props }) => { + return ( +
+ {options?.map((option, index) => { + return ( + option.image ? + ( + + ) : ( + + ) + ); + })} +
+ ) +} + +export { + RadioCheckboxGroup, + RadioCheckboxInput +} \ No newline at end of file diff --git a/packages/react-radio-checkbox/package.json b/packages/react-radio-checkbox/package.json new file mode 100644 index 00000000..2177cfc6 --- /dev/null +++ b/packages/react-radio-checkbox/package.json @@ -0,0 +1,35 @@ +{ + "name": "@wpmudev/react-radio-checkbox", + "version": "1.0.0", + "description": "Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth is in ya face when ya hear the British cannons go / BOOM", + "keywords": [], + "author": "Pawan Kumar ", + "license": "ISC", + "main": "dist/react-radio-checkbox.cjs.js", + "module": "dist/react-radio-checkbox.esm.js", + "src": "lib/react-radio-checkbox.js", + "directories": { + "lib": "lib", + "test": "__tests__" + }, + "files": [ + "dist", + "lib" + ], + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/wpmudev/shared-ui-react.git", + "directory": "packages/react-radio-checkbox" + }, + "scripts": { + "build": "sui-builder", + "test": "echo \"Error: run tests from root\" && exit 1" + }, + "bugs": { + "url": "https://github.com/wpmudev/shared-ui-react/issues" + }, + "homepage": "https://github.com/wpmudev/shared-ui-react#readme" +} From b052cc2cfbdd36ec98f046992841cd8dbcb48982 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Thu, 31 Mar 2022 11:13:57 +0530 Subject: [PATCH 011/310] revert changes --- packages/react-radio-checkbox/README.md | 11 -- .../__tests__/react-radio-checkbox.test.js | 7 - .../dist/react-radio-checkbox.cjs.js | 159 ------------------ .../dist/react-radio-checkbox.esm.js | 150 ----------------- .../docs/react-checkbox.stories.js | 150 ----------------- .../docs/react-radio.stories.js | 150 ----------------- .../lib/react-radio-checkbox.js | 105 ------------ packages/react-radio-checkbox/package.json | 35 ---- 8 files changed, 767 deletions(-) delete mode 100644 packages/react-radio-checkbox/README.md delete mode 100644 packages/react-radio-checkbox/__tests__/react-radio-checkbox.test.js delete mode 100644 packages/react-radio-checkbox/dist/react-radio-checkbox.cjs.js delete mode 100644 packages/react-radio-checkbox/dist/react-radio-checkbox.esm.js delete mode 100644 packages/react-radio-checkbox/docs/react-checkbox.stories.js delete mode 100644 packages/react-radio-checkbox/docs/react-radio.stories.js delete mode 100644 packages/react-radio-checkbox/lib/react-radio-checkbox.js delete mode 100644 packages/react-radio-checkbox/package.json diff --git a/packages/react-radio-checkbox/README.md b/packages/react-radio-checkbox/README.md deleted file mode 100644 index 0bf2ef71..00000000 --- a/packages/react-radio-checkbox/README.md +++ /dev/null @@ -1,11 +0,0 @@ -# `@wpmudev/react-radio-checkbox` - -> TODO: description - -## Usage - -``` -const reactRadioAndCheckbox = require('@wpmudev/react-radio-checkbox'); - -// TODO: DEMONSTRATE API -``` diff --git a/packages/react-radio-checkbox/__tests__/react-radio-checkbox.test.js b/packages/react-radio-checkbox/__tests__/react-radio-checkbox.test.js deleted file mode 100644 index 0144c5b2..00000000 --- a/packages/react-radio-checkbox/__tests__/react-radio-checkbox.test.js +++ /dev/null @@ -1,7 +0,0 @@ -'use strict'; - -const reactRadioAndCheckbox = require('..'); - -describe('@wpmudev/react-radio-checkbox', () => { - it('needs tests'); -}); diff --git a/packages/react-radio-checkbox/dist/react-radio-checkbox.cjs.js b/packages/react-radio-checkbox/dist/react-radio-checkbox.cjs.js deleted file mode 100644 index c1d839fd..00000000 --- a/packages/react-radio-checkbox/dist/react-radio-checkbox.cjs.js +++ /dev/null @@ -1,159 +0,0 @@ -'use strict'; - -Object.defineProperty(exports, '__esModule', { value: true }); - -var React = require('react'); - -function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } - -var React__default = /*#__PURE__*/_interopDefaultLegacy(React); - -function _extends() { - _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - return _extends.apply(this, arguments); -} - -function _objectWithoutPropertiesLoose(source, excluded) { - if (source == null) return {}; - var target = {}; - var sourceKeys = Object.keys(source); - var key, i; - - for (i = 0; i < sourceKeys.length; i++) { - key = sourceKeys[i]; - if (excluded.indexOf(key) >= 0) continue; - target[key] = source[key]; - } - - return target; -} - -function _objectWithoutProperties(source, excluded) { - if (source == null) return {}; - - var target = _objectWithoutPropertiesLoose(source, excluded); - - var key, i; - - if (Object.getOwnPropertySymbols) { - var sourceSymbolKeys = Object.getOwnPropertySymbols(source); - - for (i = 0; i < sourceSymbolKeys.length; i++) { - key = sourceSymbolKeys[i]; - if (excluded.indexOf(key) >= 0) continue; - if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; - target[key] = source[key]; - } - } - - return target; -} - -var RadioCheckboxInput = function RadioCheckboxInput(_ref) { - var type = _ref.type, - label = _ref.label, - labelId = _ref.labelId, - mainClasses = _ref.mainClasses, - id = _ref.id, - name = _ref.name, - image = _ref.image, - defaultChecked = _ref.defaultChecked, - disabled = _ref.disabled, - props = _objectWithoutProperties(_ref, ["type", "label", "labelId", "mainClasses", "id", "name", "image", "defaultChecked", "disabled"]); - - return image ? /*#__PURE__*/React__default['default'].createElement("label", { - className: "sui-".concat(type, "-image"), - htmlFor: id - }, /*#__PURE__*/React__default['default'].createElement("img", { - src: image.src, - srcSet: image.srcset, - alt: image.alt - }), /*#__PURE__*/React__default['default'].createElement("span", { - className: mainClasses - }, /*#__PURE__*/React__default['default'].createElement("input", _extends({ - id: id, - type: type, - name: name, - "aria-labelledby": labelId, - disabled: disabled, - defaultChecked: defaultChecked - }, props)), /*#__PURE__*/React__default['default'].createElement("span", { - "aria-hidden": "true" - }), label && /*#__PURE__*/React__default['default'].createElement("span", { - id: labelId - }, label))) : /*#__PURE__*/React__default['default'].createElement("label", { - className: mainClasses, - htmlFor: id - }, /*#__PURE__*/React__default['default'].createElement("input", _extends({ - id: id, - type: type, - name: name, - "aria-labelledby": labelId, - defaultChecked: defaultChecked, - disabled: disabled - }, props)), /*#__PURE__*/React__default['default'].createElement("span", { - "aria-hidden": "true" - }), label && /*#__PURE__*/React__default['default'].createElement("span", { - id: labelId - }, label)); -}; - -var RadioCheckboxGroup = function RadioCheckboxGroup(_ref2) { - var size = _ref2.size, - stacked = _ref2.stacked, - type = _ref2.type, - options = _ref2.options; - var mainClasses = ["sui-".concat(type)]; - - if (size === 'small') { - mainClasses.push("sui-".concat(type, "-sm")); - } - - if (stacked) { - mainClasses.push("sui-".concat(type, "-stacked")); - } - - return /*#__PURE__*/React__default['default'].createElement("div", { - className: "sui-form-field", - role: type == 'radio' ? 'radiogroup' : 'group' - }, options === null || options === void 0 ? void 0 : options.map(function (option, index) { - return option.image ? /*#__PURE__*/React__default['default'].createElement(RadioCheckboxInput, { - index: index, - type: type, - label: option.label, - labelId: option.labelId, - mainClasses: mainClasses.join(' '), - id: option.id, - name: option.name, - image: option.image, - defaultChecked: option.defaultChecked, - disabled: option.disabled - }) : /*#__PURE__*/React__default['default'].createElement(RadioCheckboxInput, { - index: index, - type: type, - label: option.label, - labelId: option.labelId, - mainClasses: mainClasses.join(' '), - id: option.id, - name: option.name, - defaultChecked: option.defaultChecked, - disabled: option.disabled - }); - })); -}; - -exports.RadioCheckboxGroup = RadioCheckboxGroup; -exports.RadioCheckboxInput = RadioCheckboxInput; diff --git a/packages/react-radio-checkbox/dist/react-radio-checkbox.esm.js b/packages/react-radio-checkbox/dist/react-radio-checkbox.esm.js deleted file mode 100644 index e1ba63c5..00000000 --- a/packages/react-radio-checkbox/dist/react-radio-checkbox.esm.js +++ /dev/null @@ -1,150 +0,0 @@ -import React from 'react'; - -function _extends() { - _extends = Object.assign || function (target) { - for (var i = 1; i < arguments.length; i++) { - var source = arguments[i]; - - for (var key in source) { - if (Object.prototype.hasOwnProperty.call(source, key)) { - target[key] = source[key]; - } - } - } - - return target; - }; - - return _extends.apply(this, arguments); -} - -function _objectWithoutPropertiesLoose(source, excluded) { - if (source == null) return {}; - var target = {}; - var sourceKeys = Object.keys(source); - var key, i; - - for (i = 0; i < sourceKeys.length; i++) { - key = sourceKeys[i]; - if (excluded.indexOf(key) >= 0) continue; - target[key] = source[key]; - } - - return target; -} - -function _objectWithoutProperties(source, excluded) { - if (source == null) return {}; - - var target = _objectWithoutPropertiesLoose(source, excluded); - - var key, i; - - if (Object.getOwnPropertySymbols) { - var sourceSymbolKeys = Object.getOwnPropertySymbols(source); - - for (i = 0; i < sourceSymbolKeys.length; i++) { - key = sourceSymbolKeys[i]; - if (excluded.indexOf(key) >= 0) continue; - if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; - target[key] = source[key]; - } - } - - return target; -} - -var RadioCheckboxInput = function RadioCheckboxInput(_ref) { - var type = _ref.type, - label = _ref.label, - labelId = _ref.labelId, - mainClasses = _ref.mainClasses, - id = _ref.id, - name = _ref.name, - image = _ref.image, - defaultChecked = _ref.defaultChecked, - disabled = _ref.disabled, - props = _objectWithoutProperties(_ref, ["type", "label", "labelId", "mainClasses", "id", "name", "image", "defaultChecked", "disabled"]); - - return image ? /*#__PURE__*/React.createElement("label", { - className: "sui-".concat(type, "-image"), - htmlFor: id - }, /*#__PURE__*/React.createElement("img", { - src: image.src, - srcSet: image.srcset, - alt: image.alt - }), /*#__PURE__*/React.createElement("span", { - className: mainClasses - }, /*#__PURE__*/React.createElement("input", _extends({ - id: id, - type: type, - name: name, - "aria-labelledby": labelId, - disabled: disabled, - defaultChecked: defaultChecked - }, props)), /*#__PURE__*/React.createElement("span", { - "aria-hidden": "true" - }), label && /*#__PURE__*/React.createElement("span", { - id: labelId - }, label))) : /*#__PURE__*/React.createElement("label", { - className: mainClasses, - htmlFor: id - }, /*#__PURE__*/React.createElement("input", _extends({ - id: id, - type: type, - name: name, - "aria-labelledby": labelId, - defaultChecked: defaultChecked, - disabled: disabled - }, props)), /*#__PURE__*/React.createElement("span", { - "aria-hidden": "true" - }), label && /*#__PURE__*/React.createElement("span", { - id: labelId - }, label)); -}; - -var RadioCheckboxGroup = function RadioCheckboxGroup(_ref2) { - var size = _ref2.size, - stacked = _ref2.stacked, - type = _ref2.type, - options = _ref2.options; - var mainClasses = ["sui-".concat(type)]; - - if (size === 'small') { - mainClasses.push("sui-".concat(type, "-sm")); - } - - if (stacked) { - mainClasses.push("sui-".concat(type, "-stacked")); - } - - return /*#__PURE__*/React.createElement("div", { - className: "sui-form-field", - role: type == 'radio' ? 'radiogroup' : 'group' - }, options === null || options === void 0 ? void 0 : options.map(function (option, index) { - return option.image ? /*#__PURE__*/React.createElement(RadioCheckboxInput, { - index: index, - type: type, - label: option.label, - labelId: option.labelId, - mainClasses: mainClasses.join(' '), - id: option.id, - name: option.name, - image: option.image, - defaultChecked: option.defaultChecked, - disabled: option.disabled - }) : /*#__PURE__*/React.createElement(RadioCheckboxInput, { - index: index, - type: type, - label: option.label, - labelId: option.labelId, - mainClasses: mainClasses.join(' '), - id: option.id, - name: option.name, - defaultChecked: option.defaultChecked, - disabled: option.disabled - }); - })); -}; - -export { RadioCheckboxGroup, RadioCheckboxInput }; diff --git a/packages/react-radio-checkbox/docs/react-checkbox.stories.js b/packages/react-radio-checkbox/docs/react-checkbox.stories.js deleted file mode 100644 index 1f6c6468..00000000 --- a/packages/react-radio-checkbox/docs/react-checkbox.stories.js +++ /dev/null @@ -1,150 +0,0 @@ -import React from 'react'; -import { Box, BoxBody } from '@wpmudev/react-box'; -import { RadioCheckboxGroup } from '../lib/react-radio-checkbox'; - -export default { - title: 'Components/Radio and Checkbox/Checkbox', - args: { - size: 'default', - type: 'checkbox', - options: [ - { - id: 'checkbox1', - name: 'checkbox', - label: 'Unchecked', - labelId: 'checkbox1-label', - defaultChecked: false, - disabled: false, - }, - { - id: 'checkbox2', - name: 'checkbox', - label: 'Unchecked', - labelId: 'checkbox2-label', - defaultChecked: false, - disabled: false, - }, - { - id: 'checkbox3', - name: 'checkbox', - label: 'Checked', - labelId: 'checkbox3-label', - defaultChecked: true, - disabled: false, - } - ], - }, - argTypes: { - size: { - control: { - type: 'select', - options: ['default', 'small'], - }, - }, - type: { - control: { - type: 'select', - options: ['radio', 'checkbox'], - }, - } - }, -}; - -const Template = ({ ...props }) => { - return ( - - - - - - ); -} - -export const primary = Template.bind({}); -primary.storyName = 'Default'; -primary.args = { - stacked: false, -}; - -export const stacked = Template.bind({}); -stacked.storyName = 'Stacked'; -stacked.args = { - stacked: true, -} - -export const small = Template.bind({}); -small.storyName = 'Small'; -small.args = { - size: 'small', - stacked: false, -} - -export const disabled = Template.bind({}); -disabled.storyName = 'Disabled'; -disabled.args = { - stacked: false, - options: [ - { - id: 'checkbox1', - name: 'checkbox', - label: 'Disabled (Unchecked)', - labelId: 'checkbox1-label', - defaultChecked: false, - disabled: true, - }, - { - id: 'checkbox2', - name: 'checkbox', - label: 'Disabled (Checked)', - labelId: 'checkbox2-label', - defaultChecked: true, - disabled: true, - }, - ], -} - -export const image = Template.bind({}); -image.storyName = 'Image'; -image.args = { - options: [ - { - id: 'checkbox1', - name: 'checkbox', - label: 'Unchecked', - labelId: 'checkbox1-label', - defaultChecked: false, - disabled: false, - image: { - src: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-smartcrawl-icon.png', - srcset: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-smartcrawl-icon@2x.png 2x', - alt: 'SmartCrawl plugin character in a red circular background', - }, - }, - { - id: 'checkbox2', - name: 'checkbox', - label: 'Unchecked', - labelId: 'checkbox2-label', - defaultChecked: false, - disabled: false, - image: { - src: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-defender-icon.png', - srcset: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-defender-icon@2x.png 2x', - alt: 'Defender plugin character in a black circular background', - }, - }, - { - id: 'checkbox3', - name: 'checkbox', - label: 'Checked', - labelId: 'checkbox3-label', - defaultChecked: true, - disabled: false, - image: { - src: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-smush-icon.png', - srcset: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-smush-icon@2x.png 2x', - alt: 'Smush plugin character in a green circular background', - }, - } - ], -} \ No newline at end of file diff --git a/packages/react-radio-checkbox/docs/react-radio.stories.js b/packages/react-radio-checkbox/docs/react-radio.stories.js deleted file mode 100644 index b671f9fa..00000000 --- a/packages/react-radio-checkbox/docs/react-radio.stories.js +++ /dev/null @@ -1,150 +0,0 @@ -import React from 'react'; -import { Box, BoxBody } from '@wpmudev/react-box'; -import { RadioCheckboxGroup } from '../lib/react-radio-checkbox'; - -export default { - title: 'Components/Radio and Checkbox/Radio', - args: { - size: 'default', - type: 'radio', - options: [ - { - id: 'radio1', - name: 'radio', - label: 'Unchecked', - labelId: 'radio1-label', - defaultChecked: false, - disabled: false, - }, - { - id: 'radio2', - name: 'radio', - label: 'Unchecked', - labelId: 'radio2-label', - defaultChecked: false, - disabled: false, - }, - { - id: 'radio3', - name: 'radio', - label: 'Checked', - labelId: 'radio3-label', - defaultChecked: true, - disabled: false, - } - ], - }, - argTypes: { - size: { - control: { - type: 'select', - options: ['default', 'small'], - }, - }, - type: { - control: { - type: 'select', - options: ['radio', 'checkbox'], - }, - } - }, -}; - -const Template = ({ ...props }) => { - return ( - - - - - - ); -} - -export const primary = Template.bind({}); -primary.storyName = 'Default'; -primary.args = { - stacked: false, -}; - -export const stacked = Template.bind({}); -stacked.storyName = 'Stacked'; -stacked.args = { - stacked: true, -} - -export const small = Template.bind({}); -small.storyName = 'Small'; -small.args = { - size: 'small', - stacked: false, -} - -export const disabled = Template.bind({}); -disabled.storyName = 'Disabled'; -disabled.args = { - stacked: false, - options: [ - { - id: 'radio1', - name: 'radio', - label: 'Disabled (Unchecked)', - labelId: 'radio1-label', - defaultChecked: false, - disabled: true, - }, - { - id: 'radio2', - name: 'radio', - label: 'Disabled (Checked)', - labelId: 'radio2-label', - defaultChecked: true, - disabled: true, - }, - ], -} - -export const image = Template.bind({}); -image.storyName = 'Image'; -image.args = { - options: [ - { - id: 'radio1', - name: 'radio', - label: 'Unchecked', - labelId: 'radio1-label', - defaultChecked: false, - disabled: false, - image: { - src: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-smartcrawl-icon.png', - srcset: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-smartcrawl-icon@2x.png 2x', - alt: 'SmartCrawl plugin character in a red circular background', - }, - }, - { - id: 'radio2', - name: 'radio', - label: 'Unchecked', - labelId: 'radio2-label', - defaultChecked: false, - disabled: false, - image: { - src: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-defender-icon.png', - srcset: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-defender-icon@2x.png 2x', - alt: 'Defender plugin character in a black circular background', - }, - }, - { - id: 'radio3', - name: 'radio', - label: 'Checked', - labelId: 'radio3-label', - defaultChecked: true, - disabled: false, - image: { - src: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-smush-icon.png', - srcset: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-smush-icon@2x.png 2x', - alt: 'Smush plugin character in a green circular background', - }, - } - ], -} \ No newline at end of file diff --git a/packages/react-radio-checkbox/lib/react-radio-checkbox.js b/packages/react-radio-checkbox/lib/react-radio-checkbox.js deleted file mode 100644 index fce19c3f..00000000 --- a/packages/react-radio-checkbox/lib/react-radio-checkbox.js +++ /dev/null @@ -1,105 +0,0 @@ -import React from 'react' - -const RadioCheckboxInput = ({ - type, - label, - labelId, - id, - name, - image, - defaultChecked, - disabled, - ...props -}) => { - - const mainClasses = [`sui-${type}`]; - - if (props.size === 'small') { - mainClasses.push(`sui-${type}-sm`); - } - - if (props.stacked) { - mainClasses.push(`sui-${type}-stacked`); - } - - return ( - image ? ( - - ) : ( - - ) - ); -} - -const RadioCheckboxGroup = ({ type, options, ...props }) => { - return ( -
- {options?.map((option, index) => { - return ( - option.image ? - ( - - ) : ( - - ) - ); - })} -
- ) -} - -export { - RadioCheckboxGroup, - RadioCheckboxInput -} \ No newline at end of file diff --git a/packages/react-radio-checkbox/package.json b/packages/react-radio-checkbox/package.json deleted file mode 100644 index 2177cfc6..00000000 --- a/packages/react-radio-checkbox/package.json +++ /dev/null @@ -1,35 +0,0 @@ -{ - "name": "@wpmudev/react-radio-checkbox", - "version": "1.0.0", - "description": "Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth is in ya face when ya hear the British cannons go / BOOM", - "keywords": [], - "author": "Pawan Kumar ", - "license": "ISC", - "main": "dist/react-radio-checkbox.cjs.js", - "module": "dist/react-radio-checkbox.esm.js", - "src": "lib/react-radio-checkbox.js", - "directories": { - "lib": "lib", - "test": "__tests__" - }, - "files": [ - "dist", - "lib" - ], - "publishConfig": { - "access": "public" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/wpmudev/shared-ui-react.git", - "directory": "packages/react-radio-checkbox" - }, - "scripts": { - "build": "sui-builder", - "test": "echo \"Error: run tests from root\" && exit 1" - }, - "bugs": { - "url": "https://github.com/wpmudev/shared-ui-react/issues" - }, - "homepage": "https://github.com/wpmudev/shared-ui-react#readme" -} From 03924105e2d5223a088070873ba301f8a9fbbdb0 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Thu, 31 Mar 2022 11:14:55 +0530 Subject: [PATCH 012/310] new(checkbox/radio) created new component. --- packages/react-radio-checkbox/README.md | 11 ++ .../__tests__/react-radio-checkbox.test.js | 7 + .../dist/react-radio-checkbox.cjs.js | 159 ++++++++++++++++++ .../dist/react-radio-checkbox.esm.js | 150 +++++++++++++++++ .../docs/react-checkbox.stories.js | 150 +++++++++++++++++ .../docs/react-radio.stories.js | 150 +++++++++++++++++ .../lib/react-radio-checkbox.js | 105 ++++++++++++ packages/react-radio-checkbox/package.json | 35 ++++ 8 files changed, 767 insertions(+) create mode 100644 packages/react-radio-checkbox/README.md create mode 100644 packages/react-radio-checkbox/__tests__/react-radio-checkbox.test.js create mode 100644 packages/react-radio-checkbox/dist/react-radio-checkbox.cjs.js create mode 100644 packages/react-radio-checkbox/dist/react-radio-checkbox.esm.js create mode 100644 packages/react-radio-checkbox/docs/react-checkbox.stories.js create mode 100644 packages/react-radio-checkbox/docs/react-radio.stories.js create mode 100644 packages/react-radio-checkbox/lib/react-radio-checkbox.js create mode 100644 packages/react-radio-checkbox/package.json diff --git a/packages/react-radio-checkbox/README.md b/packages/react-radio-checkbox/README.md new file mode 100644 index 00000000..0bf2ef71 --- /dev/null +++ b/packages/react-radio-checkbox/README.md @@ -0,0 +1,11 @@ +# `@wpmudev/react-radio-checkbox` + +> TODO: description + +## Usage + +``` +const reactRadioAndCheckbox = require('@wpmudev/react-radio-checkbox'); + +// TODO: DEMONSTRATE API +``` diff --git a/packages/react-radio-checkbox/__tests__/react-radio-checkbox.test.js b/packages/react-radio-checkbox/__tests__/react-radio-checkbox.test.js new file mode 100644 index 00000000..0144c5b2 --- /dev/null +++ b/packages/react-radio-checkbox/__tests__/react-radio-checkbox.test.js @@ -0,0 +1,7 @@ +'use strict'; + +const reactRadioAndCheckbox = require('..'); + +describe('@wpmudev/react-radio-checkbox', () => { + it('needs tests'); +}); diff --git a/packages/react-radio-checkbox/dist/react-radio-checkbox.cjs.js b/packages/react-radio-checkbox/dist/react-radio-checkbox.cjs.js new file mode 100644 index 00000000..c1d839fd --- /dev/null +++ b/packages/react-radio-checkbox/dist/react-radio-checkbox.cjs.js @@ -0,0 +1,159 @@ +'use strict'; + +Object.defineProperty(exports, '__esModule', { value: true }); + +var React = require('react'); + +function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } + +var React__default = /*#__PURE__*/_interopDefaultLegacy(React); + +function _extends() { + _extends = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; + }; + + return _extends.apply(this, arguments); +} + +function _objectWithoutPropertiesLoose(source, excluded) { + if (source == null) return {}; + var target = {}; + var sourceKeys = Object.keys(source); + var key, i; + + for (i = 0; i < sourceKeys.length; i++) { + key = sourceKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + target[key] = source[key]; + } + + return target; +} + +function _objectWithoutProperties(source, excluded) { + if (source == null) return {}; + + var target = _objectWithoutPropertiesLoose(source, excluded); + + var key, i; + + if (Object.getOwnPropertySymbols) { + var sourceSymbolKeys = Object.getOwnPropertySymbols(source); + + for (i = 0; i < sourceSymbolKeys.length; i++) { + key = sourceSymbolKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; + target[key] = source[key]; + } + } + + return target; +} + +var RadioCheckboxInput = function RadioCheckboxInput(_ref) { + var type = _ref.type, + label = _ref.label, + labelId = _ref.labelId, + mainClasses = _ref.mainClasses, + id = _ref.id, + name = _ref.name, + image = _ref.image, + defaultChecked = _ref.defaultChecked, + disabled = _ref.disabled, + props = _objectWithoutProperties(_ref, ["type", "label", "labelId", "mainClasses", "id", "name", "image", "defaultChecked", "disabled"]); + + return image ? /*#__PURE__*/React__default['default'].createElement("label", { + className: "sui-".concat(type, "-image"), + htmlFor: id + }, /*#__PURE__*/React__default['default'].createElement("img", { + src: image.src, + srcSet: image.srcset, + alt: image.alt + }), /*#__PURE__*/React__default['default'].createElement("span", { + className: mainClasses + }, /*#__PURE__*/React__default['default'].createElement("input", _extends({ + id: id, + type: type, + name: name, + "aria-labelledby": labelId, + disabled: disabled, + defaultChecked: defaultChecked + }, props)), /*#__PURE__*/React__default['default'].createElement("span", { + "aria-hidden": "true" + }), label && /*#__PURE__*/React__default['default'].createElement("span", { + id: labelId + }, label))) : /*#__PURE__*/React__default['default'].createElement("label", { + className: mainClasses, + htmlFor: id + }, /*#__PURE__*/React__default['default'].createElement("input", _extends({ + id: id, + type: type, + name: name, + "aria-labelledby": labelId, + defaultChecked: defaultChecked, + disabled: disabled + }, props)), /*#__PURE__*/React__default['default'].createElement("span", { + "aria-hidden": "true" + }), label && /*#__PURE__*/React__default['default'].createElement("span", { + id: labelId + }, label)); +}; + +var RadioCheckboxGroup = function RadioCheckboxGroup(_ref2) { + var size = _ref2.size, + stacked = _ref2.stacked, + type = _ref2.type, + options = _ref2.options; + var mainClasses = ["sui-".concat(type)]; + + if (size === 'small') { + mainClasses.push("sui-".concat(type, "-sm")); + } + + if (stacked) { + mainClasses.push("sui-".concat(type, "-stacked")); + } + + return /*#__PURE__*/React__default['default'].createElement("div", { + className: "sui-form-field", + role: type == 'radio' ? 'radiogroup' : 'group' + }, options === null || options === void 0 ? void 0 : options.map(function (option, index) { + return option.image ? /*#__PURE__*/React__default['default'].createElement(RadioCheckboxInput, { + index: index, + type: type, + label: option.label, + labelId: option.labelId, + mainClasses: mainClasses.join(' '), + id: option.id, + name: option.name, + image: option.image, + defaultChecked: option.defaultChecked, + disabled: option.disabled + }) : /*#__PURE__*/React__default['default'].createElement(RadioCheckboxInput, { + index: index, + type: type, + label: option.label, + labelId: option.labelId, + mainClasses: mainClasses.join(' '), + id: option.id, + name: option.name, + defaultChecked: option.defaultChecked, + disabled: option.disabled + }); + })); +}; + +exports.RadioCheckboxGroup = RadioCheckboxGroup; +exports.RadioCheckboxInput = RadioCheckboxInput; diff --git a/packages/react-radio-checkbox/dist/react-radio-checkbox.esm.js b/packages/react-radio-checkbox/dist/react-radio-checkbox.esm.js new file mode 100644 index 00000000..e1ba63c5 --- /dev/null +++ b/packages/react-radio-checkbox/dist/react-radio-checkbox.esm.js @@ -0,0 +1,150 @@ +import React from 'react'; + +function _extends() { + _extends = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; + }; + + return _extends.apply(this, arguments); +} + +function _objectWithoutPropertiesLoose(source, excluded) { + if (source == null) return {}; + var target = {}; + var sourceKeys = Object.keys(source); + var key, i; + + for (i = 0; i < sourceKeys.length; i++) { + key = sourceKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + target[key] = source[key]; + } + + return target; +} + +function _objectWithoutProperties(source, excluded) { + if (source == null) return {}; + + var target = _objectWithoutPropertiesLoose(source, excluded); + + var key, i; + + if (Object.getOwnPropertySymbols) { + var sourceSymbolKeys = Object.getOwnPropertySymbols(source); + + for (i = 0; i < sourceSymbolKeys.length; i++) { + key = sourceSymbolKeys[i]; + if (excluded.indexOf(key) >= 0) continue; + if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; + target[key] = source[key]; + } + } + + return target; +} + +var RadioCheckboxInput = function RadioCheckboxInput(_ref) { + var type = _ref.type, + label = _ref.label, + labelId = _ref.labelId, + mainClasses = _ref.mainClasses, + id = _ref.id, + name = _ref.name, + image = _ref.image, + defaultChecked = _ref.defaultChecked, + disabled = _ref.disabled, + props = _objectWithoutProperties(_ref, ["type", "label", "labelId", "mainClasses", "id", "name", "image", "defaultChecked", "disabled"]); + + return image ? /*#__PURE__*/React.createElement("label", { + className: "sui-".concat(type, "-image"), + htmlFor: id + }, /*#__PURE__*/React.createElement("img", { + src: image.src, + srcSet: image.srcset, + alt: image.alt + }), /*#__PURE__*/React.createElement("span", { + className: mainClasses + }, /*#__PURE__*/React.createElement("input", _extends({ + id: id, + type: type, + name: name, + "aria-labelledby": labelId, + disabled: disabled, + defaultChecked: defaultChecked + }, props)), /*#__PURE__*/React.createElement("span", { + "aria-hidden": "true" + }), label && /*#__PURE__*/React.createElement("span", { + id: labelId + }, label))) : /*#__PURE__*/React.createElement("label", { + className: mainClasses, + htmlFor: id + }, /*#__PURE__*/React.createElement("input", _extends({ + id: id, + type: type, + name: name, + "aria-labelledby": labelId, + defaultChecked: defaultChecked, + disabled: disabled + }, props)), /*#__PURE__*/React.createElement("span", { + "aria-hidden": "true" + }), label && /*#__PURE__*/React.createElement("span", { + id: labelId + }, label)); +}; + +var RadioCheckboxGroup = function RadioCheckboxGroup(_ref2) { + var size = _ref2.size, + stacked = _ref2.stacked, + type = _ref2.type, + options = _ref2.options; + var mainClasses = ["sui-".concat(type)]; + + if (size === 'small') { + mainClasses.push("sui-".concat(type, "-sm")); + } + + if (stacked) { + mainClasses.push("sui-".concat(type, "-stacked")); + } + + return /*#__PURE__*/React.createElement("div", { + className: "sui-form-field", + role: type == 'radio' ? 'radiogroup' : 'group' + }, options === null || options === void 0 ? void 0 : options.map(function (option, index) { + return option.image ? /*#__PURE__*/React.createElement(RadioCheckboxInput, { + index: index, + type: type, + label: option.label, + labelId: option.labelId, + mainClasses: mainClasses.join(' '), + id: option.id, + name: option.name, + image: option.image, + defaultChecked: option.defaultChecked, + disabled: option.disabled + }) : /*#__PURE__*/React.createElement(RadioCheckboxInput, { + index: index, + type: type, + label: option.label, + labelId: option.labelId, + mainClasses: mainClasses.join(' '), + id: option.id, + name: option.name, + defaultChecked: option.defaultChecked, + disabled: option.disabled + }); + })); +}; + +export { RadioCheckboxGroup, RadioCheckboxInput }; diff --git a/packages/react-radio-checkbox/docs/react-checkbox.stories.js b/packages/react-radio-checkbox/docs/react-checkbox.stories.js new file mode 100644 index 00000000..1f6c6468 --- /dev/null +++ b/packages/react-radio-checkbox/docs/react-checkbox.stories.js @@ -0,0 +1,150 @@ +import React from 'react'; +import { Box, BoxBody } from '@wpmudev/react-box'; +import { RadioCheckboxGroup } from '../lib/react-radio-checkbox'; + +export default { + title: 'Components/Radio and Checkbox/Checkbox', + args: { + size: 'default', + type: 'checkbox', + options: [ + { + id: 'checkbox1', + name: 'checkbox', + label: 'Unchecked', + labelId: 'checkbox1-label', + defaultChecked: false, + disabled: false, + }, + { + id: 'checkbox2', + name: 'checkbox', + label: 'Unchecked', + labelId: 'checkbox2-label', + defaultChecked: false, + disabled: false, + }, + { + id: 'checkbox3', + name: 'checkbox', + label: 'Checked', + labelId: 'checkbox3-label', + defaultChecked: true, + disabled: false, + } + ], + }, + argTypes: { + size: { + control: { + type: 'select', + options: ['default', 'small'], + }, + }, + type: { + control: { + type: 'select', + options: ['radio', 'checkbox'], + }, + } + }, +}; + +const Template = ({ ...props }) => { + return ( + + + + + + ); +} + +export const primary = Template.bind({}); +primary.storyName = 'Default'; +primary.args = { + stacked: false, +}; + +export const stacked = Template.bind({}); +stacked.storyName = 'Stacked'; +stacked.args = { + stacked: true, +} + +export const small = Template.bind({}); +small.storyName = 'Small'; +small.args = { + size: 'small', + stacked: false, +} + +export const disabled = Template.bind({}); +disabled.storyName = 'Disabled'; +disabled.args = { + stacked: false, + options: [ + { + id: 'checkbox1', + name: 'checkbox', + label: 'Disabled (Unchecked)', + labelId: 'checkbox1-label', + defaultChecked: false, + disabled: true, + }, + { + id: 'checkbox2', + name: 'checkbox', + label: 'Disabled (Checked)', + labelId: 'checkbox2-label', + defaultChecked: true, + disabled: true, + }, + ], +} + +export const image = Template.bind({}); +image.storyName = 'Image'; +image.args = { + options: [ + { + id: 'checkbox1', + name: 'checkbox', + label: 'Unchecked', + labelId: 'checkbox1-label', + defaultChecked: false, + disabled: false, + image: { + src: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-smartcrawl-icon.png', + srcset: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-smartcrawl-icon@2x.png 2x', + alt: 'SmartCrawl plugin character in a red circular background', + }, + }, + { + id: 'checkbox2', + name: 'checkbox', + label: 'Unchecked', + labelId: 'checkbox2-label', + defaultChecked: false, + disabled: false, + image: { + src: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-defender-icon.png', + srcset: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-defender-icon@2x.png 2x', + alt: 'Defender plugin character in a black circular background', + }, + }, + { + id: 'checkbox3', + name: 'checkbox', + label: 'Checked', + labelId: 'checkbox3-label', + defaultChecked: true, + disabled: false, + image: { + src: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-smush-icon.png', + srcset: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-smush-icon@2x.png 2x', + alt: 'Smush plugin character in a green circular background', + }, + } + ], +} \ No newline at end of file diff --git a/packages/react-radio-checkbox/docs/react-radio.stories.js b/packages/react-radio-checkbox/docs/react-radio.stories.js new file mode 100644 index 00000000..b671f9fa --- /dev/null +++ b/packages/react-radio-checkbox/docs/react-radio.stories.js @@ -0,0 +1,150 @@ +import React from 'react'; +import { Box, BoxBody } from '@wpmudev/react-box'; +import { RadioCheckboxGroup } from '../lib/react-radio-checkbox'; + +export default { + title: 'Components/Radio and Checkbox/Radio', + args: { + size: 'default', + type: 'radio', + options: [ + { + id: 'radio1', + name: 'radio', + label: 'Unchecked', + labelId: 'radio1-label', + defaultChecked: false, + disabled: false, + }, + { + id: 'radio2', + name: 'radio', + label: 'Unchecked', + labelId: 'radio2-label', + defaultChecked: false, + disabled: false, + }, + { + id: 'radio3', + name: 'radio', + label: 'Checked', + labelId: 'radio3-label', + defaultChecked: true, + disabled: false, + } + ], + }, + argTypes: { + size: { + control: { + type: 'select', + options: ['default', 'small'], + }, + }, + type: { + control: { + type: 'select', + options: ['radio', 'checkbox'], + }, + } + }, +}; + +const Template = ({ ...props }) => { + return ( + + + + + + ); +} + +export const primary = Template.bind({}); +primary.storyName = 'Default'; +primary.args = { + stacked: false, +}; + +export const stacked = Template.bind({}); +stacked.storyName = 'Stacked'; +stacked.args = { + stacked: true, +} + +export const small = Template.bind({}); +small.storyName = 'Small'; +small.args = { + size: 'small', + stacked: false, +} + +export const disabled = Template.bind({}); +disabled.storyName = 'Disabled'; +disabled.args = { + stacked: false, + options: [ + { + id: 'radio1', + name: 'radio', + label: 'Disabled (Unchecked)', + labelId: 'radio1-label', + defaultChecked: false, + disabled: true, + }, + { + id: 'radio2', + name: 'radio', + label: 'Disabled (Checked)', + labelId: 'radio2-label', + defaultChecked: true, + disabled: true, + }, + ], +} + +export const image = Template.bind({}); +image.storyName = 'Image'; +image.args = { + options: [ + { + id: 'radio1', + name: 'radio', + label: 'Unchecked', + labelId: 'radio1-label', + defaultChecked: false, + disabled: false, + image: { + src: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-smartcrawl-icon.png', + srcset: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-smartcrawl-icon@2x.png 2x', + alt: 'SmartCrawl plugin character in a red circular background', + }, + }, + { + id: 'radio2', + name: 'radio', + label: 'Unchecked', + labelId: 'radio2-label', + defaultChecked: false, + disabled: false, + image: { + src: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-defender-icon.png', + srcset: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-defender-icon@2x.png 2x', + alt: 'Defender plugin character in a black circular background', + }, + }, + { + id: 'radio3', + name: 'radio', + label: 'Checked', + labelId: 'radio3-label', + defaultChecked: true, + disabled: false, + image: { + src: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-smush-icon.png', + srcset: 'https://wpmudev.github.io/shared-ui/assets/images/plugins-smush-icon@2x.png 2x', + alt: 'Smush plugin character in a green circular background', + }, + } + ], +} \ No newline at end of file diff --git a/packages/react-radio-checkbox/lib/react-radio-checkbox.js b/packages/react-radio-checkbox/lib/react-radio-checkbox.js new file mode 100644 index 00000000..fce19c3f --- /dev/null +++ b/packages/react-radio-checkbox/lib/react-radio-checkbox.js @@ -0,0 +1,105 @@ +import React from 'react' + +const RadioCheckboxInput = ({ + type, + label, + labelId, + id, + name, + image, + defaultChecked, + disabled, + ...props +}) => { + + const mainClasses = [`sui-${type}`]; + + if (props.size === 'small') { + mainClasses.push(`sui-${type}-sm`); + } + + if (props.stacked) { + mainClasses.push(`sui-${type}-stacked`); + } + + return ( + image ? ( + + ) : ( + + ) + ); +} + +const RadioCheckboxGroup = ({ type, options, ...props }) => { + return ( +
+ {options?.map((option, index) => { + return ( + option.image ? + ( + + ) : ( + + ) + ); + })} +
+ ) +} + +export { + RadioCheckboxGroup, + RadioCheckboxInput +} \ No newline at end of file diff --git a/packages/react-radio-checkbox/package.json b/packages/react-radio-checkbox/package.json new file mode 100644 index 00000000..2177cfc6 --- /dev/null +++ b/packages/react-radio-checkbox/package.json @@ -0,0 +1,35 @@ +{ + "name": "@wpmudev/react-radio-checkbox", + "version": "1.0.0", + "description": "Now I’m the model of a modern major general / The venerated Virginian veteran whose men are all / Lining up, to put me up on a pedestal / Writin’ letters to relatives / Embellishin’ my elegance and eloquence / But the elephant is in the room / The truth is in ya face when ya hear the British cannons go / BOOM", + "keywords": [], + "author": "Pawan Kumar ", + "license": "ISC", + "main": "dist/react-radio-checkbox.cjs.js", + "module": "dist/react-radio-checkbox.esm.js", + "src": "lib/react-radio-checkbox.js", + "directories": { + "lib": "lib", + "test": "__tests__" + }, + "files": [ + "dist", + "lib" + ], + "publishConfig": { + "access": "public" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/wpmudev/shared-ui-react.git", + "directory": "packages/react-radio-checkbox" + }, + "scripts": { + "build": "sui-builder", + "test": "echo \"Error: run tests from root\" && exit 1" + }, + "bugs": { + "url": "https://github.com/wpmudev/shared-ui-react/issues" + }, + "homepage": "https://github.com/wpmudev/shared-ui-react#readme" +} From 41819d8c6f0768cd54e525e409042fa3cd263a2d Mon Sep 17 00:00:00 2001 From: Leighton Sapir <2328848+iamleigh@users.noreply.github.com> Date: Mon, 11 Apr 2022 21:17:11 -0500 Subject: [PATCH 013/310] =?UTF-8?q?=F0=9F=A7=91=E2=80=8D=F0=9F=92=BB=20Upd?= =?UTF-8?q?ate=20README=20file.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index 7c42717c..8b386284 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,10 @@ Component | Version [Button Icon](https://wpmudev.github.io/shared-ui-react/?path=/story/components-button-icon--primary) | [![npm version](https://badge.fury.io/js/%40wpmudev%2Freact-button-icon.svg)](https://www.npmjs.com/package/@wpmudev/react-button-icon) [Dropdown](https://wpmudev.github.io/shared-ui-react/?path=/story/components-dropdown--primary) | [![npm version](https://badge.fury.io/js/%40wpmudev%2Freact-dropdown.svg)](https://www.npmjs.com/package/@wpmudev/react-dropdown) [Input](https://wpmudev.github.io/shared-ui-react/?path=/story/components-input--primary) | [![npm version](https://badge.fury.io/js/%40wpmudev%2Freact-input.svg)](https://www.npmjs.com/package/@wpmudev/react-input) +[Notifications](https://wpmudev.github.io/shared-ui-react/?path=/story/components-notifications-single-line--primary) | [![npm version](https://badge.fury.io/js/%40wpmudev%2Freact-notifications.svg)](https://www.npmjs.com/package/@wpmudev/react-notifications) +[Pagination](https://wpmudev.github.io/shared-ui-react/?path=/story/components-pagination--simple) | [![npm version](https://badge.fury.io/js/%40wpmudev%2Freact-pagination.svg)](https://www.npmjs.com/package/@wpmudev/react-pagination) [Post](https://wpmudev.github.io/shared-ui-react/?path=/story/components-post--primary) | [![npm version](https://badge.fury.io/js/%40wpmudev%2Freact-post.svg)](https://www.npmjs.com/package/@wpmudev/react-post) +[Progress Bar](https://wpmudev.github.io/shared-ui-react/?path=/story/components-progress-bar--unboxed) | [![npm version](https://badge.fury.io/js/%40wpmudev%2Freact-progress-bar.svg)](https://www.npmjs.com/package/@wpmudev/react-progress-bar) ## Getting Started From 2e0b3da2aaa0efcbb07977e3619b5bc23bf50d38 Mon Sep 17 00:00:00 2001 From: Leighton Sapir <2328848+iamleigh@users.noreply.github.com> Date: Mon, 11 Apr 2022 21:31:09 -0500 Subject: [PATCH 014/310] =?UTF-8?q?=E2=AC=86=EF=B8=8F=20Upgrade=20to=20Rea?= =?UTF-8?q?ct=2018.0.0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- packages/react-accordion/package.json | 2 +- packages/react-box/package.json | 2 +- packages/react-button-icon/package.json | 2 +- packages/react-button/package.json | 2 +- packages/react-dropdown/package.json | 2 +- packages/react-input/package.json | 2 +- packages/react-modal/package.json | 2 +- packages/react-notifications/package.json | 2 +- packages/react-pagination/package.json | 2 +- packages/react-post/package.json | 2 +- packages/react-progress-bar/package.json | 2 +- 12 files changed, 12 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index aac3a35d..9e1a7735 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "dependencies": { "@octokit/core": "^3.4.0", "@wpmudev/shared-ui": "^2.12.3", - "react": "^17.0.2", + "react": "^18.0.0", "react-dom": "^17.0.2", "regenerator-runtime": "^0.13.7", "typescript": "^4.2.4", diff --git a/packages/react-accordion/package.json b/packages/react-accordion/package.json index f910d064..91003d1c 100644 --- a/packages/react-accordion/package.json +++ b/packages/react-accordion/package.json @@ -44,7 +44,7 @@ }, "devDependencies": { "@wpmudev/react-builder": "^0.0.0", - "react": "^17.0.2" + "react": "^18.0.0" }, "dependencies": { "@wpmudev/react-button-icon": "^1.1.0", diff --git a/packages/react-box/package.json b/packages/react-box/package.json index 04c05b04..7c1e46b5 100644 --- a/packages/react-box/package.json +++ b/packages/react-box/package.json @@ -45,7 +45,7 @@ "devDependencies": { "@wpmudev/react-builder": "^0.0.0", "@wpmudev/react-button": "^1.1.0", - "react": "^17.0.2" + "react": "^18.0.0" }, "dependencies": { "styled-components": "^5.3.0" diff --git a/packages/react-button-icon/package.json b/packages/react-button-icon/package.json index 2cb7d45b..3f3ad9ac 100644 --- a/packages/react-button-icon/package.json +++ b/packages/react-button-icon/package.json @@ -39,6 +39,6 @@ "access": "public" }, "devDependencies": { - "react": "^17.0.2" + "react": "^18.0.0" } } diff --git a/packages/react-button/package.json b/packages/react-button/package.json index 38c933a3..b531a42b 100644 --- a/packages/react-button/package.json +++ b/packages/react-button/package.json @@ -41,6 +41,6 @@ }, "devDependencies": { "@wpmudev/react-builder": "^0.0.0", - "react": "^17.0.2" + "react": "^18.0.0" } } diff --git a/packages/react-dropdown/package.json b/packages/react-dropdown/package.json index b5f82def..45b0e23a 100644 --- a/packages/react-dropdown/package.json +++ b/packages/react-dropdown/package.json @@ -48,6 +48,6 @@ }, "devDependencies": { "@wpmudev/react-builder": "^0.0.0", - "react": "^17.0.2" + "react": "^18.0.0" } } diff --git a/packages/react-input/package.json b/packages/react-input/package.json index b672eb08..e7f91428 100644 --- a/packages/react-input/package.json +++ b/packages/react-input/package.json @@ -41,6 +41,6 @@ "homepage": "https://github.com/wpmudev/shared-ui-react#readme", "devDependencies": { "@wpmudev/react-builder": "^0.0.0", - "react": "^17.0.2" + "react": "^18.0.0" } } diff --git a/packages/react-modal/package.json b/packages/react-modal/package.json index 4f7cdba0..febdf119 100644 --- a/packages/react-modal/package.json +++ b/packages/react-modal/package.json @@ -44,7 +44,7 @@ "@wpmudev/react-button": "^1.1.0", "@wpmudev/react-button-icon": "^1.1.0", "@wpmudev/react-input": "^1.1.0", - "react": "^17.0.2" + "react": "^18.0.0" }, "peerDependencies": { "@wpmudev/shared-ui": "^2.10.8" diff --git a/packages/react-notifications/package.json b/packages/react-notifications/package.json index dc2d5068..833f9694 100644 --- a/packages/react-notifications/package.json +++ b/packages/react-notifications/package.json @@ -42,7 +42,7 @@ "devDependencies": { "@wpmudev/react-builder": "^0.0.0", "@wpmudev/react-button": "^1.1.0", - "react": "^17.0.2" + "react": "^18.0.0" }, "dependencies": { "@wpmudev/react-button-icon": "^1.1.0" diff --git a/packages/react-pagination/package.json b/packages/react-pagination/package.json index 6bbf2d19..bb4ade1c 100644 --- a/packages/react-pagination/package.json +++ b/packages/react-pagination/package.json @@ -49,6 +49,6 @@ "@wpmudev/react-box": "^1.2.5", "@wpmudev/react-builder": "^0.0.0", "@wpmudev/react-button": "^1.1.0", - "react": "^17.0.2" + "react": "^18.0.0" } } diff --git a/packages/react-post/package.json b/packages/react-post/package.json index ed28f730..9fe78340 100644 --- a/packages/react-post/package.json +++ b/packages/react-post/package.json @@ -47,6 +47,6 @@ }, "devDependencies": { "@wpmudev/react-builder": "^0.0.0", - "react": "^17.0.2" + "react": "^18.0.0" } } diff --git a/packages/react-progress-bar/package.json b/packages/react-progress-bar/package.json index 3193453f..ce5760b5 100644 --- a/packages/react-progress-bar/package.json +++ b/packages/react-progress-bar/package.json @@ -41,7 +41,7 @@ }, "devDependencies": { "@wpmudev/react-builder": "^0.0.0", - "react": "^17.0.2" + "react": "^18.0.0" }, "dependencies": { "@wpmudev/react-button-icon": "^1.1.0" From ea3243de558dbe612c0e64899156f24d7a3b51b5 Mon Sep 17 00:00:00 2001 From: Leighton Sapir <2328848+iamleigh@users.noreply.github.com> Date: Mon, 11 Apr 2022 21:32:17 -0500 Subject: [PATCH 015/310] =?UTF-8?q?=F0=9F=94=92=EF=B8=8F=20Update=20`yarn.?= =?UTF-8?q?lock`=20file.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- yarn.lock | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/yarn.lock b/yarn.lock index 925d7b2d..66d22bcd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13574,13 +13574,12 @@ react@^16.8.3: object-assign "^4.1.1" prop-types "^15.6.2" -react@^17.0.2: - version "17.0.2" - resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" - integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA== +react@^18.0.0: + version "18.0.0" + resolved "https://registry.yarnpkg.com/react/-/react-18.0.0.tgz#b468736d1f4a5891f38585ba8e8fb29f91c3cb96" + integrity sha512-x+VL6wbT4JRVPm7EGxXhZ8w8LTROaxPXOqhlGyVSrv0sB1jkyFGgXxJ8LVoPRLvPR6/CIZGFmfzqUa2NYeMr2A== dependencies: loose-envify "^1.1.0" - object-assign "^4.1.1" reactcss@^1.2.0: version "1.2.3" From 7dd8eda63f73e46b7ad7484c80af7d0d728857bb Mon Sep 17 00:00:00 2001 From: Leighton Sapir <2328848+iamleigh@users.noreply.github.com> Date: Mon, 11 Apr 2022 21:55:27 -0500 Subject: [PATCH 016/310] =?UTF-8?q?=F0=9F=94=96=20Update=20`compiler`=20ve?= =?UTF-8?q?rsion.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/compiler/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/compiler/package.json b/packages/compiler/package.json index 7cda8add..14c30fb8 100644 --- a/packages/compiler/package.json +++ b/packages/compiler/package.json @@ -1,7 +1,7 @@ { "private": true, "name": "@wpmudev/react-builder", - "version": "0.0.0", + "version": "1.0.1", "description": "> TODO: description", "author": "WPMU DEV", "contributors": [ From bb1d2ca335bef433034304592882cce4a239140f Mon Sep 17 00:00:00 2001 From: Leighton Sapir <2328848+iamleigh@users.noreply.github.com> Date: Mon, 11 Apr 2022 22:56:09 -0500 Subject: [PATCH 017/310] =?UTF-8?q?=F0=9F=94=8A=20Update=20changelog.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 64692057..ea028f38 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,24 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org/) for commit guidelines. +## [1.8.1](https://github.com/wpmudev/shared-ui/compare/v1.8.0...v1.8.1) (Unreleased) + +#### 🐛 Bug Fixes +* `compiler` + * Rollup was trying to import and compile `react-dom` causing an error during build. [#166](https://github.com/wpmudev/shared-ui-react/pull/166) ([SUI-329](https://incsub.atlassian.net/browse/SUI-329)) ([@creador-dev](https://github.com/creador-dev)) +* `react-post` + * Post title HTML chars are rendered encoded on hovering. [#163](https://github.com/wpmudev/shared-ui-react/pull/163) ([SUI-264](https://incsub.atlassian.net/browse/SUI-264)) ([@creador-dev](https://github.com/creador-dev)) + +#### 🏠 Internal +* `react-accordion`, `react-box`, `react-button-icon`, `react-button`, `react-dropdown`, `react-input`, `react-modal`, `react-notifications`, `react-pagination`, `react-post`, `react-progress-bar` + * Set `react` dependency to latest version for all packages. [#171](https://github.com/wpmudev/shared-ui-react/pull/171) ([SUI-203](https://incsub.atlassian.net/browse/SUI-203)) ([@iamleigh](https://github.com/iamleigh)) +* Other + * Upgrade `SUI` dependency to its latest version. [#160](https://github.com/wpmudev/shared-ui-react/pull/160) ([SUI-314](https://incsub.atlassian.net/browse/SUI-314)) ([@iamleigh](https://github.com/iamleigh)) + +#### Committers: 2 +- Leighton Sapir ([@iamleigh](https://github.com/iamleigh)) +- Pawan Kumar ([@creador-dev](https://github.com/creador-dev)) + ## [1.8.0](https://github.com/wpmudev/shared-ui/compare/v1.7.0...v1.8.0) (2022-01-30) #### ✨ New Features From 24fb42539c934cc58bd4d2beec6c669c7270976d Mon Sep 17 00:00:00 2001 From: Leighton Sapir <2328848+iamleigh@users.noreply.github.com> Date: Tue, 12 Apr 2022 11:40:46 -0500 Subject: [PATCH 018/310] =?UTF-8?q?=F0=9F=93=9D=20docs(button):=20Set=20an?= =?UTF-8?q?=20interactive=20demo=20of=20the=20component.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...tton.stories.js => button-demo.stories.js} | 42 +++++-------------- 1 file changed, 10 insertions(+), 32 deletions(-) rename packages/react-button/docs/{button.stories.js => button-demo.stories.js} (81%) diff --git a/packages/react-button/docs/button.stories.js b/packages/react-button/docs/button-demo.stories.js similarity index 81% rename from packages/react-button/docs/button.stories.js rename to packages/react-button/docs/button-demo.stories.js index cb97a735..3834ef2c 100644 --- a/packages/react-button/docs/button.stories.js +++ b/packages/react-button/docs/button-demo.stories.js @@ -4,26 +4,19 @@ import { Button } from '../lib/button'; export default { title: 'Components/Button', component: Button, + parameters: { + notes: { + disabled: true, + }, + }, }; -const Template = (args) =>
- { PaginationNav({ ...props }) } + {PaginationNav({ ...props })}
- { PaginationResults({ ...props }) } + {PaginationResults({ ...props })}
- { PaginationNav({ ...props }) } + {PaginationNav({ ...props })}
); }; @@ -154,12 +175,11 @@ export const Basic = () => { title="Basic Template" description="By default, the pagination appears on top of the items but you can modify this to place it at the bottom. There's no room for advanced modifications." code="<Pagination limit={ 5 }> ... </Pagination>" - isDefault={ true } - isLast={ true }> - - - { accordionItems } - + isDefault={true} + isLast={true} + > + + {accordionItems} ); @@ -168,29 +188,36 @@ export const Basic = () => { export const Advanced = () => { return ( paginationContent, - " property.", -
, -
, - "There are 2 elements to include in your custom template:", -
    -
  • { PaginationNav({ ...props }) }, to show the navigation.
    • -
  • { PaginationResults({ ...props }) }, to show the list of items to paginate.
    • -
- ] - } - code="const newTemplate = ({ ...props }) => { ... }" - code2="<Pagination limit={ 5 } paginationContent={ newTemplate }> ... </Pagination>" - isLast={ true }> - - - { accordionItems } - - + title="Advanced Template" + description={[ + 'This method allows you to modify the default template of the component. It becomes useful when you need to display the pagination outside the main area or have a complex design to replicate. You just need to call your new template inside the ', + paginationContent, + ' property.', +
, +
, + 'There are 2 elements to include in your custom template:', +
    +
  • + + { PaginationNav({ ...props }) } + + , to show the navigation. +
    • +
  • + + { PaginationResults({ ...props }) } + + , to show the list of items to paginate. +
    • +
, + ]} + code="const newTemplate = ({ ...props }) => { ... }" + code2="<Pagination limit={ 5 } paginationContent={ newTemplate }> ... </Pagination>" + isLast={true} + > + + {accordionItems} + ); }; diff --git a/packages/react-pagination/lib/react-pagination.js b/packages/react-pagination/lib/react-pagination.js index 979fad22..80336398 100644 --- a/packages/react-pagination/lib/react-pagination.js +++ b/packages/react-pagination/lib/react-pagination.js @@ -1,13 +1,30 @@ -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect } from 'react'; -export const Pagination = ({ limit, skip, results, skipToFirstLabel, previousLabel, nextLabel, skipToLastLabel, pagesToBottom, ...args }) => { +export const Pagination = ({ + limit, + skip, + results, + skipToFirstLabel, + previousLabel, + nextLabel, + skipToLastLabel, + pagesToBottom, + ...args +}) => { const componentWrapper = args.children, - componentChildren = componentWrapper?.props?.children ? (componentWrapper?.props?.children?.length>1 ? [...componentWrapper.props.children] : [componentWrapper.props.children]) : [], + componentChildren = componentWrapper?.props?.children + ? componentWrapper?.props?.children?.length > 1 + ? [...componentWrapper.props.children] + : [componentWrapper.props.children] + : [], childElements = [...componentChildren], elements = childElements.length, - pages = elements / limit > parseInt(elements / limit) ? parseInt(elements / limit) + 1 : elements / limit, + pages = + elements / limit > parseInt(elements / limit) + ? parseInt(elements / limit) + 1 + : elements / limit, [pagesArray, setPagesArray] = useState([]), - [selectedPage, setSelectedPage] = useState("1"), + [selectedPage, setSelectedPage] = useState('1'), [startIndex, setStartIndex] = useState(0), [endIndex, setEndIndex] = useState(pages >= 5 ? 5 : pages), [pageClickCounter, setPageClickCounter] = useState(0), @@ -26,7 +43,7 @@ export const Pagination = ({ limit, skip, results, skipToFirstLabel, previousLab }, [pageClickCounter]); useEffect(() => { - if (selectedPage !== "1") { + if (selectedPage !== '1') { setElementsStartIndex(selectedPage * limit - limit); setElementsEndIndex(selectedPage * limit); } @@ -78,7 +95,7 @@ export const Pagination = ({ limit, skip, results, skipToFirstLabel, previousLab setEndIndex(pages - endIndex >= 5 ? endIndex + 5 : pages); }; - const handlePageClick = async page => { + const handlePageClick = async (page) => { setSelectedPage(page); setPageClickCounter(pageClickCounter + 1); }; @@ -119,72 +136,100 @@ export const Pagination = ({ limit, skip, results, skipToFirstLabel, previousLab }; export const PaginationResults = ({ ...properties }) => { - const items = React.Children.map(properties.childElements, data => React.cloneElement(data))?.slice(properties.elementsStartIndex, properties.elementsEndIndex); - return React.Children.map(properties.componentWrapper, data => React.cloneElement(data, '', items)); + const items = React.Children.map(properties.childElements, (data) => + React.cloneElement(data) + )?.slice(properties.elementsStartIndex, properties.elementsEndIndex); + return React.Children.map(properties.componentWrapper, (data) => + React.cloneElement(data, '', items) + ); }; export const PaginationNav = ({ ...properties }) => { return ( - properties.pagesArray.length>1 && -
- {properties.results && {properties.elements} results} - +
+ ) ); -}; \ No newline at end of file +}; diff --git a/packages/react-post/docs/react-post-demo.stories.js b/packages/react-post/docs/react-post-demo.stories.js index a3164e42..01aa9783 100644 --- a/packages/react-post/docs/react-post-demo.stories.js +++ b/packages/react-post/docs/react-post-demo.stories.js @@ -8,9 +8,9 @@ export default { component: Post, }; -export const demo = args => { +export const demo = (args) => { return ( -
+
); @@ -19,7 +19,8 @@ demo.storyName = 'Demo'; demo.args = { title: 'Post Title', image: demoImage, - excerpt: '

Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus.

', + excerpt: + '

Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus.

', time: '5', banner: false, }; @@ -49,7 +50,8 @@ demo.argTypes = { }, }, excerpt: { - description: 'Use this property to load an extract of the post. It does not matter how long it is, by default it will be shorten to fit design requirements.', + description: + 'Use this property to load an extract of the post. It does not matter how long it is, by default it will be shorten to fit design requirements.', table: { type: { summary: 'string' }, }, @@ -67,11 +69,11 @@ demo.argTypes = { description: 'Switch the image position from left to top of the content.', table: { type: { - summary: 'true | false' + summary: 'true | false', }, }, control: { type: 'boolean', }, }, -}; \ No newline at end of file +}; diff --git a/packages/react-post/docs/react-post-modifiers.stories.js b/packages/react-post/docs/react-post-modifiers.stories.js index 56c5ba4c..42a068bf 100644 --- a/packages/react-post/docs/react-post-modifiers.stories.js +++ b/packages/react-post/docs/react-post-modifiers.stories.js @@ -30,10 +30,8 @@ const Title = ({ children }) => { lineHeight: 22 + 'px', }; - return ( -

{ children }

- ); -} + return

{children}

; +}; const Description = ({ children }) => { const customStyles = { @@ -42,11 +40,11 @@ const Description = ({ children }) => { }; return ( -

- { children } +

+ {children}

); -} +}; const Code = ({ spaceTop = 5, spaceBottom = 20, children }) => { const customStyles = { @@ -57,56 +55,65 @@ const Code = ({ spaceTop = 5, spaceBottom = 20, children }) => { padding: 5 + 'px ' + 10 + 'px', }; - return ( - { children } - ); -} + return {children}; +}; -const Section = ({ title, description, code, code2, isDefault = false, isLast = false, children }) => { +const Section = ({ + title, + description, + code, + code2, + isDefault = false, + isLast = false, + children, +}) => { return ( <> - { title && '' !== title && ( - { title }{ isDefault && ( - <span - className="sui-tag sui-tag-sm sui-tag-yellow" - style={ { marginLeft: 10 + 'px' } } - aria-hidden="true" - >Default</span> - )} - )} - { description && '' !== description && ( - { description } - )} - { code && '' !== code && ( - { code } + {title && '' !== title && ( + + {title} + {isDefault && ( + <span + className="sui-tag sui-tag-sm sui-tag-yellow" + style={{ marginLeft: 10 + 'px' }} + aria-hidden="true" + > + Default + </span> + )} + )} - { code2 && '' !== code2 && ( - { code2 } + {description && '' !== description && {description}} + {code && '' !== code && ( + {code} )} - { children } - { !isLast &&
} + {code2 && '' !== code2 && {code2}} + {children} + {!isLast &&
} ); -} +}; -export const position = args => { +export const position = (args) => { return ( <>
-
- + title="Inline" + description="By default, the post image is placed at the left of the post title." + isDefault={true} + > +
+
-
- + isLast={true} + > +
+
@@ -114,7 +121,8 @@ export const position = args => { }; position.storyName = 'Image Position'; position.args = { - title: "Post Title", + title: 'Post Title', image: demoImage, - excerpt: "

Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus.

", -}; \ No newline at end of file + excerpt: + '

Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus.

', +}; diff --git a/packages/react-post/docs/react-post-states.stories.js b/packages/react-post/docs/react-post-states.stories.js index 37874897..211576a0 100644 --- a/packages/react-post/docs/react-post-states.stories.js +++ b/packages/react-post/docs/react-post-states.stories.js @@ -30,10 +30,8 @@ const Title = ({ children }) => { lineHeight: 22 + 'px', }; - return ( -

{ children }

- ); -} + return

{children}

; +}; const Description = ({ children }) => { const customStyles = { @@ -42,11 +40,11 @@ const Description = ({ children }) => { }; return ( -

- { children } +

+ {children}

); -} +}; const Code = ({ spaceTop = 5, spaceBottom = 20, children }) => { const customStyles = { @@ -57,64 +55,67 @@ const Code = ({ spaceTop = 5, spaceBottom = 20, children }) => { padding: 5 + 'px ' + 10 + 'px', }; - return ( - { children } - ); -} + return {children}; +}; -const Section = ({ title, description, code, code2, isDefault = false, isLast = false, children }) => { +const Section = ({ + title, + description, + code, + code2, + isDefault = false, + isLast = false, + children, +}) => { return ( <> - { title && '' !== title && ( - { title }{ isDefault && ( - <span - className="sui-tag sui-tag-sm sui-tag-yellow" - style={ { marginLeft: 10 + 'px' } } - aria-hidden="true" - >Default</span> - )} - )} - { description && '' !== description && ( - { description } - )} - { code && '' !== code && ( - { code } + {title && '' !== title && ( + + {title} + {isDefault && ( + <span + className="sui-tag sui-tag-sm sui-tag-yellow" + style={{ marginLeft: 10 + 'px' }} + aria-hidden="true" + > + Default + </span> + )} + )} - { code2 && '' !== code2 && ( - { code2 } + {description && '' !== description && {description}} + {code && '' !== code && ( + {code} )} - { children } - { !isLast &&
} + {code2 && '' !== code2 && {code2}} + {children} + {!isLast &&
} ); -} +}; -export const primary = args => { +export const primary = (args) => { return ( -
-
- +
+
+
); }; primary.storyName = 'Static'; primary.args = { - title: "Post Title", + title: 'Post Title', image: demoImage, - excerpt: "

Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus.

", + excerpt: + '

Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus.

', }; -export const disabled = args => { +export const disabled = (args) => { return ( -
-
- +
+
+
); @@ -122,4 +123,4 @@ export const disabled = args => { disabled.storyName = 'Disabled'; disabled.args = { ...primary.args, -}; \ No newline at end of file +}; diff --git a/packages/react-post/lib/react-post.js b/packages/react-post/lib/react-post.js index e3d878ea..57891e1e 100644 --- a/packages/react-post/lib/react-post.js +++ b/packages/react-post/lib/react-post.js @@ -1,5 +1,5 @@ -import React, { Component } from "react"; -import styled from "styled-components"; +import React, { Component } from 'react'; +import styled from 'styled-components'; let aria = aria || {}; @@ -16,35 +16,35 @@ aria.KeyCode = { UP: 38, RIGHT: 39, DOWN: 40, - DELETE: 46 + DELETE: 46, }; const screen = { mobile: 480, tablet: 783, laptop: 1200, - desktop: 1500 + desktop: 1500, }; const device = { mobile: `(min-width: ${screen.mobile}px)`, tablet: `(min-width: ${screen.tablet}px)`, laptop: `(min-width: ${screen.laptop}px)`, - desktop: `(min-width: ${screen.desktop}px)` + desktop: `(min-width: ${screen.desktop}px)`, }; -const PostWrapper = styled.div.attrs(props => ({ +const PostWrapper = styled.div.attrs((props) => ({ tabIndex: 0, - props + props, }))` - ${props => (props.banner ? "overflow: hidden;" : "")} + ${(props) => (props.banner ? 'overflow: hidden;' : '')} cursor: pointer; - ${props => (props.banner ? "display: flex;" : "")} - ${props => (props.banner ? "flex-flow: column nowrap;" : "")} - padding: ${props => (props.banner ? "20px 20px 30px" : "10px")}; + ${(props) => (props.banner ? 'display: flex;' : '')} + ${(props) => (props.banner ? 'flex-flow: column nowrap;' : '')} + padding: ${(props) => (props.banner ? '20px 20px 30px' : '10px')}; border-radius: 4px; background-color: #fff; - ${props => (props.banner ? "box-shadow: 0 0 0 1px #E6E6E6;" : "")} + ${(props) => (props.banner ? 'box-shadow: 0 0 0 1px #E6E6E6;' : '')} transition: 0.2s ease all; * { @@ -53,15 +53,14 @@ const PostWrapper = styled.div.attrs(props => ({ &:hover, &:focus { - ${props => - props.banner ? "transform: scale(1.02);" : "background-color: #FAFAFA;"} + ${(props) => (props.banner ? 'transform: scale(1.02);' : 'background-color: #FAFAFA;')} - ${props => + ${(props) => props.banner ? `@media ${device.tablet} { transform: scale(1.05); }` - : ""} + : ''} } &[disabled] { @@ -69,23 +68,21 @@ const PostWrapper = styled.div.attrs(props => ({ opacity: 0.5; } - ${props => + ${(props) => props.banner ? `@media ${device.tablet} { box-shadow: 0 2px 7px 0 rgba(0,0,0,0.05); }` - : ""} + : ''} &:focus { outline: none; - ${props => - props.banner - ? "box-shadow: 0 2px 7px 0 rgba(0,0,0,0.05), 0 0 2px 0 #17A8E3;" - : ""} + ${(props) => + props.banner ? 'box-shadow: 0 2px 7px 0 rgba(0,0,0,0.05), 0 0 2px 0 #17A8E3;' : ''} } @media ${device.tablet} { - ${props => (props.banner ? "min-height: 100%;" : "padding: 15px;")} + ${(props) => (props.banner ? 'min-height: 100%;' : 'padding: 15px;')} } `; @@ -107,17 +104,17 @@ const PostFooter = styled.div` `; const FeaturedImage = styled.div.attrs(() => ({ - tabIndex: "-1", - "aria-hidden": true + tabIndex: '-1', + 'aria-hidden': true, }))` - ${props => (props.banner ? "" : "width: 66px;")} - height: ${props => (props.banner ? "140px" : "54px")}; - margin: ${props => (props.banner ? "-20px -20px 20px" : "0 10px 0 0")}; - ${props => (props.banner ? "" : "border-radius: 4px;")} + ${(props) => (props.banner ? '' : 'width: 66px;')} + height: ${(props) => (props.banner ? '140px' : '54px')}; + margin: ${(props) => (props.banner ? '-20px -20px 20px' : '0 10px 0 0')}; + ${(props) => (props.banner ? '' : 'border-radius: 4px;')} display: block; - ${props => (props.banner ? "flex: 0 0 auto;" : "")} + ${(props) => (props.banner ? 'flex: 0 0 auto;' : '')} background-color: #FFF; - background-image: ${props => (props.src ? `url(${props.src})` : 'none')}; + background-image: ${(props) => (props.src ? `url(${props.src})` : 'none')}; background-size: cover; background-position: center; background-repeat: no-repeat; @@ -127,26 +124,26 @@ const PostTitle = styled.h3` overflow: hidden; display: -webkit-box !important; -webkit-box-orient: vertical; - ${props => (props.banner ? "flex: 1 1 auto;" : "")} - margin: ${props => (props.banner ? "0 0 10px" : "0")} !important; + ${(props) => (props.banner ? 'flex: 1 1 auto;' : '')} + margin: ${(props) => (props.banner ? '0 0 10px' : '0')} !important; padding: 0 !important; border: 0; font-size: 13px !important; line-height: 18px !important; font-weight: 500 !important; letter-spacing: -0.2px; - ${props => (props.banner ? "" : "-webkit-line-clamp: 2;")} + ${(props) => (props.banner ? '' : '-webkit-line-clamp: 2;')} - ${props => + ${(props) => props.banner ? `@media ${device.tablet} { -webkit-line-clamp: 2; }` - : ""} + : ''} `; const PostTime = styled.p` - ${props => (props.banner ? "flex: 0 0 auto;" : "")} + ${(props) => (props.banner ? 'flex: 0 0 auto;' : '')} margin: 0 !important; padding: 0 !important; border: 0; @@ -155,17 +152,17 @@ const PostTime = styled.p` line-height: 18px !important; letter-spacing: -0.2px; - ${props => + ${(props) => props.banner ? `* + & { margin-left: 5px !important; }` - : ""} + : ''} `; const Excerpt = styled.div` display: block; - ${props => (props.banner ? "flex: 1 1 auto;" : "")} + ${(props) => (props.banner ? 'flex: 1 1 auto;' : '')} p { overflow: hidden; @@ -178,14 +175,14 @@ const Excerpt = styled.div` font-size: 13px !important; line-height: 22px !important; letter-spacing: -0.2px; - -webkit-line-clamp: ${props => (props.banner ? "3" : "2")}; + -webkit-line-clamp: ${(props) => (props.banner ? '3' : '2')}; } `; const ReadMore = styled.p` min-width: 1px; flex: 1; - ${props => (props.banner ? "margin-bottom: 0 !important;" : "margin: 4px 0 0;")} + ${(props) => (props.banner ? 'margin-bottom: 0 !important;' : 'margin: 4px 0 0;')} color: #17A8E3 !important; font-size: 13px !important; line-height: 18px !important; @@ -200,22 +197,22 @@ export class Post extends Component { this.state = { media: [], error: null, - isLoaded: false + isLoaded: false, }; this.openLink = this.openLink.bind(this); this.handleKeydown = this.handleKeydown.bind(this); } - openLink = e => { + openLink = (e) => { let ref = e.target !== null ? e.target : e.srcElement; if (ref) { - window.open(ref.getAttribute("data-href"), "_blank"); + window.open(ref.getAttribute('data-href'), '_blank'); } }; - handleKeydown = e => { + handleKeydown = (e) => { let key = e.which || e.keyCode; switch (key) { @@ -226,34 +223,34 @@ export class Post extends Component { }; componentDidMount() { - const API_URL = "https://wpmudev.com/blog/wp-json/wp/v2/media/"; + const API_URL = 'https://wpmudev.com/blog/wp-json/wp/v2/media/'; const QUERY_ID = this.props.media; // GET media using fetch. - if ( QUERY_ID ) { + if (QUERY_ID) { fetch(API_URL + QUERY_ID) - .then(response => response.json()) - .then( - data => { - if (data.data?.status === 404) { - this.setState({ - isLoaded: true, - error: data.data.message - }); - } else { + .then((response) => response.json()) + .then( + (data) => { + if (data.data?.status === 404) { + this.setState({ + isLoaded: true, + error: data.data.message, + }); + } else { + this.setState({ + isLoaded: true, + media: data.guid.rendered, + }); + } + }, + (error) => { this.setState({ isLoaded: true, - media: data.guid.rendered + error, }); } - }, - error => { - this.setState({ - isLoaded: true, - error - }); - } - ); + ); } } @@ -263,29 +260,31 @@ export class Post extends Component { const translate = this.props.translate; const read_article = - translate && translate[0].read_article - ? translate[0].read_article - : "Read article"; + translate && translate[0].read_article ? translate[0].read_article : 'Read article'; - const min_read = - translate && translate[0].min_read ? translate[0].min_read : "min read"; + const min_read = translate && translate[0].min_read ? translate[0].min_read : 'min read'; // replace html entities from the title with character. - const postTitle = this.props.title.replace(/&#(\d+);/g, function(match, dec) {return String.fromCharCode(dec);}); + const postTitle = this.props.title.replace(/&#(\d+);/g, function (match, dec) { + return String.fromCharCode(dec); + }); - let PostImage = ""; // Empty. + let PostImage = ''; // Empty. let image = this.props.image; - if ( image ) { + if (image) { PostImage = ; } else { if (error) { PostImage = error.message; - } else if ( (typeof image === 'undefined' || image === null || image === '') && !this.props.media || error ) { + } else if ( + ((typeof image === 'undefined' || image === null || image === '') && !this.props.media) || + error + ) { PostImage = ; } else if (!isLoaded) { PostImage = ( -

+

Image is loading

@@ -300,20 +299,20 @@ export class Post extends Component { {PostImage} - {this.props.title && "" !== this.props.title && ( + {this.props.title && '' !== this.props.title && ( )} - {this.props.excerpt && "" !== this.props.excerpt && ( + {this.props.excerpt && '' !== this.props.excerpt && ( )} @@ -321,13 +320,13 @@ export class Post extends Component { {read_article} - {this.props.time && "" !== this.props.time && ( + {this.props.time && '' !== this.props.time && (
hasFrame, - " property, you can display a gray border with inner spacing around the progress bar and its elements." - ] - } - code="<ProgressBar now={ 30 } hasFrame={ true } hasLegend={ false } />"> - + description={[ + 'Using the ', + hasFrame, + ' property, you can display a gray border with inner spacing around the progress bar and its elements.', + ]} + code="<ProgressBar now={ 30 } hasFrame={ true } hasLegend={ false } />" + > +
hasLegend, - " property." - ] - } + description={[ + 'The boxed variation can come with a legend at the bottom if necessary that you can display using the ', + hasLegend, + ' property.', + ]} code="<ProgressBar now={ 30 } hasFrame={ true } hasLegend={ true } />" - isLast={ true }> - + isLast={true} + > +
); diff --git a/packages/react-progress-bar/docs/progress-bar-states.stories.js b/packages/react-progress-bar/docs/progress-bar-states.stories.js index 1621e850..e461763c 100644 --- a/packages/react-progress-bar/docs/progress-bar-states.stories.js +++ b/packages/react-progress-bar/docs/progress-bar-states.stories.js @@ -18,7 +18,7 @@ export default { }, }, decorators: [ - ( Story ) => ( + (Story) => (
@@ -37,10 +37,8 @@ const Title = ({ children }) => { lineHeight: 22 + 'px', }; - return ( -

{ children }

- ); -} + return

{children}

; +}; const Description = ({ children }) => { const customStyles = { @@ -49,11 +47,11 @@ const Description = ({ children }) => { }; return ( -

- { children } +

+ {children}

); -} +}; const Code = ({ spaceTop = 5, spaceBottom = 20, children }) => { const customStyles = { @@ -64,37 +62,44 @@ const Code = ({ spaceTop = 5, spaceBottom = 20, children }) => { padding: 5 + 'px ' + 10 + 'px', }; - return ( - { children } - ); -} + return {children}; +}; -const Section = ({ title, description, code, code2, isDefault = false, isLast = false, children }) => { +const Section = ({ + title, + description, + code, + code2, + isDefault = false, + isLast = false, + children, +}) => { return ( <> - { title && '' !== title && ( - { title }{ isDefault && ( - <span - className="sui-tag sui-tag-sm sui-tag-yellow" - style={ { marginLeft: 10 + 'px' } } - aria-hidden="true" - >Default</span> - )} - )} - { description && '' !== description && ( - { description } + {title && '' !== title && ( + + {title} + {isDefault && ( + <span + className="sui-tag sui-tag-sm sui-tag-yellow" + style={{ marginLeft: 10 + 'px' }} + aria-hidden="true" + > + Default + </span> + )} + )} - { code && '' !== code && ( - { code } + {description && '' !== description && {description}} + {code && '' !== code && ( + {code} )} - { code2 && '' !== code2 && ( - { code2 } - )} - { children } - { !isLast &&
} + {code2 && '' !== code2 && {code2}} + {children} + {!isLast &&
} ); -} +}; export const Initial = () => { return ( @@ -102,9 +107,10 @@ export const Initial = () => { title="Initial" description="By default, the progress bar has zero value as its initial state." code="<ProgressBar now={ 0 } />" - isDefault={ true } - isLast={ true }> - + isDefault={true} + isLast={true} + > +
); }; @@ -115,8 +121,9 @@ export const Loading = () => { title="Loading" description="While the process is happening, the progress bar fills with blue." code="<ProgressBar now={ 30 } />" - isLast={ true }> - + isLast={true} + > + ); }; @@ -127,8 +134,9 @@ export const Complete = () => { title="Complete" description="The progress bar measures in percentage, which means once the progress reaches 100, the whole bar will be blue." code="<ProgressBar now={ 100 } />" - isLast={ true }> - + isLast={true} + > + ); }; diff --git a/packages/react-progress-bar/lib/react-progress-bar.js b/packages/react-progress-bar/lib/react-progress-bar.js index 7aa09536..47f09f18 100644 --- a/packages/react-progress-bar/lib/react-progress-bar.js +++ b/packages/react-progress-bar/lib/react-progress-bar.js @@ -21,7 +21,7 @@ export const ProgressBar = ({ cancel: 'Cancel', legend: 'Status...', }, - sourceLang, + sourceLang ); const loaderMarkup = hasLoader && ( From 4ea2c32796c66a174042861787221b644686b533 Mon Sep 17 00:00:00 2001 From: Leighton Sapir <2328848+iamleigh@users.noreply.github.com> Date: Wed, 18 May 2022 01:25:36 -0500 Subject: [PATCH 240/310] =?UTF-8?q?=F0=9F=A9=BA=20Upgrade=20ESLint=20versi?= =?UTF-8?q?on=20on=20automation.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/eslint.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml index 51034177..65638e34 100644 --- a/.github/workflows/eslint.yml +++ b/.github/workflows/eslint.yml @@ -34,7 +34,7 @@ jobs: - name: Install ESLint run: | - npm install eslint@8.10.0 + npm install eslint@8.15.0 npm install @microsoft/eslint-formatter-sarif@2.1.7 - name: Run ESLint @@ -49,4 +49,4 @@ jobs: uses: github/codeql-action/upload-sarif@v2 with: sarif_file: eslint-results.sarif - wait-for-processing: true \ No newline at end of file + wait-for-processing: true From 6540ae1f1df3abc02b438d93b7a412a01eaef0e2 Mon Sep 17 00:00:00 2001 From: Leighton Sapir <2328848+iamleigh@users.noreply.github.com> Date: Wed, 18 May 2022 01:26:01 -0500 Subject: [PATCH 241/310] =?UTF-8?q?=F0=9F=94=A5=20Remove=20`.editorconfig`?= =?UTF-8?q?=20file.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .editorconfig | 22 ---------------------- 1 file changed, 22 deletions(-) delete mode 100644 .editorconfig diff --git a/.editorconfig b/.editorconfig deleted file mode 100644 index 63ab3f4b..00000000 --- a/.editorconfig +++ /dev/null @@ -1,22 +0,0 @@ -# EditorConfig is awesome: https://EditorConfig.org - -# top-most EditorConfig file -root = true - -# Global indentation -# The indent size used in the `package.json` file cannot be changed -# https://github.com/npm/npm/pull/3180#issuecomment-16336516 -[*] -indent_style = space -trim_trailing_whitespace = true - -# Unix-style newlines with a newline ending every file -[*] -end_of_line = lf -insert_final_newline = true - -# Tab indentation -[{*.yml,*.yaml,package.json}] -indent_style = tab -indent_size = 4 -charset = utf-8 From 22a3f94fd45ea16d956615e72b0db31b934f7f27 Mon Sep 17 00:00:00 2001 From: Leighton Sapir <2328848+iamleigh@users.noreply.github.com> Date: Wed, 18 May 2022 02:17:46 -0500 Subject: [PATCH 242/310] =?UTF-8?q?=E2=AC=86=EF=B8=8F=20React=2018.1.0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .babelrc | 18 +++-------------- package.json | 5 +++-- packages/react-accordion/package.json | 2 +- packages/react-box/package.json | 2 +- packages/react-button-icon/package.json | 2 +- packages/react-button/package.json | 2 +- packages/react-dropdown/package.json | 2 +- packages/react-input/package.json | 2 +- packages/react-modal/package.json | 2 +- packages/react-notifications/package.json | 2 +- packages/react-pagination/package.json | 2 +- packages/react-post/package.json | 2 +- packages/react-progress-bar/package.json | 2 +- yarn.lock | 24 ++++++++++++++++++++++- 14 files changed, 40 insertions(+), 29 deletions(-) diff --git a/.babelrc b/.babelrc index 75b334c4..6562209f 100644 --- a/.babelrc +++ b/.babelrc @@ -1,16 +1,4 @@ { - "presets": [ - "@babel/preset-env", - "@babel/preset-react" - ], - "plugins": [ - [ - "styled-components", - { - "pure": true, - "ssr": true - } - ], - "@babel/plugin-proposal-class-properties" - ] -} \ No newline at end of file + "presets": ["@babel/preset-env", "@babel/preset-react"], + "plugins": ["@babel/plugin-proposal-class-properties", "babel-plugin-styled-components"] +} diff --git a/package.json b/package.json index fe2ec628..1853777c 100644 --- a/package.json +++ b/package.json @@ -8,8 +8,8 @@ "dependencies": { "@octokit/core": "^3.4.0", "@wpmudev/shared-ui": "^2.12.8", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.1.0", + "react-dom": "^18.1.0", "regenerator-runtime": "^0.13.7", "typescript": "^4.2.4", "webpack": "^5.33.2" @@ -29,6 +29,7 @@ "@wordpress/eslint-plugin": "^12.2.0", "babel-jest": "^26.6.3", "babel-loader": "^8.2.1", + "babel-plugin-styled-components": "^2.0.7", "chromatic": "^6.5.4", "css-loader": "^5.0.1", "eslint": "^8.15.0", diff --git a/packages/react-accordion/package.json b/packages/react-accordion/package.json index 323e76b5..039d72b4 100644 --- a/packages/react-accordion/package.json +++ b/packages/react-accordion/package.json @@ -44,7 +44,7 @@ }, "devDependencies": { "@wpmudev/react-builder": "^1.0.1", - "react": "^17.0.2" + "react": "^18.1.0" }, "dependencies": { "@wpmudev/react-button-icon": "^1.1.1", diff --git a/packages/react-box/package.json b/packages/react-box/package.json index 5c21ee75..56d627f5 100644 --- a/packages/react-box/package.json +++ b/packages/react-box/package.json @@ -45,7 +45,7 @@ "devDependencies": { "@wpmudev/react-builder": "^1.0.1", "@wpmudev/react-button": "^1.1.1", - "react": "^17.0.2" + "react": "^18.1.0" }, "dependencies": { "styled-components": "^5.3.0" diff --git a/packages/react-button-icon/package.json b/packages/react-button-icon/package.json index 2b7819e9..2bc65ec1 100644 --- a/packages/react-button-icon/package.json +++ b/packages/react-button-icon/package.json @@ -39,6 +39,6 @@ "access": "public" }, "devDependencies": { - "react": "^17.0.2" + "react": "^18.1.0" } } diff --git a/packages/react-button/package.json b/packages/react-button/package.json index adbdceaa..d5d7a195 100644 --- a/packages/react-button/package.json +++ b/packages/react-button/package.json @@ -41,6 +41,6 @@ }, "devDependencies": { "@wpmudev/react-builder": "^1.0.1", - "react": "^17.0.2" + "react": "^18.1.0" } } diff --git a/packages/react-dropdown/package.json b/packages/react-dropdown/package.json index 30253f78..8665c5ae 100644 --- a/packages/react-dropdown/package.json +++ b/packages/react-dropdown/package.json @@ -48,6 +48,6 @@ }, "devDependencies": { "@wpmudev/react-builder": "^1.0.1", - "react": "^17.0.2" + "react": "^18.1.0" } } diff --git a/packages/react-input/package.json b/packages/react-input/package.json index b14f1529..899f4ee9 100644 --- a/packages/react-input/package.json +++ b/packages/react-input/package.json @@ -41,6 +41,6 @@ "homepage": "https://github.com/wpmudev/shared-ui-react#readme", "devDependencies": { "@wpmudev/react-builder": "^1.0.1", - "react": "^17.0.2" + "react": "^18.1.0" } } diff --git a/packages/react-modal/package.json b/packages/react-modal/package.json index ecf673bf..d18fc7bb 100644 --- a/packages/react-modal/package.json +++ b/packages/react-modal/package.json @@ -44,7 +44,7 @@ "@wpmudev/react-button": "^1.1.1", "@wpmudev/react-button-icon": "^1.1.1", "@wpmudev/react-input": "^1.2.0", - "react": "^17.0.2" + "react": "^18.1.0" }, "peerDependencies": { "@wpmudev/shared-ui": "^2.10.8" diff --git a/packages/react-notifications/package.json b/packages/react-notifications/package.json index 4fb04f19..a76176ea 100644 --- a/packages/react-notifications/package.json +++ b/packages/react-notifications/package.json @@ -42,7 +42,7 @@ "devDependencies": { "@wpmudev/react-builder": "^1.0.1", "@wpmudev/react-button": "^1.1.1", - "react": "^17.0.2" + "react": "^18.1.0" }, "dependencies": { "@wpmudev/react-button-icon": "^1.1.1" diff --git a/packages/react-pagination/package.json b/packages/react-pagination/package.json index c9e688e8..b592d17f 100644 --- a/packages/react-pagination/package.json +++ b/packages/react-pagination/package.json @@ -49,6 +49,6 @@ "@wpmudev/react-box": "^1.2.6", "@wpmudev/react-builder": "^1.0.1", "@wpmudev/react-button": "^1.1.1", - "react": "^17.0.2" + "react": "^18.1.0" } } diff --git a/packages/react-post/package.json b/packages/react-post/package.json index 8b496845..d1f70d50 100644 --- a/packages/react-post/package.json +++ b/packages/react-post/package.json @@ -47,6 +47,6 @@ }, "devDependencies": { "@wpmudev/react-builder": "^1.0.1", - "react": "^17.0.2" + "react": "^18.1.0" } } diff --git a/packages/react-progress-bar/package.json b/packages/react-progress-bar/package.json index 5bd3f86e..7af1a849 100644 --- a/packages/react-progress-bar/package.json +++ b/packages/react-progress-bar/package.json @@ -41,7 +41,7 @@ }, "devDependencies": { "@wpmudev/react-builder": "^1.0.1", - "react": "^17.0.2" + "react": "^18.1.0" }, "dependencies": { "@wpmudev/react-button-icon": "^1.1.1" diff --git a/yarn.lock b/yarn.lock index e77aca85..326ccbb4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4821,7 +4821,7 @@ babel-plugin-react-docgen@^4.2.1: lodash "^4.17.15" react-docgen "^5.0.0" -"babel-plugin-styled-components@>= 1.12.0": +"babel-plugin-styled-components@>= 1.12.0", babel-plugin-styled-components@^2.0.7: version "2.0.7" resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz#c81ef34b713f9da2b7d3f5550df0d1e19e798086" integrity sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA== @@ -12564,6 +12564,14 @@ react-dom@^17.0.2: object-assign "^4.1.1" scheduler "^0.20.2" +react-dom@^18.1.0: + version "18.1.0" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.1.0.tgz#7f6dd84b706408adde05e1df575b3a024d7e8a2f" + integrity sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w== + dependencies: + loose-envify "^1.1.0" + scheduler "^0.22.0" + react-draggable@^4.4.3: version "4.4.5" resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.5.tgz#9e37fe7ce1a4cf843030f521a0a4cc41886d7e7c" @@ -12714,6 +12722,13 @@ react@^17.0.2: loose-envify "^1.1.0" object-assign "^4.1.1" +react@^18.1.0: + version "18.1.0" + resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890" + integrity sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ== + dependencies: + loose-envify "^1.1.0" + read-cmd-shim@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/read-cmd-shim/-/read-cmd-shim-2.0.0.tgz#4a50a71d6f0965364938e9038476f7eede3928d9" @@ -13331,6 +13346,13 @@ scheduler@^0.20.2: loose-envify "^1.1.0" object-assign "^4.1.1" +scheduler@^0.22.0: + version "0.22.0" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.22.0.tgz#83a5d63594edf074add9a7198b1bae76c3db01b8" + integrity sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ== + dependencies: + loose-envify "^1.1.0" + schema-utils@2.7.0: version "2.7.0" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7" From ca5ffd47d82d6ee7150ac225217bd27b914392b7 Mon Sep 17 00:00:00 2001 From: Leighton Sapir <2328848+iamleigh@users.noreply.github.com> Date: Wed, 18 May 2022 02:46:38 -0500 Subject: [PATCH 243/310] =?UTF-8?q?Revert=20"=E2=AC=86=EF=B8=8F=20React=20?= =?UTF-8?q?18.1.0"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 22a3f94fd45ea16d956615e72b0db31b934f7f27. --- .babelrc | 18 ++++++++++++++--- package.json | 5 ++--- packages/react-accordion/package.json | 2 +- packages/react-box/package.json | 2 +- packages/react-button-icon/package.json | 2 +- packages/react-button/package.json | 2 +- packages/react-dropdown/package.json | 2 +- packages/react-input/package.json | 2 +- packages/react-modal/package.json | 2 +- packages/react-notifications/package.json | 2 +- packages/react-pagination/package.json | 2 +- packages/react-post/package.json | 2 +- packages/react-progress-bar/package.json | 2 +- yarn.lock | 24 +---------------------- 14 files changed, 29 insertions(+), 40 deletions(-) diff --git a/.babelrc b/.babelrc index 6562209f..75b334c4 100644 --- a/.babelrc +++ b/.babelrc @@ -1,4 +1,16 @@ { - "presets": ["@babel/preset-env", "@babel/preset-react"], - "plugins": ["@babel/plugin-proposal-class-properties", "babel-plugin-styled-components"] -} + "presets": [ + "@babel/preset-env", + "@babel/preset-react" + ], + "plugins": [ + [ + "styled-components", + { + "pure": true, + "ssr": true + } + ], + "@babel/plugin-proposal-class-properties" + ] +} \ No newline at end of file diff --git a/package.json b/package.json index 1853777c..fe2ec628 100644 --- a/package.json +++ b/package.json @@ -8,8 +8,8 @@ "dependencies": { "@octokit/core": "^3.4.0", "@wpmudev/shared-ui": "^2.12.8", - "react": "^18.1.0", - "react-dom": "^18.1.0", + "react": "^17.0.2", + "react-dom": "^17.0.2", "regenerator-runtime": "^0.13.7", "typescript": "^4.2.4", "webpack": "^5.33.2" @@ -29,7 +29,6 @@ "@wordpress/eslint-plugin": "^12.2.0", "babel-jest": "^26.6.3", "babel-loader": "^8.2.1", - "babel-plugin-styled-components": "^2.0.7", "chromatic": "^6.5.4", "css-loader": "^5.0.1", "eslint": "^8.15.0", diff --git a/packages/react-accordion/package.json b/packages/react-accordion/package.json index 039d72b4..323e76b5 100644 --- a/packages/react-accordion/package.json +++ b/packages/react-accordion/package.json @@ -44,7 +44,7 @@ }, "devDependencies": { "@wpmudev/react-builder": "^1.0.1", - "react": "^18.1.0" + "react": "^17.0.2" }, "dependencies": { "@wpmudev/react-button-icon": "^1.1.1", diff --git a/packages/react-box/package.json b/packages/react-box/package.json index 56d627f5..5c21ee75 100644 --- a/packages/react-box/package.json +++ b/packages/react-box/package.json @@ -45,7 +45,7 @@ "devDependencies": { "@wpmudev/react-builder": "^1.0.1", "@wpmudev/react-button": "^1.1.1", - "react": "^18.1.0" + "react": "^17.0.2" }, "dependencies": { "styled-components": "^5.3.0" diff --git a/packages/react-button-icon/package.json b/packages/react-button-icon/package.json index 2bc65ec1..2b7819e9 100644 --- a/packages/react-button-icon/package.json +++ b/packages/react-button-icon/package.json @@ -39,6 +39,6 @@ "access": "public" }, "devDependencies": { - "react": "^18.1.0" + "react": "^17.0.2" } } diff --git a/packages/react-button/package.json b/packages/react-button/package.json index d5d7a195..adbdceaa 100644 --- a/packages/react-button/package.json +++ b/packages/react-button/package.json @@ -41,6 +41,6 @@ }, "devDependencies": { "@wpmudev/react-builder": "^1.0.1", - "react": "^18.1.0" + "react": "^17.0.2" } } diff --git a/packages/react-dropdown/package.json b/packages/react-dropdown/package.json index 8665c5ae..30253f78 100644 --- a/packages/react-dropdown/package.json +++ b/packages/react-dropdown/package.json @@ -48,6 +48,6 @@ }, "devDependencies": { "@wpmudev/react-builder": "^1.0.1", - "react": "^18.1.0" + "react": "^17.0.2" } } diff --git a/packages/react-input/package.json b/packages/react-input/package.json index 899f4ee9..b14f1529 100644 --- a/packages/react-input/package.json +++ b/packages/react-input/package.json @@ -41,6 +41,6 @@ "homepage": "https://github.com/wpmudev/shared-ui-react#readme", "devDependencies": { "@wpmudev/react-builder": "^1.0.1", - "react": "^18.1.0" + "react": "^17.0.2" } } diff --git a/packages/react-modal/package.json b/packages/react-modal/package.json index d18fc7bb..ecf673bf 100644 --- a/packages/react-modal/package.json +++ b/packages/react-modal/package.json @@ -44,7 +44,7 @@ "@wpmudev/react-button": "^1.1.1", "@wpmudev/react-button-icon": "^1.1.1", "@wpmudev/react-input": "^1.2.0", - "react": "^18.1.0" + "react": "^17.0.2" }, "peerDependencies": { "@wpmudev/shared-ui": "^2.10.8" diff --git a/packages/react-notifications/package.json b/packages/react-notifications/package.json index a76176ea..4fb04f19 100644 --- a/packages/react-notifications/package.json +++ b/packages/react-notifications/package.json @@ -42,7 +42,7 @@ "devDependencies": { "@wpmudev/react-builder": "^1.0.1", "@wpmudev/react-button": "^1.1.1", - "react": "^18.1.0" + "react": "^17.0.2" }, "dependencies": { "@wpmudev/react-button-icon": "^1.1.1" diff --git a/packages/react-pagination/package.json b/packages/react-pagination/package.json index b592d17f..c9e688e8 100644 --- a/packages/react-pagination/package.json +++ b/packages/react-pagination/package.json @@ -49,6 +49,6 @@ "@wpmudev/react-box": "^1.2.6", "@wpmudev/react-builder": "^1.0.1", "@wpmudev/react-button": "^1.1.1", - "react": "^18.1.0" + "react": "^17.0.2" } } diff --git a/packages/react-post/package.json b/packages/react-post/package.json index d1f70d50..8b496845 100644 --- a/packages/react-post/package.json +++ b/packages/react-post/package.json @@ -47,6 +47,6 @@ }, "devDependencies": { "@wpmudev/react-builder": "^1.0.1", - "react": "^18.1.0" + "react": "^17.0.2" } } diff --git a/packages/react-progress-bar/package.json b/packages/react-progress-bar/package.json index 7af1a849..5bd3f86e 100644 --- a/packages/react-progress-bar/package.json +++ b/packages/react-progress-bar/package.json @@ -41,7 +41,7 @@ }, "devDependencies": { "@wpmudev/react-builder": "^1.0.1", - "react": "^18.1.0" + "react": "^17.0.2" }, "dependencies": { "@wpmudev/react-button-icon": "^1.1.1" diff --git a/yarn.lock b/yarn.lock index 326ccbb4..e77aca85 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4821,7 +4821,7 @@ babel-plugin-react-docgen@^4.2.1: lodash "^4.17.15" react-docgen "^5.0.0" -"babel-plugin-styled-components@>= 1.12.0", babel-plugin-styled-components@^2.0.7: +"babel-plugin-styled-components@>= 1.12.0": version "2.0.7" resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz#c81ef34b713f9da2b7d3f5550df0d1e19e798086" integrity sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA== @@ -12564,14 +12564,6 @@ react-dom@^17.0.2: object-assign "^4.1.1" scheduler "^0.20.2" -react-dom@^18.1.0: - version "18.1.0" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.1.0.tgz#7f6dd84b706408adde05e1df575b3a024d7e8a2f" - integrity sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w== - dependencies: - loose-envify "^1.1.0" - scheduler "^0.22.0" - react-draggable@^4.4.3: version "4.4.5" resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.5.tgz#9e37fe7ce1a4cf843030f521a0a4cc41886d7e7c" @@ -12722,13 +12714,6 @@ react@^17.0.2: loose-envify "^1.1.0" object-assign "^4.1.1" -react@^18.1.0: - version "18.1.0" - resolved "https://registry.yarnpkg.com/react/-/react-18.1.0.tgz#6f8620382decb17fdc5cc223a115e2adbf104890" - integrity sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ== - dependencies: - loose-envify "^1.1.0" - read-cmd-shim@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/read-cmd-shim/-/read-cmd-shim-2.0.0.tgz#4a50a71d6f0965364938e9038476f7eede3928d9" @@ -13346,13 +13331,6 @@ scheduler@^0.20.2: loose-envify "^1.1.0" object-assign "^4.1.1" -scheduler@^0.22.0: - version "0.22.0" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.22.0.tgz#83a5d63594edf074add9a7198b1bae76c3db01b8" - integrity sha512-6QAm1BgQI88NPYymgGQLCZgvep4FyePDWFpXVK+zNSUgHwlqpJy8VEh8Et0KxTACS4VWwMousBElAZOH9nkkoQ== - dependencies: - loose-envify "^1.1.0" - schema-utils@2.7.0: version "2.7.0" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.0.tgz#17151f76d8eae67fbbf77960c33c676ad9f4efc7" From 13e4647f1e44f576cd853f0ba39011bb31a8c470 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 18 May 2022 18:34:37 +0530 Subject: [PATCH 244/310] =?UTF-8?q?=E2=9C=A8=20new(input):=20added=20forwa?= =?UTF-8?q?rd=20ref=20in=20input=20component.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-input/lib/react-input.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-input/lib/react-input.js b/packages/react-input/lib/react-input.js index 42ced242..46dc0c05 100644 --- a/packages/react-input/lib/react-input.js +++ b/packages/react-input/lib/react-input.js @@ -1,6 +1,6 @@ import React from 'react'; -const Input = ({ +const Input = React.forwardRef(({ id, label, description, @@ -12,7 +12,7 @@ const Input = ({ suffix, prefix, ...props -}) => { +}, ref) => { const uniqueId = id && '' !== id ? id : props.property; let fieldClasses = 'sui-form-field'; @@ -70,7 +70,7 @@ const Input = ({ {prefix} )} - + {suffix && ( {suffix} @@ -83,6 +83,6 @@ const Input = ({ { description &&

{ description }

}
); -}; +}); export { Input }; From 27c9faa3a3bf8d6a98778749a715b92eecdce21d Mon Sep 17 00:00:00 2001 From: Leighton Sapir <2328848+iamleigh@users.noreply.github.com> Date: Wed, 18 May 2022 23:12:54 -0500 Subject: [PATCH 245/310] =?UTF-8?q?=F0=9F=94=A5=20Remove=20ESLint=20automa?= =?UTF-8?q?tion.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/eslint.yml | 52 ------------------------------------ 1 file changed, 52 deletions(-) delete mode 100644 .github/workflows/eslint.yml diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml deleted file mode 100644 index 65638e34..00000000 --- a/.github/workflows/eslint.yml +++ /dev/null @@ -1,52 +0,0 @@ -# This workflow uses actions that are not certified by GitHub. -# They are provided by a third-party and are governed by -# separate terms of service, privacy policy, and support -# documentation. -# ESLint is a tool for identifying and reporting on patterns -# found in ECMAScript/JavaScript code. -# More details at https://github.com/eslint/eslint -# and https://eslint.org - -name: ESLint - -on: - push: - branches: - - master - - release/** - pull_request: - # The branches below must be a subset of the branches above - branches: - - release/** - schedule: - - cron: '25 16 * * 2' - -jobs: - eslint: - name: Run eslint scanning - runs-on: ubuntu-latest - permissions: - contents: read - security-events: write - steps: - - name: Checkout code - uses: actions/checkout@v3 - - - name: Install ESLint - run: | - npm install eslint@8.15.0 - npm install @microsoft/eslint-formatter-sarif@2.1.7 - - - name: Run ESLint - run: npx eslint . - --config .eslintrc.json - --ext .js,.jsx,.ts,.tsx - --format @microsoft/eslint-formatter-sarif - --output-file eslint-results.sarif - continue-on-error: true - - - name: Upload analysis results to GitHub - uses: github/codeql-action/upload-sarif@v2 - with: - sarif_file: eslint-results.sarif - wait-for-processing: true From 3a7258758757834729ef4cc3a5d36f48e2387676 Mon Sep 17 00:00:00 2001 From: Leighton Sapir <2328848+iamleigh@users.noreply.github.com> Date: Wed, 18 May 2022 23:28:15 -0500 Subject: [PATCH 246/310] =?UTF-8?q?=F0=9F=93=9D=20Update=20`CONTRIBUTIONS`?= =?UTF-8?q?=20doc.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/contributions.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/contributions.md b/docs/contributions.md index 6ded66cd..598c4111 100644 --- a/docs/contributions.md +++ b/docs/contributions.md @@ -56,9 +56,9 @@ Before opening a PR, it should be up to date with the targeted release branch (r #### Checklist: - [ ] All unit tests pass. -- [ ] Lint passes. -- [ ] Chromatic tests passes. -- [ ] CodeQL tests pass. + - [ ] Chromatic test passes. + - [ ] CodeQL test passes. + - [ ] Security/Snyk test passes. - [ ] Descriptions of the changes done. - [ ] Sign the pull request by assigning it to yourself in the "assignees" section. From 5c3b592487100003c84246b40a1d93232de91825 Mon Sep 17 00:00:00 2001 From: Leighton Sapir <2328848+iamleigh@users.noreply.github.com> Date: Thu, 19 May 2022 01:15:14 -0500 Subject: [PATCH 247/310] =?UTF-8?q?=F0=9F=A7=91=E2=80=8D=F0=9F=92=BB=20Upd?= =?UTF-8?q?ate=20Prettier=20options.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintrc.json | 7 ++++--- .prettierignore | 4 +++- .prettierrc.json | 7 ++++--- 3 files changed, 11 insertions(+), 7 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index 97758848..f486c46d 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -36,10 +36,11 @@ "error", { "printWidth": 100, - "trailingComma": "es5", - "useTabs": true, "tabWidth": 2, - "singleQuote": true + "useTabs": true, + "singleQuote": true, + "trailingComma": "es5", + "endOfLine": "lf" } ], "react/jsx-uses-react": "error" diff --git a/.prettierignore b/.prettierignore index f735d5f4..d5b4b3e9 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,3 +1,5 @@ -*.json +*.yml +*.yaml +package.json dist/ node_modules/ \ No newline at end of file diff --git a/.prettierrc.json b/.prettierrc.json index b989fae9..2f49c528 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -1,7 +1,8 @@ { "printWidth": 100, - "trailingComma": "es5", - "useTabs": true, "tabWidth": 2, - "singleQuote": true + "useTabs": true, + "singleQuote": true, + "trailingComma": "es5", + "endOfLine": "lf" } From 78409791d213b0c878755624909b29a20a151153 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Thu, 19 May 2022 12:09:36 +0530 Subject: [PATCH 248/310] =?UTF-8?q?=E2=9C=A8=20fix(internal):=20removed=20?= =?UTF-8?q?unnecessary=20changes.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index aa152b98..adc3839d 100644 --- a/package.json +++ b/package.json @@ -67,13 +67,13 @@ "changelog": { "repo": "wpmudev/shared-ui-react", "labels": { - "breaking": "💥 Breaking Changes", + "breaking": "💥 Breaking Changes", "new": "✨ New Features", "improvement": "🚀 Improvements", "accessibility": "♿️ Accessibility", "bug": "🐛 Bug Fixes", "documentation": "📝 Documentation", - "internal": "🏠 Internal" + "internal": "🏠 Internal" }, "cacheDir": ".changelog" } From 8945e9f4469c19ea175db36a7b1496a7b4c8d89b Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Thu, 19 May 2022 12:11:05 +0530 Subject: [PATCH 249/310] =?UTF-8?q?=E2=9C=A8=20fix(internal):=20removed=20?= =?UTF-8?q?unnecessary=20changes.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index adc3839d..fe2ec628 100644 --- a/package.json +++ b/package.json @@ -26,16 +26,18 @@ "@storybook/addon-essentials": "^6.4.22", "@storybook/addon-links": "^6.4.22", "@storybook/react": "^6.4.22", + "@wordpress/eslint-plugin": "^12.2.0", "babel-jest": "^26.6.3", "babel-loader": "^8.2.1", "chromatic": "^6.5.4", "css-loader": "^5.0.1", - "eslint": "^7.18.0", - "eslint-config-prettier": "^7.2.0", - "eslint-plugin-jsx-a11y": "^6.4.1", - "eslint-plugin-prettier": "^3.3.1", - "eslint-plugin-react": "^7.22.0", - "eslint-plugin-react-hooks": "^4.2.0", + "eslint": "^8.15.0", + "eslint-config-prettier": "^8.5.0", + "eslint-plugin-jsx-a11y": "^6.5.1", + "eslint-plugin-prettier": "^4.0.0", + "eslint-plugin-react": "^7.29.4", + "eslint-plugin-react-hooks": "^4.5.0", + "eslint-plugin-storybook": "^0.5.11", "gh-pages": "^3.1.0", "jest": "^26.6.3", "lerna": "^4.0.0", @@ -47,11 +49,9 @@ "style-loader": "^2.0.0" }, "resolutions": { - "nth-check": "^2.0.1", - "glob-parent": "^6.0.2", - "trim": "^1.0.1", - "postcss": "^8.4.13", - "autoprefixer": "^10.4.7" + "nth-check": "^2.0.1", + "glob-parent": "^6.0.2", + "trim": "^1.0.1" }, "scripts": { "build": "npx lerna run build", From 8cb238be38d04c6478e88b3ae56d37209d79086f Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Thu, 19 May 2022 12:26:35 +0530 Subject: [PATCH 250/310] =?UTF-8?q?=E2=9C=A8=20fix(internal):=20removed=20?= =?UTF-8?q?unnecessary=20changes.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index fe2ec628..cfff4778 100644 --- a/package.json +++ b/package.json @@ -26,18 +26,16 @@ "@storybook/addon-essentials": "^6.4.22", "@storybook/addon-links": "^6.4.22", "@storybook/react": "^6.4.22", - "@wordpress/eslint-plugin": "^12.2.0", "babel-jest": "^26.6.3", "babel-loader": "^8.2.1", "chromatic": "^6.5.4", "css-loader": "^5.0.1", - "eslint": "^8.15.0", - "eslint-config-prettier": "^8.5.0", - "eslint-plugin-jsx-a11y": "^6.5.1", - "eslint-plugin-prettier": "^4.0.0", - "eslint-plugin-react": "^7.29.4", - "eslint-plugin-react-hooks": "^4.5.0", - "eslint-plugin-storybook": "^0.5.11", + "eslint": "^7.18.0", + "eslint-config-prettier": "^7.2.0", + "eslint-plugin-jsx-a11y": "^6.4.1", + "eslint-plugin-prettier": "^3.3.1", + "eslint-plugin-react": "^7.22.0", + "eslint-plugin-react-hooks": "^4.2.0", "gh-pages": "^3.1.0", "jest": "^26.6.3", "lerna": "^4.0.0", @@ -49,9 +47,11 @@ "style-loader": "^2.0.0" }, "resolutions": { - "nth-check": "^2.0.1", - "glob-parent": "^6.0.2", - "trim": "^1.0.1" + "nth-check": "^2.0.1", + "glob-parent": "^6.0.2", + "trim": "^1.0.1", + "postcss": "^8.4.13", + "autoprefixer": "^10.4.7" }, "scripts": { "build": "npx lerna run build", @@ -67,13 +67,13 @@ "changelog": { "repo": "wpmudev/shared-ui-react", "labels": { - "breaking": "💥 Breaking Changes", + "breaking": "💥 Breaking Changes", "new": "✨ New Features", "improvement": "🚀 Improvements", "accessibility": "♿️ Accessibility", "bug": "🐛 Bug Fixes", "documentation": "📝 Documentation", - "internal": "🏠 Internal" + "internal": "🏠 Internal" }, "cacheDir": ".changelog" } From cf129b58b0789f333e4ebc6bc020ece3b7c74c1b Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Thu, 19 May 2022 12:50:11 +0530 Subject: [PATCH 251/310] =?UTF-8?q?=F0=9F=90=9B=20fix(progress-bar):=20rem?= =?UTF-8?q?oved=20redundant=20code.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-progress-bar/lib/react-progress-bar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-progress-bar/lib/react-progress-bar.js b/packages/react-progress-bar/lib/react-progress-bar.js index 67803240..97be50aa 100644 --- a/packages/react-progress-bar/lib/react-progress-bar.js +++ b/packages/react-progress-bar/lib/react-progress-bar.js @@ -31,7 +31,7 @@ export const ProgressBar = ({ ); const checkValue = (value) => { - if('undefined' !== typeof value && null !== value && !isNaN(value)) { + if(null !== value) { return value; } return 0; From 7cdf9db9d650f5c3d6c9a53dacc3fc51de9c6406 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Thu, 19 May 2022 22:25:03 +0530 Subject: [PATCH 252/310] =?UTF-8?q?=F0=9F=90=9B=20fix(progress-bar):=20che?= =?UTF-8?q?ck=20for=20null,=20not=20a=20number=20and=20undefined.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/react-progress-bar.js | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/packages/react-progress-bar/lib/react-progress-bar.js b/packages/react-progress-bar/lib/react-progress-bar.js index 97be50aa..a5b24f71 100644 --- a/packages/react-progress-bar/lib/react-progress-bar.js +++ b/packages/react-progress-bar/lib/react-progress-bar.js @@ -14,7 +14,13 @@ export const ProgressBar = ({ ...props }) => { const extraClasses = 'undefined' !== typeof classes && '' !== classes ? ' ' + classes : ''; - const value = 'undefined' !== typeof now && !isNaN(now) ? now : 0; + // check whether value is valid or not. + const getValue = value => { + if (value === undefined || Number.isNaN(value) || value === null) + return 0; + return value; + } + const value = getValue(now); const lang = Object.assign( { @@ -30,20 +36,13 @@ export const ProgressBar = ({ ); - const checkValue = (value) => { - if(null !== value) { - return value; - } - return 0; - } - const loaderText = hasLabel && ( - {checkValue(value)}% + {value}% ); const loaderBar = (
- +
); From c41ffcd426d3f4452cdd9bec9974ce2fa72508b7 Mon Sep 17 00:00:00 2001 From: Leighton Sapir <2328848+iamleigh@users.noreply.github.com> Date: Thu, 19 May 2022 23:15:09 -0500 Subject: [PATCH 253/310] =?UTF-8?q?=F0=9F=94=92=EF=B8=8F=20Update=20`yarn.?= =?UTF-8?q?lock`?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- yarn.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index db92b5dc..836b35c7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5085,7 +5085,7 @@ browserify-zlib@^0.2.0: dependencies: pako "~1.0.5" -browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4.17.6, browserslist@^4.20.2, browserslist@^4.20.3: +browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.17.6, browserslist@^4.20.2, browserslist@^4.20.3: version "4.20.3" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.20.3.tgz#eb7572f49ec430e054f56d52ff0ebe9be915f8bf" integrity sha512-NBhymBQl1zM0Y5dQT/O+xiLP9/rzOIQdKM/eMJBAq7yBgaB6krIYLGejrwVYnSHZdqjscB1SPuAjHwxjvN6Wdg== From 99885ee0452ab77a78141b3911d1846ed5b33daf Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Fri, 20 May 2022 10:06:31 +0530 Subject: [PATCH 254/310] =?UTF-8?q?=F0=9F=90=9B=20fix(progress-bar):=20che?= =?UTF-8?q?ck=20for=20empty=20string=20as=20well.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-progress-bar/lib/react-progress-bar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-progress-bar/lib/react-progress-bar.js b/packages/react-progress-bar/lib/react-progress-bar.js index a5b24f71..797fa34e 100644 --- a/packages/react-progress-bar/lib/react-progress-bar.js +++ b/packages/react-progress-bar/lib/react-progress-bar.js @@ -16,7 +16,7 @@ export const ProgressBar = ({ const extraClasses = 'undefined' !== typeof classes && '' !== classes ? ' ' + classes : ''; // check whether value is valid or not. const getValue = value => { - if (value === undefined || Number.isNaN(value) || value === null) + if (value === undefined || Number.isNaN(value) || value === null || value === '') return 0; return value; } From d10d88507ccb2c1cf6f6296ea441f883860542ac Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Fri, 20 May 2022 10:09:02 +0530 Subject: [PATCH 255/310] =?UTF-8?q?=F0=9F=90=9B=20fix(progress-bar):=20che?= =?UTF-8?q?ck=20for=20empty=20string=20as=20well.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-progress-bar/lib/react-progress-bar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-progress-bar/lib/react-progress-bar.js b/packages/react-progress-bar/lib/react-progress-bar.js index 2237d0e6..4cdef00d 100644 --- a/packages/react-progress-bar/lib/react-progress-bar.js +++ b/packages/react-progress-bar/lib/react-progress-bar.js @@ -16,7 +16,7 @@ export const ProgressBar = ({ const extraClasses = 'undefined' !== typeof classes && '' !== classes ? ' ' + classes : ''; // check whether value is valid or not. const getValue = value => { - if (value === undefined || Number.isNaN(value) || value === null || value === '') + if (value === undefined || Number.isNaN(value) || value === null || value.length === 0) return 0; return value; } From db416740d9dc35494e09d9cbc85db271a96ccfd7 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Mon, 23 May 2022 13:07:28 +0530 Subject: [PATCH 256/310] =?UTF-8?q?=F0=9F=90=9B=20fix(progress-bar):=20add?= =?UTF-8?q?ed=20parseInt=20to=20compare=20for=20value.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-progress-bar/lib/react-progress-bar.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/react-progress-bar/lib/react-progress-bar.js b/packages/react-progress-bar/lib/react-progress-bar.js index 4cdef00d..bb808684 100644 --- a/packages/react-progress-bar/lib/react-progress-bar.js +++ b/packages/react-progress-bar/lib/react-progress-bar.js @@ -14,13 +14,7 @@ export const ProgressBar = ({ ...props }) => { const extraClasses = 'undefined' !== typeof classes && '' !== classes ? ' ' + classes : ''; - // check whether value is valid or not. - const getValue = value => { - if (value === undefined || Number.isNaN(value) || value === null || value.length === 0) - return 0; - return value; - } - const value = getValue(now); + const value = parseInt(now) ? parseInt(now) : 0; const lang = Object.assign( { cancel: 'Cancel', From e65cd408a8b2ee07a8536de9db10e1df2b0bdbcc Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Wed, 25 May 2022 15:48:12 +0530 Subject: [PATCH 257/310] =?UTF-8?q?=E2=9C=A8=20new(progress=20bar):=20adde?= =?UTF-8?q?d=20edge=20usecases=20and=20Number=20in=20place=20of=20parseInt?= =?UTF-8?q?.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-progress-bar/lib/react-progress-bar.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react-progress-bar/lib/react-progress-bar.js b/packages/react-progress-bar/lib/react-progress-bar.js index bb808684..6f6add37 100644 --- a/packages/react-progress-bar/lib/react-progress-bar.js +++ b/packages/react-progress-bar/lib/react-progress-bar.js @@ -14,7 +14,8 @@ export const ProgressBar = ({ ...props }) => { const extraClasses = 'undefined' !== typeof classes && '' !== classes ? ' ' + classes : ''; - const value = parseInt(now) ? parseInt(now) : 0; + const currValue = Number(now); + const value = currValue && currValue > 0 ? (currValue > 100 ? 100: currValue) : 0; const lang = Object.assign( { cancel: 'Cancel', From ae8176f67e0677ef6afd676ef58d26d2534376c8 Mon Sep 17 00:00:00 2001 From: Leighton Sapir <2328848+iamleigh@users.noreply.github.com> Date: Thu, 26 May 2022 00:01:52 -0500 Subject: [PATCH 258/310] =?UTF-8?q?=F0=9F=A7=91=E2=80=8D=F0=9F=92=BB=20Rem?= =?UTF-8?q?ove=20`master`=20branch=20from=20Chromatic=20automation.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This will help to prevent an unnecessary amount of snapshots so we can keep using the free version that’s limited to 5000 snaps per month. --- .github/workflows/chromatic.yml | 2 -- 1 file changed, 2 deletions(-) diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml index 56b77101..bb8a0ccb 100644 --- a/.github/workflows/chromatic.yml +++ b/.github/workflows/chromatic.yml @@ -2,11 +2,9 @@ name: "Chromatic" on: pull_request_target: branches: - - master - release/** push: branches: - - master - release/** jobs: From c8bd7d7e89d382b40169e812bf1a3905dd8f77e1 Mon Sep 17 00:00:00 2001 From: Pawan Kumar Date: Thu, 26 May 2022 11:50:58 +0530 Subject: [PATCH 259/310] =?UTF-8?q?=F0=9F=90=9B=20fix(accordion):=20empty?= =?UTF-8?q?=20image=20doesn't=20removes=20field.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-accordion/lib/react-accordion.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-accordion/lib/react-accordion.js b/packages/react-accordion/lib/react-accordion.js index 17e83224..252a2b2e 100644 --- a/packages/react-accordion/lib/react-accordion.js +++ b/packages/react-accordion/lib/react-accordion.js @@ -76,7 +76,7 @@ const AccordionItemHeader = ({ ?