Skip to content

Commit 3be4cda

Browse files
designDefineddesignDefined
committed
wip
1 parent 9ea219b commit 3be4cda

56 files changed

Lines changed: 1559 additions & 24 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎frontend/design/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎frontend/design/README.md‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
# React + TypeScript + Vite
2+
3+
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4+
5+
Currently, two official plugins are available:
6+
7+
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
8+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9+
10+
## Expanding the ESLint configuration
11+
12+
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
13+
14+
```js
15+
export default tseslint.config([
16+
globalIgnores(['dist']),
17+
{
18+
files: ['**/*.{ts,tsx}'],
19+
extends: [
20+
// Other configs...
21+
22+
// Remove tseslint.configs.recommended and replace with this
23+
...tseslint.configs.recommendedTypeChecked,
24+
// Alternatively, use this for stricter rules
25+
...tseslint.configs.strictTypeChecked,
26+
// Optionally, add this for stylistic rules
27+
...tseslint.configs.stylisticTypeChecked,
28+
29+
// Other configs...
30+
],
31+
languageOptions: {
32+
parserOptions: {
33+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
34+
tsconfigRootDir: import.meta.dirname,
35+
},
36+
// other options...
37+
},
38+
},
39+
])
40+
```
41+
42+
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
43+
44+
```js
45+
// eslint.config.js
46+
import reactX from 'eslint-plugin-react-x'
47+
import reactDom from 'eslint-plugin-react-dom'
48+
49+
export default tseslint.config([
50+
globalIgnores(['dist']),
51+
{
52+
files: ['**/*.{ts,tsx}'],
53+
extends: [
54+
// Other configs...
55+
// Enable lint rules for React
56+
reactX.configs['recommended-typescript'],
57+
// Enable lint rules for React DOM
58+
reactDom.configs.recommended,
59+
],
60+
languageOptions: {
61+
parserOptions: {
62+
project: ['./tsconfig.node.json', './tsconfig.app.json'],
63+
tsconfigRootDir: import.meta.dirname,
64+
},
65+
// other options...
66+
},
67+
},
68+
])
69+
```

‎frontend/design/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React + TS</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/_preview/main.tsx"></script>
12+
</body>
13+
</html>

‎frontend/design/package.json‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "design",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"exports": {
7+
"./style/**/*": "./src/style/**/*",
8+
"./component/action": "./src/component/action/index.ts",
9+
"./component/input": "./src/component/input/index.ts",
10+
"./component/surface": "./src/component/surface/index.ts"
11+
},
12+
"scripts": {
13+
"dev": "vite",
14+
"build": "tsc -b && vite build",
15+
"lint": "eslint .",
16+
"preview": "vite preview"
17+
},
18+
"dependencies": {
19+
"@flexive/core": "^0.6.0",
20+
"@radix-ui/colors": "^3.0.0",
21+
"react": "^19.1.0",
22+
"react-dom": "^19.1.0",
23+
"types": "workspace:*"
24+
},
25+
"devDependencies": {
26+
"@types/node": "^24.1.0",
27+
"@types/react": "^19.1.8",
28+
"@types/react-dom": "^19.1.6",
29+
"@vitejs/plugin-react": "^4.6.0",
30+
"sass-embedded": "^1.89.2",
31+
"typescript": "^5",
32+
"vite": "^7.0.4"
33+
}
34+
}

‎frontend/design/src/_preview/App.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Main } from "@flexive/core";
2+
3+
import { Button } from "../component/action";
4+
import { Card } from "../component/surface/Card";
5+
6+
export function App() {
7+
return (
8+
<Main sizeC="100vw" sizeM="100vh" alignC alignM g={16}>
9+
<Button p={12} rad={8}>
10+
Hello!
11+
</Button>
12+
<Card sizeC={120} sizeM={120} alignC alignM rad={12}>
13+
World
14+
</Card>
15+
</Main>
16+
);
17+
}

‎frontend/design/src/_preview/main.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import "../style/index.css";
2+
3+
import { StrictMode } from "react";
4+
import { createRoot } from "react-dom/client";
5+
6+
import { App } from "./App";
7+
8+
const root = document.getElementById("root");
9+
10+
if (!root) {
11+
throw new Error("Root element not found");
12+
}
13+
14+
createRoot(root).render(
15+
<StrictMode>
16+
<App />
17+
</StrictMode>,
18+
);

‎frontend/design/src/asset/font/sans/FreesentationVF.ttf‎

6.65 MB
Binary file not shown.

‎frontend/design/src/asset/font/sans/index.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@font-face {
2+
font-family: "FreesentationVf";
3+
src: url("./FreesentationVf.ttf") format("truetype");
4+
}

