import {app, read, update} from '@onejs-dev/core';
import {HtmlDiv, HtmlH1, HtmlInput} from '@onejs-dev/components';

const state = {name: 'World'}

const App = () => HtmlDiv()([
    HtmlH1()(`Hello ${read('name')}!`),
    HtmlInput({value: read('name'), onChange: update('name'), placeholder: 'Name'})
]);

app({component: App, state: state});

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import {app, read, update, readFlavor} from '@onejs-dev/core';
import {View, Input, Text} from '@onejs-dev/components';

const state = {
    inputValue: '',
    inputType: 'text'
};
const inputTypes = ['text', 'textarea', 'button', 'list', 'range', 'checkbox', 'switch'];

const App = () => View({content: {direction: 'column', h: 'center', v: 'center', gap: 10}, self: {expand: 1}})([
    Text({flavor: readFlavor('header')})('Choose Input'),
    Input({type: 'list', options: inputTypes, value: read('inputType'), onChange: update('inputType')}),
    Input({
        type: read('inputType'), value: read('inputValue'), onChange: update('inputValue'), 
        title: 'Input Title', placeholder: 'Input Placeholder', options: ['A', 'B', 'C']
    }),
    Text()('Input Value: ' + read('inputValue'))
]);

app({component: App, state: state, theme: {preset: 'oneJS'}});

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import {app, read} from '@onejs-dev/core';
import {View, Text} from '@onejs-dev/components';

const state = {
    framework: 'oneJS',
    list: [{id: 'js', name: 'JavaScript'}, {id: 'css', name: 'CSS'}, {id: 'html', name: 'HTML'}]
};

const App = () => View({content: {direction: 'column', h: 'center', v: 'center', gap: 10}, self: {expand: 1}})([
    Text()('My favorite framework: ' + read('framework')),
    Text()('My favorite language: ' + read('list', 'js').name),
]);

app({component: App, state: state, theme: {preset: 'oneJS'}});

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import {app, read, update} from '@onejs-dev/core';
import {View, Text, Input} from '@onejs-dev/components';

const state = {result: 5};

const App = () => View({content: {direction: 'column', h: 'center', v: 'center', gap: 10}, self: {expand: 1}})([
    Text()('Result: ' + read('result')),
    Input({type: 'number', value: read('result'), onChange: update('result')}),
    Input({type: 'button', title: 'Add one', onClick: () => {
        const result = Number(read('result')) + 1;
        update('result')(result);
    }})
]);

app({component: App, state: state, theme: {preset: 'oneJS'}});

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import {app, read, update, add} from '@onejs-dev/core';
import {View, Input, Text} from '@onejs-dev/components';

const state = {note: '', notes: []};

const App = () => View({content: {direction: 'column', h: 'center', v: 'center', gap: 10}, self: {expand: 1}})([
    View()([
        Input({type: 'text', value: read('note'), onChange: update('note')}),
        Input({type: 'button', title: 'Save', onClick: () => add('notes')(read('note'))})
    ]),
    read('notes').map(note => Text({list: 'bullets'})(note))
]);

app({component: App, state: state, theme: {preset: 'oneJS'}});

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import {app, BaseComponent, readFlavor} from '@onejs-dev/core';
import {View, Text, Input} from '@onejs-dev/components';

const H1Html = BaseComponent('H1Html', true, 'h1');
const InputHtml = BaseComponent('InputHtml', false, 'input');

const App = () => View({content: {direction: 'column', h: 'center', v: 'center', gap: 10}, self: {expand: 1}})([
    H1Html({id: 'myH1'})('Standard H1'),
    InputHtml({type: 'range', value: 5, min: 1, max: 10})
]);

app({component: App, theme: {preset: 'oneJS'}});

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import {app, Component, readFlavor} from '@onejs-dev/core';
import {View, Text, Input} from '@onejs-dev/components';

const H1Text = Component('H1Text', true, ({color, ...attributes}={}) => structure => {
    const titleStyle = {fontSize: 32, color: color, fontWeight: 'bold'};
    return Text({style: titleStyle, ...attributes})(structure);
});
const RangeInput = Component('RangeInput', false, ({label, ...attributes}={}) => {
    return View({content: {v: 'center', gap: 20}})([
        Text()(label),
        Input({type: 'range', ...attributes})
    ]);
});

const App = () => View({content: {direction: 'column', h: 'center', v: 'center', gap: 10}, self: {expand: 1}})([
    H1Text({color: 'blue'})('Custom Title'),
    RangeInput({label: 'Range Input', value: 5, min: 1, max: 10})
]);

app({component: App, theme: {preset: 'oneJS'}});

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import {app, read, update, readFlavor, readStyle} from '@onejs-dev/core';
import {Text, Input} from '@onejs-dev/components';

app({name: 'myApp', 
    component: () => {
        return [
            Text({flavor: readFlavor('title')})('Hello ' + read('name')),
            Input({style: readStyle('outline'), value: read('name'), onChange: update('name')})
        ]
    }, 
    state: {name: ''}, 
    theme: {
        variables: {textFont: 'monospace'},
        flavors: {title: {textColor: 'blue'}}
    }, 
    style: {outline: {border: '2px solid red'}}, 
});

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import {app, readStyle} from '@onejs-dev/core';
import {Text} from '@onejs-dev/components';

const style = {
    s1: {border: '1px solid red', color: 'green'},
    s2: {fontSize: 32, color: 'blue'}
};

const App = () => {
    return Text({style: readStyle('s1', 's2')})('Hello World!');
}

app({component: App, style: style});

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape

import {app, mergeStyles, Component} from '@onejs-dev/core';
import {Text} from '@onejs-dev/components';

const externalStyle = {border: '1px solid red', color: 'green'};

const Hello = Component('Hello', false, ({name, ...attributes}={}) => {
    const internalStyle = {fontSize: 32, color: 'blue'};
    attributes['style'] = mergeStyles(internalStyle, attributes['style']);
    return Text(attributes)(`Hello ${name}!`);
});

const App = () => {
    return Hello({name: 'oneJS', style: externalStyle});
}

app({component: App, theme: {preset: 'oneJS'}});

To enter the code editing mode, press Enter. To exit the edit mode, press Escape

You are editing the code. To exit the edit mode, press Escape