checkboxGroupStory top-level property

Implementation

Story checkboxGroupStory = Story(
  name: 'Checkbox Group',
  builder: (context) {
    final labelText =
        context.knobs.text(label: 'Label Text', initial: 'Select Options');

    final variant = context.knobs.options(
      label: 'Variant',
      options: [
        Option(label: 'Grouped', value: CheckboxGroupVariant.grouped),
        Option(
            label: 'Indeterminate', value: CheckboxGroupVariant.indeterminate),
      ],
      initial: CheckboxGroupVariant.grouped,
    );

    final direction = context.knobs.options(
      label: 'Direction',
      options: [
        Option(label: 'Vertical', value: DDSCheckboxGroupDirection.vertical),
        Option(
            label: 'Horizontal', value: DDSCheckboxGroupDirection.horizontal),
      ],
      initial: DDSCheckboxGroupDirection.vertical,
    );

    final checkboxSize = context.knobs.options(
      label: 'Checkbox Size',
      options: [
        Option(label: 'Small', value: CheckboxSize.small),
        Option(label: 'Medium', value: CheckboxSize.medium),
        Option(label: 'Large', value: CheckboxSize.large),
      ],
      initial: CheckboxSize.medium,
    );

    final checkboxShape = context.knobs.options(
      label: 'Checkbox Shape',
      options: [
        Option(
          label: 'Rounded Rectangle',
          value: CheckboxShape.roundedRectangle,
        ),
        Option(label: 'Rectangle', value: CheckboxShape.rectangle),
        Option(label: 'Rounded', value: CheckboxShape.rounded),
      ],
      initial: CheckboxShape.roundedRectangle,
    );

    final title = context.knobs.text(label: 'Title', initial: 'Main Options');
    final subTitle = context.knobs
        .text(label: 'SubTitle', initial: 'Choose your preferences');

    final checkedColor = context.knobs.options(
      label: 'Checked Color',
      options: [
        Option(label: 'Primary', value: ThemeColors.primary),
        Option(label: 'Secondary', value: Colors.blue),
        Option(label: 'Accent', value: Colors.green),
      ],
      initial: Colors.blue,
    );

    final hasParent =
        context.knobs.boolean(label: 'Include Parent Checkbox', initial: true);

    final useCustomIcon =
        context.knobs.boolean(label: 'Use Custom Icon', initial: false);

    final borderColor = context.knobs.options(
      label: 'Border Color',
      options: [
        Option(label: 'Grey', value: Colors.grey),
        Option(label: 'Green', value: Colors.green),
        Option(label: 'Blue', value: Colors.blue),
      ],
      initial: Colors.green,
    );

    return ConstrainedBox(
      constraints: const BoxConstraints(
        maxWidth: 600,
        minWidth: 200,
      ),
      child: DDSCheckboxGroup(
        variant: variant,
        labelText: labelText,
        direction: direction,
        size: checkboxSize,
        shape: checkboxShape,
        title: title.isNotEmpty ? title : null,
        subTitle: subTitle.isNotEmpty ? subTitle : null,
        checkedColor: checkedColor,
        spacing: 10,
        border: Border.all(
          color: borderColor,
          width: 1,
        ),
        customCheckIcon: useCustomIcon
            ? Icon(
                Icons.circle_notifications,
                color: Colors.white,
                size: 16,
              )
            : null,
        parent:
            hasParent ? Parent(text: 'Parent Option', disabled: false) : null,
        children: [
          GroupChildren(label: Text('Option 1'), value: false),
          GroupChildren(label: Text('Option 2'), value: true),
          GroupChildren(
            label: Text('Option 3'),
            value: false,
            disabled: true,
          ),
          GroupChildren(label: Text('Option 4'), value: true),
        ],
        onChanged: (value) {
          print('Checkbox group value changed: $value');
        },
      ),
    );
  },
);