Merge pull request #43 from microsoft/feat/esm

Upgrade to essex-scripts 20 with ESM support
This commit is contained in:
Chris Trevino 2022-02-09 14:51:59 -08:00 коммит произвёл GitHub
Родитель e99e01e8be 9bd987f172
Коммит 562a894d35
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
116 изменённых файлов: 1561 добавлений и 2890 удалений

8
.yarn/versions/a0e97755.yml поставляемый Normal file
Просмотреть файл

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

Просмотреть файл

@ -1,11 +0,0 @@
/*!
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
module.exports = {
presets: [
['@babel/preset-env', { targets: { node: 'current' } }],
'@babel/preset-typescript',
['@babel/preset-react', { runtime: 'automatic' }],
],
}

Просмотреть файл

@ -5,19 +5,18 @@
"scripts": {
"preinstall": "npx only-allow yarn",
"postinstall": "husky install",
"clean:": "yarn workspaces foreach -pv run clean",
"bundle:": "yarn workspaces foreach -pv run bundle",
"build:": "yarn workspaces foreach -piv run build",
"start:": "yarn workspaces foreach -piv run start",
"publish:": "yarn workspaces foreach --exclude '@thematic/root' -pv npm publish --tolerate-republish --access public",
"version:": "yarn workspaces foreach --exclude '@thematic/root' -iv version -d",
"lint:": "essex lint --fix --strict",
"clean": "yarn workspaces foreach -pv run clean",
"bundle": "yarn workspaces foreach -pv run bundle",
"build": "yarn workspaces foreach -pivt run build",
"start": "yarn workspaces foreach -piv run start",
"publish": "yarn workspaces foreach --exclude '@thematic/root' -pv npm publish --tolerate-republish --access public",
"version": "yarn workspaces foreach --exclude '@thematic/root' -iv version -d",
"lint": "essex lint --fix --strict",
"prettify:": "essex prettify",
"test:": "jest",
"test:ci": "jest --coverage",
"jest_coverage": "jest --coverage",
"git-is-clean": "essex git-is-clean",
"ci": "run-s lint: build: bundle: test:ci git-is-clean",
"release": "run-s clean: build: publish:"
"ci": "run-s lint build bundle jest_coverage git-is-clean",
"release": "run-s clean build publish"
},
"workspaces": {
"packages": [
@ -25,31 +24,26 @@
]
},
"devDependencies": {
"@babel/core": "^7.16.0",
"@babel/preset-env": "^7.16.4",
"@babel/preset-react": "^7.16.0",
"@babel/preset-typescript": "^7.16.0",
"@essex/eslint-config": "^19.0.1",
"@essex/eslint-plugin": "^19.0.1",
"@essex/jest-config": "^19.0.1",
"@essex/eslint-config": "^20.0.0",
"@essex/eslint-plugin": "^20.0.0",
"@essex/jest-config": "^20.0.0",
"@essex/prettier-config": "^18.0.2",
"@essex/scripts": "^19.0.5",
"@essex/scripts": "^20.0.1",
"@types/eslint": "^8",
"@types/jest": "^26.0.24",
"@types/node": "^14.18.5",
"@types/prettier": "^2.4.2",
"@typescript-eslint/eslint-plugin": "^5.9.0",
"@typescript-eslint/parser": "^5.9.0",
"@typescript-eslint/eslint-plugin": "^5.11.0",
"@typescript-eslint/parser": "^5.11.0",
"eslint": "^8.6.0",
"eslint-import-resolver-node": "^0.3.6",
"husky": "^6.0.0",
"jest": "^27.4.7",
"jest": "^27.5.1",
"lint-staged": "^11.2.6",
"npm-run-all": "^4.1.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"regenerator-runtime": "^0.13.9",
"ts-jest": "^27.1.2",
"typescript": "^4.5.5"
},
"prettier": "@essex/prettier-config"

Просмотреть файл

@ -2,11 +2,12 @@
"name": "@thematic/color",
"version": "1.3.3",
"license": "MIT",
"main": "src/index.ts",
"publishConfig": {
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
"types": "dist/types/index.d.ts"
"main": "dist/cjs/index.js",
"types": "dist/types/index.d.ts",
"exports": {
"import": "./dist/esm/index.mjs",
"require": "./dist/cjs/index.js",
"types": "./dist/types/index.d.ts"
},
"repository": {
"type": "git",
@ -24,7 +25,8 @@
"hsluv": "^0.1.0"
},
"devDependencies": {
"@essex/scripts": "^19.0.5",
"@essex/scripts": "^20.0.1",
"@essex/tsconfig-base": "^1.0.1",
"@types/chroma-js": "^2.1.3",
"@types/node": "^14.18.5"
},

Просмотреть файл

@ -2,7 +2,7 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { css2rgbaVector, css2rgbaNumber, css2css, css2hex } from './chroma'
import { css2rgbaVector, css2rgbaNumber, css2css, css2hex } from './chroma.js'
/**
* This class represents an instance of a color.

Просмотреть файл

@ -3,9 +3,12 @@
* Licensed under the MIT license. See LICENSE file in the project.
*/
import chroma, { contrast as chromaContrast } from 'chroma-js'
import { hexToHsluv, hsluvToHex } from 'hsluv'
import { Rgb, Rgba, Hsv, Hsl } from './interfaces'
import chroma from 'chroma-js'
import hsluv from 'hsluv'
import type { Rgb, Rgba, Hsv, Hsl } from './interfaces.js'
const { contrast: chromaContrast } = chroma
const { hexToHsluv, hsluvToHex } = hsluv
/**
* This is a variety of color utilities to minimize additional direct dependencies
@ -76,7 +79,7 @@ export function contrast(foreground: string, background: string): number {
* @param css
* @param alpha Included for compatibility with all of the other transformers, but it will be omitted from the returned value.
*/
export function css2rgb(css: string, alpha?: number): Rgb {
export function css2rgb(css: string, _alpha?: number): Rgb {
if (css === 'none') {
return {
r: 0,
@ -121,7 +124,7 @@ export function css2rgba(css: string, alpha?: number): Rgba {
* @param css
* @param alpha
*/
export function css2hsv(css: string, alpha?: number): Hsv {
export function css2hsv(css: string, _alpha?: number): Hsv {
if (css === 'none') {
return {
h: 0,
@ -142,7 +145,7 @@ export function css2hsv(css: string, alpha?: number): Hsv {
* @param css
* @param alpha
*/
export function css2hsl(css: string, alpha?: number): Hsl {
export function css2hsl(css: string, _alpha?: number): Hsl {
if (css === 'none') {
return {
h: 0,

Просмотреть файл

@ -5,7 +5,7 @@
/* eslint-disable @typescript-eslint/ban-ts-comment */
// @ts-ignore
import cb from 'color-blind'
import { ColorBlindnessMode, ColorBlindnessMeta, Scheme } from './interfaces'
import { ColorBlindnessMode, ColorBlindnessMeta, Scheme } from './interfaces.js'
const noop = (color: string) => color
@ -19,7 +19,10 @@ export function colorBlindness(
mode?: ColorBlindnessMode,
): Scheme {
const m = mode || ColorBlindnessMode.None
const fnName = ColorBlindnessMode[m].toLowerCase()
const fnName = ColorBlindnessMode[m]?.toLowerCase()
if (!fnName) {
throw new Error(`could not find ColorBlindnessMode ${mode}`)
}
const fn = cb[fnName] || noop
return Object.entries(scheme).reduce((acc, cur) => {
const [key, value] = cur
@ -77,6 +80,9 @@ const cbMeta: CBMetaMap = {
export function colorBlindnessInfo(
mode: ColorBlindnessMode,
): ColorBlindnessMeta {
const key = ColorBlindnessMode[mode]
return cbMeta[key]
const key = ColorBlindnessMode[mode] as string
if (!key) {
throw new Error(`could not find ColorBlindnessMode ${mode}`)
}
return cbMeta[key] as ColorBlindnessMeta
}

Просмотреть файл

@ -2,11 +2,11 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
export * from './interfaces'
export * from './chroma'
export * from './colorBlindness'
export * from './Color'
export * from './scheme'
export * from './interfaces.js'
export * from './chroma.js'
export * from './colorBlindness.js'
export * from './Color.js'
export * from './scheme.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 = {

Просмотреть файл

@ -0,0 +1,7 @@
/*!
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
export { getScheme } from './scheme/getScheme.js'
export * from './scheme/getNamedSchemeColor.js'
export * from './scheme/isNominal.js'

Просмотреть файл

@ -2,9 +2,12 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { hex as chromaHex } from 'chroma-js'
import { hsluvToHex } from 'hsluv'
import { Params, Scheme } from '../interfaces'
import chroma from 'chroma-js'
import hsluv from 'hsluv'
import type { Params, Scheme } from '../interfaces'
const { hex: chromaHex } = chroma
const { hsluvToHex } = hsluv
const lightTextLuminance = 95
const darkTextLuminance = 20
@ -68,13 +71,17 @@ export function polynomial_hsl_scale(
const luminances = polynomial_scale(exp, sl, el, size)
const hexvalues: HSLVector[] = []
for (let i = 0; i < size; i++) {
hexvalues.push([hues[i], saturations[i], luminances[i]])
hexvalues.push([
hues[i] as number,
saturations[i] as number,
luminances[i] as number,
])
}
return hexvalues
}
// Based on a maximum hue shift of 100 (from the slider)
function getOffsetHue([h, s, l]: HSLVector, hueShift: number) {
function getOffsetHue([h]: HSLVector, hueShift: number) {
if (hueShift >= 25 && hueShift <= 75) {
// analogous range
const delta = (analogousRange * (hueShift - 50)) / 25
@ -95,7 +102,7 @@ function getBackgroundSaturationaAndLuminance(
backgroundLevel: number,
light: boolean,
): [number, number] {
function normalizeSaturation(h: number, l: number) {
function normalizeSaturation(_h: number, l: number) {
let satGivingMaxChroma = 100
let c = chromaHex(hsluvToHex([hue, 100, l])).hcl()[1]
while (c > maxBackgroundChroma && satGivingMaxChroma >= 0) {
@ -172,11 +179,11 @@ export class ColorMaker {
const boldGreyLuminance = this.light ? darkestGrey : lightestGrey
const greys = this.explicitGrey(5, mutedGreyLuminance, boldGreyLuminance)
this.lowContrastAnnotationHsl = greys[0]
this.lowMidContrastAnnotationHsl = greys[1]
this.midContrastAnnotationHsl = greys[2]
this.midHighContrastAnnotationHsl = greys[3]
this.highContrastAnnotationHsl = greys[4]
this.lowContrastAnnotationHsl = greys[0] as HSLVector
this.lowMidContrastAnnotationHsl = greys[1] as HSLVector
this.midContrastAnnotationHsl = greys[2] as HSLVector
this.midHighContrastAnnotationHsl = greys[3] as HSLVector
this.highContrastAnnotationHsl = greys[4] as HSLVector
// halfway to the background from the darkest/lightest
const faintLuminance = this.light
? (100 - lightestGrey) / 2 + lightestGrey
@ -194,12 +201,8 @@ export class ColorMaker {
!this.cachedNominalSequence ||
this.cachedNominalSequence.size !== size
) {
const {
nominalBold,
nominal,
nominalMuted,
nominalHues,
} = this.getNominalHueSequences(size)
const { nominalBold, nominal, nominalMuted, nominalHues } =
this.getNominalHueSequences(size)
this.cachedNominalSequence = {
bold: nominalBold,
std: nominal,
@ -232,7 +235,7 @@ export class ColorMaker {
} {
const { hues: nominalHues } = this.nominal(size)
const accentHue = nominalHues[offset % nominalHues.length]
const accentHue = nominalHues[offset % nominalHues.length] as number
const colorLuminance = this.accentHsl[2]
const greyLuminance = this.greyLuminance
@ -272,10 +275,8 @@ export class ColorMaker {
}
public sequentialComplement(size: number, offset = 0): HSLVector[] {
const {
greyAccent,
maxSaturationComplement,
} = this.getAccentsAndComplements(size, offset)
const { greyAccent, maxSaturationComplement } =
this.getAccentsAndComplements(size, offset)
return polynomial_hsl_scale(
linearExponent,
greyAccent,

Просмотреть файл

@ -3,8 +3,8 @@
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { Color } from '../Color'
import { Scheme } from '../interfaces'
import { Color } from '../Color.js'
import type { Scheme } from '../interfaces.js'
/**
* Extracts a thematic Color using its scheme "path".
@ -17,7 +17,11 @@ export function getNamedSchemeColor(scheme: Scheme, path?: string): Color {
}
const indexed = indexedTest(path)
if (indexed) {
return new Color(scheme[indexed.name as keyof Scheme][indexed.index])
const selectedScheme = scheme[indexed.name as keyof Scheme] as
| string
| string[]
const css = selectedScheme[indexed.index as number] as string
return new Color(css)
}
return new Color(scheme[path as keyof Scheme] as string)
}
@ -28,7 +32,7 @@ function indexedTest(path: string) {
if (indexedName && indexedIndex) {
return {
name: indexedName[1],
index: +indexedIndex[1],
index: +indexedIndex![1]!,
}
}
}

Просмотреть файл

@ -2,4 +2,4 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
export * from './HsluvColorLogic'
export * from './HsluvColorLogic.js'

Просмотреть файл

@ -1,7 +0,0 @@
/*!
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
export { getScheme } from './getScheme'
export * from './getNamedSchemeColor'
export * from './isNominal'

Просмотреть файл

@ -1,9 +1,7 @@
{
"extends": "../../tsconfig.json",
"extends": "@essex/tsconfig-base",
"compilerOptions": {
"outDir": "lib",
"allowSyntheticDefaultImports": true,
"types": ["node"]
"outDir": "lib"
},
"include": ["src/**/*"]
}

Просмотреть файл

@ -2,11 +2,12 @@
"name": "@thematic/core",
"version": "1.3.3",
"license": "MIT",
"main": "src/index.ts",
"publishConfig": {
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
"types": "dist/types/index.d.ts"
"main": "dist/cjs/index.js",
"types": "dist/types/index.d.ts",
"exports": {
"import": "./dist/esm/index.mjs",
"require": "./dist/cjs/index.js",
"types": "./dist/types/index.d.ts"
},
"repository": {
"type": "git",
@ -29,7 +30,8 @@
"murmurhash-js": "^1.0.0"
},
"devDependencies": {
"@essex/scripts": "^19.0.5",
"@essex/scripts": "^20.0.1",
"@essex/tsconfig-base": "^1.0.1",
"@types/d3-scale": "^2.2.6",
"@types/jest": "^26.0.24",
"@types/lodash": "^4.14.178",

Просмотреть файл

@ -3,7 +3,7 @@
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { Params, Scheme, ColorBlindnessMode } from '@thematic/color'
import { merge } from 'lodash'
import merge from 'lodash/merge.js'
import {
nominal,
continuous,
@ -27,13 +27,13 @@ import {
AxisTitleImpl,
AxisTickLabelsImpl,
RuleImpl,
} from './impls'
} from './impls/index.js'
import {
applyParams,
applyScheme,
computeDefinition,
createScheme,
} from './scheme'
} from './scheme.js'
import {
Theme as ITheme,
ThemeSpec,
@ -65,7 +65,7 @@ import {
Rule,
Transformer,
ExportConfig,
} from './types'
} from './types/index.js'
const defaultConfig = {
variant: ThemeVariant.Light,
@ -309,6 +309,10 @@ export class Theme implements ITheme {
size,
)
}
return this._schemeCache[size]
const result = this._schemeCache[size]
if (!result) {
throw new Error(`could not locate schema with size ${size}`)
}
return result
}
}

Просмотреть файл

@ -3,7 +3,7 @@
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { css2rgba } from '@thematic/color'
import { Theme, Transformer } from '../types'
import type { Theme, Transformer } from '../types/index.js'
/**
* Creates a text string of the scheme colors compatible with GIMP/Inkscape palette files (*.gpl)

Просмотреть файл

@ -2,6 +2,6 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
export * from './gimp'
export * from './powerbi'
export * from './office'
export * from './gimp.js'
export * from './powerbi.js'
export * from './office.js'

Просмотреть файл

@ -2,7 +2,7 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { Theme, ThemeVariant, Transformer } from '../types'
import { Theme, ThemeVariant, Transformer } from '../types/index.js'
export type OfficeTheme = {
dark1: string
@ -43,13 +43,13 @@ export const office: Transformer<OfficeTheme> = (theme: Theme) => {
theme.variant === ThemeVariant.Dark
? theme.application().accent().hex()
: theme.plotArea().fill().hex(),
accent1: nominal[0],
accent2: nominal[1],
accent3: nominal[2],
accent4: nominal[3],
accent5: nominal[4],
accent6: nominal[5],
accent1: nominal[0] as string,
accent2: nominal[1] as string,
accent3: nominal[2] as string,
accent4: nominal[3] as string,
accent5: nominal[4] as string,
accent6: nominal[5] as string,
hyperlink: theme.application().accent().hex(),
followedHyperlink: nominal[0],
followedHyperlink: nominal[0] as string,
}
}

Просмотреть файл

@ -2,9 +2,9 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { Theme, Transformer } from '../types'
import type { Theme, Transformer } from '../types/index.js'
export type PowerBITheme = {
export interface PowerBITheme {
name: string
dataColors: string[]
background: string
@ -19,7 +19,7 @@ export type PowerBITheme = {
export const powerbi: Transformer<PowerBITheme> = (theme: Theme) => {
// TODO: this is the very most basic theme properties available. we could do much more with semantic mappings, akin to the Fluent themes
const nominal = theme.scales().nominal(12)
const dataColors = new Array(12).fill(1).map((a, i) => nominal(i).hex())
const dataColors = new Array(12).fill(1).map((_a, i) => nominal(i).hex())
const application = theme.application()
const pbi: PowerBITheme = {
name: `${theme.name} - ${theme.variant}`,

Просмотреть файл

@ -4,12 +4,12 @@
*/
import { Color } from '@thematic/color'
import murmur from 'murmurhash-js'
import { linear, log, quantile } from '../scales'
import { linear, log, quantile } from '../scales.js'
import {
ScaleType,
NominalColorScaleFunction,
ContinuousColorScaleFunction,
} from '../types'
} from '../types/index.js'
/**
* Nominal (categorical) scale generator.
@ -51,7 +51,7 @@ export function nominal(
fn.toArray = function (length?: number) {
const l = length ? length : domain ? domain.length : colors.length
return new Array(l).fill(1).map((a, i) => {
return new Array(l).fill(1).map((_a, i) => {
return fn(i).hex()
})
}
@ -87,14 +87,15 @@ export function continuous(
const index = Math.floor(scale(value) * max)
// make sure the index is in bounds for safe clamping
const i = index < 0 ? 0 : index > max ? max : index
const color = colorStops[i]
const color = colorStops[i] as string
return new Color(color)
}
fn.toArray = function (length?: number) {
const l = length || colorStops.length
const step = (domain[domain.length - 1] - domain[0]) / l
return new Array(l).fill(1).map((a, i) => {
const step =
((domain[domain.length - 1] as number) - (domain[0] as number)) / l
return new Array(l).fill(1).map((_a, i) => {
return fn(step * i).hex()
})
}

Просмотреть файл

@ -3,11 +3,16 @@
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { Color } from '@thematic/color'
import { Application, Chart, ApplicationSpec, ChartSpec } from '../types'
import type {
Application,
Chart,
ApplicationSpec,
ChartSpec,
} from '../types/index.js'
export * from './colorScales'
export * from './svg-marks'
export * from './svg-chrome'
export * from './colorScales.js'
export * from './svg-marks.js'
export * from './svg-chrome.js'
export function ApplicationImpl(application: ApplicationSpec): Application {
return {

Просмотреть файл

@ -3,7 +3,7 @@
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { Color } from '@thematic/color'
import {
import type {
SVGChrome,
ChromeText,
PlotArea,
@ -22,7 +22,7 @@ import {
AxisTitleSpec,
AxisTickLabelsSpec,
TooltipSpec,
} from '../types'
} from '../types/index.js'
function SVGChromeImpl(spec: SVGSpec): SVGChrome {
return {

Просмотреть файл

@ -30,7 +30,7 @@ import {
SelectionState,
Rule,
RuleSpec,
} from '../types'
} from '../types/index.js'
const identity = (datum: any) => datum
@ -78,7 +78,7 @@ function getMarkValue(
}
if (scaleBindings && scaleBindings[property]) {
const { scale, accessor = generalAccessor || identity } =
scaleBindings[property]
scaleBindings[property]!
const value = accessor(datum)
return scale(value)
}

Просмотреть файл

@ -2,8 +2,8 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
export * from './types'
export * from './loader'
export * from './extensions'
export * from './scales'
export { Theme as ThemeImpl } from './Theme'
export * from './types/index.js'
export * from './loader.js'
export * from './extensions/index.js'
export * from './scales.js'
export { Theme as ThemeImpl } from './Theme.js'

Просмотреть файл

@ -3,12 +3,17 @@
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { hsluv2hex } from '@thematic/color'
import { Theme as ThemeImpl } from './Theme'
import autumn from './themes/autumn.json'
import defaultTheme from './themes/default.json'
import metal from './themes/metal.json'
import ocean from './themes/ocean.json'
import { Theme, ThemeListing, ThemeConfig, ThemeSpec } from './types'
import { Theme as ThemeImpl } from './Theme.js'
import autumn from './themes/autumn.js'
import defaultTheme from './themes/default.js'
import metal from './themes/metal.js'
import ocean from './themes/ocean.js'
import type {
Theme,
ThemeListing,
ThemeConfig,
ThemeSpec,
} from './types/index.js'
const themes = {
default: defaultTheme,

Просмотреть файл

@ -84,8 +84,8 @@ function quantizeHistogram(data: number[], bins: number, smoothing?: boolean) {
const newEnd = smoothing && moveBackward ? end - backward : end + forward
const bin: Bin = values.slice(start, newEnd)
if (bin.length > 0) {
bin.x0 = bin[0]
bin.x1 = bin[bin.length - 1]
bin.x0 = bin[0] as number
bin.x1 = bin[bin.length - 1] as number
binStructure.push(bin)
}

Просмотреть файл

@ -10,9 +10,15 @@ import {
ColorBlindnessMode,
colorBlindness,
} from '@thematic/color'
import { merge, set } from 'lodash'
import defaults from './themes/defaults.json'
import { ThemeDefinition, ThemeSpec, ThemeVariant, SVGSpec } from './types'
import merge from 'lodash/merge.js'
import set from 'lodash/set.js'
import defaults from './themes/defaults.js'
import {
ThemeDefinition,
ThemeSpec,
ThemeVariant,
SVGSpec,
} from './types/index.js'
// these are static default settings for the marks that are not derived from the computed scheme
const DEFAULT_NOMINAL_ITEMS = 10
@ -129,7 +135,7 @@ export function computeDefinition(
paths: ['application.error'],
},
{
value: scheme.nominal[0],
value: scheme.nominal[0] as string,
paths: [
'rect.fill',
'area.fill',
@ -200,7 +206,7 @@ export function computeDefinition(
const signalConfigs: Config[] = [
{
value: scheme.nominalBold[0],
value: scheme.nominalBold[0] as string,
paths: [
'rect.hovered.fill',
'area.hovered.fill',
@ -217,7 +223,7 @@ export function computeDefinition(
],
},
{
value: scheme.nominalMuted[0],
value: scheme.nominalMuted[0] as string,
paths: [
'rect.suppressed.fill',
'area.suppressed.fill',

Просмотреть файл

@ -1,11 +0,0 @@
{
"name": "Autumn",
"params": {
"accentHue": 50,
"accentSaturation": 86,
"accentLuminance": 67,
"backgroundLevel": 95,
"backgroundHueShift": 50,
"nominalHueStep": 10
}
}

Просмотреть файл

@ -0,0 +1,16 @@
/*!
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
const autumnTheme = {
name: 'Autumn',
params: {
accentHue: 50,
accentSaturation: 86,
accentLuminance: 67,
backgroundLevel: 95,
backgroundHueShift: 50,
nominalHueStep: 10,
},
}
export default autumnTheme

Просмотреть файл

@ -1,11 +0,0 @@
{
"name": "Default",
"params": {
"accentHue": 252,
"accentSaturation": 78,
"accentLuminance": 49,
"backgroundLevel": 95,
"backgroundHueShift": 50,
"nominalHueStep": 10
}
}

Просмотреть файл

@ -0,0 +1,16 @@
/*!
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
const defaultTheme = {
name: 'Default',
params: {
accentHue: 252,
accentSaturation: 78,
accentLuminance: 49,
backgroundLevel: 95,
backgroundHueShift: 50,
nominalHueStep: 10,
},
}
export default defaultTheme

Просмотреть файл

@ -1,124 +0,0 @@
{
"chart": {
"backgroundColor": "none",
"padding": 4
},
"plotArea": {
"fillOpacity": 1,
"strokeOpacity": 1,
"strokeWidth": 0.5
},
"axisLine": {
"fill": "none",
"fillOpacity": 0,
"strokeOpacity": 1,
"strokeWidth": 0.5
},
"axisTicks": {
"fill": "none",
"fillOpacity": 0,
"strokeOpacity": 1,
"strokeWidth": 0.5,
"innerSize": 0,
"outerSize": 6
},
"axisTickLabels": {
"fillOpacity": 1,
"stroke": "none",
"strokeOpacity": 0,
"strokeWidth": 0,
"fontFamily": "\"Segoe UI\", \"Segoe UI Web (West European)\", \"Segoe UI\", -apple-system, BlinkMacSystemFont, Roboto, \"Helvetica Neue\", sans-serif",
"fontWeight": "normal",
"fontSize": 10,
"padding": 3
},
"axisTitle": {
"fillOpacity": 1,
"stroke": "none",
"strokeOpacity": 0,
"strokeWidth": 0,
"fontFamily": "\"Segoe UI\", \"Segoe UI Web (West European)\", \"Segoe UI\", -apple-system, BlinkMacSystemFont, Roboto, \"Helvetica Neue\", sans-serif",
"fontWeight": "normal",
"fontSize": 11
},
"gridLines": {
"fill": "none",
"fillOpacity": 0,
"strokeOpacity": 1,
"strokeWidth": 0.5
},
"text": {
"fillOpacity": 1,
"stroke": "none",
"strokeWidth": 0,
"strokeOpacity": 0,
"fontFamily": "\"Segoe UI\", \"Segoe UI Web (West European)\", \"Segoe UI\", -apple-system, BlinkMacSystemFont, Roboto, \"Helvetica Neue\", sans-serif",
"fontWeight": "normal",
"fontSize": 12
},
"tooltip": {
"fillOpacity": 0.5,
"strokeWidth": 1,
"strokeOpacity": 0.75
},
"circle": {
"fill": "none",
"fillOpacity": 1,
"strokeWidth": 1,
"strokeOpacity": 1,
"radius": 4
},
"rect": {
"fillOpacity": 1,
"stroke": "none",
"strokeWidth": 1,
"strokeOpacity": 1
},
"line": {
"fill": "none",
"fillOpacity": 1,
"strokeWidth": 2,
"strokeOpacity": 1
},
"rule": {
"fill": "none",
"fillOpacity": 1,
"strokeWidth": 3,
"strokeOpacity": 1
},
"area": {
"fillOpacity": 1,
"stroke": "none",
"strokeWidth": 1,
"strokeOpacity": 1
},
"arc": {
"fillOpacity": 1,
"strokeWidth": 1,
"strokeOpacity": 1
},
"node": {
"fillOpacity": 0.75,
"strokeWidth": 1,
"strokeOpacity": 0.5,
"radius": 4
},
"link": {
"fill": "none",
"fillOpacity": 1,
"strokeWidth": 0.5,
"strokeOpacity": 0.5
},
"process": {
"fillOpacity": 1,
"strokeWidth": 1,
"strokeOpacity": 1,
"radius": 8
},
"flow": {
"fill": "none",
"fillOpacity": 1,
"strokeWidth": 6,
"strokeOpacity": 1
}
}

Просмотреть файл

@ -0,0 +1,132 @@
/*!
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
const themeDefaults = {
chart: {
backgroundColor: 'none',
padding: 4,
},
plotArea: {
fillOpacity: 1,
strokeOpacity: 1,
strokeWidth: 0.5,
},
axisLine: {
fill: 'none',
fillOpacity: 0,
strokeOpacity: 1,
strokeWidth: 0.5,
},
axisTicks: {
fill: 'none',
fillOpacity: 0,
strokeOpacity: 1,
strokeWidth: 0.5,
innerSize: 0,
outerSize: 6,
},
axisTickLabels: {
fillOpacity: 1,
stroke: 'none',
strokeOpacity: 0,
strokeWidth: 0,
fontFamily:
'"Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif',
fontWeight: 'normal',
fontSize: 10,
padding: 3,
},
axisTitle: {
fillOpacity: 1,
stroke: 'none',
strokeOpacity: 0,
strokeWidth: 0,
fontFamily:
'"Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif',
fontWeight: 'normal',
fontSize: 11,
},
gridLines: {
fill: 'none',
fillOpacity: 0,
strokeOpacity: 1,
strokeWidth: 0.5,
},
text: {
fillOpacity: 1,
stroke: 'none',
strokeWidth: 0,
strokeOpacity: 0,
fontFamily:
'"Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif',
fontWeight: 'normal',
fontSize: 12,
},
tooltip: {
fillOpacity: 0.5,
strokeWidth: 1,
strokeOpacity: 0.75,
},
circle: {
fill: 'none',
fillOpacity: 1,
strokeWidth: 1,
strokeOpacity: 1,
radius: 4,
},
rect: {
fillOpacity: 1,
stroke: 'none',
strokeWidth: 1,
strokeOpacity: 1,
},
line: {
fill: 'none',
fillOpacity: 1,
strokeWidth: 2,
strokeOpacity: 1,
},
rule: {
fill: 'none',
fillOpacity: 1,
strokeWidth: 3,
strokeOpacity: 1,
},
area: {
fillOpacity: 1,
stroke: 'none',
strokeWidth: 1,
strokeOpacity: 1,
},
arc: {
fillOpacity: 1,
strokeWidth: 1,
strokeOpacity: 1,
},
node: {
fillOpacity: 0.75,
strokeWidth: 1,
strokeOpacity: 0.5,
radius: 4,
},
link: {
fill: 'none',
fillOpacity: 1,
strokeWidth: 0.5,
strokeOpacity: 0.5,
},
process: {
fillOpacity: 1,
strokeWidth: 1,
strokeOpacity: 1,
radius: 8,
},
flow: {
fill: 'none',
fillOpacity: 1,
strokeWidth: 6,
strokeOpacity: 1,
},
}
export default themeDefaults

Просмотреть файл

@ -1,11 +0,0 @@
{
"name": "Metal",
"params": {
"accentHue": 242,
"accentSaturation": 46,
"accentLuminance": 45,
"backgroundLevel": 98,
"backgroundHueShift": 100,
"nominalHueStep": 21
}
}

Просмотреть файл

@ -0,0 +1,16 @@
/*!
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
const metalTheme = {
name: 'Metal',
params: {
accentHue: 242,
accentSaturation: 46,
accentLuminance: 45,
backgroundLevel: 98,
backgroundHueShift: 100,
nominalHueStep: 21,
},
}
export default metalTheme

Просмотреть файл

@ -1,11 +0,0 @@
{
"name": "Ocean",
"params": {
"accentHue": 215,
"accentSaturation": 95,
"accentLuminance": 61,
"backgroundLevel": 90,
"backgroundHueShift": 40,
"nominalHueStep": 0
}
}

Просмотреть файл

@ -0,0 +1,16 @@
/*!
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
const oceanTheme = {
name: 'Ocean',
params: {
accentHue: 215,
accentSaturation: 95,
accentLuminance: 61,
backgroundLevel: 90,
backgroundHueShift: 40,
nominalHueStep: 0,
},
}
export default oceanTheme

Просмотреть файл

@ -2,10 +2,10 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { Params, Scheme, Color, ColorBlindnessMode } from '@thematic/color'
import { ThemeConfig } from './ThemeConfig'
import { ThemeSpec, ThemeDefinition } from './ThemeDefinition'
import { ScaleType, SelectionState, ThemeVariant } from './enums'
import type { Params, Scheme, Color, ColorBlindnessMode } from '@thematic/color'
import type { ThemeConfig } from './ThemeConfig.js'
import type { ThemeSpec, ThemeDefinition } from './ThemeDefinition.js'
import type { ScaleType, SelectionState, ThemeVariant } from './enums.js'
/**
* Overall application level config, e.g., 'chrome'.

Просмотреть файл

@ -2,9 +2,9 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { ColorBlindnessMode } from '@thematic/color'
import { ThemeDefinition } from './ThemeDefinition'
import { ThemeVariant } from './enums'
import type { ColorBlindnessMode } from '@thematic/color'
import type { ThemeDefinition } from './ThemeDefinition.js'
import type { ThemeVariant } from './enums.js'
export interface ThemeConfig {
/**

Просмотреть файл

@ -2,7 +2,7 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { Params, Scheme } from '@thematic/color'
import type { Params, Scheme } from '@thematic/color'
// TODO: the *Spec versions of these are for the raw json properties
// this would be MUCH better specified as a JSONSchema with included validator

Просмотреть файл

@ -2,8 +2,8 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
export * from './enums'
export * from './ThemeDefinition'
export * from './Theme'
export * from './ThemeConfig'
export * from './ThemeListing'
export * from './enums.js'
export * from './ThemeDefinition.js'
export * from './Theme.js'
export * from './ThemeConfig.js'
export * from './ThemeListing.js'

Просмотреть файл

@ -1,9 +1,8 @@
{
"extends": "../../tsconfig.json",
"extends": "@essex/tsconfig-base",
"compilerOptions": {
"outDir": "lib",
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
"skipLibCheck": true
},
"include": ["src/**/*"]

Просмотреть файл

@ -2,11 +2,12 @@
"name": "@thematic/d3",
"version": "1.3.3",
"license": "MIT",
"main": "src/index.ts",
"publishConfig": {
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
"types": "dist/types/index.d.ts"
"main": "dist/cjs/index.js",
"types": "dist/types/index.d.ts",
"exports": {
"import": "./dist/esm/index.mjs",
"require": "./dist/cjs/index.js",
"types": "./dist/types/index.d.ts"
},
"repository": {
"type": "git",
@ -24,7 +25,8 @@
"d3-selection": "^1.4.2"
},
"devDependencies": {
"@essex/scripts": "^19.0.5",
"@essex/scripts": "^20.0.1",
"@essex/tsconfig-base": "^1.0.1",
"@types/d3-axis": "^1.0.16",
"@types/d3-selection": "^1.4.3",
"@types/node": "^14.18.5"

Просмотреть файл

@ -2,6 +2,6 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
export * from './svg'
export * from './scales'
export * from './layers'
export * from './svg.js'
export * from './scales.js'
export * from './layers.js'

Просмотреть файл

@ -2,33 +2,33 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { Theme } from '@thematic/core'
import { Axis } from 'd3-axis'
import { Selection } from 'd3-selection'
import type { Theme } from '@thematic/core'
import type { Axis } from 'd3-axis'
import type { Selection } from 'd3-selection'
import {
svg as svgCall,
rect as rectCall,
line as lineCall,
text as textCall,
} from './svg'
} from './svg.js'
export interface SelectionOptions {
/**
* This is a map of event handlers to apply to the selection.
*/
on?: { [key: string]: any }
on: { [key: string]: any }
/**
* This is a map of ad-hoc attrs to apply to the selection.
*/
attr?: { [key: string]: any }
attr: { [key: string]: any }
/**
* Map of ad-hoc classes to add or remove from the selection.
*/
classed?: { [key: string]: any }
classed: { [key: string]: any }
/**
* Map of ad-hoc styles to add or remove from the selection.
*/
style?: { [key: string]: any }
style: { [key: string]: any }
}
export interface ChartOptions extends SelectionOptions {
@ -44,8 +44,8 @@ export interface PlotAreaOptions extends ChartOptions {
}
function getSelectionOptions(
selection: Selection<Element, any, Element, any>,
options?: SelectionOptions,
_selection: Selection<Element, any, Element, any>,
options?: Partial<SelectionOptions>,
): SelectionOptions {
const _on = (options && options.on) || {}
const _attr = (options && options.attr) || {}

Просмотреть файл

@ -3,7 +3,7 @@
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { Theme, ScaleType, SelectionState } from '@thematic/core'
import { Selection } from 'd3-selection'
import type { Selection } from 'd3-selection'
/**
* Creates a d3-compatible nominal scale using the theme.

Просмотреть файл

@ -2,7 +2,7 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
import {
import type {
Chart,
SVGMark,
PlotArea,
@ -15,7 +15,7 @@ import {
Link,
Text,
} from '@thematic/core'
import { Selection } from 'd3-selection'
import type { Selection } from 'd3-selection'
export function svg(
selection: Selection<Element, any, Element, any>,

Просмотреть файл

@ -1,10 +1,8 @@
{
"extends": "../../tsconfig.json",
"extends": "@essex/tsconfig-base",
"compilerOptions": {
"outDir": "lib",
"strict": false,
"resolveJsonModule": true,
"allowSyntheticDefaultImports": true
"lib": ["ESNext", "DOM"]
},
"include": ["src/**/*"]
}

Просмотреть файл

@ -2,11 +2,12 @@
"name": "@thematic/fluent",
"version": "2.1.0",
"license": "MIT",
"main": "src/index.ts",
"publishConfig": {
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
"types": "dist/types/index.d.ts"
"main": "dist/cjs/index.js",
"types": "dist/types/index.d.ts",
"exports": {
"import": "./dist/esm/index.mjs",
"require": "./dist/cjs/index.js",
"types": "./dist/types/index.d.ts"
},
"repository": {
"type": "git",
@ -26,7 +27,8 @@
"d3-scale": "^3.3.0"
},
"devDependencies": {
"@essex/scripts": "^19.0.5",
"@essex/scripts": "^20.0.1",
"@essex/tsconfig-base": "^1.0.1",
"@fluentui/font-icons-mdl2": "^8.1.20",
"@fluentui/react": "^8.49.0",
"@types/chroma-js": "^2.1.3",

Просмотреть файл

@ -8,8 +8,8 @@ import {
ThemeImpl,
ThemeVariant,
} from '@thematic/core'
import { themeJson } from './theme'
import { FluentTheme as IThematicFluentTheme } from './types'
import { themeJson } from './theme/index.js'
import type { FluentTheme as IThematicFluentTheme } from './types.js'
/**
* Wraps a thematic theme to output Fluent palettes.

Просмотреть файл

@ -9,9 +9,9 @@ import {
} from '@fluentui/react'
import { css2hsluv, Params } from '@thematic/color'
import { Theme } from '@thematic/core'
import type { Theme } from '@thematic/core'
import { CSSProperties, FC, useCallback, useMemo } from 'react'
import { useThematicFluent } from '../../provider'
import { useThematicFluent } from '../../provider/index.js'
export enum ColorPickerLayout {
PickerOnly,
@ -67,7 +67,7 @@ export const ColorPicker: FC<ColorPickerProps> = ({
)
const handlePickerChange = useCallback(
(ev: React.SyntheticEvent<HTMLElement>, color: IColor) => {
(_ev: React.SyntheticEvent<HTMLElement>, color: IColor) => {
const [h, s, l] = css2hsluv(color.hex)
updateParams({
accentHue: h,

Просмотреть файл

@ -2,4 +2,4 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
export * from './ColorPicker'
export * from './ColorPicker.js'

Просмотреть файл

@ -3,10 +3,10 @@
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { IconButton, Label } from '@fluentui/react'
import { Theme } from '@thematic/core'
import type { Theme } from '@thematic/core'
import { memo, CSSProperties, FC, useMemo, useCallback } from 'react'
import { useThematicFluent } from '../../provider'
import { ColorPicker } from '../ColorPicker'
import { useThematicFluent } from '../../provider/index.js'
import { ColorPicker } from '../ColorPicker/index.js'
export interface ColorPickerButtonStyles {
label?: CSSProperties

Просмотреть файл

@ -2,4 +2,4 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
export * from './ColorPickerButton'
export * from './ColorPickerButton.js'

Просмотреть файл

@ -4,7 +4,7 @@
*/
import { scaleLinear } from 'd3-scale'
import { FC, useMemo } from 'react'
import { ChipsProps } from './types'
import type { ChipsProps } from './types.js'
export const ColorChips: FC<ChipsProps> = ({
scale,

Просмотреть файл

@ -2,17 +2,18 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { FC, useMemo } from 'react'
import { ChipsProps } from './types'
import { FC, useMemo, CSSProperties } from 'react'
import type { ChipsProps } from './types.js'
export const ContinuousBand: FC<ChipsProps> = ({ scale, width, height }) => {
const style = useMemo(
() => ({
width,
height,
minWidth: width,
minHeight: height,
}),
const style: CSSProperties = useMemo(
() =>
({
width,
height,
minWidth: width,
minHeight: height,
} as CSSProperties),
[width, height],
)

Просмотреть файл

@ -4,16 +4,16 @@
*/
import { Dropdown } from '@fluentui/react'
import { FC, useCallback, useRef } from 'react'
import { ScaleDropdownItem } from './ScaleDropdownItem'
import { ScaleDropdownItem } from './ScaleDropdownItem.js'
import {
usePaletteWidth,
usePaletteHeight,
useContainerStyle,
useItemStyle,
useThematicScaleOptions,
} from './hooks/theme'
import { useSafeDimensions } from './hooks/useSafeDimensions'
import { ScaleDropdownProps } from './types'
} from './hooks/theme.js'
import { useSafeDimensions } from './hooks/useSafeDimensions.js'
import type { ScaleDropdownProps } from './types.js'
/**
* Represents a Fluent dropdown of Thematic scale options.

Просмотреть файл

@ -3,9 +3,9 @@
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { FC, useMemo } from 'react'
import { TEXT_WIDTH, useScale, usePaletteComponent } from './hooks/theme'
import { useSafeCollapseDimensions } from './hooks/useSafeDimensions'
import { ScaleDropdownItemProps } from './types'
import { TEXT_WIDTH, useScale, usePaletteComponent } from './hooks/theme.js'
import { useSafeCollapseDimensions } from './hooks/useSafeDimensions.js'
import type { ScaleDropdownItemProps } from './types.js'
export const ScaleDropdownItem: FC<ScaleDropdownItemProps> = ({
option,

Просмотреть файл

@ -2,15 +2,15 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { IDropdownOption } from '@fluentui/react'
import {
import type { IDropdownOption } from '@fluentui/react'
import type {
NominalColorScaleFunction,
ContinuousColorScaleFunction,
} from '@thematic/core'
import React, { useMemo } from 'react'
import { useThematicFluent } from '../../../provider'
import { ChipsProps } from '../types'
import { chooseScale, selectColorPalette } from '../util'
import { useThematicFluent } from '../../../provider/index.js'
import type { ChipsProps } from '../types.js'
import { chooseScale, selectColorPalette } from '../util.js'
const ITEM_LEFT_PADDING = 8 // default right padding in fluent item
const ITEM_BORDER_MODIFIER = 1 // accounts for transparent border on outer container

Просмотреть файл

@ -2,4 +2,4 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
export * from './ScaleDropdown'
export * from './ScaleDropdown.js'

Просмотреть файл

@ -2,8 +2,8 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { IDropdownOption, IDropdownProps } from '@fluentui/react'
import {
import type { IDropdownOption, IDropdownProps } from '@fluentui/react'
import type {
ContinuousColorScaleFunction,
NominalColorScaleFunction,
} from '@thematic/core'

Просмотреть файл

@ -2,15 +2,15 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
import {
import type {
Theme,
NominalColorScaleFunction,
ContinuousColorScaleFunction,
} from '@thematic/core'
import { FC } from 'react'
import { ColorChips } from './ColorChips'
import { ContinuousBand } from './ContinuousBand'
import { ChipsProps } from './types'
import type { FC } from 'react'
import { ColorChips } from './ColorChips.js'
import { ContinuousBand } from './ContinuousBand.js'
import type { ChipsProps } from './types.js'
export function chooseScale(
theme: Theme,

Просмотреть файл

@ -7,13 +7,13 @@ import {
IChoiceGroupOption,
IChoiceGroupStyles,
} from '@fluentui/react'
import { ScaleType } from '@thematic/core'
import type { ScaleType } from '@thematic/core'
import { FC, useCallback, useMemo } from 'react'
export interface ScaleTypeChoiceGroupProps {
selectedType: ScaleType
onChange?: (scaleType: ScaleType) => void
label?: string
label: string
suppressQuantile?: boolean
styles?: IChoiceGroupStyles
}

Просмотреть файл

@ -2,7 +2,7 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
export * from './ColorPicker'
export * from './ColorPickerButton'
export * from './ScaleDropdown'
export * from './ScaleTypeChoiceGroup'
export * from './ColorPicker/index.js'
export * from './ColorPickerButton/index.js'
export * from './ScaleDropdown/index.js'
export * from './ScaleTypeChoiceGroup/index.js'

Просмотреть файл

@ -2,7 +2,7 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
export * from './components'
export * from './loader'
export * from './provider'
export * from './types'
export * from './components/index.js'
export * from './loader.js'
export * from './provider/index.js'
export * from './types.js'

Просмотреть файл

@ -2,9 +2,9 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { Theme } from '@thematic/core'
import { FluentTheme } from './FluentTheme'
import { FluentTheme as IFluentTheme } from './types'
import type { Theme } from '@thematic/core'
import { FluentTheme } from './FluentTheme.js'
import type { FluentTheme as IFluentTheme } from './types.js'
/**
* Load a Fluent theme instance derived from a thematic theme

Просмотреть файл

@ -4,8 +4,8 @@
*/
import { loadById } from '@thematic/core'
import { createContext } from 'react'
import { loadFluentTheme } from '../loader'
import { FluentTheme } from '../types'
import { loadFluentTheme } from '../loader.js'
import type { FluentTheme } from '../types.js'
const defaultTheme = loadById('default')
const defaultFluentTheme = loadFluentTheme(defaultTheme)

Просмотреть файл

@ -4,11 +4,11 @@
*/
import { initializeIcons } from '@fluentui/font-icons-mdl2'
import { ThemeProvider } from '@fluentui/react'
import { Theme } from '@thematic/core'
import type { Theme } from '@thematic/core'
import { ThematicProvider } from '@thematic/react'
import { useMemo, FC } from 'react'
import { loadFluentTheme } from '../loader'
import { ThematicFluentContext } from './ThematicFluentContext'
import { loadFluentTheme } from '../loader.js'
import { ThematicFluentContext } from './ThematicFluentContext.js'
export interface ThematicFluentProviderProps {
theme: Theme

Просмотреть файл

@ -2,5 +2,5 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
export * from './ThematicFluentProvider'
export * from './useThematicFluent'
export * from './ThematicFluentProvider.js'
export * from './useThematicFluent.js'

Просмотреть файл

@ -3,8 +3,8 @@
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { useContext } from 'react'
import { FluentTheme } from '../types'
import { ThematicFluentContext } from './ThematicFluentContext'
import type { FluentTheme } from '../types.js'
import { ThematicFluentContext } from './ThematicFluentContext.js'
/**
* Hook to retrieve the thematic theme directly.

Просмотреть файл

@ -2,5 +2,5 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
export * from './shades'
export * from './themeJson'
export * from './shades.js'
export * from './themeJson.js'

Просмотреть файл

@ -88,6 +88,12 @@ export const correctShades = (
inverted = false,
): Record<string, string> => {
const { foregroundColor, backgroundColor } = fluentJson
if (!foregroundColor) {
throw new Error('foregroundColor not defined')
}
if (!backgroundColor) {
throw new Error('backgroundColor not defined')
}
if (inverted) {
return {
...fluentJson,

Просмотреть файл

@ -8,7 +8,7 @@ import {
themeRulesStandardCreator,
} from '@fluentui/react'
import { Theme, ThemeVariant } from '@thematic/core'
import { correctShades } from './shades'
import { correctShades } from './shades.js'
type ThemeInputColors = {
primaryColor: string
@ -28,17 +28,17 @@ const fluentJson = (colors: ThemeInputColors, inverted = false): any => {
const themeRules = themeRulesStandardCreator()
ThemeGenerator.insureSlots(themeRules, inverted)
ThemeGenerator.setSlot(
themeRules[BaseSlots[BaseSlots.primaryColor]],
themeRules[BaseSlots[BaseSlots.primaryColor]!]!,
colors.primaryColor,
inverted,
)
ThemeGenerator.setSlot(
themeRules[BaseSlots[BaseSlots.foregroundColor]],
themeRules[BaseSlots[BaseSlots.foregroundColor]!]!,
colors.foregroundColor,
inverted,
)
ThemeGenerator.setSlot(
themeRules[BaseSlots[BaseSlots.backgroundColor]],
themeRules[BaseSlots[BaseSlots.backgroundColor]!]!,
colors.backgroundColor,
inverted,
)

Просмотреть файл

@ -2,8 +2,8 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { Theme as IFluentTheme } from '@fluentui/react'
import { Theme as IThematicTheme } from '@thematic/core'
import type { Theme as IFluentTheme } from '@fluentui/react'
import type { Theme as IThematicTheme } from '@thematic/core'
/**
* This interface provides a mapping from thematic theme config to a theme suitable for use

Просмотреть файл

@ -1,10 +1,8 @@
{
"extends": "../../tsconfig.json",
"extends": "@essex/tsconfig-base",
"compilerOptions": {
"outDir": "lib",
"strict": false,
"resolveJsonModule": true,
"allowSyntheticDefaultImports": true
"jsx": "react-jsx"
},
"include": ["src/**/*"]
}

Просмотреть файл

@ -2,11 +2,12 @@
"name": "@thematic/react",
"version": "1.3.3",
"license": "MIT",
"main": "src/index.ts",
"publishConfig": {
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
"types": "dist/types/index.d.ts"
"main": "dist/cjs/index.js",
"types": "dist/types/index.d.ts",
"exports": {
"import": "./dist/esm/index.mjs",
"require": "./dist/cjs/index.js",
"types": "./dist/types/index.d.ts"
},
"repository": {
"type": "git",
@ -23,7 +24,8 @@
"core-js": "^3.20.2"
},
"devDependencies": {
"@essex/scripts": "^19.0.5",
"@essex/scripts": "^20.0.1",
"@essex/tsconfig-base": "^1.0.1",
"@types/node": "^14.18.5",
"@types/react": "^17.0.38",
"react": "^17.0.2"

Просмотреть файл

@ -3,7 +3,7 @@
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { FC, useMemo } from 'react'
import { useThematic } from './'
import { useThematic } from './useThematic.js'
/**
* This component applies root-level styles to your application using the theme defaults.

Просмотреть файл

@ -2,9 +2,9 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { Theme } from '@thematic/core'
import type { Theme } from '@thematic/core'
import { FC, useMemo } from 'react'
import { ThematicContext, defaultTheme } from './ThematicContext'
import { ThematicContext, defaultTheme } from './ThematicContext.js'
export interface ThematicProviderProps {
theme?: Theme

Просмотреть файл

@ -2,6 +2,8 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
export * from './styles'
export * from './ApplicationStyles'
export * from './provider'
export * from './styles.js'
export * from './ApplicationStyles.js'
export * from './useThematic.js'
export * from './ThematicProvider.js'
export * from './ThematicContext.js'

Просмотреть файл

@ -1,6 +0,0 @@
/*!
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
export * from './useThematic'
export * from './ThematicProvider'

Просмотреть файл

@ -3,8 +3,8 @@
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { css2css } from '@thematic/color'
import { SVGMark, Application } from '@thematic/core'
import { CSSProperties } from 'react'
import type { SVGMark, Application } from '@thematic/core'
import type { CSSProperties } from 'react'
/**
* Converts a basic mark config to CSS-compatible object

Просмотреть файл

@ -2,9 +2,9 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { Theme } from '@thematic/core'
import type { Theme } from '@thematic/core'
import { useContext } from 'react'
import { ThematicContext } from './ThematicContext'
import { ThematicContext } from './ThematicContext.js'
/**
* Hook to retrieve the thematic theme directly.

Просмотреть файл

@ -1,10 +1,8 @@
{
"extends": "../../tsconfig.json",
"extends": "@essex/tsconfig-base",
"compilerOptions": {
"outDir": "lib",
"strict": false,
"resolveJsonModule": true,
"allowSyntheticDefaultImports": true
"jsx": "react-jsx"
},
"include": ["src/**/*"]
}

Просмотреть файл

@ -2,11 +2,12 @@
"name": "@thematic/vega",
"version": "1.3.3",
"license": "MIT",
"main": "src/index.ts",
"publishConfig": {
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
"types": "dist/types/index.d.ts"
"main": "dist/cjs/index.js",
"types": "dist/types/index.d.ts",
"exports": {
"import": "./dist/esm/index.mjs",
"require": "./dist/cjs/index.js",
"types": "./dist/types/index.d.ts"
},
"repository": {
"type": "git",
@ -22,7 +23,8 @@
"core-js": "^3.20.2"
},
"devDependencies": {
"@essex/scripts": "^19.0.5",
"@essex/scripts": "^20.0.1",
"@essex/tsconfig-base": "^1.0.1",
"@types/node": "^14.18.5",
"vega": "5.15.0"
},

Просмотреть файл

@ -2,8 +2,8 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { Theme, SVGMark } from '@thematic/core'
import { Spec } from 'vega'
import type { Theme, SVGMark } from '@thematic/core'
import type { Spec } from 'vega'
function mark(mark: SVGMark) {
const { fill, fillOpacity, stroke, strokeOpacity, strokeWidth } = mark

Просмотреть файл

@ -1,10 +1,7 @@
{
"extends": "../../tsconfig.json",
"extends": "@essex/tsconfig-base",
"compilerOptions": {
"outDir": "lib",
"strict": false,
"resolveJsonModule": true,
"allowSyntheticDefaultImports": true
"outDir": "lib"
},
"include": ["src/**/*"]
}

Просмотреть файл

@ -35,15 +35,16 @@
"vega": "5.15.0"
},
"devDependencies": {
"@essex/scripts": "^19.0.5",
"@essex/vite-config": "^18.0.2",
"@essex/scripts": "^20.0.1",
"@essex/vite-config": "^19.0.0",
"@types/d3-axis": "^1.0.16",
"@types/d3-scale": "^2.2.6",
"@types/d3-selection": "^1.4.3",
"@types/node": "^14.18.5",
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11",
"vite": "^2.7.10"
"typescript": "^4.5.5",
"vite": "^2.8.0"
},
"browserslist": [
">0.2%",

Просмотреть файл

@ -4,7 +4,7 @@
*/
import { ThematicFluentProvider } from '@thematic/fluent'
import { ApplicationStyles } from '@thematic/react'
import { FC } from 'react'
import type { FC } from 'react'
import { useTheme } from '../../state'
import { ControlPanel } from '../ControlPanel'
import { ThemeEditor } from '../ThemeEditor'

Просмотреть файл

@ -4,7 +4,7 @@
*/
import './index.css'
import { Theme, Application } from '@thematic/core'
import type { Theme, Application } from '@thematic/core'
import { useThematic } from '@thematic/react'
import { FC, useMemo } from 'react'
import { ColorStrip } from '../ColorStrip'

Просмотреть файл

@ -27,19 +27,19 @@ export const ColorPalette: FC<ColorPaletteProps> = ({ scaleItemCount }) => {
usePalette()
const accent = (
<Fragment>
<span style={{ color: accentColor }}>Accent {accentColor}</span>
<span style={{ color: accentColor! }}>Accent {accentColor}</span>
</Fragment>
)
const background = (
<Fragment>
<span style={{ color: foregroundColor }}>
<span style={{ color: foregroundColor! }}>
Background {backgroundColor}
</span>
</Fragment>
)
const foreground = (
<Fragment>
<span style={{ color: foregroundColor }}>
<span style={{ color: foregroundColor! }}>
Foreground {foregroundColor}
</span>
</Fragment>
@ -59,13 +59,13 @@ export const ColorPalette: FC<ColorPaletteProps> = ({ scaleItemCount }) => {
<div
style={{
border: `1px solid ${foregroundColor}`,
background: backgroundColor,
background: backgroundColor!,
padding: '10px 30px 30px 30px',
color: foregroundColor,
color: foregroundColor!,
textAlign: 'left',
}}
>
<h2 style={{ color: foregroundColor }}>Application colors</h2>
<h2 style={{ color: foregroundColor! }}>Application colors</h2>
<ApplicationPalette />
<ul
style={{
@ -77,9 +77,9 @@ export const ColorPalette: FC<ColorPaletteProps> = ({ scaleItemCount }) => {
<li>
{foreground} on {background} (contrast ratio:{' '}
<Contrast
foreground={foregroundColor}
background={backgroundColor}
error={errorColor}
foreground={foregroundColor!}
background={backgroundColor!}
error={errorColor!}
showLink
/>
)
@ -87,15 +87,15 @@ export const ColorPalette: FC<ColorPaletteProps> = ({ scaleItemCount }) => {
<li>
{accent} on {background} (contrast ratio:{' '}
<Contrast
foreground={accentColor}
background={backgroundColor}
error={errorColor}
foreground={accentColor!}
background={backgroundColor!}
error={errorColor!}
showLink
/>
)
</li>
</ul>
<h2 style={{ color: foregroundColor }}>Scales</h2>
<h2 style={{ color: foregroundColor! }}>Scales</h2>
<div
style={{
display: 'flex',
@ -108,52 +108,52 @@ export const ColorPalette: FC<ColorPaletteProps> = ({ scaleItemCount }) => {
>
<ColorStrip
label="Nominal "
foreground={foregroundColor}
background={backgroundColor}
colors={nominal}
foreground={foregroundColor!}
background={backgroundColor!}
colors={nominal!}
/>
<ColorStrip
label="Nominal+"
foreground={foregroundColor}
background={backgroundColor}
colors={nominalBold}
labelColors={nominalMuted}
foreground={foregroundColor!}
background={backgroundColor!}
colors={nominalBold!}
labelColors={nominalMuted!}
/>
<ColorStrip
label="Nominal-"
foreground={foregroundColor}
background={backgroundColor}
colors={nominalMuted}
labelColors={nominalBold}
foreground={foregroundColor!}
background={backgroundColor!}
colors={nominalMuted!}
labelColors={nominalBold!}
/>
<ColorBand
label="Sequential"
foreground={foregroundColor}
colors={sequential}
foreground={foregroundColor!}
colors={sequential!}
width={BAND_WIDTH}
/>
<ColorBand
label="Sequential2"
foreground={foregroundColor}
colors={sequential2}
foreground={foregroundColor!}
colors={sequential2!}
width={BAND_WIDTH}
/>
<ColorBand
label="Diverging"
foreground={foregroundColor}
colors={diverging}
foreground={foregroundColor!}
colors={diverging!}
width={BAND_WIDTH}
/>
<ColorBand
label="Diverging2"
foreground={foregroundColor}
colors={diverging2}
foreground={foregroundColor!}
colors={diverging2!}
width={BAND_WIDTH}
/>
<ColorBand
label="Greys"
foreground={foregroundColor}
colors={greys}
foreground={foregroundColor!}
colors={greys!}
width={BAND_WIDTH}
/>
</div>

Просмотреть файл

@ -2,7 +2,7 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { CSSProperties, FC } from 'react'
import type { CSSProperties, FC } from 'react'
import './index.css'

Просмотреть файл

@ -10,7 +10,7 @@ import {
Position,
} from '@fluentui/react'
import { ColorBlindnessMode, colorBlindnessInfo } from '@thematic/color'
import { ThemeListing, Theme } from '@thematic/core'
import type { ThemeListing, Theme } from '@thematic/core'
import { ColorPickerButton } from '@thematic/fluent'
import { useCallback, FC, useMemo } from 'react'
import { EnumDropdown } from '../EnumDropdown'
@ -58,7 +58,7 @@ export const ControlPanel: FC<ControlPanelProps> = ({
onDarkModeChange,
}) => {
const handleThemeChange = useCallback(
(event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption) => {
(_event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption) => {
if (option) {
const found = themes.find(t => t.id === option.key)
if (found) {
@ -91,12 +91,12 @@ export const ControlPanel: FC<ControlPanelProps> = ({
}, [darkMode, onDarkModeChange])
const handleDrawNodesChange = useCallback(
(event: React.MouseEvent<HTMLElement>, checked?: boolean) =>
(_event: React.MouseEvent<HTMLElement>, checked?: boolean) =>
onDrawNodesChange(!!checked),
[onDrawNodesChange],
)
const handleDrawLinksChange = useCallback(
(event: React.MouseEvent<HTMLElement>, checked?: boolean) =>
(_event: React.MouseEvent<HTMLElement>, checked?: boolean) =>
onDrawLinksChange(!!checked),
[onDrawLinksChange],
)

Просмотреть файл

@ -2,9 +2,9 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { Theme } from '@thematic/core'
import type { Theme } from '@thematic/core'
import { ColorPicker, ColorPickerLayout } from '@thematic/fluent'
import { FC } from 'react'
import type { FC } from 'react'
import './index.css'

Просмотреть файл

@ -2,8 +2,8 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { Theme } from '@thematic/core'
import { FC } from 'react'
import type { Theme } from '@thematic/core'
import type { FC } from 'react'
import { useSetTheme } from '../../state'
import { ColorSelection } from './ColorSelection'
import './index.css'

Просмотреть файл

@ -26,10 +26,9 @@ export interface EnumDropdownProps<E> {
*/
export function EnumDropdown<E>({
enumeration,
label,
selected,
onChange = () => null,
styles,
...props
}: EnumDropdownProps<E>): JSX.Element {
const options = useMemo(
() =>
@ -39,7 +38,7 @@ export function EnumDropdown<E>({
[enumeration],
)
const handleChange = useCallback(
(e: React.FormEvent, v: IDropdownOption | undefined) => {
(_e: React.FormEvent, v: IDropdownOption | undefined) => {
if (v) {
setSelectedKey(v.key)
onChange(v.key)
@ -51,11 +50,10 @@ export function EnumDropdown<E>({
const [selectedKey, setSelectedKey] = useState<string | number>(key)
return (
<Dropdown
label={label}
options={options}
selectedKey={selectedKey}
onChange={handleChange}
styles={styles}
{...props}
/>
)
}

Просмотреть файл

@ -22,7 +22,10 @@ const FluentControlsComponent: FC<FluentControlsComponentProps> = ({
}) => {
const theme = useThematic()
const [scale, setScale] = useState<string>('<none>')
const handleScaleChange = useCallback((e, option) => setScale(option.key), [])
const handleScaleChange = useCallback(
(_e, option) => setScale(option.key),
[],
)
const [scaleType, setScaleType] = useState<ScaleType>(ScaleType.Linear)
const handleScaleTypeChange = useCallback(type => setScaleType(type), [])
const handlePickerChange = useCallback(t => themeLoaded(t), [themeLoaded])
@ -70,6 +73,7 @@ const FluentControlsComponent: FC<FluentControlsComponentProps> = ({
that pre-loads Thematic scale types.
</p>
<ScaleTypeChoiceGroup
label=""
selectedType={scaleType}
onChange={handleScaleTypeChange}
/>

Просмотреть файл

@ -2,8 +2,8 @@
* Copyright (c) Microsoft. All rights reserved.
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { IPalette, Theme } from '@fluentui/react'
import { FluentTheme } from '@thematic/fluent'
import type { IPalette, Theme } from '@fluentui/react'
import type { FluentTheme } from '@thematic/fluent'
import { FC, useMemo } from 'react'
import { ColorStrip } from '../ColorStrip'

Просмотреть файл

@ -3,7 +3,7 @@
* Licensed under the MIT license. See LICENSE file in the project.
*/
import { TextField } from '@fluentui/react'
import { FC } from 'react'
import type { FC } from 'react'
export interface JSONEditorProps {
value: unknown

Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше