feat: Calendar component

docs/docs/components/universal/_meta.json

@@ -3,5 +3,6 @@
     "button",
     "accordion",
     "input",
-    "badge"
+    "badge",
+    "calendar"
 ]

docs/docs/components/universal/accordion.mdx

@@ -28,7 +28,7 @@ Accordion component allows you to expand and collapse content.
 </s-accordion>
 ```
 
-## Try it out
+## Example
 
 ```jsx
 import React from 'react';

docs/docs/components/universal/badge.mdx

@@ -35,22 +35,33 @@ export default function App() {
 
 ### Example
 
-```jsx playground direction=vertical
+```jsx
 import { Badge } from "@sast/ui-universal";
 
 export default function Example() {
-  const handleCopy = () => {
-    console.log("Badge content copied!");
-  };
-
   return (
+    <>
+    <Badge
+      content="Badge"
+      type="error"
+      size="large"
+    />
+    <Badge
+        content="Badge"
+        type="warning"
+        size="large"
+    />
+    <Badge
+        content="Badge"
+        type="info"
+        size="medium"
+    />
     <Badge
-      content="New"
-      type="info"
-      size="small"
-      clickCopy={true}
-      onClickCopy={handleCopy}
+        content="Badge"
+        type="success"
+        size="small"
     />
+    </>
   );
 }
 ```

docs/docs/components/universal/button.mdx

@@ -1,12 +1,12 @@
 import Wraper from '../../tools/wraper/index'
-import {Button} from '@sast/ui-universal'
+import { Button } from '@sast/ui-universal'
 
 
 # Button Component
 Simple button component
 
 <Wraper>
-    <Button color="primary" size="small" shadow="regular" disabled={false} disabledShadow={true}>
+    <Button color="primary" size="small" shadow="large">
         Button Example
     </Button>
 </Wraper>
@@ -23,15 +23,15 @@ Simple button component
 | `disabled`       | If `true`, the button will be disabled.                                   | `boolean`                                | `false`   |
 | `disabledShadow` | When the button is disabled, specifies whether the shadow should be applied or not. | `boolean`                                | `true`    |
 
-## Try it out
+## Example
 
-```jsx playground direction=vertical
+```jsx
 import React from 'react';
 import {Button} from '@sast/ui-universal'
 
 export default function App (){
     return (
-        <Button color="primary" size="medium" shadow="regular" disabled={false} disabledShadow={true}>
+        <Button color="primary" size="medium" shadow="regular" disabled={false}>
             Click me
         </Button>
     )

docs/docs/components/universal/calendar.mdx

@@ -0,0 +1,39 @@
+import Wraper from '../../tools/wraper/index'
+import { Calendar } from '@sast/ui-universal'
+
+# Calendar Component
+
+The Calendar component allows users to select dates and navigate through months.
+
+<Wraper>
+    <div style={{margin: 10}}>
+        <Calendar onSelect={(date) => console.log(date)} />
+    </div>
+</Wraper>
+
+
+## Props
+
+| Property          | Description                                   | Type                      | Default |
+|-------------------|-----------------------------------------------|---------------------------|---------|
+| `onSelect`        | Callback function triggered when a date is selected. | `(value: Date) => void` |         |
+| `selected`        | The currently selected date.                  | `Date \| undefined`      |         |
+
+## Events
+
+- `onSelect`: Fired when a date is selected. Provides the selected date as an argument to the callback function.
+
+## Example
+
+```jsx
+import {Calendar} from '@sast/ui-universal'
+
+export default function Example() {
+  const handleSelect = (date) => {
+    console.log("Selected date:", date);
+  };
+
+  return <div style={{margin: 10}}><Calendar onSelect={handleSelect} selected={new Date()} /></div>;
+}
+```
+

docs/docs/components/universal/input.mdx

@@ -34,9 +34,9 @@ Input component allows users to input text or passwords.
 ></a-input>
 ```
 
-## How to fire events
+## Example in React
 
-```jsx playground direction=vertical
+```jsx
 import React, {useRef} from 'react';
 import { Input, Button } from '@sast/ui-universal';
 
@@ -68,11 +68,10 @@ export default function App () {
                 disabled={disable}
             />
             <div style={{display: 'flex', gap: 10}}>
-                <Button color="secondary" onClick={handleReset}>Reset</Button>
-                <Button onClick={handleConfirm}>Confirm</Button>
+                <Button color="secondary" onClick={handleReset}>Clear</Button>
+                <Button onClick={handleConfirm}>confirm</Button>
             </div>
         </div>
     );
 }
