chalarangelo / furl

Functional react.js components.

furl

functional React.js components.

// npm
npm install furl-components furl-styles

// yarn
yarn add furl-components furl-styles

Visit the website for more information.

furl's Issues

Housekeeping

There are a lot of props in many components (e.g. Search) that are relevant but not really important for the components themselves. It is a good idea to omit them, so that the component's footprints are smaller and these props are handled via ...rest.

Event handling

Check that all event handlers are called only if they are of type function.

Grid/Table bug

Tables can cause the Grid and Column elements to grow larger than their expected size under the right circumstances, causing horizontal overflow.

Breadcrumbs & Steps

• Add breadcrumbs component
• Add steps component
• Provide style customization for both components

Column does not handle calc values properly

Using calc in a Column's size will cause a problematic className that does not work properly.

Unit testing

• Write unit tests for all existing components, use Storybook as a guide.
• Add additional tests for components.
• Add tests for utility functions, whenever necessary.
• Add tests for Hypercomponents - #9.

Tooltip, Popover

• Create Popover component similar to Tooltip, but based on click events
• Make Tooltip dark by default, Popover light by default
• Provide color customization for Tooltips and Popovers (light, dark, maybe primary and secondary)

Breadcrumb bugs

• Evaluate keys usage

Hyperlink color inside Alerts

Hyperlink components need to use colors that synergize with the background and foreground colors of an Alert whenever placed inside one.

Add vertical Steps

Customization option for Steps components to display in a vertical fashion.

Accessibility

• Evaluate all components and add appropriate roles etc to make them accessible
• Use pa11y to test accessibility

Media

• Update image component to generate <figure> conditionally
• Create similar components for video and audio

Input controls and forms

• Add styles for <form> and <legend>
• Provide customization options for forms and inputs (sizes, colors, shapes)
• Add styles for [disabled] and [readonly]
• Add defaultValue prop
• <TextInput>
• <EmailInput>
• <NumberInput> - with +,- buttons
• <PasswordInput> - with view button
• <UrlInput>
• <Textarea> - <TextInput multiline>
• <Select>
• <MultiSelect> - <Select multiple>
• <Combobox> - use <datalist> and <input> with list attribute
• <TelephoneInput>
• <CreditCardInput> - spacing and icons
• <CurrencyInput>
• <TimeInput> - custom, multi-part version
• <ColorInput> - preview field
• <FileInput> - drag and drop box
• <DateInput> - custom, multi-part version
• <RatingInput> - use a number input internally
• <Slider> - use native element, allow one, two or more values if possible
• Add customized <input> elements, add a prop to allow wrapping or following with a <label> - Moved to #9
• Add customization option to add a default icon for each type - Moved to #9
• <DatetimeInput> - custom, multi-part version
• <TagInput>

Column sizing

If a Column component is placed inside a Content component and its size is absolute (i.e. px), there are use-cases where the width of the Column can exceed the parent and cause horizontal overflow.

Possible solution

Change the code from:

flex: 0 0 var(--col-md-size);

to:

flex: 0 0 auto;

This will make columns use the max-width specified alongside them to properly size the column. If the absolute width is greater than the parent, it will shrink accordingly.

Search + Omnibar

• Create search component
• Provide some customization options (with icon , expandable etc.)
• Context dropdown below search or Omnibar
• Provide an option for an Omnibar (MacOS-like)

Improve Button and add ButtonGroup

• Buttons need to be reevaluated in terms of CSS, figure out if there are any issues with styling
• Add ButtonGroup component
• Add Android-like context button

Modals, alerts, notifications, toasts, snackbars

• Add a modal component (ModalCenter and Modal)
• Add alerts (do not break the flow of content)
• Add notifications/toasts/snackbars (each with a *Center and *)

Automate button linking

As a quality-of-life change, it's worthwhile updating the Button component to automatically be of type='link' when it is provided with a href prop.

This will reduce the code required to create link buttons and make the component easier to use.

Progress, meter, loader

