Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: new library for advanced components #2982

Merged
merged 12 commits into from
Oct 11, 2023
Merged

feat: new library for advanced components #2982

merged 12 commits into from
Oct 11, 2023

Conversation

matthprost
Copy link
Collaborator

@matthprost matthprost commented Oct 3, 2023

Summary

Type

  • Feature

✨ New Library for complex component

Ultraviolet UI is our simple library for basic components with very low composition. We needed one more library to increase the complexity of our component that couldn't fit there.

One first component is added into it: ContentCard.
A simple component to display information with images, title, description, icon or anything else.

Screenshot 2023-10-03 at 15 45 04

Screenshot 2023-10-06 at 11 55 54

@matthprost matthprost added the enhancement New feature or request label Oct 3, 2023
@matthprost matthprost self-assigned this Oct 3, 2023
@changeset-bot
Copy link

changeset-bot bot commented Oct 3, 2023

🦋 Changeset detected

Latest commit: d4de7a5

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages
Name Type
@ultraviolet/plus Minor
@ultraviolet/icons Minor
@ultraviolet/ui Minor
@ultraviolet/form Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions
Copy link
Contributor

github-actions bot commented Oct 3, 2023

size-limit report 📦

Path Size
packages/form/dist/index.js, packages/icons/dist/index.js, packages/plus/dist/index.js, packages/themes/dist/index.js, packages/form/dist/helpers/pickValidators.js, packages/form/dist/hooks/useFormField.js, packages/form/dist/hooks/useOnFieldChange.js, packages/form/dist/hooks/useValidation.js, packages/form/dist/validators/index.js, packages/form/dist/validators/max.js, packages/form/dist/validators/maxDate.js, packages/form/dist/validators/maxLength.js, packages/form/dist/validators/min.js, packages/form/dist/validators/minDate.js, packages/form/dist/validators/minLength.js, packages/form/dist/validators/regex.js, packages/form/dist/validators/required.js, packages/icons/dist/utils/capitalize.js, packages/ui/dist/src/index.js, packages/form/dist/components/CheckboxField/index.js, packages/form/dist/components/CheckboxGroupField/index.js, packages/form/dist/components/DateField/index.js, packages/form/dist/components/Form/index.js, packages/form/dist/components/NumberInputField/index.js, packages/form/dist/components/RadioField/index.js, packages/form/dist/components/RadioGroupField/index.js, packages/form/dist/components/SelectInputField/index.js, packages/form/dist/components/SelectableCardField/index.js, packages/form/dist/components/Submit/index.js, packages/form/dist/components/SubmitErrorAlert/index.js, packages/form/dist/components/TagInputField/index.js, packages/form/dist/components/TextInputField/index.js, packages/form/dist/components/TimeField/index.js, packages/form/dist/components/ToggleField/index.js, packages/form/dist/providers/ErrorContext/index.js, packages/icons/dist/components/CategoryIcon/Icons.js, packages/icons/dist/components/CategoryIcon/index.js, packages/icons/dist/components/Icon/index.js, packages/icons/dist/components/ProductIcon/Icons.js, packages/icons/dist/components/ProductIcon/index.js, packages/plus/dist/components/ContentCard/Skeleton.js, packages/plus/dist/components/ContentCard/index.js, packages/themes/dist/themes/console/dark.js, packages/themes/dist/themes/console/darker.js, packages/themes/dist/themes/console/index.js, packages/themes/dist/themes/console/light.js, packages/ui/dist/react-datepicker/dist/react-datepicker.min.css.js, packages/ui/dist/react-toastify/dist/ReactToastify.min.css.js, packages/ui/dist/src/helpers/isJSON.js, packages/ui/dist/src/helpers/legend.js, packages/ui/dist/src/helpers/recursivelyGetChildrenString.js, packages/ui/dist/src/theme/index.js, packages/ui/dist/src/utils/animations.js, packages/ui/dist/src/utils/capitalize.js, packages/ui/dist/src/utils/ids.js, packages/ui/dist/src/utils/normalize.js, packages/ui/dist/src/components/ActionBar/index.js, packages/ui/dist/src/components/Alert/index.js, packages/ui/dist/src/components/Avatar/index.js, packages/ui/dist/src/components/Badge/index.js, packages/ui/dist/src/components/Banner/index.js, packages/ui/dist/src/components/BarChart/Tooltip.js, packages/ui/dist/src/components/BarChart/index.js, packages/ui/dist/src/components/BarStack/index.js, packages/ui/dist/src/components/Breadcrumbs/index.js, packages/ui/dist/src/components/Bullet/index.js, packages/ui/dist/src/components/Button/index.js, packages/ui/dist/src/components/Card/index.js, packages/ui/dist/src/components/Carousel/index.js, packages/ui/dist/src/components/Checkbox/index.js, packages/ui/dist/src/components/CheckboxGroup/index.js, packages/ui/dist/src/components/CopyButton/index.js, packages/ui/dist/src/components/DateInput/index.js, packages/ui/dist/src/components/EmptyState/index.js, packages/ui/dist/src/components/Expandable/index.js, packages/ui/dist/src/components/LineChart/CustomLegend.js, packages/ui/dist/src/components/LineChart/Tooltip.js, packages/ui/dist/src/components/LineChart/helpers.js, packages/ui/dist/src/components/LineChart/index.js, packages/ui/dist/src/components/Link/index.js, packages/ui/dist/src/components/List/Body.js, packages/ui/dist/src/components/List/Cell.js, packages/ui/dist/src/components/List/HeaderCell.js, packages/ui/dist/src/components/List/HeaderRow.js, packages/ui/dist/src/components/List/ListContext.js, packages/ui/dist/src/components/List/Row.js, packages/ui/dist/src/components/List/SelectBar.js, packages/ui/dist/src/components/List/SkeletonRows.js, packages/ui/dist/src/components/List/constants.js, packages/ui/dist/src/components/List/index.js, packages/ui/dist/src/components/Loader/index.js, packages/ui/dist/src/components/Menu/Item.js, packages/ui/dist/src/components/Menu/index.js, packages/ui/dist/src/components/MenuV2/Item.js, packages/ui/dist/src/components/MenuV2/index.js, packages/ui/dist/src/components/Meter/index.js, packages/ui/dist/src/components/Modal/Dialog.js, packages/ui/dist/src/components/Modal/Disclosure.js, packages/ui/dist/src/components/Modal/constants.js, packages/ui/dist/src/components/Modal/index.js, packages/ui/dist/src/components/Notice/index.js, packages/ui/dist/src/components/NumberInput/helpers.js, packages/ui/dist/src/components/NumberInput/index.js, packages/ui/dist/src/components/Pagination/getPageNumbers.js, packages/ui/dist/src/components/Pagination/index.js, packages/ui/dist/src/components/PasswordCheck/index.js, packages/ui/dist/src/components/PasswordStrengthMeter/index.js, packages/ui/dist/src/components/PieChart/Legends.js, packages/ui/dist/src/components/PieChart/Tooltip.js, packages/ui/dist/src/components/PieChart/index.js, packages/ui/dist/src/components/Popover/index.js, packages/ui/dist/src/components/ProgressBar/index.js, packages/ui/dist/src/components/Radio/index.js, packages/ui/dist/src/components/RadioGroup/index.js, packages/ui/dist/src/components/Row/index.js, packages/ui/dist/src/components/SelectInput/index.js, packages/ui/dist/src/components/SelectableCard/index.js, packages/ui/dist/src/components/Separator/index.js, packages/ui/dist/src/components/Skeleton/Block.js, packages/ui/dist/src/components/Skeleton/Blocks.js, packages/ui/dist/src/components/Skeleton/BoxWithIcon.js, packages/ui/dist/src/components/Skeleton/Donut.js, packages/ui/dist/src/components/Skeleton/IconSkeleton.js, packages/ui/dist/src/components/Skeleton/Line.js, packages/ui/dist/src/components/Skeleton/List.js, packages/ui/dist/src/components/Skeleton/Slider.js, packages/ui/dist/src/components/Skeleton/Square.js, packages/ui/dist/src/components/Skeleton/index.js, packages/ui/dist/src/components/Snippet/index.js, packages/ui/dist/src/components/Stack/index.js, packages/ui/dist/src/components/Status/index.js, packages/ui/dist/src/components/StepList/index.js, packages/ui/dist/src/components/Stepper/index.js, packages/ui/dist/src/components/SwitchButton/FocusOverlay.js, packages/ui/dist/src/components/SwitchButton/index.js, packages/ui/dist/src/components/Table/Body.js, packages/ui/dist/src/components/Table/Cell.js, packages/ui/dist/src/components/Table/Header.js, packages/ui/dist/src/components/Table/HeaderCell.js, packages/ui/dist/src/components/Table/HeaderRow.js, packages/ui/dist/src/components/Table/Row.js, packages/ui/dist/src/components/Table/SelectBar.js, packages/ui/dist/src/components/Table/SkeletonRows.js, packages/ui/dist/src/components/Table/TableContext.js, packages/ui/dist/src/components/Table/index.js, packages/ui/dist/src/components/Tabs/Tab.js, packages/ui/dist/src/components/Tabs/TabMenu.js, packages/ui/dist/src/components/Tabs/TabMenuItem.js, packages/ui/dist/src/components/Tabs/TabsContext.js, packages/ui/dist/src/components/Tabs/index.js, packages/ui/dist/src/components/Tag/index.js, packages/ui/dist/src/components/TagInput/index.js, packages/ui/dist/src/components/TagList/index.js, packages/ui/dist/src/components/Text/index.js, packages/ui/dist/src/components/TextInput/index.js, packages/ui/dist/src/components/TimeInput/index.js, packages/ui/dist/src/components/Toaster/index.js, packages/ui/dist/src/components/Toggle/index.js, packages/ui/dist/src/components/ToggleGroup/index.js, packages/ui/dist/src/components/Tooltip/index.js, packages/ui/dist/src/components/VerificationCode/index.js, packages/ui/dist/src/internalComponents/Popup/helpers.js, packages/ui/dist/src/internalComponents/Popup/index.js, packages/ui/dist/src/utils/responsive/Breakpoint.js, packages/ui/dist/src/utils/responsive/utilities.js, packages/ui/dist/src/components/Banner/assets/default-image-small.svg.js, packages/ui/dist/src/components/Banner/assets/default-image.svg.js, packages/ui/dist/src/components/Banner/assets/intro-compact-left-pattern.svg.js, packages/ui/dist/src/components/Banner/assets/intro-compact-right-pattern.svg.js, packages/ui/dist/src/components/Banner/assets/intro-pattern.svg.js, packages/ui/dist/src/components/Banner/assets/promotion-compact-left-pattern.svg.js, packages/ui/dist/src/components/Banner/assets/promotion-compact-right-pattern.svg.js, packages/ui/dist/src/components/Banner/assets/promotion-pattern.svg.js 200.21 KB (+0.03% 🔺)

