diff --git a/.gitignore b/.gitignore index 369fe7d8..fe5b1a1d 100644 --- a/.gitignore +++ b/.gitignore @@ -145,3 +145,4 @@ $RECYCLE.BIN/ *.msp *.lnk **/Generated.xcconfig +.fvmrc diff --git a/example/assets/Omer.jpg b/example/assets/Omer.jpg new file mode 100644 index 00000000..6f3e7d4a Binary files /dev/null and b/example/assets/Omer.jpg differ diff --git a/example/macos/Podfile.lock b/example/macos/Podfile.lock index 4556329c..5773bbb3 100644 --- a/example/macos/Podfile.lock +++ b/example/macos/Podfile.lock @@ -34,4 +34,4 @@ SPEC CHECKSUMS: PODFILE CHECKSUM: 353c8bcc5d5b0994e508d035b5431cfe18c1dea7 -COCOAPODS: 1.13.0 +COCOAPODS: 1.15.1 diff --git a/example/macos/Runner.xcodeproj/project.pbxproj b/example/macos/Runner.xcodeproj/project.pbxproj index 253d9342..ee0056c3 100644 --- a/example/macos/Runner.xcodeproj/project.pbxproj +++ b/example/macos/Runner.xcodeproj/project.pbxproj @@ -202,7 +202,7 @@ isa = PBXProject; attributes = { LastSwiftUpdateCheck = 0920; - LastUpgradeCheck = 1430; + LastUpgradeCheck = 1510; ORGANIZATIONNAME = ""; TargetAttributes = { 33CC10EC2044A3C60003C045 = { diff --git a/example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme b/example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme index 83d88728..5b055a3a 100644 --- a/example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme +++ b/example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme @@ -1,6 +1,6 @@ icons = - (context.knobs.boolean(label: 'Rounded', initialValue: true)) ? iconsRounded : iconsSharp; + ((context.knobs.boolean(label: 'Rounded', initialValue: true)) ? iconsRounded : iconsSharp); + + final Map sortedIcons = Map.fromEntries(icons.entries.toList() + ..sort((a, b) { + final _a = (a.key.split('_')..removeLast()).join(); + final _b = (b.key.split('_')..removeLast()).join(); + return _a.compareTo(_b); + })); return WidgetbookTestWidget( removeBody: true, widget: SingleChildScrollView( + key: PageStorageKey(0), child: Center( child: Column( children: [ @@ -27,9 +35,9 @@ WidgetbookComponent iconWidgetbook() { Wrap( spacing: ZetaSpacing.l, runSpacing: ZetaSpacing.l, - children: icons.entries.map( + children: sortedIcons.entries.map( (e) { - final nameArr = e.key.split('_')..removeLast(); + final nameArr = (e.key.split('_')..removeLast()).join(' ').capitalize(); return Container( width: 100, height: 100, @@ -41,10 +49,7 @@ WidgetbookComponent iconWidgetbook() { }, child: Column( mainAxisAlignment: MainAxisAlignment.center, - children: [ - Icon(e.value, size: 40), - Text(nameArr.join(' '), textAlign: TextAlign.center) - ], + children: [Icon(e.value, size: 40), Text(nameArr, textAlign: TextAlign.center)], ), ), ); diff --git a/example/widgetbook/pages/components/accordion_widgetbook.dart b/example/widgetbook/pages/components/accordion_widgetbook.dart index d7297153..88533e22 100644 --- a/example/widgetbook/pages/components/accordion_widgetbook.dart +++ b/example/widgetbook/pages/components/accordion_widgetbook.dart @@ -28,7 +28,6 @@ WidgetbookComponent accordionWidgetBook() { ), title: context.knobs.string(label: 'Accordion Title', initialValue: 'Title'), contained: context.knobs.boolean(label: 'Contained', initialValue: false), - isOpen: context.knobs.boolean(label: 'Open', initialValue: false), rounded: context.knobs.boolean(label: 'Rounded', initialValue: false), ), ), diff --git a/example/widgetbook/pages/components/avatar_widgetbook.dart b/example/widgetbook/pages/components/avatar_widgetbook.dart index 0a91e51c..87e41049 100644 --- a/example/widgetbook/pages/components/avatar_widgetbook.dart +++ b/example/widgetbook/pages/components/avatar_widgetbook.dart @@ -12,7 +12,7 @@ WidgetbookComponent avatarWidgetBook() { WidgetbookUseCase( name: 'Image Avatar', builder: (context) { - final Widget image = Image.network('https://i.ytimg.com/vi/KItsWUzFUOs/maxresdefault.jpg', fit: BoxFit.cover); + final Widget image = Image.asset('assets/Omer.jpg', fit: BoxFit.cover); return WidgetbookTestWidget( widget: Column( @@ -21,7 +21,11 @@ WidgetbookComponent avatarWidgetBook() { padding: const EdgeInsets.all(20), child: ZetaAvatar.image( image: context.knobs.boolean(label: 'Image') ? image : null, - size: context.knobs.list(label: 'Size', options: ZetaAvatarSize.values), + size: context.knobs.list( + label: 'Size', + options: ZetaAvatarSize.values, + labelBuilder: (value) => value.name.split('.').last.toUpperCase(), + ), lowerBadge: context.knobs.boolean(label: 'Status Badge', initialValue: false) ? ZetaIndicator.icon() : null, borderColor: context.knobs.colorOrNull(label: 'Outline', initialValue: null), @@ -46,7 +50,11 @@ WidgetbookComponent avatarWidgetBook() { child: ZetaAvatar.initials( backgroundColor: context.knobs.colorOrNull(label: 'Background color', initialValue: null), initials: context.knobs.stringOrNull(label: 'Initials', initialValue: 'AB'), - size: context.knobs.list(label: 'Size', options: ZetaAvatarSize.values), + size: context.knobs.list( + label: 'Size', + options: ZetaAvatarSize.values, + labelBuilder: (value) => value.name.split('.').last.toUpperCase(), + ), lowerBadge: context.knobs.boolean(label: 'Status badge', initialValue: false) ? ZetaIndicator.notification() : null, diff --git a/example/widgetbook/pages/components/badges_widgetbook.dart b/example/widgetbook/pages/components/badges_widgetbook.dart index 6cdafb88..a9026b1f 100644 --- a/example/widgetbook/pages/components/badges_widgetbook.dart +++ b/example/widgetbook/pages/components/badges_widgetbook.dart @@ -20,7 +20,11 @@ WidgetbookComponent badgeWidgetBook() { child: ZetaStatusLabel( label: context.knobs.string(label: 'Label', initialValue: 'Label'), rounded: context.knobs.boolean(label: 'Rounded'), - status: context.knobs.list(label: 'Status', options: ZetaWidgetStatus.values), + status: context.knobs.list( + label: 'Status', + labelBuilder: (value) => value.name.split('.').last.capitalize(), + options: ZetaWidgetStatus.values, + ), customIcon: context.knobs.list( label: 'Icon', options: [ @@ -72,7 +76,11 @@ WidgetbookComponent badgeWidgetBook() { child: ZetaBadge( label: context.knobs.string(label: 'Label', initialValue: 'Label'), rounded: context.knobs.boolean(label: 'Rounded'), - status: context.knobs.list(label: 'Status', options: ZetaWidgetStatus.values), + status: context.knobs.list( + label: 'Status', + options: ZetaWidgetStatus.values, + labelBuilder: (value) => value.name.split('.').last.capitalize(), + ), ), ), ], @@ -88,7 +96,11 @@ WidgetbookComponent badgeWidgetBook() { Padding( padding: EdgeInsets.all(20), child: ZetaIndicator( - type: context.knobs.list(label: 'Type', options: ZetaIndicatorType.values), + type: context.knobs.list( + label: 'Type', + options: ZetaIndicatorType.values, + labelBuilder: (value) => value.name.split('.').last.capitalize(), + ), icon: context.knobs.list( label: 'Icon', options: [ @@ -106,7 +118,11 @@ WidgetbookComponent badgeWidgetBook() { }, ), inverse: context.knobs.boolean(label: 'Inverse Border'), - size: context.knobs.list(label: 'Size', options: ZetaWidgetSize.values), + size: context.knobs.list( + label: 'Size', + labelBuilder: (value) => value.name.split('.').last.capitalize(), + options: ZetaWidgetSize.values, + ), value: context.knobs.int.slider(label: 'Value'), ), ), @@ -125,7 +141,11 @@ WidgetbookComponent badgeWidgetBook() { child: ZetaTag( label: context.knobs.string(label: 'Label', initialValue: 'Tag'), rounded: context.knobs.boolean(label: 'Rounded'), - direction: context.knobs.list(label: 'Direction', options: ZetaTagDirection.values), + direction: context.knobs.list( + label: 'Direction', + options: ZetaTagDirection.values, + labelBuilder: (value) => value.name.split('.').last.capitalize(), + ), ), ) ], @@ -146,8 +166,16 @@ WidgetbookComponent badgeWidgetBook() { child: ZetaWorkcloudIndicator( index: context.knobs.string(label: 'Index', initialValue: '1'), label: context.knobs.string(label: 'Label', initialValue: 'Label'), - prioritySize: context.knobs.list(label: 'Size', options: ZetaWidgetSize.values), - priorityType: context.knobs.list(label: 'Type', options: ZetaWorkcloudIndicatorType.values), + prioritySize: context.knobs.list( + label: 'Size', + labelBuilder: (value) => value.name.split('.').last.capitalize(), + options: ZetaWidgetSize.values, + ), + priorityType: context.knobs.list( + label: 'Type', + labelBuilder: (value) => value.name.split('.').last.capitalize(), + options: ZetaWorkcloudIndicatorType.values, + ), icon: context.knobs.listOrNull( label: 'Icon', options: [ diff --git a/example/widgetbook/pages/components/banner_widgetbook.dart b/example/widgetbook/pages/components/banner_widgetbook.dart index de5b538c..5f7a98c1 100644 --- a/example/widgetbook/pages/components/banner_widgetbook.dart +++ b/example/widgetbook/pages/components/banner_widgetbook.dart @@ -19,7 +19,11 @@ WidgetbookComponent bannerWidgetBook() { ZetaSystemBanner( context: context, title: context.knobs.string(label: 'Title', initialValue: 'Banner Title'), - type: context.knobs.list(label: 'Type', options: ZetaSystemBannerStatus.values), + type: context.knobs.list( + label: 'Type', + options: ZetaSystemBannerStatus.values, + labelBuilder: (value) => value.name.split('.').last.capitalize(), + ), leadingIcon: context.knobs.list( label: 'Icon', options: [ @@ -61,7 +65,11 @@ WidgetbookComponent bannerWidgetBook() { 'Lorem ipsum dolor sit amet, conse ctetur cididunt ut labore et do lore magna aliqua.', ), ), - status: context.knobs.list(label: 'Severity', options: ZetaWidgetStatus.values), + status: context.knobs.list( + label: 'Severity', + options: ZetaWidgetStatus.values, + labelBuilder: (value) => value.name.split('.').last.capitalize(), + ), onClose: context.knobs.boolean(label: 'Show Close icon') ? () {} : null, title: context.knobs.string(label: 'Title', initialValue: 'Title'), rounded: context.knobs.boolean(label: 'Rounded'), diff --git a/example/widgetbook/pages/components/button_widgetbook.dart b/example/widgetbook/pages/components/button_widgetbook.dart index 74161006..22618d7c 100644 --- a/example/widgetbook/pages/components/button_widgetbook.dart +++ b/example/widgetbook/pages/components/button_widgetbook.dart @@ -23,8 +23,62 @@ WidgetbookComponent buttonWidgetBook() { onPressed: context.knobs.boolean(label: 'Disabled') ? null : () {}, borderType: context.knobs.boolean(label: 'Rounded') ? ZetaWidgetBorder.rounded : ZetaWidgetBorder.sharp, - size: context.knobs.list(label: 'Size', options: ZetaWidgetSize.values), - type: context.knobs.list(label: 'Type', options: ZetaButtonType.values), + size: context.knobs.list( + label: 'Size', + options: ZetaWidgetSize.values, + labelBuilder: (value) => value.name.split('.').last.capitalize(), + ), + type: context.knobs.list( + label: 'Type', + options: ZetaButtonType.values, + labelBuilder: (value) => value.name.split('.').last.capitalize(), + ), + ), + ), + ], + ), + ); + }, + ), + WidgetbookUseCase( + name: 'Icon Button', + builder: (context) { + return WidgetbookTestWidget( + widget: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Padding( + padding: EdgeInsets.all(20), + child: ZetaIconButton( + icon: context.knobs.list( + label: 'Icon', + options: [ + ZetaIcons.star_half_round, + ZetaIcons.add_alert_round, + ZetaIcons.add_box_round, + ZetaIcons.barcode_round, + ], + labelBuilder: (value) { + if (value == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round'; + if (value == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round'; + if (value == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round'; + if (value == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round'; + return ''; + }, + ), + onPressed: context.knobs.boolean(label: 'Disabled') ? null : () {}, + borderType: + context.knobs.boolean(label: 'Rounded') ? ZetaWidgetBorder.rounded : ZetaWidgetBorder.sharp, + size: context.knobs.list( + label: 'Size', + labelBuilder: (value) => value.name.split('.').last.capitalize(), + options: ZetaWidgetSize.values, + ), + type: context.knobs.list( + label: 'Type', + options: ZetaButtonType.values, + labelBuilder: (value) => value.name.split('.').last.capitalize(), + ), ), ), ], @@ -37,7 +91,7 @@ WidgetbookComponent buttonWidgetBook() { builder: (context) => WidgetbookTestWidget( widget: Padding(padding: EdgeInsets.all(20), child: FabWidget(context)), ), - ) + ), ], ); } @@ -97,9 +151,21 @@ class _FabWidgetState extends State { return ''; }, ), - shape: widget.c.knobs.list(label: 'Shape', options: ZetaWidgetBorder.values), - size: widget.c.knobs.list(label: 'Shape', options: ZetaFabSize.values), - type: widget.c.knobs.list(label: 'Shape', options: ZetaFabType.values), + shape: widget.c.knobs.list( + label: 'Shape', + options: ZetaWidgetBorder.values, + labelBuilder: (value) => value.name.split('.').last.capitalize(), + ), + size: widget.c.knobs.list( + label: 'Shape', + options: ZetaFabSize.values, + labelBuilder: (value) => value.name.split('.').last.capitalize(), + ), + type: widget.c.knobs.list( + label: 'Shape', + options: ZetaFabType.values, + labelBuilder: (value) => value.name.split('.').last.capitalize(), + ), ), ), ); diff --git a/example/widgetbook/pages/components/password_input_widgetbook.dart b/example/widgetbook/pages/components/password_input_widgetbook.dart index eca168ef..7428bd19 100644 --- a/example/widgetbook/pages/components/password_input_widgetbook.dart +++ b/example/widgetbook/pages/components/password_input_widgetbook.dart @@ -47,7 +47,11 @@ class _PasswordState extends State<_Password> { rounded: context.knobs.boolean(label: 'Rounded'), enabled: context.knobs.boolean(label: 'Enabled', initialValue: true), obscureText: context.knobs.boolean(label: 'Obscure text', initialValue: true), - size: context.knobs.list(label: 'Size', options: ZetaWidgetSize.values), + size: context.knobs.list( + label: 'Size', + options: ZetaWidgetSize.values, + labelBuilder: (value) => value.name.split('.').last.capitalize(), + ), footerIcon: context.knobs.listOrNull( label: 'Icon', options: [ diff --git a/example/widgetbook/pages/theme/radius_widgetbook.dart b/example/widgetbook/pages/theme/radius_widgetbook.dart index ccb63a73..6e533ca7 100644 --- a/example/widgetbook/pages/theme/radius_widgetbook.dart +++ b/example/widgetbook/pages/theme/radius_widgetbook.dart @@ -9,67 +9,62 @@ WidgetbookComponent radiusWidgetbook() { useCases: [ WidgetbookUseCase( name: 'Radius', - builder: (context) => SingleChildScrollView( - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Column( - children: radii.entries - .map((obj) => _RadiiDemo(obj)) - .divide(const SizedBox.square(dimension: ZetaSpacing.l)) - .toList(), - ).paddingTop(ZetaSpacing.l), - ], - ), - ), + builder: (context) { + final rad = context.knobs.list( + label: 'Radius', + options: radii, + labelBuilder: (value) => value.radiusString, + ); + final colors = Zeta.of(context).colors; + return SingleChildScrollView( + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Container( + width: 250, + height: 250, + decoration: BoxDecoration( + borderRadius: rad, + color: Zeta.of(context).colors.blue.shade30, + border: Border.all(color: colors.blue.shade80, width: 3), + ), + child: Center( + child: Container( + decoration: BoxDecoration( + borderRadius: rad, + color: Zeta.of(context).colors.surfacePrimary, + border: Border.all(color: colors.blue.shade50, width: 3), + ), + padding: EdgeInsets.all(ZetaSpacing.b), + child: Text( + rad.radiusString.split('.').last.capitalize(), + style: ZetaTextStyles.titleMedium.apply( + color: Zeta.of(context).colors.textDefault, + fontStyle: FontStyle.normal, + decoration: TextDecoration.none, + ), + ), + ), + ), + ), + ], + ), + ); + }, ), ], ); } -Map radii = { - 'none': ZetaRadius.none, - 'minimal': ZetaRadius.minimal, - 'rounded': ZetaRadius.rounded, - 'wide': ZetaRadius.wide, - 'full': ZetaRadius.full, -}; - -class _RadiiDemo extends StatelessWidget { - final MapEntry obj; - const _RadiiDemo(this.obj); - - @override - Widget build(BuildContext context) { - final colors = Zeta.of(context).colors; - - return Container( - width: 250, - height: 250, - decoration: BoxDecoration( - borderRadius: obj.value, - color: Zeta.of(context).colors.blue.shade30, - border: Border.all(color: colors.blue.shade80, width: 3), - ), - child: Center( - child: Container( - decoration: BoxDecoration( - borderRadius: obj.value, - color: Zeta.of(context).colors.surfacePrimary, - border: Border.all(color: colors.blue.shade50, width: 3), - ), - padding: EdgeInsets.all(ZetaSpacing.b), - child: Text( - 'ZetaRadius.' + obj.key, - style: ZetaTextStyles.titleMedium.apply( - color: Zeta.of(context).colors.textDefault, - fontStyle: FontStyle.normal, - decoration: TextDecoration.none, - ), - ), - ), - ), - ); +extension on BorderRadius { + String get radiusString { + if (topLeft.x == 0) return 'ZetaRadius.none'; + if (topLeft.x == 4) return 'ZetaRadius.minimal'; + if (topLeft.x == 8) return 'ZetaRadius.rounded'; + if (topLeft.x == 24) return 'ZetaRadius.wide'; + return 'ZetaRadius.full'; } } + +List radii = [ZetaRadius.none, ZetaRadius.minimal, ZetaRadius.rounded, ZetaRadius.wide, ZetaRadius.full]; diff --git a/example/widgetbook/widgetbook.dart b/example/widgetbook/widgetbook.dart index 8d467c86..ff8168f4 100644 --- a/example/widgetbook/widgetbook.dart +++ b/example/widgetbook/widgetbook.dart @@ -82,7 +82,6 @@ class HotReload extends StatelessWidget { final dark = theme.colorsDark.toScheme(); final light = theme.colorsLight.toScheme(); - print(child); return MaterialApp( debugShowCheckedModeBanner: false, themeMode: themeMode, diff --git a/lib/src/components/badges/tag.dart b/lib/src/components/badges/tag.dart index 877141ab..70b73f1b 100644 --- a/lib/src/components/badges/tag.dart +++ b/lib/src/components/badges/tag.dart @@ -33,7 +33,7 @@ class ZetaTag extends StatelessWidget { /// Defaults to left final ZetaTagDirection direction; - /// {@zeta-component-rounded} + /// {@macro zeta-component-rounded} final bool rounded; ///tag label diff --git a/lib/src/components/buttons/button_style.dart b/lib/src/components/buttons/button_style.dart index 49d0341b..8a3ed9fb 100644 --- a/lib/src/components/buttons/button_style.dart +++ b/lib/src/components/buttons/button_style.dart @@ -55,8 +55,7 @@ extension ButtonFunctions on ZetaButtonType { } /// Returns if button has border - bool get border => - this == ZetaButtonType.outline || this == ZetaButtonType.outlineSubtle; + bool get border => this == ZetaButtonType.outline || this == ZetaButtonType.outlineSubtle; ///Returns if button is solid bool get solid => index < 4; @@ -80,11 +79,14 @@ extension BorderFunctions on ZetaWidgetBorder { } /// Shared buttonStyle for buttons and icon buttons -ButtonStyle buttonStyle(ZetaColors colors, ZetaWidgetBorder borderType, - ZetaButtonType type, Color? backgroundColor) { - final ZetaColorSwatch color = backgroundColor != null - ? ZetaColorSwatch.fromColor(backgroundColor) - : type.color(colors); +ButtonStyle buttonStyle( + ZetaColors colors, + ZetaWidgetBorder borderType, + ZetaButtonType type, + Color? backgroundColor, +) { + final ZetaColorSwatch color = + backgroundColor != null ? ZetaColorSwatch.fromColor(backgroundColor) : type.color(colors); final bool isSolid = type.solid || backgroundColor != null; @@ -127,8 +129,7 @@ ButtonStyle buttonStyle(ZetaColors colors, ZetaWidgetBorder borderType, } }, ), - overlayColor: - MaterialStateProperty.resolveWith((Set states) { + overlayColor: MaterialStateProperty.resolveWith((Set states) { return null; }), side: MaterialStateProperty.resolveWith((Set states) { @@ -141,9 +142,7 @@ ButtonStyle buttonStyle(ZetaColors colors, ZetaWidgetBorder borderType, } if (type.border) { return BorderSide( - color: type == ZetaButtonType.outline - ? colors.primary.border - : colors.borderDefault, + color: type == ZetaButtonType.outline ? colors.primary.border : colors.borderDefault, ); } diff --git a/lib/src/components/buttons/icon_button.dart b/lib/src/components/buttons/icon_button.dart index b19ed7a4..9825349d 100644 --- a/lib/src/components/buttons/icon_button.dart +++ b/lib/src/components/buttons/icon_button.dart @@ -78,17 +78,17 @@ class ZetaIconButton extends StatelessWidget { super.key, }) : type = ZetaButtonType.text; - ///Button label + /// Button icon. final IconData icon; - ///Called when the button is tapped or otherwise activated. + /// Called when the button is tapped or otherwise activated. final VoidCallback? onPressed; - ///The coloring type of the button + /// The coloring type of the button final ZetaButtonType type; - ///Whether or not the button is sharp or rounded - ///Defaults to rounded + /// Whether or not the button is sharp or rounded + /// Defaults to rounded final ZetaWidgetBorder borderType; /// Size of the button. Defaults to large. diff --git a/lib/src/utils/extensions.dart b/lib/src/utils/extensions.dart index a7347b6f..77dc6bcc 100644 --- a/lib/src/utils/extensions.dart +++ b/lib/src/utils/extensions.dart @@ -94,4 +94,10 @@ extension StringExtensions on String? { : nameParts[0]) .toUpperCase(); } + + /// Capitalizes fist letter of string. + String capitalize() { + if (this == null) return ''; + return '${this![0].toUpperCase()}${this!.substring(1).toLowerCase()}'; + } }