Nier Automata Design System (WIP)
a Wiki site with in-game native User Interface Design. and React component UI libary based on Nier Automata User Interface.
Table of Contents
General Information
Yorha Archive - website to see all about in game resources and informations such as quest, weapons, items, novel, etc, that you would normally see in wiki, but with the native game user interface design.
giving the feelings as if yo are viewing them from the game itself.
Ui Library - React component library based on Nier Automata User Interface, translating them from in game into web components.
There are also several others project im developing in this repository such as the mini game, and some basic chat app with Yorha Signature Interface in this project.
Links
YoRha Archive Website - Informations, journal, and codex from Nier Automata with its signature settings design i built in this project.
UI Library - React components library i built and use for this project, you can try it by downloading it from npm or see it on Storybook.
Project Repository
Components
| Components | Variants | Props | Default |
|---|---|---|---|
| Title | - | title = string subtitle = string |
- |
| Bar | Light, Dark | dark = boolean | light |
| Button | Button, Checkbox | variant = button / checkbox text = string disabled = boolean |
button |
| Footer | - | Text = string | - |
| ScrollElement | - | Content = ReactNode | - |
| ScrollElement Tab | - | Content = ReactNode | - |
| Strip | - | - | - |
| Widget | Light, Dark | Dark = boolean title = string content = ReactNode icon (wip) lvl = string / number |
Light |
| Yorha NavLink | button nav transparent neutral |
text = string to = string filter = string className = string disabled = boolean filterType = string variant = button / nav / transparent / netural |
nav |
| DropDown | - | title = string content = react.node |
- |
Variants and Props Explanations
To do
Stacks
- React with TypeScript
- Styled Components (UI Library is dependant on it)
- Storybook with webpack
- Sass
- Rollup
to do :
- font size on atom level component
- Animations Transitions
- loading splash screen