library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-10-17 09:04:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Init Customizer

Browse Source
This commit is contained in:
Jeremy Thomas 2024-06-24 01:08:40 +01:00
parent 74c01f42d1
commit 7d92a2b872
12 changed files with 4619 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
docs/_react/bulma-customizer/.eslintrc.cjs Normal file
View File

@ -0,0 +1,21 @@
module.exports = {
root: true,
env: { browser: true, es2020: true },
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended',
],
ignorePatterns: ['dist', '.eslintrc.cjs'],
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
settings: { react: { version: '18.2' } },
plugins: ['react-refresh'],
rules: {
'react/jsx-no-target-blank': 'off',
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
}

24
docs/_react/bulma-customizer/.gitignore vendored Normal file
View 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?

8
docs/_react/bulma-customizer/README.md Normal file
View File

@ -0,0 +1,8 @@
# React + 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

13
docs/_react/bulma-customizer/index.html Normal file
View 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</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

4309
docs/_react/bulma-customizer/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

26
docs/_react/bulma-customizer/package.json Normal file
View File

@ -0,0 +1,26 @@
{
"name": "bulma-customizer",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@vitejs/plugin-react": "^4.3.1",
"eslint": "^8.57.0",
"eslint-plugin-react": "^7.34.2",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-react-refresh": "^0.4.7",
"vite": "^5.3.1"
}
}

0
docs/_react/bulma-customizer/src/App.css Normal file
View File

64
docs/_react/bulma-customizer/src/App.jsx Normal file
View File

@ -0,0 +1,64 @@
import { useEffect, useState } from "react";
import "../../../../css/bulma.css";
import "./App.css";
import Slider from "./components/Slider";
const KEYS = ["scheme-h", "primary-h", "primary-s", "primary-l"];
const UNITS = ["deg", "rem", "em", "%"];
function App() {
const [vars, setVars] = useState([]);
useEffect(() => {
const rootStyle = window.getComputedStyle(document.documentElement);
const cssvars = KEYS.map((key) => {
const original = rootStyle.getPropertyValue(`--bulma-${key}`);
const unit = UNITS.find((unit) => original.endsWith(unit)) || "";
const value = unit !== "" ? original.split(unit)[0] : original;
return {
id: key,
original,
unit,
start: Number(value),
};
});
setVars(cssvars);
}, []);
console.log("ZLOG vars", vars);
return (
<section className="section">
<div className="card">
<div className="card-content">
{vars.map((v) => {
const { id, original, unit, start } = v;
return (
<div key={id} className="block">
<Slider id={id} original={original} start={start} unit={unit} />
</div>
);
})}
<div className="buttons">
<button className="button">Button</button>
<button className="button is-primary">Primary</button>
<button className="button is-link">Link</button>
<button className="button is-info">Info</button>
<button className="button is-success">Success</button>
<button className="button is-warning">Warning</button>
<button className="button is-danger">Danger</button>
</div>
</div>
</div>
</section>
);
}
export default App;

70
docs/_react/bulma-customizer/src/components/Slider.jsx Normal file
View File

@ -0,0 +1,70 @@
import { useEffect, useState } from "react";
import PropTypes from "prop-types";
const RANGES = {
deg: [0, 360, 1],
"%": [0, 100, 1],
};
function Slider({ id, start, unit }) {
const [value, setValue] = useState(start);
let min = 0;
let max = 360;
let step = 1;
if (unit in RANGES) {
[min, max, step] = RANGES[unit];
}
const handleChange = (event) => {
setValue(event.target.value);
};
const handleReset = () => {
setValue(start);
};
useEffect(() => {
const computedValue = `${value}${unit}`;
if (value === start) {
document.documentElement.style.removeProperty(`--bulma-${id}`);
} else {
document.documentElement.style.setProperty(
`--bulma-${id}`,
computedValue,
);
}
}, [id, start, unit, value]);
return (
<div>
<code>{id}</code>
<input
type="range"
min={min}
max={max}
step={step}
value={value}
onChange={handleChange}
/>
<code>
{value}
{unit}
</code>
<button className="button is-small" onClick={handleReset}>
Reset
</button>
</div>
);
}
Slider.propTypes = {
id: PropTypes.string,
original: PropTypes.string,
start: PropTypes.number,
unit: PropTypes.string,
};
export default Slider;

68
docs/_react/bulma-customizer/src/index.css Normal file
View File

@ -0,0 +1,68 @@
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}

9
docs/_react/bulma-customizer/src/main.jsx Normal file
View File

@ -0,0 +1,9 @@
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<App />
</React.StrictMode>,
);

7
docs/_react/bulma-customizer/vite.config.js Normal file
View File

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})