fix some imports/exports

.yarn/versions/cb173e80.yml

@@ -1,4 +0,0 @@
-releases:
-  "@thematic/fluent": minor
-  "@thematic/react": minor
-  "@thematic/webapp": minor

.yarn/versions/ed3b3477.yml

@@ -1,8 +0,0 @@
-releases:
-  "@thematic/color": patch
-  "@thematic/core": patch
-  "@thematic/d3": patch
-  "@thematic/fluent": patch
-  "@thematic/react": patch
-  "@thematic/vega": patch
-  "@thematic/webapp": patch

packages/color/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@thematic/color",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"license": "MIT",
 	"main": "src/index.ts",
 	"publishConfig": {

packages/core/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@thematic/core",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"license": "MIT",
 	"main": "src/index.ts",
 	"publishConfig": {

packages/core/src/scales.ts

@@ -131,7 +131,7 @@ export function quantile(
 	return scale as (input: number) => number
 }
 
-interface LearningState {
+export interface LearningState {
 	/**
 	 * Current value of the learning. When elapsed time is 0 (i.e., the learning was just applied),
 	 * this will be 1.0. As time elapses and the learning fades, this declines toward 0.

packages/d3/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@thematic/d3",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"license": "MIT",
 	"main": "src/index.ts",
 	"publishConfig": {

packages/fluent/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@thematic/fluent",
-	"version": "1.0.3",
+	"version": "1.1.0",
 	"license": "MIT",
 	"main": "src/index.ts",
 	"publishConfig": {

packages/fluent/src/ColorPicker/ColorPicker.tsx

@@ -7,7 +7,7 @@ import {
 	Slider,
 	IColor,
 } from '@fluentui/react'
-import { CSSProperties } from 'react'
+import { CSSProperties, FC } from 'react'
 
 import { css2hsluv, Params } from '@thematic/color'
 import { Theme } from '@thematic/core'
@@ -40,7 +40,7 @@ export type PartialParams = Partial<Params>
  * parameterization and leave room for additional functionality.
  * Note also that it does NOT expose an alpha control, because this is not allowed in thematic params.
  */
-export const ColorPicker: React.FC<ColorPickerProps> = ({
+export const ColorPicker: FC<ColorPickerProps> = ({
 	onChange,
 	theme,
 	layout,

packages/fluent/src/ColorPickerButton/ColorPickerButton.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { IconButton, Label } from '@fluentui/react'
-import { memo, CSSProperties } from 'react'
+import { memo, CSSProperties, FC } from 'react'
 import { ColorPicker } from '../ColorPicker'
 import { Theme } from '@thematic/core'
 import { useThematic } from '@thematic/react'
@@ -22,7 +22,7 @@ export interface ColorPickerButtonProps {
 /**
  * This is a dropdown button that displays a thematic ColorPicker.
  */
-export const ColorPickerButton: React.FC<ColorPickerButtonProps> = memo(
+export const ColorPickerButton: FC<ColorPickerButtonProps> = memo(
 	function ColorPickerButton({ onChange, theme, label, styles }) {
 		const contextTheme = useThematic()
 		const activeTheme = theme || contextTheme

packages/fluent/src/ScaleDropdown/ColorChips.tsx

@@ -3,10 +3,10 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { scaleLinear } from 'd3-scale'
-import { useMemo } from 'react'
+import { FC, useMemo } from 'react'
 import { ChipsProps } from './types'
 
-export const ColorChips: React.FC<ChipsProps> = ({
+export const ColorChips: FC<ChipsProps> = ({
 	scale,
 	width = 200,
 	height = 10,

packages/fluent/src/ScaleDropdown/ContinuousBand.tsx

@@ -2,14 +2,10 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { useMemo } from 'react'
+import { FC, useMemo } from 'react'
 import { ChipsProps } from './types'
 
-export const ContinuousBand: React.FC<ChipsProps> = ({
-	scale,
-	width,
-	height,
-}) => {
+export const ContinuousBand: FC<ChipsProps> = ({ scale, width, height }) => {
 	const blocks = useMemo(() => {
 		return scale
 			.toArray(width)

packages/fluent/src/ScaleDropdown/ScaleDropdown.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { Dropdown } from '@fluentui/react'
-import { useCallback, useRef } from 'react'
+import { FC, useCallback, useRef } from 'react'
 import { ScaleDropdownItem } from './ScaleDropdownItem'
 import {
 	usePaletteWidth,
@@ -19,7 +19,7 @@ import { ScaleDropdownProps } from './types'
  * The scale names can be accompanied by a visual rendering of the scale colors.
  * This bascially extends Dropdown, overriding the options and item rendering.
  */
-export const ScaleDropdown: React.FC<ScaleDropdownProps> = props => {
+export const ScaleDropdown: FC<ScaleDropdownProps> = props => {
 	const ref = useRef(null)
 	const { width, height } = useSafeDimensions(ref)
 	const paletteWidth = usePaletteWidth(width)

packages/fluent/src/ScaleDropdown/ScaleDropdownItem.tsx

@@ -2,11 +2,12 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
+import { FC } from 'react'
 import { useSafeCollapseDimensions } from './hooks/useSafeDimensions'
 import { ScaleDropdownItemProps } from './types'
 import { selectColorPalette, useScale } from './util'
 
-export const ScaleDropdownItem: React.FC<ScaleDropdownItemProps> = ({
+export const ScaleDropdownItem: FC<ScaleDropdownItemProps> = ({
 	option,
 	paletteWidth,
 	paletteHeight,

packages/fluent/src/ScaleDropdown/util.ts

@@ -2,7 +2,7 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { useMemo } from 'react'
+import { FC, useMemo } from 'react'
 import { ColorChips } from './ColorChips'
 import { ContinuousBand } from './ContinuousBand'
 import { ChipsProps } from './types'
@@ -54,7 +54,7 @@ export function chooseScale(
 	}
 }
 
-export function selectColorPalette(key: string): React.FC<ChipsProps> {
+export function selectColorPalette(key: string): FC<ChipsProps> {
 	if (key === 'nominal' || key === 'nominalMuted' || key === 'nominalBold') {
 		return ColorChips
 	}

packages/fluent/src/ScaleTypeChoiceGroup/index.tsx

@@ -7,10 +7,10 @@ import {
 	IChoiceGroupOption,
 	IChoiceGroupStyles,
 } from '@fluentui/react'
-import { useCallback, useMemo } from 'react'
+import { FC, useCallback, useMemo } from 'react'
 import { ScaleType } from '@thematic/core'
 
-interface ScaleTypeChoiceGroupProps {
+export interface ScaleTypeChoiceGroupProps {
 	selectedType: ScaleType
 	onChange?: (scaleType: ScaleType) => void
 	label?: string
@@ -25,7 +25,7 @@ const CHOICE_STYLE = {
 /**
  * Represents a strongly typed ChoiceGroup for selecting thematic ScaleTypes.
  */
-export const ScaleTypeChoiceGroup: React.FC<ScaleTypeChoiceGroupProps> = ({
+export const ScaleTypeChoiceGroup: FC<ScaleTypeChoiceGroupProps> = ({
 	selectedType,
 	onChange,
 	label,

packages/fluent/src/ThematicFluentProvider.tsx

@@ -4,7 +4,7 @@
  */
 import { initializeIcons } from '@fluentui/font-icons-mdl2'
 import { ThemeProvider } from '@fluentui/react'
-import { useMemo, ReactNode } from 'react'
+import { useMemo, ReactNode, FC } from 'react'
 import { loadFluentTheme } from './loader'
 import { Theme } from '@thematic/core'
 import { ThematicProvider } from '@thematic/react'
@@ -21,7 +21,7 @@ initializeIcons()
  * Just treat it like a typical Context.Provider, wrapping it around your app.
  * Your Fluent controls should automatically inherit the Thematic colors as semantically applied by Fluent.
  */
-export const ThematicFluentProvider: React.FC<ThematicFluentProviderProps> = ({
+export const ThematicFluentProvider: FC<ThematicFluentProviderProps> = ({
 	theme,
 	children,
 }) => {

packages/react/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@thematic/react",
-	"version": "1.0.3",
+	"version": "1.1.0",
 	"license": "MIT",
 	"main": "src/index.ts",
 	"publishConfig": {

packages/react/src/ApplicationStyles.tsx

@@ -2,12 +2,13 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
+import { FC } from 'react'
 import { useThematic } from './'
 
 /**
  * This component applies root-level styles to your application using the theme defaults.
  */
-export const ApplicationStyles: React.FC = () => {
+export const ApplicationStyles: FC = () => {
 	const theme = useThematic()
 	return (
 		<style>

packages/react/src/provider/ThematicProvider.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { ReactNode, useMemo } from 'react'
+import { FC, ReactNode, useMemo } from 'react'
 import { ThematicContext, defaultTheme } from './ThematicContext'
 import { Theme } from '@thematic/core'
 
@@ -14,7 +14,7 @@ export interface ThematicProviderProps {
 /**
  * Provider component from the default context for Thematic
  */
-export const ThematicProvider: React.FC<ThematicProviderProps> = ({
+export const ThematicProvider: FC<ThematicProviderProps> = ({
 	theme,
 	children,
 }) => {

packages/vega/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@thematic/vega",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"license": "MIT",
 	"main": "src/index.ts",
 	"publishConfig": {

packages/webapp/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@thematic/webapp",
 	"title": "Thematic",
-	"version": "1.0.3",
+	"version": "1.1.0",
 	"homepage": "https://microsoft.github.io/thematic/",
 	"private": true,
 	"license": "MIT",

packages/webapp/src/App.tsx

@@ -12,7 +12,7 @@ import { ApplicationStyles } from '@thematic/react'
 
 import './App.css'
 
-interface AppProps {
+export interface AppProps {
 	theme: Theme
 }
 

packages/webapp/src/components/ColorPalette/ApplicationPalette.tsx

@@ -6,12 +6,13 @@ import { ColorStrip } from '../ColorStrip'
 import { useThematic } from '@thematic/react'
 
 import './index.css'
+import { FC } from 'react'
 
 const applicationPrimaryKeys = ['accent', 'foreground', 'background']
 const applicationSignalKeys = ['success', 'warning', 'error']
 const applicationSecondaryKeys = ['lowContrast', 'midContrast', 'highContrast']
 const applicationElementKeys = ['border', 'faint']
-export const ApplicationPalette: React.FC = () => {
+export const ApplicationPalette: FC = () => {
 	const theme = useThematic()
 	const app = theme.application()
 	const mapkeys = keys =>

packages/webapp/src/components/ColorPalette/ColorBand.tsx

@@ -2,13 +2,16 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-interface ColorBandProps {
+
+import { FC } from 'react'
+
+export interface ColorBandProps {
 	colors: string[]
 	foreground: string
 	label: string
 	width: number
 }
-export const ColorBand: React.FC<ColorBandProps> = ({
+export const ColorBand: FC<ColorBandProps> = ({
 	colors,
 	foreground,
 	label,

packages/webapp/src/components/ColorPalette/ColorStrip.tsx

@@ -2,14 +2,17 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-interface ColorStripProps {
+
+import { FC } from 'react'
+
+export interface ColorStripProps {
 	colors: string[]
 	labelColors?: string[]
 	foreground: string
 	background: string
 	label: string
 }
-export const ColorStrip: React.FC<ColorStripProps> = ({
+export const ColorStrip: FC<ColorStripProps> = ({
 	colors,
 	labelColors,
 	foreground,

packages/webapp/src/components/ColorPalette/Contrast.tsx

@@ -3,10 +3,10 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { IconButton } from '@fluentui/react'
-import { CSSProperties } from 'react'
+import { CSSProperties, FC } from 'react'
 import { contrast } from '@thematic/color'
 
-interface ContrastProps {
+export interface ContrastProps {
 	foreground: string
 	background: string
 	error: string
@@ -17,7 +17,7 @@ const WCAG = 4.5
 const ICON_SIZE = '0.7em'
 const NOTE = 'WCAG guidelines recommend a minimum contrast ratio of 4.5:1'
 
-export const Contrast: React.FC<ContrastProps> = ({
+export const Contrast: FC<ContrastProps> = ({
 	foreground,
 	background,
 	error,

packages/webapp/src/components/ColorPalette/index.tsx

@@ -17,7 +17,7 @@ import { mark2style, useThematic } from '@thematic/react'
 const BAND_SLICES = 100
 const BAND_WIDTH = 720
 
-interface ColorPaletteProps {
+export interface ColorPaletteProps {
 	scaleItemCount: number
 }
 

packages/webapp/src/components/ColorStrip/index.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { CSSProperties } from 'react'
+import { CSSProperties, FC } from 'react'
 
 import './index.css'
 
@@ -18,7 +18,7 @@ interface ColorBlockProps extends ColorDefinition {
 	labelStyle?: CSSProperties
 }
 
-interface ColorStripProps {
+export interface ColorStripProps {
 	colorDefinitions: any[]
 	vertical?: boolean
 	swatchStyle?: CSSProperties
@@ -57,7 +57,7 @@ const ColorBlock = ({
 	)
 }
 
-export const ColorStrip: React.FC<ColorStripProps> = ({
+export const ColorStrip: FC<ColorStripProps> = ({
 	colorDefinitions,
 	vertical,
 	swatchStyle,

packages/webapp/src/components/ControlPanel/ControlPanel.tsx

@@ -9,7 +9,7 @@ import {
 	SpinButton,
 	Position,
 } from '@fluentui/react'
-import { useState, useCallback } from 'react'
+import { useState, useCallback, FC } from 'react'
 import { EnumDropdown } from '../EnumDropdown'
 import { ColorBlindnessMode, colorBlindnessInfo } from '@thematic/color'
 import { ThemeListing, Theme } from '@thematic/core'
@@ -38,7 +38,7 @@ export interface ControlPanelProps {
 const SCALE_MIN = 1
 const SCALE_MAX = 1000
 
-export const ControlPanel: React.FC<ControlPanelProps> = ({
+export const ControlPanel: FC<ControlPanelProps> = ({
 	themes,
 	themeInfo,
 	chartSize,
@@ -99,18 +99,20 @@ export const ControlPanel: React.FC<ControlPanelProps> = ({
 		},
 		[onScaleItemCountChange],
 	)
-	const handleScaleValidate = useCallback((v: string) => changeValue(v), [
-		changeValue,
-	])
+	const handleScaleValidate = useCallback(
+		(v: string) => changeValue(v),
+		[changeValue],
+	)
 	const handleScaleIncrement = useCallback(
 		v => {
 			changeValue(v, 1)
 		},
 		[changeValue],
 	)
-	const handleScaleDecrement = useCallback(v => changeValue(v, -1), [
-		changeValue,
-	])
+	const handleScaleDecrement = useCallback(
+		v => changeValue(v, -1),
+		[changeValue],
+	)
 
 	const handleColorBlindnessChange = (e: ColorBlindnessMode) => {
 		onColorBlindnessModeChange(e)

packages/webapp/src/components/CoolerPicker/ColorSelection.tsx

@@ -4,6 +4,7 @@
  */
 import { Theme } from '@thematic/core'
 import { ColorPicker, ColorPickerLayout } from '@thematic/fluent'
+import { FC } from 'react'
 
 import './index.css'
 
@@ -11,9 +12,7 @@ export interface ColorSelectionProps {
 	onThemeLoaded: (theme: Theme) => void
 }
 
-export const ColorSelection: React.FC<ColorSelectionProps> = ({
-	onThemeLoaded,
-}) => {
+export const ColorSelection: FC<ColorSelectionProps> = ({ onThemeLoaded }) => {
 	return (
 		<div className="color-controls-area">
 			<ColorPicker

packages/webapp/src/components/CoolerPicker/index.tsx

@@ -7,14 +7,13 @@ import { themeLoaded } from '../../state/actions'
 import { ColorSelection } from './ColorSelection'
 import { Theme } from '@thematic/core'
 import './index.css'
+import { FC } from 'react'
 
 export interface CoolerPickerProps {
 	themeLoaded: (theme: Theme) => void
 }
 
-const CoolerPickerComponent: React.FC<CoolerPickerProps> = ({
-	themeLoaded,
-}) => {
+const CoolerPickerComponent: FC<CoolerPickerProps> = ({ themeLoaded }) => {
 	return (
 		<div className="cooler-picker">
 			<ColorSelection onThemeLoaded={themeLoaded} />

packages/webapp/src/components/EnumButtonBar/index.tsx

@@ -13,12 +13,12 @@ import {
 import { useCallback, useMemo } from 'react'
 import { useThematic } from '@thematic/react'
 
-interface WrapperStyles {
+export interface WrapperStyles {
 	root: React.CSSProperties
 	label: React.CSSProperties
 }
 
-interface EnumButtonBarProps<E> {
+export interface EnumButtonBarProps<E> {
 	enumeration: any
 	selected?: E
 	onChange?: (selected: string | number) => void

packages/webapp/src/components/FluentControls/index.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { useState, useCallback, useMemo } from 'react'
+import { useState, useCallback, useMemo, FC } from 'react'
 import { connect } from 'react-redux'
 import { themeLoaded } from '../../state/actions'
 import { ScaleType, Theme } from '@thematic/core'
@@ -14,11 +14,11 @@ import {
 } from '@thematic/fluent'
 import { useThematic } from '@thematic/react'
 
-interface FluentControlsComponentProps {
+export interface FluentControlsComponentProps {
 	themeLoaded: (theme: Theme) => void
 }
 
-const FluentControlsComponent: React.FC<FluentControlsComponentProps> = ({
+const FluentControlsComponent: FC<FluentControlsComponentProps> = ({
 	themeLoaded,
 }) => {
 	const theme = useThematic()

packages/webapp/src/components/FluentViewer/FluentPalette.tsx

@@ -6,7 +6,7 @@ import { FC } from 'react'
 import { ColorStrip } from '../ColorStrip'
 import { FluentTheme } from '@thematic/fluent'
 
-interface FluentPaletteProps {
+export interface FluentPaletteProps {
 	theme: FluentTheme
 }
 

packages/webapp/src/components/FluentViewer/index.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { useMemo } from 'react'
+import { FC, useMemo } from 'react'
 import { DownloadLink } from '../DownloadLink'
 import { FluentPalette } from './FluentPalette'
 import { loadFluentTheme } from '@thematic/fluent'
@@ -12,12 +12,13 @@ import { useThematic } from '@thematic/react'
  * This component hosts the Fluent Theme slots in the style of Thematic.
  * A running version can be found here: https://aka.ms/themedesigner
  */
-export const FluentViewer: React.FC = () => {
+export const FluentViewer: FC = () => {
 	const theme = useThematic()
 	const fluentTheme = useMemo(() => loadFluentTheme(theme), [theme])
-	const value = useMemo(() => JSON.stringify(fluentTheme.toJSON(), null, 2), [
-		fluentTheme,
-	])
+	const value = useMemo(
+		() => JSON.stringify(fluentTheme.toJSON(), null, 2),
+		[fluentTheme],
+	)
 	return (
 		<div>
 			<FluentPalette theme={fluentTheme} />

packages/webapp/src/components/GIMP/index.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 import { TextField } from '@fluentui/react'
-import { useMemo } from 'react'
+import { FC, useMemo } from 'react'
 import { DownloadLink } from '../DownloadLink'
 import { gimp } from '@thematic/core'
 import { useThematic } from '@thematic/react'
@@ -25,7 +25,7 @@ const styles = {
 		fontSize: 11,
 	},
 }
-export const GimpEditor: React.FC = () => {
+export const GimpEditor: FC = () => {
 	const theme = useThematic()
 	const value: string = useMemo(() => theme.transform(gimp) as string, [theme])
 	return (

packages/webapp/src/components/JSON/index.tsx

@@ -2,22 +2,22 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { useMemo } from 'react'
+import { FC, useMemo } from 'react'
 import { connect } from 'react-redux'
 import { DownloadLink } from '../DownloadLink'
 import { JSONEditor } from '../JSONEditor'
 import { useThematic } from '@thematic/react'
 
-interface JSONPaneProps {
+export interface JSONPaneProps {
 	scaleItemCount?: number
 }
 
-const JSONPaneComponent: React.FC<JSONPaneProps> = ({ scaleItemCount }) => {
+const JSONPaneComponent: FC<JSONPaneProps> = ({ scaleItemCount }) => {
 	const theme = useThematic()
-	const value = useMemo(() => theme.toJSON({ scaleItemCount }), [
-		theme,
-		scaleItemCount,
-	])
+	const value = useMemo(
+		() => theme.toJSON({ scaleItemCount }),
+		[theme, scaleItemCount],
+	)
 	return (
 		<div style={{ width: '100%', height: '90%' }}>
 			<JSONEditor value={value} />

packages/webapp/src/components/JSONEditor/index.tsx

@@ -5,7 +5,7 @@
 import { TextField } from '@fluentui/react'
 import { FC } from 'react'
 
-interface JSONEditorProps {
+export interface JSONEditorProps {
 	value: any
 }
 

packages/webapp/src/components/MarkGrid/GridCell.tsx

@@ -7,7 +7,7 @@ import { Rect, Circle, Line, Arc, Text } from '../svg'
 import { SelectionState } from '@thematic/core'
 import { useThematic, mark2style } from '@thematic/react'
 
-interface GridCellProps {
+export interface GridCellProps {
 	name: string
 	size: number
 	selectionState?: SelectionState

packages/webapp/src/components/MarkGrid/index.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { useState, useCallback, useMemo } from 'react'
+import { useState, useCallback, useMemo, FC } from 'react'
 import { EnumButtonBar } from '../EnumButtonBar'
 import { GridCell } from './GridCell'
 
@@ -35,7 +35,7 @@ const chromeKeys = [
 	'tooltip',
 ]
 
-export const MarkGrid: React.FC = () => {
+export const MarkGrid: FC = () => {
 	const theme = useThematic()
 	const [selectionState, setSelectionState] = useState<SelectionState>(
 		SelectionState.Normal,

packages/webapp/src/components/Office/OfficePalette.tsx

@@ -6,7 +6,7 @@ import { FC } from 'react'
 import { ColorStrip } from '../ColorStrip'
 import { useThematic } from '@thematic/react'
 
-interface OfficePaletteProps {
+export interface OfficePaletteProps {
 	colors: any
 }
 

packages/webapp/src/components/Office/index.tsx

@@ -2,12 +2,12 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { useMemo } from 'react'
+import { FC, useMemo } from 'react'
 import { DownloadLink } from '../DownloadLink'
 import { OfficePalette } from './OfficePalette'
 import { office } from '@thematic/core'
 import { useThematic } from '@thematic/react'
-export const Office: React.FC = () => {
+export const Office: FC = () => {
 	const theme = useThematic()
 	const ofc = useMemo(() => theme.transform(office), [theme])
 	const str = useMemo(() => JSON.stringify(ofc, null, 2), [ofc])

packages/webapp/src/components/PowerBI/PowerBIPalette.tsx

@@ -6,7 +6,7 @@ import { FC } from 'react'
 import { ColorStrip } from '../ColorStrip'
 import { useThematic } from '@thematic/react'
 
-interface PowerBIPaletteProps {
+export interface PowerBIPaletteProps {
 	colors: any
 }
 

packages/webapp/src/components/PowerBI/index.tsx

@@ -2,13 +2,13 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import { useMemo } from 'react'
+import { FC, useMemo } from 'react'
 import { DownloadLink } from '../DownloadLink'
 import { PowerBIPalette } from './PowerBIPalette'
 import { powerbi } from '@thematic/core'
 import { useThematic } from '@thematic/react'
 
-export const PowerBiEditor: React.FC = () => {
+export const PowerBiEditor: FC = () => {
 	const theme = useThematic()
 	const pbi = useMemo(() => theme.transform(powerbi), [theme])
 	const str = useMemo(() => JSON.stringify(pbi, null, 2), [pbi])

packages/webapp/src/components/charts/D3/index.tsx

@@ -5,12 +5,12 @@
 import { axisLeft, axisBottom } from 'd3-axis'
 import { scaleLinear } from 'd3-scale'
 import { select, Selection } from 'd3-selection'
-import { useLayoutEffect, useRef, useState, useMemo } from 'react'
+import { useLayoutEffect, useRef, useState, useMemo, FC } from 'react'
 import { SelectionState } from '@thematic/core'
 import { chart, plotArea, axis, circle } from '@thematic/d3'
 import { useThematic } from '@thematic/react'
 
-interface ChartProps {
+export interface ChartProps {
 	width?: number
 	height?: number
 }
@@ -25,18 +25,14 @@ const DATA_LENGTH = 20
 /**
  * Simple chart using raw d3, intended to show how scale bindings work
  */
-export const D3Chart: React.FC<ChartProps> = ({
-	width = 800,
-	height = 600,
-}) => {
+export const D3Chart: FC<ChartProps> = ({ width = 800, height = 600 }) => {
 	const theme = useThematic()
 	const ref = useRef(null)
 
 	const [svg, setSvg] = useState<Selection<SVGElement, any, SVGElement, any>>()
 
-	const [plot, setPlot] = useState<
-		Selection<SVGGElement, any, SVGGElement, any>
-	>()
+	const [plot, setPlot] =
+		useState<Selection<SVGGElement, any, SVGGElement, any>>()
 
 	// random data for scatterplot
 	// TODO: load in a meaningful dataset to demonstrate the scatterplot better?
@@ -51,9 +47,10 @@ export const D3Chart: React.FC<ChartProps> = ({
 	const plotHeight = useMemo(() => height - MARGIN * 2, [height])
 	const plotWidth = useMemo(() => width - MARGIN * 2 - LEGEND_WIDTH, [width])
 	const xScale = useMemo(() => scaleLinear().range([0, plotWidth]), [plotWidth])
-	const yScale = useMemo(() => scaleLinear().range([plotHeight, 0]), [
-		plotHeight,
-	])
+	const yScale = useMemo(
+		() => scaleLinear().range([plotHeight, 0]),
+		[plotHeight],
+	)
 	const cxScale = useMemo(
 		() => scaleLinear().range([MAX_RADIUS, plotWidth - MAX_RADIUS]),
 		[plotWidth],

packages/webapp/src/components/charts/Vega/index.tsx

@@ -3,7 +3,7 @@
  * Licensed under the MIT license. See LICENSE file in the project.
  */
 /* eslint-disable @typescript-eslint/no-var-requires */
-import { memo, useLayoutEffect, useRef, useMemo } from 'react'
+import { memo, useLayoutEffect, useRef, useMemo, FC } from 'react'
 
 import { useThematic } from '@thematic/react'
 import { vega as decorator } from '@thematic/vega'
@@ -27,13 +27,13 @@ const specs = charts.reduce((acc, cur) => {
 	return acc
 }, {})
 
-interface VegaChartProps {
+export interface VegaChartProps {
 	type: string
 	width?: number
 	height?: number
 }
 
-export const VegaChart: React.FC<VegaChartProps> = memo(function VegaChart({
+export const VegaChart: FC<VegaChartProps> = memo(function VegaChart({
 	type,
 	width = 800,
 	height = 600,

packages/webapp/src/components/graphs/D3/index.tsx

@@ -10,6 +10,7 @@ import {
 	useRef,
 	useEffect,
 	useCallback,
+	FC,
 } from 'react'
 import { Graph, Node, Edge } from '../../../interfaces'
 import { bounds } from '../../../util/graph'
@@ -24,7 +25,7 @@ import {
 } from '@thematic/d3'
 import { useThematic } from '@thematic/react'
 
-interface GraphProps {
+export interface GraphProps {
 	graph: Graph
 	width?: number
 	height?: number
@@ -34,7 +35,7 @@ interface GraphProps {
 	sequentialFill?: boolean
 }
 
-export const D3Graph: React.FC<GraphProps> = ({
+export const D3Graph: FC<GraphProps> = ({
 	graph,
 	width = 800,
 	height = 600,

packages/webapp/src/components/svg/index.tsx

@@ -4,12 +4,12 @@
  */
 import { FC, ReactNode } from 'react'
 
-interface MarkProps {
+export interface MarkProps {
 	children: ReactNode
 	size: number
 }
 
-interface ThemedMarkProps {
+export interface ThemedMarkProps {
 	config: any
 	size: number
 }

packages/webapp/src/react-app-env.d.ts

@@ -43,7 +43,7 @@ declare module '*.webp' {
 declare module '*.svg' {
 	import * as React from 'react'
 
-	export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>
+	export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>
 
 	const src: string
 	export default src