@bigbluebutton/tlschema 2.0.0-alpha.19

package/src/styles/StyleProp.ts

@@ -0,0 +1,105 @@
+import { T } from '@bigbluebutton/validate'
+
+/**
+ * A `StyleProp` is a property of a shape that follows some special rules.
+ *
+ * 1. The same value can be set on lots of shapes at the same time.
+ *
+ * 2. The last used value is automatically saved and applied to new shapes.
+ *
+ * For example, {@link DefaultColorStyle} is a style prop used by tldraw's default shapes to set
+ * their color. If you try selecting several shapes on tldraw.com and changing their color, you'll
+ * see that the color is applied to all of them. Then, if you draw a new shape, it'll have the same
+ * color as the one you just set.
+ *
+ * You can use styles in your own shapes by either defining your own (see {@link StyleProp.define}
+ * and {@link StyleProp.defineEnum}) or using tldraw's default ones, like {@link DefaultColorStyle}.
+ * When you define a shape, pass a `props` object describing all of your shape's properties, using
+ * `StyleProp`s for the ones you want to be styles. See the
+ * {@link https://github.com/bigbluebutton/tldraw/tree/main/apps/examples | custom styles example}
+ * for more.
+ *
+ * @public
+ */
+export class StyleProp<Type> implements T.Validatable<Type> {
+	/**
+	 * Define a new {@link StyleProp}.
+	 *
+	 * @param uniqueId - Each StyleProp must have a unique ID. We recommend you prefix this with
+	 * your app/library name.
+	 * @param options -
+	 * - `defaultValue`: The default value for this style prop.
+	 *
+	 * - `type`: Optionally, describe what type of data you expect for this style prop.
+	 *
+	 * @example
+	 * ```ts
+	 * import {T} from '@bigbluebutton/validate'
+	 * import {StyleProp} from '@bigbluebutton/tlschema'
+	 *
+	 * const MyLineWidthProp = StyleProp.define('myApp:lineWidth', {
+	 *   defaultValue: 1,
+	 *   type: T.number,
+	 * })
+	 * ```
+	 * @public
+	 */
+	static define<Type>(
+		uniqueId: string,
+		options: { defaultValue: Type; type?: T.Validatable<Type> }
+	) {
+		const { defaultValue, type = T.any } = options
+		return new StyleProp<Type>(uniqueId, defaultValue, type)
+	}
+
+	/**
+	 * Define a new {@link StyleProp} as a list of possible values.
+	 *
+	 * @param uniqueId - Each StyleProp must have a unique ID. We recommend you prefix this with
+	 * your app/library name.
+	 * @param options -
+	 * - `defaultValue`: The default value for this style prop.
+	 *
+	 * - `values`: An array of possible values of this style prop.
+	 *
+	 * @example
+	 * ```ts
+	 * import {StyleProp} from '@bigbluebutton/tlschema'
+	 *
+	 * const MySizeProp = StyleProp.defineEnum('myApp:size', {
+	 *   defaultValue: 'medium',
+	 *   values: ['small', 'medium', 'large'],
+	 * })
+	 * ```
+	 */
+	static defineEnum<const Values extends readonly unknown[]>(
+		uniqueId: string,
+		options: { defaultValue: Values[number]; values: Values }
+	) {
+		const { defaultValue, values } = options
+		return new EnumStyleProp<Values[number]>(uniqueId, defaultValue, values)
+	}
+
+	/** @internal */
+	protected constructor(
+		readonly id: string,
+		readonly defaultValue: Type,
+		readonly type: T.Validatable<Type>
+	) {}
+
+	validate(value: unknown) {
+		return this.type.validate(value)
+	}
+}
+
+/**
+ * See {@link StyleProp} & {@link StyleProp.defineEnum}
+ *
+ * @public
+ */
+export class EnumStyleProp<T> extends StyleProp<T> {
+	/** @internal */
+	constructor(id: string, defaultValue: T, readonly values: readonly T[]) {
+		super(id, defaultValue, T.literalEnum(...values))
+	}
+}

package/src/styles/TLColorStyle.ts

