Skip to content

Commit

Permalink
feat(markdown): update markdown links
Browse files Browse the repository at this point in the history
  • Loading branch information
Sisha0 committed Oct 22, 2021
1 parent 81e2250 commit 2a1faa9
Show file tree
Hide file tree
Showing 12 changed files with 74 additions and 74 deletions.
24 changes: 12 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@
**UIPlayground** is a solution for presenting your custom components.

With the help of *UIP* components we allow user to *'play'* with a component.
You can choose from the variety of component's templates ([UIP Snippets](./src/snippets/README.md)),
play with the component's settings ([UIP Settings](./src/settings/README.md))
or even change its markup ([UIP Editor](./src/editor/README.md))!
You can choose from the variety of component's templates ([UIP Snippets](src/core/snippets/README.md)),
play with the component's settings ([UIP Settings](src/plugins/settings/settings/README.md))
or even change its markup ([UIP Editor](src/plugins/editor/README.md))!

Every element (except the *UIP Root*) isn't required, so you can combine them the way you want.

Expand All @@ -26,15 +26,15 @@ Every element (except the *UIP Root*) isn't required, so you can combine them th
- #### [UIP Root](src/core/README.md#uip-root)
- #### [UIP State Model](src/core/README.md#uip-state-model)
- ### Components
- #### [UIP Options](./src/options/README.md)
- #### [UIP Snippets](./src/snippets/README.md)
- #### [UIP Preview](./src/preview/README.md)
- #### [UIP Editor](./src/editor/README.md)
- #### [UIP Settings](./src/settings/README.md)
- ##### [UIP Setting](./src/settings/setting/README.md)
- ##### [UIP Text Setting](./src/settings/setting/text-setting/README.md)
- ##### [UIP Bool Setting](./src/settings/setting/bool-setting/README.md)
- ##### [UIP Select Setting](./src/settings/setting/select-setting/README.md)
- #### [UIP Options](src/plugins/options/README.md)
- #### [UIP Snippets](src/core/snippets/README.md)
- #### [UIP Preview](src/core/preview/README.md)
- #### [UIP Editor](src/plugins/editor/README.md)
- #### [UIP Settings](src/plugins/settings/settings/README.md)
- ##### [UIP Setting](src/plugins/settings/settings/setting/README.md)
- ##### [UIP Text Setting](src/plugins/settings/settings/setting/text-setting/README.md)
- ##### [UIP Bool Setting](src/plugins/settings/settings/setting/bool-setting/README.md)
- ##### [UIP Select Setting](src/plugins/settings/settings/setting/select-setting/README.md)
---
## Example:
```html
Expand Down
20 changes: 10 additions & 10 deletions src/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,21 @@ UIP components are organized in the following way:

1. Core components
- Base components
- [UIPRoot](core/README.md#uip-root)
- [UIPPreview](core/preview/README.md)
- [UIPSnippets](core/snippets/README.md)
- [UIPRoot](src/core/README.md#uip-root)
- [UIPPreview](src/core/preview/README.md)
- [UIPSnippets](src/core/snippets/README.md)
2. Plugins
- [UIPEditor](plugins/editor/README.md)
- [UIPOptions](plugins/options/README.md)
- [UIPSettings](plugins/settings/settings/README.md)
- [UIPBoolSetting](plugins/settings/settings/setting/bool-setting/README.md)
- [UIPSelectSetting](plugins/settings/settings/setting/select-setting/README.md)
- [UIPTextSetting](plugins/settings/settings/setting/text-setting/README.md)
- [UIPEditor](src/plugins/editor/README.md)
- [UIPOptions](src/plugins/options/README.md)
- [UIPSettings](src/plugins/settings/settings/README.md)
- [UIPBoolSetting](src/plugins/settings/settings/setting/bool-setting/README.md)
- [UIPSelectSetting](src/plugins/settings/settings/setting/select-setting/README.md)
- [UIPTextSetting](src/plugins/settings/settings/setting/text-setting/README.md)

Any playground must have at least **core** components. **Plugins** are
optional, you can add them on your own free will.

To implement custom UIPPlayground components, see [UIPPlugin](core/README.md#uip-plugin).
To implement custom UIPPlayground components, see [UIPPlugin](src/core/README.md#uip-plugin).

# Modules/components imports
Modules main parts lay inside modules folders. So importing required
Expand Down
38 changes: 19 additions & 19 deletions src/core/README.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
# UIP Plugin

[UIPPlugin](#uip-plugin) - base class for all UIP elements. Extending it allows creating custom UIP
[UIPPlugin](src/core/README.md#uip-plugin) - base class for all UIP elements. Extending it allows creating custom UIP
components.

## Description

All UIP elements are [UIPPlugin](#uip-plugin) instances. Plugin automatically sets *uip-plugin* class to its elements,
provides access to [UIPRoot](#uip-root) and adds **_onRootStateChange()** method, which is a key part in components
All UIP elements are [UIPPlugin](src/core/README.md#uip-plugin) instances. Plugin automatically sets *uip-plugin* class to its elements,
provides access to [UIPRoot](src/core/README.md#uip-root) and adds **_onRootStateChange()** method, which is a key part in components
communication.

After initialization [UIPPlugin](#uip-plugin) subscribes to [UIPStateModel](#uip-state-model) changes and, after
After initialization [UIPPlugin](src/core/README.md#uip-plugin) subscribes to [UIPStateModel](src/core/README.md#uip-state-model) changes and, after
destroying, automatically unsubscribes. **_onRootStateChange()** is called every time markup changes are detected.
As you can see, the flow is quite similar to what we usually do in
[Observable](https://en.wikipedia.org/wiki/Observer_pattern) pattern.
Expand All @@ -29,10 +29,10 @@ class UIPComponent extends UIPPlugin {
}
```

