# Photon UI Library

## Abstract
- Small engineering teams without the design resources often end up in creating engineering lead designs.
- Design patterns which have been researched, and summarised by designers

## Motivation

##

## Methods

Design and implement a set of functional (dumb/view) react-native components that are specific to bitcoin's functionalties that application developers are able to plug in their application backends to.

Examples of such components could be:
- Simplified Coin Control using Presets
- Transaction Builder
- Address Input with Validation
- Transaction List
- BIP21 URL
- BOLT11
- Payjoin
- Fee Selection

### Developer Outreach
Seek out wallet developers who are able to contribute to photon by adopting a component API structure that is compliant with those of photon-ui-library.

### Atomic Design
Organisation of core components and design patterns ...

File structure...
- atoms
- Button
- Input
- Icons
- molecules
- AddressInput
- AmountInput
- PhoneNumber
- organisms
- CoinControlWithPresets
- TransactionBuilder

#### Atoms
We need to have a base of elements like buttons, labels and form inputs to build more complex ones from.

- We can expect projects wanting to do their own implmentations from scratch though. When this happens a problem which arises is that there multiple variants of a button in the application code, with varying APIs (i.e. React props).

#### Molecules

#### Organisms

### Example (react-native)
Implementing a new component into the library...

#### config.json

{
    "name": "CoinControlManual",
    "design_src": "https://figma...",
    "cover_photo": "assets/cover.png",
    "description": "Manual coin selection ..."
    "screenshots": [
        "assets/screenshots_0.png",
        "assets/screenshots_1.png",
        "assets/screenshots_2.png"
    ]
}

#### API
...
##### types.d.ts

interface ICoin {
    ...
}

interface ICoinControl {
    coins: Array<Coin>;
    onSelectedCoins(): Array<ICoin>;
}

##### Usage

<CoinControl
 coins={[...arrayOfCoins]}
 onSelectedCoins={(selectedCoins) => {
   // do something with coins 
 }}
/>