code mockup

Code mockup is used to show a block of code in a box that looks like a code editor.

Base Code Mockup

mockup_code = SingleValueFactory("mockup-code", "Base code terminal mockup") # Base mockup code component

Code Mockup Test Examples

---

source

test_mockup_code_basic_examples

 test_mockup_code_basic_examples ()

Test basic mockup_code utilities.

def test_mockup_code_basic_examples():
    """Test basic mockup_code utilities."""
    # Basic mockup_code
    assert str(mockup_code) == "mockup-code"
    
    # Test with modifiers
    assert str(mockup_code.hover) == "hover:mockup-code"
    assert str(mockup_code.md) == "md:mockup-code"
    assert str(mockup_code.dark) == "dark:mockup-code"

# Run the tests
test_mockup_code_basic_examples()

---

source

test_mockup_code_with_line_prefix_fasthtml_examples

 test_mockup_code_with_line_prefix_fasthtml_examples ()

Test mockup code with line prefix from daisyUI v5 documentation.

def test_mockup_code_with_line_prefix_fasthtml_examples():
    """Test mockup code with line prefix from daisyUI v5 documentation."""
    from fasthtml.common import Div, Pre, Code
    from cjm_fasthtml_tailwind.utilities.sizing import w
    
    # Mockup code with line prefix
    code_with_prefix = Div(
        Pre(
            Code("npm i daisyui"),
            data_prefix=""
        ),
        cls=combine_classes(mockup_code, w.full)
    )
    
    # Verify structure
    assert code_with_prefix.tag == "div"
    assert "mockup-code" in code_with_prefix.attrs['class']
    assert "w-full" in code_with_prefix.attrs['class']
    
    # Verify pre element
    pre_element = code_with_prefix.children[0]
    assert pre_element.tag == "pre"
    assert pre_element.attrs['data-prefix'] == ""
    
    # Verify code element
    code_element = pre_element.children[0]
    assert code_element.tag == "code"
    assert code_element.children[0] == "npm i daisyui"
    
    return code_with_prefix

# Run the tests
test_mockup_code_with_line_prefix_fasthtml_examples()

<div class="mockup-code w-full">
<pre><code>npm i daisyui</code></pre></div>

test_func = test_mockup_code_with_line_prefix_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_mockup_code_multi_line_fasthtml_examples

 test_mockup_code_multi_line_fasthtml_examples ()

Test multi-line mockup code from daisyUI v5 documentation.

def test_mockup_code_multi_line_fasthtml_examples():
    """Test multi-line mockup code from daisyUI v5 documentation."""
    from fasthtml.common import Div, Pre, Code
    from cjm_fasthtml_tailwind.utilities.sizing import w
    from cjm_fasthtml_daisyui.utilities.semantic_colors import text_dui
    
    # Multi-line mockup code
    multi_line_code = Div(
        Pre(Code("npm i daisyui"), data_prefix=""),
        Pre(Code("installing..."), data_prefix=">", cls=str(text_dui.warning)),
        Pre(Code("Done!"), data_prefix=">", cls=str(text_dui.success)),
        cls=combine_classes(mockup_code, w.full)
    )
    
    # Verify structure
    assert multi_line_code.tag == "div"
    assert "mockup-code" in multi_line_code.attrs['class']
    assert "w-full" in multi_line_code.attrs['class']
    assert len(multi_line_code.children) == 3
    
    # Verify first pre element
    first_pre = multi_line_code.children[0]
    assert first_pre.tag == "pre"
    assert first_pre.attrs['data-prefix'] == ""
    assert first_pre.children[0].tag == "code"
    assert first_pre.children[0].children[0] == "npm i daisyui"
    
    # Verify second pre element with warning color
    second_pre = multi_line_code.children[1]
    assert second_pre.tag == "pre"
    assert second_pre.attrs['data-prefix'] == ">"
    assert second_pre.attrs['class'] == "text-warning"
    assert second_pre.children[0].tag == "code"
    assert second_pre.children[0].children[0] == "installing..."
    
    # Verify third pre element with success color
    third_pre = multi_line_code.children[2]
    assert third_pre.tag == "pre"
    assert third_pre.attrs['data-prefix'] == ">"
    assert third_pre.attrs['class'] == "text-success"
    assert third_pre.children[0].tag == "code"
    assert third_pre.children[0].children[0] == "Done!"
    
    return multi_line_code