-
 ```

docs/rspress.config.ts

@@ -1,14 +1,16 @@
 import * as path from "path";
 import { defineConfig } from "rspress/config";
 import { pluginPlayground } from "@rspress/plugin-playground";
+import { pluginPreview } from "@rspress/plugin-preview";
 import { remarkMermaid } from "@theguild/remark-mermaid";
 
 export default defineConfig({
   plugins: [
-    pluginPlayground({
-      include: ["@sast/ui-universal"],
-      defaultRenderMode: "pure",
-    }),
+    // pluginPlayground({
+    //   include: ["@sast/ui-universal"],
+    //   defaultRenderMode: "pure",
+    // }),
+    pluginPreview( ),
   ],
   globalUIComponents: [
     path.join(__dirname, "docs", "tools", "wraper", "index.tsx"),

packages/ui-react/lib/Calendar/Calendar.module.scss

@@ -8,6 +8,7 @@ $animation-duration: $duration-300;
   background-color: var(--white-color);
   color: var(--black-color);
   box-shadow: $shadow;
+  min-width: 19.6875rem;
   .calendarTitle {
     font-size: 18px;
     font-weight: 1000;

packages/ui-universal/lib/_variables.scss

@@ -1,10 +1,19 @@
 @use "./global.scss" as *;
+
 // box-shadow variables
 $shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-$shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
-$shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-$shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-$shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+$shadow:
+  0 1px 3px 0 rgba(0, 0, 0, 0.1),
+  0 1px 2px -1px rgba(0, 0, 0, 0.1);
+$shadow-md:
+  0 4px 6px -1px rgb(0 0 0 / 0.1),
+  0 2px 4px -2px rgb(0 0 0 / 0.1);
+$shadow-lg:
+  0 10px 15px -3px rgb(0 0 0 / 0.1),
+  0 4px 6px -4px rgb(0 0 0 / 0.1);
+$shadow-xl:
+  0 20px 25px -5px rgb(0 0 0 / 0.1),
+  0 8px 10px -6px rgb(0 0 0 / 0.1);
 $shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
 $shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
 
@@ -29,25 +38,6 @@ $shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
   }
 }
 
-// border width variables
-$border-0: 0px;
-$border-1: 1px;
-$border-2: 2px;
-
-//animation-duration varibles
-$duration-100: 100ms;
-$duration-200: 200ms;
-$duration-300: 300ms;
-$duration-400: 400ms;
-$duration-800: 800ms;
-
-//border radius variables
-$radius-10: 10px;
-$radius-8: 8px;
-$radius-5: 5px;
-$radius-15: 15px;
-$radius-half: 50%;
-
 //absolute center
 @mixin absolute-center {
   position: absolute;
@@ -56,20 +46,5 @@ $radius-half: 50%;
   transform: translate(-50%, -50%);
 }
 
-//font-size variables
-$font-size-8: 8px;
-$font-size-10: 10px;
-$font-size-12: 12px;
-$font-size-14: 14px;
-$font-size-16: 16px;
-
-//disabled
-@mixin disabled {
-  cursor: not-allowed;
-  opacity: 0.4;
-}
-
 //background color
 $background-shadow-color: rgb(var(--black-color-rgb), 0.6);
-
-$cubic-bezier: cubic-bezier(0.215, 0.61, 0.355, 1);

packages/ui-universal/lib/_variables/radius.scss

@@ -3,4 +3,4 @@ $radius-10: 10px;
 $radius-8: 8px;
 $radius-5: 5px;
 $radius-15: 15px;
-$radius-half: 50%;
+$radius-half: 50%;

packages/ui-universal/lib/components/Accordion/index.scss

@@ -1,4 +1,12 @@
-@use '../../variables' as *;
+@use "../../variables" as *;
+@use "../../_variables/color.scss" as *;
+@use "../../_variables/radius.scss" as *;
+@use "../../_variables/border.scss" as *;
+@use "../../_variables/fontSize.scss" as *;
+@use "../../_variables/duration.scss" as *;
+@use "../../_variables/animation.scss" as *;
+@use "../../_variables/disabled.scss" as *;
+
 $animation-duration: $duration-300;
 .base {
   display: grid;

packages/ui-universal/lib/components/Badge/index.scss

@@ -1,3 +1,5 @@
+@use "../../variables" as *;
+
 @mixin color-badge($color-name) {
   background-color: rgba(var(--#{$color-name}-color-background-rgb), 1);
   color: var(--#{$color-name}-color);
@@ -6,7 +8,7 @@
 .base {
   padding: 3px 10px;
   border-radius: 5px;
-  width: fit-content;
+  display: inline-flex;
 
   &.info {
     @include color-badge(primary);

packages/ui-universal/lib/components/Badge/index.ts

@@ -36,7 +36,6 @@ class ABadge extends LitElement {
     return html`
       <div
         class="base ${classMap({
-          base: true,
           [this.type as string]: true,
           [this.size as string]: true,
         })}"

packages/ui-universal/lib/components/Button/index.scss

@@ -1,5 +1,11 @@
 @use "../../variables" as *;
 @use "../../_variables/color.scss" as *;
+@use "../../_variables/radius.scss" as *;
+@use "../../_variables/border.scss" as *;
+@use "../../_variables/fontSize.scss" as *;
+@use "../../_variables/duration.scss" as *;
+@use "../../_variables/animation.scss" as *;
+@use "../../_variables/disabled.scss" as *;
 
 :host {
   display: block;

packages/ui-universal/lib/components/Button/index.ts

@@ -18,13 +18,13 @@ export interface ButtonProps {
    * The shadow of the button.
    */
   shadow?:
-  | "regular"
-  | "small"
-  | "medium"
-  | "large"
-  | "extraLarge"
-  | "inner"
-  | "none";
+    | "regular"
+    | "small"
+    | "medium"
+    | "large"
+    | "extraLarge"
+    | "inner"
+    | "none";
   /**
    * If `true`, the button will be disabled.
    */
@@ -46,16 +46,19 @@ export class Abutton extends LitElement {
   @property({ type: String }) shadow: ButtonProps["shadow"] = "none";
   @property({ type: Boolean }) disabled: ButtonProps["disabled"] = false;
   @property({ type: Boolean }) disabledShadow: ButtonProps["disabledShadow"] =
-    true;
+    false;
 
   protected render() {
     return html`
       <button
         part="button"
-        class=${`base ${this.color} ${this.size} ${this.shadow} ${classMap({
-      disabled: this.disabled as boolean,
-      disabledShadow: this.disabledShadow as boolean,
-    })}`}
+        class="base ${classMap({
+          [this.color as string]: true,
+          [this.size as string]: true,
+          [`shadow-${this.shadow}` as string]: true,
+          disabled: this.disabled as boolean,
+          disabledShadow: this.disabledShadow as boolean,
+        })}"
       >
         <slot></slot>
       </button>