/NieR-Automata-Design-System

Unofficial Nier Automata resources/information wiki website with its native UI Design, and React UI library based on its design

Primary LanguageTypeScriptMIT LicenseMIT

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.

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

Thanks to

  • MrBunnyGif for the contributions on loading splash screen