From 8cc671aeda980fcf7e2384b54eced539ef1776a9 Mon Sep 17 00:00:00 2001 From: Ethan Sharabi <1780255+ethanshar@users.noreply.github.com> Date: Mon, 16 Sep 2024 13:40:18 +0300 Subject: [PATCH] Add live code playground in uilib docs (#3254) * Add live code playground in uilib docs * Update live code example --- docs/getting-started/usage.md | 41 +- docuilib/docusaurus.config.js | 2 +- docuilib/package.json | 7 + docuilib/plugins/uilib.js | 68 + docuilib/src/theme/ReactLiveScope/index.js | 20 + docuilib/yarn.lock | 9134 ++++++++++++++++++++ 6 files changed, 9264 insertions(+), 8 deletions(-) create mode 100644 docuilib/plugins/uilib.js create mode 100644 docuilib/src/theme/ReactLiveScope/index.js create mode 100644 docuilib/yarn.lock diff --git a/docs/getting-started/usage.md b/docs/getting-started/usage.md index 8257c62421..0d55672a5f 100644 --- a/docs/getting-started/usage.md +++ b/docs/getting-started/usage.md @@ -1,9 +1,10 @@ --- sidebar_position: 2 sidebar_label: Usage -title: "Usage" +title: 'Usage' # path: "/getting-started/usage" --- + This is a quick example of how to use our basic components, modifiers and presets to generate a good looking screen. For detailed information please go over the other sections: [Style](../foundation/style.md), [Modifiers](../foundation/modifiers.md), Components... @@ -14,19 +15,45 @@ import React, {Component} from 'react'; import {View, TextField, Text, Button} from 'react-native-ui-lib'; export default class Example extends Component { - render() { return ( - Welcome - - + + Welcome + + + -