Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

Overview

lerna

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.


Orbit Mission

Orbit aims to bring order and consistency to all of our products and processes. We elevate user experience and increase the speed and efficiency of how we design and build products.

Installation

orbit-components are served as an npm package.

Add them to your project by running:

// with npm
npm install @kiwicom/orbit-components

// with yarn
yarn add @kiwicom/orbit-components

Don't forget to install the styled-components ^4.0.0 also.

Usage

  1. Import fonts that are used in orbit-components:
">
<link
  href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700"
  rel="stylesheet"
/>

Or via CSS:

@import url("https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700");
  1. Include any of our components in your project and use it:
Hello World!; ">
import Alert from "@kiwicom/orbit-components/lib/Alert";

<Alert>Hello World!</Alert>;

If you want to use custom theme or dictionary inside your project, it's necessary to wrap your app into . See this document for more information.

For live preview check out Storybook or orbit.kiwi.

You can also try orbit-components live on CodeSandbox.

Types

Orbit comes with both Flow and Typescript definitions files, so you can choose what fits your project. However, if you work with Typescript, you need to add type for styled-components.

// with npm
npm install @types/styled-components --save-dev

// with yarn
yarn add @types/styled-components -D

Main Sections:

Contributing

We are working on making this project a fully open source. We appreciate any contributions you might make.

Bug reports and feature request are welcome but, please use the correct template.

Please check out our Contribution Guide. It includes contribution guidelines and information on how to run and develop the project.

Feedback

We want to provide only components of the highest quality. We can’t do that without your feedback. If you have any suggestions about what we can do to improve components, please report it directly as an issue or write to us at #orbit-components on Slack.

