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

chore(components): sub in storybook for styleguidist #7549

Merged
merged 91 commits into from
May 3, 2021
Merged
Changes from 1 commit
Commits
Show all changes
91 commits
Select commit Hold shift + click to select a range
084411e
remove at flow, add tsconfig, change file extensions
b-cooper Feb 23, 2021
86a7336
mixed to unknown and pull type imports out
b-cooper Feb 23, 2021
a08ddc6
add types
b-cooper Feb 23, 2021
7e7e8d4
migrate synthetic mouse events over
b-cooper Feb 23, 2021
f926dc5
add typings for css modules dep
b-cooper Feb 24, 2021
2b743ca
update loader
b-cooper Feb 24, 2021
c883f15
swap css modules plugin out
b-cooper Feb 24, 2021
b338c8a
tsx ext for jsx files
b-cooper Feb 24, 2021
dfeb0f5
pick at style props
b-cooper Feb 24, 2021
df2d557
tests with jsx ext
b-cooper Feb 25, 2021
4a7ecd0
migrate more ts
b-cooper Feb 26, 2021
0d7b91a
work through tsc errors
b-cooper Mar 3, 2021
546b50a
jsx element return type
b-cooper Mar 3, 2021
9481e40
jest styled components types
b-cooper Mar 3, 2021
dc17d4e
add types for react test renderer
b-cooper Mar 3, 2021
8918d62
interface for prop types
b-cooper Mar 3, 2021
0f1546a
misc clean up
b-cooper Mar 3, 2021
bb8b4d8
Merge branch 'edge' into components_port-source-to-ts
b-cooper Mar 3, 2021
3db923d
shared data types
b-cooper Mar 3, 2021
d105565
continue clean up
b-cooper Mar 3, 2021
6b65363
styled components types clean up
b-cooper Mar 4, 2021
973a566
use PrimitiveComponent props
b-cooper Mar 4, 2021
a581bf3
knockin the errors down
b-cooper Mar 4, 2021
7b71e14
address first batch of pr commments
b-cooper Mar 5, 2021
2f28bf1
fine tooth combing
b-cooper Mar 5, 2021
eb371dd
clean up some tooltip type gunk
b-cooper Mar 5, 2021
be07f4b
clean up shared data stubstypes
b-cooper Mar 8, 2021
8b23039
fixup: fix errors with atoms types
mcous Mar 8, 2021
8f6ace7
forms bits
b-cooper Mar 8, 2021
baba5c3
fixup: get types working in interaction-enhancers
mcous Mar 8, 2021
35c39ff
some deck comp type fixes
b-cooper Mar 8, 2021
9ee75f8
memo exotic component type
b-cooper Mar 8, 2021
ffe808a
a couple more
b-cooper Mar 8, 2021
9f82285
fixup: get types sorted in tooltips
mcous Mar 8, 2021
de6b1c4
correct type for deck components
b-cooper Mar 8, 2021
1ec3f5d
add webpack env types and fix getDeckDefMock
b-cooper Mar 8, 2021
65a9013
formatOptionLabel returns react node
b-cooper Mar 9, 2021
e795522
type for fill
b-cooper Mar 9, 2021
6937b25
gitignore lib dir
b-cooper Mar 9, 2021
b3b9ce2
Well pointer events type
b-cooper Mar 9, 2021
90578a0
memo exotic component
b-cooper Mar 9, 2021
aaead15
robot coords text extend text props
b-cooper Mar 9, 2021
f9ed804
indeterminate prop missing todo
b-cooper Mar 9, 2021
bcd9311
struggle through react select generic types
b-cooper Mar 10, 2021
154b9cc
iron out select types
b-cooper Mar 10, 2021
6b0c746
disabled prop fixups
b-cooper Mar 10, 2021
f01e901
last errors
b-cooper Mar 10, 2021
7e214f1
no extension in import
b-cooper Mar 11, 2021
1d5908a
add react docgen typescript
b-cooper Mar 12, 2021
2c52afc
init storybook at root
b-cooper Mar 12, 2021
207fdbb
try out migrating alert item to storybook
b-cooper Mar 12, 2021
5bafba9
proof of concept btn and alert item in storybook
b-cooper Mar 15, 2021
eba7114
make stories for all atom
b-cooper Mar 16, 2021
2494b20
icon stories
b-cooper Mar 17, 2021
b18be1a
checkbox field and dropdown field
b-cooper Mar 17, 2021
0f835c0
Merge branch 'edge' into components_add-storybook
b-cooper Mar 24, 2021
cd9aeba
regrab deps
b-cooper Mar 24, 2021
7c23b61
add tooltip story
b-cooper Mar 29, 2021
b39773a
house-keeping todo comments in tabbed nav and structure dirs
b-cooper Mar 29, 2021
dbfd400
stories for structure components
b-cooper Mar 29, 2021
ed529a6
add todo comment to slot map component
b-cooper Mar 29, 2021
3c1b764
story for side panel
b-cooper Mar 29, 2021
030eaf0
add modal stories
b-cooper Mar 29, 2021
c406412
add instrument stories
b-cooper Mar 31, 2021
b562f32
form group story
b-cooper Apr 1, 2021
fae5813
hoist basic story components to top
b-cooper Apr 1, 2021
122d2f5
form components
b-cooper Apr 7, 2021
a66e8e4
select for module mode
b-cooper Apr 9, 2021
62f3782
wire up storybook in place of styleguidist deploy
b-cooper Apr 9, 2021
3b1d517
fix tab in makefile
b-cooper Apr 9, 2021
325ea8d
add makefile to path for components build action
b-cooper Apr 9, 2021
72b850f
deckLayerBlocklist control
b-cooper Apr 14, 2021
82ebdb6
chore(components): sub in storybook for styleguidist
b-cooper Apr 15, 2021
c2a9fc8
remove duplicate lint override
b-cooper Apr 15, 2021
0902454
delint
b-cooper Apr 15, 2021
ef32740
Merge branch 'edge' into components_add-storybook
b-cooper Apr 15, 2021
d0d9be0
bump flow memory capacity
b-cooper Apr 15, 2021
04f18d4
nuke merge conflict
b-cooper Apr 15, 2021
6aad3a7
clean up css lint
b-cooper Apr 15, 2021
109785d
remove react styleguidist dep
b-cooper Apr 15, 2021
0487af7
remove styleguidist markdown files
b-cooper Apr 15, 2021
915478c
remove styleguide config
b-cooper Apr 15, 2021
49fb4e5
remove styleguidist flow types
b-cooper Apr 16, 2021
4764d83
Merge branch 'edge' into components_add-storybook
b-cooper Apr 19, 2021
2d3a7b7
Merge branch 'edge' into components_add-storybook
b-cooper Apr 19, 2021
bcd2fdb
fixup: tweak eslint config for Storybook (#7708)
mcous Apr 27, 2021
1fe352e
fixup: fix linting and storybook build
mcous Apr 27, 2021
18058ca
fixup: add note about story classname
mcous Apr 27, 2021
09678be
fixup: fix broken teardown and dev tasks for components
mcous Apr 29, 2021
f1686ff
Merge branch 'edge' into components_add-storybook
mcous May 3, 2021
df28643
fixup: fix TS linting after shared-data merge
mcous May 3, 2021
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
migrate synthetic mouse events over
  • Loading branch information
b-cooper committed Feb 23, 2021
commit 7e7e8d452ec3aef60eed41e7c7d2f279a173f114
59 changes: 59 additions & 0 deletions components/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 3 additions & 0 deletions components/package.json
Original file line number Diff line number Diff line change
@@ -33,5 +33,8 @@
"react-remove-scroll": "1.0.8",
"react-select": "3.0.8",
"styled-components": "5.1.1"
},
"devDependencies": {
"typings-for-css-modules-loader": "^1.7.0"
}
}
4 changes: 2 additions & 2 deletions components/src/buttons/Button.ts
Original file line number Diff line number Diff line change
@@ -16,7 +16,7 @@ import type {IconName } from '../icons'

