feat: badge component

docs/docs/components/universal/_meta.json

@@ -2,5 +2,6 @@
     "index",
     "button",
     "accordion",
-    "input"
+    "input",
+    "badge"
 ]

docs/docs/components/universal/badge.mdx

@@ -0,0 +1,56 @@
+import { Badge } from "@sast/ui-universal";
+import Wraper from '../../tools/wraper/index'
+
+
+# Badge Component
+
+The Badge component displays a small status descriptor for an element.
+
+<Wraper>
+    <Badge content="New" type="info" size="medium" />
+</Wraper>
+
+## Usage
+
+```jsx
+import { Badge } from "@sast/ui-universal";
+
+export default function App() {
+  return <Badge content="New" type="info" size="medium" />;
+}
+```
+
+## Props
+
+| Property    | Description                                             | Type                      | Default |
+|-------------|---------------------------------------------------------|---------------------------|---------|
+| `type`      | The type of the badge (info, success, warning, error). | `"info" \| "success" \| "warning" \| "error"` | `"info"` |
+| `size`      | The size of the badge (small, medium, large).          | `"small" \| "medium" \| "large"` | `"medium"` |
+| `content`   | The content of the badge.                               | `string`                  | `"hello"` |
+| `clickCopy` | Determines whether clicking on the badge copies its content to the clipboard. | `boolean` | `false` |
+
+### Events
+
+- `clickCopy`: Fired when the `clickCopy` prop is `true` and the badge is clicked. Copies the badge content to the clipboard.
+
+### Example
+
+```jsx playground direction=vertical
+import { Badge } from "@sast/ui-universal";
+
+export default function Example() {
+  const handleCopy = () => {
+    console.log("Badge content copied!");
+  };
+
+  return (
+    <Badge
+      content="New"
+      type="info"
+      size="small"
+      clickCopy={true}
+      onClickCopy={handleCopy}
+    />
+  );
+}
+```

docs/docs/components/universal/button.mdx

@@ -25,7 +25,7 @@ Simple button component
 
 ## Try it out
 
-```jsx
+```jsx playground direction=vertical
 import React from 'react';
 import {Button} from '@sast/ui-universal'
 

docs/docs/components/universal/input.mdx

@@ -7,9 +7,7 @@ import {Input} from '@sast/ui-universal'
 Input component allows users to input text or passwords.
 
 <Wraper>
-    <s-input
-        label="Username"
-    ></s-input>
+    <Input label='input test' />
 </Wraper>
 
 ## Properties
@@ -29,16 +27,16 @@ Input component allows users to input text or passwords.
 
 ## Example in HTML
 ```html
-<s-input
+<a-input
     width="300"
     disabled="false"
     label="Username"
-></s-input>
+></a-input>
 ```
 
 ## How to fire events
 
-```jsx
+```jsx playground direction=vertical
 import React, {useRef} from 'react';
 import { Input, Button } from '@sast/ui-universal';
 
