steffo/bluelib
steffo/bluelib
1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-12-22 11:34:21 +00:00
Code Activity

0.13.0

Browse source
This commit is contained in:
Steffo 2020-06-24 22:24:57 +02:00
parent 1b6482567c
commit cc6063dd93
Signed by: steffo
GPG key ID: 896A80F55F7C97F0
43 changed files with 321 additions and 263 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
docs/assets/icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 50 KiB

1
docs/bundle.3fcfd.css Normal file
View file

File diff suppressed because one or more lines are too long

3
docs/bundle.b78fb.js Normal file
View file

File diff suppressed because one or more lines are too long

1
docs/bundle.b78fb.js.LICENSE.txt Normal file
View file

@ -0,0 +1 @@
/*! showdown v 1.9.1 - 02-11-2019 */

1
docs/bundle.b78fb.js.map Normal file
View file

File diff suppressed because one or more lines are too long

3
docs/bundle.e576f.esm.js Normal file
View file

File diff suppressed because one or more lines are too long

1
docs/bundle.e576f.esm.js.LICENSE.txt Normal file
View file

@ -0,0 +1 @@
/*! For license information please see bundle.e576f.esm.js.LICENSE.txt */

1
docs/bundle.e576f.esm.js.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sources":[],"names":[],"mappings":"","file":"bundle.e576f.esm.js","sourceRoot":""}

1
docs/index.html Normal file
View file

