react-native-ui-lib
Version:
[](https://stand-with-ukraine.pp.ua)
292 lines (291 loc) • 9.43 kB
JSON
{
"name": "Tests",
"category": "dev",
"description": "This is just a tests page for the new docs component page",
"extends": [
"Text",
"View"
],
"extendsLink": [
"https://reactnative.dev/docs/text",
"https://reactnative.dev/docs/view"
],
"modifiers": [
"margins",
"color",
"typography"
],
"example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TextScreen.tsx",
"images": [
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Text/Modifiers.png?raw=true",
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Text/Highlights.png?raw=true",
"https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Text/Transformation.png?raw=true"
],
"props": [
{
"name": "color",
"type": "string",
"description": "Color of the text",
"default": "Black",
"required": "true",
"platform": "iOS",
"note": "This is an important information"
},
{
"name": "center",
"type": "boolean",
"description": "Whether to center the text (using textAlign)"
},
{
"name": "uppercase",
"type": "boolean",
"description": "Whether to change the text to uppercase"
},
{
"name": "underline",
"type": "boolean",
"description": "Whether to add an underline"
},
{
"name": "highlightString",
"type": "HighlightString | HighlightString[]",
"description": "Substring to highlight. Can be a simple string or a HighlightStringProps object, or an array of the above"
},
{
"name": "highlightStyle",
"type": "TextStyle",
"description": "Custom highlight style for highlight string"
},
{
"name": "recorderTag",
"type": "'mask' | 'unmask'",
"description": "Recorder Tag"
},
{
"name": "animated",
"type": "boolean",
"description": "Use Animated.Text as a container"
}
],
"snippet": [
"<Text text30$1>Text goes here$2</Text>"
],
"docs": {
"hero": {
"description": "A wrapper for Text component with extra functionality like modifiers support",
"content": [
{
"value": "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true",
"background": "pink"
}
],
"title": "Tests",
"type": "hero",
"layout": "horizontal"
},
"tabs": [
{
"title": "Overview",
"sections": [
{
"type": "section",
"title": "Rendering uilib component",
"description": "Examples of using the Uilib web components",
"content": [
{
"component": "Text",
"props": {
"children": "This is a Text"
},
"background": "yellow"
},
{
"component": "Button",
"props": {
"label": "This is a Button"
}
},
{
"component": "Chip",
"props": {
"label": "This is a Chip"
}
}
]
},
{
"type": "table",
"title": "Table",
"description": "Examples of using the Text component",
"name": "Table Name",
"columns": [
"Item",
"Content[0]",
"Content[1]"
],
"items": [
{
"title": "Item #1",
"description": "Item #1 Subtitle",
"content": [
{
"value": "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true",
"background": "red"
},
{
"height": 170,
"value": "https://embed.figma.com/design/BDoSosBJDaE14hmGwD0sCY/Re-Docs?node-id=433-15903&embed-host=share"
}
]
},
{
"title": "Item #2",
"description": "Item #2 Subtitle",
"content": [
{
"snippet": "<Text text30>This is a code snippet</Text>"
}
]
},
{
"title": "Item #3",
"description": "Item #3 Subtitle",
"content": [
{
"value": "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true"
},
{
"value": "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true"
}
]
}
]
},
{
"type": "table",
"title": "",
"description": "",
"columns": [
"Item",
"Content[0]",
"Content[1]"
],
"items": [
{
"title": "Item #1",
"description": "Item #1 Subtitle",
"content": [
{
"value": "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true"
},
{
"value": "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true"
}
]
},
{
"title": "Item #2",
"description": "Item #2 Subtitle",
"content": [
{
"value": "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true"
}
]
}
]
}
]
},
{
"title": "Guidelines",
"sections": [
{
"type": "section",
"title": "Section",
"description": "Examples of using the Text component",
"content": [
{
"value": "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-veryWide.png?raw=true"
}
]
},
{
"type": "section",
"layout": "horizontal",
"title": "Horizontal Section",
"description": "Examples of using the Text component",
"content": [
{
"value": "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true"
},
{
"value": "https://embed.figma.com/design/BDoSosBJDaE14hmGwD0sCY/Re-Docs?node-id=433-15903&embed-host=share"
}
]
},
{
"type": "list",
"title": "List",
"description": "Examples of using the Text component",
"items": [
{
"title": "Item #1",
"description": "This is item #1",
"content": [
{
"value": "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-veryWide.png?raw=true"
}
]
},
{
"title": "Item #2",
"description": "This is item #2",
"content": [
{
"value": "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-veryWide.png?raw=true"
}
]
}
]
},
{
"type": "list",
"layout": "horizontal",
"title": "List Horizontal Items",
"description": "Examples of using the Text component",
"items": [
{
"title": "Item #1",
"description": "This is item #1",
"content": [
{
"value": "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true"
}
]
},
{
"title": "Item #2",
"description": "This is item #2",
"content": [
{
"value": "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Docs/thumbnail-horizontal.png?raw=true"
}
]
}
]
},
{
"type": "section",
"title": "Markdown support",
"description": "markdown:##Title\n\nThis is a markdown content\n\n With a list:\n- item 1\n- item 2"
},
{
"type": "section",
"title": "HTML support",
"description": "html:<h2>Title</h2><p>This is a html content</p><ul><li>item 1</li><li>item 2</li></ul>"
}
]
}
]
}
}