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

feat: add AdaptivePrimaryButton components #14

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

feat: add AdaptivePrimaryButton components #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0f9a5c2
feat: add `AdaptivePrimaryButton` components
PouriaMoradi021 Jan 15, 2025
af49c74
update: fixing `FilledButton` in `buttonStyle` & `ButtonContent`
PouriaMoradi021 Jan 16, 2025
f6f819f
feat: add/create `AdaptiveSecondaryButton` components
PouriaMoradi021 Jan 16, 2025
4f548f4
test: add test for button components
PouriaMoradi021 Jan 16, 2025
05368fa
docs: add documents according to mark down standards
PouriaMoradi021 Jan 17, 2025
2de268f
style: reformat code with dart reformat command
PouriaMoradi021 Jan 17, 2025
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
79 changes: 27 additions & 52 deletions lib/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import 'package:fluent_ui/fluent_ui.dart';
import 'package:flutter/material.dart';
import 'package:pactus_gui_widgetbook/app_scaffold.dart';
import 'package:pactus_gui_widgetbook/src/core/theme/app_theme.dart';
import 'package:pactus_gui_widgetbook/src/core/theme/app_theme_data.dart';
import 'package:widgetbook/widgetbook.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
import 'package:flutter/widgets.dart';
import 'package:pactus_gui_widgetbook/src/core/utils/gen/localization/app_locales.dart';
import 'package:pactus_gui_widgetbook/src/core/utils/gen/localization/customized_localization_addon.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
Expand All @@ -16,48 +14,6 @@ void main() {
runApp(const WidgetBookApp());
}

/// ## [WidgetBookApp] Class Documentation
///
/// The `WidgetBookApp` class is the main entry point for
/// the Widgetbook application.
/// It defines the Widgetbook configuration, including the devices,
/// themes, and addons used for visualizing and testing widgets.
///
/// ### Usage:
///
/// The `WidgetBookApp` sets up a Widgetbook environment with
/// predefined themes, devices, and alignment options.
/// It enables developers to test their widgets in different
/// contexts and layouts.
///
/// ### Addons:
///
/// - **[DeviceFrameAddon]**:
/// - Includes a list of devices for testing widgets.
/// - **Devices**:
/// - `Devices.ios.iPhone13`: Simulates an iPhone 13 device.
/// - `Devices.windows.laptop`: Simulates a standard laptop.
/// - `Devices.windows.wideMonitor`: Simulates a widescreen monitor.
///
/// - **[AlignmentAddon]**:
/// - Allows testing widget alignment within the parent container.
///
/// - **[ThemeAddon]**:
/// - Provides two themes for testing:
/// - **Light Theme**: Uses `AppThemeData.lightTheme()` for a
/// bright interface.
/// - **Dark Theme**: Uses `AppThemeData.darkTheme()` for a
/// darker interface.
/// - Includes a custom theme builder that wraps widgets with
/// `AppTheme` and `AppScaffold`.
///
/// ### Properties:
///
/// - **[directories]**:
/// - Dynamically generated list of widget directories.
/// - Facilitates organizing and testing widgets within Widgetbook.
///

@widgetbook.App()
class WidgetBookApp extends StatelessWidget {
const WidgetBookApp({super.key});
Expand Down Expand Up @@ -91,23 +47,42 @@ class WidgetBookApp extends StatelessWidget {
themes: [
WidgetbookTheme(
name: 'Light',
data: AppThemeData.lightTheme(),
data: AppThemeData.lightTheme(AppThemeData.lightAccentColors[0]),
),
WidgetbookTheme(
name: 'Dark',
data: AppThemeData.darkTheme(),
)
data: AppThemeData.darkTheme(AppThemeData.darkAccentColors[0]),
),
],
themeBuilder: (context, data, child) {
return AppTheme(
themeData: data,
child: AppScaffold(child: child),
final isLightTheme = data.brightness == Brightness.light;

final selectedAccentColor = context.knobs.list<Color>(
label: 'Accent Color',
description: 'Select an accent color for the theme.',
options: isLightTheme
? AppThemeData.lightAccentColors
: AppThemeData.darkAccentColors,
initialOption: isLightTheme
? AppThemeData.lightAccentColors[0]
: AppThemeData.darkAccentColors[0],
);

final themeWithAccent = isLightTheme
? AppThemeData.lightTheme(selectedAccentColor)
: AppThemeData.darkTheme(selectedAccentColor);

return FluentApp(
debugShowCheckedModeBanner: false,
theme: themeWithAccent,
home: AppTheme(
themeData: themeWithAccent,
child: AppScaffold(child: child),
),
);
},
),
],
// The [directories] variable does not exist yet,
// it will be generated in the next step
directories: directories,
);
}
Expand Down
61 changes: 54 additions & 7 deletions lib/main.directories.g.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,16 @@
// **************************************************************************

