Skip to content
This repository was archived by the owner on Feb 15, 2025. It is now read-only.

Commit 2ac04cc

Browse files
bennobuilderbennobuilder
authored
Merge pull request #93 from agile-ts/develop
fixed font loading
2 parents dff9f54 + a3607cc commit 2ac04cc

File tree

28 files changed

+234
-201
lines changed

28 files changed

+234
-201
lines changed

‎docs/main/Contributing.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
---
22
id: contributing
33
title: Contributing
4-
sidebar_label: Contributing
4+
sidebar_label: Contributing to AgileTs
55
slug: /contributing
6+
description: Contributions to AgileTs are not hard and very welcome.
7+
image: img/meta.png
68
---
79

810
We are open and grateful for any contribution made by the community.

‎docs/main/Frameworks.md

+2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ id: frameworks
33
title: Frameworks
44
sidebar_label: Frameworks
55
slug: /frameworks
6+
description: AgileTs can be used in various frameworks like React, React-Native, Vue, ..
7+
image: img/meta.png
68
---
79

810
A quick overview of all frameworks that AgileTs supports

‎docs/main/Installation.md

+2
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ id: installation
33
title: Installation
44
sidebar_label: Installation
55
slug: /installation
6+
description: How to install AgileTs and its plugins in various environments like React, Vue.
7+
image: img/meta.png
68
---
79

810
`AgileTs` is essentially a set of node modules

‎docs/main/Introduction.md

+6-27
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,12 @@
11
---
22
id: introduction
3-
title: AgileTs
3+
title: Introducing AgileTs
44
sidebar_label: Introduction
55
slug: /introduction/
6+
description: A global State and Logic Library implemented in Typescript, offering a reimagined API that focuses on developer experience. The AgileTs state management functionality can be used in various frameworks like React, Vue and plain Javascript.
7+
image: img/meta.png
68
---
79