You can find a way of getting current markup in [UIPStateModel](#uip-state-model) section.
You can find a way of getting current markup in [UIPStateModel](src/core/README.md#uip-state-model) section.

To make the long story shorter: we implement "reaction" callback in **_onRootStateChange()** (using markup's getter
mentioned earlier) and every time [UIPStateModel](#uip-state-model) produces markup updates, we "react" to them!
mentioned earlier) and every time [UIPStateModel](src/core/README.md#uip-state-model) produces markup updates, we "react" to them!

## Example

Expand All @@ -52,12 +52,12 @@ class UIPPreview extends UIPPlugin {

# UIP Root

[UIPRoot](#uip-root) - container for [UIPPlugin](#uip-plugin) components.
[UIPRoot](src/core/README.md#uip-root) - container for [UIPPlugin](src/core/README.md#uip-plugin) components.

## Description:

[UIPRoot](#uip-plugin) contains [UIPStateModel](#uip-state-model) getter. It also allows [UIPPlugin](#uip-plugin) elements
subscribing to model changes (or unsubscribing from them). More details can be found in [UIPPlugin](#uip-plugin) section.
[UIPRoot](src/core/README.md#uip-plugin) contains [UIPStateModel](src/core/README.md#uip-state-model) getter. It also allows [UIPPlugin](src/core/README.md#uip-plugin) elements
subscribing to model changes (or unsubscribing from them). More details can be found in [UIPPlugin](src/core/README.md#uip-plugin) section.

## Example:

Expand All @@ -69,13 +69,13 @@ subscribing to model changes (or unsubscribing from them). More details can be f

# UIP State Model

[UIPStateModel](#uip-state-model) - state manager which contains current markup and provides methods for changing it.
[UIPStateModel](src/core/README.md#uip-state-model) - state manager which contains current markup and provides methods for changing it.
Implements [Observable](https://en.wikipedia.org/wiki/Observer_pattern) pattern through extending
ESL's [Observable](https://github.com/exadel-inc/esl/blob/main/src/modules/esl-utils/abstract/observable.ts) class.

## Description

As we already mentioned, [UIPStateModel](#uip-state-model) is an observable. It's fired every time we produce markup
As we already mentioned, [UIPStateModel](src/core/README.md#uip-state-model) is an observable. It's fired every time we produce markup
changes. To trigger the observable you need to change model's markup:

```typescript
Expand All @@ -91,11 +91,11 @@ class UIPComponent extends UIPPlugin {
```

Markup's setter takes two arguments: *markup* and *modifier*. *Markup* stands for, surprisingly, new markup, and
*modifier* is a [UIPPlugin](#uip-plugin) instance which triggers changes (it is needed to prevent extra triggers of
[UIPStateModel](#uip-state-model)).
*modifier* is a [UIPPlugin](src/core/README.md#uip-plugin) instance which triggers changes (it is needed to prevent extra triggers of
[UIPStateModel](src/core/README.md#uip-state-model)).


[UIPStateModel](#uip-state-model) also has a getter for current markup:
[UIPStateModel](src/core/README.md#uip-state-model) also has a getter for current markup:

```typescript
import {UIPPlugin} from "./plugin";
Expand All @@ -111,8 +111,8 @@ class UIPComponent extends UIPPlugin {

## Markup processing methods

[UIPStateModel](#uip-state-model) has some methods to make markup processing easier. They are used inside
[UIPSettings](../settings/README.md) and [UIPSetting](../settings/setting/README.md) plugins. These methods have the
[UIPStateModel](src/core/README.md#uip-state-model) has some methods to make markup processing easier. They are used inside
[UIPSettings](src/plugins/settings/settings/README.md) and [UIPSetting](src/plugins/settings/settings/setting/README.md) plugins. These methods have the
following signatures:

```typescript
Expand Down Expand Up @@ -145,10 +145,10 @@ export type ChangeAttrConfig = {
```

Here *attribute* stands for attribute name and *target* - for target elements. *Modifier* field represents the
[UIPPlugin](../core/README.md#uip-plugin) instance which triggers attribute's changes.
[UIPPlugin](src/core/README.md#uip-plugin) instance which triggers attribute's changes.

The last field can either be *value* (this value replaces current *attribute*'s value) or *transform* function (it maps
current attribute value to the new one).

Again, the examples of using this API can be found in [UIPSetting](../settings/setting/README.md)
implementations (e.g. [UIPBoolSetting](../settings/setting/bool-setting/README.md)).
Again, the examples of using this API can be found in [UIPSetting](src/plugins/settings/settings/setting/README.md)
implementations (e.g. [UIPBoolSetting](src/plugins/settings/settings/setting/bool-setting/README.md)).
4 changes: 2 additions & 2 deletions src/core/preview/README.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# UIP Preview

[UIPPreview](README.md) - custom element, that displays active markup. Extends [UIPPlugin](../core/README.md#uip-plugin).
[UIPPreview](src/core/preview/README.md) - custom element, that displays active markup. Extends [UIPPlugin](src/core/README.md#uip-plugin).

[UIPPreview](README.md) element observes UIPStateModel changes, but it doesn't produce them.
[UIPPreview](src/core/preview/README.md) element observes UIPStateModel changes, but it doesn't produce them.

## Example:
```html
Expand Down
6 changes: 3 additions & 3 deletions src/core/snippets/README.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
# UIP Snippets

[UIPSnippets](README.md) - custom element which contain snippets (component's templates).
Extends [UIPPlugin](../core/README.md#uip-plugin).
[UIPSnippets](src/core/snippets/README.md) - custom element which contain snippets (component's templates).
Extends [UIPPlugin](src/core/README.md#uip-plugin).

## Description:

- Component's markup should be placed in **template** tags.
- Templates should have *uip-snippet*, *label* attributes.
- An active element can be chosen by adding class **active** to template, otherwise first template becomes active.

[UIPSnippets](README.md) component produces UIPStateModel changes, but it doesn't observe them.
[UIPSnippets](src/core/snippets/README.md) component produces UIPStateModel changes, but it doesn't observe them.

## Example:

Expand Down
6 changes: 3 additions & 3 deletions src/plugins/editor/README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# UIP Editor

[UIPEditor](README.md) - custom element, code editor for changing current markup. It allows user to manually configure
the component inside [UIPPreview](../preview/README.md). Extends [UIPPlugin](../core/README.md#uip-plugin).
[UIPEditor](src/plugins/editor/README.md) - custom element, code editor for changing current markup. It allows user to manually configure
the component inside [UIPPreview](src/core/preview/README.md). Extends [UIPPlugin](src/core/README.md#uip-plugin).

## Description
[UIPEditor](README.md) based on [ACE](https://ace.c9.io/) editor, which means you can use this editor's API for
[UIPEditor](src/plugins/editor/README.md) based on [ACE](https://ace.c9.io/) editor, which means you can use this editor's API for
customization. You can change theme, mode, shortcuts, etc.

To see the full power of [ACE](https://ace.c9.io/) editor you can click [here](https://ace.c9.io/build/kitchen-sink.html)
Expand Down
8 changes: 4 additions & 4 deletions src/plugins/options/README.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
# UIP Options

[UIPOptions](README.md) - custom element which provides visual controls for changing UIP visual appearance.
Extends [UIPPlugin](../core/README.md#uip-plugin).
[UIPOptions](src/plugins/options/README.md) - custom element which provides visual controls for changing UIP visual appearance.
Extends [UIPPlugin](src/core/README.md#uip-plugin).

## Description:

[UIPOptions](README.md) component supports two settings: **theme** and **mode**.
[UIPOptions](src/plugins/options/README.md) component supports two settings: **theme** and **mode**.

- **Theme** option has two values: *light* (default) and *dark*. It sets color theme for other elements.
- **Mode** option also has two values: *vertical* (default) and *horizontal*. It controls UIP container's layout.
Expand All @@ -16,7 +16,7 @@ These options can be manually set (and observed) with corresponding *theme* and
<uip-options label="Options:" mode="horizontal" theme="dark"></uip-options>
```

[UIPOptions](README.md) element doesn't produce or observe UIPStateModel changes.
[UIPOptions](src/plugins/options/README.md) element doesn't produce or observe UIPStateModel changes.

## Example:
```html
Expand Down
16 changes: 8 additions & 8 deletions src/plugins/settings/settings/README.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
# UIP Settings

[UIPSettings](README.md) - custom element which stores settings ([UIPSetting](setting/README.md)).
Extends [UIPPlugin](../core/README.md#uip-plugin).
[UIPSettings](src/plugins/settings/settings/README.md) - custom element which stores settings ([UIPSetting](src/plugins/settings/settings/setting/README.md)).
Extends [UIPPlugin](src/core/README.md#uip-plugin).

## Description:

We use [UIPSettings](README.md) as a container for [UIPSetting](setting/README.md) elements. It serves as a link between
We use [UIPSettings](src/plugins/settings/settings/README.md) as a container for [UIPSetting](setting/README.md) elements. It serves as a link between
our standard UIP flow for change detection and settings updates.

[UIPSettings](README.md) updates settings using current state ([UIPStateModel](../core/README.md#uip-state-model))
and vice versa (more info can be found in [UIPSetting](setting/README.md) docs)
[UIPSettings](src/plugins/settings/settings/README.md) updates settings using current state ([UIPStateModel](src/core/README.md#uip-state-model))
and vice versa (more info can be found in [UIPSetting](src/plugins/settings/settings/setting/README.md) docs)


To get updates from inner settings we listen for *uip:change* event, then pass markup updates to [UIPRoot](../core/README.md#uip-root).
To get updates from inner settings we listen for *uip:change* event, then pass markup updates to [UIPRoot](src/core/README.md#uip-root).

[UIPSettings](README.md) component has the following attributes:
[UIPSettings](src/plugins/settings/settings/README.md) component has the following attributes:
- **label** - settings section displayed name.
- **target** - sets **target** attribute for all inner [UIPSetting](setting/README.md) elements (can be overwritten
- **target** - sets **target** attribute for all inner [UIPSetting](src/plugins/settings/settings/setting/README.md) elements (can be overwritten
by own attribute value).

## Example:
Expand Down
12 changes: 6 additions & 6 deletions src/plugins/settings/settings/setting/README.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
# UIP Setting

[UIPSetting](README.md) - custom element for manipulating with elements attributes. Custom settings should extend
[UIPSetting](src/plugins/settings/settings/setting/README.md) - custom element for manipulating with elements attributes. Custom settings should extend
*UIPSetting* class if you want them to be connected with [UIPSettings](src/plugins/settings/settings/README.md) properly.

## Description:

- Processes markup to update own value via **updateFrom()** (uses [UIPStateModel](../../core/README.md#uip-state-model) by default).
- Updates markup with **applyTo()** (uses [UIPStateModel](../../core/README.md#uip-state-model) by default).
- Processes markup to update own value via **updateFrom()** (uses [UIPStateModel](src/core/README.md#uip-state-model) by default).
- Updates markup with **applyTo()** (uses [UIPStateModel](src/core/README.md#uip-state-model) by default).
- Dispatches **uip:change** event to let *UIPSettings* know about setting changes.

These things have default implementation. Also, there are **isValid()** and **setInconsistency()** methods to deal with
Expand All @@ -23,9 +23,9 @@ The following attributes used:
- **attribute** - attribute of the **target** which is changed by the setting.

You can see the examples of custom settings here (these are distributed together with other *UIP* elements):
- [UIPTextSetting](src/plugins/settings/settings/setting/text-settingsettings/settings/setting/text-setting/README.md)
- [UIPBoolSetting](src/plugins/settings/settings/setting/bool-settingsettings/settings/setting/bool-setting/README.md)
- [UIPSelectSetting](src/plugins/settings/settings/setting/select-settingttings/settings/setting/select-setting/README.md)
- [UIPTextSetting](src/plugins/settings/settings/setting/text-setting/README.md)
- [UIPBoolSetting](src/plugins/settings/settings/setting/bool-setting/README.md)
- [UIPSelectSetting](src/plugins/settings/settings/setting/select-setting/README.md)

## Example:

Expand Down
6 changes: 3 additions & 3 deletions src/plugins/settings/settings/setting/bool-setting/README.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
# UIP Bool Setting

[UIPBoolSetting](README.md) - custom setting for adding/removing attributes or appending values to attribute.
Extends [UIPSetting](src/plugins/settings/settings/setting/README.mdsettings/settings/setting/README.md).
[UIPBoolSetting](src/plugins/settings/settings/setting/bool-setting/README.md) - custom setting for adding/removing attributes or appending values to attribute.
Extends [UIPSetting](src/plugins/settings/settings/setting/README.md).

## Description:

[UIPBoolSetting](README.md) represents a checkbox. It has **value** attribute for adding/removing this **value**
[UIPBoolSetting](src/plugins/settings/settings/setting/bool-setting/README.md) represents a checkbox. It has **value** attribute for adding/removing this **value**
from attributes.

This setting can exist in two modes: **replace** and **append**.
Expand Down
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
# UIP Select Setting

[UIPSelectSetting](README.md) - custom setting for selecting attribute's value. Extends [UIPSetting](src/plugins/settings/settings/setting/README.mdsettings/settings/setting/README.md).
[UIPSelectSetting](src/plugins/settings/settings/setting/select-setting/README.md) - custom setting for selecting attribute's value. Extends [UIPSetting](src/plugins/settings/settings/setting/README.md).

## Description:

We render [UIPSelectSetting](README.md) as [ESLSelect](https://github.com/exadel-inc/esl/tree/main/src/modules/esl-forms/esl-select)
We render [UIPSelectSetting](src/plugins/settings/settings/setting/select-setting/README.md) as [ESLSelect](https://github.com/exadel-inc/esl/tree/main/src/modules/esl-forms/esl-select)
element.

Select setting has two modes: **replace** and **append**. The first one (is used by default) replaces the attribute
value with selected, and the second one appends selected value to the attribute.

[UIPSelectSetting](README.md) also supports **multiple** attribute to allow selecting multiple values.
[UIPSelectSetting](src/plugins/settings/settings/setting/select-setting/README.md) also supports **multiple** attribute to allow selecting multiple values.

## Example:

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# UIP Text Setting

[UIPTextSetting](README.md) - custom setting for inputting attribute's value. Extends [UIPSetting](src/plugins/settings/settings/setting/README.mdsettings/settings/setting/README.md)
[UIPTextSetting](src/plugins/settings/settings/setting/text-setting/README.md) - custom setting for inputting attribute's value. Extends [UIPSetting](src/plugins/settings/settings/setting/README.md)

## Description:

Expand Down

0 comments on commit 2a1faa9

Please sign in to comment.