Merge pull request #8 from BQXBQX/dev-bqx

Dev bqx

packages/competition/src/App.tsx

@@ -1,33 +1,16 @@
-import { Button, CarouselItem } from "@sast/oj-ui";
+import { Button, CarouselItem, showToast } from "@sast/oj-ui";
 import { Sheet, Carousel } from "@sast/oj-ui";
 import { useState } from "react";
 
 function App() {
   const [visible, setVisible] = useState<boolean>(false);
 
+  const hello = () => {
+    showToast({ content: <>hello</> });
+  };
   return (
     <>
-      <div style={{ width: "100vw", height: "100vh" }}>
-        <Button
-          onClick={() => {
-            setVisible(true);
-          }}
-        >
-          show sheet
-        </Button>
-        <div style={{ height: "200vh" }}></div>
-      </div>
-      <Sheet
-        visible={visible}
-        onCancel={() => setVisible(false)}
-        sheetTitle="Hello World"
-        sheetFooter={
-          <>
-            <Button color="tertiary">取消</Button>
-          </>
-        }
-      ></Sheet>
-      <Carousel number={6} width={500}></Carousel>
+      <Button onClick={hello}>showToast</Button>
     </>
   );
 }

packages/ui/lib/Button/Button.stories.ts

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button, type ButtonProps } from './Button';
+import { showToast } from '..';
 
 const meta = {
   title: 'Components/Button',
@@ -45,3 +46,11 @@ export const DisabledButton: Story = {
     disabled: true,
   },
 };
+
+export const ShowToastButton: Story = {
+  args: {
+    ...defaultProps,
+    children: 'Click Me!',
+    onClick: showToast,
+  },
+};

packages/ui/lib/Checkbox/Checkbox.module.scss

