Merge pull request #5 from BQXBQX/dev-bqx

Dev bqx
NJUPT-SAST · Jan 29, 2024 · 3d0a465 · 3d0a465
2 parents 535a95f + 6a216e3
commit 3d0a465
Show file tree

Hide file tree

Showing 18 changed files with 766 additions and 182 deletions.
diff --git a/packages/competition/src/App.tsx b/packages/competition/src/App.tsx
@@ -1,15 +1,42 @@
-import { Checkbox, Dialog, Input, Radio, RadioGroup } from "@sast/oj-ui";
+import { Button } from "@sast/oj-ui";
+import {
+  Checkbox,
+  Dialog,
+  Input,
+  Radio,
+  RadioGroup,
+  Sheet,
+  SheetTrigger,
+  SheetHeader,
+  // SheetTrigger,
+} from "@sast/oj-ui";
+import { useState } from "react";
 
 function App() {
-  const test = (value: boolean) => {
-    console.log(value);
-  };
+  const [visible, setVisible] = useState<boolean>(false);
+
   return (
     <>
-      {/* <Input placeholder="" onChange={test}></Input> */}
-      <Checkbox onChecked={test}></Checkbox>
-      {/* <RadioGroup direction="vertical" onChange={test} defaultValue="vuejs" /> */}
-      {/* <Dialog></Dialog> */}
+      <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>
     </>
   );
 }

diff --git a/packages/ui/lib/Button/Button.module.scss b/packages/ui/lib/Button/Button.module.scss
@@ -32,8 +32,9 @@
     border: 1px solid var(--primary-color);
   }
   &.tertiary {
-    background-color: var(--white-color);
+    background-color: #f6f6f6;
     color: var(--primary-color);
+    font-weight: 600;
   }
   &.danger {
     background-color: var(--danger-color);

diff --git a/packages/ui/lib/Calendar/Calendar.module.scss b/packages/ui/lib/Calendar/Calendar.module.scss
@@ -34,8 +34,8 @@
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     column-gap: 5px;
-    row-gap: 2px;
-    padding: 3px 10px;
+    row-gap: 3px;
+    padding: 5px 10px;
     box-sizing: border-box;
     justify-items: center;
     .calendarItem {

diff --git a/packages/ui/lib/Calendar/Calendar.stories.tsx b/packages/ui/lib/Calendar/Calendar.stories.tsx
@@ -3,6 +3,10 @@ import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { Calendar, type CalendarProps } from './Calendar';
 
+const test = (value: Date) => {
+  console.log('select date', value);
+};
+
 const meta = {
   title: 'Components/Calendar',
   component: Calendar,
@@ -17,7 +21,11 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-const defaultProps: CalendarProps = {};
+const defaultProps: CalendarProps = {
+  onChange: function () {},
+  selected: new Date(),
+  defaultSelected: new Date(),
+};
 
 export const DefaultCalendar: Story = {
   args: {
@@ -28,5 +36,7 @@ export const DefaultCalendar: Story = {
 export const ExampleCalendar: Story = {
   args: {
     ...defaultProps,
+    onChange: test,
+    selected: new Date(0),
   },
 };