Add standalone components bundles #528

bernardodiasc · 2020-04-30T14:35:56Z

Release Type: Breaking change

Fixes https://x-team-internal.atlassian.net/browse/XP-3673

Description

Some UI components rely on third-party lib, and those libs uses window. When attempting to use those UI comps in XP-Registration, it breaks the build, because Gatsby build uses SSR, where window is undefined.

By abstracting those UI components to a different output we can load using React.lazy feature.

Example:

const SkillsSelector = React.lazy(() => import('xp-ui/lib/SkillsSelector'))

Checklist

set yourself as an assignee
set appropriate labels for a PR (In Review or In Progress depending on its status)
move respective JIRA issue to the PEER REVIEW column
Flow typechecks passed (npm run flow)
if added a new UI component that is meant to be used directly by other apps, remember to export that from the appropriate bundle file: src/index.js and/or src/registration.js
manually tested the app by running it in several different browsers (Firefox, Chrome, Opera, Safari, MS IE/Edge, etc.) and checked nothing is broken and operates as expected!

Related PRs

branch	PR
`XP-3673-create-experience-page`	XP Registration

Steps to Test or Reproduce

Copy the lib files from this branch to xp-registration and run npm run build. The build should ran successfully.

Impacted Areas in Application

New xp-ui/lib/ComponentName.js is generated when running npm run build in XP-UI

Screenshots

npm run build in xp-registration

Before:

After:

* Add SkillsSelector component * Fix package-lock conflict * Adjust SkillsSelector behaviour * Group external exports together * Update SkillsSelector * Update SkillsSelector * Update SkillsSelector * Reorder import statements * Update SkillsSelector * Build app * Update SkillsSelector * Update SkillsSelector Co-authored-by: Nick Plekhanov <[email protected]>

* move CustomSelector and rename SkillsSelectorOption to SelectorOption * fix lint * fix flow * add more props * clean props * rebuild * update stories

venanciorodrigo

Looks good, builds are running properly and working as expected inside registration.

nicksp

Let's get this merged. Looks good.

nicksp · 2020-05-08T15:14:31Z

webpack.standalone.js

    fonts: './src/styles/fonts.js',
    registration: './src/registration.js',
+    CustomSelector: './src/components/ui/CustomSelector',


This is a good decision until we finish off #535 and make proper use of per component build.

* Add SkillsSelector component (#514) * Add SkillsSelector component * Fix package-lock conflict * Adjust SkillsSelector behaviour * Group external exports together * Update SkillsSelector * Update SkillsSelector * Update SkillsSelector * Reorder import statements * Update SkillsSelector * Build app * Update SkillsSelector * Update SkillsSelector Co-authored-by: Nick Plekhanov <[email protected]> * Move CustomSelect from XP-Reg to XP-UI (#523) * move CustomSelector and rename SkillsSelectorOption to SelectorOption * fix lint * fix flow * add more props * clean props * rebuild * update stories * Add lazyload.js output * Make independent bundles for each client-side-only components * Add error message in the SignupScreen.InputGroup * Add disabled props for Timeframe and SkillsSelector * Replace Select with CustomSelector in SkillsSelector * Update CustomSelector * Build app * Rebuild the app Co-authored-by: Nick Plekhanov <[email protected]> Co-authored-by: Carlos Almeida <[email protected]>

* Add SkillsSelector component (#514) * Add SkillsSelector component * Fix package-lock conflict * Adjust SkillsSelector behaviour * Group external exports together * Update SkillsSelector * Update SkillsSelector * Update SkillsSelector * Reorder import statements * Update SkillsSelector * Build app * Update SkillsSelector * Update SkillsSelector Co-authored-by: Nick Plekhanov <[email protected]> * Add Label UI component (#521) * Add component * Amend * Amend flow types * Amend blank lines * Amend blank lines * Amend blank lines and variable name * Amend blank lines and indenting * Refactor to avoid unnecessary div renders * Adjustments on Label component Co-authored-by: Bernardo Dias <[email protected]> * Create SignupScreen component (#522) * Move CustomSelect from XP-Reg to XP-UI (#523) * move CustomSelector and rename SkillsSelectorOption to SelectorOption * fix lint * fix flow * add more props * clean props * rebuild * update stories * Fixed a capitalization error which prevents building * Create Timeframe component (#525) * Create Timeframe component * Fix Timeframe validations * Update Timeframe component * Add standalone components bundles (#528) * Add SkillsSelector component (#514) * Add SkillsSelector component * Fix package-lock conflict * Adjust SkillsSelector behaviour * Group external exports together * Update SkillsSelector * Update SkillsSelector * Update SkillsSelector * Reorder import statements * Update SkillsSelector * Build app * Update SkillsSelector * Update SkillsSelector Co-authored-by: Nick Plekhanov <[email protected]> * Move CustomSelect from XP-Reg to XP-UI (#523) * move CustomSelector and rename SkillsSelectorOption to SelectorOption * fix lint * fix flow * add more props * clean props * rebuild * update stories * Add lazyload.js output * Make independent bundles for each client-side-only components * Add error message in the SignupScreen.InputGroup * Add disabled props for Timeframe and SkillsSelector * Replace Select with CustomSelector in SkillsSelector * Update CustomSelector * Build app * Rebuild the app Co-authored-by: Nick Plekhanov <[email protected]> Co-authored-by: Carlos Almeida <[email protected]> * Create WorkExperienceList UI Component (#530) * Add SkillsSelector component (#514) * Add SkillsSelector component * Fix package-lock conflict * Adjust SkillsSelector behaviour * Group external exports together * Update SkillsSelector * Update SkillsSelector * Update SkillsSelector * Reorder import statements * Update SkillsSelector * Build app * Update SkillsSelector * Update SkillsSelector Co-authored-by: Nick Plekhanov <[email protected]> * Add Label UI component (#521) * Add component * Amend * Amend flow types * Amend blank lines * Amend blank lines * Amend blank lines and variable name * Amend blank lines and indenting * Refactor to avoid unnecessary div renders * Adjustments on Label component Co-authored-by: Bernardo Dias <[email protected]> * Create SignupScreen component (#522) * Move CustomSelect from XP-Reg to XP-UI (#523) * move CustomSelector and rename SkillsSelectorOption to SelectorOption * fix lint * fix flow * add more props * clean props * rebuild * update stories * Fixed a capitalization error which prevents building * Create Timeframe component (#525) * Create Timeframe component * Fix Timeframe validations * Update Timeframe component * create workExperienceCard component * fix typo in stories * add new case and update tests description * update props * add list * finish with card and list components * refactor and fixed flow errors * updated exported component * Add SkillsSelector component (#514) * Add SkillsSelector component * Fix package-lock conflict * Adjust SkillsSelector behaviour * Group external exports together * Update SkillsSelector * Update SkillsSelector * Update SkillsSelector * Reorder import statements * Update SkillsSelector * Build app * Update SkillsSelector * Update SkillsSelector Co-authored-by: Nick Plekhanov <[email protected]> * Add Label UI component (#521) * Add component * Amend * Amend flow types * Amend blank lines * Amend blank lines * Amend blank lines and variable name * Amend blank lines and indenting * Refactor to avoid unnecessary div renders * Adjustments on Label component Co-authored-by: Bernardo Dias <[email protected]> * Create SignupScreen component (#522) * Move CustomSelect from XP-Reg to XP-UI (#523) * move CustomSelector and rename SkillsSelectorOption to SelectorOption * fix lint * fix flow * add more props * clean props * rebuild * update stories * Fixed a capitalization error which prevents building * Create Timeframe component (#525) * Create Timeframe component * Fix Timeframe validations * Update Timeframe component * refactored due to code-review * changes applied due to the code-review feedbacks * changes applied due to the code-review feedbacks * restoring back files after rebase * building * typo error fixed Co-authored-by: Bernardo Dias <[email protected]> Co-authored-by: Nick Plekhanov <[email protected]> Co-authored-by: Dener Miranda <[email protected]> Co-authored-by: Jesse Bangs <[email protected]> * Multiple work experiences UI updates (#542) * Component adjustments for multiple work experiences * Add SignupForm component * Adjustments on signup form and work experience related components * Create AddMoreButton * Update ConfirmationBox * Fix responsiveness of SignupForm * Adjustments for code review * Adjust ConfirmationBox * Create InputError and InputSection (#546) * Create InputError and InputSet * Include lib files * Rename InputSet to InputSection * Add more showcases for InputSection * Add disabled state on ConfirmationBox (#547) * Add disabled state on ConfirmationBox * Include lib files * Build app Co-authored-by: Nick Plekhanov <[email protected]> * Rework TextareaEditor component (#548) * Rework TextareaEditor component * Changes according code review. * Different colour for text limit and Validation for initial value * minor update * Including lib files * Variable names tweaks according to coding review * Including Lib files * Event Type fix * Naming vars * Admin work experience (#550) * Create work experience presenter component (#531) * added in a basic work entry files * move the experience type definitions into the type utils * added stories for the presenter component and modified type entries * protect against the case where experience is null * export the new component from xp-ui * replaced Markdown with RichTextEditor and added task names to TODOs * updates for syntax consistency * added one trailing code convention fix * Create work experience editor (#533) * added in a basic work entry files * move the experience type definitions into the type utils * added stories for the presenter component and modified type entries * protect against the case where experience is null * export the new component from xp-ui * rebuild lib files * rework the Experience object to use startDate and endDate rather than start_date and end_date * implement initial version of WorkExperienceEntryEditor * additional edits for options etc * Replace TextareaEditor with RichTextEditor * updates to index and stories to handle edge cases * added a prop to cleanly start the InlineEditor in edit mode * tweaks to the editor presentation * updates to stories, correctly using the SkillsEditor and eliminating errors * make exports follow conventions * Create work experience presenter component (#531) * added in a basic work entry files * move the experience type definitions into the type utils * added stories for the presenter component and modified type entries * protect against the case where experience is null * export the new component from xp-ui * replaced Markdown with RichTextEditor and added task names to TODOs * updates for syntax consistency * added one trailing code convention fix * Minor stylistic tweaks * rebuilt libraries Co-authored-by: Carlos Almeida <[email protected]> * Admin work experience styles (#545) * modified styles for better integration with xp admin page * Add styles to the WorkExperienceEntryPresenter stories Since the WorkExperienceEntryPresenter no longer has its own text styles, we need to create a wrapper to avoid giving the impression that its text styling is broken. * Hide work experience items beyond the 3rd and make buttons wider In accordance with the spec, only 3 work experience entries are added at the start, with an option to view more. Buttons are changed into a `wide outline` style to match the image. * fix mistaken use of class => className * Update src/components/ui/WorkExperience/index.js Formatting jsx a little more nicely. Co-authored-by: Bernardo Dias <[email protected]> * fix things introduced by making changes in the github UI * Fix CustomSelector styles * minor improvements to formatting and api Co-authored-by: Bernardo Dias <[email protected]> * Fix flow errors introduced as part of rebase * lib rebuilt after rebase Co-authored-by: Carlos Almeida <[email protected]> Co-authored-by: Bernardo Dias <[email protected]> * Updates for components used at About page (#551) * Add isInvalid state for some form input components * Fix null issue with prop update on TextareaEditor * Merge remote-tracking branch 'origin/develop' into XP-3337-work-experience-page * Remove unused files * Add Milestones component (#555) * Update components for experience form (#556) Co-authored-by: Nick Plekhanov <[email protected]> Co-authored-by: Dener Miranda <[email protected]> Co-authored-by: Carlos Almeida <[email protected]> Co-authored-by: Jesse Bangs <[email protected]> Co-authored-by: Rodrigo Venancio <[email protected]> Co-authored-by: Jesse Bangs <[email protected]>

bernardodiasc added the In Review label Apr 30, 2020

bernardodiasc self-assigned this Apr 30, 2020

bernardodiasc force-pushed the XP-3673-create-experience-page branch 2 times, most recently from c2d18a3 to 113e0eb Compare April 30, 2020 15:47

bernardodiasc changed the title ~~Add lazyload.js output~~ Add registration-ssr.js output Apr 30, 2020

bernardodiasc added In Progress and removed In Review labels Apr 30, 2020

bernardodiasc changed the title ~~Add registration-ssr.js output~~ Add standalone components bundles May 2, 2020

bernardodiasc added In Review and removed In Progress labels May 2, 2020

bernardodiasc force-pushed the XP-3337-work-experience-page branch from dd5fb29 to 7f63bec Compare May 6, 2020 11:29

bernardodiasc and others added 7 commits May 6, 2020 08:32

Move CustomSelect from XP-Reg to XP-UI (#523)

c2f842a

* move CustomSelector and rename SkillsSelectorOption to SelectorOption * fix lint * fix flow * add more props * clean props * rebuild * update stories

Add lazyload.js output

2d289e0

Make independent bundles for each client-side-only components

9ff44a8

Add error message in the SignupScreen.InputGroup

4549dc9

Add disabled props for Timeframe and SkillsSelector

e7754cf

Replace Select with CustomSelector in SkillsSelector

7c2dec8

bernardodiasc force-pushed the XP-3673-create-experience-page branch from a1b0c94 to 7c2dec8 Compare May 6, 2020 11:44

bernardodiasc and others added 3 commits May 6, 2020 13:15

Update CustomSelector

3a10f77

Build app

d2e510b

Rebuild the app

2561d94

venanciorodrigo approved these changes May 8, 2020

View reviewed changes

nicksp approved these changes May 8, 2020

View reviewed changes

nicksp added Done and removed In Review labels May 8, 2020

nicksp merged commit a4bc5f9 into XP-3337-work-experience-page May 8, 2020

nicksp deleted the XP-3673-create-experience-page branch May 8, 2020 15:15

jaspax mentioned this pull request May 8, 2020

FEATURE: Create Work Experience page's UI components #518

Merged

9 tasks

bernardodiasc mentioned this pull request Jun 10, 2020

"Version-6.0.0" release #554

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add standalone components bundles #528

Add standalone components bundles #528

bernardodiasc commented Apr 30, 2020 •

edited

Loading

venanciorodrigo left a comment •

edited

Loading

nicksp left a comment

nicksp May 8, 2020

Add standalone components bundles #528

Add standalone components bundles #528

Conversation

bernardodiasc commented Apr 30, 2020 • edited Loading

Description

Checklist

Related PRs

Steps to Test or Reproduce

Impacted Areas in Application

Screenshots

venanciorodrigo left a comment • edited Loading

Choose a reason for hiding this comment

nicksp left a comment

Choose a reason for hiding this comment

nicksp May 8, 2020

Choose a reason for hiding this comment

bernardodiasc commented Apr 30, 2020 •

edited

Loading

venanciorodrigo left a comment •

edited

Loading