Issues
  • Added value prop to checkbox

    Added value prop to checkbox

    closes #103

    This Pull Request meets the following criteria:

    • [x] Tests have been added/adjusted for my new feature
    • [x] New Components are registered in index.js of my project
    opened by prztrz 16
  • UPDATE: Relaxed country props in CountryFlag

    UPDATE: Relaxed country props in CountryFlag

    Accept nullable string as code prop. Fallback to "anywhere" on unknown country code.

    This Pull Request meets the following criteria:

    • [x] Tests have been added/adjusted for my new feature


      LiveURL: https://orbit-components-relaxed-country-flag.surge.sh
    Review needed 
    opened by michalsanger 13
  • Add Storyshots

    Add Storyshots

    Make sure these boxes are ticked before submitting a new issue:

    • [x] I have checked that this is not a duplicate
    • [x] I have added a label categorizing this under BLKN | Kiwicom | Icons | Global

    We should automatically create snapshots from Storybook to prevent Storybook breaking.

    https://github.com/storybooks/storybook/tree/master/addons/storyshots

    Enhancement Global 
    opened by fallion 13
  • Create <Button /> component

    Create

    Description

    The button is a simple component when we use for showing what actions users can do on the page.

    Visual style

    Parameters

    Parameter | Values | Default -- | -- | -- Style | Primary, Secondary, Link, Facebook, Google, Destructive | Primary Size | Large, Normal, Small | Normal Icon | [string] | empty Label | [string] | Your label Bordered | [boolean] | false Disabled | [boolean] | false Loading | [boolean] | false Width | [string] | auto

    Visual design & design tokens

    For all configurations

    font-family: $fontFamily
    border-radius: $borderRadiusNormal
    font-weight: $fontWeightBold
    min-width: $widthButtonMinimal
    

    Additional information

    • Vertical centering for icon and text label
    • For all buttons, there should be a transition for changing states (for background color and scale properties)
    • Borders in bordered version are inside the button, so the height of the button stays same
    • Width is usually calculated automatically (based on length of label + icon width + paddings). However, it should be possible to set up width manually so there is a chance to have two same-width buttons when placed near each other.
    • All buttons should disable all the default browser styling so it doesn’t mess with our own visual style (http://www.456bereastreet.com/i/button_d.png)

    Based on selected configuration:

    Parameter:Value | property: $token -- | -- Style:Primary | text color: $colorTextButtonPrimary
    icon color: $colorIconButtonPrimary
    background: $backgroundButtonPrimary

    For bordered version:
    text color: $colorTextButtonPrimaryBordered
    icon color: $colorIconButtonPrimaryBordered
    background: $backgroundButtonBordered
    border-color: $borderColorButtonPrimaryBordered Style:Secondary | text color: $colorTextButtonSecondary
    icon color: $colorIconButtonSecondary
    background: $backgroundButtonSecondary

    For bordered version:
    text color: $colorTextButtonSecondaryBordered
    icon color: $colorIconButtonSecondaryBordered
    background: $backgroundButtonBordered
    border-color: $borderColorButtonSecondaryBordered Style:Link | text color: $colorTextButtonLink
    icon color: $colorIconButtonLink
    background: $backgroundButtonLink

    For bordered version:
    N/A (there is no bordered version for this so if someone enable this style together with “bordered”, we'll just ignore it?) Style:Facebook | text color: $colorTextButtonFacebook
    icon color: $colorIconButtonFacebook
    background: $backgroundButtonFacebook

    For bordered version:
    text color: $colorTextButtonFacebookBordered
    icon color: $colorIconButtonFacebookBordered
    background: $backgroundButtonBordered
    border-color: $borderColorButtonFacebookBordered Style:Google | text color: $colorTextButtonGoogle
    icon color: $colorIconButtonGoogle
    background: $backgroundButtonGoogle

    For bordered version:
    text color: $colorTextButtonGoogleBordered
    icon color: $colorIconButtonGoogleBordered
    background: $backgroundButtonBordered
    border-color: $borderColorButtonGoogleBordered Style:Destructive | text color: $colorTextButtonDestructive
    icon color: $colorIconButtonDestructive
    background: $backgroundButtonDestructive

    For bordered version:
    text color: $colorTextButtonDestructiveBordered
    icon color: $colorIconButtonDestructiveBordered
    background: $backgroundButtonBordered
    border-color: $borderColorButtonDestructiveBordered Size:Large | font-size: $fontSizeTextLarge
    height: $heightButtonLarge
    padding-left: $paddingButtonLarge
    padding-right: $paddingButtonLarge

    When button has icon:
    padding-left: $paddingButtonLargeWithIcon

    Styles for inserted icon:
    height: $heightIconMedium
    width: $widthtIconMedium
    margin-right: $marginButtonIconLarge Size:Normal | font-size: $fontSizeTextNormal
    height: $heightButtonNormal
    padding-left: $paddingButtonNormal
    padding-right: $paddingButtonNormal

    When button has icon:
    padding-left: $paddingButtonNormalWithIcon

    Styles for inserted icon:
    height: $heightIconMedium
    width: $widthtIconMedium
    margin-right: $marginButtonIconNormal Size:Small | font-size: $fontSizeTextSmall
    height: $heightButtonSmall
    padding-left: $paddingButtonSmall
    padding-right: $paddingButtonSmall

    When button has icon:
    padding-left: $paddingButtonSmallWithIcon

    Styles for inserted icon:
    height: $heightIconSmall
    width: $widthtIconSmall
    margin-right: $marginButtonIconSmall Loading:true | Nothing so special, it's basically just a button with specific icon. For this, we'll use animated icon from our old button: Loading button in storybook

    Pre-defined configurations

    There is few combination we can predefine. All this configuration matches names and look for Sketch symbols from our Orbit UI kit. It should also help with handing designs over to product teams.

    This gives us also possibility that for eg. when we change the default icon for a destructive button will be “cross” instead of “remove”, that we don’t need to go through all instances and change it everywhere. We just change that pre-defined configuration for “Destructive button” have “icon” parameter set to “cross” and it’ll change everywhere.

    Type | Pre-defined parameters | Usually working with -- | -- | -- Primary button | Style: Primary
    Size: Normal | Size
    Label
    Disabled
    Loading Primary button with icon | Style: Primary
    Size: Normal
    Icon: “plus-circle” | Size
    Label
    Disabled
    Loading Secondary button | Style: Secondary
    Size: Normal | Size
    Label
    Icon
    Disabled
    Loading Secondary button with icon | Style: Secondary
    Size: Normal
    Icon: “plus-circle” | Size
    Label
    Icon
    Disabled
    Loading Destructive | Style: Destructive
    Size: Normal
    Icon: “remove” | Size
    Label
    Disabled
    Loading Destructive Light | Style: Destructive
    Size: Small
    Bordered: true
    Icon: “remove” | Size
    Label
    Disabled
    Loading Facebook | Style: Facebook
    Size: Normal
    Icon: “facebook” | Size
    Label
    Disabled
    Loading Google | Style: Google
    Size: Normal
    Icon: “google” | Size
    Label
    Disabled
    Loading Button Link | Style: Link
    Size: Small
    Icon: “plus-circle” | Size
    Label
    Disabled
    Loading

    Of course that is possible to define custom configuration but it won’t be recommended and if we decide that we need to use eg. light variants of our buttons more, we can always add another pre-defined state.

    Hover & active button states

    You can check interactions on this link, Version 5 is the one we choosed: https://codepen.io/darkwindcz/pen/mxJmbP

    When are buttons hovered, we use darken() function for background colors for our button backgrounds in most cases, e.g. darken([original-color], $modifierDarkenHover). Same darken modifier is used for text and border colors when button is in “Bordered” version.

    When are buttons active, we use darken() function for background colors for our button backgrounds in most cases, e.g. darken([original-color], $modifierDarkenActive). Also, when button is active, we scale it's size down, with the css function transform: scale($modifierScaleButtonActive)

    The design token name for darkening value is not tight to buttons as we use the same token for hover state of different components (like <TextLink /> or in the future for <Chip />, etc.)

    There is one exception though. For button style “Link”, we want to use $backgroundButtonLinkHoverinstead of darkening pure white. The reason for this is that if we would use darken(#fff, 5%), it would generate gray-ish color. But in our color system, we use blue-ish versions of our gray shades. For active state of this button, we just use darken with this vaues: darken($backgroundButtonLinkHover, $modifierDarkenButtonLink).

    Hover & active states are same for all button sizes and button styles. (With exception of Link type, as mentioned above)

    Disabled state should use opacity $opacityButtonDisabled, hover styles should be disabled too so it doesn’t look like there is some interaction behind it.

    Focus state should use default browser styling (outline). It’s possible that we'll change it in the future with our own defined box-shadow, but we need to discuss this with designers.

    Some inspiration from other’s React components for button component:

    https://mineral-ui.com/components/button http://design-system.pluralsight.com/components/button/ https://seek-oss.github.io/seek-style-guide/button https://seek-oss.github.io/seek-style-guide/button (there is nice loading animation :-) https://polaris.shopify.com/components/actions/button#navigation (they have also some accessibility parameters) http://design.acl.com/component/Button (I like their naming convention for states, eg. isDisabled or isLoading)

    opened by honzatmn 12
  • feat(TypeScript): adding type definitions

    feat(TypeScript): adding type definitions

    These were originally created by @kravco in an internal project at Kiwi.com, and they have not been updated in a few months, so there might be some discrepancies.

    TODO

    • [x] Check that each type matches up against the Flow types;
    • [x] Alter the build process to include these files in the shipped NPM package

    ALTERNATIVE

    • submit these types on DefinitelyTyped and manage it there

    Components done:

    • [x] AirportIllustration
    • [x] Alert
    • [x] Badge
    • [x] Breadcrumbs
    • [x] Button
    • [x] ButtonGroup
    • [x] ButtonLink
    • [x] CallOutBanner
    • [x] Card
    • [x] CarrierLogo
    • [x] Checkbox
    • [x] ChoiceGroup
    • [x] ClickOutside
    • [x] Collapse
    • [x] CountryFlag
    • [x] Coupon
    • [x] Desktop
    • [x] Dialog
    • [x] Dictionary
    • [x] Drawer
    • [x] FeatureIcon
    • [x] FormFeedback
    • [x] FormLabel
    • [x] Heading
    • [x] Hide
    • [x] Icon
    • [x] icons
    • [x] Illustration
    • [x] InputField
    • [x] InputFile
    • [x] InputGroup
    • [x] InputStepper
    • [x] Layout
    • [x] LazyImage
    • [x] LinkList
    • [x] List
    • [x] ListChoice
    • [x] Loading
    • [x] Mobile
    • [x] Modal
    • [x] ModalFooter
    • [x] ModalHeader
    • [x] ModalSection
    • [x] NavigationBar
    • [x] NotificationBadge
    • [x] Pagination
    • [x] PictureCard
    • [x] Popover
    • [x] Portal
    • [x] PricingTable
    • [x] BadgePrimitive
    • [x] IllustrationPrimitive
    • [x] Radio
    • [x] RatingStars
    • [x] Seat
    • [x] Select
    • [x] Separator
    • [x] ServiceLogo
    • [x] SkipLink
    • [x] SkipNavigation
    • [x] Slider
    • [x] Stack
    • [x] Stepper
    • [x] StepperStateless
    • [x] Sticky
    • [x] StopoverArrow
    • [x] Table
    • [x] Tag
    • [x] Text
    • [x] Textarea
    • [x] TextLink
    • [x] ThemeProvider
    • [x] Tile
    • [x] TileGroup
    • [x] Tooltip
    • [x] Translate
    • [x] Truncate
    • [x] boundingClientRect
    • [x] cloneWithTooltip
    • [x] Grid
    • [x] handleKeyDown
    • [x] mediaQuery
    • [x] randomID
    • [x] rtl
    • [x] scroll
    • [x] Slide
    • [x] toggleDown
    • [x] toggleUp
    • [x] transition
    • [x] validateDecrement
    • [x] validateIncrement

    Template for icons:

    • [x] FeatureIcon
    • [x] Icon

    Closes #324


    LiveURL: https://orbit-components-rcsl-add-ts-definitions.surge.sh

    Enhancement Review needed Typescript 
    opened by RobinCsl 12
  • Styled Components vs Styled JSX findings

    Styled Components vs Styled JSX findings

    Aggregation of findings on this topic.

    question Global 
    opened by fallion 11
  • Create <Text /> component

    Create component

    Description

    The most basic component for rendering text blocks.

    Visual style

    body-text

    Parameters

    We should be able to render all of these styles with the combination of parameters from the table below.

    Parameter | Values | Default -- | -- | -- Style | Primary, Secondary, Attention | Primary Size | Large, Normal, Small | Normal Weight | bold, normal | normal Italic | [boolean] | false Uppercase | [boolean] | false Element | p, span, div, (anything else?) | p

    Design tokens

    For all configurations:

    font-family: $fontFamily
    line-height: $lineHeightText
    

    Based on selected configuration:

    Parameter:Value | property: $token -- | -- Style:Primary [optional] | color: $colorTextPrimary Style:Secondary [optional] | color: $colorTextSecondary Style:Attention [optional] | color: $colorTextAttention Size:Large [optional] | font-size: $fontSizeTextLarge Size:Normal [optional] | font-size: $fontSizeTextNormal Size:Small [optional] | font-size: $fontSizeTextSmall Weight:normal [optional] |font-weight: $fontWeightNormal Weight:bold [optional] | font-weight: $fontWeightBold

    Italic and uppercase don't need tokens as they aren’t expressed with numeric values.

    Possible examples of configuration:

    <Text>A) <strong>We're here for you.</strong> First, let's narrow down your request.</Text>
    <Text Element="div" Italic>B) We're here for you. First, let's narrow down your request.</Text>
    

    Rendered HTML on those configurations:

    <p>A) <strong>We're here for you.</strong> First, let's narrow down your request.</p>
    <div><em>B) We're here for you.</strong> First, let's narrow down your request.</em></div>
    

    Note: Please take this just as my component interpretation for better understanding how I meant which param. I am totally not sure about <strong> though, but it should be possible to make just part of the text bold (or link in other cases). I don’t have to include “real” code, just give me a feedback how you want to specify it and I can do it your way. I won’t be able to add these code examples to more complicated components anyway.

    Some inspiration from others React components for solving text component:

    We probably don't need to reinvent the wheel, a lot of other teams solved these basics already. I have a good collection of links with some inspiration from other design systems so I can include for every common component so we have something to study and inspire from 🙂​Hope it helps a little! I think that it should be possible to check their Github repositories, some of them can have them public.

    https://pricelinelabs.github.io/design-system/Text http://grommet.io/dxc/docs/paragraph (check Examples button on the right top) https://cloudflare.github.io/cf-ui/#cf-component-text http://design-system.pluralsight.com/components/text/ https://seek-oss.github.io/seek-style-guide/text ( + subcomponent for strong, etc.: https://seek-oss.github.io/seek-style-guide/strong) https://backpack.github.io/components/web/text

    opened by honzatmn 10
  • Support for Typescript

    Support for Typescript

    It is impossible to use this library with Typescript. It would be nice if it generated types for typescript as well, or better yet was rewritten for Typescript :D

    opened by fallion 10
  • docs(sandbox): examples adjustments

    docs(sandbox): examples adjustments

    Storybook: https://orbit-feat-sandbox-ruler.surge.sh

    opened by mainframev 10
  • docs: some Figma iframes require logging in

    docs: some Figma iframes require logging in

    The idea to have text separate from Figma images seems like potentially a nice one, but the iframe for the badge content structure requires me to be logged in to view.

    opened by CollierCZ 9
  • chore: bump shelljs from 0.8.4 to 0.8.5

    chore: bump shelljs from 0.8.4 to 0.8.5

    Bumps shelljs from 0.8.4 to 0.8.5.

    Release notes

    Sourced from shelljs's releases.

    v0.8.5

    This was a small security fix for #1058.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) You can disable automated security fix PRs for this repo from the Security Alerts page.
    dependency 
    opened by dependabot[bot] 1
  • chore: bump follow-redirects from 1.14.0 to 1.14.7

    chore: bump follow-redirects from 1.14.0 to 1.14.7

    Bumps follow-redirects from 1.14.0 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • 77e2a58 Release version 1.14.4 of the npm package.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) You can disable automated security fix PRs for this repo from the Security Alerts page.
    dependency 
    opened by dependabot[bot] 1
  • fix(components): fixes after design reviews

    fix(components): fixes after design reviews

    opened by mainframev 2
  • chore: bump gatsby from 2.32.12 to 4.4.0

    chore: bump gatsby from 2.32.12 to 4.4.0

    Bumps gatsby from 2.32.12 to 4.4.0.

    Release notes

    Sourced from gatsby's releases.

    v4.4

    Welcome to [email protected] release (December 2021 #1)

    Key highlights of this release:

    Also check out notable bugfixes.

    Bleeding Edge: Want to try new features as soon as possible? Install [email protected] and let us know if you have any issues.

    Previous release notes

    Full changelog

    v4.3

    Welcome to [email protected] release (November 2021 #3)

    Key highlights of this release:

    Also check out notable bugfixes.

    Bleeding Edge: Want to try new features as soon as possible? Install [email protected] and let us know if you have any issues.

    Previous release notes

    Full changelog

    v4.2

    Welcome to [email protected] release (November 2021 #2).

    Key highlights of this release:

    Also check out notable bugfixes.

    Bleeding Edge: Want to try new features as soon as possible? Install [email protected] and let us know if you have any issues.

    Previous release notes

    Full changelog

    ... (truncated)

    Commits
    • c09587a chore(release): Publish
    • 7a432a8 fix(gatsby-cli): make --inspect-brk work (#34242) (#34254)
    • 97d23ae chore(gatsby): Update documentation around pathPrefix and assetPrefix combina...
    • 6b28b69 chore(release): Publish next
    • d8aec30 feat(gatsby): detect node mutations (enabled by flag or env var) (#34006)
    • 3fe5316 chore(docs): Add missing comma to code example (#34222)
    • 01d7a79 feat(gatsby-plugin-emotion): Use correct babel preset with jsxRuntime (#34085)
    • 3a97329 fix(deps): update dependency date-fns to ^2.27.0 for gatsby-plugin-gatsby-clo...
    • 99c538b fix(deps): update dependency eslint-plugin-jsx-a11y to ^6.5.1 (#34147)
    • a2159f1 chore(deps): update dependency remark-mdx to ^1.6.22 for gatsby-remark-respon...
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependency 
    opened by dependabot[bot] 1
  • feat(useLockScrolling): warn developers about unexpected (un)locked scrolling

    feat(useLockScrolling): warn developers about unexpected (un)locked scrolling

    On search there were multiple implementations of locking scrolling which was conflicting with the one implemented in Orbit. This development-only warning attempts to detect this and advise replacing these with the useLockScrolling hook.

    This functionality has not been implemented yet, but this test describes how it would work. What do you think? One additional idea would be to implement a onLockScrollingConflict handler on ThemeProvider which people could use to report this problem on Sentry if it happens in production.

    Storybook: https://orbit-silvenon-feat-use-lock-scrolling-conflict-warning.surge.sh

    opened by silvenon 2
  • feat: add new experimental hook `useTransition`

    feat: add new experimental hook `useTransition`

    The Toast implementation in #3187 uses CSS Animations, but I think this is unnecessary, you can get by with just CSS Transitions. The problem with the current Toast implementation is that it stays in the DOM after fading out, so you won't be able to click on something below it if you need to, which will be very confusing because Toast is invisible, so I recommend unmounting Toast after fading out.

    The problem with animating the presence of an element in the DOM is a well-known one, and has already been solved by libraries like react-transition-group (more specifically, its CSSTransition component), which I used as an inspiration for this hook. Currently it's undocumented because it's intended primarily for internal use, but people are welcome to try it.

    I considered using Headless UI's Transition component, but it seems significantly bigger, so by having our own minimal hook we're saving about 3 kB.

    Storybook: https://orbit-silvenon-feat-use-transition.surge.sh

    opened by silvenon 2
  • improve: upgrade to Gatsby v4

    improve: upgrade to Gatsby v4

    There's nothing in here that's actually taking advantage of new Gatsby yet, but no harm in upgrading it anyway, we can start using the features later.

    Gatsby 3+ was throwing because we were using Babel packages on client side that didn't support running in the browser environment. We probably could have done some more webpack configuration magic to get around that, but instead we switched to @babel/standalone, which is meant to exactly for these uses cases and is simpler to use.

    Storybook: https://orbit-silvenon-improve-gatsby4.surge.sh

    opened by silvenon 5
  • chore: bump object-path from 0.11.5 to 0.11.8

    chore: bump object-path from 0.11.5 to 0.11.8

    Bumps object-path from 0.11.5 to 0.11.8.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) You can disable automated security fix PRs for this repo from the Security Alerts page.
    dependency 
    opened by dependabot[bot] 1
  • chore: bump tmpl from 1.0.4 to 1.0.5

    chore: bump tmpl from 1.0.4 to 1.0.5

    Bumps tmpl from 1.0.4 to 1.0.5.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) You can disable automated security fix PRs for this repo from the Security Alerts page.
    dependency 
    opened by dependabot[bot] 1
Releases(@kiwicom/[email protected])
A free React landing page template designed to showcase open source projects, SaaS products, online services, and more. Made by

Free React landing page template Open is a free React landing page template designed for developers/makers who want to create a quick and professional

Cruip 2k Jan 20, 2022
🧩 Medly components provides numerous themable react components, each with multiple varitaions of sizes, colors, position etc.

?? Medly components provides numerous themable react components, each with multiple varitaions of sizes, colors, position etc.

Medly 63 Jan 10, 2022
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web Fluent UI web represents a collection of utilities, React components, and web components for building web applications. This repo is hom

Microsoft 12.7k Jan 14, 2022
InvaUI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

Inva UI Sponsored by English • Table of Contents Quick start Install Install The easiest way to use Inva UI is to install it from npm $ npm install @i

Shaun Mak 4 Nov 8, 2021
An open-source UI component library for building high-quality, accessible design systems and web apps

An open-source UI component library for building high-quality, accessible design systems and web apps

Radix 2.8k Jan 14, 2022
a react-based framework that provides accessibility, modularity, responsiveness, and theming in a tidy package

Grommet: focus on the essential experience Documentation Visit the Grommet website for more information. Support / Contributing Before opening an issu

grommet 7.7k Jan 14, 2022
This is a react component which made your text does not wrap and dynamically adjust the font size.

react-dynamic-font This is a react component which made your text does not wrap and dynamically adjust the font size Sometimes we want some text to ha

Zhao 30 Dec 1, 2021
React component for building split views like in VS Code

Splitter Splitter is a React component that allows you to split views into resizable panels. Similar to tabs in Visual Studio Code, for example. It's

Devbook 204 Jan 16, 2022
React Stepper which can also be used on mobile devices

React Stepper which can also be used on mobile devices

null 7 Dec 27, 2021
Toolkit for building accessible rich web apps with React

Reakit Toolkit for building accessible rich web apps with React. Explore website » Sponsors By donating $100 or more you become a sponsor and help in

Reakit 5.4k Jan 16, 2022
A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

react-admin A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Materi

marmelab 18.7k Jan 14, 2022
🍿⚛Official React library to use Popper, the positioning library

React Popper React wrapper around Popper. important note: Popper is not a tooltip library, it's a positioning engine to be used to build features such

Popper 2.2k Jan 11, 2022
Mantine is a MIT licensed open source react components and hooks library with focus on usability, accessibility and developer experience.

React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience

Mantine 3.8k Jan 17, 2022
Opinionated React UI library, built with styled-components and TypeScript.

Opinionated React UI library, built with styled-components and TypeScript.

Lapidist 0 Jan 10, 2022
A comprehensive React UI components library based on the Arco Design system.

A comprehensive React UI components library based on the Arco Design system.

null 2.6k Jan 17, 2022
dataminr-react-components - Collection of reusable React Components and utility functions.

react-components A collection of reusable React components with their own Flux lifecycle. What's inside react-components? Table Component From a simpl

Dataminr 263 Dec 17, 2021
Nextjs-components - A collection of React components

nextjs-components A collection of React components, transcribed from https://vercel.com/design. 1 Motivation TBD Todo's Unit test coverage Unit tests

null 22 Jan 15, 2022
react-var-ui is a simple React component library for variable setting and preview, inspired by iOS settings, react-dat-gui and dat.gui.

react-var-ui is a simple React component library for variable setting and preview, inspired by iOS settings, react-dat-gui and dat.gui. While some cod

Mat Sz 58 Jan 11, 2022
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Material-UI 74.6k Jan 21, 2022