@joloh/jspattern
v1.0.70
Published
A module for js project using classes and design patterns. Has it's own state manager and redux kind provider, update ui like react useEffect, No html except the index.html file
Downloads
18
Maintainers
jolohReadme
How To Use
**INSTALL WITH NPM or YARN **
npm install @joloh/jspatternor
yarn add @joloh/jspattern*** With auto-reload. Thanks to design patterns**
HTML Components
- Figure
- Form
- Header
- Table
- Canvas
- TableHeader
- TableBody
- TableFooter
- TableHead
- TableRow
- DataCell
- Icon
- Image
- Input
- Paragraph
- Section
- Article
- List
- ListItem
- Mark
- Span
- Button
- DefinitionList
- DefinitionListTerme
- DefinitionListDescription
- Grid
- Main
- IconButton
Each class has a component that use it. EX : Form component uses FormClass and Each Input uses InputClass
Start in 5 steps.
1 - Create an index.html file
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<main id="root"></main>
<script type="module" src="index.js"></script>
</body>
</html>2 - create the index.js file
import {App} from "@joloh/jspattern";
import {Home} from "./views";
new App({
home: Home,
});3 - Create your first page. It should look like this**.
import {Header, Paragraph, Section} from "@joloh/jspattern";
export const Home = (params) => {
return Section({
children: [
Header({textContent: "Home"}),
Section({
children: [
Paragraph({text : " Lorem ipsum dolor sit amet."}),
]
})
]
})
}4 - please add google font link in your index.html file or use another library
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">5 - To build the project I use PARCEL. PAGE Once you're done. create a symbolic link for PARCEL or just run this command in the terminal from the root of your project :
node_modules/.bin/parcel index.htmlYou will have the project running on http://localhost:1234
PAGE EXEMPLE
import {
Article,
Button, DefinitionList, DefinitionListDescription, DefinitionListTerme,
Figure,
Form,
Grid,
Header,
Icon,
List,
ListItem,
Paragraph,
Section, Image
} from "@joloh/jspattern";
import {_console} from "@joloh/jspattern";
// ASSUMING YOU HAVE AN EXPORTABLE CONST CALLED actionsTypes somewhere
import {actionsTypes} from "../redux/redux";
// ASSUMING YOU HAVE AN IMAGE CALLED img.png somewhere
import * as img from "../assets/img.png"
// ASSUMING YOU HAVE A PAGE CALLED Contact somewhere
import {Contact} from "./Contact";
export const Home = (params) => {
const {stateObserver, useState, navigation, useReduxProvider, updateDom} = params({
text: "text",
image: null
});
const setText = useState("text");
const setImage = useState('image');
const [store, dispatch] = useReduxProvider();
const formItems = {
fields: [
{name: "name", tagName: "input", attributes: {placeholder: "Name", type: "text", className: "input", style: {background: "aliceblue"}, onkeydown: okKeydown}},
{name: "placeholder", tagName: "input", attributes: {placeholder: "Placeholder", type: "text", className: "input", style: {background: "aliceblue"}, onkeydown: okKeydown}},
{name: "type",tagName: "input", attributes: {placeholder: "Type", type: "text", className: "input", style: {background: "aliceblue"}, onkeydown: okKeydown}},
{name: "content", tagName: "input", attributes: {placeholder: "Content", type: "text", className: "input", style: {background: "aliceblue"}, onkeydown: okKeydown}},
],
}
return Section({
style: {margin: "1rem 2rem"},
children: [
Section({children: [
Header({textContent: "Custom Form"}),
Form({className: "custom-table-form", items: formItems.fields}),
]
}),
Section({
className: "custom-table-form__icon",
style: {marginTop: "10px"},
children: [
Icon({
className: "custom-table-form__icon",
textContent: "remove_circle_outline",
onclick: function (e) {
_console("remove_circle_outline click", e);
}
}),
Icon({
className: "custom-table-form__icon",
textContent: "add_circle_outline",
id: "abcd",
onclick: function (e) {
_console("add_circle_outline click", e);
const prods = store.products || [];
// demo
[{id: 1, name: "iphone",},
{id: 2, name: "samsung",},
{id: 3, name: "huawei",},
].forEach(p => prods.push(p));
dispatch({
type: actionsTypes.PRODUCTS,
products: prods
});
updateDom({element: e.target, data: {style: {backgroundColor: "red"}}});
_console("add_circle_outline store", store);
}
})
]
}),
Figure({className: "home-image-easy", style: { position: "relative" }, children: [
Image({src : img, style: {width: "10%", objectFit: "cover"}}),
]}),
Article({className: "home-image-easy", style: { position: "relative" }, children: [
Article({textContent: "HELLO"}),
]}),
Grid({
gtc: "1fr 1fr",
children: [
Section({
children: [
Paragraph({textContent: "Shamamal"})
]
}),
Section({
children: [
Paragraph({textContent: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, voluptates"}),
Paragraph({textContent: "Lorem ipsum dolor sit"})
]
}),
]
}),
Section({
children: [
List({
children: [
ListItem({textContent: "Hey"}),
ListItem({textContent: "Ho"}),
ListItem({textContent: "Hu"}),
ListItem({textContent: "Ha"}),
]
}),
Button({
textContent: "Contact Us",
onclick: function (e) {
console.log(e);
navigation.goToUrl({url: "/contact", title: "Contact", stateObserver, useState, navigation, nextPage: Contact});
}
}),
DefinitionList({
children : [
DefinitionListTerme({textContent: "Denim (semigloss finish"}),
DefinitionListDescription({textContent: "Ceiling"}),
DefinitionListTerme({textContent: "Denim (eggshell finish)"}),
DefinitionListTerme({textContent: "Evening Sky (eggshell finish)"}),
DefinitionListDescription({textContent: "Layered on the walls"})
]
})
]
}),
]
});
};TABLE
Table({
children: [
TableHeader({
children: [
TableRow({
children: [
DataCell({textContent: "ID"}),
DataCell({textContent: "Email"}),
DataCell({textContent: "Full name"}),
]
}),
]
}),
TableBody({
children: [
TableRow({
children: [
DataCell({textContent: "1"}),
DataCell({textContent: "[email protected]"}),
DataCell({textContent: "Fuz Buzz"}),
]
}),
]
}),
TableFooter({
children: [
TableRow({
children: [
DataCell({textContent: "Nice table"}),
]
}),
]
}),
]
})BUTTONS
IconButton({
textContent: 'perception',
icon: "content_copy",
attributes: {
icon: {},
text: {style: {color: "red"}},
}
})IconButton({
children: [
Span({textContent: "easy"}),
Icon({textContent: "person"}),
],
})Button({textContent: "GitLab"})Google Font Icons
Icon({textContent: "person"})Headings Default is H1 is no tagName specified. Check your browser inspecter tool to see.
Section({
children: [
Header({tagName: "h1", textContent: "Heading"}),
Header({tagName: "h2", textContent: "Heading"}),
Header({tagName: "h3", textContent: "Heading"}),
Header({tagName: "h4", textContent: "Heading"}),
Header({tagName: "h5", textContent: "Heading"}),
Header({tagName: "h6", textContent: "Heading"}),
]
})Override html tag name
If you want to use another tag name and override the one given by the class. Just add property tagName ex: tagName: "span" HTML Attributes you can set html attributes using attributes object like so
Button({textContent: "Save", attributes: {style: {background: "purple",color: "white"}, type: "submit"}})Use Context Provider Create a single file a paste this inside as a starter.
export const initialState = {
products: [],
};
export const actionsTypes = {
PRODUCTS: "PRODUCTS",
};
const reducer = (state = {}, action = {}) => {
switch (action.type) {
case actionsTypes.PRODUCTS:
return {
...state,
products: action.products,
};
default:
return state;
}
};Then provide arguments from entrypoint App
return new App(routes, initialState, reducer);useContextProvider, useState, useArgs, Arg, ArgList...and more to come
const CustomPage = (params) => {
const {stateObserver, useState, navigation, useReduxProvider, updateDom, componentArgs} = params({
text: "text",
image: null
});
const setText = useState("text");
const setImage = useState('image');
const [store, dispatch] = useReduxProvider();
const [args, setArgs, addElement] = useArgs();
setArgs("tableItems", [
{ id: 1, name: "ok", title: "jack", unit_price: 25, price: 125, qty: 1 },
{ id: 2, name: "tomate", title: "same", unit_price: 25, total: 25, qty: 1 },
{ id: 3, name: "oeuf", title: "jaune", unit_price: 12, total: 25, qty: 1 },
]);
setArgs("momto", [
{ id: 1, name: "ok", title: "jack", unit_price: 25, price: 125, qty: 1 },
{ id: 2, name: "tomate", title: "same", unit_price: 25, total: 25, qty: 1 },
{ id: 3, name: "oeuf", title: "jaune", unit_price: 12, total: 25, qty: 1 },
]);
addElement("tableItems", { id: 1, name: "ok", title: "jack", unit_price: 25, price: 125, qty: 1 });
Arg("userId", "2");
Arg("quatre", 4);
Arg("douze", 2);
Arg("cent", 100);
Arg("dix", 10);
Arg("quarante5", 45);
ArgList("products", [
{ id: 2, name: "tomate", title: "same", unit_price: 25, total: 25, qty: 1 },
{ id: 2, name: "tomate", title: "same", unit_price: 25, total: 25, qty: 1 },
{ id: 2, name: "tomate", title: "same", unit_price: 25, total: 25, qty: 1 },
{ id: 2, name: "tomate", title: "same", unit_price: 25, total: 25, qty: 1 },
]);
console.log(args);
}Update dom element on click
1 - Element
Header({
id: "hide-me",
textContent: "Lorem ipsum"
})2 - The button
Button({
textContent: "GitLab", className: ["button", "fw-600"],
onclick: (e) => {
setArgs("isOn", !args.isOn);
updateDom({element: "hide-me", show: !args.isOn, data: {style: {background: "blue", borderRadius: "30px"}}});
updateDom({element: e.target, data: {style: {background: "blue", borderRadius: "30px"}}});
}
})