import React from "react";
import { MEUI, ReactMEUI } from "@/meui";
import { animated, useSpring } from "@/react-sping-meui";

function App() {
    const styles = useSpring({
        loop: true,
        from: { rotateZ: 0 },
        to: { rotateZ: 360 },
    });

    return (
        <animated.Div
            style={{
                width: 120,
                height: 120,
                backgroundColor: "#46e891",
                borderRadius: 16,
                textAlign: "center",
                ...styles,
            }}
        >
            Hello MEUI!
        </animated.Div>
    );
}

const meui = new MEUI(300, 300);
ReactMEUI.render(<App />, meui);

sudo apt install nodejs
sudo apt install npm

# Обновите версию с помощью следующих команд, если необходимо (необязательно)
sudo npm install -g n
sudo n stable
sudo npm install npm@latest -g

sudo apt install gcc make

npm install
npm run dev
# указанная запись
npm run dev examples/signin/index.tsx

export interface MeuiStyle {
    borderRadius?: [number, number, number, number] | number;
    borderColor?: string;
    backgroundColor?: Property.BackgroundColor;
    fontColor?: Property.Color;
    text?: string;
    fontSize?: number;
    fontFamily?: string;
    textAlign?:
        | "center-left"
        | "center-right"
        | "center"
        | "top-left"
        | "top-right"
        | "top-center"
        | "bottom-left"
        | "bottom-right"
        | "bottom-center";
    backgroundImage?: string;
    contentImage?: string;
    transform?: string;
    transformOrigin?:
        | [number, number]
        | ["left" | "center" | "right", "top" | "center" | "bottom"];
    flexWrap?: "nowrap" | "wrap" | "wrap-reverse";
    flexDirection?: "row" | "column" | "row-reverse" | "column-reverse";
    alignItems?: "stretch" | "flex-start" | "center" | "flex-end" | "baseline";
    alignSelf?:
        | "auto"
        | "stretch"
        | "flex-start"
        | "center"
        | "flex-end"
        | "baseline";
    alignContent?:
        | "stretch"
        | "flex-start"
        | "center"
        | "flex-end"
        | "space-between"
        | "space-around";
    justifyContent?:
        | "flex-start"
        | "center"
        | "flex-end"
        | "space-between"
        | "space-around";
    margin?: [number, number, number, number] | number;
    border?: [number, number, number, number] | number;
    padding?: [number, number, number, number] | number;
    overflow?: "visible" | "hidden" | "scroll" | "auto";

    flexBasis?: number;
    flexGrow?: number;
    flexShrink?: number;
    width?: Length;
    height?: Length;
    minWidth?: Length;
    minHeight?: Length;
    maxWidth?: Length;
    maxHeight?: Length;
    marginLeft?: Length;
    marginTop?: Length;
}
``` ## Canvas API

* arc
* arcTo
* beginPath
* bezierCurveTo
* createRadialGradient
* createLinearGradient
* clearRect
* clip
* closePath
* ellipse
* fill
* fillRect
* fillText
* font
* getImageData
* getTransform
* lineCap
* lineDashOffset
* lineJoin
* lineWidth
* measureText
* Path2D
* putImageData
* quadraticCurveTo
* resetTransform
* rotate
* save
* scale
* setLineDash
* setTransform
* strokeRect
* strokeText
* textAlign
* textBaseline
* transform
* translate

## Дискуссионная группа
Tencent QQ Group: [765228998](https://jq.qq.com/?_wv=1027&k=LjX7RmEe)

## Ссылки

- QuickJS — движок JavaScript. Доступен по адресу:
   https://bellard.org/quickjs/.

- PlutoVG — автономная библиотека 2D векторной графики на языке C. Доступна по адресу:
  https://github.com/sammycage/plutovg.

- React — библиотека JavaScript для создания пользовательских интерфейсов. Доступна по адресу:
  https://reactjs.org/.

- react-spring — библиотека анимации, основанная на принципах пружинной физики. Доступна по адресу:
  https://react-spring.io/.

- FlexLayout — реализация макета Flexible Box на языке C. Доступен по адресу:
  https://github.com/Sleen/FlexLayout.

- Однофайловые библиотеки с открытым исходным кодом (или под лицензией MIT) для C/C++. Доступны по адресу:
  https://github.com/nothings/stb.

- Шаблонизированная реализация типобезопасной хэш-карты на языке C. Доступна по адресу:
  https://github.com/DavidLeeds/hashmap.

- libpqueue — универсальная реализация приоритетной очереди (хеш). Доступна по адресу:
  https://github.com/vy/libpqueue.