airbnb/lunar

🌗 React toolkit and design language for Airbnb open source and internal projects.

Lunar v3

React toolkit and design language for Airbnb open source and internal projects.

Lunar is built for Airbnb projects and not the general public.

lunar's Issues

Uncaught Error: Aesthetic has not been initialized.

I've set up a minimal test project to give this library a try but I can't seem to get it working. It's always throwing out the following error:

Uncaught Error: Aesthetic has not been initialized. Please call Core.initialize() from @airbnb/lunar.

Here is my test file.

import React from 'react'
import ReactDOM from 'react-dom'

import Core from '@airbnb/lunar';

const log = (...args: object[]) => console.log(...args);

Core.initialize({
  logger: log,
  name: 'TestLunar',
});

import { Button } from '@airbnb/lunar/lib/components/Button';

ReactDOM.render(
    <Button>Test Button</Button>,
    document.getElementById('react-root')
)

• Any tips on getting this to work?
• Is this library intended for third-party use?

I'm using parceljs as bundler for this project if it matters.

v3

Breaking

• Remove context from translation phrases.
• Remove deprecated APIs.
• Remove compact from forms.
• Rename Props to <CompName>Props (same for State).
• Rewrite Card for better customization.
• Migrate remaining withStyles to useStyles (unless component cannot be changed from a class). Any APIs that relied on extendStyles should now accept a styleSheet prop.
• Migrate all HOCs to hooks.
• Migrate some to function components.
• Add textProps to Link and other components that may need it.

New

• Add generics to Tabs (for list of acceptable keys).

How to disable global styles or remove "!important" of style rule

Hi, I import some third party stylesheets. But some styles not work becase of lunar has inject some global styles with !important

Such as

If I force let globals to be null in here. My app will work well

So is there any general way to fulfill my needs?

Layout should have a `center` prop

Right now non-fluid layouts have a max width, but there's no way to center the layouts on the screen. There should be a center prop on the layout that adds margin: auto on the container so that it is visually centered.

@stefhatcher

OT: Airbnb reviews collapse whitespace

@milesj @lencioni Thanks for looking into that issue I reported a while back. There's a more serious one I wish to report, after the official channels didn't work out.

The issue is that reviews are entered and displayed in sanitized HTML, but with whitespace preserved verbatim, instead of being replaced with   and <br />s. This causes consecutive whitespace to collapse into one, rendering carefully-formatted reviews as walls of text.

Here's an example of a review where the author took time to format it intelligibly, which looks very hard to read on the site:

Overlays with `open={true}` by default don't render

I believe the change made in #287 resulted in Overlays not rendering if the open param is set to true initially. This seems to be because the Overlay doesn't render its children until it updates once, and if we initialize open to true then it never updates.

You should be able to repro this with a simple case like:

<Overlay open={true} onClose={() => undefined}>
  <div>This doesn't display</div>
</Overlay>

Maybe think about publishing ESLint config

Hi, I use the ESLint config from Lunar as a base for all my React/TypeScript projects, so how about publishing it as a package?

The eslint-config-airbnb is really great and is used by so much people out there, but when you start using TypeScript, you always find yourself overriding everything... I know there is this project: https://github.com/iamturns/eslint-config-airbnb-typescript, but Lunars config is so much more - so why not make it official? 😄

Add Muted to FilterMenu options

I would like to add the muted option to FilterMenu.

It should just be a pass through to the underlying MenuToggle.

If folks are open to it, I would be happy to put a PR up for this.

No focus indicator when input field is invalid

When an input is in a valid state, a purple border appears that shows keyboard only users that an input is focused for typing.

However, when the input is in an error state, there is no focus indicator

This is important for accessibility so keyboard only users know that they are typing into the expected field. I would suggest using the outline css field for focused elements or using box shadow rather than border color.

Laure

Leave

Remove Enzyme snapshots

In the past we used Jest snapshots for testing React components, but they are brittle and constantly need updating. For legacy reasons, we haven't removed them all yet... but we should.

[Suggestion] Remove setting `value: ''` for all input fields

Not sure if this is intentional, but I see here partitionFieldProps sets value = '' for all form fields every time they render:

lunar/packages/core/src/components/FormField/partitionFieldProps.ts

