checkboxStory top-level property

Implementation

Story checkboxStory = Story(
  name: 'Checkbox',
  builder: (context) {
    final labelText =
        context.knobs.text(label: 'Label Text', initial: 'Select this option');

    final labelTextLeft = context.knobs
        .boolean(label: 'Label Text Position - Left', initial: false);

    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: ThemeColors.primary,
    );

    final isDisabled = context.knobs.boolean(label: 'Disabled', initial: false);

    final variant = context.knobs.options(
      label: 'Variant',
      options: [
        Option(label: 'Default', value: CheckboxVariant.defaultVariant),
        Option(label: 'Custom Icon', value: CheckboxVariant.customIcon),
      ],
      initial: CheckboxVariant.defaultVariant,
    );

    final shape = context.knobs.options(
      label: '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 size = context.knobs.options(
      label: 'Size',
      options: [
        Option(label: 'Small', value: CheckboxSize.small),
        Option(label: 'Medium', value: CheckboxSize.medium),
        Option(label: 'Large', value: CheckboxSize.large),
      ],
      initial: CheckboxSize.medium,
    );

    final icon = context.knobs.options(
      label: 'Icon',
      options: [
        Option(label: 'Check', value: Icons.check),
        Option(label: 'Done', value: Icons.done),
        Option(label: 'Check Circle', value: Icons.check_circle),
      ],
      initial: Icons.check,
    );

    final initialValue =
        context.knobs.boolean(label: 'Initial Value', initial: false);

    return Center(
      child: DDSCheckbox(
        labelTextLeft: labelTextLeft,
        labelText: labelText,
        checkedColor: checkedColor,
        disabled: isDisabled,
        variant: variant,
        shape: shape,
        spacing: 8,
        icon: Icon(
          icon,
          size: 18,
        ),
        size: size,
        initialValue: initialValue,
        onChanged: (value) {
          print('Checkbox changed: $value');
        },
      ),
    );
  },
);