• Add <Progress> component
• Add spinner/loader component
• Add component based on the <meter> element for proper semantics - <meter> support is ok but the CSS is all over the place, not implementing this anytime soon.
• Provide multiple customization options (shape, fill, size)

DOM Nesting Validation

• <button> inside <button> - <MenuItem> and <Button> with <Dropdown>
• <div> inside <p> - <Tooltip> and <Popover>

Collapse, Accordion, Tabs, Show-Hide, Carousel

• Test Collapse component thoroughly with different kinds of content
• Add Accordion component
• Add Tabs component
• Provide some customization options
• Add Carousel component

Optimize Collapse content layout

Currently the Collapse component is optimized to work with raw textual content. Its styles should be evaluated so that pretty much anything can be placed inside it and not look out of alignment.

One solution is to replace its default styling to use a <p> element where raw content is right now, so that it will always use a paragraph if the passes content is a string and also use a paragraph for the title in the <summary> element.

Codebase linting

• Install ESLint and proper plugins, define rules
• Lint .js files / Use ESLint
• Replace <React.Fragment> with <>
• Fix React warning about false in non-boolean attributes

SidebarTab not hidden when there is no Sidebar

Figure out a way to entirely hide the SidebarTab if there is no Sidebar in the children of a Layout.

Documentation

• Design guide documents
  • Design principles
  • Typography system
  • Layout system
  • Color palettes
  • Customization
• Components
  • Reference common API
  • Accordion
  • Alert
  • Anchor
  • Audio
  • Avatar
  • Badge
  • Breadcrumbs
  • Button
  • ButtonGroup
  • Calendar
  • Card
  • Collapse
  • ContextButton
  • Divider
  • Dropdown
  • Footer
  • Form
  • Graph
  • Grid
  • Hyperlink
  • Icon
  • Iframe
  • Image
  • Input
  • Item
  • Layout
  • List
  • Loader
  • MediaObject
  • Menu
  • Modal
  • Notification
  • Pagination
  • Popover
  • Progress
  • Search
  • Steps
  • Switch
  • Table
  • Tabs
  • Tooltip
  • Typography
  • Video
• Prefabs/Demos
  • Login/Registration Form
  • Product Landing Page
  • Page Hero/Splash Screen
  • Alert with X icon
  • Feature Breakdown table
  • Pricing and Plan comparison
  • Card Layout with responsiveness
  • Card template and mapping
  • Horizontal card templates

Update props

• Add prop for autolinking in applicable elements such as <Text> and <Paragraph>
• Add ...rest to all existing components props
• Use forward refs whenever possible
• Check HTMLreference for component-specific props
• Add style props to all components
• Check all applicable props for React and add custom checking for each one if/as necessary
• Add generic props for most components with text (fontFamily, fontSize, fontWeight)
• Add generic props for most components with color and background color (foreColor, backColor)
• Add generic props for most components for padding and margins, if possible

CSS problem with global styles

There's currently an issue with the styles applied via the * selector, which messes up color and background on hover/focus effects and on SVGs.

Buttons in Header

Add a style for Button component in Header to fit perfectly within the height of its parent, either via CSS or via the components themselves.

Switches

• Create switch component
• Provide customization options

Font parsing and classes

font-* classes need to be tested again. Also the evaluation system of the --font-family variable generated by props might not work exactly as expected.

Add state to Search component

Search renders children.

However, this can cause a few problems, as the developer has to handle state changes by rendering or hiding the Search contents, probably via the onChange event.

It should be refactored to have an internal state, so that Search handles focusing/unfocusing by showing/hiding its results.

On a side note, it might be a good idea to add a clear button or something similar to the component, so that it is more of a unique component and not just another Input.

Hypercomponents

Provide custom components that are more powerful than regular components and make up the main API of the library:

Mappers

Components that produce mappings of data (Array/Object) to a view (set of components):

• Table
• List
• Menu
• Form
• Card(s)
• Media Object
• Item(s) / Tweet(s) / Post(s)
• Graph, Chart
• Profile, Avatar
• Map
• Timeline

Functionality

