Skip to content

Commit

Permalink
fix: [MDS-504] Fork storybook_flutter, create extra functionality and…
Browse files Browse the repository at this point in the history 
… add it as dependency. (#148)
  • Loading branch information
@Kypsis
Kypsis authored Apr 24, 2023
1 parent 920c652 commit c92a516
Show file tree
Hide file tree
Showing 23 changed files with 1,346 additions and 1,338 deletions.
1 change: 0 additions & 1 deletion example/lib/src/storybook/common/color_options.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,6 @@ List<Option<int>> colorOptions = const [
Option(label: "whis60", value: 37),
Option(label: "whis10", value: 38),
Option(label: "transparent", value: 39),
Option(label: "null", value: 40),
];

/// LUT for the color options.
Expand Down
37 changes: 21 additions & 16 deletions example/lib/src/storybook/common/widgets/version.dart
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import 'package:example/src/storybook/storybook.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

Expand Down Expand Up @@ -27,22 +28,26 @@ class _MoonVersionWidgetState extends State<MoonVersionWidget> {

@override
Widget build(BuildContext context) {
return Material(
child: Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [
SvgPicture.asset("assets/svg/moon-logo-short.svg", width: 24.0, height: 24.0),
const SizedBox(width: 8.0),
Text(
"Moon Design",
style: MoonTextStyles.heading.text16,
),
const SizedBox(width: 6.0),
Text("v$_version", style: MoonTextStyles.heading.text16),
],
return IgnorePointer(
child: Material(
color: Colors.transparent,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: StorybookPage.isLargeScreen ? MainAxisAlignment.center : MainAxisAlignment.end,
children: [
SvgPicture.asset("assets/svg/moon-logo-short.svg", width: 24.0, height: 24.0),
if (StorybookPage.isLargeScreen) ...[
const SizedBox(width: 8.0),
Text(
"Moon Design",
style: MoonTextStyles.heading.text16,
),
],
const SizedBox(width: 6.0),
Text("v$_version", style: MoonTextStyles.heading.text16),
],
),
),
),
);
Expand Down
292 changes: 148 additions & 144 deletions example/lib/src/storybook/stories/accordion.dart
View file

Large diffs are not rendered by default.

343 changes: 174 additions & 169 deletions example/lib/src/storybook/stories/alert.dart
View file

Large diffs are not rendered by default.

235 changes: 120 additions & 115 deletions example/lib/src/storybook/stories/authcode.dart
View file

Large diffs are not rendered by default.

132 changes: 66 additions & 66 deletions example/lib/src/storybook/stories/avatar.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,10 @@ class AvatarStory extends Story {
initial: "MD",
);

final avatarSizesKnob = context.knobs.options(
final avatarSizesKnob = context.knobs.nullable.options(
label: "avatarSize",
description: "Avatar size variants.",
enabled: false,
initial: MoonAvatarSize.md,
options: const [
Option(label: "xs", value: MoonAvatarSize.xs),
Expand All @@ -28,36 +29,40 @@ class AvatarStory extends Story {
],
);

final avatarTextColorKnob = context.knobs.options(
final avatarTextColorKnob = context.knobs.nullable.options(
label: "textColor",
description: "MoonColors variants for Avatar text.",
initial: 40, // null
enabled: false,
initial: 0, // piccolo
options: colorOptions,
);

final textColor = colorTable(context)[avatarTextColorKnob];
final textColor = colorTable(context)[avatarTextColorKnob ?? 40];

final avatarBackgroundColorKnob = context.knobs.options(
final avatarBackgroundColorKnob = context.knobs.nullable.options(
label: "backgroundColor",
description: "MoonColors variants for Avatar background.",
initial: 40, // null
enabled: false,
initial: 0, // piccolo
options: colorOptions,
);

final backgroundColor = colorTable(context)[avatarBackgroundColorKnob];
final backgroundColor = colorTable(context)[avatarBackgroundColorKnob ?? 40];

final badgeColorKnob = context.knobs.options(
final badgeColorKnob = context.knobs.nullable.options(
label: "badgeColor",
description: "MoonColors variants for the Avatar badge.",
initial: 40, // null
enabled: false,
initial: 0, // piccolo
options: colorOptions,
);

final badgeColor = colorTable(context)[badgeColorKnob];
final badgeColor = colorTable(context)[badgeColorKnob ?? 40];

final avatarBadgeAlignmentKnob = context.knobs.options(
final avatarBadgeAlignmentKnob = context.knobs.nullable.options(
label: "badgeAlignment",
description: "Avatar badge alignment.",
enabled: false,
initial: MoonBadgeAlignment.bottomRight,
options: const [
Option(label: "topLeft", value: MoonBadgeAlignment.topLeft),
Expand All @@ -67,25 +72,28 @@ class AvatarStory extends Story {
],
);

final borderRadiusKnob = context.knobs.sliderInt(
max: 32,
initial: 8,
final borderRadiusKnob = context.knobs.nullable.sliderInt(
label: "borderRadius",
description: "Border radius for the Avatar.",
enabled: false,
initial: 8,
max: 32,
);

final badgeMarginKnob = context.knobs.sliderInt(
max: 8,
initial: 4,
final badgeMarginKnob = context.knobs.nullable.sliderInt(
label: "badgeMarginValue",
description: "Badge margin value for the Avatar.",
enabled: false,
initial: 4,
max: 8,
);

final badgeSizeKnob = context.knobs.sliderInt(
max: 16,
initial: 8,
final badgeSizeKnob = context.knobs.nullable.sliderInt(
label: "badgeSize",
description: "Badge Size for the Avatar.",
enabled: false,
initial: 8,
max: 16,
);

final showBadgeKnob = context.knobs.boolean(
Expand All @@ -94,54 +102,46 @@ class AvatarStory extends Story {
initial: true,
);

final setRtlModeKnob = context.knobs.boolean(
label: "RTL mode",
description: "Switch between LTR and RTL modes.",
);

return Directionality(
textDirection: setRtlModeKnob ? TextDirection.rtl : TextDirection.ltr,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(height: 64),
const TextDivider(text: "Customisable Avatar"),
const SizedBox(height: 32),
MoonAvatar(
textColor: textColor,
avatarSize: avatarSizesKnob,
badgeSize: badgeSizeKnob.toDouble(),
borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()),
badgeMarginValue: badgeMarginKnob.toDouble(),
backgroundColor: backgroundColor,
showBadge: showBadgeKnob,
badgeColor: badgeColor,
badgeAlignment: avatarBadgeAlignmentKnob,
content: Padding(
padding: const EdgeInsets.only(top: 1.0),
child: Text(customLabelTextKnob),
),
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(height: 64),
const TextDivider(text: "Customisable Avatar"),
const SizedBox(height: 32),
MoonAvatar(
textColor: textColor,
avatarSize: avatarSizesKnob,
badgeSize: badgeSizeKnob?.toDouble(),
borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
badgeMarginValue: badgeMarginKnob?.toDouble(),
backgroundColor: backgroundColor,
showBadge: showBadgeKnob,
badgeColor: badgeColor,
badgeAlignment: avatarBadgeAlignmentKnob ?? MoonBadgeAlignment.bottomRight,
content: Padding(
padding: const EdgeInsets.only(top: 1.0),
child: Text(customLabelTextKnob),
),
const SizedBox(height: 40),
const TextDivider(text: "Preset Avatar with picture background"),
const SizedBox(height: 32),
MoonAvatar(
avatarSize: avatarSizesKnob,
badgeSize: badgeSizeKnob.toDouble(),
borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()),
badgeMarginValue: badgeMarginKnob.toDouble(),
backgroundColor: backgroundColor,
showBadge: showBadgeKnob,
badgeColor: badgeColor,
badgeAlignment: avatarBadgeAlignmentKnob,
backgroundImage: const AssetImage(
"assets/images/placeholder-640x359.png",
),
),
const SizedBox(height: 40),
const TextDivider(text: "Preset Avatar with picture background"),
const SizedBox(height: 32),
MoonAvatar(
avatarSize: avatarSizesKnob,
badgeSize: badgeSizeKnob?.toDouble(),
borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
badgeMarginValue: badgeMarginKnob?.toDouble(),
backgroundColor: backgroundColor,
showBadge: showBadgeKnob,
badgeColor: badgeColor,
badgeAlignment: avatarBadgeAlignmentKnob ?? MoonBadgeAlignment.bottomRight,
backgroundImage: const AssetImage(
"assets/images/placeholder-640x359.png",
),
const SizedBox(height: 64),
],
),
),
const SizedBox(height: 64),
],
),
);
},
Expand Down
Loading

0 comments on commit c92a516

Please sign in to comment.