Lines 68 to 71 in e378004

	inputProps: {
	value: '',
	...inputProps,
	disabled,

This basically makes an input unusable without a state bind to input.value. Even the most basic input example in the Storybook does not work (users cannot type anything).

It's generally a bad practice to write what users typed right back into an input. It triggers an unnecessary re-render, increases the risk of circular callbacks and greatly increases code complexity. For example, a PR in Bighead had to introduced a new state just to use a debounced onChange handler.

Code as simple as

export default function DebouncedInput(props: DebouncedInputProps) {
  const { onChange, debounceTime = 150, ...restProps } = props;
  const handleChange = debounce(onChange, debounceTime);
  return <Input {...restProps} onChange={handleChange} />;
};

had to change to

export default function DebouncedInput(props: DebouncedInputProps) {
  const { onChange, debounceTime = 150, ...restProps } = props;
  const [value, setValue] = useState(restProps.value);
  const handleChange = debounce(onChange, debounceTime);

  return <Input {...restProps} value={value} onChange={(
    newValue: string,
    event: React.ChangeEvent<HTMLInputElement>
  ) => { 
    setValue(newValue);
    handleChange(newValue, event);
  }} />;
}

And most importantly, manually setting user input as users type has the side effect of interfering with other native browser behaviors, breaking things like autocomplete and foreign language input (I've seen such bugs many many times).

In case a clean input is desired, developers should provide value="" themselves.

---

The fix is as simple as remove value: ''. If this change would break current developer expectations or other features, it's the best to at least provide an option to disable this behavior.

host storybook components on github pages

Would a PR for this be welcome? I'm interested in contributing this.

Switch to Storybook 5

Styleguidist has served us well but Storybook 5 looks real nice. It provides themeing (which we need for dark mode), a11y checks (which we also need), responsive utils, and more.

https://storybook.js.org/addons/

Need Modal support maskClosable prop

Users may close modal by mistake when they accidentally click outside the modal and lose all the form states in the modal.

We need a maskClosable prop for Modal to control whether nor not auto close modal when click outside the modal.

Form cannot be resubmitted after an error thrown in onSubmit

The Form component support throwing error in its onSubmit callback and renders the error message. But I my application, the FormAction is not reset to enabled even if I modify the input.

Full example: https://codesandbox.io/s/trusting-brown-42suu

Root cause:

lunar/packages/forms/src/components/FormActions/index.tsx

Line 14 in fe3ed97

return <BaseFormActions {...props} disabled={!valid} processing={submitting} />;

A possible solution:

export default function FormActions(props: FormActionsProps) {
  const form = useForm();
  // this line changed
  const { submitting, valid, dirtySinceLastSubmit } = form.getState();

  return (
    <BaseFormActions
      {...props}
      // this line changed
      disabled={!dirtySinceLastSubmit && !valid}
      processing={submitting}
    />
  );
}

Ref: final-form/final-form#48 (comment)

OT: source maps exposed on airbnb.io

Apologies for the OT bug. I chose this repo because I couldn't find one for the website, this one had recent activity, and not a lot of people would be spammed by the bug.

The issue is that the source code for the site is clearly visible due to Gatsby generating source maps for production builds by default. For example, comments like the one in the screenshot below are visible.

Was it intended to have the source maps exposed in production?

Storybook enhancements

after switching to storybook 5, would be nice to have/look into:

• add markdown usage examples?
  • https://github.com/tuchk4/storybook-readme
  • https://github.com/storybooks/storybook/tree/master/addons/info
• live edit? https://github.com/vertexbz/storybook-addon-react-live-edit
• copy code blocks? https://github.com/Pickra/copy-code-block

Autocomplete component issues

1. It seems that loadItemsOnMount implies autoFocus. This leads to some undesirable behavior if, for example, you apply this to multiple Autocomplete components on the same page.

2. Autocomplete component does not fire onLoadOptions callback for empty string input. (The only time onLoadOptions is fired for an empty string is when loadItemsOnMount is true.)

3. The built-in caching 5 minutes of autocomplete items cannot be disabled or configured.

The combination of issue 2 and 3 leads to some other edge cases.

Finally, just a side remark, the naming seems a bit inconsistent, as in loadItemsOnMount vs. onLoadOptions. Could be more clear if this was items everywhere.

Allow block mode for `<Tooltip>` trigger

Currently <Tooltip> forces the tooltip trigger container to be inline-block, but sometimes it's more desirable to make it a block, e.g, when you want to show tooltips for the whole table cell.

In the above table, tooltips only show up when users hover over the date text, but it would be nicer if it can show up as soon as users hover on a date cell. Currently it's not possible to do so.

[Bug] HierarchyPicker fuseOptions prop not passing throw to Search

HierarchyPicker fuseOptions prop is passed to Picker.

But fuseOptions is missing in PickerProps. Neither do Search get this prop too.

Update Aesthetic

Per aesthetic-suite/framework#127, Aesthetic is using an outdated version. How about an update?