@@ -0,0 +1,296 @@
+import { Expand } from '@bigbluebutton/utils'
+import { T } from '@bigbluebutton/validate'
+import { StyleProp } from './StyleProp'
+
+const colors = [
+	'black',
+	'grey',
+	'light-violet',
+	'violet',
+	'blue',
+	'light-blue',
+	'yellow',
+	'orange',
+	'green',
+	'light-green',
+	'light-red',
+	'red',
+] as const
+
+/** @public */
+export type TLDefaultColorThemeColor = {
+	solid: string
+	semi: string
+	pattern: string
+	highlight: {
+		srgb: string
+		p3: string
+	}
+}
+
+/** @public */
+export type TLDefaultColorTheme = Expand<
+	{
+		id: 'light' | 'dark'
+		text: string
+		background: string
+		solid: string
+	} & Record<(typeof colors)[number], TLDefaultColorThemeColor>
+>
+
+/** @public */
+export const DefaultColorThemePalette: {
+	lightMode: TLDefaultColorTheme
+	darkMode: TLDefaultColorTheme
+} = {
+	lightMode: {
+		id: 'light',
+		text: '#000000',
+		background: 'rgb(249, 250, 251)',
+		solid: '#fcfffe',
+
+		black: {
+			solid: '#1d1d1d',
+			semi: '#e8e8e8',
+			pattern: '#494949',
+			highlight: {
+				srgb: '#fddd00',
+				p3: 'color(display-p3 0.972 0.8705 0.05)',
+			},
+		},
+		blue: {
+			solid: '#4263eb',
+			semi: '#dce1f8',
+			pattern: '#6681ee',
+			highlight: {
+				srgb: '#10acff',
+				p3: 'color(display-p3 0.308 0.6632 0.9996)',
+			},
+		},
+		green: {
+			solid: '#099268',
+			semi: '#d3e9e3',
+			pattern: '#39a785',
+			highlight: {
+				srgb: '#00ffc8',
+				p3: 'color(display-p3 0.2536 0.984 0.7981)',
+			},
+		},
+		grey: {
+			solid: '#adb5bd',
+			semi: '#eceef0',
+			pattern: '#bcc3c9',
+			highlight: {
+				srgb: '#cbe7f1',
+				p3: 'color(display-p3 0.8163 0.9023 0.9416)',
+			},
+		},
+		'light-blue': {
+			solid: '#4dabf7',
+			semi: '#ddedfa',
+			pattern: '#6fbbf8',
+			highlight: {
+				srgb: '#00f4ff',
+				p3: 'color(display-p3 0.1512 0.9414 0.9996)',
+			},
+		},
+		'light-green': {
+			solid: '#40c057',
+			semi: '#dbf0e0',
+			pattern: '#65cb78',
+			highlight: {
+				srgb: '#65f641',
+				p3: 'color(display-p3 0.563 0.9495 0.3857)',
+			},
+		},
+		'light-red': {
+			solid: '#ff8787',
+			semi: '#f4dadb',
+			pattern: '#fe9e9e',
+			highlight: {
+				srgb: '#ff7fa3',
+				p3: 'color(display-p3 0.9988 0.5301 0.6397)',
+			},
+		},
+		'light-violet': {
+			solid: '#e599f7',
+			semi: '#f5eafa',
+			pattern: '#e9acf8',
+			highlight: {
+				srgb: '#ff88ff',
+				p3: 'color(display-p3 0.9676 0.5652 0.9999)',
+			},
+		},
+		orange: {
+			solid: '#f76707',
+			semi: '#f8e2d4',
+			pattern: '#f78438',
+			highlight: {
+				srgb: '#ffa500',
+				p3: 'color(display-p3 0.9988 0.6905 0.266)',
+			},
+		},
+		red: {
+			solid: '#e03131',
+			semi: '#f4dadb',
+			pattern: '#e55959',
+			highlight: {
+				srgb: '#ff636e',
+				p3: 'color(display-p3 0.9992 0.4376 0.45)',
+			},
+		},
+		violet: {
+			solid: '#ae3ec9',
+			semi: '#ecdcf2',
+			pattern: '#bd63d3',
+			highlight: {
+				srgb: '#c77cff',
+				p3: 'color(display-p3 0.7469 0.5089 0.9995)',
+			},
+		},
+		yellow: {
+			solid: '#ffc078',
+			semi: '#f9f0e6',
+			pattern: '#fecb92',
+			highlight: {
+				srgb: '#fddd00',
+				p3: 'color(display-p3 0.972 0.8705 0.05)',
+			},
+		},
+	},
+	darkMode: {
+		id: 'dark',
+		text: '#f8f9fa',
+		background: '#212529',
+		solid: '#28292e',
+
+		black: {
+			solid: '#e1e1e1',
+			semi: '#2c3036',
+			pattern: '#989898',
+			highlight: {
+				srgb: '#d2b700',
+				p3: 'color(display-p3 0.8078 0.7225 0.0312)',
+			},
+		},
+		blue: {
+			solid: '#4156be',
+			semi: '#262d40',
+			pattern: '#3a4b9e',
+			highlight: {
+				srgb: '#0079d2',
+				p3: 'color(display-p3 0.0032 0.4655 0.7991)',
+			},
+		},
+		green: {
+			solid: '#3b7b5e',
+			semi: '#253231',
+			pattern: '#366a53',
+			highlight: {
+				srgb: '#009774',
+				p3: 'color(display-p3 0.0085 0.582 0.4604)',
+			},
+		},
+		grey: {
+			solid: '#93989f',
+			semi: '#33373c',
+			pattern: '#7c8187',
+			highlight: {
+				srgb: '#9cb4cb',
+				p3: 'color(display-p3 0.6299 0.7012 0.7856)',
+			},
+		},
+		'light-blue': {
+			solid: '#588fc9',
+			semi: '#2a3642',
+			pattern: '#4d7aa9',
+			highlight: {
+				srgb: '#00bdc8',
+				p3: 'color(display-p3 0.0023 0.7259 0.7735)',
+			},
+		},
+		'light-green': {
+			solid: '#599f57',
+			semi: '#2a3830',
+			pattern: '#4e874e',
+			highlight: {
+				srgb: '#00a000',
+				p3: 'color(display-p3 0.2711 0.6172 0.0195)',
+			},
+		},
+		'light-red': {
+			solid: '#c67877',
+			semi: '#3b3235',
+			pattern: '#a56767',
+			highlight: {
+				srgb: '#db005b',
+				p3: 'color(display-p3 0.7849 0.0585 0.3589)',
+			},
+		},
+		'light-violet': {
+			solid: '#b583c9',
+			semi: '#383442',
+			pattern: '#9770a9',
+			highlight: {
+				srgb: '#c400c7',
+				p3: 'color(display-p3 0.7024 0.0403 0.753)',
+			},
+		},
+		orange: {
+			solid: '#bf612e',
+			semi: '#3a2e2a',
+			pattern: '#9f552d',
+			highlight: {
+				srgb: '#d07a00',
+				p3: 'color(display-p3 0.7699 0.4937 0.0085)',
+			},
+		},
+		red: {
+			solid: '#aa3c37',
+			semi: '#36292b',
+			pattern: '#8f3734',
+			highlight: {
+				srgb: '#de002c',
+				p3: 'color(display-p3 0.7978 0.0509 0.2035)',
+			},
+		},
+		violet: {
+			solid: '#873fa3',
+			semi: '#31293c',
+			pattern: '#763a8b',
+			highlight: {
+				srgb: '#9e00ee',
+				p3: 'color(display-p3 0.5651 0.0079 0.8986)',
+			},
+		},
+		yellow: {
+			solid: '#cba371',
+			semi: '#3c3934',
+			pattern: '#fecb92',
+			highlight: {
+				srgb: '#d2b700',
+				p3: 'color(display-p3 0.8078 0.7225 0.0312)',
+			},
+		},
+	},
+}
+
+/** @public */
+export function getDefaultColorTheme(opts: { isDarkMode: boolean }): TLDefaultColorTheme {
+	return opts.isDarkMode ? DefaultColorThemePalette.darkMode : DefaultColorThemePalette.lightMode
+}
+
+/** @public */
+export const DefaultColorStyle = StyleProp.defineEnum('tldraw:color', {
+	defaultValue: 'black',
+	values: colors,
+})
+
+/** @public */
+export const DefaultLabelColorStyle = StyleProp.defineEnum('tldraw:labelColor', {
+	defaultValue: 'black',
+	values: colors,
+})
+
+/** @public */
+export type TLDefaultColorStyle = T.TypeOf<typeof DefaultColorStyle>