@@ -10,14 +10,14 @@
   .checkboxButton {
     all: unset;
     position: relative;
-    height: 24px;
-    width: 24px;
+    height: 20px;
+    width: 20px;
     display: flex;
     justify-content: center;
     align-items: center;
     box-sizing: border-box;
     border: 2px solid var(--shadow-color);
-    border-radius: 8px;
+    border-radius: 6px;
     cursor: inherit;
     transition: all 0.2s ease-in-out;
     .checkPath {
@@ -41,6 +41,8 @@
     }
     &.checked {
       background-color: var(--primary-color);
+      border: unset;
+      transition: all 0.2s ease-in-out;
     }
     &.checked:hover {
       box-shadow: 0 0px 15px rgba(var(--primary-color-rgb), 0.5);

packages/ui/lib/Checkbox/Checkbox.tsx

@@ -2,33 +2,46 @@ import React, { useEffect, useState } from 'react';
 import styles from './Checkbox.module.scss';
 import classNames from 'classnames';
 export interface CheckboxProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * value of the checkbox
+   */
+  value?: string;
   /**
    *label of the checkbox
    */
-  label?: string;
+  label: string;
   /**
    * diabled of the checkbox
    */
   disabled?: boolean;
+  /**
+   * checked of the checkbox
+   */
+  checked?: boolean;
   /**
    * onchange of the checkbox
    */
-  onChecked?: (value: boolean) => void;
+  onChecked?: (type: 'add' | 'delete', value: string) => void;
 }
 
 export const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
-  ({ label = 'SAST', disabled = false, onChecked = function () {}, ...rest }, ref) => {
+  (
+    { value, checked, label = 'SAST', disabled = false, onChecked = function () {}, ...rest },
+    ref,
+  ) => {
     const checkboxClass = classNames(`${styles['base']} ${styles[disabled ? 'disabled' : '']}`);
     const [isChecked, setIsChecked] = useState<boolean>(false);
 
+    useEffect(() => {
+      checked && setIsChecked(checked);
+    }, [checked]);
     const handleChecked = () => {
-      setIsChecked(!isChecked);
+      const newIsChecked = !isChecked;
+      setIsChecked(newIsChecked);
+      newIsChecked && value && onChecked('add', value || label);
+      !newIsChecked && value && onChecked('delete', value || label);
     };
 
-    useEffect(() => {
-      onChecked(isChecked);
-    }, [isChecked, onChecked]);
-
     return (
       <div
         className={checkboxClass}
@@ -44,8 +57,8 @@ export const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
           {isChecked && (
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              width="19"
-              height="19"
+              width="16"
+              height="16"
               viewBox="0 0 24 24"
             >
               <path

packages/ui/lib/CheckboxGroup/CheckboxGroup.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import React from 'react';
+import { CheckboxGroup, type CheckboxGroupProps } from './CheckboxGroup';
+
+const test = (value: string[]) => {
+  console.log('selectValue', value);
+};
+
+const meta = {
+  title: 'Components/CheckboxGroup',
+  component: CheckboxGroup,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof CheckboxGroup>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const defaultProps: CheckboxGroupProps = {
+  options: [
+    { label: 'nodejs', key: 1, value: 'node' },
+    { label: 'nestjs', key: 2, value: 'nest' },
+    { label: 'nextjs', key: 3, value: 'next' },
+  ],
+  direction: 'column',
+};
+
+export const DefaultCheckboxGroup: Story = {
+  args: {
+    ...defaultProps,
+    onChange: test,
+  },
+};
+
+export const ExampleCheckboxGroup: Story = {
+  args: {
+    ...defaultProps,
+  },
+};

packages/ui/lib/CheckboxGroup/CheckboxGroup.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react';
+import { type CheckboxProps } from '..';
+import { Content } from './Content';
+
+export interface OptionItemProps extends CheckboxProps {
+  value?: string;
+  key?: number;
+}
+
+export interface CheckboxGroupProps {
+  /**
+   * options of the checkboxGroup
+   */
+  options: OptionItemProps[];
+  /**
+   * Onchange of the group
+   */
+  onChange?: (value: string[]) => void;
+  /**
+   * type  "column"|"row"
+   */
+  direction?: 'column' | 'row';
+}
+
+export const CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupProps>(
+  ({ options, onChange, direction, ...rest }, ref) => {
+    const [selectedValue, setSelectedValue] = useState<string[]>([]);
+
+    const changeSelect = (type: 'add' | 'delete', value: string) => {
+      if (type === 'add') {
+        const newSelected = [...selectedValue, value];
+        setSelectedValue(newSelected);
+      }
+      if (type === 'delete') {
+        const newSelected = selectedValue.filter((element) => element !== value);
+        setSelectedValue(newSelected);
+      }
+    };
+
+    useEffect(() => {
+      onChange && onChange(selectedValue);
+    }, [selectedValue, onChange]);
+
+    return (
+      <>
+        <div
+          ref={ref}
+          {...rest}
+          style={{ display: 'flex', gap: '5px', flexDirection: direction }}
+        >
+          <Content
+            options={options}
+            selectValue={selectedValue}
+            changeSelect={changeSelect}
+          ></Content>
+        </div>
+      </>
+    );
+  },
+);
+
+CheckboxGroup.displayName = 'CheckboxGroup';

packages/ui/lib/CheckboxGroup/Content.tsx

@@ -0,0 +1,27 @@
+import { memo } from 'react';
+import type { OptionItemProps } from './CheckboxGroup';
+import { Checkbox } from '..';
+
+export interface ContentProps {
+  options: OptionItemProps[];
+  selectValue: string[];
+  changeSelect: (type: 'add' | 'delete', value: string) => void;
+}
+
+export const Content = memo(function Content({ options, selectValue, changeSelect }: ContentProps) {
+  return (
+    <>
+      {options.map((child, index) => {
+        return (
+          <Checkbox
+            checked={selectValue.includes(child.value || child.label)}
+            value={child.value}
+            label={child.label}
+            key={child.key || index}
+            onChecked={changeSelect}
+          ></Checkbox>
+        );
+      })}
+    </>
+  );
+});

packages/ui/lib/CheckboxGroup/index.ts

@@ -0,0 +1 @@
+export * from './CheckboxGroup';