-
Notifications
You must be signed in to change notification settings - Fork 451
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
dev(test-studio): add components API schema and plugins + update `san…
…ity.config`
- Loading branch information
1 parent
85a8f10
commit 0a7ce76
Showing
8 changed files
with
352 additions
and
24 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| import React from 'react' | ||
| import {Card} from '@sanity/ui' | ||
| import {createPlugin, InputProps, FieldProps, ItemProps, PreviewProps} from 'sanity' | ||
|
|
||
| export function Input(props: InputProps) { | ||
| return ( | ||
| <Card data-testid="input-config-component" padding={2} border tone="primary"> | ||
| {props.renderDefault(props)} | ||
| </Card> | ||
| ) | ||
| } | ||
|
|
||
| export function Field(props: FieldProps) { | ||
| return ( | ||
| <Card data-testid="field-config-component" padding={2} border tone="caution"> | ||
| {props.renderDefault(props)} | ||
| </Card> | ||
| ) | ||
| } | ||
|
|
||
| export function Item(props: ItemProps) { | ||
| return ( | ||
| <Card data-testid="item-config-component" padding={2} border tone="positive"> | ||
| {props.renderDefault(props)} | ||
| </Card> | ||
| ) | ||
| } | ||
|
|
||
| export function Preview(props: PreviewProps) { | ||
| return ( | ||
| <Card data-testid="preview-config-component" padding={2} border tone="critical"> | ||
| {props.renderDefault(props)} | ||
| </Card> | ||
| ) | ||
| } | ||
|
|
||
| export const formComponentsPlugin = createPlugin({ | ||
| name: 'form-components-plugin', | ||
| form: { | ||
| components: { | ||
| input: (props) => { | ||
| return ( | ||
| <Card data-testid="input-plugin-component" padding={2} border tone="primary"> | ||
| {props.renderDefault(props)} | ||
| </Card> | ||
| ) | ||
| }, | ||
| field: (props) => { | ||
| return ( | ||
| <Card data-testid="field-plugin-component" padding={2} border tone="caution"> | ||
| {props.renderDefault(props)} | ||
| </Card> | ||
| ) | ||
| }, | ||
| item: (props) => { | ||
| return ( | ||
| <Card data-testid="item-plugin-component" padding={2} border tone="positive"> | ||
| {props.renderDefault(props)} | ||
| </Card> | ||
| ) | ||
| }, | ||
| preview: (props) => { | ||
| return ( | ||
| <Card data-testid="preview-plugin-component" padding={2} border tone="critical"> | ||
| {props.renderDefault(props)} | ||
| </Card> | ||
| ) | ||
| }, | ||
| }, | ||
| }, | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
88 changes: 88 additions & 0 deletions
88
dev/test-studio/schema/docs/v3/form-components-api/components.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| import React from 'react' | ||
| import {hues} from '@sanity/color' | ||
| import {Box, Stack, Heading, Flex, Inline, Text} from '@sanity/ui' | ||
| import {FieldProps, InputProps, ItemProps, PreviewProps} from 'sanity' | ||
|
|
||
| const COMPONENT_COLORS = { | ||
| input: hues.blue[400].hex, | ||
| field: hues.yellow[400].hex, | ||
| preview: hues.red[400].hex, | ||
| item: hues.green[400].hex, | ||
| } | ||
|
|
||
| export function FormInput(props: InputProps) { | ||
| return ( | ||
| <Stack space={5} padding={3}> | ||
| <Stack space={4}> | ||
| <Stack space={4}> | ||
| <Heading>Form components API test</Heading> | ||
| <Text size={1}> | ||
| The borders are configured in the schema, and the backgrounds are configured in the | ||
| config and in a plugin. | ||
| </Text> | ||
| </Stack> | ||
|
|
||
| <Flex align="center" gap={4}> | ||
| {Object.entries(COMPONENT_COLORS).map(([key, value]) => ( | ||
| <Inline space={2} key={key}> | ||
| <div style={{width: '1em', height: '1em', background: value, borderRadius: '50%'}} /> | ||
| <Text size={1} weight="semibold"> | ||
| {key.charAt(0).toUpperCase() + key.slice(1)} | ||
| </Text> | ||
| </Inline> | ||
| ))} | ||
| </Flex> | ||
| </Stack> | ||
|
|
||
| <CustomInput {...props} testId="" /> | ||
| </Stack> | ||
| ) | ||
| } | ||
|
|
||
| export function CustomField(props: FieldProps & {testId: string}) { | ||
| return ( | ||
| <Box | ||
| data-testid={props.testId} | ||
| padding={2} | ||
| style={{border: `4px solid ${COMPONENT_COLORS.field}`}} | ||
| > | ||
| {props.renderDefault(props)} | ||
| </Box> | ||
| ) | ||
| } | ||
|
|
||
| export function CustomInput(props: InputProps & {testId: string}) { | ||
| return ( | ||
| <Box | ||
| data-testid={props.testId} | ||
| padding={2} | ||
| style={{border: `4px solid ${COMPONENT_COLORS.input}`}} | ||
| > | ||
| {props.renderDefault(props)} | ||
| </Box> | ||
| ) | ||
| } | ||
|
|
||
| export function CustomItem(props: ItemProps & {testId: string}) { | ||
| return ( | ||
| <Box | ||
| data-testid={props.testId} | ||
| padding={2} | ||
| style={{border: `4px solid ${COMPONENT_COLORS.item}`}} | ||
| > | ||
| {props.renderDefault(props)} | ||
| </Box> | ||
| ) | ||
| } | ||
|
|
||
| export function CustomPreview(props: PreviewProps & {testId: string}) { | ||
| return ( | ||
| <Box | ||
| data-testid={props.testId} | ||
| padding={2} | ||
| style={{border: `4px solid ${COMPONENT_COLORS.preview}`}} | ||
| > | ||
| {props.renderDefault(props)} | ||
| </Box> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './schema' |
Oops, something went wrong.