package/src/styles/TLDashStyle.ts

@@ -0,0 +1,11 @@
+import { T } from '@bigbluebutton/validate'
+import { StyleProp } from './StyleProp'
+
+/** @public */
+export const DefaultDashStyle = StyleProp.defineEnum('tldraw:dash', {
+	defaultValue: 'draw',
+	values: ['draw', 'solid', 'dashed', 'dotted'],
+})
+
+/** @public */
+export type TLDefaultDashStyle = T.TypeOf<typeof DefaultDashStyle>

package/src/styles/TLFillStyle.ts

@@ -0,0 +1,11 @@
+import { T } from '@bigbluebutton/validate'
+import { StyleProp } from './StyleProp'
+
+/** @public */
+export const DefaultFillStyle = StyleProp.defineEnum('tldraw:fill', {
+	defaultValue: 'none',
+	values: ['none', 'semi', 'solid', 'pattern'],
+})
+
+/** @public */
+export type TLDefaultFillStyle = T.TypeOf<typeof DefaultFillStyle>

package/src/styles/TLFontStyle.ts

@@ -0,0 +1,19 @@
+import { T } from '@bigbluebutton/validate'
+import { StyleProp } from './StyleProp'
+
+/** @public */
+export const DefaultFontStyle = StyleProp.defineEnum('tldraw:font', {
+	defaultValue: 'draw',
+	values: ['draw', 'sans', 'serif', 'mono'],
+})
+
+/** @public */
+export type TLDefaultFontStyle = T.TypeOf<typeof DefaultFontStyle>
+
+/** @public */
+export const DefaultFontFamilies = {
+	draw: "'tldraw_draw', sans-serif",
+	sans: "'tldraw_sans', sans-serif",
+	serif: "'tldraw_serif', serif",
+	mono: "'tldraw_mono', monospace",
+}