// ignore_for_file: no_leading_underscores_for_library_prefixes
import 'package:pactus_gui_widgetbook/src/features/widgets/counter/counter_usecase.dart'
import 'package:pactus_gui_widgetbook/src/features/widgets/buttons/adaptive_primary_button/adaptive_primary_button_usecase.dart'
as _i2;
import 'package:pactus_gui_widgetbook/src/features/widgets/custom_button/custom_button_usecase.dart'
import 'package:pactus_gui_widgetbook/src/features/widgets/buttons/adaptive_secondary_button/adaptive_secondary_button_usecase.dart'
as _i3;
import 'package:pactus_gui_widgetbook/src/features/widgets/counter/counter_usecase.dart'
as _i4;
import 'package:pactus_gui_widgetbook/src/features/widgets/custom_button/custom_button_usecase.dart'
as _i5;
import 'package:pactus_gui_widgetbook/src/features/widgets/custom_text/custom_text_usecase.dart'
as _i6;
import 'package:widgetbook/widgetbook.dart' as _i1;

final directories = <_i1.WidgetbookNode>[
Expand All @@ -22,26 +28,67 @@ final directories = <_i1.WidgetbookNode>[
_i1.WidgetbookFolder(
name: 'widgets',
children: [
_i1.WidgetbookFolder(
name: 'buttons',
children: [
_i1.WidgetbookFolder(
name: 'adaptive_primary_button',
children: [
_i1.WidgetbookLeafComponent(
name: 'AdaptivePrimaryButton',
useCase: _i1.WidgetbookUseCase(
name: 'Adaptive Primary Button with Knobs',
builder: _i2.adaptivePrimaryButtonUseCase,
),
)
],
),
_i1.WidgetbookFolder(
name: 'adaptive_secondary_button',
children: [
_i1.WidgetbookLeafComponent(
name: 'AdaptiveSecondaryButton',
useCase: _i1.WidgetbookUseCase(
name: 'Adaptive Secondary Button with Knobs',
builder: _i3.adaptiveSecondaryButtonUseCase,
),
)
],
),
],
),
_i1.WidgetbookFolder(
name: 'counter',
children: [
_i1.WidgetbookLeafComponent(
name: 'CounterWidget',
useCase: _i1.WidgetbookUseCase(
name: 'Counter with Knobs',
builder: _i4.counterWidgetUseCase,
),
)
],
),
_i1.WidgetbookFolder(
name: 'custom_button',
children: [
_i1.WidgetbookLeafComponent(
name: 'CustomButtonWidget',
useCase: _i1.WidgetbookUseCase(
name: 'Custom Button with Knobs',
builder: _i3.customButtonWidgetUseCase,
builder: _i5.customButtonWidgetUseCase,
),
)
],
),
_i1.WidgetbookFolder(
name: 'counter',
name: 'custom_text',
children: [
_i1.WidgetbookLeafComponent(
name: 'CounterWidget',
name: 'CustomTextWidget',
useCase: _i1.WidgetbookUseCase(
name: 'Counter with Knobs',
builder: _i2.counterWidgetUseCase,
name: 'Select the text to display from the dropdown',
builder: _i6.customTextWidgetUseCase,
),
)
],
Expand Down
29 changes: 29 additions & 0 deletions lib/src/core/enum/request_state_enum.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
/// ## [RequestStateEnum] Enum Documentation
///
/// The `RequestStateEnum` represents the various states a request can be in
/// during its lifecycle.
///
/// ### States:
///
/// - **[initial]**:
/// - Indicates the initial state of the request before any operation
/// has started.
///
/// - **[loading]**:
/// - Represents the state where the request is in progress and loading.
///
/// - **[loaded]**:
/// - Indicates that the request has been completed successfully,
/// and the data is available.
///
/// - **[error]**:
/// - Represents a state where the request has failed due to an error.
///
library;

enum RequestStateEnum {
initial,
loading,
loaded,
error,
}
6 changes: 6 additions & 0 deletions lib/src/core/pallets/colors/app_colors.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import 'package:fluent_ui/fluent_ui.dart';

class AppColors {
AppColors._();
static const borderColor = Color(0xFFC7C7C7);
}
77 changes: 50 additions & 27 deletions lib/src/core/theme/app_theme_data.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,44 +5,41 @@ import 'package:pactus_gui_widgetbook/src/core/text_styles/inter_text_styles.dar

/// ## [AppThemeData] Class Documentation
///
/// The `AppThemeData` class provides a centralized definition of
/// the application's themes and typography.
/// It is designed to support both light and dark modes and uses
/// `FluentThemeData` for configuration.
/// The `AppThemeData` class defines the theme settings for the application,
/// including light and dark themes, color palettes, and typography.
///
/// ### Usage:
///
/// This class offers methods and properties to retrieve predefined
/// themes and typography for the application.
/// It also supports custom theme extensions through the use of
/// `ThemeExtension`.
/// This class provides methods to create `FluentThemeData` instances
/// for light and dark themes, which can be customized with a
/// selected accent color. It integrates Fluent UI theming capabilities
/// with application-specific extensions and styles.
///
/// ### Properties:
///
/// - **[lightExtensions]**:
/// - A collection of `ThemeExtension` objects for the light theme.
/// - Includes `SurfacePallet.light` and `OnSurfacePallet.light`.
/// - A collection of `ThemeExtension` objects used for the light theme.
/// - Includes surface and on-surface palettes
/// (`SurfacePallet.light` and `OnSurfacePallet.light`).
///
/// - **[darkExtensions]**:
/// - A collection of `ThemeExtension` objects for the dark theme.
/// - Includes `SurfacePallet.dark` and `OnSurfacePallet.dark`.
/// - A collection of `ThemeExtension` objects used for the dark theme.
/// - Includes surface and on-surface palettes
/// (`SurfacePallet.dark` and `OnSurfacePallet.dark`).
///
/// - **[typography]**:
/// - An instance of `Typography` defining text styles for various use cases.
/// - Includes properties like `subtitle`, `title`, `bodyStrong`,
/// `caption`, `body`, and more.
/// - Uses `InterTextStyles` for text style definitions.
///
/// ### Methods:
/// - **[lightAccentColors]**:
/// - A predefined list of accent colors for the light theme.
/// - Includes colors like `Color(0xFF0A4D7E)` and `Color(0xFFD4540A)`.
///
/// - **[lightTheme()]**:
/// - Returns a `FluentThemeData` instance configured for light mode.
/// - Includes light extensions and typography.
/// - **[darkAccentColors]**:
/// - A predefined list of accent colors for the dark theme.
/// - Includes colors like `Color(0xFF0F6CBD)` and `Color(0xFFF7630C)`.
///
/// - **[darkTheme()]**:
/// - Returns a `FluentThemeData` instance configured for dark mode.
/// - Includes dark extensions and typography.
/// - **[typography]**:
/// - A `Typography` object defining text styles used across the app.
/// - Includes styles for subtitles, titles, captions, and body text.
///

class AppThemeData {
AppThemeData._();
static const Iterable<ThemeExtension<dynamic>> lightExtensions = [
Expand All @@ -55,16 +52,42 @@ class AppThemeData {
OnSurfacePallet.dark,
];

static FluentThemeData lightTheme() => FluentThemeData(
static const List<Color> lightAccentColors = [
Color(0xFF0A4D7E),
Color(0xFFD4540A),
Color(0xFFA7101A),
Color(0xFF7F0080),
Color(0xFF5C3E83),
Color(0xFF008D7A),
Color(0xFF0C5C0C),
Color(0xFF0F0E32),
];

static const List<Color> darkAccentColors = [
Color(0xFF0F6CBD),
Color(0xFFF7630C),
Color(0xFFE81123),
Color(0xFFB4009E),
Color(0xFF744DA9),
Color(0xFF00B294),
Color(0xFF107C10),
Color(0xFF131440),
];
Copy link
Contributor

@phoenixit99 phoenixit99 Jan 23, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider creating named constants for each color to make their purpose clearer
for example:

'primary': Color(0xFF0A4D7E),    // First blue
'warning': Color(0xFFD4540A),    // Orange
'error': Color(0xFFA7101A),      // Red


static FluentThemeData lightTheme(Color selectedAccentColor) =>
FluentThemeData(
brightness: Brightness.light,
typography: typography,
extensions: lightExtensions,
accentColor: selectedAccentColor.toAccentColor(),
);

static FluentThemeData darkTheme() => FluentThemeData(
static FluentThemeData darkTheme(Color selectedAccentColor) =>
FluentThemeData(
brightness: Brightness.dark,
typography: typography,
extensions: darkExtensions,
accentColor: selectedAccentColor.toAccentColor(),
);

static Typography typography = const Typography.raw(
Expand Down
Loading
Loading