docs: Mirai basic documentation

website/.gitignore

@@ -0,0 +1,20 @@
+# Dependencies
+/node_modules
+
+# Production
+/build
+
+# Generated files
+.docusaurus
+.cache-loader
+
+# Misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

website/README.md

@@ -0,0 +1,41 @@
+# Website
+
+This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
+
+### Installation
+
+```
+$ yarn
+```
+
+### Local Development
+
+```
+$ yarn start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Using SSH:
+
+```
+$ USE_SSH=true yarn deploy
+```
+
+Not using SSH:
+
+```
+$ GIT_USER=<Your GitHub username> yarn deploy
+```
+
+If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

website/docs/concepts/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "Concepts",
+  "position": 3,
+  "link": {
+    "type": "generated-index",
+    "description": "Learn about the core concepts of Mirai."
+  }
+}

website/docs/concepts/action_parsers.md

@@ -0,0 +1,111 @@
+---
+sidebar_position: 2
+---
+
+# Action Parsers
+
+Mirai supports a variety of built-in action parsers to handle different types of actions. However, you can also create custom action parsers to handle custom actions or actions that are not supported by Mirai out of the box. This guide will walk you through the basics of creating and using action parsers in Mirai.
+
+## What is a Mirai Action Parser?
+
+A Mirai action parser is a custom class that interprets specific JSON objects representing actions and executes the corresponding logic in your Flutter application. This allows for highly flexible and customizable behavior tailored to the specific needs of your application.
+
+## Creating a Custom Action Parser
+
+To create a custom action parser, you need to follow these steps:
+
+1. **Define the JSON Structure**: Define the structure of the JSON object that your action parser will interpret. This structure should be well-documented and easy to understand.
+2. **Create the Action Parser Class**: Create a new Dart class that implements the `MiraiActionParser` interface provided by Mirai. This class will contain the logic to interpret the JSON object and execute the corresponding action.
+3. **Register the Action Parser**: Register the custom action parser with Mirai so that it can be used to interpret JSON objects.
+
+## Example Action Parser
+
+In this example, we will create a custom action parser that calls a print function with a provided message.
+
+### Step 1: Define the JSON Structure
+
+The JSON structure for the custom action might look like this:
+
+```json
+{
+  "actionType": "print",
+  "message": "Hello, Mirai!"
+}
+```
+For this JSON Structure, we can create a data class to represent the custom action and to provide the `fromJson` method to convert the JSON object to the custom action object.
+
+```dart
+@freezed
+class PrintAction with _$PrintAction {
+  const factory PrintAction({
+    required String message,
+  }) = _PrintAction;
+
+  factory PrintAction.fromJson(Map<String, dynamic> json) =>
+      _$PrintActionFromJson(json);
+}
+```
+:::note
+Here we are using the freezed package to create the data class. But you can use any other method to create the data class.
+:::
+
+### Step 2: Create the Action Parser Class
+
+Next, we create a custom action parser class that implements the `MiraiActionParser` interface. This class will interpret the JSON object and execute the corresponding logic.
+
+```dart
+class PrintActionParser implements MiraiActionParser<PrintAction> {
+  @override
+  String get actionType => 'print';
+
+  @override
+  PrintAction getModel(Map<String, dynamic> json) => PrintAction.fromJson(json);
+
+  @override
+  FutureOr onCall(BuildContext context, MiraiNavigateAction model) {
+    print(model.message);
+  }
+}
+```
+
+### Step 3: Register the Action Parser
+
+Finally, you need to register the custom action parser with Mirai.
+
+There are 2 ways to register the custom action parser:
+
+1. **Register in `Mirai.initialize`**: You can register the parser when initializing Mirai by passing it in the `actionParser` parameter.
+
+```dart
+void main() async {
+  await Mirai.initialize(
+    actionParsers: const [
+      PrintActionParser(),
+    ],
+  );
+  runApp(const MyApp());
+}
+```
+
+2. **Register through MiraiRegistry**: You can also register the action parser anywhere using the `MiraiRegistry` class.
+
+`MiraiRegistry` provides you with two method to register the action parser.
+
+1. Register a single action parser:
+
+```dart
+MiraiRegistry.instance.registerAction(parser);
+```
+
+2. Register multiple action parsers:
+
+```dart
+MiraiRegistry.instance.registerAllActions([
+    MiraiShareParser(),
+    MiraiBluetoothParser(),
+]);
+```
+
+## Conclusion
+
+Creating custom action parsers in Mirai not only allows you to extend the functionality of the library but also enables you to define highly customizable behaviors within your application. By defining custom parsers for actions, you can leverage the full power of server-driven UI in your Flutter application, ensuring dynamic and responsive user interactions.

website/docs/concepts/parsers.md

@@ -0,0 +1,138 @@
+---
+sidebar_position: 1
+---
+
+# Mirai Parsers
+
+Mirai has wide variety of built-in parsers to handle different types of widgets.
+However, you can also create custom parsers to handle custom widgets or widgets that are not supported by Mirai out of the box.
+This guide will walk you through the basics of creating and using parsers in Mirai.
+
+## What is a Mirai Parser?
+
+A [MiraiParser](https://github.com/BuildMirai/mirai/blob/dev/packages/mirai_framework/lib/src/mirai_parser.dart) is a custom class that interprets specific JSON objects and converts them into Flutter widgets. 
+This allows for highly flexible and customizable UI components, tailored to the specific needs of your application.
+
+## Creating a Custom Widget Parser
+
+To create a custom parser, you need to follow these steps:
+
+1. **Define the JSON Structure**: Define the structure of the JSON object that your parser will interpret. This structure should be well-documented and easy to understand.
+2. **Create the Parser Class**: Create a new Dart class that extends the `MiraiParser` class provided by Mirai. This class will contain the logic to interpret the JSON object and generate the corresponding Flutter widget.
+3. **Register the Parser**: Register the custom parser with Mirai so that it can be used to interpret JSON objects.
+
+## Example Parser
+
+Below is a step-by-step example of creating a custom parser for a hypothetical CustomButton widget.
+
+### Step 1: Define the JSON Structure
+
+The JSON structure for the CustomButton widget might look like this:
+
+```json
+{
+  "type": "customButton",
+  "text": "Click Me",
+  "color": "#FF5733",
+  "onPressed": "handleClick"
+}
+```
+
+For this JSON Structure, we can create a data class to represent the CustomButton widget and to provide the fromJson method to convert the JSON object to the CustomButton object.
+:::note
+Here we are using the freezed package to create the data class. But you can use any other method to create the data class.
+:::
+
+```dart
+@freezed
+class CustomButton with _$CustomButton {
+  const factory CustomButton({
+    required String text,
+    required String color,
+    required VoidCallback onPressed,
+    }) = _CustomButton;
+
+  factory CustomButton.fromJson(Map<String, dynamic> json) =>
+      _$CustomButtonFromJson(json);
+}
+```
+
+### Step 2: Create the Parser Class
+
+Next, we create a new Dart class that extends the `MiraiParser` class.
+
+MiraiParser gives you 3 methods to implement:
+
+1. `type`: This method should return the type of the widget. The `type` is a unique identifier for the widget that will be used to determine which parser to use.
+2. `getModel`: This method extracts and returns the model object from the provided JSON. The model object contains the properties and data required to render the widget.
+3. `parse`: This is where you build the Flutter widget using the model object. This method should return the widget that corresponds to the JSON object.
+
+```dart
+class CustomButtonParser extends MiraiParser<CustomButton> {
+  const CustomButtonParser();
+
+  @override
+  String get type => 'customButton';
+
+  @override
+  CustomButton getModel(Map<String, dynamic> json) => CustomButton.fromJson(json);
+
+  @override
+  Widget parse(BuildContext context, model) {
+    return ElevatedButton(
+      onPressed: model.onPressed,
+      child: Text(model.text),
+      style: ElevatedButton.styleFrom(
+        backgroundColor: model.color.toColor,
+      ),
+    );
+  }
+}
+```
+
+
+### Step 3: Register the Parser
+
+Finally, you need to register the custom parser with Mirai so that it can be used to interpret JSON objects.
+
+There are 2 ways to register a parser:
+
+1. **Register in `Mirai.initialize`**: You can register the parser when initializing Mirai by passing it in the `parsers` parameter.
+
+```dart
+void main() async {
+  await Mirai.initialize(
+    parsers: const [
+      CustomButtonParser(),
+    ],
+  );
+
+  runApp(const MyApp());
+}
+```
+
+When you register the parser in `Mirai.initialize`, the parser will be available throughout the app.
+
+2. **Register through MiraiRegistry**: You can also register the parser anywhere using the `MiraiRegistry` class.
+
+`MiraiRegistry` provides you with two method to register the widget parser.
+
+1. Register a single parser
+
+```dart
+MiraiRegistry.instance.register(CustomButtonParser());
+```
+
+2. Register multiple parsers
+
+```dart
+MiraiRegistry.instance.registerAll([
+    MiraiTextParser(),
+    MiraiButtonParser(),
+]);
+```
+
+## Conclusion
+
+Creating custom parsers in Mirai not only allows you to extend the functionality of the library and build highly customizable UI components, but it also enables you to integrate third-party packages into your application. By defining custom parsers for the widgets or components provided by these packages, you can leverage their functionality within the server-driven UI paradigm that Mirai offers. This means you can use any Flutter package in your project and render its widgets from a server-side JSON response, further enhancing the flexibility and power of your application.
+

website/docs/concepts/theming.md

@@ -0,0 +1,63 @@
+---
+sidebar_position: 3
+---
+
+# Theming
+
+Theming is an essential part of any application, ensuring a consistent look and feel across the entire app. Mirai offers a powerful way to update the theme of your application dynamically using JSON.
+
+Mirai theming functions similarly to Flutter's built-in theming. You define the theme in JSON and apply it to your application using the MiraiTheme widget. This allows for a centralized and easily maintainable approach to managing your app's visual style.
+
+## Implementing Mirai Theming
+
+To implement theming in Mirai, follow these steps:
+
+1. **Replace MaterialApp with MiraiApp**: Start by replacing your `MaterialApp` with `MiraiApp`
+2. **Pass the MiraiTheme to MiraiApp**: Apply the theme by passing the `MiraiTheme` widget to the `MiraiApp`. The MiraiTheme widget takes a `MiraiTheme` object as a parameter, which is constructed from your JSON theme definition.
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:mirai/mirai.dart';
+
+void main() async {
+  await Mirai.initialize();
+  runApp(const MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  const MyApp({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return MiraiApp(
+      theme: MiraiTheme.fromJson(themeJson),
+      homeBuilder: (context) => const HomeScreen(),
+    );
+  }
+
+  Map<String, dynamic> themeJson = {
+    "brightness": "light",
+    "disabledColor": "#60FEF7FF",
+    "fontFamily": "Handjet",
+    "colorScheme": {
+      "brightness": "light",
+      "primary": "#6750a4",
+      "onPrimary": "#FFFFFF",
+      "secondary": "#615B6F",
+      "onSecondary": "#FFFFFF",
+      "surface": "#FEFBFF",
+      "onSurface": "#1C1B1E",
+      "background": "#FEFBFF",
+      "onBackground": "#1C1B1E",
+      "surfaceVariant": "#E6E0EA",
+      "onSurfaceVariant": "#48454D",
+      "error": "#AB2D25",
+      "onError": "#FFFFFF",
+      "success": "#27BA62",
+      "onSuccess": "#FFFFFF"
+    }
+  };
+}
+```
+
+For more details check out [MiraiTheme](https://github.com/buildMirai/mirai/blob/dev/packages/mirai/lib/src/parsers/mirai_theme/mirai_theme.dart) class.