# Run the tests
test_mockup_code_multi_line_fasthtml_examples()

<div class="mockup-code w-full">
<pre><code>npm i daisyui</code></pre><pre data-prefix="&gt;" class="text-warning"><code>installing...</code></pre><pre data-prefix="&gt;" class="text-success"><code>Done!</code></pre></div>

test_func = test_mockup_code_multi_line_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_mockup_code_highlighted_line_fasthtml_examples

 test_mockup_code_highlighted_line_fasthtml_examples ()

Test mockup code with highlighted line from daisyUI v5 documentation.

def test_mockup_code_highlighted_line_fasthtml_examples():
    """Test mockup code with highlighted line from daisyUI v5 documentation."""
    from fasthtml.common import Div, Pre, Code
    from cjm_fasthtml_tailwind.utilities.sizing import w
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui, text_dui
    
    # Mockup code with highlighted line
    highlighted_code = Div(
        Pre(Code("npm i daisyui"), data_prefix="1"),
        Pre(Code("installing..."), data_prefix="2"),
        Pre(Code("Error!"), data_prefix="3", cls=combine_classes(bg_dui.warning, text_dui.warning_content)),
        cls=combine_classes(mockup_code, w.full)
    )
    
    # Verify structure
    assert highlighted_code.tag == "div"
    assert "mockup-code" in highlighted_code.attrs['class']
    assert "w-full" in highlighted_code.attrs['class']
    assert len(highlighted_code.children) == 3
    
    # Verify first pre element with line number
    first_pre = highlighted_code.children[0]
    assert first_pre.tag == "pre"
    assert first_pre.attrs['data-prefix'] == "1"
    assert first_pre.children[0].tag == "code"
    assert first_pre.children[0].children[0] == "npm i daisyui"
    
    # Verify second pre element with line number
    second_pre = highlighted_code.children[1]
    assert second_pre.tag == "pre"
    assert second_pre.attrs['data-prefix'] == "2"
    assert second_pre.children[0].tag == "code"
    assert second_pre.children[0].children[0] == "installing..."
    
    # Verify third pre element with highlighting
    third_pre = highlighted_code.children[2]
    assert third_pre.tag == "pre"
    assert third_pre.attrs['data-prefix'] == "3"
    assert "bg-warning" in third_pre.attrs['class']
    assert "text-warning-content" in third_pre.attrs['class']
    assert third_pre.children[0].tag == "code"
    assert third_pre.children[0].children[0] == "Error!"
    
    return highlighted_code

# Run the tests
test_mockup_code_highlighted_line_fasthtml_examples()

<div class="mockup-code w-full">
<pre data-prefix="1"><code>npm i daisyui</code></pre><pre data-prefix="2"><code>installing...</code></pre><pre data-prefix="3" class="bg-warning text-warning-content"><code>Error!</code></pre></div>

test_func = test_mockup_code_highlighted_line_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_mockup_code_long_line_fasthtml_examples

 test_mockup_code_long_line_fasthtml_examples ()

Test mockup code with long line that will scroll from daisyUI v5 documentation.