package/src/styles/TLHorizontalAlignStyle.ts

@@ -0,0 +1,11 @@
+import { T } from '@bigbluebutton/validate'
+import { StyleProp } from './StyleProp'
+
+/** @public */
+export const DefaultHorizontalAlignStyle = StyleProp.defineEnum('tldraw:horizontalAlign', {
+	defaultValue: 'middle',
+	values: ['start', 'middle', 'end', 'start-legacy', 'end-legacy', 'middle-legacy'],
+})
+
+/** @public */
+export type TLDefaultHorizontalAlignStyle = T.TypeOf<typeof DefaultHorizontalAlignStyle>

package/src/styles/TLSizeStyle.ts

@@ -0,0 +1,11 @@
+import { T } from '@bigbluebutton/validate'
+import { StyleProp } from './StyleProp'
+
+/** @public */
+export const DefaultSizeStyle = StyleProp.defineEnum('tldraw:size', {
+	defaultValue: 'm',
+	values: ['s', 'm', 'l', 'xl'],
+})
+
+/** @public */
+export type TLDefaultSizeStyle = T.TypeOf<typeof DefaultSizeStyle>

package/src/styles/TLVerticalAlignStyle.ts

@@ -0,0 +1,11 @@
+import { T } from '@bigbluebutton/validate'
+import { StyleProp } from './StyleProp'
+
+/** @public */
+export const DefaultVerticalAlignStyle = StyleProp.defineEnum('tldraw:verticalAlign', {
+	defaultValue: 'middle',
+	values: ['start', 'middle', 'end'],
+})
+
+/** @public */
+export type TLDefaultVerticalAlignStyle = T.TypeOf<typeof DefaultVerticalAlignStyle>

package/src/translations/languages.ts

@@ -0,0 +1,39 @@
+// This file is automatically generated by scripts/refresh-assets.ts.
+// Do not edit manually.
+
+/** @public */
+export const LANGUAGES = [
+	{ locale: 'ar', label: 'عربي' },
+	{ locale: 'ca', label: 'Català' },
+	{ locale: 'da', label: 'Danish' },
+	{ locale: 'de', label: 'Deutsch' },
+	{ locale: 'en', label: 'English' },
+	{ locale: 'es', label: 'Español' },
+	{ locale: 'fa', label: 'فارسی' },
+	{ locale: 'fi', label: 'Suomi' },
+	{ locale: 'fr', label: 'Français' },
+	{ locale: 'gl', label: 'Galego' },
+	{ locale: 'he', label: 'עברית' },
+	{ locale: 'it', label: 'Italiano' },
+	{ locale: 'ja', label: '日本語' },
+	{ locale: 'ko-kr', label: '한국어' },
+	{ locale: 'ku', label: 'کوردی' },
+	{ locale: 'hi-in', label: 'हिन्दी' },
+	{ locale: 'hu', label: 'Magyar' },
+	{ locale: 'my', label: 'မြန်မာစာ' },
+	{ locale: 'ne', label: 'नेपाली' },
+	{ locale: 'no', label: 'Norwegian' },
+	{ locale: 'pl', label: 'Polski' },
+	{ locale: 'pt-br', label: 'Português - Brasil' },
+	{ locale: 'pt-pt', label: 'Português - Europeu' },
+	{ locale: 'ro', label: 'Română' },
+	{ locale: 'ru', label: 'Russian' },
+	{ locale: 'sv', label: 'Svenska' },
+	{ locale: 'te', label: 'తెలుగు' },
+	{ locale: 'th', label: 'ภาษาไทย' },
+	{ locale: 'tr', label: 'Türkçe' },
+	{ locale: 'uk', label: 'Ukrainian' },
+	{ locale: 'vi', label: 'Tiếng Việt' },
+	{ locale: 'zh-cn', label: 'Chinese - Simplified' },
+	{ locale: 'zh-tw', label: '繁體中文 (台灣)' },
+] as const

