<commit_before># <img height="64" src="https://github.com/masiulis/ugnis/blob/dev/static_prod/images/logo_new256x256.png?raw=true" />Ugnis 0.8.2v-alpha

Ugnis is a cross framework UI component library + visual editor. [Try it online!](https://ugnis.com/editor)

Supports React, React-Native, Vue, Cycle.js and pure JS. Vote for more integrations in this issue // TODO Angular 1/2+, Ember, Elm, Moon, etc

Default components use google material design.

## How to use it

Download ugnis locally:

```
npm install ugnis --save-dev
```

It will install Ugnis editor and download default Ugnis components

Next step is to start the editor

```
node ./node-modules/.bin/ugnis --port 4000 --source './ugnis_components'
```

Now open [localhost:4000](http://localhost:4000)

## Why use Ugnis?

  - Create a uniform component library for your company/project.
  - Default components can easily be modified to fit your needs by anyone on the team.
  - Works across frameworks. Perfect when migrating to a new framework.
  - **Future proof** - writing Ugnis to \<insert a new framework name here\> transformer is trivial. Updating to a new Ugnis version is automatic.

**Warning**: Ugnis is still in alpha, while we guarantee that exported code will work, [we are still missing some features](https://github.com/UgnisSoftware/ugnis/#goals-for-10v-release)

## Why have we created Ugnis?

Ugnis is a moonshot - a dream that we can create UI without

## How does Ugnis work internally?

Ugnis is declarative programming taken to the extreme. It's so declarative that reading and writing Ugnis components by hand is painful.
That's why the visual editor exists - it manages the code generation, so you could focus on design and logic.

Ugnis consists of three parts:

  - Declarative definition of your Component.
  - Visual editor that changes the definition.
  - Exporters for each supported framework that take the definition and generate code.

## Goals for 1.0v release

  - [x] Zero configuration, Ugnis-only components don't need webpack or babel
  - [ ] Integrates well with existing frameworks
  - [ ] View components:
    - [x] Box (also know as div/view)
    - [x] Text
    - [x] Image
    - [x] Input
  - [ ] Logic components:
    - [x] If
    - [ ] When (also know as if/else)
    - [ ] List
    - [ ] Recursion
  - [ ] State:
    - [x] Text (also known as string)
    - [x] Number
    - [x] Boolean
    - [x] Table
    - [ ] variants, boolean becomes a variant
    - [ ] connected tables - graphs
    - [ ] Date
  - [ ] Implements every Material Design component:
  - [x] type safety - does not allow runtime errors
  - [ ] Editor keyboard shortcuts are rebindable
  - [ ] Timers
  - [ ] Keyboard events

## Future improvements
  - [ ] Powerful enough to write any application, Ugnis editor is written with Ugnis itself
  - [ ] Hosted version - allow multiple people to work on the same component
  - [ ] Router
  - [ ] Fetch (also known as AJAX)
  - [ ] View components:
    - [ ] Icon
    - [ ] Link
  - [ ] ARIA
  - [ ] editor as a desktop app
  - [ ] server side rendering
  - [ ] application splitting
  - [ ] WebAssembly compiler
  - [ ] editor works well on mobile

## License:

MIT

## Contributors

[<NAME>](https://www.github.com/masiulis)

[<NAME>](https://github.com/Djonix)

[<NAME>](https://github.com/jpetuchovas)

[Vytas Butkus](http://vytasbutkus.com/)

### Thank you:

<NAME>, <NAME>, React team, <NAME>, <NAME>, RxJS team, André “Staltz” Medeiros, <NAME>, <NAME>, <NAME>, <NAME>, <NAME> and everyone who is pushing programming forward!<commit_msg>Update propaganda<commit_after># <img height="64" src="https://github.com/masiulis/ugnis/blob/dev/static_prod/images/logo_new256x256.png?raw=true" />Ugnis 0.8.2v-alpha

Ugnis is a cross framework UI component library + visual editor. [Try it online!](https://ugnis.com/editor)

Exports to React, React-Native, Vue, Cycle.js and pure JS. Vote for more integrations in this issue // TODO Angular 1/2+, Ember, Elm, Moon, etc

Default components use Google Material Design.

## How to use it

Download ugnis locally:

```
npm install ugnis --save-dev
```

It will install Ugnis editor and download default Ugnis components

Next step is to start the editor

```
node ./node-modules/.bin/ugnis --port 4000 --source './ugnis_components'
```

Now open [localhost:4000](http://localhost:4000)

## Why use Ugnis?

  - Create a uniform component library for your company/project.
  - Default components can easily be modified to fit your needs by anyone on the team.
  - Works across frameworks. Perfect when migrating to a new framework.
  - **Future proof** - writing Ugnis to \<insert a new framework name here\> transformer is trivial. Updating to a new Ugnis version is automatic.

**Warning**: Ugnis is still in alpha, while we guarantee that exported code will work, [we are still missing some features](https://github.com/UgnisSoftware/ugnis/#goals-for-10v-release)

## Why have we created Ugnis?

We are freelancers who help companies speed up their front-end development. One of the thing we often have to do is migrating older projects to a new framework.

**Migration sucks** for everyone:
    * **Product Managers** want new features and quicker iterations. Spending so much time refactoring is a hard sell from business perspective.
    * **Designers** want to unify the design, but current design tools don't allow them to be autonomous, they need to rely on developers who are already stretched thin.
    * **Developers** want to "make the code right" this time, but the old code has accumulated bug fixes and edge cases, that are easy to miss when rewriting from scratch.

With Ugnis we can maintain and develop new features for the old codebase. Once most components are in Ugnis, making the jump to a new framework is much easier.

Designers can create components that will be directly used in code and make sure the new styles are uniform across all components.

And whatever new framework comes around, if your components are in Ugnis, you will never have to endure migration again.

## How does Ugnis work internally?

Ugnis is declarative programming taken to the extreme. It's so declarative that reading and writing Ugnis components by hand is painful.
That's why the visual editor exists - it manages the code generation, so you could focus on design and logic.

Ugnis consists of three parts:

  - Declarative definition of your Component.
  - Visual editor that changes the definition.
  - Exporters for each supported framework that take the definition and generate code.

## Goals for 1.0v release

  - [x] Zero configuration, Ugnis-only components don't need webpack or babel
  - [ ] Integrates well with existing frameworks
  - [ ] View components:
    - [x] Box (also know as div/view)
    - [x] Text
    - [x] Image
    - [x] Input
  - [ ] Logic components:
    - [x] If
    - [ ] When (also know as if/else)
    - [ ] List
    - [ ] Recursion
  - [ ] State:
    - [x] Text (also known as string)
    - [x] Number
    - [x] Boolean
    - [x] Table
    - [ ] variants, boolean becomes a variant
    - [ ] connected tables - graphs
    - [ ] Date
  - [ ] Implements every Material Design component:
  - [x] type safety - does not allow runtime errors
  - [ ] Editor keyboard shortcuts are rebindable
  - [ ] Timers
  - [ ] Keyboard events

## Future improvements
  - [ ] Powerful enough to write any application, Ugnis editor is written with Ugnis itself
  - [ ] Hosted version - allow multiple people to work on the same component
  - [ ] Router
  - [ ] Fetch (also known as AJAX)
  - [ ] View components:
    - [ ] Icon
    - [ ] Link
  - [ ] ARIA
  - [ ] editor as a desktop app
  - [ ] server side rendering
  - [ ] application splitting
  - [ ] WebAssembly compiler
  - [ ] editor works well on mobile

## License:

MIT

## Contributors

[<NAME>](https://www.github.com/masiulis)

[<NAME>](https://github.com/Djonix)

[<NAME>](https://github.com/jpetuchovas)

[Vytas Butkus](http://vytasbutkus.com/)

### Thank you:

<NAME>, <NAME>, React team, <NAME>, <NAME>, RxJS team, <NAME>, <NAME>, <NAME>, <NAME>, <NAME>, <NAME> and everyone who is pushing programming forward!
{'fraction_non_alphanumeric': 0.10047788261242495, 'fraction_numerical': 0.007106972184781277, 'mean_word_length': 3.3507462686567164, 'pattern_counts': {'":': 0, '<': 32, '<?xml version=': 0, '>': 32, 'https://': 12, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 5, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4274753', 'n_tokens_mistral': 2489, 'n_tokens_neox': 2381, 'n_words': 1018}