Skip to content

Commit

Permalink
Merge pull request #24 from BQXBQX/dev-max
Browse files Browse the repository at this point in the history
Dev max
  • Loading branch information
BQXBQX authored Mar 17, 2024
2 parents a508918 + 648395d commit 923f142
Show file tree
Hide file tree
Showing 18 changed files with 2,339 additions and 1,007 deletions.
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@
"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 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",
"competition:lint": "pnpm --filter @sast/oj-competition lint",
Expand Down
1 change: 1 addition & 0 deletions packages/competition/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
},
"dependencies": {
"@sast/oj-ui": "workspace:^",
"@sast/oj-ui-universal": "workspace:^",
"axios": "^1.6.7",
"localforage": "^1.10.0",
"react": "^18.2.0",
Expand Down
15 changes: 15 additions & 0 deletions packages/competition/src/pages/login/page.tsx
Original file line number Diff line number Diff line change
@@ -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>
</>
Expand Down
24 changes: 24 additions & 0 deletions packages/ui-universal/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
16 changes: 16 additions & 0 deletions packages/ui-universal/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Lit + TS</title>
<link rel="stylesheet" href="./src/index.css" />
<script type="module" src="/src/index.ts"></script>
</head>
<body>
<my-element>
<h1>Vite + Lit</h1>
</my-element>
</body>
</html>
82 changes: 82 additions & 0 deletions packages/ui-universal/lib/_variables.scss
Original file line number Diff line number Diff line change
@@ -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);
1 change: 1 addition & 0 deletions packages/ui-universal/lib/assets/lit.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
68 changes: 68 additions & 0 deletions packages/ui-universal/lib/components/Button/index.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
69 changes: 69 additions & 0 deletions packages/ui-universal/lib/components/Button/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
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 {
// /**
// * The color of the button.
// */
// color?: 'primary' | 'secondary' | 'ghost' | 'danger' | 'border';
// /**
// * The size of the button.
// */
// size?: 'small' | 'medium' | 'large';
// /**
// * The shadow of the button.
// */
// shadow?: 'regular' | 'small' | 'medium' | 'large' | 'extraLarge' | 'inner' | 'none';
// /**
// * disabledShadow, when the button is disabled ,the shadow is or not
// */
// disabledShadow?: boolean;
// }

/**
* An example element.
*
* @slot - This element has a slot
* @csspart button - The button
*/
@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: () => void = () => {};

protected render() {
return html`
<button
part="button"
class=${`${this.color} ${this.size} ${this.shadow} ${classMap({
disabled: this.disabled,
disabledShadow: this.disabledShadow,
})}`}
@click=${this._onclick}
>
<slot></slot>
</button>
`;
}
}

declare global {
interface HTMLElementTagNameMap {
"s-button": Sbutton;
}
}

export const Button = createComponent({
tagName: "s-button",
elementClass: Sbutton,
react: React,
});
Empty file.
1 change: 1 addition & 0 deletions packages/ui-universal/lib/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from "./components/Button";
11 changes: 11 additions & 0 deletions packages/ui-universal/lib/typings/scss.d.ts
Original file line number Diff line number Diff line change
@@ -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;
}
1 change: 1 addition & 0 deletions packages/ui-universal/lib/vite-env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/// <reference types="vite/client" />
43 changes: 43 additions & 0 deletions packages/ui-universal/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
{
"name": "@sast/oj-ui-universal",
"private": true,
"version": "0.0.1",
"type": "module",
"main": "./dist/index.cjs.js",
"module": "./dist/index.es.js",
"types": "./dist/index.d.ts",
"files": [
"dist"
],
"exports": {
".": {
"import": {
"types": "./dist/index.d.ts",
"default": "./dist/index.es.js"
},
"require": {
"types": "./dist/index.d.ts",
"default": "./dist/index.cjs.js"
}
}
},
"scripts": {
"dev": "tsc && vite build --watch",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"@lit/react": "^1.0.3",
"lit": "^3.1.2",
"react": "^18.2.0",
"vite-plugin-dts": "^3.6.4"
},
"devDependencies": {
"@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"
}
}
1 change: 1 addition & 0 deletions packages/ui-universal/public/vite.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 923f142

Please sign in to comment.