feat: scss support

package.json

@@ -14,7 +14,7 @@
     "ui:lint": "pnpm --filter @sast/oj-ui lint",
     "ui:format": "pnpm --filter @sast/oj-ui format",
     "ui:test": "pnpm --filter @sast/oj-ui test",
-    "ui-uni:dev": "pnpm --filter @sast/oj-ui-universal storybook",
+    "ui-uni:dev": "pnpm --filter @sast/oj-ui-universal dev",
     "ui-uni:build": "pnpm --filter @sast/oj-ui-universal build",
     "competition:dev": "pnpm --filter @sast/oj-competition dev",
     "competition:build": "pnpm --filter @sast/oj-competition build:lib",

packages/competition/src/pages/home/page.tsx

@@ -1,12 +1,10 @@
 import { Outlet } from "react-router-dom";
-import "@sast/oj-ui-universal";
 
 const Home = () => {
   return (
     <>
       This is Home
       <Outlet></Outlet>
-      <s-button onclick={() => console.log("hello")}>Click me</s-button>
     </>
   );
 };

packages/competition/src/pages/login/page.tsx

@@ -1,12 +1,27 @@
 import LoginCard from "../../components/login/loginCard";
 import styles from "./page.module.scss";
+import { Button } from "@sast/oj-ui-universal";
 
 const Login = () => {
   return (
     <>
       <div className={styles["login-background"]}>
         <div className={styles["login-card-container"]}>
           <LoginCard></LoginCard>
+          <Button
+            _onclick={() => {
+              console.log("click");
+            }}
+          >
+            Click me
+          </Button>
+          <button
+            onClick={() => {
+              console.log("click");
+            }}
+          >
+            click
+          </button>
         </div>
       </div>
     </>

packages/ui-universal/lib/_variables.scss

@@ -0,0 +1,82 @@
+// 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-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+$shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+
+@mixin shadow {
+  &.shadow-regular {
+    box-shadow: $shadow;
+  }
+  &.shadow-small {
+    box-shadow: $shadow-sm;
+  }
+  &.shadow-medium {
+    box-shadow: $shadow-md;
+  }
+  &.shadow-large {
+    box-shadow: $shadow-lg;
+  }
+  &.shadow-extraLarge {
+    box-shadow: $shadow-xl;
+  }
+  &.shadow-inner {
+    box-shadow: $shadow-inner;
+  }
+}
+
+// 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;
+  top: 50%;
+  left: 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/components/Button/index.scss

@@ -0,0 +1,68 @@
+:host {
+  background-color: var(--primary-color);
+  color: var(--white-color);
+  padding: 10px;
+  border-radius: 5px;
+  border: none;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 400;
+  transition: all 0.15s ease-in-out;
+  @include shadow;
+  &:hover {
+    backdrop-filter: brightness(0.85);
+  }
+  &:active {
+    transform: scale(0.98);
+  }
+  &.primary {
+    background-color: var(--primary-color);
+  }
+  &.secondary {
+    background-color: var(--white-color);
+    color: var(--primary-color);
+    border: 1px solid var(--primary-color);
+  }
+  &.border {
+    border: solid 1px var(--border-white);
+    background-color: var(--white-color);
+    color: var(--black-color);
+    font-weight: 500;
+  }
+  &.ghost {
+    &:hover:not(.disabled) {
+      filter: brightness(1);
+      backdrop-filter: brightness(0.97);
+    }
+    background-color: transparent;
+    color: var(--primary-color);
+    font-weight: 600;
+  }
+  &.danger {
+    background-color: var(--danger-color);
+  }
+  &.disabled {
+    cursor: not-allowed;
+    &:hover {
+      backdrop-filter: none;
+    }
+    &:active {
+      transform: none;
+    }
+  }
+  &.disabledShadow {
+    filter: grayscale(1);
+  }
+  &.small {
+    padding: 5px;
+    font-size: 12px;
+  }
+  &.medium {
+    padding: 10px;
+    font-size: 16px;
+  }
+  &.large {
+    padding: 15px;
+    font-size: 20px;
+  }
+}

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

@@ -1,7 +1,9 @@
-import { LitElement, css, html } from "lit";
+import { CSSResultGroup, LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { createComponent } from "@lit/react";
+import { classMap } from "lit/directives/class-map.js";
 import React from "react";
+import styles from "./index.scss?inline";
 
 // export interface ButtonProps extends HTMLButtonElement {
 //   /**
@@ -30,16 +32,26 @@ import React from "react";
  */
 @customElement("s-button")
 export class Sbutton extends LitElement {
+  static styles = styles as unknown as CSSResultGroup;
   @property({ type: String }) color = "primary";
   @property({ type: String }) size = "medium";
   @property({ type: String }) shadow = "none";
   @property({ type: Boolean }) disabled = false;
   @property({ type: Boolean }) disabledShadow = true;
-  @property() _onClick = () => {};
+  @property() _onclick: () => void = () => {};
 
-  render() {
+  protected render() {
     return html`
-      <button part="button" @click=${this._onClick}><slot></slot></button>
+      <button
+        part="button"
+        class=${`${this.color} ${this.size} ${this.shadow} ${classMap({
+          disabled: this.disabled,
+          disabledShadow: this.disabledShadow,
+        })}`}
+        @click=${this._onclick}
+      >
+        <slot></slot>
+      </button>
     `;
   }
 }
@@ -54,7 +66,4 @@ export const Button = createComponent({
   tagName: "s-button",
   elementClass: Sbutton,
   react: React,
-  events: {
-    onclick: "click",
-  },
-})
+});

packages/ui-universal/lib/typings/scss.d.ts

@@ -0,0 +1,11 @@
+declare module "*.scss?inline" {
+  import { CSSResult } from "lit";
+  const styles: CSSResult;
+  export default styles;
+}
+
+declare module "*.scss" {
+  import { CSSResult } from "lit";
+  const styles: CSSResult;
+  export default styles;
+}

packages/ui-universal/package.json

@@ -33,7 +33,11 @@
     "vite-plugin-dts": "^3.6.4"
   },
   "devDependencies": {
-    "typescript": "^5.2.2",
+    "@types/react": "^18.2.43",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-scss-lit": "^1.1.6",
+    "sass": "^1.69.5",
+    "typescript": "^5.3.3",
     "vite": "^5.1.6"
   }
 }

