feat(common): checkbox (#1)

.storybook/manager.js

@@ -0,0 +1,38 @@
+import { addons } from '@storybook/manager-api';
+import { create } from '@storybook/theming/create';
+
+addons.setConfig({
+  theme: create({
+    base: 'light',
+    // Typography
+    fontBase: `'Barlow',
+    'Open Sans',
+    sans-serif,
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Helvetica,
+    Arial,
+    sans-serif,
+    Apple Color Emoji,
+    Segoe UI Emoji`,
+
+    brandTitle: 'bmates-ui',
+    brandUrl: 'https://github.com/Bandmators/bmates-ui',
+    brandImage: 'https://avatars.githubusercontent.com/u/157222787?s=50',
+
+    colorPrimary: '#212121',
+    colorSecondary: '#585C6D',
+
+    // UI
+    appBg: '#ffffff',
+    appContentBg: '#ffffff',
+    appPreviewBg: '#ffffff',
+    appBorderColor: '#61616142',
+    appBorderRadius: 4,
+
+    // Text colors
+    textColor: '#212121',
+    textInverseColor: '#ffffff',
+  }),
+});

.storybook/preview.ts

@@ -7,6 +7,9 @@ import theme from '../src/styles/theme';
 
 const preview: Preview = {
   parameters: {
+    backgrounds: {
+      default: 'light',
+    },
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {

package.json

@@ -63,9 +63,11 @@
     "@storybook/addon-themes": "^7.6.5",
     "@storybook/blocks": "7.6.5",
     "@storybook/builder-vite": "^7.6.5",
+    "@storybook/manager-api": "^7.6.10",
     "@storybook/react": "7.6.5",
     "@storybook/react-vite": "7.6.5",
     "@storybook/test": "7.6.5",
+    "@storybook/theming": "^7.6.10",
     "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/react": "^14.1.2",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",

src/__tests__/ui.test.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { Route } from 'react-router-dom';
 import { describe, expect, it, vi } from 'vitest';
 
-import { Button, Form, Input, InputDesc, InputGroup, Label, Textarea } from '../';
+import { Button, Checkbox, Form, Input, InputDesc, InputGroup, Label, Textarea } from '../';
 import { MockRouter, fireEvent, render, screen, waitFor } from '../libs/test';
 
 describe('UI test', () => {
@@ -46,8 +46,49 @@ describe('UI test', () => {
     fireEvent.click(submitBtn);
 
     await waitFor(() => {
-      // expect(screen.getByText('End')).toBeInTheDocument();
       expect(handleSubmitFn).toHaveBeenCalledTimes(1);
     });
   });
+
+  it('Checkbox icon must be customizable and work when clicked.', () => {
+    render(
+      <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-start', lineHeight: '1' }}>
+        <Checkbox
+          id="checkbox-test"
+          role="checkbox-test"
+          iconEl={
+            <svg viewBox="0 0 24 24" role="checkbox-icon">
+              <path d="M5 12l5 5l08 -10"></path>
+            </svg>
+          }
+        />
+        <div>
+          <Label htmlFor="checkbox-with-text" style={{ marginLeft: '0px' }}>
+            Accept terms and conditions
+          </Label>
+          <p style={{ margin: '4px 0px', color: 'gray', fontSize: '0.875rem' }}>
+            You agree to our Terms of Service and Privacy Policy.
+          </p>
+        </div>
+      </div>,
+    );
+
+    const checkbox = screen.getByRole('checkbox-test');
+    expect(checkbox).toBeInTheDocument();
+
+    const checkIcon = document.querySelector('svg[role="checkbox-icon"]');
+    expect(checkIcon).toBeInTheDocument();
+
+    const styledEl = checkIcon?.parentElement;
+    expect(styledEl).toBeInTheDocument();
+
+    if (styledEl) {
+      const beforeBgStyle = styledEl.style.background;
+      fireEvent.click(checkbox);
+
+      expect(styledEl).not.toHaveStyle(`background: ${beforeBgStyle}`);
+    } else {
+      console.error('styledEl is null.');
+    }
+  });
 });