Merge pull request #984 from AppFlowy-IO/feat/appflowy_board_docs

docs: readme for appflowy_board

Author: appflowy

frontend/app_flowy/lib/plugins/board/presentation/board_page.dart

@@ -106,7 +106,7 @@ class _BoardContentState extends State<BoardContent> {
         scrollController: scrollController,
         dataController: context.read<BoardBloc>().boardController,
         headerBuilder: _buildHeader,
-        footBuilder: _buildFooter,
+        footerBuilder: _buildFooter,
         cardBuilder: (_, column, columnItem) => _buildCard(
           context,
           column,

frontend/app_flowy/packages/appflowy_board/README.md

@@ -1,87 +1,71 @@
 # appflowy_board
 
-The **appflowy_board** is a package that is used in [AppFlowy](https://github.com/AppFlowy-IO/AppFlowy). For the moment, this package is iterated very fast.
+<h1 align="center"><b>AppFlowy Board</b></h1>
 
+<p align="center">A customizable and draggable Kanban Board widget for Flutter</p>
 
-**appflowy_board** will be a standard git repository when it becomes stable.
-## Getting Started
+<p align="center">
+    <a href="https://discord.gg/ZCCYN4Anzq"><b>Discord</b></a> •
+    <a href="https://twitter.com/appflowy"><b>Twitter</b></a>
+</p>
 
-<p>
-<img src="https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_board/example/gifs/appflowy_board_video_2.gif?raw=true" width="680" title="AppFlowyBoard">
+<p align="center">
 <img src="https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_board/example/gifs/appflowy_board_video_1.gif?raw=true" width="680" title="AppFlowyBoard">
 </p>
 
+## Intro
+
+appflowy_board is a customizable and draggable Kanban Board widget for Flutter. 
+You can use it to create a Kanban Board tool like those in Trello. 
+
+Check out [AppFlowy](https://github.com/AppFlowy-IO/AppFlowy) to see how appflowy_board is used to build a BoardView database.
+<p align="center">
+<img src="https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_board/example/gifs/appflowy_board_video_2.gif?raw=true" width="680" title="AppFlowyBoard">
+</p>
+
+
+## Getting Started
+Add the AppFlowy Board [Flutter package](https://docs.flutter.dev/development/packages-and-plugins/using-packages) to your environment.
+
+With Flutter:
+```dart
+flutter pub add appflowy_board
+```
+
+This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):
 ```dart
-@override
-  void initState() {
-    final column1 = BoardColumnData(id: "To Do", items: [
-      TextItem("Card 1"),
-      TextItem("Card 2"),
-      TextItem("Card 3"),
-      TextItem("Card 4"),
-    ]);
-    final column2 = BoardColumnData(id: "In Progress", items: [
-      TextItem("Card 5"),
-      TextItem("Card 6"),
-    ]);
-
-    final column3 = BoardColumnData(id: "Done", items: []);
-
-    boardDataController.addColumn(column1);
-    boardDataController.addColumn(column2);
-    boardDataController.addColumn(column3);
-
-    super.initState();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    final config = BoardConfig(
-      columnBackgroundColor: HexColor.fromHex('#F7F8FC'),
-    );
-    return Container(
-      color: Colors.white,
-      child: Padding(
-        padding: const EdgeInsets.symmetric(vertical: 30, horizontal: 20),
-        child: Board(
-          dataController: boardDataController,
-          footBuilder: (context, columnData) {
-            return AppFlowyColumnFooter(
-              icon: const Icon(Icons.add, size: 20),
-              title: const Text('New'),
-              height: 50,
-              margin: config.columnItemPadding,
-            );
-          },
-          headerBuilder: (context, columnData) {
-            return AppFlowyColumnHeader(
-              icon: const Icon(Icons.lightbulb_circle),
-              title: Text(columnData.id),
-              addIcon: const Icon(Icons.add, size: 20),
-              moreIcon: const Icon(Icons.more_horiz, size: 20),
-              height: 50,
-              margin: config.columnItemPadding,
-            );
-          },
-          cardBuilder: (context, item) {
-            final textItem = item as TextItem;
-            return AppFlowyColumnItemCard(
-              key: ObjectKey(item),
-              child: Align(
-                alignment: Alignment.centerLeft,
-                child: Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: 20),
-                  child: Text(textItem.s),
-                ),
-              ),
-            );
-          },
-          columnConstraints: const BoxConstraints.tightFor(width: 240),
-          config: BoardConfig(
-            columnBackgroundColor: HexColor.fromHex('#F7F8FC'),
-          ),
-        ),
-      ),
-    );
-  }
-```
+dependencies:
+  appflowy_board: ^0.0.6
+```
+
+Import the package in your Dart file:
+```dart
+import 'package:appflowy_board/appflowy_board.dart';
+```
+
+## Usage Example
+To quickly grasp how it can be used, look at the /example/lib folder.
+First, run main.dart to play with the demo.
+
+Second, let's delve into multi_board_list_example.dart to understand a few key components:
+* A Board widget is created via instantiating an AFBoard() object. 
+* In the AFBoard() object, you can find:
+  * AFBoardDataController, which is defined in board_data.dart, is feeded with prepopulated mock data. It also contains callback functions to materialize future user data.
+  * Three builders: AppFlowyColumnHeader, AppFlowyColumnFooter, AppFlowyColumnItemCard. See below image for what they are used for.
+<p>
+<img src="https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_board/example/gifs/appflowy_board_builders.jpg?raw=true" width="100%" title="AppFlowyBoard">
+</p>
+
+## Glossary
+Please refer to the API documentation.
+
+## Contributing
+Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
+
+Please look at [CONTRIBUTING.md](https://appflowy.gitbook.io/docs/essential-documentation/contribute-to-appflowy/contributing-to-appflowy) for details.
+
+## License
+Distributed under the AGPLv3 License. See [LICENSE](https://github.com/AppFlowy-IO/AppFlowy-Docs/blob/main/LICENSE) for more information.
+
+
+

frontend/app_flowy/packages/appflowy_board/example/gifs/appflowy_board_builders.jpg

@@ -66,7 +66,7 @@ class _MultiBoardListExampleState extends State<MultiBoardListExample> {
         padding: const EdgeInsets.symmetric(vertical: 30, horizontal: 20),
         child: AFBoard(
           dataController: boardDataController,
-          footBuilder: (context, columnData) {
+          footerBuilder: (context, columnData) {
             return AppFlowyColumnFooter(
               icon: const Icon(Icons.add, size: 20),
               title: const Text('New'),

frontend/app_flowy/packages/appflowy_board/example/lib/multi_board_list_example.dart

@@ -56,7 +56,7 @@ class AFBoard extends StatelessWidget {
   final AFBoardColumnHeaderBuilder? headerBuilder;
 
   ///
-  final AFBoardColumnFooterBuilder? footBuilder;
+  final AFBoardColumnFooterBuilder? footerBuilder;
 
   ///
   final AFBoardDataController dataController;
@@ -78,7 +78,7 @@ class AFBoard extends StatelessWidget {
     required this.dataController,
     required this.cardBuilder,
     this.background,
-    this.footBuilder,
+    this.footerBuilder,
     this.headerBuilder,
     this.scrollController,
     this.scrollManager,
@@ -112,7 +112,7 @@ class AFBoard extends StatelessWidget {
             delegate: phantomController,
             columnConstraints: columnConstraints,
             cardBuilder: cardBuilder,
-            footBuilder: footBuilder,
+            footBuilder: footerBuilder,
             headerBuilder: headerBuilder,
             phantomController: phantomController,
             onReorder: dataController.moveColumn,