@@ -49,45 +47,32 @@ export default function App () {
     const handleBlur = (e) => {
         console.log(e.target.value);
     }
-    const handleClick = () => {
+    const handleReset = () => {
         inputRef.current.value = '';
+        setDisable(false);
+    }
+    const handleConfirm = () => {
+        setDisable(true);
     }
     const inputRef = useRef(null);
+    const [disable, setDisable] = React.useState(false);
 
     return (
-        <>
+        <div style={{display: 'flex', gap: 10, flexDirection: 'column'}}>
             <Input
                 ref={inputRef}
                 width={300}
                 label="Username"
                 onInput={handleChange}
                 onBlur={handleBlur}
+                disabled={disable}
             />
-            <Button onClick={handleClick}>Clear</Button>
-        </>
+            <div style={{display: 'flex', gap: 10}}>
+                <Button color="secondary" onClick={handleReset}>Reset</Button>
+                <Button onClick={handleConfirm}>Confirm</Button>
+            </div>
+        </div>
     );
 }
 
-```
-
-
-## Try yourself
-
-```jsx
-import React from 'react';
-import { Input } from '@sast/ui-universal';
-
-export default function App (){
-    return (
-        <Input
-            width={300}
-            disabled={false}
-            label="Username"
-            mode="text"
-            fontsize={18}
-            isFillFather={false}
-            isBorder={true}
-        />
-    );
-}
 ```

docs/package.json

@@ -11,10 +11,11 @@
     "@sast/ui-react": "workspace:^",
     "@sast/ui-universal": "workspace:^",
     "@theguild/remark-mermaid": "^0.0.6",
-    "rspress": "^1.0.0"
+    "rspress": "^1.16.0"
   },
   "devDependencies": {
-    "@rspress/plugin-playground": "^1.15.1",
+    "@rspress/plugin-playground": "^1.16.0",
+    "@rspress/plugin-preview": "^1.16.0",
     "@types/node": "^16"
   }
 }

docs/rspress.config.ts

@@ -4,7 +4,15 @@ import { pluginPlayground } from "@rspress/plugin-playground";
 import { remarkMermaid } from "@theguild/remark-mermaid";
 
 export default defineConfig({
-  plugins: [pluginPlayground({ include: ["@sast/ui-universal"] })],
+  plugins: [
+    pluginPlayground({
+      include: ["@sast/ui-universal"],
+      defaultRenderMode: "pure",
+    }),
+  ],
+  globalUIComponents: [
+    path.join(__dirname, "docs", "tools", "wraper", "index.tsx"),
+  ],
   root: path.join(__dirname, "docs"),
   title: "Aurora UI",
   description: "🌏 UI component library for the future",

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

@@ -0,0 +1 @@
+$cubic-bezier: cubic-bezier(0.215, 0.61, 0.355, 1);

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

@@ -0,0 +1,4 @@
+// border width variables
+$border-0: 0px;
+$border-1: 1px;
+$border-2: 2px;

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

@@ -1,5 +1,10 @@
+//color variables
 $primary-color: #0078d4;
+$secondary-color: #71afe5;
 $danger-color: #ff0000;
 $warning-color: #ffb900;
 $success-color: #00c853;
 $white-color: #ffffff;
+$pale-white-color: #fcfcfc;
+$black-color: #121212;
+$gray-color: #808080;

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

@@ -0,0 +1,5 @@
+//disabled
+@mixin disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}

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

@@ -0,0 +1,6 @@
+//animation-duration varibles
+$duration-100: 100ms;
+$duration-200: 200ms;
+$duration-300: 300ms;
+$duration-400: 400ms;
+$duration-800: 800ms;

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

@@ -0,0 +1,6 @@
+//font-size variables
+$font-size-8: 8px;
+$font-size-10: 10px;
+$font-size-12: 12px;
+$font-size-14: 14px;
+$font-size-16: 16px;

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

@@ -0,0 +1,6 @@
+//border radius variables
+$radius-10: 10px;
+$radius-8: 8px;
+$radius-5: 5px;
+$radius-15: 15px;
+$radius-half: 50%;

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

@@ -15,8 +15,8 @@ export interface AccordionProps {
     disabled?: boolean;
 }
 
-@customElement("s-accordion")
-export class SAccordion extends LitElement {
+@customElement("a-accordion")
+export class AAccordion extends LitElement {
     static styles = styles;
     @property({ type: Number }) width: AccordionProps["width"] = 280;
     @property({ type: Boolean }) disabled: AccordionProps["disabled"] = false;
@@ -60,12 +60,12 @@ export class SAccordion extends LitElement {
 
 declare global {
     interface HTMLElementTagNameMap {
-        "s-accordion": SAccordion;
+        "a-accordion": AAccordion;
     }
 }
 
 export const Accordion = createComponent({
-    tagName: "s-accordion",
-    elementClass: SAccordion,
+    tagName: "a-accordion",
+    elementClass: AAccordion,
     react: React,
 });

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

@@ -0,0 +1,32 @@
+@mixin color-badge($color-name) {
+  background-color: rgba(var(--#{$color-name}-color-background-rgb), 1);
+  color: var(--#{$color-name}-color);
+}
+
+.base {
+  padding: 3px 10px;
+  border-radius: 5px;
+  width: fit-content;
+
+  &.info {
+    @include color-badge(primary);
+  }
+  &.success {
+    @include color-badge(success);
+  }
+  &.warning {
+    @include color-badge(warning);
+  }
+  &.error {
+    @include color-badge(danger);
+  }
+  &.medium {
+    font-size: 14px;
+  }
+  &.large {
+    font-size: 18px;
+  }
+  &.small {
+    font-size: 10px;
+  }
+}

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

@@ -0,0 +1,65 @@
+import { createComponent } from "@lit/react";
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import React from "react";
+import styles from "./index.scss?inline";
+
+export interface BadgeProps {
+  /**
+   * the type of the Badge
+   */
+  type?: "info" | "success" | "warning" | "error";
+  /**
+   * the size of the Badge
+   */
+  size?: "small" | "medium" | "large";
+  /**
+   * the content of the Badge
+   */
+  content: string;
+  /**
+   * is clickCopy work?
+   */
+  clickCopy?: boolean;
+}
+
+@customElement("a-badge")
+class ABadge extends LitElement {
+  static styles = styles;
+  @property({ type: String }) type: BadgeProps["type"] = "info";
+  @property({ type: String }) size: BadgeProps["size"] = "medium";
+  @property({ type: String }) content: BadgeProps["content"] = "hello";
+  @property({ type: Boolean }) clickCopy: BadgeProps["clickCopy"] = false;
+
+  render() {
+    return html`
+      <div
+        class="base ${classMap({
+          base: true,
+          [this.type as string]: true,
+          [this.size as string]: true,
+        })}"
+        @click=${this.clickCopy ? this.handleBadge : undefined}
+      >
+        <span>${this.content}</span>
+      </div>
+    `;
+  }
+
+  handleBadge() {
+    navigator.clipboard.writeText(this.content);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "a-badge": ABadge;
+  }
+}
+
+export const Badge = createComponent({
+  tagName: "a-badge",
+  elementClass: ABadge,
+  react: React,
+});

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

@@ -38,8 +38,8 @@ export interface ButtonProps {
 /**
  * @element s-button
  */
-@customElement("s-button")
-export class Sbutton extends LitElement {
+@customElement("a-button")
+export class Abutton extends LitElement {
   static styles = styles;
   @property({ type: String }) color: ButtonProps["color"] = "primary";
   @property({ type: String }) size: ButtonProps["size"] = "medium";
@@ -65,12 +65,12 @@ export class Sbutton extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "s-button": Sbutton;
+    "a-button": Abutton;
   }
 }
 
 export const Button = createComponent({
-  tagName: "s-button",
-  elementClass: Sbutton,
+  tagName: "a-button",
+  elementClass: Abutton,
   react: React,
 });