packages/ui-universal/tsconfig.json

@@ -28,5 +28,5 @@
   "paths": {
     "@/*": ["./lib/*"]
   },
-  "include": ["lib"]
+  "include": ["lib", "lib/typings/index.d.ts"]
 }

packages/ui-universal/vite.config.js

@@ -2,13 +2,29 @@
 import path from 'path';
 import dts from 'vite-plugin-dts';
 import { join } from 'path';
+import { litScss } from 'rollup-plugin-scss-lit'
+import copy from 'rollup-plugin-copy'
 
 /** @type {import('vite').UserConfig} */
 export default {
   // config options
   plugins: [
     dts(), // Output .d.ts files
+    litScss({ minify: process.env.NODE_ENV === 'production', options: { loadPaths: ["node_modules"] }, }), // Support for lit-element scss
+    copy({
+      targets: [{ src: "lib/**/*.scss", dest: "dist" }], // build is configured as outDir in tsconfig.json
+      flatten: false, // important - preserves folder structure
+      hook: "buildStart", // important - needs to run before other plugins
+    }),
   ],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@use "./lib/variables" as *;`, // Import global scss variables
+        includePaths: [path.resolve(__dirname, 'lib')], // Include paths for scss
+      },
+    },
+  },
   resolve: {
     alias: {
       "@": "/lib",
@@ -23,5 +39,14 @@ export default {
       name: 'index',
       fileName: format => `index.${format}.js`,
     },
+    rollupOptions: {
+      external: ['react', 'react-dom'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+        },
+      },
+    }
   },
 };