Commit Graph

36 Commits

Author SHA1 Message Date
louwie17 6e2c11f556
Select tree dropdown menu SlotFill support (#37574)
* Add initial select tree popover and modal story

* Add slot fill popover support

* Add changelog

* Remove unneeded use of combobox ref in select-tree

* Fix lint errors

* Address PR feedback and fix issue with parent select control

* Add changelog
2023-04-14 04:22:59 -03:00
Nathan Silveira 1f698d2583
Create experimental SelectTree component (#37319)
* Create a new experimental component TreeSelect
Add functionality to TreeControl to support additional scenarios

* Fix a bug where the shouldNotRecursivelySelect was not passed to Trees inside Tree Items

* Do not collapse nodes inside useEffect if they are already expanded

* Add storybook example for SelectTreeControl

* Move component to its own directory

* Remove wrong comment

* Fix CSS import path

* Remove getFilteredItems from select-tree

* Stop using getFilteredItems inside select tree
Create new shouldShowCreateButton prop to allow receiving only filtered items inside component
Remove support to show custom getItemLabel and getItemValue

* Change interface

* Rename back Item type names

* Rename back value

* Fix lint error and remove passing ref to treeProps

* Make id mandatory in SelectTree

* Refactor

* Improve selector to focus on create button
2023-03-24 14:49:45 -03:00
Christopher Allford 67cde87fd1
Enforce Strict `@types` Dependencies (#37351) 2023-03-23 18:02:20 -07:00
Joel Thiessen edbe36d7ad
Adding collapsible content block with flexible rendering (#37305)
* Adding collapsible content block with flexible rendering

* Adding changelogs

* Move content inside display state to avoid backwards compat issues

---------

Co-authored-by: Lourens Schep <lourensschep@gmail.com>
2023-03-20 18:18:44 -07:00
louwie17 93af1c73e9
Update tree select control (#36932)
* Export tree select control and add 3 additional props

* Update storyboook

* Add unit tests for new props

* Fix duplicate parent selection
2023-03-01 03:54:53 -04:00
louwie17 23d5c4d074
Update product editor packages (#36815)
* Add product section components back to Components package

* Fix imports

* Add a deprecated message

* Add changelog.
2023-02-16 10:43:23 -04:00
louwie17 5f0572664f
Add new `@woocommerce/product-editor` JS package (#36600)
* Bootstrap product-editor package

* Move product section components over to product editor package

* Add changelogs

* Remove unused import leftover from rebase
2023-01-31 09:38:28 -04:00
louwie17 bcdf2518e6
Refactor product tabs and add product tab slot fills (#36551) 2023-01-24 15:37:21 -08:00
Joel Thiessen 2fae3537a7
Experimental SlotContext for managing slot fill interactions (#36333)
* Adding Slotcontext component and adding support to product slot fill components

* Passing inject props correctly to non-function components.
2023-01-19 05:52:45 -04:00
Joel Thiessen d9daad3e9c
Converting product details section to utilize slot fills (#36368)
* Working prototype of product details via slotfill

* Raising default order for product slot-fills

* Move logic to details field name component

* Adding order prop to all fills.

* Adding components changelog

* Adding changelog

* Deleting obsolete product details section files

* Reducing spacing between slot filled fields
2023-01-17 05:04:58 -04:00
louwie17 8fc9c5cc09
Add basic fields for rendering of Product MVP (#36392) 2023-01-16 12:50:30 -08:00
Joel Thiessen 6e428201c1
Adding WooProductSectionItem slotfill (#36331) 2023-01-11 10:00:20 -08:00
Joel Thiessen f429b9444c
Adding WooProductFieldItem slotfill (#36315) 2023-01-10 10:13:02 -08:00
RJ 4927a2e412
dev: migrate @woocommerce/components/link to ts (#36285) 2023-01-10 19:12:22 +08:00
Maikel David Pérez Gómez 788b3ef59b
Add async filtering support to the select-control component (#35839)
* Add async filtering support to the select-control component

* Apply comment suggestions

* Apply more comment suggestions
2022-12-07 14:24:32 -03:00
Joshua T Flowers 2aa4ce0d9f
Disable product inventory toggle when inventory management is disabled (#35059)
* Disable product inventory toggle when inventory management is disabled

* Export conditional wrapper as experimental component

* Conditionally show the tooltip

* Add comment explaining the tooltip overlay

* Add components changelog entry

* Display tooltip on hover any portion of toggle or label

* Add changelog entry

* Fix scss lint error

* Center tooltip over label and toggle

* Fix up input props after rebase

* Add wrapper around field to maintain block item formatting
2022-10-24 09:08:27 -07:00
Joshua T Flowers c72e00d85c
Add Tooltip component and remove EnrichedLabel (#35024)
* Add experimental tooltip component

* Add tooltip stories

* Update EnrichedLabel component

* Remove EnrichedLabel

* Add changelog entries

* Fix up linting issues

* Handle PR feedback
2022-10-18 16:08:49 -07:00
louwie17 1f7deb139f
Add popover support to select control dropdown (#34967)
* Add dropdownPlacement option to SelectControl

* Make use of parent element of menu for width

* Add changelog

* Add useEffect for boundingRect so it gets updated accordingly

* Fix styling for popover dropdown

* Move popup markup down to render return

* Move getMenuProps up

* Move getMenuProps down to list again and always render the popover menu

* Add MenuSlot that adds popover slot to mody with aria-live=off so it is skipped by Modal

* Add comment in relation to the eslint-disable comment

* Fix flashing of popover and addressed some minor PR suggestions
2022-10-18 16:55:37 -03:00
louwie17 c55c91d7e0
Add category field dropdown field (#34400)
* Add initial category field component with new typeahead

Move search logic to useCategorySearch hook

Add initial add new category logic

Add parent category field to add new category modal

Adding some debug changes

Update category control to make use of internal selectItem function of select control

Add changelogs

Update pagesize back to 100

Add placeholder

Empty placeholder

Fix input and icon sizes

Fix input underline

Add max height and scroll to category dropdown

Add sorting of category items

Auto open parents when traversing up the tree using arrow keys

Add several comments

Add some initial unit tests for the category field component

Add tests for useCategorySearch hook and fixed minor bug

Update styling and autoselect parent if child is selected

Fix styling issues for the select control dropdown inside a modal

Fix issue with creating new category with parent

Add function comment and fixed border styling

Prune out create new category logic

Fix minor css issue with border

Revert some of the select control changes and make use of the custom type

Fix up some styling changes

* Fix type conflict

* Revert change in state reducer

* Add cursor pointer

* Fix styling errors

* Fix broken category tests

* Fix merge conflict
2022-10-14 09:05:39 -03:00
Joshua T Flowers 618cc54a3f
Add RichTextEditor component using native block editor toolbar (#34865)
* Add initial rich text editor component

* Use fixed toolbar and add base formatters

* Add link as formatter option

* Fix up references to core/link block

* Add quote transform

* Add changelog entry

* Add text alignment toolbar

* Remove references to checkbox list

* Update toolbar button organization

* Remove unused rtj format types

* Create unique instance for editor writing flow

* Add registry provider for storybook examples

* Update styling for editor

* Rebase and fix lock file

* Add packages and type dependencies

* Move component to experimental

* Fix up formatting

* Update editor to use default GB toolbar

* Prefix names with woocoommerce

* Create block on initialization so toolbar is visible

* Rely on insertBlock to handle selection

* Update text editor to use setting instead of BlockList prop

* Fix up lock file after rebase

* Handle PR feedback

* Move logic for force rerender

* Fix up pnpm lock file

* Use trunk lock file

* Update lock file

* Add missing semicolon

* Use Pauls lock file and package file
2022-10-12 14:15:55 -07:00
Fernando Marichal 98162b9d42
Images Product management MVP 1.0 (#34769)
* Add image section

# Conflicts:
#	plugins/woocommerce-admin/client/products/add-product-page.tsx

* Add `keepSpaceWhenDragging` to sortable

# Conflicts:
#	packages/js/components/src/sortable/sortable-item.tsx
#	packages/js/components/src/sortable/sortable.tsx

# Conflicts:
#	packages/js/components/src/sortable/sortable.tsx

* Export ImageGalleryItem

* Add props to `image-gallery`

# Conflicts:
#	packages/js/components/src/image-gallery/image-gallery-item.tsx
#	packages/js/components/src/image-gallery/image-gallery.tsx

* Changed `media-uploader` label

* Add changelogs

* Fix image-gallery and sortable components

# Conflicts:
#	packages/js/components/src/sortable/sortable-item.tsx
#	packages/js/components/src/sortable/sortable.tsx

# Conflicts:
#	packages/js/components/src/image-gallery/image-gallery.tsx
#	packages/js/components/src/sortable/sortable.tsx

* Set gallery min-height

* Add onOrderChange

* Show images section edit-product

# Conflicts:
#	plugins/woocommerce-admin/client/products/edit-product-page.tsx

# Conflicts:
#	plugins/woocommerce-admin/client/products/edit-product-page.tsx

# Conflicts:
#	plugins/woocommerce-admin/client/products/edit-product-page.tsx

* Fix styles

* Fix styles

* Fix image alt

* Fix TS any

* Add prop `onDragOver`

# Conflicts:
#	packages/js/components/src/image-gallery/image-gallery.tsx

* Fix styles

* Fix padding

* Fix image area min-height

* Fix subtitle copy

* Fix image margin

* Change `draggedImageId`

* Fix `setDraggedImageId` reset

* Rename `isRemoveZoneVisible`

* Add `CardBody` and remove redundant `setValue`

* Fix card styles

* Remove `getUniqueImages`

* Use url as a key when there is no image id

* Fix `orderedImages`

* Add hover to gallery images

* Fix gallery arrows and set cover problems

* Altering blur handler to prevent toolbar closure on media modal

* Fix toolbar drag and drop

* Add replace fn

* Restoring modal class for blur function

* Fix storybook

* Ensuring onBlur doesn't happen while dragging, resolving issue in Firefox

* Adding expected event object to drag callbacks

* Fix image size

* Fix lint

* Another fix lint

* Update plugins/woocommerce-admin/client/products/sections/images-section.tsx

Co-authored-by: Joshua T Flowers <joshuatf@gmail.com>

* Fix `draggedImageId` default value

* Fix toolbar icon style

* Rename consts

* Update pnpm-lock.yaml

Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>
Co-authored-by: Joel <dygerati@gmail.com>
Co-authored-by: Joshua T Flowers <joshuatf@gmail.com>
2022-10-12 15:16:22 -03:00
louwie17 d756494bcc
Update/experimental select control (#34620)
* Combine last 23 commits into one.

Update css, so dropdown shows correctly

Add extra callbacks and expose some downshift combobox functions

Add changelog

Update stories to reflect new props

Update stories label

Removed `clearOnSelect` prop and reverted some other changes

Fix missed props during rebase

Remove old storybook story and slight fix from rebase

Remove unneeded code

Update default get filtered functionality and add regex escaping

Some updates by testing a new onStateChange callback

Expose the onStateChange callback for more fine control ove the useSelect

Some minor adjustments

Expose stateReducer and minor adjustments from PR review

Simplify logic around isOpen handling with outside component

Remove unused import

Remove onStateChange prop

Address PR feedback

Some minor adjustments to the input handling

Update the way the stateReducer is called

Remove some of the unneeded logic

Remove onStateChange and replace it with onSelectedItemChange and onInputValueChange for simplicity

Fix lint error

* Remove duplicate and unused import

* Fix call to ControlledPropUpdatedSelectedItem in story
2022-10-06 11:40:41 -03:00
louwie17 6af1695f34
Add/34333 attribute list (#34841)
* Add initial attribute list with dragging and removing functionality

* Fix sortable styling and remove the default selected logic

* Fix css formatting

* Add changelogs

* Add missing question mark

* Add tests

* Some minor CSS updates and move some logic to a util function

* Fix lint issues and add extra test
2022-10-05 13:04:20 -03:00
Maikel David Pérez Gómez 7fe05d65f3
Load size units to show them as a suffix of shipping dimensions fields (#34856)
* Add dimensions to shipping section
Change the FormComponent to support input name with dot notation like dimensions.width
Add the dimension controls to the product form

* Remove custom styles from FormSection component and use Card and CardBody instead

* Add dimension fields formating using the woo number global settings

* Add dimension fields validations

* Solve conflics from rebase

* Add changelogs

* Fix resetForm function to consider the passed params and the initialValues

* Load size units to show it as a suffix of shipping dimensions fields

* Fix card styles according the disign and pass props manually to BaseControl
2022-09-29 14:54:04 -03:00
RJ 6e2ada3706
Add: mobile app welcome modal and magic link (#34637) 2022-09-15 11:58:47 +08:00
Joshua T Flowers 43a24bc6c3
Add image gallery component (#34435)
* Add initial ImageGallery component

* Add changelog entry

* Extract list item component and styles

* Rename SortableList to Sortable

* Add placeholders for dropping items

* Fix drag throttling delays

* Use placeholder component

* Move handles back to sortable

* Add horizontal option to sortable

* Use CSS for placeholder styles

* Remove placeholder component

* Add image gallery styles

* Add last droppable class

* Extract class utils and add tests

* Add list item stories

* Add readmes

* Handle PR feedback
2022-09-06 12:46:32 -07:00
Joel Thiessen 668244b2d7
Adding DateTimePicker component (#34293)
* Rudimentary functional version of datetimepicker

* Adding changelog

* Adding package changelog

* Making component more than barely functional

* Removing unnecessary export

* Rename directory to date-time-picker

* Add initial story

* Pass datetime to onChange callback

* Localize error string

* Remove initial error prop

* Rename currentDate to initialDate

* Simplify state for selected date

* Add extra stories around component

* Trigger onChange whenever date is changed

* Add readme

* Allow currentDate to be changed via props

* Update readme

* Update name to DateTimePickerControl

Co-authored-by: Joshua Flowers <joshuatf@gmail.com>
2022-08-23 15:19:46 -07:00
Joshua T Flowers e73ffbe088
Add FormSection component (#34348)
* Add FormSection component

* Add changelog entry

* Move card styling outside component

* Add readme

* Allow JSX elements for title and description

* Fix lint errors
2022-08-18 10:36:43 -07:00
Joshua T Flowers 32de8bee6f
Add SearchControl component (#34159)
* Add initial SearchControl component

* Add async example

* Reorganize getItemPropsType type

* Create separate MenuItem component

* Update items to use value/label pairs

* Add fuzzy matching example

* Use MenuItem component in example

* Add callback method example and onSelect prop

* Add custom render example

* Add styling

* Simplify Menu component

* Add changelog entry

* Update SelectControl to DeprecatedSelectControl

* Rename SearchControl to SelectControl

* Add readme

* Add placeholder prop

* Add icon to combox box

* Rename deprecated SelectControl classes

* Add changelog entries

* Pass menu props to menu to fix ref issues

* Update lock file

* Rebase and update lock file

* Fix up IDs in e2e tests

* Make list structure more semantic

* Fix update conflict with pnpm-lock

* Move new SelectControl to experimental

* Change experimental class name to avoid style conflicts

* Fix up latest lock file from rebase

* Remove onboarding e2e changes

* Update changelogs

* Update lock file again

* Update pnpm-lock and fix lint error

Co-authored-by: Lourens Schep <lourensschep@gmail.com>
2022-08-18 10:36:20 -07:00
Joshua T Flowers a98f0fef52
Add Media Uploader component (#34181)
* Add media uploader component

* Expand on mocked examples in storybook

* Add styling

* Move MediaUploder out of index

* Add changelog entry

* Handle PR feedback

* Add readme

* Fix missing media utils types

* Rebase and use variant instead of isSecondary for Button

* Fix up lock file

* Fix up lint errors
2022-08-12 12:58:25 -07:00
Joshua T Flowers 19853e1577
Add SortableList component (#34237)
* Add initial draggable list component

* Add changelog entry

* Add drag and drop index

* Add util for checking target drop index

* Add handle component

* Rename component to SortableList

* Use dragged list item for placeholder height

* Add onOrderChange prop to subscribde to updates

* Throttle the drag over event

* Add base styles

* Add utils tests

* Add component tests

* Export component

* Update changelog entry

* Add readme

* Escape pipe in readme
2022-08-12 11:45:26 -07:00
Fernando 4693e251f7
Add product name and checkboxes for Product details (#34214)
* Add product details

# Conflicts:
#	plugins/woocommerce-admin/client/products/sections/product-details-section.tsx

# Conflicts:
#	plugins/woocommerce-admin/client/products/sections/product-details-section.tsx

* Rename folder

* Fix help icon

* Fix form

* Removed useless `useState`

* Add `getCheckboxProps`

* Add params to getCheckboxProps

* Add recordEvent

* Rename event

* Add changelog

* Fix texts

* Remove Fragment

* Fix useState initial state

* Convert EnrichedLabel to TS

* Fix unknown value prop

* Rename event

* Move EnrichedLabel

* Fix js warning

* Add storybook

* Add readme

* Add components changelog

Co-authored-by: Fernando Marichal <contacto@fernandomarichal.com>
2022-08-12 10:47:54 -03:00
louwie17 a498cc8280
Add product form buttons and specific product edit page (#34211)
* Add initial product form action buttons to form

* Add new edit page and allow for updating and creating products

* Move crud functions to helper hook to keep things seperated better

* Add changelog

* ADd package changelogs

* Add isPending selector to products store

* Fix trash screen showing up when deleting product and add loading indicators

* Add extra types to Product type

* Update track names and add product data to tracks

* Update track logic when product is published

* Remove the Image section for now, to prevent confusion as it is not ready yet

* Add tests for the product form actions

* Update copy for publish & duplicate

* Remove unused code

* Set window.location correctly with href

* Reset changes in pnpm lock

* Moved pending action variables to product helper and updated buttons to reflect new suggestions

* Fix backwards compabitibility issue with Form changes

* Add switch to draft button
2022-08-11 11:04:14 -03:00
louwie17 339756ff7a
Add/32 react provider to form component (#34082)
* Add a FormContext to the Form component, to prevent the need for property drilling

* Add changelog

* Add PR number to changelog

* Replace some of the unknown types with any types to keep things more generic
2022-08-04 11:14:16 -03:00
Joel Thiessen fd04261cab
Adding CollapsibleContent component (#34129)
* Basic version of CollapsibleContent component

* Adding changelog

* Add story for component

* Update styling to match designs

* Add initially expanded example

Co-authored-by: Joshua Flowers <joshuatf@gmail.com>
2022-08-03 08:09:00 -07:00
Chi-Hsuan Huang 5db5c8b110
Add tour kit component (#33229)
* Add tour-kit component

* Add @types/wordpress__viewport to @woocommerce/components devDeps

* Add tour-kit README.md

* Add primaryButtonText option to tour kit step meta

* Add changelog

* Remove unneeded style import

* Set position and z-index style for tour-kit

* Add disable primary button feature for tour kit

* Export TourKitTypes

* Update style-build config for @automattic/* packages

* Add @automattic/* deps for components

* Ignore fs in webpack.config.js

* Update tour-kit stories

* Add tour-kit tests

* Update tour-kit README.md

* Update tour-kit types

* Update webpack.config.js

* Update style.scss

* Add auto focus feature

* Update type doc
2022-06-08 17:16:31 +08:00