8-
> **Global State and Logic Library**
9-
10-
<a href="https://github.com/agile-ts/agile">
11-
<img src="https://img.shields.io/github/license/agile-ts/agile.svg?label=license&style=flat&colorA=293140&colorB=4a4872" alt="GitHub License"/></a>
12-
<a href="https://npm.im/@agile-ts/core">
13-
<img src="https://img.shields.io/bundlephobia/min/@agile-ts/core.svg?label=minified%20size&style=flat&colorA=293140&colorB=4a4872" alt="npm minified size"/></a>
14-
<a href="https://npm.im/@agile-ts/core">
15-
<img src="https://img.shields.io/npm/dt/@agile-ts/core.svg?label=downloads&style=flat&colorA=293140&colorB=4a4872" alt="npm total downloads"/></a>
16-
<a href="https://github.com/agile-ts/agile/actions?query=workflow%3ARelease">
17-
<img src="https://github.com/agile-ts/agile/workflows/Release/badge.svg" alt="Build Status"/></a>
18-
<a href="https://github.com/agile-ts/agile/actions?query=workflow%3A%22Test+All+Packages%22">
19-
<img src="https://github.com/agile-ts/agile/workflows/Test%20All%20Packages/badge.svg" alt="Build Status"/></a>
20-
21-
<br />
22-
<br />
23-
24-
:::info
25-
26-
Want to get a quick overview of AgileTs?
27-
Checkout the [AgileTs Introduction Blogpost](https://dev.to/bennodev19/createstate-introducing-agilets-a-flexible-state-manager-91f).
28-
29-
:::
30-
3110
## 👋 Introduction {#introduction}
3211

3312
AgileTs is a global State and Logic Library implemented in Typescript.
@@ -332,8 +311,8 @@ In July, I came to the conclusion to contribute to PulseJs,
332311
in order to speed up the development process a bit.
333312
But before I could do anything, I had to figure out how PulseJs works internally.
334313
After hours, I still haven't figured out how it works.
335-
This was due to the fact that I was a Typescript noob,
336-
and the codebase was not contributor friendly (No comments, variables called x, a, b, ..).
314+
This was mainly due to the fact that I was a Typescript noob,
315+
and the codebase was (in my opinion) not very contributor friendly (not many comments, variables called x, sc, ..).
337316
To learn how PulseJs works and to get a deeper understanding of Typescript,
338317
I decided to rewrite PulseJs from scratch in a separate project, later AgileTs.
339318
After a while, I got the hang and understood how PulseJs works under the hood.
@@ -344,7 +323,7 @@ was on the 16th August 2020, where I refactored the `PulseHOC`.
344323
Unfortunately, PulseJs was moving further and further away
345324
from my idea of an ideal State Management Library.
346325
For instance, they introduced the `Pulse.Core`,
347-
which more or less forced me to define all States in a single source of truth object called `core`.
326+
which more or less forced you to define all States in a single source of truth object called `core`.
348327
I wouldn't say I liked that change since I switched, among other reasons,
349328
to PulseJs in order not to define all my States in a single object.
350329
Because of this relatively significant design change,

‎docs/main/StyleGuides.md

+9-7
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,10 @@ id: style-guide
33
title: Style Guides
44
sidebar_label: Style Guides
55
slug: /style-guide
6+
description: Contributions to AgileTs can be made with little effort and are very welcome. We look forward to your input.
7+
image: img/meta.png
68
---
79

8-
:::important
9-
10-
**AgileTs isn't bound to any specific Style-Guide**,
11-
but there are some you may get inspired from.
12-
13-
:::
14-
1510
A good frontend architecture isn't installable via npm
1611
and even AgileTs cannot solve this problem on the go.
1712
Planning and building a well-structured application requires a lot of time and effort.
@@ -34,6 +29,13 @@ These guides give you a basic idea of possible structures for frontend applicati
3429
using AgileTs as State Management Framework.
3530
Feel free to choose one of them and adapt it to your needs.
3631

32+
:::important
33+
34+
**AgileTs isn't bound to any specific Style-Guide**,
35+
but there are some you may get inspired from.
36+
37+
:::
38+
3739
## 🚀 Inspiration 1
3840

3941
The `Style Guide 1` is intended for **smaller and medium size applications**

‎docs/packages/api/Introduction.md

+11-10
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,6 @@ sidebar_label: Introduction
55
slug: /api
66
---
77

8-
:::warning
9-
10-
WIP Package!
11-
12-
:::
13-
14-
> Promise based HTTP request API
15-
16-
<br />
17-
188
<a href="https://github.com/agile-ts/agile">
199
<img src="https://img.shields.io/github/license/agile-ts/agile.svg?label=license&style=flat&colorA=293140&colorB=4a4872" alt="GitHub License"/></a>
2010
<a href="https://npm.im/@agile-ts/api">
@@ -24,6 +14,17 @@ WIP Package!
2414
<a href="https://npm.im/@agile-ts/api">
2515
<img src="https://img.shields.io/npm/dt/@agile-ts/api.svg?label=downloads&style=flat&colorA=293140&colorB=4a4872" alt="npm total downloads"/></a>
2616

17+
<br />
18+
<br />
19+
20+
:::warning
21+
22+
WIP Package!
23+
24+
:::
25+
26+
> Promise based HTTP request API
27+
2728
## ❓ `api`
2829

2930
The `api` package is a Promise based HTTP/s request API, with a simple syntax.

‎docs/packages/core/Introduction.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,6 @@ sidebar_label: Introduction
55
slug: /core
66
---
77

8-
> Global State and Logic Library
9-
10-
<br />
11-
128
<a href="https://github.com/agile-ts/agile">
139
<img src="https://img.shields.io/github/license/agile-ts/agile.svg?label=license&style=flat&colorA=293140&colorB=4a4872" alt="GitHub License"/></a>
1410
<a href="https://npm.im/@agile-ts/core">
@@ -18,6 +14,10 @@ slug: /core
1814
<a href="https://npm.im/@agile-ts/core">
1915
<img src="https://img.shields.io/npm/dt/@agile-ts/core.svg?label=downloads&style=flat&colorA=293140&colorB=4a4872" alt="npm total downloads"/></a>
2016

17+
<br />
18+
<br />
19+
20+
> Global State and Logic Library
2121
2222
## ❓ `core`
2323

‎docs/packages/event/Introduction.md

+11-11
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,6 @@ sidebar_label: Introduction
55
slug: /event
66
---
77

8-
:::warning
9-
10-
WIP Package currently only supporting React!
11-
12-
:::
13-
14-
> Handy package for emitting UI updates
15-
16-
<br />
17-
188
<a href="https://github.com/agile-ts/agile">
199
<img src="https://img.shields.io/github/license/agile-ts/agile.svg?label=license&style=flat&colorA=293140&colorB=4a4872" alt="GitHub License"/></a>
2010
<a href="https://npm.im/@agile-ts/event">
@@ -24,10 +14,20 @@ WIP Package currently only supporting React!
2414
<a href="https://npm.im/@agile-ts/event">
2515
<img src="https://img.shields.io/npm/dt/@agile-ts/event.svg?label=downloads&style=flat&colorA=293140&colorB=4a4872" alt="npm total downloads"/></a>
2616

17+
<br />
18+
<br />
19+
20+
:::warning
21+
22+
WIP Package currently only supporting React!
23+
24+
:::
25+
26+
> Handy package for emitting UI updates
2727
2828
Events are handy for emitting UI updates and passing data with them.
2929
```ts
3030
const MY_EVENT = new Event(App);
3131
MY_EVENT.on((data) => {console.log("hello there " + data.name)}); // Print 'hello there jeff' if Event gets triggered
3232
MY_EVENT.trigger({name: "jeff"}); // Trigger Event
33-
```
33+
```

‎docs/packages/logger/Introduction.md

+5-4
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,6 @@ sidebar_label: Introduction
55
slug: /logger
66
---
77

8-
> Simple Javascript Logger
9-
10-
<br />
11-
128
<a href="https://github.com/agile-ts/agile">
139
<img src="https://img.shields.io/github/license/agile-ts/agile.svg?label=license&style=flat&colorA=293140&colorB=4a4872" alt="GitHub License"/></a>
1410
<a href="https://npm.im/@agile-ts/logger">
@@ -18,6 +14,11 @@ slug: /logger
1814
<a href="https://npm.im/@agile-ts/logger">
1915
<img src="https://img.shields.io/npm/dt/@agile-ts/logger.svg?label=downloads&style=flat&colorA=293140&colorB=4a4872" alt="npm total downloads"/></a>
2016

17+
<br />
18+
<br />
19+
20+
> Simple Javascript Logger
21+
2122
## ❓ `logger`
2223

2324
The `logger` package is a standalone extension for AgileTs that improves the logging experience,

‎docs/packages/multieditor/Introduction.md

+31-22
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,6 @@ sidebar_label: Introduction
55
slug: /multieditor
66
---
77

8-
:::warning
9-
10-
WIP Package!
11-
12-
:::
13-
14-
> Simple Form Manager
15-
16-
<br />
17-
188
<a href="https://github.com/agile-ts/agile">
199
<img src="https://img.shields.io/github/license/agile-ts/agile.svg?label=license&style=flat&colorA=293140&colorB=4a4872" alt="GitHub License"/></a>
2010
<a href="https://npm.im/@agile-ts/multieditor">
@@ -24,6 +14,17 @@ WIP Package!
2414
<a href="https://npm.im/@agile-ts/multieditor">
2515
<img src="https://img.shields.io/npm/dt/@agile-ts/multieditor.svg?label=downloads&style=flat&colorA=293140&colorB=4a4872" alt="npm total downloads"/></a>
2616

17+
<br />
18+
<br />
19+
20+
:::warning
21+
22+
WIP Package!
23+
24+
:::
25+
26+
> Simple Form Manager
27+
2728
## ❓ `multieditor`
2829

2930
The `multieditor` package is an extension for AgileTs, that makes creating reliable forms easy.
@@ -32,25 +33,33 @@ The `multieditor` package is an extension for AgileTs, that makes creating relia
3233
```ts
3334
// Create Multieditior
3435
const multiEditor = createMultieditor(editor => ({
35-
data: {
36+
initialData: {
3637
id: "myId", // Initial Id
3738
email: undefined, // Inital Email
3839
name: undefined, // Inital Name
3940
},
4041
onSubmit: async (data) => {
41-
console.log("Submitted ", data); // <---------------------------------
42-
}, // |
43-
fixedProperties: ["id"], // Properties that are always passed to the 'onSubmit()' method
44-
validateMethods: {
45-
email: agileResolver(isString, isEmail, isRequired), // Validation with tree shakable validation methods
46-
name: yupResolver(Yup.string().max(10).min(2).required()), // Validation with external validatiors like Yup
47-
},
48-
editableProperties: ["email", "name"], // Properties that can be edited
42+
console.log("Submitted ", data); // <---------
43+
}, // |
44+
// Properties that are always passed to the 'onSubmit()' method
45+
fixedProperties: ["id"],
46+
validationSchema: {
47+
// Validation with inbuilt tree shakable validation methods
48+
email: agileResolver(isString, isEmail, isRequired),
49+
// Validation with external validatiors like Yup
50+
name: yupResolver(Yup.string().required().max(10).min(2)),
51+
}
4952
}));
5053

51-
// Update Multieditor values in the UI-Form
52-
multiEditor.setValue("email", "[email protected]");
53-
multiEditor.setValue("name", "Jeff");
54+
// Use the Multieditor in any UI-Form
55+
// ..
56+
<label>First Name:</label>
57+
<input
58+
onChange={(e) => signUpEditor.setValue("firstName", e.target.value)}
59+
defaultValue={signUpEditor.getItemInitialValue("firstName")}
60+
/>
61+
<ErrorMessage error={signUpEditor.getStatus("firstName")?.message} />
62+
// ..
5463

5564
// Submit Multieditor and see what the 'onSubmit()' method will log
5665
multiEditor.submit();

‎docs/packages/react/Introduction.md

+5-4
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,6 @@ sidebar_label: Introduction
55
slug: /react
66
---
77

8-
> Integration for [React](https://reactjs.org/) and [React-Native](https://reactnative.dev/)
9-
10-
<br />
11-
128
<a href="https://github.com/agile-ts/agile">
139
<img src="https://img.shields.io/github/license/agile-ts/agile.svg?label=license&style=flat&colorA=293140&colorB=4a4872" alt="GitHub License"/></a>
1410
<a href="https://npm.im/@agile-ts/react">
@@ -18,6 +14,11 @@ slug: /react
1814
<a href="https://npm.im/@agile-ts/react">
1915
<img src="https://img.shields.io/npm/dt/@agile-ts/react.svg?label=downloads&style=flat&colorA=293140&colorB=4a4872" alt="npm total downloads"/></a>
2016

17+
<br />
18+
<br />
19+
20+
> Integration for [React](https://reactjs.org/) and [React-Native](https://reactnative.dev/)
21+
2122
## ❓ `react`
2223

2324
The `react` package is a set of utilities that simplifies the way AgileTs is integrated into a [React](https://reactjs.org/) environment.

‎docs/packages/vue/Introduction.md

+12-11
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,18 @@ sidebar_label: Introduction
55
slug: /vue
66
---
77

8+
<a href="https://github.com/agile-ts/agile">
9+
<img src="https://img.shields.io/github/license/agile-ts/agile.svg?label=license&style=flat&colorA=293140&colorB=4a4872" alt="GitHub License"/></a>
10+
<a href="https://npm.im/@agile-ts/vue">
11+
<img src="https://img.shields.io/npm/v/@agile-ts/vue.svg?label=npm&style=flat&colorA=293140&colorB=4a4872" alt="npm version"/></a>
12+
<a href="https://npm.im/@agile-ts/vue">
13+
<img src="https://img.shields.io/bundlephobia/min/@agile-ts/vue.svg?label=minified%20size&style=flat&colorA=293140&colorB=4a4872" alt="npm minified size"/></a>
14+
<a href="https://npm.im/@agile-ts/vue">
15+
<img src="https://img.shields.io/npm/dt/@agile-ts/vue.svg?label=downloads&style=flat&colorA=293140&colorB=4a4872" alt="npm total downloads"/></a>
16+
17+
<br />
18+
<br />
19+
820
:::warning
921

1022
WIP Documentation!
@@ -21,17 +33,6 @@ and we will fix it as soon as possible.
2133

2234
> Integration for [Vue](https://vuejs.org/)
2335
24-
<br />
25-
26-
<a href="https://github.com/agile-ts/agile">
27-
<img src="https://img.shields.io/github/license/agile-ts/agile.svg?label=license&style=flat&colorA=293140&colorB=4a4872" alt="GitHub License"/></a>
28-
<a href="https://npm.im/@agile-ts/vue">
29-
<img src="https://img.shields.io/npm/v/@agile-ts/vue.svg?label=npm&style=flat&colorA=293140&colorB=4a4872" alt="npm version"/></a>
30-
<a href="https://npm.im/@agile-ts/vue">
31-
<img src="https://img.shields.io/bundlephobia/min/@agile-ts/vue.svg?label=minified%20size&style=flat&colorA=293140&colorB=4a4872" alt="npm minified size"/></a>
32-
<a href="https://npm.im/@agile-ts/vue">
33-
<img src="https://img.shields.io/npm/dt/@agile-ts/vue.svg?label=downloads&style=flat&colorA=293140&colorB=4a4872" alt="npm total downloads"/></a>
34-
3536
## ❓ `vue`
3637

3738
The `vue` package helps us to integrate AgileTs into a [Vue](https://vuejs.org/) environment

0 commit comments

Comments
 (0)