From 6ae5377c657b8a199b654b5bdf747b41980217f8 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Wed, 27 Jan 2021 16:16:39 -0800 Subject: [PATCH 1/9] =?UTF-8?q?Position.js=20=E2=86=92=20Position.tsx?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Position.js | 42 ------------- src/Position.tsx | 59 +++++++++++++++++++ src/__tests__/{Position.js => Position.tsx} | 0 .../{Position.js.snap => Position.tsx.snap} | 0 4 files changed, 59 insertions(+), 42 deletions(-) delete mode 100644 src/Position.js create mode 100644 src/Position.tsx rename src/__tests__/{Position.js => Position.tsx} (100%) rename src/__tests__/__snapshots__/{Position.js.snap => Position.tsx.snap} (100%) diff --git a/src/Position.js b/src/Position.js deleted file mode 100644 index a4fbdd470c5..00000000000 --- a/src/Position.js +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import styled from 'styled-components' -import {POSITION} from './constants' -import Box from './Box' -import theme from './theme' -import sx from './sx' - -const Position = styled(Box)` - ${POSITION}; - ${sx}; -` - -Position.defaultProps = { - theme -} - -Position.propTypes = { - ...Box.propTypes, - ...POSITION.propTypes, - theme: PropTypes.object, - ...sx.propTypes -} - -function withPosition(position) { - const WithPosition = props => - WithPosition.propTypes = Position.propTypes - WithPosition.defaultProps = Position.defaultProps - WithPosition.displayName = `Position.${position}` - return WithPosition -} - -export default Position -export const Absolute = withPosition('Absolute') -export const Fixed = withPosition('Fixed') -export const Relative = withPosition('Relative') -export const Sticky = withPosition('Sticky') -Sticky.defaultProps = { - theme, - top: 0, - zIndex: 1 -} diff --git a/src/Position.tsx b/src/Position.tsx new file mode 100644 index 00000000000..e48f0d241ea --- /dev/null +++ b/src/Position.tsx @@ -0,0 +1,59 @@ +import PropTypes from 'prop-types' +import React from 'react' +import styled from 'styled-components' +import Box from './Box' +import {POSITION, SystemPositionProps} from './constants' +import sx from './sx' +import theme from './theme' +import {ComponentProps} from './utils/types' + +const Position = styled(Box)` + ${POSITION}; + ${sx}; +` + +Position.defaultProps = { + theme +} + +Position.propTypes = { + ...Box.propTypes, + ...POSITION.propTypes, + theme: PropTypes.object, + ...sx.propTypes +} + +export type PositionProps = ComponentProps +export default Position + +// Absolute +export type AbsoluteProps = Omit +export function Absolute(props: AbsoluteProps) { + return +} +Absolute.defaultProps = Position.defaultProps +Absolute.propTypes = Position.propTypes + +// Fixed +export type FixedProps = Omit +export function Fixed(props: AbsoluteProps) { + return +} +Fixed.defaultProps = Position.defaultProps +Fixed.propTypes = Position.propTypes + +// Relative +export type RelativeProps = Omit +export function Relative(props: RelativeProps) { + return +} +Relative.defaultProps = Position.defaultProps +Relative.propTypes = Position.propTypes + +// Sticky +export type StickyProps = Omit +export function Sticky(props: StickyProps) { + return +} +Sticky.defaultProps = {...Position.defaultProps, top: 0, zIndex: 1} +Sticky.propTypes = Position.propTypes diff --git a/src/__tests__/Position.js b/src/__tests__/Position.tsx similarity index 100% rename from src/__tests__/Position.js rename to src/__tests__/Position.tsx diff --git a/src/__tests__/__snapshots__/Position.js.snap b/src/__tests__/__snapshots__/Position.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/Position.js.snap rename to src/__tests__/__snapshots__/Position.tsx.snap From 535813ed296b9848e83553fd849cb17072c57d56 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 8 Feb 2021 14:42:26 -0800 Subject: [PATCH 2/9] Define as prop --- src/Position.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/Position.tsx b/src/Position.tsx index e48f0d241ea..0763b59d06e 100644 --- a/src/Position.tsx +++ b/src/Position.tsx @@ -7,7 +7,9 @@ import sx from './sx' import theme from './theme' import {ComponentProps} from './utils/types' -const Position = styled(Box)` +type StyledPositionProps = {as?: React.ElementType} & SystemPositionProps + +const Position = styled(Box)` ${POSITION}; ${sx}; ` From 9b71bf387aad9f3cd3802594fd3cccc473b46661 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 8 Feb 2021 14:43:28 -0800 Subject: [PATCH 3/9] Create seven-islands-rest.md --- .changeset/seven-islands-rest.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/seven-islands-rest.md diff --git a/.changeset/seven-islands-rest.md b/.changeset/seven-islands-rest.md new file mode 100644 index 00000000000..2c8256a5573 --- /dev/null +++ b/.changeset/seven-islands-rest.md @@ -0,0 +1,5 @@ +--- +"@primer/components": patch +--- + +Migrate `Position` to TypeScript From 2671d5e8fc9041778db8ae5b0ceefc8d9e211f87 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 8 Feb 2021 15:05:02 -0800 Subject: [PATCH 4/9] =?UTF-8?q?TextInput.js=20=E2=86=92=20TextInput.tsx?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- @types/@styled-system/props/index.d.ts | 1 + src/{TextInput.js => TextInput.tsx} | 72 ++++++++++++------- src/__tests__/{TextInput.js => TextInput.tsx} | 0 .../{TextInput.js.snap => TextInput.tsx.snap} | 0 4 files changed, 46 insertions(+), 27 deletions(-) create mode 100644 @types/@styled-system/props/index.d.ts rename src/{TextInput.js => TextInput.tsx} (64%) rename src/__tests__/{TextInput.js => TextInput.tsx} (100%) rename src/__tests__/__snapshots__/{TextInput.js.snap => TextInput.tsx.snap} (100%) diff --git a/@types/@styled-system/props/index.d.ts b/@types/@styled-system/props/index.d.ts new file mode 100644 index 00000000000..d1bbf5dad03 --- /dev/null +++ b/@types/@styled-system/props/index.d.ts @@ -0,0 +1 @@ +declare module '@styled-system/props' diff --git a/src/TextInput.js b/src/TextInput.tsx similarity index 64% rename from src/TextInput.js rename to src/TextInput.tsx index 1b7a682631a..104b8fd7cd1 100644 --- a/src/TextInput.js +++ b/src/TextInput.tsx @@ -4,10 +4,11 @@ import classnames from 'classnames' import systemPropTypes from '@styled-system/prop-types' import {omit, pick} from '@styled-system/props' import styled, {css} from 'styled-components' -import {variant, width, minWidth, maxWidth} from 'styled-system' -import {COMMON, get} from './constants' +import {variant, width, minWidth, maxWidth, MaxWidthProps, WidthProps, MinWidthProps} from 'styled-system' +import {COMMON, get, SystemCommonProps} from './constants' import theme from './theme' -import sx from './sx' +import sx, {SxProp} from './sx' +import {ComponentProps} from './utils/types' const sizeVariants = variant({ variants: { @@ -26,28 +27,6 @@ const sizeVariants = variant({ } }) -// using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input -const TextInput = React.forwardRef(({icon: IconComponent, className, block, disabled, sx, ...rest}, ref) => { - // this class is necessary to style FilterSearch, plz no touchy! - const wrapperClasses = classnames(className, 'TextInput-wrapper') - const wrapperProps = pick(rest) - const inputProps = omit(rest) - return ( - - {IconComponent && } - - - ) -}) - const Input = styled.input` border: 0; font-size: inherit; @@ -60,7 +39,18 @@ const Input = styled.input` } ` -const Wrapper = styled.span` +type StyledWrapperProps = { + disabled?: boolean + hasIcon?: boolean + block?: boolean + variant?: 'small' | 'large' +} & SystemCommonProps & + WidthProps & + MinWidthProps & + MaxWidthProps & + SxProp + +const Wrapper = styled.span` display: inline-flex; align-items: stretch; min-height: 34px; @@ -126,6 +116,33 @@ const Wrapper = styled.span` ${sx}; ` +type TextInputInternalProps = {icon?: React.ComponentType<{className?: string}>} & ComponentProps & + ComponentProps + +// using forwardRef is important so that other components (ex. SelectMenu) can autofocus the input +const TextInput = React.forwardRef( + ({icon: IconComponent, className, block, disabled, sx, ...rest}, ref) => { + // this class is necessary to style FilterSearch, plz no touchy! + const wrapperClasses = classnames(className, 'TextInput-wrapper') + const wrapperProps = pick(rest) + const inputProps = omit(rest) + return ( + + {IconComponent && } + + + ) + } +) + TextInput.defaultProps = { theme, type: 'text' @@ -133,7 +150,7 @@ TextInput.defaultProps = { TextInput.propTypes = { block: PropTypes.bool, - icon: PropTypes.elementType, + icon: PropTypes.any, maxWidth: systemPropTypes.layout.maxWidth, minWidth: systemPropTypes.layout.minWidth, variant: PropTypes.oneOf(['small', 'large']), @@ -144,4 +161,5 @@ TextInput.propTypes = { TextInput.displayName = 'TextInput' +export type TextInputProps = ComponentProps export default TextInput diff --git a/src/__tests__/TextInput.js b/src/__tests__/TextInput.tsx similarity index 100% rename from src/__tests__/TextInput.js rename to src/__tests__/TextInput.tsx diff --git a/src/__tests__/__snapshots__/TextInput.js.snap b/src/__tests__/__snapshots__/TextInput.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/TextInput.js.snap rename to src/__tests__/__snapshots__/TextInput.tsx.snap From 62f45a12fbd87d18adbc611a6410734f9fd16ab9 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 8 Feb 2021 15:06:08 -0800 Subject: [PATCH 5/9] Create stupid-seals-explode.md --- .changeset/stupid-seals-explode.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/stupid-seals-explode.md diff --git a/.changeset/stupid-seals-explode.md b/.changeset/stupid-seals-explode.md new file mode 100644 index 00000000000..cfd97c3a3d9 --- /dev/null +++ b/.changeset/stupid-seals-explode.md @@ -0,0 +1,5 @@ +--- +"@primer/components": patch +--- + +Migrate `TextInput` to TypeScript From 290330a9c4feddaa23a62db7b2ccf970644c3d69 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 8 Feb 2021 21:06:42 -0800 Subject: [PATCH 6/9] Migrate CircleBadge to TypeScript --- src/{CircleBadge.js => CircleBadge.tsx} | 48 +++++++++++-------- .../{CircleBadge.js => CircleBadge.tsx} | 6 +-- ...rcleBadge.js.snap => CircleBadge.tsx.snap} | 0 3 files changed, 30 insertions(+), 24 deletions(-) rename src/{CircleBadge.js => CircleBadge.tsx} (50%) rename src/__tests__/{CircleBadge.js => CircleBadge.tsx} (92%) rename src/__tests__/__snapshots__/{CircleBadge.js.snap => CircleBadge.tsx.snap} (100%) diff --git a/src/CircleBadge.js b/src/CircleBadge.tsx similarity index 50% rename from src/CircleBadge.js rename to src/CircleBadge.tsx index 6f13f7ddff9..b97d7248adb 100644 --- a/src/CircleBadge.js +++ b/src/CircleBadge.tsx @@ -1,11 +1,11 @@ -import React from 'react' import PropTypes from 'prop-types' import styled from 'styled-components' -import {COMMON, get} from './constants' -import isNumeric from './utils/isNumeric' -import theme from './theme' -import sx from './sx' +import {COMMON, get, SystemCommonProps} from './constants' import StyledOcticon from './StyledOcticon' +import sx, {SxProp} from './sx' +import theme from './theme' +import isNumeric from './utils/isNumeric' +import {ComponentProps} from './utils/types' const variantSizes = { small: 56, @@ -13,7 +13,14 @@ const variantSizes = { large: 128 } -const sizeStyles = ({size, variant}) => { +type StyledCircleBadgeProps = { + inline?: boolean + variant?: keyof typeof variantSizes + size?: number +} & SystemCommonProps & + SxProp + +const sizeStyles = ({size, variant = 'medium'}: StyledCircleBadgeProps) => { const calc = isNumeric(size) ? size : variantSizes[variant] return { width: calc, @@ -21,25 +28,27 @@ const sizeStyles = ({size, variant}) => { } } -const CircleBadge = styled.div` +const CircleBadge = styled.div` display: ${props => (props.inline ? 'inline-flex' : 'flex')}; align-items: center; justify-content: center; background-color: ${get('colors.white')}; border-radius: 50%; box-shadow: ${get('shadows.medium')}; - ${COMMON} ${sizeStyles}; + ${COMMON}; + ${sizeStyles}; ${sx}; ` -CircleBadge.Icon = props => ( - -) +const CircleBadgeIcon = styled(StyledOcticon)` + height: auto; + max-width: 60%; + max-height: 55%; +` CircleBadge.defaultProps = { inline: false, - theme, - variant: 'medium' + theme } CircleBadge.propTypes = { @@ -51,15 +60,16 @@ CircleBadge.propTypes = { ...sx.propTypes } -CircleBadge.Icon.defaultProps = { - theme, - sx: {} +CircleBadgeIcon.defaultProps = { + theme } -CircleBadge.Icon.propTypes = { +CircleBadgeIcon.propTypes = { ...StyledOcticon.propTypes } -CircleBadge.Icon.displayName = 'CircleBadge.Icon' +CircleBadgeIcon.displayName = 'CircleBadge.Icon' -export default CircleBadge +export type CircleBadgeProps = ComponentProps +export type CircleBadgeIconProps = ComponentProps +export default Object.assign(CircleBadge, {Icon: CircleBadgeIcon}) diff --git a/src/__tests__/CircleBadge.js b/src/__tests__/CircleBadge.tsx similarity index 92% rename from src/__tests__/CircleBadge.js rename to src/__tests__/CircleBadge.tsx index c9618c23c28..26e76dc5779 100644 --- a/src/__tests__/CircleBadge.js +++ b/src/__tests__/CircleBadge.tsx @@ -18,11 +18,7 @@ describe('CircleBadge', () => { }) describe('CircleBadge.Icon', () => { - behavesAsComponent(CircleBadge.Icon, [COMMON], () => ( - -
- - )) + behavesAsComponent(CircleBadge.Icon, [COMMON], () => ) }) it('should have no axe violations', async () => { diff --git a/src/__tests__/__snapshots__/CircleBadge.js.snap b/src/__tests__/__snapshots__/CircleBadge.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/CircleBadge.js.snap rename to src/__tests__/__snapshots__/CircleBadge.tsx.snap From 1dda5ffa6c41f57b231737b8ad65c2b421d631ea Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Mon, 8 Feb 2021 21:19:56 -0800 Subject: [PATCH 7/9] Migrate CircleOcticon to TypeScript --- src/{CircleOcticon.js => CircleOcticon.tsx} | 13 ++++++++++--- .../{CircleOcticon.js => CircleOcticon.tsx} | 0 ...CircleOcticon.js.snap => CircleOcticon.tsx.snap} | 0 3 files changed, 10 insertions(+), 3 deletions(-) rename src/{CircleOcticon.js => CircleOcticon.tsx} (66%) rename src/__tests__/{CircleOcticon.js => CircleOcticon.tsx} (100%) rename src/__tests__/__snapshots__/{CircleOcticon.js.snap => CircleOcticon.tsx.snap} (100%) diff --git a/src/CircleOcticon.js b/src/CircleOcticon.tsx similarity index 66% rename from src/CircleOcticon.js rename to src/CircleOcticon.tsx index 1e4fb0249b4..b6d017dd139 100644 --- a/src/CircleOcticon.js +++ b/src/CircleOcticon.tsx @@ -1,12 +1,19 @@ import React from 'react' import PropTypes from 'prop-types' -import Flex from './Flex' +import Flex, {FlexProps} from './Flex' import theme from './theme' import BorderBox from './BorderBox' +import {IconProps} from '@primer/octicons-react' -function CircleOcticon(props) { +export type CircleOcticonProps = { + as?: React.ElementType + size?: number + icon: React.ComponentType<{size?: IconProps['size']}> +} & FlexProps + +function CircleOcticon(props: CircleOcticonProps) { const {size, as} = props - const {icon: IconComponent, bg, as: asProp, ...rest} = props + const {icon: IconComponent, bg, ...rest} = props return ( diff --git a/src/__tests__/CircleOcticon.js b/src/__tests__/CircleOcticon.tsx similarity index 100% rename from src/__tests__/CircleOcticon.js rename to src/__tests__/CircleOcticon.tsx diff --git a/src/__tests__/__snapshots__/CircleOcticon.js.snap b/src/__tests__/__snapshots__/CircleOcticon.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/CircleOcticon.js.snap rename to src/__tests__/__snapshots__/CircleOcticon.tsx.snap From 058e791936399b1e08c31bfa18c772015da587c7 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 9 Feb 2021 08:05:36 -0800 Subject: [PATCH 8/9] Create quiet-lobsters-sing.md --- .changeset/quiet-lobsters-sing.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/quiet-lobsters-sing.md diff --git a/.changeset/quiet-lobsters-sing.md b/.changeset/quiet-lobsters-sing.md new file mode 100644 index 00000000000..54a65aaee14 --- /dev/null +++ b/.changeset/quiet-lobsters-sing.md @@ -0,0 +1,5 @@ +--- +"@primer/components": patch +--- + +Migrate `CircleOcticon` to TypeScript From c5d2b65725c7e584412430fd3156875b8e1714d8 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 9 Feb 2021 08:05:53 -0800 Subject: [PATCH 9/9] Create kind-spies-call.md --- .changeset/kind-spies-call.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/kind-spies-call.md diff --git a/.changeset/kind-spies-call.md b/.changeset/kind-spies-call.md new file mode 100644 index 00000000000..03d992057f2 --- /dev/null +++ b/.changeset/kind-spies-call.md @@ -0,0 +1,5 @@ +--- +"@primer/components": patch +--- + +Migrate `CircleBadge` to TypeScript