Add base calculator
This commit is contained in:
commit
0ce99f5590
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
|
|
@ -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?
|
||||||
50
README.md
Normal file
50
README.md
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
# React + TypeScript + Vite
|
||||||
|
|
||||||
|
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||||
|
|
||||||
|
Currently, two official plugins are available:
|
||||||
|
|
||||||
|
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||||
|
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||||
|
|
||||||
|
## Expanding the ESLint configuration
|
||||||
|
|
||||||
|
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
|
||||||
|
|
||||||
|
- Configure the top-level `parserOptions` property like this:
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default tseslint.config({
|
||||||
|
languageOptions: {
|
||||||
|
// other options...
|
||||||
|
parserOptions: {
|
||||||
|
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||||
|
tsconfigRootDir: import.meta.dirname,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
|
||||||
|
- Optionally add `...tseslint.configs.stylisticTypeChecked`
|
||||||
|
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
|
||||||
|
|
||||||
|
```js
|
||||||
|
// eslint.config.js
|
||||||
|
import react from 'eslint-plugin-react'
|
||||||
|
|
||||||
|
export default tseslint.config({
|
||||||
|
// Set the react version
|
||||||
|
settings: { react: { version: '18.3' } },
|
||||||
|
plugins: {
|
||||||
|
// Add the react plugin
|
||||||
|
react,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
// other rules...
|
||||||
|
// Enable its recommended rules
|
||||||
|
...react.configs.recommended.rules,
|
||||||
|
...react.configs['jsx-runtime'].rules,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
```
|
||||||
28
eslint.config.js
Normal file
28
eslint.config.js
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
import tseslint from 'typescript-eslint'
|
||||||
|
|
||||||
|
export default tseslint.config(
|
||||||
|
{ ignores: ['dist'] },
|
||||||
|
{
|
||||||
|
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
'react-hooks': reactHooks,
|
||||||
|
'react-refresh': reactRefresh,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
...reactHooks.configs.recommended.rules,
|
||||||
|
'react-refresh/only-export-components': [
|
||||||
|
'warn',
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
)
|
||||||
13
index.html
Normal file
13
index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!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 + React + TS</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
3084
package-lock.json
generated
Normal file
3084
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
31
package.json
Normal file
31
package.json
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
{
|
||||||
|
"name": "react-calculator",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc -b && vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"list-react-files": "^0.2.0",
|
||||||
|
"react": "^18.3.1",
|
||||||
|
"react-dom": "^18.3.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.13.0",
|
||||||
|
"@types/react": "^18.3.12",
|
||||||
|
"@types/react-dom": "^18.3.1",
|
||||||
|
"@vitejs/plugin-react": "^4.3.3",
|
||||||
|
"eslint": "^9.13.0",
|
||||||
|
"eslint-plugin-react-hooks": "^5.0.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.14",
|
||||||
|
"globals": "^15.11.0",
|
||||||
|
"react-router-dom": "^6.28.0",
|
||||||
|
"typescript": "~5.6.2",
|
||||||
|
"typescript-eslint": "^8.11.0",
|
||||||
|
"vite": "^5.4.10"
|
||||||
|
}
|
||||||
|
}
|
||||||
18
src/App.tsx
Normal file
18
src/App.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
||||||
|
import Calculator from './Calculator';
|
||||||
|
import AddonStore from './AddonStore';
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<BrowserRouter>
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<Calculator />} />
|
||||||
|
<Route path="addons" element={<AddonStore />} />
|
||||||
|
</Routes>
|
||||||
|
</BrowserRouter>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App
|
||||||
173
src/Calculator.tsx
Normal file
173
src/Calculator.tsx
Normal file
|
|
@ -0,0 +1,173 @@
|
||||||
|
import { useState } from 'react'
|
||||||
|
import { ButtonProps, CalculatorButton } from './components/Calculator/Button'
|
||||||
|
import CalculatorPreview from './components/Calculator/CalculatorPreview';
|
||||||
|
import ButtonList from './components/Calculator/ButtonList';
|
||||||
|
|
||||||
|
function Calculator() {
|
||||||
|
let [calc, setCalc] = useState({
|
||||||
|
sign: "",
|
||||||
|
num: 0,
|
||||||
|
res: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
const roundToDigit = (num: number, digits: number) => (Math.round(num * Math.pow(10, digits) + Number.EPSILON) / Math.pow(10, digits));
|
||||||
|
|
||||||
|
const numClickHandler = (e: any) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const value = e.target.innerHTML;
|
||||||
|
|
||||||
|
if (String(calc.num).length < 16) {
|
||||||
|
setCalc({
|
||||||
|
...calc,
|
||||||
|
num:
|
||||||
|
calc.num === 0 && value === "0"
|
||||||
|
? 0
|
||||||
|
: Number(calc.num) % 1 === 0
|
||||||
|
? Number(calc.num + value)
|
||||||
|
: calc.num + value,
|
||||||
|
res: !calc.sign ? 0 : calc.res,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const commaClickHandler = (e: any) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const value = e.target.innerHTML;
|
||||||
|
|
||||||
|
setCalc({
|
||||||
|
...calc,
|
||||||
|
num: !calc.num.toString().includes(".") ? calc.num + value : calc.num,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const signClickHandler = (e: any) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const value = e.target.innerHTML;
|
||||||
|
|
||||||
|
setCalc({
|
||||||
|
...calc,
|
||||||
|
sign: value,
|
||||||
|
res: !calc.res && calc.num ? calc.num : calc.res,
|
||||||
|
num: 0,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const equalsClickHandler = () => {
|
||||||
|
if (calc.sign && calc.num) {
|
||||||
|
const math = (a: number, b: number, sign: string) =>
|
||||||
|
sign === "+"
|
||||||
|
? a + b
|
||||||
|
: sign === "-"
|
||||||
|
? a - b
|
||||||
|
: sign === "X"
|
||||||
|
? a * b
|
||||||
|
: a / b;
|
||||||
|
|
||||||
|
setCalc({
|
||||||
|
...calc,
|
||||||
|
res:
|
||||||
|
calc.num === 0 && calc.sign === "/"
|
||||||
|
? 0
|
||||||
|
: roundToDigit(math(Number(calc.res), Number(calc.num), calc.sign), 1),
|
||||||
|
sign: "",
|
||||||
|
num: 0,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const invertClickHandler = () => {
|
||||||
|
setCalc({
|
||||||
|
...calc,
|
||||||
|
num: calc.num ? (Number(calc.num) * -1): 0,
|
||||||
|
res: calc.res ? (Number(calc.res) * -1): 0,
|
||||||
|
sign: "",
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const percentClickHandler = () => {
|
||||||
|
let num = calc.num ? calc.num : 0;
|
||||||
|
let res = calc.res ? calc.res : 0;
|
||||||
|
|
||||||
|
setCalc({
|
||||||
|
...calc,
|
||||||
|
num: (num /= Math.pow(100, 1)),
|
||||||
|
res: (res /= Math.pow(100, 1)),
|
||||||
|
sign: "",
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const resetClickHandler = () => {
|
||||||
|
setCalc({
|
||||||
|
...calc,
|
||||||
|
sign: "",
|
||||||
|
num: 0,
|
||||||
|
res: 0,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const numberButton: ButtonProps[] = [
|
||||||
|
{ variant: 'neutral', onClick: numClickHandler, label: '9' },
|
||||||
|
{ variant: 'neutral', onClick: numClickHandler, label: '8' },
|
||||||
|
{ variant: 'neutral', onClick: numClickHandler, label: '7' },
|
||||||
|
{ variant: 'neutral', onClick: numClickHandler, label: '6' },
|
||||||
|
{ variant: 'neutral', onClick: numClickHandler, label: '5' },
|
||||||
|
{ variant: 'neutral', onClick: numClickHandler, label: '4' },
|
||||||
|
{ variant: 'neutral', onClick: numClickHandler, label: '3' },
|
||||||
|
{ variant: 'neutral', onClick: numClickHandler, label: '2' },
|
||||||
|
{ variant: 'neutral', onClick: numClickHandler, label: '1' },
|
||||||
|
{ variant: 'neutral', onClick: numClickHandler, label: '0', className: 'span-2' },
|
||||||
|
{ variant: 'neutral', onClick: commaClickHandler, label: '.' },
|
||||||
|
];
|
||||||
|
const actionButtons: ButtonProps[] = [
|
||||||
|
{ variant: 'secondary', onClick: resetClickHandler, label: 'C' },
|
||||||
|
{ variant: 'primary', onClick: invertClickHandler, label: '+-' },
|
||||||
|
{ variant: 'primary', onClick: percentClickHandler, label: '%' },
|
||||||
|
{ variant: 'primary', onClick: signClickHandler, label: '÷' },
|
||||||
|
{ variant: 'primary', onClick: signClickHandler, label: '×' },
|
||||||
|
{ variant: 'primary', onClick: signClickHandler, label: '−' },
|
||||||
|
{ variant: 'primary', onClick: signClickHandler, label: '+' },
|
||||||
|
{ variant: 'secondary', onClick: equalsClickHandler, label: '=' },
|
||||||
|
];
|
||||||
|
const buttons: ButtonProps[] = [
|
||||||
|
{ variant: 'secondary', onClick: resetClickHandler, label: 'C' },
|
||||||
|
{ variant: 'primary', onClick: invertClickHandler, label: '+-' },
|
||||||
|
{ variant: 'primary', onClick: percentClickHandler, label: '%' },
|
||||||
|
{ variant: 'primary', onClick: signClickHandler, label: '÷' },
|
||||||
|
|
||||||
|
{ variant: 'neutral', onClick: numClickHandler, label: '7' },
|
||||||
|
{ variant: 'neutral', onClick: numClickHandler, label: '8' },
|
||||||
|
{ variant: 'neutral', onClick: numClickHandler, label: '9' },
|
||||||
|
{ variant: 'primary', onClick: signClickHandler, label: '×' },
|
||||||
|
|
||||||
|
{ variant: 'neutral', onClick: numClickHandler, label: '4' },
|
||||||
|
{ variant: 'neutral', onClick: numClickHandler, label: '5' },
|
||||||
|
{ variant: 'neutral', onClick: numClickHandler, label: '6' },
|
||||||
|
{ variant: 'primary', onClick: signClickHandler, label: '−' },
|
||||||
|
|
||||||
|
{ variant: 'neutral', onClick: numClickHandler, label: '1' },
|
||||||
|
{ variant: 'neutral', onClick: numClickHandler, label: '2' },
|
||||||
|
{ variant: 'neutral', onClick: numClickHandler, label: '3' },
|
||||||
|
{ variant: 'primary', onClick: signClickHandler, label: '+' },
|
||||||
|
|
||||||
|
{ variant: 'neutral', onClick: numClickHandler, label: '0', className: 'span-2' },
|
||||||
|
{ variant: 'neutral', onClick: commaClickHandler, label: '.' },
|
||||||
|
{ variant: 'secondary', onClick: equalsClickHandler, label: '=' },
|
||||||
|
]
|
||||||
|
|
||||||
|
const buttons3: ButtonProps[] = [ ...numberButton, ...actionButtons ]
|
||||||
|
|
||||||
|
const test: CalculatorButton[] = [
|
||||||
|
{ order: 1, props: { variant: 'secondary', onClick: equalsClickHandler, label: '=' },}
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="calculator-wrapper">
|
||||||
|
<div className="calculator">
|
||||||
|
<CalculatorPreview value={calc.num ? calc.num : calc.res} />
|
||||||
|
<ButtonList items={buttons} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Calculator
|
||||||
36
src/components/Calculator/Button.tsx
Normal file
36
src/components/Calculator/Button.tsx
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
type ButtonVariant = "neutral" | "neutral-light" | "primary" | "secondary";
|
||||||
|
|
||||||
|
export type CalculatorButton = {
|
||||||
|
order: number,
|
||||||
|
props: ButtonProps
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ButtonProps {
|
||||||
|
variant?: ButtonVariant;
|
||||||
|
onClick: (e: any) => void;
|
||||||
|
children?: any;
|
||||||
|
className?: any;
|
||||||
|
label?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Button({ variant = "neutral", className, children, label, onClick, ...rest}: ButtonProps) {
|
||||||
|
let classes: [string] = ["btn"];
|
||||||
|
classes.push(className);
|
||||||
|
switch (variant) {
|
||||||
|
case "neutral":
|
||||||
|
classes.push("btn-neutral");
|
||||||
|
break;
|
||||||
|
case "neutral-light":
|
||||||
|
classes.push("btn-neutral-light");
|
||||||
|
break;
|
||||||
|
case "primary":
|
||||||
|
classes.push("btn-primary");
|
||||||
|
break;
|
||||||
|
case "secondary":
|
||||||
|
classes.push("btn-secondary");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<button type="button" className={classes.join(' ')} onClick={onClick} {...rest}>{children||label}</button>
|
||||||
|
)
|
||||||
|
}
|
||||||
15
src/components/Calculator/ButtonList.tsx
Normal file
15
src/components/Calculator/ButtonList.tsx
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
import Button, { ButtonProps } from "./Button"
|
||||||
|
|
||||||
|
interface ButtonListProps {
|
||||||
|
items: ButtonProps[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ButtonList({items, ...rest}: ButtonListProps) {
|
||||||
|
return (
|
||||||
|
<div className="buttonList" {...rest}>
|
||||||
|
{items.map((item) => {
|
||||||
|
return <Button key={item.label} {...item}>{item.label}</Button>
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
7
src/components/Calculator/CalculatorPreview.tsx
Normal file
7
src/components/Calculator/CalculatorPreview.tsx
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import InputField from "./InputField";
|
||||||
|
|
||||||
|
export default function CalculatorPreview({ value }) {
|
||||||
|
return (
|
||||||
|
<InputField value={value} className="preview" name="preview" readOnly />
|
||||||
|
)
|
||||||
|
}
|
||||||
23
src/components/Calculator/InputField.tsx
Normal file
23
src/components/Calculator/InputField.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
export default function InputField(props: any) {
|
||||||
|
const {
|
||||||
|
type = "text",
|
||||||
|
value = "",
|
||||||
|
name = "",
|
||||||
|
placeholder = "",
|
||||||
|
className = "",
|
||||||
|
...rest
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
let classes: [string] = [""];
|
||||||
|
classes.push(className);
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
type={type}
|
||||||
|
value={value}
|
||||||
|
name={name}
|
||||||
|
className={classes.join(' ')}
|
||||||
|
placeholder={placeholder}
|
||||||
|
{...rest}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
};
|
||||||
6
src/index.css
Normal file
6
src/index.css
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
@import './themes/default/tokens.css';
|
||||||
|
@import './themes/default/default-dark.css';
|
||||||
|
/*@import './themes/default/default-light.css';*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
10
src/main.tsx
Normal file
10
src/main.tsx
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { StrictMode } from 'react'
|
||||||
|
import { createRoot } from 'react-dom/client'
|
||||||
|
import './index.css'
|
||||||
|
import App from './App.tsx'
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>,
|
||||||
|
)
|
||||||
168
src/themes/default/default-dark.css
Normal file
168
src/themes/default/default-dark.css
Normal file
|
|
@ -0,0 +1,168 @@
|
||||||
|
:root {
|
||||||
|
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
line-height: 1;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
color-scheme: dark;
|
||||||
|
color: var(--neutral-50);
|
||||||
|
background-color: var(--neutral-950);
|
||||||
|
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
#root {
|
||||||
|
width: 100%;
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.calculator-wrapper {
|
||||||
|
max-width: 280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.addon-store-wrapper {
|
||||||
|
max-width: 550px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
:focus:focus-visible {
|
||||||
|
outline: 2px solid rgb(90, 90, 215);
|
||||||
|
outline-offset: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.span-2 {
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
.span-3 {
|
||||||
|
grid-column: span 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--secondary-500);
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: var(--secondary-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
min-width: 320px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3.2em;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
font-size: 1.3em;
|
||||||
|
background-color: var(--btn-bg, var(--neutral-950));
|
||||||
|
border-color: var(--btn-border, var(--neutral-900));
|
||||||
|
color: var(--btn-text, var(--neutral-50));
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.25s, color 0.25s;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
line-height: 1;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.btn.span-2, .btn.span-3 {
|
||||||
|
aspect-ratio: unset;
|
||||||
|
}
|
||||||
|
.btn:hover, .btn:focus {
|
||||||
|
background-color: var(--btn-hover-bg, var(--btn-bg, var(--neutral-900)));
|
||||||
|
color: var(--btn-hover-text, var(--btn-text, var(--neutral-50)));
|
||||||
|
border-color: var(--btn-hover-border, var(--btn-border, var(--neutral-900)));
|
||||||
|
}
|
||||||
|
.btn-calculate, .btn-primary {
|
||||||
|
--btn-bg: var(--primary-900);
|
||||||
|
--btn-text: var(--primary-100);
|
||||||
|
--btn-border: var(--primary-900);
|
||||||
|
--btn-hover-bg: var(--primary-700);
|
||||||
|
--btn-hover-border: var(--primary-700);
|
||||||
|
}
|
||||||
|
.btn-secondary {
|
||||||
|
--btn-bg: var(--secondary-900);
|
||||||
|
--btn-text: var(--secondary-100);
|
||||||
|
--btn-border: var(--secondary-900);
|
||||||
|
--btn-hover-bg: var(--secondary-700);
|
||||||
|
--btn-hover-border: var(--secondary-700);
|
||||||
|
}
|
||||||
|
.btn-neutral-light {
|
||||||
|
--btn-bg: var(--neutral-900);
|
||||||
|
--btn-text: var(--neutral-50);
|
||||||
|
--btn-border: var(--neutral-900);
|
||||||
|
--btn-hover-bg: var(--neutral-700);
|
||||||
|
--btn-hover-border: var(--neutral-700);
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Calculator layout */
|
||||||
|
.calculator .preview, .calculator .result {
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--neutral-90);
|
||||||
|
border: 1px solid var(--neutral-700);
|
||||||
|
padding-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calculator .preview:focus, .calculator .preview:focus-visible { outline: none; }
|
||||||
|
.calculator, .buttonList {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
grid-template-rows: repeat(auto-fit, 1fr);
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
.calculator .buttonList {
|
||||||
|
grid-column: 1 / 5;
|
||||||
|
}
|
||||||
|
.calculator .preview, .calculator .result {
|
||||||
|
grid-column: 1 / 5;
|
||||||
|
height: 58px;
|
||||||
|
}
|
||||||
|
.calculator .btn-reset {
|
||||||
|
grid-column: 4;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Addon Store */
|
||||||
|
.addon-store-link {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
}
|
||||||
|
.addon-store-wrapper h1 {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
}
|
||||||
|
.addon-list {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, 170px);
|
||||||
|
gap: .8rem;
|
||||||
|
padding: .8rem 0;
|
||||||
|
}
|
||||||
|
.addon-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: start;
|
||||||
|
border: 1px solid grey;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 1rem .8rem;
|
||||||
|
gap: .8rem;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.addon-card .addon-name {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
.addon-card .install-btn {
|
||||||
|
margin-top: .6rem;
|
||||||
|
align-self: end
|
||||||
|
}
|
||||||
133
src/themes/default/default-light.css
Normal file
133
src/themes/default/default-light.css
Normal file
|
|
@ -0,0 +1,133 @@
|
||||||
|
:root {
|
||||||
|
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
line-height: 1;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
color-scheme: light;
|
||||||
|
color: var(--neutral-950);
|
||||||
|
background-color: var(--neutral-100);
|
||||||
|
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
#root {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
:focus:focus-visible {
|
||||||
|
outline: 2px solid rgb(90, 90, 215);
|
||||||
|
outline-offset: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--secondary-600);
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: var(--secondary-500);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
min-width: 320px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3.2em;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
border-radius: 999px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
font-size: 1.3em;
|
||||||
|
background-color: var(--btn-bg, var(--neutral-200));
|
||||||
|
border-color: var(--btn-border, var(--neutral-200));
|
||||||
|
color: var(--btn-text, var(--neutral-400));
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.25s, color 0.25s, border-color 0.25s;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
line-height: 1;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.btn:hover, .btn:focus {
|
||||||
|
background-color: var(--btn-hover-bg, var(--btn-bg, var(--neutral-300)));
|
||||||
|
color: var(--btn-hover-text, var(--btn-text, var(--neutral-500)));
|
||||||
|
border-color: var(--btn-hover-border, var(--btn-border, var(--neutral-300)));
|
||||||
|
}
|
||||||
|
.btn-calculate, .btn-primary {
|
||||||
|
--btn-bg: var(--primary-500);
|
||||||
|
--btn-text: var(--primary-100);
|
||||||
|
--btn-border: var(--primary-500);
|
||||||
|
--btn-hover-bg: var(--primary-600);
|
||||||
|
--btn-hover-border: var(--primary-600);
|
||||||
|
}
|
||||||
|
.btn-secondary {
|
||||||
|
--btn-bg: var(--secondary-500);
|
||||||
|
--btn-text: var(--secondary-100);
|
||||||
|
--btn-border: var(--secondary-500);
|
||||||
|
--btn-hover-bg: var(--secondary-600);
|
||||||
|
--btn-hover-border: var(--secondary-600);
|
||||||
|
}
|
||||||
|
.btn-neutral-light {
|
||||||
|
--btn-bg: var(--neutral-700);
|
||||||
|
--btn-text: var(--neutral-100);
|
||||||
|
--btn-border: var(--neutral-700);
|
||||||
|
--btn-hover-bg: var(--neutral-900);
|
||||||
|
--btn-hover-border: var(--neutral-900);
|
||||||
|
}
|
||||||
|
|
||||||
|
.calculator .preview {
|
||||||
|
border-radius: 999px;
|
||||||
|
background: var(--neutral-90);
|
||||||
|
border: 1px solid var(--neutral-700);
|
||||||
|
padding-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Calculator layout */
|
||||||
|
.calculator .preview:focus, .calculator .preview:focus-visible { outline: none; }
|
||||||
|
.calculator {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
grid-template-rows: repeat(auto-fit, 1fr);
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
.calculator .preview {
|
||||||
|
grid-column: 1 / 4;
|
||||||
|
}
|
||||||
|
.calculator .btn-calculate {
|
||||||
|
grid-column: 4;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
.calculator {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(5, 1fr);
|
||||||
|
grid-template-rows: repeat(auto-fit, 1fr);
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
.calculator .preview {
|
||||||
|
grid-column: 1 / 5;
|
||||||
|
}
|
||||||
|
.calculator .btn-calculate {
|
||||||
|
grid-column: 5;
|
||||||
|
}"/
|
||||||
|
|
||||||
|
/** Addon Store */
|
||||||
|
.addon-store-link {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 1rem;
|
||||||
|
right: 1rem;
|
||||||
|
}
|
||||||
37
src/themes/default/tokens.css
Normal file
37
src/themes/default/tokens.css
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
:root {
|
||||||
|
--neutral-50: #f6f6f6;
|
||||||
|
--neutral-100: #e7e7e7;
|
||||||
|
--neutral-200: #d1d1d1;
|
||||||
|
--neutral-300: #b0b0b0;
|
||||||
|
--neutral-400: #888888;
|
||||||
|
--neutral-500: #6d6d6d;
|
||||||
|
--neutral-600: #5d5d5d;
|
||||||
|
--neutral-700: #4f4f4f;
|
||||||
|
--neutral-800: #454545;
|
||||||
|
--neutral-900: #3d3d3d;
|
||||||
|
--neutral-950: #1a1a1a;
|
||||||
|
|
||||||
|
--primary-50: #fffaec;
|
||||||
|
--primary-100: #fff4d3;
|
||||||
|
--primary-200: #ffe5a5;
|
||||||
|
--primary-300: #ffd16d;
|
||||||
|
--primary-400: #ffb232;
|
||||||
|
--primary-500: #ff980a;
|
||||||
|
--primary-600: #ff8000;
|
||||||
|
--primary-700: #cc5d02;
|
||||||
|
--primary-800: #a1480b;
|
||||||
|
--primary-900: #823d0c;
|
||||||
|
--primary-950: #461d04;
|
||||||
|
|
||||||
|
--secondary-50: #ecf2ff;
|
||||||
|
--secondary-100: #dde6ff;
|
||||||
|
--secondary-200: #c2d1ff;
|
||||||
|
--secondary-300: #9cb1ff;
|
||||||
|
--secondary-400: #7586ff;
|
||||||
|
--secondary-500: #646cff;
|
||||||
|
--secondary-600: #3b36f5;
|
||||||
|
--secondary-700: #322ad8;
|
||||||
|
--secondary-800: #2925ae;
|
||||||
|
--secondary-900: #262689;
|
||||||
|
--secondary-950: #181650;
|
||||||
|
}
|
||||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
/// <reference types="vite/client" />
|
||||||
26
tsconfig.app.json
Normal file
26
tsconfig.app.json
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "Bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
24
tsconfig.node.json
Normal file
24
tsconfig.node.json
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
"target": "ES2022",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "Bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
7
vite.config.ts
Normal file
7
vite.config.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
})
|
||||||
Loading…
Reference in a new issue