‎frontend/design/src/component/action/Button/index.module.scss‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
@use "../../../utility/state";
2+
3+
.Button {
4+
--border: none;
5+
--background: var(--c-1-9);
6+
--shadow: 0 2px 4px var(--c-1-8);
7+
--content: var(--c-0-2);
8+
9+
border: var(--border);
10+
background: var(--background);
11+
box-shadow: var(--shadow);
12+
color: var(--content);
13+
14+
user-select: none;
15+
transition: all 0.1s ease-in-out;
16+
17+
@include state.hover() {
18+
--background: var(--c-1-11);
19+
--shadow: 0 2px 8px var(--c-1-6);
20+
}
21+
@include state.active() {
22+
--background: var(--c-1-8);
23+
--shadow: 0 2px 2px var(--c-1-3);
24+
}
25+
@include state.disabled() {
26+
--background: var(--c-0-8) !important;
27+
--shadow: none !important;
28+
--content: var(--c-0-2) !important;
29+
}
30+
}
31+
32+
// .Button {
33+
// --c-border: none;
34+
// --c-background: var(--c-1-9);
35+
// --c-shadow: 0 0 5px var(--c-1-7);
36+
// --c-content: var(--c-0-2);
37+
// border: var(--c-border);
38+
// background: var(--c-background);
39+
// box-shadow: var(--c-shadow);
40+
// color: var(--c-content);
41+
42+
// &.pointable {
43+
// &:hover,
44+
// &.hover {
45+
// --c-background: var(--c-1-10);
46+
// --c-shadow: 0 0 5px var(--c-1-5);
47+
// }
48+
49+
// &:active,
50+
// &.active {
51+
// --c-background: var(--c-1-11);
52+
// --c-shadow: 0 0 2px var(--c-1-3);
53+
// --c-content: var(--c-0-5);
54+
// }
55+
// }
56+
57+
// &.checkable {
58+
// --c-background: var(--c-0-4);
59+
// --c-shadow: 0 0 2px var(--c-0-5);
60+
// --c-content: var(--c-0-9);
61+
62+
// &.pointable {
63+
// &:hover,
64+
// &.hover {
65+
// --c-background: var(--c-1-5);
66+
// --c-shadow: 0 0 3px var(--c-1-5);
67+
// --c-content: var(--c-0-2);
68+
// }
69+
70+
// &:active,
71+
// &.active {
72+
// --c-background: var(--c-1-10);
73+
// --c-shadow: 0 0 2px var(--c-1-3);
74+
// --c-content: var(--c-0-4);
75+
// }
76+
// }
77+
78+
// &:checked,
79+
// &.checked {
80+
// --c-background: var(--c-1-9);
81+
// --c-shadow: 0 0 5px var(--c-1-7);
82+
// --c-content: var(--c-0-1);
83+
84+
// &.pointable {
85+
// &:hover,
86+
// &.hover {
87+
// --c-background: var(--c-1-10);
88+
// --c-shadow: 0 0 3px var(--c-1-5);
89+
// --c-content: var(--c-0-2);
90+
// }
91+
92+
// &:active,
93+
// &.active {
94+
// --c-background: var(--c-1-11);
95+
// --c-shadow: 0 0 2px var(--c-1-3);
96+
// --c-content: var(--c-0-4);
97+
// }
98+
// }
99+
// }
100+
// }
101+
102+
// &.disablable {
103+
// &:disabled,
104+
// &.disabled {
105+
// --c-background: var(--c-0-8) !important;
106+
// --c-shadow: none !important;
107+
// --c-content: var(--c-0-2) !important;
108+
// }
109+
// }
110+
// }

‎frontend/design/src/component/action/Button/index.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { bindCSS, Button as FButton, type PropsOf } from "@flexive/core";
2+
import type { Ref } from "react";
3+
4+
import type { InteractionState } from "../../../style/state/state.types";
5+
import { cs } from "../../../utility/classnames";
6+
import styles from "./index.module.scss";
7+
8+
const cx = bindCSS(styles);
9+
10+
interface ButtonProps extends PropsOf<"button"> {
11+
ref?: Ref<HTMLButtonElement>;
12+
state?: Omit<InteractionState, "data" | "validation" | "on" | "dirty">;
13+
}
14+
15+
const Button = ({ ref, className, state, ...props }: ButtonProps) => {
16+
return (
17+
<FButton
18+
ref={ref}
19+
className={cx("Button", cs(state), "tomato-1", "ruby-2", className)}
20+
{...props}
21+
/>
22+
);
23+
};
24+
25+
export { Button };
26+
export type { ButtonProps };

0 commit comments

Comments
 (0)