package/src/translations/translations.test.ts

@@ -0,0 +1,43 @@
+import { _getDefaultTranslationLocale } from './translations'
+
+type DefaultLanguageTest = {
+	name: string
+	input: string[]
+	output: string
+}
+
+describe('Choosing a sensible default translation locale', () => {
+	const tests: DefaultLanguageTest[] = [
+		{
+			name: 'finds a matching language locale',
+			input: ['fr'],
+			output: 'fr',
+		},
+		{
+			name: 'finds a matching region locale',
+			input: ['pt-PT'],
+			output: 'pt-pt',
+		},
+		{
+			name: 'picks a region locale if no language locale available',
+			input: ['pt'],
+			output: 'pt-br',
+		},
+		{
+			name: 'picks a language locale if no region locale available',
+			input: ['fr-CA'],
+			output: 'fr',
+		},
+		{
+			name: 'picks the first language that loosely matches',
+			input: ['fr-CA', 'pt-PT'],
+			output: 'fr',
+		},
+	]
+
+	for (const test of tests) {
+		it(test.name, () => {
+			expect(_getDefaultTranslationLocale(test.input)).toEqual(test.output)
+		})
+	}
+})

package/src/translations/translations.ts

@@ -0,0 +1,73 @@
+import { LANGUAGES } from './languages'
+
+/** @public */
+export { LANGUAGES }
+
+/** @public */
+export type TLLanguage = (typeof LANGUAGES)[number]
+// {
+// 	readonly locale: string
+// 	readonly label: string
+// }
+
+/** @public */
+export function getDefaultTranslationLocale(): TLLanguage['locale'] {
+	const locales = typeof window !== 'undefined' ? window.navigator.languages ?? ['en'] : ['en']
+	return _getDefaultTranslationLocale(locales)
+}
+
+/** @internal */
+export function _getDefaultTranslationLocale(locales: readonly string[]): TLLanguage['locale'] {
+	for (const locale of locales) {
+		const supportedLocale = getSupportedLocale(locale)
+		if (supportedLocale) {
+			return supportedLocale
+		}
+	}
+	return 'en'
+}
+
+/** @public */
+const DEFAULT_LOCALE_REGIONS: { [locale: string]: TLLanguage['locale'] } = {
+	zh: 'zh-cn',
+	pt: 'pt-br',
+	ko: 'ko-kr',
+	hi: 'hi-in',
+}
+
+/** @public */
+function getSupportedLocale(locale: string): TLLanguage['locale'] | null {
+	// If we have an exact match, return it!
+	// (e.g. if the user has 'fr' and we have 'fr')
+	// (or if the user has 'pt-BR' and we have 'pt-br')
+	const exactMatch = LANGUAGES.find((t) => t.locale === locale.toLowerCase())
+	if (exactMatch) {
+		return exactMatch.locale
+	}
+
+	// Otherwise, we need to be more flexible...
+	const [language, region] = locale.split(/[-_]/).map((s) => s.toLowerCase())
+
+	// If the user's language has a region...
+	// let's try to find non-region-specific locale for them
+	// (e.g. if they have 'fr-CA' but we only have 'fr')
+	if (region) {
+		const languageMatch = LANGUAGES.find((t) => t.locale === language)
+		if (languageMatch) {
+			return languageMatch.locale
+		}
+	}
+
+	// If the user's language doesn't have a region...
+	// let's try to find a region-specific locale for them
+	// (e.g. if they have 'pt' but we only have 'pt-pt' or 'pt-br')
+	//
+	// In this case, we choose the hard-coded default region for that language
+	if (language in DEFAULT_LOCALE_REGIONS) {
+		return DEFAULT_LOCALE_REGIONS[language]
+	}
+
+	// Oh no! We don't have a translation for this language!
+	// Let's give up...
+	return null
+}

package/src/util-types.ts

@@ -0,0 +1,2 @@
+/** @public */
+export type SetValue<T extends Set<any>> = T extends Set<infer U> ? U : never