@codecov
Copy link

codecov bot commented Oct 3, 2023

Codecov Report

Merging #2982 (d4de7a5) into main (86e7cf7) will increase coverage by 0.10%.
The diff coverage is 100.00%.

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##             main    #2982      +/-   ##
==========================================
+ Coverage   93.65%   93.75%   +0.10%     
==========================================
  Files         156      159       +3     
  Lines        3295     3349      +54     
  Branches      426      433       +7     
==========================================
+ Hits         3086     3140      +54     
  Misses        139      139              
  Partials       70       70              
Files Coverage Δ
...ackages/icons/src/components/ProductIcon/index.tsx 100.00% <100.00%> (ø)
...kages/plus/src/components/ContentCard/Skeleton.tsx 100.00% <100.00%> (ø)
packages/plus/src/components/ContentCard/index.tsx 100.00% <100.00%> (ø)
packages/ui/src/components/Skeleton/Square.tsx 100.00% <100.00%> (ø)
packages/ui/src/components/Skeleton/index.tsx 100.00% <ø> (ø)

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 86e7cf7...d4de7a5. Read the comment docs.

@matthprost matthprost force-pushed the feat/new-library branch 5 times, most recently from 7f53dbb to 7df0b84 Compare October 3, 2023 15:38
@matthprost matthprost requested review from PetmePant, a team, ModuloM, QuiiBz and fabienhebert and removed request for a team October 3, 2023 15:38
Copy link

