feat: [MDS-742] Enable code plugin and add code snippets (#315)

Co-authored-by: BirgittMajas <79840500+BirgittMajas@users.noreply.github.com>

example/assets/code_snippets/accordion.md

@@ -0,0 +1,61 @@
+import 'package:flutter/material.dart';
+import 'package:moon_design/moon_design.dart';
+
+enum AccordionItems { first, second }
+
+class Accordion extends StatefulWidget { 
+    const Accordion({super.key});
+
+    @override
+    State<Accordion> createState() => _AccordionState();
+}
+
+class _AccordionState extends State<Accordion> {
+    AccordionItems? _currentlyOpenAccordionItem = AccordionItems.first;
+
+    @override
+    Widget build(BuildContext context) {
+        const String contentText = 
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, "
+            "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, "
+            "quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
+
+        return Column(
+            children: [
+                MoonAccordion<AccordionItems>(
+                    // identityValue and groupIdentityValue can be used to control the 
+                    // auto collapse behaviour of the accordion.
+                    identityValue: AccordionItems.first,
+                    groupIdentityValue: _currentlyOpenAccordionItem,
+                    accordionSize: MoonAccordionSize.sm,
+                    childrenPadding: const EdgeInsets.all(12),
+                    onExpansionChanged: (AccordionItems? value) => setState(
+                        () => _currentlyOpenAccordionItem = value,
+                    ),
+                    leading: const Icon(MoonIcons.other_frame_24_light),
+                    title: const Text("Grouped MoonAccordion item #1"),
+                    children: const [
+                        Text(contentText),
+                    ],
+                ),
+                MoonAccordion<AccordionItems>(
+                    // identityValue and groupIdentityValue can be used to control the 
+                    // auto collapse behaviour of the accordion.
+                    identityValue: AccordionItems.second,
+                    groupIdentityValue: _currentlyOpenAccordionItem,
+                    accordionSize: MoonAccordionSize.sm,
+                    hasContentOutside: true,
+                    childrenPadding: const EdgeInsets.all(12),
+                    onExpansionChanged: (AccordionItems? value) => setState(
+                        () => _currentlyOpenAccordionItem = value,
+                    ),
+                    leading: const Icon(MoonIcons.other_frame_24_light),
+                    title: const Text("Grouped MoonAccordion item #2"),
+                    children: const [
+                        Text(contentText),
+                    ],
+                ),
+            ],
+        );
+    }
+}

example/assets/code_snippets/alert.md

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+import 'package:moon_design/moon_design.dart';
+
+class Alert extends StatelessWidget {
+    const Alert({super.key});
+
+    @override
+    Widget build(BuildContext context) {
+        return Column(
+            children: [
+                MoonAlert(
+                    show: true,
+                    leading: const Icon(MoonIcons.other_frame_24_light),
+                    title: const Text("Base MoonAlert"),
+                    trailing: MoonButton.icon(
+                        buttonSize: MoonButtonSize.xs,
+                        onTap: () => {},
+                        icon: const Icon(MoonIcons.controls_close_24_light),
+                    ),
+                    body: const Text("Here goes MoonAlert body"),
+                ),
+                MoonFilledAlert(
+                    show: true,
+                    color: context.moonColors!.chichi,
+                    onTrailingTap: () => {},
+                    leading: const Icon(MoonIcons.notifications_alert_24_light),
+                    title: const Text("Filled error MoonAlert"),
+                ),
+                MoonOutlinedAlert(
+                    show: true,
+                    color: context.moonColors!.roshi,
+                    onTrailingTap: () => {},
+                    leading: const Icon(MoonIcons.generic_check_rounded_24_light),
+                    title: const Text("Outlined success MoonAlert"),
+                ),
+            ],
+        );
+    }
+}

example/assets/code_snippets/auth_code.md

@@ -0,0 +1,55 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:moon_design/moon_design.dart';
+
+class AuthCode extends StatefulWidget {
+    const AuthCode({super.key});
+
+    @override
+    State<AuthCode> createState() => _AuthCodeState();
+}
+
+class _AuthCodeState extends State<AuthCode> {
+    late StreamController<ErrorAnimationType> _errorStreamController;
+
+    @override
+    void initState() {
+        super.initState();
+
+        _errorStreamController = StreamController<ErrorAnimationType>();
+    }
+
+    @override
+    void dispose() {
+        _errorStreamController.close();
+
+        super.dispose();
+    }
+
+    @override
+    Widget build(BuildContext context) {
+        return SizedBox(
+            height: 95, // To avoid widget jumping with error text, use a fixed-height wrapper.
+            child: MoonAuthCode(
+                errorStreamController: _errorStreamController,
+                onCompleted: (String pin) {
+                    if (pin != '123456') {
+                        _errorStreamController.add(ErrorAnimationType.shake);
+                    }
+                },
+                validator: (String? pin) => pin?.length == 6 && pin != '123456'
+                    ? 'Invalid authentication code. Please try again.'
+                    : null,
+                errorBuilder: (BuildContext context, String? errorText) {
+                    return Align(
+                        child: Padding(
+                            padding: const EdgeInsets.only(top: 8),
+                            child: Text(errorText ?? ''),
+                        ),
+                    );
+                },
+            ),
+        );
+    }
+}

example/assets/code_snippets/avatar.md

@@ -0,0 +1,15 @@
+import 'package:flutter/material.dart'; 
+import 'package:moon_design/moon_design.dart';
+
+class Avatar extends StatelessWidget { 
+    const Avatar({super.key});
+
+    @override
+    Widget build(BuildContext context) {
+        return const MoonAvatar(
+            avatarSize: MoonAvatarSize.sm,
+            showBadge: true,
+            content: Text('MD'),
+        );
+    }
+}

example/assets/code_snippets/bottom_sheet.md

@@ -0,0 +1,45 @@
+import 'package:flutter/material.dart';
+import 'package:moon_design/moon_design.dart';
+
+class BottomSheet extends StatelessWidget {
+    const BottomSheet({super.key});
+
+    @override
+    Widget build(BuildContext context) {
+        Future<dynamic> bottomSheetBuilder(BuildContext context) {
+            return showMoonModalBottomSheet(
+                context: context,
+                enableDrag: true,
+                height: MediaQuery.of(context).size.height * 0.7,
+                builder: (BuildContext context) => Column(
+                    children: [
+                        // Drag handle for the bottom sheet
+                        Container(
+                            height: 4,
+                            width: 40,
+                            margin: const EdgeInsets.symmetric(vertical: 8),
+                            decoration: ShapeDecoration(
+                                color: context.moonColors!.beerus,
+                                shape: MoonSquircleBorder(
+                                    borderRadius: BorderRadius.circular(16).squircleBorderRadius(context),
+                                ),
+                            ),
+                        ),
+                        const Expanded(
+                            child: Align(
+                                child: Text('MoonBottomSheet example'),
+                            ),
+                        ),
+                    ],
+                ),
+            );
+        }
+
+        return Center(
+            child: MoonFilledButton(
+                onTap: () => bottomSheetBuilder(context),
+                label: const Text("Tap me"),
+            ),
+        );
+    }
+}

example/assets/code_snippets/button.md

@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+import 'package:moon_design/moon_design.dart';
+
+class Button extends StatelessWidget {
+    const Button({super.key});
+
+    @override
+    Widget build(BuildContext context) {
+        return Column(
+            children: [
+                MoonButton(
+                    buttonSize: MoonButtonSize.sm,
+                    onTap: () {},
+                    leading: const Icon(MoonIcons.other_frame_24_light),
+                    label: const Text('MoonButton'),
+                    trailing: const Icon(MoonIcons.other_frame_24_light),
+                ),
+                MoonButton.icon(
+                    buttonSize: MoonButtonSize.sm,
+                    onTap: () {},
+                    icon: const Icon(MoonIcons.other_frame_24_light),
+                ),
+                MoonFilledButton(
+                    buttonSize: MoonButtonSize.sm,
+                    onTap: () {},
+                    leading: const Icon(MoonIcons.other_frame_24_light),
+                    label: const Text("MoonFilledButton"),
+                    trailing: const Icon(MoonIcons.other_frame_24_light),
+                ),
+                MoonOutlinedButton(
+                    buttonSize: MoonButtonSize.sm,
+                    onTap: () {},
+                    leading: const Icon(MoonIcons.other_frame_24_light),
+                    label: const Text("MoonOutlinedButton"),
+                    trailing: const Icon(MoonIcons.other_frame_24_light),
+                ),
+                MoonTextButton(
+                    buttonSize: MoonButtonSize.sm,
+                    onTap: () {},
+                    leading: const Icon(MoonIcons.other_frame_24_light),
+                    label: const Text("MoonTextButton"),
+                    trailing: const Icon(MoonIcons.other_frame_24_light),
+                ),
+            ],
+        );
+    }
+}

example/assets/code_snippets/carousel.md

@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+import 'package:moon_design/moon_design.dart';
+
+class Carousel extends StatelessWidget {
+    const Carousel({super.key});
+
+    @override
+    Widget build(BuildContext context) {
+        return OverflowBox(
+            maxWidth: MediaQuery.of(context).size.width,
+            minHeight: 110,
+            maxHeight: 110,
+            child: MoonCarousel(
+                itemCount: 10,
+                itemExtent: 110,
+                itemBuilder: (BuildContext context, int itemIndex, int _) => Container(
+                    decoration: ShapeDecoration(
+                        color: context.moonColors!.goku,
+                        shape: MoonSquircleBorder(
+                            borderRadius: BorderRadius.circular(12).squircleBorderRadius(context),
+                        ),
+                    ),
+                    child: Center(
+                        child: Text("${itemIndex + 1}"),
+                    ),
+                ),
+            ),
+        );
+    }
+}

example/assets/code_snippets/checkbox.md

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+import 'package:moon_design/moon_design.dart';
+
+class Checkbox extends StatefulWidget {
+    const Checkbox({super.key});
+
+    @override
+    State<Checkbox> createState() => _CheckboxState();
+}
+
+class _CheckboxState extends State<Checkbox> {
+    bool? checkboxValue = false;
+    bool? checkboxWithLabelValue = false;
+
+    @override
+    Widget build(BuildContext context) {
+        return Column(
+            children: [
+                MoonCheckbox(
+                    value: checkboxValue,
+                    onChanged: (bool? newValue) => setState(() => checkboxValue = newValue),
+                ),
+                MoonCheckbox.withLabel(
+                    context,
+                    value: checkboxWithLabelValue,
+                    label: "MoonCheckbox with label",
+                    onChanged: (bool? newValue) => setState(() => checkboxWithLabelValue = newValue),
+                ),
+            ],
+        );
+    }
+}

example/assets/code_snippets/chip.md

@@ -0,0 +1,26 @@
+import 'package:flutter/material.dart';
+import 'package:moon_design/moon_design.dart';
+
+class Chip extends StatelessWidget {
+    const Chip({super.key});
+
+    @override
+    Widget build(BuildContext context) {
+        return const Column(
+            children: [
+                MoonChip(
+                    chipSize: MoonChipSize.sm,
+                    leading: Icon(MoonIcons.other_frame_24_light),
+                    label: Text('MoonChip'),
+                    trailing: Icon(MoonIcons.other_frame_24_light),
+                ),
+                MoonChip.text(
+                    chipSize: MoonChipSize.sm,
+                    leading: Icon(MoonIcons.other_frame_24_light),
+                    label: Text('MoonChip with text'),
+                    trailing: Icon(MoonIcons.other_frame_24_light),
+                ),
+            ],
+        );
+    }
+}

example/assets/code_snippets/circular_loader.md

@@ -0,0 +1,13 @@
+import 'package:flutter/material.dart';
+import 'package:moon_design/moon_design.dart';
+
+class CircularLoader extends StatelessWidget {
+    const CircularLoader({super.key});
+
+    @override
+    Widget build(BuildContext context) {
+        return const MoonCircularLoader(
+            circularLoaderSize: MoonCircularLoaderSize.sm,
+        );
+    }
+}

example/assets/code_snippets/circular_progress.md

@@ -0,0 +1,15 @@
+import 'package:flutter/material.dart';
+import 'package:moon_design/moon_design.dart';
+
+class CircularProgress extends StatelessWidget {
+    const CircularProgress({super.key});
+
+    @override
+    Widget build(BuildContext context) {
+        return const MoonCircularProgress(
+            value: 0.75,
+            circularProgressSize: MoonCircularProgressSize.sm,
+        );
+    }
+}
+