def test_mockup_code_long_line_fasthtml_examples():
    """Test mockup code with long line that will scroll from daisyUI v5 documentation."""
    from fasthtml.common import Div, Pre, Code
    from cjm_fasthtml_tailwind.utilities.sizing import w
    
    # Mockup code with long line
    long_line_code = Div(
        Pre(
            Code("Magnam dolore beatae necessitatibus nemopsum itaque sit. Et porro quae qui et et dolore ratione."),
            data_prefix="~"
        ),
        cls=combine_classes(mockup_code, w.full)
    )
    
    # Verify structure
    assert long_line_code.tag == "div"
    assert "mockup-code" in long_line_code.attrs['class']
    assert "w-full" in long_line_code.attrs['class']
    
    # Verify pre element with tilde prefix
    pre_element = long_line_code.children[0]
    assert pre_element.tag == "pre"
    assert pre_element.attrs['data-prefix'] == "~"
    
    # Verify code element with long text
    code_element = pre_element.children[0]
    assert code_element.tag == "code"
    assert code_element.children[0] == "Magnam dolore beatae necessitatibus nemopsum itaque sit. Et porro quae qui et et dolore ratione."
    
    return long_line_code

# Run the tests
test_mockup_code_long_line_fasthtml_examples()

<div class="mockup-code w-full">
<pre data-prefix="~"><code>Magnam dolore beatae necessitatibus nemopsum itaque sit. Et porro quae qui et et dolore ratione.</code></pre></div>

test_func = test_mockup_code_long_line_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_mockup_code_without_prefix_fasthtml_examples

 test_mockup_code_without_prefix_fasthtml_examples ()

Test mockup code without prefix from daisyUI v5 documentation.

def test_mockup_code_without_prefix_fasthtml_examples():
    """Test mockup code without prefix from daisyUI v5 documentation."""
    from fasthtml.common import Div, Pre, Code
    from cjm_fasthtml_tailwind.utilities.sizing import w
    
    # Mockup code without prefix
    no_prefix_code = Div(
        Pre(Code("without prefix")),
        cls=combine_classes(mockup_code, w.full)
    )
    
    # Verify structure
    assert no_prefix_code.tag == "div"
    assert "mockup-code" in no_prefix_code.attrs['class']
    assert "w-full" in no_prefix_code.attrs['class']
    
    # Verify pre element (no data-prefix attribute)
    pre_element = no_prefix_code.children[0]
    assert pre_element.tag == "pre"
    assert 'data-prefix' not in pre_element.attrs
    
    # Verify code element
    code_element = pre_element.children[0]
    assert code_element.tag == "code"
    assert code_element.children[0] == "without prefix"
    
    return no_prefix_code

# Run the tests
test_mockup_code_without_prefix_fasthtml_examples()

<div class="mockup-code w-full">
<pre><code>without prefix</code></pre></div>

test_func = test_mockup_code_without_prefix_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_mockup_code_with_color_fasthtml_examples

 test_mockup_code_with_color_fasthtml_examples ()

Test mockup code with custom color from daisyUI v5 documentation.

def test_mockup_code_with_color_fasthtml_examples():
    """Test mockup code with custom color from daisyUI v5 documentation."""
    from fasthtml.common import Div, Pre, Code
    from cjm_fasthtml_tailwind.utilities.sizing import w
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui, text_dui
    
    # Mockup code with custom color
    colored_code = Div(
        Pre(Code("can be any color!")),
        cls=combine_classes(mockup_code, bg_dui.primary, text_dui.primary_content, w.full)
    )
    
    # Verify structure
    assert colored_code.tag == "div"
    assert "mockup-code" in colored_code.attrs['class']
    assert "bg-primary" in colored_code.attrs['class']
    assert "text-primary-content" in colored_code.attrs['class']
    assert "w-full" in colored_code.attrs['class']
    
    # Verify pre element
    pre_element = colored_code.children[0]
    assert pre_element.tag == "pre"
    assert 'data-prefix' not in pre_element.attrs
    
    # Verify code element
    code_element = pre_element.children[0]
    assert code_element.tag == "code"
    assert code_element.children[0] == "can be any color!"
    
    return colored_code

# Run the tests
test_mockup_code_with_color_fasthtml_examples()

<div class="mockup-code bg-primary text-primary-content w-full">
<pre><code>can be any color!</code></pre></div>

test_func = test_mockup_code_with_color_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()