Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: [MDS-489] Create MoonAuthCode component #109

Merged
merged 1 commit into from
Apr 12, 2023
Merged

feat: [MDS-489] Create MoonAuthCode component #109

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
239 changes: 239 additions & 0 deletions example/lib/src/storybook/stories/authcode.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,239 @@
import 'dart:async';

import 'package:example/src/storybook/common/color_options.dart';
import 'package:example/src/storybook/common/widgets/text_divider.dart';
import 'package:flutter/material.dart';
import 'package:moon_design/moon_design.dart';
import 'package:storybook_flutter/storybook_flutter.dart';

final StreamController<ErrorAnimationType> errorController = StreamController<ErrorAnimationType>();

class AuthCodeStory extends Story {
AuthCodeStory()
: super(
name: "AuthCode",
builder: (context) {
final mainAxisAlignmentKnob = context.knobs.options(
label: "mainAxisAlignment",
description: "Horizontal alignment of auth input fields.",
initial: MainAxisAlignment.center,
options: const [
Option(label: "start", value: MainAxisAlignment.start),
Option(label: "center", value: MainAxisAlignment.center),
Option(label: "end", value: MainAxisAlignment.end),
Option(label: "spaceBetween", value: MainAxisAlignment.spaceBetween),
Option(label: "spaceAround", value: MainAxisAlignment.spaceAround),
Option(label: "spaceEvenly", value: MainAxisAlignment.spaceEvenly),
],
);

final shapeKnob = context.knobs.options(
label: "shape",
description: "Shape of the auth input fields.",
initial: AuthFieldShape.box,
options: const [
Option(label: "box", value: AuthFieldShape.box),
Option(label: "circle", value: AuthFieldShape.circle),
Option(label: "underline", value: AuthFieldShape.underline),
],
);

final selectedFillColorsKnob = context.knobs.options(
label: "selectedFillColor",
description: "MoonColors variants for MoonAuthCode.",
initial: 40, // null
options: colorOptions,
);

final selectedFillColor = colorTable(context)[selectedFillColorsKnob];

final activeFillColorsKnob = context.knobs.options(
label: "activeFillColor",
description: "MoonColors variants for MoonAuthCode.",
initial: 40, // null
options: colorOptions,
);

final activeFillColor = colorTable(context)[activeFillColorsKnob];

final inactiveFillColorsKnob = context.knobs.options(
label: "inactiveFillColor",
description: "MoonColors variants for MoonAuthCode.",
initial: 40, // null
options: colorOptions,
);

final inactiveFillColor = colorTable(context)[inactiveFillColorsKnob];

final selectedBorderColorsKnob = context.knobs.options(
label: "selectedBorderColor",
description: "MoonColors variants for MoonAuthCode.",
initial: 40, // null
options: colorOptions,
);

final selectedBorderColor = colorTable(context)[selectedBorderColorsKnob];

final activeBorderColorsKnob = context.knobs.options(
label: "activeBorderColor",
description: "MoonColors variants for MoonAuthCode.",
initial: 40, // null
options: colorOptions,
);

final activeBorderColor = colorTable(context)[activeBorderColorsKnob];

final inactiveBorderColorsKnob = context.knobs.options(
label: "inactiveBorderColor",
description: "MoonColors variants for MoonAuthCode.",
initial: 40, // null
options: colorOptions,
);

final inactiveBorderColor = colorTable(context)[inactiveBorderColorsKnob];

final borderRadiusKnob = context.knobs.sliderInt(
max: 12,
initial: 8,
label: "borderRadius",
description: "Border radius for auth input fields.",
);

final gapKnob = context.knobs.sliderInt(
max: 12,
initial: 8,
label: "gap",
description: "Gap between auth input fields.",
);

final enableKnob = context.knobs.boolean(
label: "enabled",
description: "Enable AuthCode.",
);

final obscuringKnob = context.knobs.boolean(
label: "obscureText",
description: "Obscure auth input fields.",
);

final peekWhenObscuringKnob = context.knobs.boolean(
label: "peekWhenObscuring",
description: "Peek when obscuring.",
);

final errorAnimationKnob = context.knobs.boolean(
label: "Error shake animation",
description: "Show error with shake animation (ErrorAnimationType.shake).",
);

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

return StatefulBuilder(
builder: (context, setState) {
return Directionality(
textDirection: setRtlModeKnob ? TextDirection.rtl : TextDirection.ltr,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(height: 64),
const TextDivider(text: "Disabled MoonAuthCode"),
const SizedBox(height: 32),
MoonAuthCode(
enableInputFill: true,
authInputFieldCount: 4,
mainAxisAlignment: mainAxisAlignmentKnob,
borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()),
selectedFillColor: selectedFillColor,
activeFillColor: activeFillColor,
inactiveFillColor: inactiveFillColor,
selectedBorderColor: selectedBorderColor,
activeBorderColor: activeBorderColor,
inactiveBorderColor: inactiveBorderColor,
enabled: enableKnob,
gap: gapKnob.toDouble(),
authFieldShape: shapeKnob,
obscureText: obscuringKnob,
obscuringCharacter: '*',
peekWhenObscuring: peekWhenObscuringKnob,
validator: (String? value) => null,
errorBuilder: (BuildContext context, String? errorText) => const SizedBox(),
),
const SizedBox(height: 32),
const TextDivider(text: "Active MoonAuthCode"),
const SizedBox(height: 32),
MoonAuthCode(
autoFocus: true,
enableInputFill: true,
mainAxisAlignment: mainAxisAlignmentKnob,
borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()),
selectedFillColor: selectedFillColor,
activeFillColor: activeFillColor,
inactiveFillColor: inactiveFillColor,
selectedBorderColor: selectedBorderColor,
activeBorderColor: activeBorderColor,
inactiveBorderColor: inactiveBorderColor,
gap: gapKnob.toDouble(),
authFieldShape: shapeKnob,
obscureText: obscuringKnob,
obscuringCharacter: '*',
peekWhenObscuring: peekWhenObscuringKnob,
validator: (String? value) => null,
errorBuilder: (BuildContext context, String? errorText) => const SizedBox(),
),
const SizedBox(height: 32),
const TextDivider(text: "Error MoonAuthCode"),
const SizedBox(height: 32),
SizedBox(
height: 95,
child: MoonAuthCode(
enableInputFill: true,
authInputFieldCount: 4,
mainAxisAlignment: mainAxisAlignmentKnob,
borderRadius: BorderRadius.circular(borderRadiusKnob.toDouble()),
errorStreamController: errorController,
selectedFillColor: selectedFillColor,
activeFillColor: activeFillColor,
inactiveFillColor: inactiveFillColor,
selectedBorderColor: selectedBorderColor,
activeBorderColor: activeBorderColor,
inactiveBorderColor: inactiveBorderColor,
gap: gapKnob.toDouble(),
authFieldShape: shapeKnob,
obscureText: obscuringKnob,
obscuringCharacter: '*',
peekWhenObscuring: peekWhenObscuringKnob,
onCompleted: (pin) {
if (pin != '9921') {
errorController.add(
errorAnimationKnob ? ErrorAnimationType.shake : ErrorAnimationType.noAnimation,
);
}
},
validator: (pin) {
if (pin?.length == 4 && pin != '9921') {
return 'Invalid authentication code. Please try again.';
}
return null;
},
errorBuilder: (context, errorText) {
return Align(
child: Container(
padding: const EdgeInsets.only(top: 8),
child: Text(errorText ?? ''),
),
);
},
),
),
const SizedBox(height: 64),
],
),
);
},
);
},
);
}
2 changes: 2 additions & 0 deletions example/lib/src/storybook/storybook.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import 'package:example/src/storybook/common/widgets/version.dart';
import 'package:example/src/storybook/stories/accordion.dart';
import 'package:example/src/storybook/stories/alert.dart';
import 'package:example/src/storybook/stories/authCode.dart';
import 'package:example/src/storybook/stories/avatar.dart';
import 'package:example/src/storybook/stories/button.dart';
import 'package:example/src/storybook/stories/checkbox.dart';
Expand Down Expand Up @@ -73,6 +74,7 @@ class StorybookPage extends StatelessWidget {
stories: [
AccordionStory(),
AlertStory(),
AuthCodeStory(),
AvatarStory(),
ButtonStory(),
CheckboxStory(),
Expand Down
4 changes: 2 additions & 2 deletions lib/moon_design.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ library moon_design;

export 'package:moon_design/src/theme/accordion/accordion_theme.dart';
export 'package:moon_design/src/theme/alert/alert_theme.dart';
export 'package:moon_design/src/theme/authcode/authcode_theme.dart';
export 'package:moon_design/src/theme/avatar/avatar_theme.dart';
export 'package:moon_design/src/theme/borders.dart';
export 'package:moon_design/src/theme/button/button_theme.dart';
Expand All @@ -26,15 +27,14 @@ export 'package:moon_design/src/theme/tooltip/tooltip_theme.dart';
export 'package:moon_design/src/theme/typography/text_colors.dart';
export 'package:moon_design/src/theme/typography/text_styles.dart';
export 'package:moon_design/src/theme/typography/typography.dart';

export 'package:moon_design/src/utils/extensions.dart';
export 'package:moon_design/src/utils/measure_size.dart';
export 'package:moon_design/src/utils/widget_surveyor.dart';

export 'package:moon_design/src/widgets/accordion/accordion_item.dart';
export 'package:moon_design/src/widgets/alert/alert.dart';
export 'package:moon_design/src/widgets/alert/filled_alert.dart';
export 'package:moon_design/src/widgets/alert/outlined_alert.dart';
export 'package:moon_design/src/widgets/authcode/authcode.dart';
export 'package:moon_design/src/widgets/avatar/avatar.dart';
export 'package:moon_design/src/widgets/buttons/button.dart';
export 'package:moon_design/src/widgets/buttons/filled_button.dart';
Expand Down
2 changes: 1 addition & 1 deletion lib/src/theme/alert/alert_properties.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ class MoonAlertProperties extends ThemeExtension<MoonAlertProperties> with Diagn
..add(DiagnosticsProperty<Duration>("transitionDuration", transitionDuration))
..add(DiagnosticsProperty<Curve>("transitionCurve", transitionCurve))
..add(DiagnosticsProperty<EdgeInsets>("padding", padding))
..add(DiagnosticsProperty<TextStyle>("contentTextStyle", bodyTextStyle))
..add(DiagnosticsProperty<TextStyle>("bodyTextStyle", bodyTextStyle))
..add(DiagnosticsProperty<TextStyle>("titleTextStyle", titleTextStyle));
}
}
Loading