From 352db08338891da5e68065d3543ab9caf5a4426e Mon Sep 17 00:00:00 2001 From: Nathan Evans Date: Thu, 5 May 2022 17:04:44 -0700 Subject: [PATCH] Reorganize packages internally a bit --- packages/color/README.md | 2 +- packages/color/src/chroma.ts | 2 +- packages/color/src/colorBlindness.ts | 4 +- packages/color/src/index.ts | 2 +- packages/color/src/scheme/HsluvColorLogic.ts | 2 +- .../color/src/scheme/getNamedSchemeColor.ts | 2 +- .../color/src/{interfaces.ts => types.ts} | 0 packages/core/docs/core.api.md | 5 +++ packages/core/src/index.ts | 1 + packages/core/src/utils.ts | 43 +++++++++++++++++++ .../{ColorPicker => }/ColorPicker.tsx | 2 +- .../src/components/ColorPicker/index.tsx | 5 --- .../ColorPickerButton.tsx | 4 +- .../components/ColorPickerButton/index.tsx | 5 --- .../components/ScaleDropdown/ColorChips.tsx | 2 +- .../ScaleDropdown/ContinuousBand.tsx | 2 +- .../ScaleDropdown/ScaleDropdown.tsx | 2 +- .../{types.ts => ScaleDropdown.types.ts} | 0 .../{util.ts => ScaleDropdown.utils.ts} | 2 +- .../ScaleDropdown/ScaleDropdownItem.tsx | 2 +- .../components/ScaleDropdown/hooks/theme.ts | 5 ++- .../ScaleDropdown/{index.tsx => index.ts} | 0 .../index.tsx => ScaleTypeChoiceGroup.tsx} | 0 packages/fluent/src/components/index.ts | 6 +-- packages/react/src/styles.ts | 1 - 25 files changed, 70 insertions(+), 31 deletions(-) rename packages/color/src/{interfaces.ts => types.ts} (100%) create mode 100644 packages/core/src/utils.ts rename packages/fluent/src/components/{ColorPicker => }/ColorPicker.tsx (98%) delete mode 100644 packages/fluent/src/components/ColorPicker/index.tsx rename packages/fluent/src/components/{ColorPickerButton => }/ColorPickerButton.tsx (94%) delete mode 100644 packages/fluent/src/components/ColorPickerButton/index.tsx rename packages/fluent/src/components/ScaleDropdown/{types.ts => ScaleDropdown.types.ts} (100%) rename packages/fluent/src/components/ScaleDropdown/{util.ts => ScaleDropdown.utils.ts} (95%) rename packages/fluent/src/components/ScaleDropdown/{index.tsx => index.ts} (100%) rename packages/fluent/src/components/{ScaleTypeChoiceGroup/index.tsx => ScaleTypeChoiceGroup.tsx} (100%) diff --git a/packages/color/README.md b/packages/color/README.md index cda5b77..1e51878 100644 --- a/packages/color/README.md +++ b/packages/color/README.md @@ -2,7 +2,7 @@ Contains color transforms and helpers, as well as the core color compute logic t ## Schemes -A Thematic [Scheme](src/interfaces.ts) is the core color definition derived from a set of input parameters. +A Thematic [Scheme](src/types.ts) is the core color definition derived from a set of input parameters. The idea here is that users can submit basic color parameters such as an accent color and some preferences about contrast, and get back a core set of semantic colors for the theme, along with a basic set of scales. diff --git a/packages/color/src/chroma.ts b/packages/color/src/chroma.ts index 9fdae63..3a4886e 100644 --- a/packages/color/src/chroma.ts +++ b/packages/color/src/chroma.ts @@ -6,7 +6,7 @@ import chroma from 'chroma-js' import hsluv from 'hsluv' -import type { Hsl, Hsv, Rgb, Rgba } from './interfaces.js' +import type { Hsl, Hsv, Rgb, Rgba } from './types.js' const { hexToHsluv, hsluvToHex } = hsluv diff --git a/packages/color/src/colorBlindness.ts b/packages/color/src/colorBlindness.ts index 5336594..e951413 100644 --- a/packages/color/src/colorBlindness.ts +++ b/packages/color/src/colorBlindness.ts @@ -6,8 +6,8 @@ // @ts-ignore import cb from 'color-blind' -import type { ColorBlindnessMeta, Scheme } from './interfaces.js' -import { ColorBlindnessMode } from './interfaces.js' +import type { ColorBlindnessMeta, Scheme } from './types.js' +import { ColorBlindnessMode } from './types.js' const noop = (color: string) => color diff --git a/packages/color/src/index.ts b/packages/color/src/index.ts index f758b10..c09f9a3 100644 --- a/packages/color/src/index.ts +++ b/packages/color/src/index.ts @@ -5,8 +5,8 @@ export * from './chroma.js' export * from './Color.js' export * from './colorBlindness.js' -export * from './interfaces.js' export * from './scheme.js' +export * from './types.js' // TODO: best would be to update the scheme compute to accept undefined or baseline params and handle an "empty" case, which is maybe grayscale export const defaultParams = { diff --git a/packages/color/src/scheme/HsluvColorLogic.ts b/packages/color/src/scheme/HsluvColorLogic.ts index 0478287..0dc2b5e 100644 --- a/packages/color/src/scheme/HsluvColorLogic.ts +++ b/packages/color/src/scheme/HsluvColorLogic.ts @@ -5,7 +5,7 @@ import chroma from 'chroma-js' import hsluv from 'hsluv' -import type { Params, Scheme } from '../interfaces' +import type { Params, Scheme } from '../types' const lightTextLuminance = 95 const darkTextLuminance = 20 diff --git a/packages/color/src/scheme/getNamedSchemeColor.ts b/packages/color/src/scheme/getNamedSchemeColor.ts index 027eac2..d952a16 100644 --- a/packages/color/src/scheme/getNamedSchemeColor.ts +++ b/packages/color/src/scheme/getNamedSchemeColor.ts @@ -4,7 +4,7 @@ */ import { Color } from '../Color.js' -import type { Scheme } from '../interfaces.js' +import type { Scheme } from '../types.js' /** * Extracts a thematic Color using its scheme "path". diff --git a/packages/color/src/interfaces.ts b/packages/color/src/types.ts similarity index 100% rename from packages/color/src/interfaces.ts rename to packages/color/src/types.ts diff --git a/packages/core/docs/core.api.md b/packages/core/docs/core.api.md index aadc93b..254eac3 100644 --- a/packages/core/docs/core.api.md +++ b/packages/core/docs/core.api.md @@ -175,6 +175,11 @@ export interface ChartSpec { padding?: number; } +// Warning: (ae-missing-release-tag) "chooseScale" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public +export function chooseScale(theme: Theme, name: string, width: number): NominalColorScaleFunction | ContinuousColorScaleFunction; + // Warning: (ae-missing-release-tag) "ChromeFunction" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 11a98cc..615587c 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -7,3 +7,4 @@ export * from './loader.js' export * from './scales.js' export { Theme as ThemeImpl } from './Theme.js' export * from './types/index.js' +export * from './utils.js' diff --git a/packages/core/src/utils.ts b/packages/core/src/utils.ts new file mode 100644 index 0000000..7c10e55 --- /dev/null +++ b/packages/core/src/utils.ts @@ -0,0 +1,43 @@ +/*! + * Copyright (c) Microsoft. All rights reserved. + * Licensed under the MIT license. See LICENSE file in the project. + */ +import type { + ContinuousColorScaleFunction, + NominalColorScaleFunction, + Theme, +} from './types/Theme.js' + +/** + * Returns a standard scale instance based on name and planned width. + * @param theme + * @param name + * @param width + */ +export function chooseScale( + theme: Theme, + name: string, + width: number, +): NominalColorScaleFunction | ContinuousColorScaleFunction { + const scales = theme.scales() + const domain = [0, width] + switch (name) { + case 'sequential': + return scales.sequential(domain) + case 'sequential2': + return scales.sequential2(domain) + case 'diverging': + return scales.diverging(domain) + case 'diverging2': + return scales.diverging2(domain) + case 'greys': + return scales.greys(domain) + case 'nominalMuted': + return scales.nominalMuted() + case 'nominalBold': + return scales.nominalBold() + case 'nominal': + default: + return scales.nominal() + } +} diff --git a/packages/fluent/src/components/ColorPicker/ColorPicker.tsx b/packages/fluent/src/components/ColorPicker.tsx similarity index 98% rename from packages/fluent/src/components/ColorPicker/ColorPicker.tsx rename to packages/fluent/src/components/ColorPicker.tsx index bdf4acb..4cc47b1 100644 --- a/packages/fluent/src/components/ColorPicker/ColorPicker.tsx +++ b/packages/fluent/src/components/ColorPicker.tsx @@ -10,7 +10,7 @@ import type { Theme } from '@thematic/core' import type { CSSProperties, FC } from 'react' import { useCallback, useMemo } from 'react' -import { useThematicFluent } from '../../provider/index.js' +import { useThematicFluent } from '../provider/index.js' export enum ColorPickerLayout { PickerOnly, diff --git a/packages/fluent/src/components/ColorPicker/index.tsx b/packages/fluent/src/components/ColorPicker/index.tsx deleted file mode 100644 index 82e498e..0000000 --- a/packages/fluent/src/components/ColorPicker/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -/*! - * Copyright (c) Microsoft. All rights reserved. - * Licensed under the MIT license. See LICENSE file in the project. - */ -export * from './ColorPicker.js' diff --git a/packages/fluent/src/components/ColorPickerButton/ColorPickerButton.tsx b/packages/fluent/src/components/ColorPickerButton.tsx similarity index 94% rename from packages/fluent/src/components/ColorPickerButton/ColorPickerButton.tsx rename to packages/fluent/src/components/ColorPickerButton.tsx index 1c81f05..145c782 100644 --- a/packages/fluent/src/components/ColorPickerButton/ColorPickerButton.tsx +++ b/packages/fluent/src/components/ColorPickerButton.tsx @@ -7,8 +7,8 @@ import type { Theme } from '@thematic/core' import type { CSSProperties, FC } from 'react' import { memo, useCallback, useMemo } from 'react' -import { useThematicFluent } from '../../provider/index.js' -import { ColorPicker } from '../ColorPicker/index.js' +import { useThematicFluent } from '../provider/index.js' +import { ColorPicker } from './ColorPicker.js' export interface ColorPickerButtonStyles { label?: CSSProperties diff --git a/packages/fluent/src/components/ColorPickerButton/index.tsx b/packages/fluent/src/components/ColorPickerButton/index.tsx deleted file mode 100644 index 20e8c24..0000000 --- a/packages/fluent/src/components/ColorPickerButton/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -/*! - * Copyright (c) Microsoft. All rights reserved. - * Licensed under the MIT license. See LICENSE file in the project. - */ -export * from './ColorPickerButton.js' diff --git a/packages/fluent/src/components/ScaleDropdown/ColorChips.tsx b/packages/fluent/src/components/ScaleDropdown/ColorChips.tsx index 32eb95c..26fbc7e 100644 --- a/packages/fluent/src/components/ScaleDropdown/ColorChips.tsx +++ b/packages/fluent/src/components/ScaleDropdown/ColorChips.tsx @@ -6,7 +6,7 @@ import { scaleLinear } from 'd3-scale' import type { FC } from 'react' import { useMemo } from 'react' -import type { ChipsProps } from './types.js' +import type { ChipsProps } from './ScaleDropdown.types.js' export const ColorChips: FC = ({ scale, diff --git a/packages/fluent/src/components/ScaleDropdown/ContinuousBand.tsx b/packages/fluent/src/components/ScaleDropdown/ContinuousBand.tsx index d46ac0d..847004c 100644 --- a/packages/fluent/src/components/ScaleDropdown/ContinuousBand.tsx +++ b/packages/fluent/src/components/ScaleDropdown/ContinuousBand.tsx @@ -5,7 +5,7 @@ import type { CSSProperties, FC } from 'react' import { useMemo } from 'react' -import type { ChipsProps } from './types.js' +import type { ChipsProps } from './ScaleDropdown.types.js' export const ContinuousBand: FC = ({ scale, width, height }) => { const style: CSSProperties = useMemo( diff --git a/packages/fluent/src/components/ScaleDropdown/ScaleDropdown.tsx b/packages/fluent/src/components/ScaleDropdown/ScaleDropdown.tsx index e35f992..c9353c7 100644 --- a/packages/fluent/src/components/ScaleDropdown/ScaleDropdown.tsx +++ b/packages/fluent/src/components/ScaleDropdown/ScaleDropdown.tsx @@ -15,8 +15,8 @@ import { useThematicScaleOptions, } from './hooks/theme.js' import { useSafeDimensions } from './hooks/useSafeDimensions.js' +import type { ScaleDropdownProps } from './ScaleDropdown.types.js' import { ScaleDropdownItem } from './ScaleDropdownItem.js' -import type { ScaleDropdownProps } from './types.js' /** * Represents a Fluent dropdown of Thematic scale options. diff --git a/packages/fluent/src/components/ScaleDropdown/types.ts b/packages/fluent/src/components/ScaleDropdown/ScaleDropdown.types.ts similarity index 100% rename from packages/fluent/src/components/ScaleDropdown/types.ts rename to packages/fluent/src/components/ScaleDropdown/ScaleDropdown.types.ts diff --git a/packages/fluent/src/components/ScaleDropdown/util.ts b/packages/fluent/src/components/ScaleDropdown/ScaleDropdown.utils.ts similarity index 95% rename from packages/fluent/src/components/ScaleDropdown/util.ts rename to packages/fluent/src/components/ScaleDropdown/ScaleDropdown.utils.ts index cece766..ebc222d 100644 --- a/packages/fluent/src/components/ScaleDropdown/util.ts +++ b/packages/fluent/src/components/ScaleDropdown/ScaleDropdown.utils.ts @@ -11,7 +11,7 @@ import type { FC } from 'react' import { ColorChips } from './ColorChips.js' import { ContinuousBand } from './ContinuousBand.js' -import type { ChipsProps } from './types.js' +import type { ChipsProps } from './ScaleDropdown.types.js' export function chooseScale( theme: Theme, diff --git a/packages/fluent/src/components/ScaleDropdown/ScaleDropdownItem.tsx b/packages/fluent/src/components/ScaleDropdown/ScaleDropdownItem.tsx index d39f3cf..1973455 100644 --- a/packages/fluent/src/components/ScaleDropdown/ScaleDropdownItem.tsx +++ b/packages/fluent/src/components/ScaleDropdown/ScaleDropdownItem.tsx @@ -7,7 +7,7 @@ import { useMemo } from 'react' import { TEXT_WIDTH, usePaletteComponent, useScale } from './hooks/theme.js' import { useSafeCollapseDimensions } from './hooks/useSafeDimensions.js' -import type { ScaleDropdownItemProps } from './types.js' +import type { ScaleDropdownItemProps } from './ScaleDropdown.types.js' export const ScaleDropdownItem: FC = ({ option, diff --git a/packages/fluent/src/components/ScaleDropdown/hooks/theme.ts b/packages/fluent/src/components/ScaleDropdown/hooks/theme.ts index 8a94b68..3a5f099 100644 --- a/packages/fluent/src/components/ScaleDropdown/hooks/theme.ts +++ b/packages/fluent/src/components/ScaleDropdown/hooks/theme.ts @@ -7,12 +7,13 @@ import type { ContinuousColorScaleFunction, NominalColorScaleFunction, } from '@thematic/core' +import { chooseScale } from '@thematic/core' import type React from 'react' import { useMemo } from 'react' import { useThematicFluent } from '../../../provider/index.js' -import type { ChipsProps } from '../types.js' -import { chooseScale, selectColorPalette } from '../util.js' +import type { ChipsProps } from '../ScaleDropdown.types.js' +import { selectColorPalette } from '../ScaleDropdown.utils.js' const ITEM_LEFT_PADDING = 8 // default right padding in fluent item const ITEM_BORDER_MODIFIER = 1 // accounts for transparent border on outer container diff --git a/packages/fluent/src/components/ScaleDropdown/index.tsx b/packages/fluent/src/components/ScaleDropdown/index.ts similarity index 100% rename from packages/fluent/src/components/ScaleDropdown/index.tsx rename to packages/fluent/src/components/ScaleDropdown/index.ts diff --git a/packages/fluent/src/components/ScaleTypeChoiceGroup/index.tsx b/packages/fluent/src/components/ScaleTypeChoiceGroup.tsx similarity index 100% rename from packages/fluent/src/components/ScaleTypeChoiceGroup/index.tsx rename to packages/fluent/src/components/ScaleTypeChoiceGroup.tsx diff --git a/packages/fluent/src/components/index.ts b/packages/fluent/src/components/index.ts index c47b113..a4de18b 100644 --- a/packages/fluent/src/components/index.ts +++ b/packages/fluent/src/components/index.ts @@ -2,7 +2,7 @@ * Copyright (c) Microsoft. All rights reserved. * Licensed under the MIT license. See LICENSE file in the project. */ -export * from './ColorPicker/index.js' -export * from './ColorPickerButton/index.js' +export * from './ColorPicker.js' +export * from './ColorPickerButton.js' export * from './ScaleDropdown/index.js' -export * from './ScaleTypeChoiceGroup/index.js' +export * from './ScaleTypeChoiceGroup.js' diff --git a/packages/react/src/styles.ts b/packages/react/src/styles.ts index f4a5975..af7403a 100644 --- a/packages/react/src/styles.ts +++ b/packages/react/src/styles.ts @@ -14,7 +14,6 @@ import type { CSSProperties } from 'react' * @param config - the mark configuration * @param datum - optional data item if the theme has been configured with underlying scales. */ -// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types export function mark2style(config: SVGMark, datum?: any): CSSProperties { return { backgroundColor: css2css(