Additional features that can be added to certain components:

• Sorting (as a feature for tables and maybe other components)
• Auto-pagination (as a feature)
• Scrollspy

Simplification Layers

Easier ways to write components that require a lot of code and micromanagement:

• Accordion
• Tabs
• Radio Set
• LabeledInput
• InputWithIcon
• Text from Markdown

Prefabs

Prebuilt components for common use-cases:

• Login Form
• Pricing and Plan Comparison
• Splash Screen / Hero
• Feature breakdown

item.type is undefined

It seems like some components that filter their children might end up getting item.type equal to undefined.

I have seen this happen when a component that applies a filter contains children separated by a space on the same line.

Possible solution

Replace all instances of item.type.name === ComponentX.name with a more robust check which checks item.type && item.type.name && item.type.name === ComponentX.name instead. This will safeguard against this particular problem and possibly others in the future.

Improve alignment of Icon in Button

There is a minor issue with the alignment of <Icon> inside <Button>. This could be improved, but requires some trial and error.

Icons

• Add icon set, system and components
• Use Feather SVG Sprites
• Update existing components, replacing custom SVGs with Feather's SVGs
• Reevaluate CSS for SVGs in existing components

Fix Dropdown toggler icon vertical alignment

Dropdown icons are not properly aligned vertically inside the dropdown text and might also need some more spacing between the text and themselves.

Tab bugs

• Check isOpen with ButtonGroup
• Evaluate keys usage

SVGs shrink based on screen size when part of a Grid

Consider the following component tree:

<Grid>
  <Row>
    <Column size={3}>
      <Button>
        <Icon name='github' height={18} width={18}/>
      </Button>
    </Column>
  </Row>
</Grid>

In the above example the Icon component will shrink proportionately to the screen size, as the Column is resized and its max-width, set in _Reset.scss, updates automatically.

This is a very annoying bug and it requires a fix and re-evaluation of the related CSS ruleset.

Top-level App component

• Create a top-level wrapper component with configuration options.
• Use passed arguments for configuration to replace defaults in components etc.
• Add templating arguments.
• Use Context API to handle state if possible.

Auxiliary elements

• Add a <Footer> component
• <Divider> component - vertical and horizontal (use <hr> for horizontal)
• <Calendar> component for data presenation and/or input

Header style position bug

position: sticky requires at least one position (top, bottom, left or right) to work properly.

.layout-header seems to only get one of these set up in the smallest screen size and then it does not really do anything for the other screen sizes (possibly an artifact of refactoring the LayoutStyle). This should be addressed as soon as possible, as it breaks the component's functionality.

Numeric Input decrement button not showing

Input of type number seems to not display the left button (decrement) at all times (possibly a label-related bug).

Housekeeping

• Check prop immutability for all components, update as necessary using other variables to avoid prop mutation.
• Grabbing id right from the props might not be absolutely necessary for all components, probably only keep it in components that actually need to make use of it and have custom logic for it.
• className and classNames usage needs to be made more consistent.
• After #2 is resolved and all the general use props are added, update components to create style dynamically from custom properties such as fontWeight or backgroundColor.

Cards

• Test Card component thoroughly
• Check integration with other components
• Provide custom styles for cards

Layout

• Test layouts thoroughly
• Provide viewport-based customization for the Header and Sidebar positions

Checkbox & Radio

• Custom checkbox component
• Custom radio button component
• Provide color customization options for both of them
• Provide size options for both of them

MenuItem in Dropdown highlighting

When a MenuItem is inside a Dropdown it does not inherit the highlighting styles properly when selected.

Assorted Input component bugs

• Select - use value or defaultValue instead of selected
• Reevaluate the usage of value and defaultValue
• currencySign prop on DOM element
• Evaluate use-cases, code and issues of FileInput component
• RatingInput component has value without onChange, use defaultValue instead
• Evaluate prop usage in RatingInput

Pagination

• Add pagination component
• Provide customization options

Make Breadcrumb parse href itself

Breadcrumb (BreadcrumbItem) should parse its own href property to simplify use.