export type ButtonProps = {
/** click handler */
onClick?: (event: SyntheticMouseEvent<>) => unknown,
onClick?: (event: React.MouseEvent) => unknown,
/** name attribute */
name?: string,
/** title attribute */
@@ -43,7 +43,7 @@ export type ButtonProps = {
/** custom element or component to use instead of `<button>` */
Component?: string | React.AbstractComponent<any>,
/** handlers for HoverTooltipComponent */
hoverTooltipHandlers?: ?$Shape<{
hoverTooltipHandlers?: ?Partial<{
ref: (Element | null) => unknown,
'aria-describedby': string,
onMouseEnter: () => unknown,
2 changes: 1 addition & 1 deletion components/src/deck/Deck.ts
Original file line number Diff line number Diff line change
@@ -52,7 +52,7 @@ export class Deck extends React.Component<DeckProps> {
getXY: (
rawX: number,
rawY: number
) => $Shape<{ scaledX?: number, scaledY?: number }> = (rawX, rawY) => {
) => Partial<{ scaledX?: number, scaledY?: number }> = (rawX, rawY) => {
if (!this.parentRef) return {}
const clientRect: {
width: number,
6 changes: 3 additions & 3 deletions components/src/deck/Well.ts
Original file line number Diff line number Diff line change
@@ -21,9 +21,9 @@ export type WellProps = {
...SingleWell,
selectable?: boolean,
wellDef: WellDefinition,
onMouseOver?: (e: SyntheticMouseEvent<Element>) => unknown,
onMouseLeave?: (e: SyntheticMouseEvent<Element>) => unknown,
onMouseMove?: (e: SyntheticMouseEvent<Element>) => unknown,
onMouseOver?: (e: React.MouseEvent) => unknown,
onMouseLeave?: (e: React.MouseEvent) => unknown,
onMouseMove?: (e: React.MouseEvent) => unknown,
}

export class Well extends React.Component<WellProps> {
3 changes: 2 additions & 1 deletion components/src/deck/labwareInternals/types.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import * as React from 'react'

export type WellMouseEvent = {
wellName: string,
event: SyntheticMouseEvent<Element>,
event: React.MouseEvent,
}

// wellName to CSS color, eg {'A1': '#123456'}
8 changes: 4 additions & 4 deletions components/src/forms/InputField.ts
Original file line number Diff line number Diff line change
@@ -13,7 +13,7 @@ export type InputFieldProps = {
/** field is disabled if value is true */
disabled?: boolean,
/** change handler */
onChange?: (event: SyntheticInputEvent<HTMLInputElement>) => unknown,
onChange?: (event: React.SyntheticEvent<HTMLInputElement>) => unknown,
/** classes to apply to outer element */
className?: string,
/** inline label text. DEPRECATED */
@@ -39,11 +39,11 @@ export type InputFieldProps = {
/** optional input type (default "text") */
type?: typeof INPUT_TYPE_TEXT | typeof INPUT_TYPE_PASSWORD,
/** mouse click handler */
onClick?: (event: SyntheticMouseEvent<HTMLInputElement>) => unknown,
onClick?: (event: React.MouseEvent<HTMLInputElement>) => unknown,
/** focus handler */
onFocus?: (event: SyntheticFocusEvent<HTMLInputElement>) => unknown,
onFocus?: (event: React.FocusEvent<HTMLInputElement>) => unknown,
/** blur handler */
onBlur?: (event: SyntheticFocusEvent<HTMLInputElement>) => unknown,
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => unknown,
/** makes input field read-only */
readOnly?: ?boolean,
/** html tabindex property */
2 changes: 1 addition & 1 deletion components/src/instrument/InstrumentGroup.ts
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@ import styles from './instrument.css'

import type { InstrumentInfoProps } from './InstrumentInfo'

export type InstrumentGroupProps = $Shape<{
export type InstrumentGroupProps = Partial<{
showMountLabel: ?boolean,
left: ?InstrumentInfoProps,
right: ?InstrumentInfoProps,
2 changes: 1 addition & 1 deletion components/src/interaction-enhancers/useHover.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@

import { useState, useEffect, useCallback, useMemo, useRef } from 'react'

export type UseHoverOptions = $Shape<{
export type UseHoverOptions = Partial<{
enterDelay?: number,
leaveDelay?: number,
}>
2 changes: 1 addition & 1 deletion components/src/interaction-enhancers/useOnClickOutside.ts
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
import { useEffect, useRef } from 'react'
import assert from 'assert'

export type UseOnClickOutsideOptions = $Shape<{
export type UseOnClickOutsideOptions = Partial<{
onClickOutside?: MouseEvent => unknown,
}>

6 changes: 3 additions & 3 deletions components/src/lists/CollapsibleItem.ts
Original file line number Diff line number Diff line change
@@ -10,11 +10,11 @@ export type CollapsibleItemProps = {
/** text of title */
title: string,
/** children nodes */
children?,
children?: React.ReactNode,
/** additional classnames */
className?: string,
/** caret click action; if defined, list is expandable and carat is visible */
onCollapseToggle: (event: SyntheticMouseEvent<>) => unknown,
onCollapseToggle: (event: React.MouseEvent) => unknown,
/** collapse the list if true (false by default) */
collapsed: boolean,
}
@@ -28,7 +28,7 @@ export function CollapsibleItem(props: CollapsibleItemProps) {

// clicking on the carat will not call props.onClick,
// so prevent bubbling up if there is an onCollapseToggle fn
const handleCollapseToggle = (e: SyntheticMouseEvent<>) => {
const handleCollapseToggle = (e: React.MouseEvent) => {
e.stopPropagation()
onCollapseToggle(e)
}
15 changes: 8 additions & 7 deletions components/src/lists/ListItem.ts
Original file line number Diff line number Diff line change
@@ -5,19 +5,20 @@ import { NavLink } from 'react-router-dom'
import classnames from 'classnames'

import styles from './lists.css'
import { type IconName, Icon } from '../icons'
import { Icon } from '../icons'
import type { IconName } from '../icons'

type ListItemProps = {
/** click handler */
onClick?: (event: SyntheticEvent<>) => unknown,
onClick?: (event: React.SyntheticEvent) => unknown,
/** mouse enter handler */
onMouseEnter?: (event: SyntheticMouseEvent<>) => unknown,
onMouseEnter?: (event: React.MouseEvent) => unknown,
/** mouse leave handler */
onMouseLeave?: (event: SyntheticMouseEvent<>) => unknown,
onMouseLeave?: (event: React.MouseEvent) => unknown,
/** mouse enter handler */
onPointerEnter?: (event: SyntheticPointerEvent<>) => unknown,
onPointerEnter?: (event: React.PointerEvent) => unknown,
/** mouse leave handler */
onPointerLeave?: (event: SyntheticPointerEvent<>) => unknown,
onPointerLeave?: (event: React.PointerEvent) => unknown,
/** if URL is specified, ListItem is wrapped in a React Router NavLink */
url?: string | null,
/** if URL is specified NavLink can receive an active class name */
@@ -32,7 +33,7 @@ type ListItemProps = {
iconName?: IconName,
'aria-describedby'?: string,
ref?: { current: Element | null } | ((current: Element | null) => unknown),
children,
children: React.ReactNode,
}

/**
12 changes: 6 additions & 6 deletions components/src/lists/TitledList.ts
Original file line number Diff line number Diff line change
@@ -23,15 +23,15 @@ export type TitledListProps = {
/** component with descriptive text about the list */
description?,
/** optional click action (on title div, not children) */
onClick?: (event: SyntheticMouseEvent<>) => unknown,
onClick?: (event: React.MouseEvent) => unknown,
/** optional right click action (on wrapping div) */
onContextMenu?: (event: SyntheticMouseEvent<>) => unknown,
onContextMenu?: (event: React.MouseEvent) => unknown,
/** optional mouseEnter action */
onMouseEnter?: (event: SyntheticMouseEvent<>) => unknown,
onMouseEnter?: (event: React.MouseEvent) => unknown,
/** optional mouseLeave action */
onMouseLeave?: (event: SyntheticMouseEvent<>) => unknown,
onMouseLeave?: (event: React.MouseEvent) => unknown,
/** caret click action; if defined, list is expandable and carat is visible */
onCollapseToggle?: (event: SyntheticMouseEvent<>) => unknown,
onCollapseToggle?: (event: React.MouseEvent) => unknown,
/** collapse the list if true (false by default) */
collapsed?: boolean,
/** set to true when TitledList is selected (eg, user clicked it) */
@@ -65,7 +65,7 @@ export function TitledList(props: TitledListProps) {

// clicking on the carat will not call props.onClick,
// so prevent bubbling up if there is an onCollapseToggle fn
const handleCollapseToggle = (e: SyntheticMouseEvent<>) => {
const handleCollapseToggle = (e: React.MouseEvent) => {
if (onCollapseToggle && !disabled) {
e.stopPropagation()
onCollapseToggle(e)
2 changes: 1 addition & 1 deletion components/src/modals/Modal.ts
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@ import styles from './modals.css'

export type ModalProps = {
/** handler to close the modal (attached to `Overlay` onClick) */
onCloseClick?: (event: SyntheticEvent<>) => unknown,
onCloseClick?: (event: React.SyntheticEvent) => unknown,
/** Optional styled heading **/
heading?: string,
/** modal contents */
2 changes: 1 addition & 1 deletion components/src/modals/Overlay.ts
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@ import styles from './modals.css'

export type OverlayProps = {
/** optional onClick handler */
onClick?: (event: SyntheticEvent<>) => unknown,
onClick?: (event: React.SyntheticEvent) => unknown,
alertOverlay?: ?boolean,
}

4 changes: 2 additions & 2 deletions components/src/tabbedNav/NavTab.ts
Original file line number Diff line number Diff line change
@@ -3,15 +3,15 @@ import * as React from 'react'
import { NavLink } from 'react-router-dom'
import classnames from 'classnames'

import styles from './navbar.css'
import * as styles from './navbar.css'
import { Button } from '../buttons'
import { NotificationIcon } from '../icons'

import type { IconName } from '../icons'

export type NavTabProps = {
/** optional click event for nav button */
onClick?: (event: SyntheticEvent<>) => void,
onClick?: (event: React.SyntheticEvent) => void,
/** optional url for nav button route */
url?: string,
/** position a single button on the bottom of the page */
2 changes: 1 addition & 1 deletion components/src/tabbedNav/OutsideLinkTab.ts
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@ import type { IconName } from '../icons'

export type OutsideLinkTabProps = {
/** optional click event for nav button */
onClick?: (event: SyntheticEvent<>) => unknown,
onClick?: (event: React.SyntheticEvent) => unknown,
/** link to outside URL */
to: string,
/** position a single button on the bottom of the page */
8 changes: 4 additions & 4 deletions components/src/tooltips/HoverTooltip.ts
Original file line number Diff line number Diff line change
@@ -13,8 +13,8 @@ const OPEN_DELAY_MS = 300
const CLOSE_DELAY_MS = 0

export type HoverTooltipHandlers = TooltipChildProps<{
onMouseEnter: (SyntheticMouseEvent<*>) => void,
onMouseLeave: (SyntheticMouseEvent<*>) => void,
onMouseEnter: (React.MouseEvent) => void,
onMouseLeave: (React.MouseEvent) => void,
}>

export type HoverTooltipProps = DeprecatedTooltipProps<HoverTooltipHandlers>
@@ -29,8 +29,8 @@ type HoverTooltipState = { isOpen: boolean }
* ```js
* type HoverTooltipHandlers = {
* ref: React.Ref<*>,
* onMouseEnter: (SyntheticMouseEvent<*>) => void,
* onMouseLeave: (SyntheticMouseEvent<*>) => void,
* onMouseEnter: (React.MouseEvent) => void,
* onMouseLeave: (React.MouseEvent) => void,
* }
* ```
*
6 changes: 3 additions & 3 deletions components/src/tooltips/Tooltip.ts
Original file line number Diff line number Diff line change
@@ -31,11 +31,11 @@ export type TooltipProps = {
/** Actual tooltip placement, if known (provided by useTooltip) */
placement: Placement | null,
/** Inline styles to apply to the tooltip element (provided by useTooltip) */
style: $Shape<CSSStyleDeclaration>,
style: Partial<CSSStyleDeclaration>,
/** React function ref for tooltip's arrow element (provided by useTooltip) */
arrowRef: (HTMLElement | null) => unknown,
/** Inline styles to apply to arrow element (provided by useTooltip) */
arrowStyle: $Shape<CSSStyleDeclaration>,
arrowStyle: Partial<CSSStyleDeclaration>,
}

/**
@@ -117,7 +117,7 @@ const ARROW_CSS_BY_PLACEMENT_BASE: { [string]: CSSRules | void } = {
export type ArrowProps = {
placement: Placement | null,
arrowRef: (HTMLElement | null) => unknown,
arrowStyle: $Shape<CSSStyleDeclaration>,
arrowStyle: Partial<CSSStyleDeclaration>,
}

export function Arrow(props: ArrowProps) {
Loading