@ -0,0 +1 @@
<!DOCTYPE html><html lang="it"><head><meta charset="utf-8"><title>bluelib</title><meta name="viewport" content="width=device-width,initial-scale=1"><style>body{background-color:#0d193b;color:#a0ccff}</style><link rel="manifest" href="/manifest.json"><link href="/bundle.3fcfd.css" rel="preload" as="style" onload="this.rel='stylesheet'"><noscript><link rel="stylesheet" href="/bundle.3fcfd.css"></noscript></head><body><script type="__PREACT_CLI_DATA__">{"preRenderData":{"url":"/"}}</script><script nomodule="">!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script><script crossorigin="anonymous" src="/bundle.e576f.esm.js" type="module"></script><script nomodule="" src="/polyfills.ac517.js"></script><script nomodule="" defer="defer" src="/bundle.b78fb.js"></script></body></html>

14
docs/manifest.json Normal file
View file

@ -0,0 +1,14 @@
{
"name": "preact-cli app",
"start_url": "/",
"display": "standalone",
"background_color": "#fff",
"theme_color": "#673ab8",
"icons": [
{
"src": "/assets/icon.png",
"type": "image/png",
"sizes": "512x512"
}
]
}

2
docs/polyfills.45ce9.esm.js Normal file
View file

File diff suppressed because one or more lines are too long

1
docs/polyfills.45ce9.esm.js.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sources":[],"names":[],"mappings":"","file":"polyfills.45ce9.esm.js","sourceRoot":""}

2
docs/polyfills.ac517.js Normal file
View file

File diff suppressed because one or more lines are too long

1
docs/polyfills.ac517.js.map Normal file
View file

File diff suppressed because one or more lines are too long

1
docs/preact_prerender_data.json Normal file
View file

@ -0,0 +1 @@
{"url":"/"}

1
docs/push-manifest.json Normal file
View file

@ -0,0 +1 @@
{"/":{"bundle.3fcfd.css":{"type":"style","weight":1},"bundle.e576f.esm.js":{"type":"script","weight":1}},"/Sample":{"bundle.3fcfd.css":{"type":"style","weight":1},"bundle.e576f.esm.js":{"type":"script","weight":1},"route-Sample.chunk.06577.esm.js":{"type":"script","weight":0.9},"route-Sample.chunk.6e286.css":{"type":"style","weight":0.9}}}

2
docs/route-Sample.chunk.06577.esm.js Normal file
View file

File diff suppressed because one or more lines are too long

1
docs/route-Sample.chunk.06577.esm.js.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sources":[],"names":[],"mappings":"","file":"route-Sample.chunk.06577.esm.js","sourceRoot":""}

2
docs/route-Sample.chunk.25b5f.js Normal file
View file

File diff suppressed because one or more lines are too long

1
docs/route-Sample.chunk.25b5f.js.map Normal file
View file

File diff suppressed because one or more lines are too long

1
docs/route-Sample.chunk.6e286.css Normal file
View file

@ -0,0 +1 @@
@keyframes flipping__2QwVZ{0%{transform:rotateY(0)}to{transform:rotateY(-1turn)}}.flipping__2QwVZ{animation:flipping__2QwVZ 2s cubic-bezier(.65,.05,.36,1) infinite}

21
docs/sw-debug.js Normal file
View file

@ -0,0 +1,21 @@
self.addEventListener('fetch', function(event) {
var isPostRequest = event.request.method === 'POST';
event.respondWith(
fetch(event.request).catch(function(err) {
if (err instanceof TypeError) {
if (isPostRequest) {
// eslint-disable-next-line
console.log(
'⚛️Preact CLI development tip: A POST request just failed. This might fail for your users as well due to a network error. It may be worth exploring the backgroundSync API.'
);
} else {
// eslint-disable-next-line
console.log(
'⚛️Preact CLI development tip: A GET request just failed. This might fail for your users as well due to a network error. It may be worth adding runtimeCaching to your Service Worker.'
);
}
}
return err;
})
);
});

2
docs/sw-esm.js Normal file
View file

File diff suppressed because one or more lines are too long

1
docs/sw-esm.js.map Normal file
View file

File diff suppressed because one or more lines are too long

2
docs/sw.js Normal file
View file

File diff suppressed because one or more lines are too long

1
docs/sw.js.map Normal file
View file

File diff suppressed because one or more lines are too long

7
package.json
View file

@ -1,7 +1,7 @@
{
"private": false,
"name": "bluelib",
"version": "0.12.6",
"version": "0.13.0",
"license": "AGPL-3.0-or-later",
"source": "src/index.js",
"main": "dist/index.js",
@ -12,7 +12,10 @@
],
"scripts": {
"start": "preact watch",
"dist": "git add . && cross-env-shell git commit -m \"$npm_package_version\" && git push && microbundle && npm publish && cross-env-shell hub release create -m \"$npm_package_version\" \"$npm_package_version\""
"dist": "git add . && cross-env-shell git commit -m \"$npm_package_version\" && git push && microbundle && npm publish && cross-env-shell hub release create -m \"$npm_package_version\" \"$npm_package_version\"",
"build": "preact build --template src/template.html --no-prerender --dest docs && git add docs",
"ghpages": "npm run build && git add . && cross-env-shell git commit -m \"$npm_package_version\" && git push && cross-env-shell hub release create -m \"$npm_package_version\" \"$npm_package_version\"",
"both": "npm run ghpages && npm run dist"
},
"devDependencies": {
"cross-env": "^7.0.2",

7
preact.config.js
View file

@ -1,3 +1,6 @@
const DefinePlugin = require("webpack/lib/DefinePlugin");
export default function (config, env, helpers) {
config.module.rules[4].include = [env.source(".")]
config.module.rules[5].exclude = [env.source(".")]
@ -6,4 +9,8 @@ export default function (config, env, helpers) {
config.resolve.alias["react"] = "preact/compat";
// noinspection JSUnresolvedVariable
config.resolve.alias["react-dom"] = "preact/compat";
config.plugins.push(
new DefinePlugin({"process.env.RELEASE": `"${process.env.npm_package_version}"`})
);
};

17
src/components/Forms/FormButton.js Normal file
View file

@ -0,0 +1,17 @@
import ValidityStatus from "../Enums/ValidityStatus";
import FormRow from "./FormRow";
import style from "./FormRow.less"
export default function (props) {
return (
<FormRow validity={props.validity} label={props.label} icon={props.icon}>
<button
class={style.contentschild}
onClick={(props.disabled && props.validity.validity === ValidityStatus.DISABLED) ? null : props.onClick}
disabled={props.validity ? props.validity.validity === ValidityStatus.DISABLED : false}
>
{props.children}
</button>
</FormRow>
);
}

17
src/components/Forms/FormInput.js Normal file
View file

@ -0,0 +1,17 @@
import FormRow from "./FormRow";
import ValidityStatus from "../Enums/ValidityStatus";
import style from "./FormRow.less"
export default function (props) {
return (
<FormRow validity={props.validity} label={props.label} icon={props.icon}>
<input
class={style.contentschild}
type={props.type}
value={props.value}
onChange={props.onChange}
disabled={props.validity ? props.validity.validity === ValidityStatus.DISABLED : false}
name={props.name}/>
</FormRow>
);
}

20
src/components/Forms/FormRow.js Normal file
View file

@ -0,0 +1,20 @@
import {concatClass} from "../../index";
import style from "./FormRow.less";
import theme from "../../styles/theme.less"
import ValidityStatus from "../Enums/ValidityStatus";
export default function (props) {
return (
<label
className={concatClass(style.label, theme[props.validity ? props.validity.validity : ValidityStatus.NONE])}>
<div className={style.text}>{props.label}</div>
<div className={style.icon}>{props.icon}</div>
<div className={style.contents}>
{props.children}
</div>
<div className={style.message}>
{props.validity ? props.validity.message : ""}
</div>
</label>
);
}

43
src/components/Forms/FormRow.less Normal file
View file

@ -0,0 +1,43 @@
@import "../../styles/constants.less";
.label {
width: 100%;
margin-top: 2px;
margin-bottom: 2px;
display: grid;
align-items: center;
grid-template-columns: 120px 24px auto;
grid-column-gap: 2px;
}
.text {
text-align: right;
grid-column: 1;
grid-row: 1;
}
.icon {
text-align: center;
grid-column: 2;
grid-row: 1;
}
.contents {
grid-column: 3;
grid-row: 1;
}
.message {
font-size: x-small;
grid-column: 3;
grid-row: 2;
}
.contentschild {
width: 100%;
}

24
src/components/Layout/HButton.js
View file

@ -1,24 +0,0 @@
import style from './HButton.less';
import {concatClass} from "../../index";
import ValidityStatus from "../Enums/ValidityStatus";
export default function (props) {
return (
<label class={concatClass(style.label, style[props.validity ? props.validity.validity : ValidityStatus.NONE])}>
<div class={style.grid}>
<div class={style.text}>{props.label}</div>
<div class={style.icon}>{props.icon}</div>
<button
onClick={(props.disabled && props.validity.validity === ValidityStatus.DISABLED) ? null : props.onClick}
class={style.button}
disabled={props.validity ? props.validity.validity === ValidityStatus.DISABLED : false}
>
{props.children}
</button>
<div className={style.message}>
{props.validity ? props.validity.message : ""}
</div>
</div>
</label>
);
}

81
src/components/Layout/HButton.less
View file

@ -1,81 +0,0 @@
@import "../../styles/constants.less";
.label {
width: 100%;
}
.grid {
margin-top: 2px;
margin-bottom: 2px;
display: grid;
align-items: center;
grid-template-columns: 120px 24px auto;
grid-column-gap: 2px;
}
.text {
text-align: right;
grid-column: 1;
grid-row: 1;
}
.icon {
text-align: center;
grid-column: 2;
grid-row: 1;
}
.button {
grid-column: 3;
grid-row: 1;
}
.message {
font-size: x-small;
grid-column: 3;
grid-row: 2;
}
.ok {
color: @validfg;
input[type="text"], input[type="password"] {
color: @validfg !important;
border-color: fade(@validfg, 10%) !important;
background-color: @validbg !important;
}
}
.warning {
color: @warningfg;
input[type="text"], input[type="password"] {
color: @warningfg !important;
border-color: fade(@warningfg, 10%) !important;
background-color: @warningbg !important;
}
}
.error {
color: @invalidfg;
input[type="text"], input[type="password"] {
color: @invalidfg !important;
border-color: fade(@invalidfg, 10%) !important;
background-color: @invalidbg !important;
}
}
.disabled {
color: @disabledfg;
input[type="text"], input[type="password"] {
color: @disabledfg !important;
border-color: fade(@disabledfg, 10%) !important;
background-color: @disabledbg !important;
}
}

21
src/components/Layout/HInput.js
View file

@ -1,21 +0,0 @@
import style from './HInput.less';
import {concatClass} from "../../index";
import ValidityStatus from "../Enums/ValidityStatus";
export default function (props) {
return (
<label class={concatClass(style.label, style[props.validity ? props.validity.validity : ValidityStatus.NONE])}>
<div class={style.grid}>
<div className={style.text}>{props.label}</div>
<div className={style.icon}>{props.icon}</div>
<input
className={style.input}
type={props.type} value={props.value}
onChange={props.onChange} disabled={props.validity ? props.validity.validity === ValidityStatus.DISABLED : false} name={props.name}/>
<div className={style.message}>
{props.validity ? props.validity.message : ""}
</div>
</div>
</label>
);
}

81
src/components/Layout/HInput.less
View file

@ -1,81 +0,0 @@
@import "../../styles/constants.less";
.label {
width: 100%;
}
.grid {
margin-top: 2px;
margin-bottom: 2px;
display: grid;
align-items: center;
grid-template-columns: 120px 24px auto;
grid-column-gap: 2px;
}
.text {
text-align: right;
grid-column: 1;
grid-row: 1;
}
.icon {
text-align: center;
grid-column: 2;
grid-row: 1;
}
.input {
grid-column: 3;
grid-row: 1;
}
.message {
font-size: x-small;
grid-column: 3;
grid-row: 2;
}
.ok {
color: @validfg;
input[type="text"], input[type="password"] {
color: @validfg !important;
border-color: fade(@validfg, 10%) !important;
background-color: @validbg !important;
}
}
.warning {
color: @warningfg;
input[type="text"], input[type="password"] {
color: @warningfg !important;
border-color: fade(@warningfg, 10%) !important;
background-color: @warningbg !important;
}
}
.error {
color: @invalidfg;
input[type="text"], input[type="password"] {
color: @invalidfg !important;
border-color: fade(@invalidfg, 10%) !important;
background-color: @invalidbg !important;
}
}
.disabled {
color: @disabledfg;
input[type="text"], input[type="password"] {
color: @disabledfg !important;
border-color: fade(@disabledfg, 10%) !important;
background-color: @disabledbg !important;
}
}

10
src/index.js
View file

@ -7,8 +7,9 @@ import TablePanel from "./components/Panels/TablePanel";
import Timer from "./components/Elements/Timer";
import Todo from "./components/Elements/Todo";
import HInput from "./components/Layout/HInput";
import HButton from "./components/Layout/HButton";
import FormRow from "./components/Forms/FormRow";
import FormInput from "./components/Forms/FormInput";
import FormButton from "./components/Forms/FormButton";
import Split from "./components/Layout/Split";
import BLatex from "./components/Rendering/BLatex";
@ -54,8 +55,9 @@ export {
Timer,
Todo,
HInput,
HButton,
FormRow,
FormInput,
FormButton,
Split,
BLatex,

61
src/routes/Sample.js
View file

@ -1,21 +1,31 @@
import theme from "../styles/theme.less";
import HInput from "../components/Layout/HInput";
import FormInput from "../components/Forms/FormInput";
import FormButton from "../components/Forms/FormButton";
import Box, {BoxColors} from "../components/Panels/Box";
import {faYoutube} from "@fortawesome/free-brands-svg-icons";
import {Code, Panel, Split} from "../index";
import {faXbox} from "@fortawesome/free-brands-svg-icons";
import {Code, Panel} from "../index";
import Section from "../components/Panels/Section";
import Image from "../components/Elements/Image";
import HButton from "../components/Layout/HButton";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faCheck, faCircle, faCross, faExclamationTriangle, faSpinner} from "@fortawesome/free-solid-svg-icons";
import {
faAddressCard,
faBug,
faCheck,
faCircle,
faCross,
faExclamationTriangle, faHouseUser,
faRadiation,
faSpinner
} from "@fortawesome/free-solid-svg-icons";
import ValidityStatus from "../components/Enums/ValidityStatus";
import style from "./Sample.less";
export default function (props) {
return (
<div class={theme.bluelib}>
<h1>
bluelib
bluelib {process.env.RELEASE}
</h1>
<Section title={"Panels"}>
<Panel title={"Default"}>
@ -81,36 +91,47 @@ export default function (props) {
</Panel>
</Section>
<Section title={"Forms"}>
<Panel title={"HInputs"}>
<HInput type={"text"} label={"Username"}/>
<HInput type={"password"} label={"Password"}/>
<HInput type={"text"} label={"Caricamento"} icon={<FontAwesomeIcon icon={faSpinner} pulse={true}/>} validity={{
<Panel title={"FormInputs"}>
<FormInput type={"text"} name={"username"} label={"Username"}/>
<FormInput type={"password"} label={"Password"}/>
<FormInput type={"text"} label={"Caricamento"} icon={<FontAwesomeIcon icon={faSpinner} pulse={true}/>} validity={{
validity: ValidityStatus.DISABLED,
message: "Take your time..."
message: [<FontAwesomeIcon icon={faAddressCard} className={style.flipping}/>, " Take your time..."]
}}/>
<HInput type={"text"} label={"OK!"} icon={<FontAwesomeIcon icon={faCheck}/>} validity={{
<FormInput type={"text"} label={"OK!"} icon={<FontAwesomeIcon icon={faCheck}/>} validity={{
validity: ValidityStatus.OK,
message: "",
}}/>
<HInput type={"text"} label={"È un angelo!"} icon={<FontAwesomeIcon icon={faExclamationTriangle}/>} validity={{
<FormInput type={"text"} label={"È un angelo!"} icon={<FontAwesomeIcon icon={faExclamationTriangle}/>} validity={{
validity: ValidityStatus.WARNING,
message: "",
}}/>
<HInput type={"text"} label={"Spinning Jesus"} icon={<FontAwesomeIcon icon={faCross} spin={true}/>} validity={{
<FormInput type={"text"} label={"Spinning Jesus"} icon={<FontAwesomeIcon icon={faCross} spin={true}/>} validity={{
validity: ValidityStatus.ERROR,
message: "",
}}/>
<HInput type={"text"} label={"Ur mom"} icon={<FontAwesomeIcon icon={faCircle}/>} validity={{
<FormInput type={"text"} label={"Ur mom"} icon={<FontAwesomeIcon icon={faCircle}/>} validity={{
validity: ValidityStatus.ERROR,
message: "ERROR: she is too fat for this input",
}}/>
</Panel>
<Panel title={"HButtons"}>
<Panel title={"FormButtons"}>
Ma quindi era tutto...
<HButton label={"...un bottone?"}>Lo è sempre stato.</HButton>
<HButton label={"...un Armageddon?"} validity={{
message: "ciaone"
}}>Lo è sempre stato.</HButton>
<FormButton label={"...un bottone?"}>Lo è sempre stato.</FormButton>
<FormButton label={"...disattivato?"} icon={<FontAwesomeIcon icon={faXbox}/>} validity={{
validity: ValidityStatus.DISABLED,
message: "pls w8 a sec"
}}>Sì.</FormButton>
<FormButton label={"...una città?"} icon={<FontAwesomeIcon icon={faHouseUser}/>} validity={{
validity: ValidityStatus.OK,
}}>Lucianina?</FormButton>
<FormButton label={"...miele?"} icon={<FontAwesomeIcon icon={faBug}/>} validity={{
validity: ValidityStatus.WARNING,
}}>Not the bees!</FormButton>
<FormButton label={"...un Helios?"} icon={<FontAwesomeIcon icon={faRadiation}/>} validity={{
validity: ValidityStatus.ERROR,
message: "ERROR: è finito il metallo",
}}>[AVVIA ANNICHILIMENTO]</FormButton>
</Panel>
</Section>
</div>

16
src/routes/Sample.less Normal file
View file

@ -0,0 +1,16 @@
@import "../styles/main.less";
:local {
@keyframes flipping {
0% {
transform: rotateY(0);
}
100% {
transform: rotateY(-360deg);
}
}
.flipping {
animation: flipping 2s cubic-bezier(.65,.05,.36,1) infinite;
}
}

11
src/styles/constants.less
View file

@ -24,15 +24,12 @@
@disabledfg: #808080;
@disabledbg: #1f1f1f;
@invalidfg: @red;
@invalidbg: #330e00;
@validfg: @lime;
@validbg: #00220c;
@okfg: @lime;
@okbg: #00220c;
@warningfg: @yellow;
@warningbg: #231c00;
@errorfg: @red;
@errorbg: #330e00;
@sans: "Arial", sans-serif;
@text: "Calibri", sans-serif;

2
src/styles/main.less Normal file
View file

@ -0,0 +1,2 @@
@import "constants.less";
@import "mixins.less";

27
src/styles/mixins.less Normal file
View file

@ -0,0 +1,27 @@
@import "constants.less";
.h(@hfg; @hbg) {
color: @hfg;
background-color: @hbg;
}
.hb(@hfg; @hbg) {
.h(@hfg; @hbg);
border: 1px solid fade(@hfg, 10%);
}
.hh(@hfg; @hbg) {
.hb(@hfg; @hbg);
&:hover, &.hover {
background-color: overlay(fade(@hfg, 10%), @hbg);
border: 1px solid @hfg;
color: @hfg;
}
&:active, &.active {
background-color: overlay(fade(@accent, 20%), @hbg);
border: 1px solid @accent;
color: @accent;
}
}

69
src/styles/theme.less
View file

@ -1,4 +1,5 @@
@import "constants.less";
@import "mixins.less";
.bluelib {
background-color: @bg;
@ -56,43 +57,67 @@
}
input[type="text"], input[type="password"] {
color: @fg;
background-color: @bg;
border: 1px solid @plusplus;
.hb(@fg; @bg);
border-radius: 4px;
padding: 4px;
font-size: medium;
&:disabled, &.disabled {
cursor: not-allowed;
}
}
button {
color: @fg;
background-color: @bg;
border: 1px solid @plusplus;
.hh(@fg, @bg);
border-radius: 4px;
padding: 4px;
font-size: medium;
&:hover, &.hover {
background-color: @plusplus;
border: 1px solid @fg;
color: @fg;
}
&:active, &.active {
background-color: fade(@accent, 20%);
border: 1px solid @accent;
color: @accent;
.ok {
color: @okfg;
input[type="text"], input[type="password"] {
.hb(@okfg; @okbg);
}
&:disabled, &.disabled {
button {
.hh(@okfg, @okbg);
}
}
.warning {
color: @warningfg;
input[type="text"], input[type="password"] {
.hb(@warningfg; @warningbg);
}
button {
.hh(@warningfg, @warningbg);
}
}
.error {
color: @errorfg;
input[type="text"], input[type="password"] {
.hb(@errorfg; @errorbg);
}
button {
.hh(@errorfg; @errorbg);
}
}
.disabled {
color: @disabledfg;
background-color: @disabledbg;
border-style: dotted;
cursor: not-allowed;
input[type="text"], input[type="password"] {
.hb(@disabledfg; @disabledbg);
}
button {
.hb(@disabledfg, @disabledbg);
}
}