diff --git a/createJestConfig.js b/createJestConfig.js index 44a2f579dd7..52a848601f4 100644 --- a/createJestConfig.js +++ b/createJestConfig.js @@ -20,14 +20,7 @@ const regexMapper = { '^config:.*$': './test/undefined', } -const partPackages = [ - 'base', - 'form-builder', - 'desk-tool', - 'code-input', - 'default-login', - 'data-aspects', -] +const partPackages = ['base', 'form-builder', 'desk-tool', 'default-login', 'data-aspects'] /** * Takes a list of webpack-compatible aliases and converts them into jest module diff --git a/packages/@sanity/code-input/.babelrc b/packages/@sanity/code-input/.babelrc deleted file mode 100644 index 7e81a5c974c..00000000000 --- a/packages/@sanity/code-input/.babelrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "extends": "../../../.babelrc", - "presets": ["@babel/react", "@babel/typescript"] -} diff --git a/packages/@sanity/code-input/.gitignore b/packages/@sanity/code-input/.gitignore deleted file mode 100644 index 7b3ff76cddf..00000000000 --- a/packages/@sanity/code-input/.gitignore +++ /dev/null @@ -1,19 +0,0 @@ -# Logs -*.log - -# Compiled files -lib - -# Coverage directories used by tools like istanbul -coverage -.nyc_output - -# Dependency directories -node_modules - -# UMD bundle -umd - -# Lockfiles -yarn.lock -dist diff --git a/packages/@sanity/code-input/.npmignore b/packages/@sanity/code-input/.npmignore deleted file mode 100644 index 090dddf4cb7..00000000000 --- a/packages/@sanity/code-input/.npmignore +++ /dev/null @@ -1,7 +0,0 @@ -.babelrc -.editorconfig -.eslintignore -.eslintrc -src -test -tsconfig.tsbuildinfo diff --git a/packages/@sanity/code-input/LICENSE b/packages/@sanity/code-input/LICENSE deleted file mode 100644 index 3f52e9425f3..00000000000 --- a/packages/@sanity/code-input/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2016 - 2022 Sanity.io - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/packages/@sanity/code-input/README.md b/packages/@sanity/code-input/README.md deleted file mode 100644 index 6df933ef7be..00000000000 --- a/packages/@sanity/code-input/README.md +++ /dev/null @@ -1,138 +0,0 @@ -# @sanity/code-input - -Code input for [Sanity](https://sanity.io/). - -Currently only a subset of languages and features are exposed, over time we will implement a richer set of options. - -## Installation - -``` -sanity install @sanity/code-input -``` - -## Usage - -Use it in your schema types: - -```js -// [...] -{ - fields: [ - // [...] - { - name: 'exampleUsage', - title: 'Example usage', - type: 'code', - }, - ] -} -``` - -Note that the above only works if you import and use the `all:part:@sanity/base/schema-type` part in your schema. - -## Options - -- `language` - Default language for this code field -- `languageAlternatives` - Array of languages that should be available (se its format in the example below) -- `theme` - Name of the theme to use. - - Possible values include: `['github', 'monokai', 'terminal', 'tomorrow']`. - - For the full list and a live playground, refer to the [react-ace page](http://securingsincity.github.io/react-ace/). -- `withFilename` - Boolean option to display input field for filename - -```js -// ...fields... -{ - name: 'exampleUsage', - title: 'Example usage', - type: 'code', - options: { - theme: 'solarized_dark', - language: 'js', - languageAlternatives: [ - {title: 'Javascript', value: 'js'}, - {title: 'HTML', value: 'html'}, - {title: 'CSS', value: 'css'}, - {title: 'Rust', value: 'rust', mode:'rust'}, - {title: 'SASS', value: 'sass'}, - ] - } -} -``` - -## Add support for more languages - -Only a subset of languages are supported by default (see full list [here](https://github.com/sanity-io/sanity/blob/current/packages/@sanity/code-input/src/config.ts#L4)). You can add support for other languages by importing the ace mode yourself, and specifying `mode` for the `languageAlternatives` schema config. - -Example: Add support for the Rust Programming Language - -```js -// import rust support for ace, see https://github.com/securingsincity/react-ace for more details -import 'ace-builds/src-noconflict/mode-rust' - -{ - name: 'exampleUsage', - title: 'Example usage', - type: 'code', - options: { - languageAlternatives: [ - {title: 'Javascript', value: 'js'}, - { - title: 'Rust', - value: 'rust', - mode:'rust' // <- specify the mode to use here. Make sure this mode is also imported from ace-builds (see above) - }, - ] - } -} -``` - -## Data model - -```js -{ - _type: 'code', - language: 'js', - highlightedLines: [1, 2], - code: 'const foo = "bar"\nconsole.log(foo.toUpperCase())\n// BAR' -} -``` - -## Example usage in frontend (React) - -You can use any syntax highlighter you want - but not all of them might support highlighted lines or the syntax you've defined. - -As outlined above, the actual code is stored in a `code` property, so if your schema has a field called `codeExample` of type `code`, the property you'd want to pass to the highlighter would be `codeExample.code`. - -Here's an example using [react-refractor](https://github.com/rexxars/react-refractor): - -```jsx -import React from 'react' -import Refractor from 'react-refractor' -import js from 'refractor/lang/javascript' - -Refractor.registerLanguage(js) - -export function Code(props) { - return ( - - ) -} - -export default Code -``` - -Other syntax highlighters include: - -- [react-lowlight](https://github.com/rexxars/react-lowlight) -- [react-syntax-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter) -- [highlight.js](https://github.com/highlightjs/highlight.js) -- [prism](https://github.com/PrismJS/prism) - -## License - -MIT-licensed. See LICENSE. diff --git a/packages/@sanity/code-input/package.json b/packages/@sanity/code-input/package.json deleted file mode 100644 index 2d6c4b8c97b..00000000000 --- a/packages/@sanity/code-input/package.json +++ /dev/null @@ -1,50 +0,0 @@ -{ - "name": "@sanity/code-input", - "version": "2.35.2", - "description": "Ace editor for editing code", - "main": "./lib/index.js", - "types": "./dist/dts", - "author": "Sanity.io ", - "license": "MIT", - "scripts": { - "clean": "rimraf lib dest" - }, - "keywords": [ - "sanity", - "cms", - "headless", - "realtime", - "content", - "code-input", - "sanity-plugin", - "code-editor" - ], - "dependencies": { - "@reach/auto-id": "^0.13.2", - "@sanity/base": "2.35.2", - "@sanity/form-builder": "2.35.2", - "@sanity/icons": "^1.3.4", - "@sanity/types": "2.35.0", - "@sanity/ui": "^0.37.22", - "@sanity/util": "2.35.0", - "ace-builds": "^1.4.13", - "react-ace": "^9.5.0" - }, - "devDependencies": { - "rimraf": "^2.7.1" - }, - "peerDependencies": { - "prop-types": "^15.6 || ^16", - "react": "^16.9 || ^17", - "styled-components": "^5.2.0" - }, - "bugs": { - "url": "https://github.com/sanity-io/sanity/issues" - }, - "homepage": "https://www.sanity.io/", - "repository": { - "type": "git", - "url": "git+https://github.com/sanity-io/sanity.git", - "directory": "packages/@sanity/code-input" - } -} diff --git a/packages/@sanity/code-input/sanity.json b/packages/@sanity/code-input/sanity.json deleted file mode 100644 index ef096b05124..00000000000 --- a/packages/@sanity/code-input/sanity.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "paths": { - "source": "./src", - "compiled": "./lib" - }, - "parts": [ - { - "name": "part:@sanity/form-builder/input/code", - "description": "An editor for code in sanity" - }, - { - "implements": "part:@sanity/form-builder/input/code", - "path": "CodeInput" - }, - { - "name": "part:@sanity/form-builder/input/code/schema", - "description": "An editor for code in sanity" - }, - { - "implements": "part:@sanity/base/schema-type", - "path": "schema" - }, - { - "implements": "part:@sanity/form-builder/input/code/schema", - "path": "deprecatedSchema" - } - ] -} diff --git a/packages/@sanity/code-input/src/@types/css.d.ts b/packages/@sanity/code-input/src/@types/css.d.ts deleted file mode 100644 index ece77dceb7a..00000000000 --- a/packages/@sanity/code-input/src/@types/css.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -declare module '*.css' { - const styles: Record - export = styles - export default styles -} diff --git a/packages/@sanity/code-input/src/CodeInput.tsx b/packages/@sanity/code-input/src/CodeInput.tsx deleted file mode 100644 index b4ec089ca3d..00000000000 --- a/packages/@sanity/code-input/src/CodeInput.tsx +++ /dev/null @@ -1,448 +0,0 @@ -import React, {useCallback, useEffect, useImperativeHandle, useRef} from 'react' -import {FormFieldPresence} from '@sanity/base/presence' -import {FormField, FormFieldSet} from '@sanity/base/components' -import {Path} from '@sanity/types' -import {Card, Select, TextInput} from '@sanity/ui' -import * as PathUtils from '@sanity/util/paths' -import {ChangeIndicatorProvider} from '@sanity/base/change-indicators' -import PatchEvent, {set, unset, setIfMissing} from '@sanity/form-builder/PatchEvent' -import AceEditor from 'react-ace' -import styled from 'styled-components' -import {useId} from '@reach/auto-id' -import createHighlightMarkers, {highlightMarkersCSS} from './createHighlightMarkers' -import {CodeInputLanguage, CodeInputType, CodeInputValue} from './types' -/* eslint-disable-next-line import/no-unassigned-import */ -import './editorSupport' - -import { - LANGUAGE_ALIASES, - ACE_EDITOR_PROPS, - ACE_SET_OPTIONS, - SUPPORTED_LANGUAGES, - SUPPORTED_THEMES, - DEFAULT_THEME, - PATH_LANGUAGE, - PATH_CODE, - PATH_FILENAME, -} from './config' - -const EditorContainer = styled(Card)` - position: relative; - box-sizing: border-box; - overflow: hidden; - z-index: 0; - - .ace_editor { - font-family: ${({theme}) => theme.sanity.fonts.code.family}; - font-size: ${({theme}) => theme.sanity.fonts.code.sizes[1]}; - line-height: inherit; - } - - ${highlightMarkersCSS} - - &:not([disabled]):not([readonly]) { - &:focus, - &:focus-within { - box-shadow: 0 0 0 2px ${({theme}) => theme.sanity.color.base.focusRing}; - background-color: ${({theme}) => theme.sanity.color.base.bg}; - border-color: ${({theme}) => theme.sanity.color.base.focusRing}; - } - } -` - -export interface CodeInputProps { - compareValue?: CodeInputValue - focusPath: Path - level: number - onBlur: () => void - onChange: (...args: any[]) => void - onFocus: (path: Path) => void - presence: FormFieldPresence[] - readOnly?: boolean - type: CodeInputType - value?: CodeInputValue -} - -// Returns a string with the mode name if supported (because aliases), otherwise false -function isSupportedLanguage(mode: string) { - const alias = LANGUAGE_ALIASES[mode] - - if (alias) { - return alias - } - - const isSupported = SUPPORTED_LANGUAGES.find((lang) => lang.value === mode) - if (isSupported) { - return mode - } - - return false -} - -const CodeInput = React.forwardRef( - (props: CodeInputProps, ref: React.ForwardedRef<{focus: () => void}>) => { - const aceEditorRef = useRef() - const aceEditorId = useId() - - const { - onFocus, - onChange, - onBlur, - compareValue, - value, - presence, - type, - level, - readOnly, - focusPath, - } = props - - useImperativeHandle(ref, () => ({ - focus: () => { - aceEditorRef?.current?.editor?.focus() - }, - })) - - const handleLanguageFocus = useCallback(() => { - onFocus(PATH_LANGUAGE) - }, [onFocus]) - - const handleCodeFocus = useCallback(() => { - onFocus(PATH_CODE) - }, [onFocus]) - - const handleFilenameFocus = useCallback(() => { - onFocus(PATH_FILENAME) - }, [onFocus]) - - const handleFilenameChange = useCallback( - (event: React.ChangeEvent) => { - const val = event.target.value - const path = PATH_FILENAME - - onChange( - PatchEvent.from([setIfMissing({_type: type.name}), val ? set(val, path) : unset(path)]) - ) - }, - [onChange, type.name] - ) - - const getTheme = useCallback(() => { - const preferredTheme = type.options?.theme - return preferredTheme && SUPPORTED_THEMES.find((theme) => theme === preferredTheme) - ? preferredTheme - : DEFAULT_THEME - }, [type]) - - const handleToggleSelectLine = useCallback( - (lineNumber: number) => { - const editorSession = aceEditorRef.current?.editor?.getSession() - const backgroundMarkers = editorSession?.getMarkers(true) - const currentHighlightedLines = Object.keys(backgroundMarkers) - .filter((key) => backgroundMarkers[key].type === 'screenLine') - .map((key) => backgroundMarkers[key].range.start.row) - const currentIndex = currentHighlightedLines.indexOf(lineNumber) - if (currentIndex > -1) { - // toggle remove - currentHighlightedLines.splice(currentIndex, 1) - } else { - // toggle add - currentHighlightedLines.push(lineNumber) - currentHighlightedLines.sort() - } - onChange( - PatchEvent.from( - set( - currentHighlightedLines.map( - (line) => - // ace starts at line (row) 0, but we store it starting at line 1 - line + 1 - ), - ['highlightedLines'] - ) - ) - ) - }, - [aceEditorRef, onChange] - ) - - const handleGutterMouseDown = useCallback( - (event: any) => { - const target = event.domEvent.target - if (target.classList.contains('ace_gutter-cell')) { - const row = event.getDocumentPosition().row - handleToggleSelectLine(row) - } - }, - [handleToggleSelectLine] - ) - - useEffect(() => { - const editor = aceEditorRef?.current?.editor - return () => { - editor?.session?.removeListener('guttermousedown', handleGutterMouseDown) - } - }, [aceEditorRef, handleGutterMouseDown]) - - const handleEditorLoad = useCallback( - (editor: any) => { - editor?.on('guttermousedown', handleGutterMouseDown) - }, - [handleGutterMouseDown] - ) - - const getLanguageAlternatives = useCallback((): { - title: string - value: string - mode?: string - }[] => { - const languageAlternatives = type.options?.languageAlternatives - if (!languageAlternatives) { - return SUPPORTED_LANGUAGES - } - - if (!Array.isArray(languageAlternatives)) { - throw new Error( - `'options.languageAlternatives' should be an array, got ${typeof languageAlternatives}` - ) - } - - return languageAlternatives.reduce((acc: CodeInputLanguage[], {title, value: val, mode}) => { - const alias = LANGUAGE_ALIASES[val] - if (alias) { - // eslint-disable-next-line no-console - console.warn( - `'options.languageAlternatives' lists a language with value "%s", which is an alias of "%s" - please replace the value to read "%s"`, - val, - alias, - alias - ) - - return acc.concat({title, value: alias, mode: mode}) - } - - if (!mode && !SUPPORTED_LANGUAGES.find((lang) => lang.value === val)) { - // eslint-disable-next-line no-console - console.warn( - `'options.languageAlternatives' lists a language which is not supported: "%s", syntax highlighting will be disabled.`, - val - ) - } - - return acc.concat({title, value: val, mode}) - }, []) - }, [type]) - - const handleCodeChange = useCallback( - (code: string) => { - const path = PATH_CODE - const fixedLanguage = type.options?.language - - onChange( - PatchEvent.from([ - setIfMissing({_type: type.name, language: fixedLanguage}), - code ? set(code, path) : unset(path), - ]) - ) - }, - [onChange, type] - ) - - const handleLanguageChange = useCallback( - (event: React.ChangeEvent) => { - const val = event.currentTarget.value - const path = PATH_LANGUAGE - - onChange( - PatchEvent.from([setIfMissing({_type: type.name}), val ? set(val, path) : unset(path)]) - ) - }, - [onChange, type.name] - ) - - const languages = getLanguageAlternatives().slice() - - const selectedLanguage = props?.value?.language - ? languages.find((item: {value: string | undefined}) => item.value === props?.value?.language) - : undefined - - const languageField = type.fields.find((field) => field.name === 'language') - const filenameField = type.fields.find((field) => field.name === 'filename') - - const languageCompareValue = PathUtils.get(compareValue, PATH_LANGUAGE) - const codeCompareValue = PathUtils.get(compareValue, PATH_CODE) - const filenameCompareValue = PathUtils.get(compareValue, PATH_FILENAME) - - const languagePresence = presence.filter((presenceItem) => - PathUtils.startsWith(PATH_LANGUAGE, presenceItem.path) - ) - const codePresence = presence.filter((presenceItem) => - PathUtils.startsWith(PATH_CODE, presenceItem.path) - ) - - const filenamePresence = presence.filter((presenceItem) => - PathUtils.startsWith(PATH_FILENAME, presenceItem.path) - ) - const renderLanguageAlternatives = useCallback(() => { - return ( - - - - - - ) - }, [ - focusPath, - handleLanguageChange, - handleLanguageFocus, - languageCompareValue, - languageField?.title, - languagePresence, - languages, - level, - onBlur, - readOnly, - selectedLanguage?.value, - ]) - - const renderFilenameInput = useCallback(() => { - return ( - - - - - - ) - }, [ - filenameCompareValue, - filenameField?.placeholder, - filenameField?.title, - filenamePresence, - focusPath, - handleFilenameChange, - handleFilenameFocus, - level, - onBlur, - value?.filename, - ]) - - const renderEditor = useCallback(() => { - const fixedLanguage = type.options?.language - - const language = value?.language || fixedLanguage - - // the language config from the schema - const configured = languages.find((entry) => entry.value === language) - - // is the language officially supported (e.g. we import the mode by default) - const supported = language && isSupportedLanguage(language) - - const mode = configured?.mode || (supported ? supported : 'text') - - return ( - - - - - - - - ) - }, [ - type.options?.language, - value, - languages, - focusPath, - codeCompareValue, - level, - codePresence, - readOnly, - getTheme, - handleCodeChange, - aceEditorId, - handleEditorLoad, - handleCodeFocus, - onBlur, - ]) - - return ( - - {!type.options?.language && renderLanguageAlternatives()} - {type?.options?.withFilename && renderFilenameInput()} - {renderEditor()} - - ) - } -) - -CodeInput.displayName = 'CodeInput' - -export default CodeInput diff --git a/packages/@sanity/code-input/src/PreviewCode.tsx b/packages/@sanity/code-input/src/PreviewCode.tsx deleted file mode 100644 index a33f722e079..00000000000 --- a/packages/@sanity/code-input/src/PreviewCode.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import React, {useCallback, useEffect, useRef} from 'react' -import AceEditor from 'react-ace' -import styled from 'styled-components' -import {Box} from '@sanity/ui' -import {ACE_EDITOR_PROPS, ACE_SET_OPTIONS} from './config' -import createHighlightMarkers from './createHighlightMarkers' -import {CodeInputType, CodeInputValue} from './types' -/* eslint-disable-next-line import/no-unassigned-import */ -import './editorSupport' - -const PreviewContainer = styled(Box)` - position: relative; -` - -const PreviewInner = styled(Box)` - background-color: #272822; - - .ace_editor { - box-sizing: border-box; - cursor: default; - pointer-events: none; - } - - .ace_content { - box-sizing: border-box; - overflow: hidden; - } -` - -export interface PreviewCodeProps { - type?: CodeInputType - value?: CodeInputValue -} - -export default function PreviewCode(props: PreviewCodeProps) { - const aceEditorRef = useRef() - - useEffect(() => { - if (!aceEditorRef?.current) return - - const editor = aceEditorRef.current?.editor - - if (editor) { - // Avoid cursor and focus tracking by Ace - editor.renderer.$cursorLayer.element.style.opacity = 0 - editor.textInput.getElement().disabled = true - } - }, []) - - const handleEditorChange = useCallback(() => { - // do nothing when the editor changes - }, []) - - const {value, type} = props - const fixedLanguage = type?.options?.language - - const mode = value?.language || fixedLanguage || 'text' - - return ( - - - - - - ) -} diff --git a/packages/@sanity/code-input/src/config.ts b/packages/@sanity/code-input/src/config.ts deleted file mode 100644 index 5adbabc6ff1..00000000000 --- a/packages/@sanity/code-input/src/config.ts +++ /dev/null @@ -1,45 +0,0 @@ -import {CodeInputLanguage} from './types' - -// NOTE: MAKE SURE THESE ALIGN WITH IMPORTS IN ./editorSupport -export const SUPPORTED_LANGUAGES: CodeInputLanguage[] = [ - {title: 'Batch file', value: 'batchfile'}, - {title: 'C#', value: 'csharp'}, - {title: 'CSS', value: 'css'}, - {title: 'Go', value: 'golang'}, - {title: 'GROQ', value: 'groq'}, - {title: 'HTML', value: 'html'}, - {title: 'Java', value: 'java'}, - {title: 'JavaScript', value: 'javascript'}, - {title: 'JSON', value: 'json'}, - {title: 'JSX', value: 'jsx'}, - {title: 'Markdown', value: 'markdown'}, - {title: 'MySQL', value: 'mysql'}, - {title: 'PHP', value: 'php'}, - {title: 'Plain text', value: 'text'}, - {title: 'Python', value: 'python'}, - {title: 'Ruby', value: 'ruby'}, - {title: 'SASS', value: 'sass'}, - {title: 'SCSS', value: 'scss'}, - {title: 'sh', value: 'sh'}, - {title: 'TSX', value: 'tsx'}, - {title: 'TypeScript', value: 'typescript'}, - {title: 'XML', value: 'xml'}, - {title: 'YAML', value: 'yaml'}, -] - -export const LANGUAGE_ALIASES: Record = {js: 'javascript'} - -export const SUPPORTED_THEMES = ['github', 'monokai', 'terminal', 'tomorrow'] - -export const DEFAULT_THEME = 'tomorrow' - -export const ACE_SET_OPTIONS = { - useSoftTabs: true, - navigateWithinSoftTabs: true /* note only supported by ace v1.2.7 or higher */, -} - -export const ACE_EDITOR_PROPS = {$blockScrolling: true} - -export const PATH_LANGUAGE = ['language'] -export const PATH_CODE = ['code'] -export const PATH_FILENAME = ['filename'] diff --git a/packages/@sanity/code-input/src/createHighlightMarkers.ts b/packages/@sanity/code-input/src/createHighlightMarkers.ts deleted file mode 100644 index 40955d54d29..00000000000 --- a/packages/@sanity/code-input/src/createHighlightMarkers.ts +++ /dev/null @@ -1,24 +0,0 @@ -import {IMarker} from 'react-ace' -import {css} from 'styled-components' - -export const highlightMarkersCSS = css` - .ace_editor_markers_highlight { - position: absolute; - background-color: ${({theme}) => theme.sanity.color.solid.primary.enabled.bg}; - opacity: 0.2; - width: 100% !important; - border-radius: 0 !important; - } -` - -export default function createHighlightMarkers(rows: number[]): IMarker[] { - return rows.map((row) => ({ - startRow: Number(row) - 1, - startCol: 0, - endRow: Number(row) - 1, - endCol: +Infinity, - className: 'ace_editor_markers_highlight', - type: 'screenLine', - inFront: true, - })) -} diff --git a/packages/@sanity/code-input/src/deprecatedSchema.ts b/packages/@sanity/code-input/src/deprecatedSchema.ts deleted file mode 100644 index c62efbb15d3..00000000000 --- a/packages/@sanity/code-input/src/deprecatedSchema.ts +++ /dev/null @@ -1,19 +0,0 @@ -export default (() => { - /* eslint-disable no-console */ - console.warn('@sanity/code-input has been upgraded to automatically register its schema type.') - console.warn('Please remove the explicit import of `part:@sanity/base/schema-type`') - /* eslint-enable no-console */ - - return { - name: 'oldDeprecatedCodeTypeWhichYouShouldRemove', - type: 'object', - title: 'Deprecated code type', - fields: [ - { - title: 'Code', - name: 'code', - type: 'text', - }, - ], - } -})() diff --git a/packages/@sanity/code-input/src/editorSupport.ts b/packages/@sanity/code-input/src/editorSupport.ts deleted file mode 100644 index af126fa8444..00000000000 --- a/packages/@sanity/code-input/src/editorSupport.ts +++ /dev/null @@ -1,33 +0,0 @@ -/* eslint-disable import/no-unassigned-import */ -// NOTE: MAKE SURE THESE ALIGN WITH SUPPORTED_LANGUAGES in ./config -import './groq' - -import 'ace-builds/src-noconflict/mode-batchfile' -import 'ace-builds/src-noconflict/mode-csharp' -import 'ace-builds/src-noconflict/mode-css' -import 'ace-builds/src-noconflict/mode-golang' -import 'ace-builds/src-noconflict/mode-html' -import 'ace-builds/src-noconflict/mode-java' -import 'ace-builds/src-noconflict/mode-javascript' -import 'ace-builds/src-noconflict/mode-json' -import 'ace-builds/src-noconflict/mode-jsx' -import 'ace-builds/src-noconflict/mode-markdown' -import 'ace-builds/src-noconflict/mode-mysql' -import 'ace-builds/src-noconflict/mode-php' -import 'ace-builds/src-noconflict/mode-python' -import 'ace-builds/src-noconflict/mode-ruby' -import 'ace-builds/src-noconflict/mode-sass' -import 'ace-builds/src-noconflict/mode-scss' -import 'ace-builds/src-noconflict/mode-sh' -import 'ace-builds/src-noconflict/mode-text' -import 'ace-builds/src-noconflict/mode-tsx' -import 'ace-builds/src-noconflict/mode-typescript' -import 'ace-builds/src-noconflict/mode-xml' -import 'ace-builds/src-noconflict/mode-yaml' - -// Themes -import 'ace-builds/src-noconflict/theme-github' -import 'ace-builds/src-noconflict/theme-monokai' -import 'ace-builds/src-noconflict/theme-terminal' -import 'ace-builds/src-noconflict/theme-tomorrow' -/* eslint-enable import/no-unassigned-import */ diff --git a/packages/@sanity/code-input/src/getMedia.tsx b/packages/@sanity/code-input/src/getMedia.tsx deleted file mode 100644 index a8c7d8818d0..00000000000 --- a/packages/@sanity/code-input/src/getMedia.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import React from 'react' - -export function getMedia(language?: string) { - if (language === 'jsx') { - return ( - - - - - - - ) - } - - if (language === 'javascript') { - return ( - - - - - ) - } - - if (language === 'php') { - return ( - - - - - - - - - - ) - } - - if (language === 'json') { - return ( - - - - - - - - - - - - - ) - } - - return undefined -} diff --git a/packages/@sanity/code-input/src/groq.ts b/packages/@sanity/code-input/src/groq.ts deleted file mode 100644 index 4685f7eaefd..00000000000 --- a/packages/@sanity/code-input/src/groq.ts +++ /dev/null @@ -1,627 +0,0 @@ -/* eslint-disable no-undef */ -// Grammar from https://github.com/sanity-io/vscode-sanity -const rules = { - start: [ - { - include: '#query', - }, - { - include: '#value', - }, - { - include: '#pair', - }, - ], - '#query': [ - { - include: '#nullary-access-operator', - }, - { - include: '#arraylike', - }, - { - include: '#pipe', - }, - { - include: '#sort-order', - }, - { - include: '#filter', - }, - ], - '#variable': [ - { - token: 'variable.other.groq', - regex: /\$[_A-Za-z][_0-9A-Za-z]*/, - }, - ], - '#keyword': [ - { - token: 'keyword.other.groq', - regex: /\b(?:asc|desc|in|match)\b/, - }, - ], - '#comparison': [ - { - token: 'keyword.operator.comparison.groq', - // eslint-disable-next-line no-div-regex - regex: /==|!=|>=|<=||<|>/, - }, - ], - '#operator': [ - { - token: 'keyword.operator.arithmetic.groq', - regex: /\+|-|\*{1,2}|\/|%/, - }, - ], - '#pipe': [ - { - token: 'keyword.operator.pipe.groq', - regex: /\|/, - }, - ], - '#logical': [ - { - token: 'keyword.operator.logical.groq', - regex: /!|&&|\|\|/, - }, - ], - '#reference': [ - { - token: 'keyword.operator.reference.groq', - regex: /->/, - }, - ], - '#pair': [ - { - include: '#identifier', - }, - { - include: '#value', - }, - { - include: '#filter', - }, - { - token: 'keyword.operator.pair.groq', - regex: /[=]>/, - }, - ], - '#arraylike': [ - { - token: 'punctuation.definition.bracket.begin.groq', - regex: /\[/, - push: [ - { - token: ['text', 'keyword.operator.descendant.groq'], - regex: /(\])((?:\s*\.)?)/, - next: 'pop', - }, - { - include: '#range', - }, - { - include: '#filter', - }, - { - include: '#array-values', - }, - ], - }, - ], - '#array': [ - { - token: 'punctuation.definition.bracket.begin.groq', - regex: /\[/, - push: [ - { - token: 'punctuation.definition.bracket.end.groq', - regex: /\]/, - next: 'pop', - }, - { - include: '#array-values', - }, - { - defaultToken: 'meta.structure.array.groq', - }, - ], - }, - ], - '#range': [ - { - token: [ - 'meta.structure.range.groq', - 'constant.numeric.groq', - 'meta.structure.range.groq', - 'keyword.operator.range.groq', - 'meta.structure.range.groq', - 'constant.numeric.groq', - 'meta.structure.range.groq', - ], - regex: /(\s*)(\d+)(\s*)(\.{2,3})(\s*)(\d+)(\s*)/, - }, - ], - '#spread': [ - { - token: 'punctuation.definition.spread.begin.groq', - regex: /\.\.\./, - push: [ - { - include: '#array', - }, - { - include: '#function-call', - }, - { - include: '#projection', - }, - { - token: 'punctuation.definition.spread.end.groq', - regex: /(?=.)/, - next: 'pop', - }, - { - defaultToken: 'meta.structure.spread.groq', - }, - ], - }, - ], - '#array-values': [ - { - include: '#value', - }, - { - include: '#spread', - }, - { - token: 'punctuation.separator.array.groq', - regex: /,/, - }, - { - token: 'invalid.illegal.expected-array-separator.groq', - regex: /[^\s\]]/, - }, - ], - '#filter': [ - { - include: '#function-call', - }, - { - include: '#keyword', - }, - { - include: '#constant', - }, - { - include: '#identifier', - }, - { - include: '#value', - }, - { - include: '#comparison', - }, - { - include: '#operator', - }, - { - include: '#logical', - }, - ], - '#comments': [ - { - token: ['punctuation.definition.comment.groq', 'comment.line.double-slash.js'], - regex: /(\/\/)(.*$)/, - }, - ], - '#nullary-access-operator': [ - { - token: 'constant.language.groq', - regex: /[*@^]/, - }, - ], - '#constant': [ - { - token: 'constant.language.groq', - regex: /\b(?:true|false|null)\b/, - }, - ], - '#number': [ - { - token: 'constant.numeric.groq', - regex: /-?(?:0|[1-9]\d*)(?:(?:\.\d+)?(?:[eE][+-]?\d+)?)?/, - }, - ], - '#named-projection': [ - { - include: '#identifier', - }, - { - include: '#objectkey', - }, - { - include: '#projection', - }, - ], - '#projection': [ - { - token: 'punctuation.definition.projection.begin.groq', - regex: /\{/, - push: [ - { - token: 'punctuation.definition.projection.end.groq', - regex: /\}/, - next: 'pop', - }, - { - include: '#identifier', - }, - { - include: '#objectkey', - }, - { - include: '#named-projection', - }, - { - include: '#comments', - }, - { - include: '#spread', - }, - { - include: '#pair', - }, - { - token: 'punctuation.separator.projection.key-value.groq', - regex: /:/, - push: [ - { - token: 'punctuation.separator.projection.pair.groq', - regex: /,|(?=\})/, - next: 'pop', - }, - { - include: '#nullary-access-operator', - }, - { - include: '#arraylike', - }, - { - include: '#value', - }, - { - include: '#spread', - }, - { - include: '#identifier', - }, - { - include: '#operator', - }, - { - include: '#comparison', - }, - { - include: '#pair', - }, - { - token: 'invalid.illegal.expected-projection-separator.groq', - regex: /[^\s,]/, - }, - { - defaultToken: 'meta.structure.projection.value.groq', - }, - ], - }, - { - token: 'invalid.illegal.expected-projection-separator.groq', - regex: /[^\s},]/, - }, - { - defaultToken: 'meta.structure.projection.groq', - }, - ], - }, - ], - '#string': [ - { - include: '#single-string', - }, - { - include: '#double-string', - }, - ], - '#double-string': [ - { - token: 'punctuation.definition.string.begin.groq', - regex: /"/, - push: [ - { - token: 'punctuation.definition.string.end.groq', - regex: /"/, - next: 'pop', - }, - { - include: '#stringcontent', - }, - { - defaultToken: 'string.quoted.double.groq', - }, - ], - }, - ], - '#single-string': [ - { - token: 'punctuation.definition.string.single.begin.groq', - regex: /'/, - push: [ - { - token: 'punctuation.definition.string.single.end.groq', - regex: /'/, - next: 'pop', - }, - { - include: '#stringcontent', - }, - { - defaultToken: 'string.quoted.single.groq', - }, - ], - }, - ], - '#objectkey': [ - { - include: '#string', - }, - ], - '#stringcontent': [ - { - token: 'constant.character.escape.groq', - regex: /\\(?:["\\/bfnrt]|u[0-9a-fA-F]{4})/, - }, - { - token: 'invalid.illegal.unrecognized-string-escape.groq', - regex: /\\./, - }, - ], - '#sort-pair': [ - { - token: ['variable.other.readwrite.groq', 'text', 'keyword.other.groq'], - regex: /([_A-Za-z][_0-9A-Za-z]*)(?:(\s*)(asc|desc))?/, - }, - { - token: ['constant.language.groq', 'punctuation.definition.bracket.begin.groq'], - regex: /(@)(\[)/, - push: [ - { - token: ['punctuation.definition.bracket.begin.groq', 'text', 'keyword.other.groq'], - regex: /(\])(?:(\s*)(asc|desc))?/, - next: 'pop', - }, - { - include: '#string', - }, - ], - }, - ], - '#sort-order': [ - { - token: 'support.function.sortorder.begin.groq', - regex: /\border\s*\(/, - push: [ - { - token: 'support.function.sortorder.end.groq', - regex: /\)/, - next: 'pop', - }, - { - include: '#sort-pair', - }, - { - token: 'punctuation.separator.array.groq', - regex: /,/, - }, - { - token: 'invalid.illegal.expected-sort-separator.groq', - regex: /[^\s\]]/, - }, - { - defaultToken: 'support.function.sortorder.groq', - }, - ], - }, - ], - '#function-call': [ - { - include: '#function-var-arg', - }, - { - include: '#function-single-arg', - }, - { - include: '#function-round', - }, - ], - '#function-var-arg': [ - { - token: 'support.function.vararg.begin.groq', - regex: /\b(?:coalesce|select)\s*\(/, - push: [ - { - token: 'support.function.vararg.end.groq', - regex: /\)/, - next: 'pop', - }, - { - include: '#value', - }, - { - include: '#identifier', - }, - { - include: '#filter', - }, - { - include: '#pair', - }, - { - token: 'punctuation.separator.array.groq', - regex: /,/, - }, - { - defaultToken: 'support.function.vararg.groq', - }, - ], - }, - ], - '#function-single-arg': [ - { - token: 'support.function.singlearg.begin.groq', - regex: /\b(?:count|defined|length|path|references)\s*\(/, - push: [ - { - token: 'support.function.singlearg.end.groq', - regex: /\)/, - next: 'pop', - }, - { - include: '#query', - }, - { - include: '#identifier', - }, - { - include: '#value', - }, - { - include: '#pair', - }, - { - defaultToken: 'support.function.singlearg.groq', - }, - ], - }, - ], - '#identifier': [ - { - token: [ - 'variable.other.readwrite.groq', - 'text', - 'punctuation.definition.block.js', - 'text', - 'keyword.operator.reference.groq', - ], - regex: /([_A-Za-z][_0-9A-Za-z]*)(\s*)((?:\[\s*\])?)(\s*)(->)/, - }, - { - token: [ - 'variable.other.readwrite.groq', - 'constant.language.groq', - 'text', - 'punctuation.definition.block.js', - 'text', - 'keyword.operator.descendant.groq', - ], - regex: /(?:([_A-Za-z][_0-9A-Za-z]*)|([@^]))(\s*)((?:\[\s*\])?)(\s*)(\.)/, - }, - { - token: 'variable.other.readwrite.groq', - regex: /[_A-Za-z][_0-9A-Za-z]*/, - }, - ], - '#value': [ - { - include: '#constant', - }, - { - include: '#number', - }, - { - include: '#string', - }, - { - include: '#array', - }, - { - include: '#variable', - }, - { - include: '#projection', - }, - { - include: '#comments', - }, - { - include: '#function-call', - }, - ], -} - -declare let ace: any - -ace.define( - 'ace/mode/groq_highlight_rules', - ['require', 'exports', 'module', 'ace/lib/oop', 'ace/mode/text_highlight_rules'], - function (acequire: (id: string) => any, exports: Record, _module: any) { - const oop = acequire('../lib/oop') - const TextHighlightRules = acequire('./text_highlight_rules').TextHighlightRules - - const GroqHighlightRules = function () { - /* eslint-disable @typescript-eslint/ban-ts-comment */ - // @ts-ignore - this.$rules = rules - // @ts-ignore - this.normalizeRules() - /* eslint-enable @typescript-eslint/ban-ts-comment */ - } - - oop.inherits(GroqHighlightRules, TextHighlightRules) - - exports.GroqHighlightRules = GroqHighlightRules - } -) - -ace.define( - 'ace/mode/groq', - [ - 'require', - 'exports', - 'module', - 'ace/lib/oop', - 'ace/mode/text', - 'ace/tokenizer', - 'ace/mode/groq_highlight_rules', - 'ace/mode/folding/cstyle', - ], - function (acequire: (id: string) => any, exports: Record, _module: any) { - // eslint-disable-next-line strict - 'use strict' - const oop = acequire('../lib/oop') - const TextMode = acequire('./text').Mode - const Tokenizer = acequire('../tokenizer').Tokenizer - const GroqHighlightRules = acequire('./groq_highlight_rules').GroqHighlightRules - const FoldMode = acequire('./folding/cstyle').FoldMode - - const Mode = function () { - /* eslint-disable @typescript-eslint/ban-ts-comment */ - const highlighter = new GroqHighlightRules() - // @ts-ignore - this.foldingRules = new FoldMode() - // @ts-ignore - this.$tokenizer = new Tokenizer(highlighter.getRules()) - // @ts-ignore - this.$keywordList = highlighter.$keywordList - /* eslint-enable @typescript-eslint/ban-ts-comment */ - } - oop.inherits(Mode, TextMode) - ;(function () { - /* eslint-disable @typescript-eslint/ban-ts-comment */ - // @ts-ignore - this.lineCommentStart = "'" - /* eslint-enable @typescript-eslint/ban-ts-comment */ - }.call(Mode.prototype)) - - exports.Mode = Mode - } -) diff --git a/packages/@sanity/code-input/src/schema.tsx b/packages/@sanity/code-input/src/schema.tsx deleted file mode 100644 index 2da95b6f063..00000000000 --- a/packages/@sanity/code-input/src/schema.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react' -import {CodeBlockIcon} from '@sanity/icons' -import CodeInput from './CodeInput' -import PreviewCode, {PreviewCodeProps} from './PreviewCode' -import {getMedia} from './getMedia' - -const Preview = (props: PreviewCodeProps) => { - return -} - -export default { - name: 'code', - type: 'object', - title: 'Code', - inputComponent: CodeInput, - icon: CodeBlockIcon, - fields: [ - { - name: 'language', - title: 'Language', - type: 'string', - }, - { - name: 'filename', - title: 'Filename', - type: 'string', - }, - { - title: 'Code', - name: 'code', - type: 'text', - }, - { - title: 'Highlighted lines', - name: 'highlightedLines', - type: 'array', - of: [ - { - type: 'number', - title: 'Highlighted line', - }, - ], - }, - ], - preview: { - select: { - language: 'language', - code: 'code', - filename: 'filename', - highlightedLines: 'highlightedLines', - }, - prepare: (value: { - language?: string - code?: string - filename?: string - highlightedLines?: number[] - }) => { - return { - title: value.filename || (value.language || 'unknown').toUpperCase(), - media: getMedia(value?.language), - extendedPreview: , - } - }, - }, -} diff --git a/packages/@sanity/code-input/src/types.ts b/packages/@sanity/code-input/src/types.ts deleted file mode 100644 index 6f24cfe97ed..00000000000 --- a/packages/@sanity/code-input/src/types.ts +++ /dev/null @@ -1,26 +0,0 @@ -export interface CodeInputLanguage { - title: string - value: string - mode?: string -} - -export interface CodeInputType { - name?: string - title?: string - description?: string - fields: {name: string; title?: string; placeholder?: string}[] - options?: { - theme?: string - languageAlternatives: CodeInputLanguage[] - language: string - withFilename?: boolean - } -} - -export interface CodeInputValue { - _type?: 'code' - code?: string - filename?: string - language?: string - highlightedLines?: number[] -} diff --git a/packages/@sanity/code-input/tsconfig.json b/packages/@sanity/code-input/tsconfig.json deleted file mode 100644 index 6722b3dbcc9..00000000000 --- a/packages/@sanity/code-input/tsconfig.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "extends": "../../../tsconfig", - "include": ["src"], - "compilerOptions": { - "composite": true, - "outDir": "./dist/dts", - "rootDir": "./src", - "checkJs": true, - "allowJs": true, - "jsx": "react" - }, - "references": [ - { - "path": "../base" - }, - { - "path": "../form-builder" - }, - { - "path": "../types" - }, - { - "path": "../util" - } - ] -} diff --git a/packages/@sanity/color-input/.babelrc b/packages/@sanity/color-input/.babelrc deleted file mode 100644 index cc79e6f4435..00000000000 --- a/packages/@sanity/color-input/.babelrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "extends": "../../../.babelrc", - "presets": ["@babel/react"] -} diff --git a/packages/@sanity/color-input/.gitignore b/packages/@sanity/color-input/.gitignore deleted file mode 100644 index 7b3ff76cddf..00000000000 --- a/packages/@sanity/color-input/.gitignore +++ /dev/null @@ -1,19 +0,0 @@ -# Logs -*.log - -# Compiled files -lib - -# Coverage directories used by tools like istanbul -coverage -.nyc_output - -# Dependency directories -node_modules - -# UMD bundle -umd - -# Lockfiles -yarn.lock -dist diff --git a/packages/@sanity/color-input/.npmignore b/packages/@sanity/color-input/.npmignore deleted file mode 100644 index 090dddf4cb7..00000000000 --- a/packages/@sanity/color-input/.npmignore +++ /dev/null @@ -1,7 +0,0 @@ -.babelrc -.editorconfig -.eslintignore -.eslintrc -src -test -tsconfig.tsbuildinfo diff --git a/packages/@sanity/color-input/LICENSE b/packages/@sanity/color-input/LICENSE deleted file mode 100644 index 3f52e9425f3..00000000000 --- a/packages/@sanity/color-input/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2016 - 2022 Sanity.io - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/packages/@sanity/color-input/README.md b/packages/@sanity/color-input/README.md deleted file mode 100644 index 8fd4e5a23bf..00000000000 --- a/packages/@sanity/color-input/README.md +++ /dev/null @@ -1,80 +0,0 @@ -# @sanity/color-input - -Color input for [Sanity](https://sanity.io/) that stores selected colors in hex, hsl, hsv and rgb format. - -## Installation - -``` -sanity install @sanity/color-input -``` - -## Usage - -Use it in your schema types: - -```js -// [...] -{ - fields: [ - // [...] - { - name: 'favoriteColor', - title: 'Favorite color', - type: 'color' - } - ] -} -``` - -Note that the above only works if you import and use the `all:part:@sanity/base/schema-type` part in your schema. - -## Options - -To disable the alpha option, set `disableAlpha` to `true`: - -```js -// ...fields... -{ - name: 'favoriteColor', - title: 'Favorite color', - type: 'color', - options: { - disableAlpha: true - } -} -``` - -## Data model - -```js -{ - _type: 'color', - hex: '#29158a', - alpha: 0.9, - hsl: { - _type: 'hslaColor', - h: 249.99999999999994, - s: 0.7328000000000001, - l: 0.313, - a: 0.9 - }, - hsv: { - _type: 'hsvaColor', - h: 249.99999999999994, - s: 0.8457987072945522, - v: 0.5423664, - a: 0.9 - }, - rgb: { - _type: 'rgbaColor', - r: 41 - g: 21, - b: 138, - a: 0.9 - } -} -``` - -## License - -MIT-licensed. See LICENSE. diff --git a/packages/@sanity/color-input/package.json b/packages/@sanity/color-input/package.json deleted file mode 100644 index 72115a16647..00000000000 --- a/packages/@sanity/color-input/package.json +++ /dev/null @@ -1,51 +0,0 @@ -{ - "name": "@sanity/color-input", - "version": "2.35.2", - "description": "Color input", - "main": "lib/index.js", - "author": "Sanity.io ", - "license": "MIT", - "scripts": { - "clean": "rimraf lib dest" - }, - "keywords": [ - "sanity", - "cms", - "headless", - "realtime", - "content", - "color-input", - "sanity-plugin" - ], - "dependencies": { - "@sanity/icons": "^1.3.4", - "@sanity/ui": "^0.37.22", - "lodash": "^4.17.15", - "react-color": "^2.13.8" - }, - "devDependencies": { - "@sanity/base": "2.35.2", - "@sanity/types": "2.35.0", - "react": "17.0.1", - "rimraf": "^2.7.1" - }, - "peerDependencies": { - "@sanity/base": "^2.14", - "@sanity/types": "^2.14", - "prop-types": "^15.6 || ^16", - "react": "^16.9 || ^17", - "styled-components": "^5.2.0" - }, - "bugs": { - "url": "https://github.com/sanity-io/sanity/issues" - }, - "homepage": "https://www.sanity.io/", - "repository": { - "type": "git", - "url": "git+https://github.com/sanity-io/sanity.git", - "directory": "packages/@sanity/color-input" - }, - "publishConfig": { - "access": "public" - } -} diff --git a/packages/@sanity/color-input/sanity.json b/packages/@sanity/color-input/sanity.json deleted file mode 100644 index c795c9adbd4..00000000000 --- a/packages/@sanity/color-input/sanity.json +++ /dev/null @@ -1,32 +0,0 @@ -{ - "paths": { - "source": "./src", - "compiled": "./lib" - }, - "parts": [ - { - "name": "part:@sanity/form-builder/input/color", - "description": "Color input" - }, - { - "implements": "part:@sanity/form-builder/input/color", - "path": "ColorInput" - }, - { - "implements": "part:@sanity/base/schema-type", - "path": "schemas/hslaColor" - }, - { - "implements": "part:@sanity/base/schema-type", - "path": "schemas/hsvaColor" - }, - { - "implements": "part:@sanity/base/schema-type", - "path": "schemas/rgbaColor" - }, - { - "implements": "part:@sanity/base/schema-type", - "path": "schemas/color" - } - ] -} diff --git a/packages/@sanity/color-input/src/ColorInput.js b/packages/@sanity/color-input/src/ColorInput.js deleted file mode 100644 index 95635c24653..00000000000 --- a/packages/@sanity/color-input/src/ColorInput.js +++ /dev/null @@ -1,113 +0,0 @@ -/// - -/* eslint-disable id-length */ -import React, {PureComponent} from 'react' -import PropTypes from 'prop-types' -import {PatchEvent, patches} from 'part:@sanity/form-builder' -import {debounce} from 'lodash' -import {Button} from '@sanity/ui' -import {AddIcon} from '@sanity/icons' -import {FormField} from '@sanity/base/components' -import ColorPicker from './ColorPicker' - -const {set, unset, setIfMissing} = patches - -const DEFAULT_COLOR = { - hex: '#24a3e3', - hsl: {h: 200, s: 0.7732, l: 0.5156, a: 1}, - hsv: {h: 200, s: 0.8414, v: 0.8901, a: 1}, - rgb: {r: 46, g: 163, b: 227, a: 1}, - source: 'hex', -} - -export default class ColorInput extends PureComponent { - focusRef = React.createRef() - static propTypes = { - type: PropTypes.shape({ - name: PropTypes.string, - title: PropTypes.string, - description: PropTypes.string, - fields: PropTypes.arrayOf( - PropTypes.shape({ - name: PropTypes.string.isRequired, - }) - ), - }).isRequired, - onChange: PropTypes.func.isRequired, - readOnly: PropTypes.bool, - value: PropTypes.shape({ - hex: PropTypes.string, - alpha: PropTypes.number, - }), - } - - focus() { - // todo: make the ColorPicker component support .focus() - if (this.focusRef.current && this.focusRef.current.focus) { - this.focusRef.current.focus() - } - } - - emitSetColor = (nextColor) => { - const {onChange, type} = this.props - - const fieldPatches = type.fields - .filter((field) => field.name in nextColor) - .map((field) => { - const nextFieldValue = nextColor[field.name] - const isObject = field.type.jsonType === 'object' - return set( - isObject ? Object.assign({_type: field.type.name}, nextFieldValue) : nextFieldValue, - [field.name] - ) - }) - - onChange( - PatchEvent.from([ - setIfMissing({_type: type.name}), - set(type.name, ['_type']), - set(nextColor.rgb.a, ['alpha']), - ...fieldPatches, - ]) - ) - } - - // The color picker emits onChange events continuously while the user is sliding the - // hue/saturation/alpha selectors. This debounces the event to avoid excessive patches - handleColorChange = debounce(this.emitSetColor, 100) - - handleCreateColor = () => { - this.emitSetColor(DEFAULT_COLOR) - } - - handleUnset = () => { - this.props.onChange(PatchEvent.from(unset())) - } - - render() { - const {type, readOnly, value, level} = this.props - return ( - - {value ? ( - - ) : ( -