@PetmePant PetmePant left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Storybook related:

  1. Add a fixed width in the preview component so is not huge
  2. Add some custom stories so we showcase the possibilities to our users (slot/children)
  3. There is an issue that you can hide image/icon even if you dont have any content in the prop

Component related:

  1. Fix icon sizes so it's the same for both directions
  2. Add the option of loading state (check specifications)
  3. Broder on hover state should be primary

@matthprost matthprost requested a review from PetmePant October 6, 2023 09:55
@matthprost matthprost force-pushed the feat/new-library branch 5 times, most recently from f256079 to a5fdfde Compare October 9, 2023 14:09
Copy link
Contributor

@vincentaudebert vincentaudebert left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very very nice work. Love it!

Copy link

@PetmePant PetmePant left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some issues appeared while on review:

  • Height is not adjusted based on the content that is inside
  • There is a hidden gap that creates a white space at the bottom of the component
  • Description and title seem to break when a lot of content is added

Screenshot 2023-10-10 at 12 51 36 PM

Screenshot 2023-10-10 at 1 00 40 PM

Screenshot 2023-10-10 at 12 52 37 PM

@matthprost matthprost merged commit d21064e into main Oct 11, 2023
12 checks passed
@matthprost matthprost deleted the feat/new-library branch October 11, 2023 08:38
@github-actions github-actions bot mentioned this pull request Oct 11, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants