Feature | UI component library

package.json

@@ -8,6 +8,7 @@
     "lint": "cd packages/frontend && yarn install --frozen-lockfile && yarn lint",
     "build": "cd packages/frontend && yarn install --frozen-lockfile && yarn build",
     "test": "cd packages/frontend && yarn install --frozen-lockfile && yarn test",
+    "clean": "lerna run clean",
     "prepare": "husky install",
     "release": "lerna version --conventional-commits",
     "commit": "cz"

packages/frontend/src/translations/tr.global.json

@@ -854,6 +854,7 @@
             "error": "Genel anahtar erişimi reddedildi. Hiçbir hesap kurtarılmadı.<br/>Devam etmek için, NEAR Cüzdanının genel anahtarınızı görmesine izin vermelisiniz. Lütfen tekrar deneyin.",
             "success": ""
         },
+        "LackBalanceForState": "Bakiyeniz yetersiz olduğundan işleminizi gerçekleştiremiyoruz. Lütfen hesabınıza NEAR gönderip tekrar deneyin.",
         "NotEnoughBalance": "Hesabınızda bu işlem için yeterli bakiye yok.",
         "PROMPT_TWO_FACTOR": {
             "invalidCode": "Geçersiz 2FA kodu. Lütfen tekrar deneyin."
@@ -893,8 +894,7 @@
         "VERIFY_TWO_FACTOR": {
             "error": "İki Faktörlü Doğrulama kurulumu başarısız oldu. Lütfen tekrar deneyin.",
             "success": "İki Faktörlü Doğrulama başarıyla kuruldu!"
-        },
-        "LackBalanceForState": "Bakiyeniz yetersiz olduğundan işleminizi gerçekleştiremiyoruz. Lütfen hesabınıza NEAR gönderip tekrar deneyin."
+        }
     },
     "releaseNotesModal": {
         "desc": "Siz sordunuz, biz dinledik! En son güncelleme, bakiyelerin cüzdanda nasıl görüntülendiğini ve yeni hesaplar oluşturmanın daha kolay yollarını getiriyor.",

packages/ui-component-library/.gitignore

@@ -0,0 +1,135 @@
+*.log
+.DS_Store
+node_modules
+.cache
+dist
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*

packages/ui-component-library/.storybook/main.js

@@ -0,0 +1,8 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
+  typescript: {
+    check: true, // type-check stories during Storybook build
+  }
+};

packages/ui-component-library/.storybook/preview.js

@@ -0,0 +1,5 @@
+// https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters
+export const parameters = {
+  // https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args
+  actions: { argTypesRegex: '^on.*' },
+};

packages/ui-component-library/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Near Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/ui-component-library/README.md

@@ -0,0 +1,57 @@
+# @near-wallet/ui-component-library
+> The official component library for the NEAR Wallet
+
+[![NPM](https://img.shields.io/npm/v/ui-component-library.svg)](https://www.npmjs.com/package/ui-component-library) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+
+## Install
+
+```bash
+npm install --save @near-wallet/ui-component-library
+```
+
+## Usage
+
+```tsx
+import React, { Component } from 'react'
+
+import { Button } from '@near-wallet/ui-component-library'
+
+class Example extends Component {
+  render() {
+    return <Button />
+  }
+}
+```
+
+
+## 🤔 Why
+
+- This folder acts as an independent library, with its own dependencies and bundler. Code within `frontend` and other packages can reference components from this package by importing from it using the package name `@near-wallet/ui-component-library`.
+
+- This is why you'll notice the following syntax in our frontend `package.json`:
+```json
+{
+  "@near-wallet/ui-component-library": "*"
+}
+```
+
+## 📁 Structure
+When adding a new component, use the following file pattern
+```
+./components
+|
+├─ Badge
+│  ├─ Badge.stories.tsx
+│  ├─ Badge.test.tsx
+│  ├─ Badge.tsx
+│  ├─ index.ts
+
+```
+> Make sure to write stories and tests for every new component added
+
+## 💭 Architecture
+- The primary goal of this package is maximum compatability / reuse with other projects. Any third-party dependencies should be kept to an absolute minimum.
+
+## 🥂 References
+- [Microbundle](https://github.com/developit/microbundle)
+- [Create React Library](https://github.com/transitive-bullshit/create-react-library)

packages/ui-component-library/build-utils/babel-custom.js

@@ -0,0 +1,28 @@
+import { createBabelInputPluginFactory } from '@rollup/plugin-babel';
+
+export default createBabelInputPluginFactory(() => {
+  return {
+    // Passed the plugin options.
+    options({ custom: customOptions, ...pluginOptions }) {
+      return {
+        // Pull out any custom options that the plugin might have.
+        customOptions,
+
+        // Pass the options back with the two custom options removed.
+        pluginOptions
+      };
+    },
+
+    config(config) {
+      const babelOptions = {
+        ...config.options,
+        generatorOpts: {
+          minified: true,
+          compact: true,
+          shouldPrintComment: comment => /[@#]__[A-Z]+__/.test(comment)
+        }
+      };
+      return babelOptions;
+    }
+  };
+});

packages/ui-component-library/example/.npmignore

@@ -0,0 +1,3 @@
+node_modules
+.cache
+dist

packages/ui-component-library/example/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Playground</title>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script src="./index.tsx"></script>
+  </body>
+</html>

packages/ui-component-library/example/index.tsx

@@ -0,0 +1,13 @@
+import 'react-app-polyfill/ie11';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+
+const App = () => {
+  return (
+    <div>
+    </div>
+  );
+};
+
+ReactDOM.render(<App />, document.getElementById('root'));

packages/ui-component-library/example/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "example",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "start": "parcel index.html",
+    "build": "parcel build index.html"
+  },
+  "dependencies": {
+    "react-app-polyfill": "^1.0.0"
+  },
+  "alias": {
+    "react": "../node_modules/react",
+    "react-dom": "../node_modules/react-dom/profiling",
+    "scheduler/tracing": "../node_modules/scheduler/tracing-profiling"
+  },
+  "devDependencies": {
+    "@types/react": "^16.9.11",
+    "@types/react-dom": "^16.8.4",
+    "parcel": "^1.12.3",
+    "typescript": "^3.4.5"
+  }
+}

packages/ui-component-library/example/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": false,
+    "target": "es5",
+    "module": "commonjs",
+    "jsx": "react",
+    "moduleResolution": "node",
+    "noImplicitAny": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "removeComments": true,
+    "strictNullChecks": true,
+    "preserveConstEnums": true,
+    "sourceMap": true,
+    "lib": ["es2015", "es2016", "dom"],
+    "types": ["node"]
+  }
+}