Merge branch 'dev' into feat/SOV-146-d-2-tooltip-component-implementa…

…tion

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.github/workflows/release.yml

@@ -0,0 +1,35 @@
+name: Release packages
+
+on:
+  push:
+    branches: [ "main" ]
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js 16.x
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16.x
+
+      - name: Install Dependencies
+        run: yarn
+
+      - name: Build & Test packages
+        run: yarn turbo run build lint test --filter=./packages/*
+
+      - name: Create Release Pull Request or Publish to npm
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          publish: yarn changeset publish
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/test.yml

@@ -6,6 +6,8 @@ on:
   pull_request:
     branches: [ "dev", "main" ]
 
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
 jobs:
   test:
 

package.json

@@ -15,7 +15,8 @@
     "test:staged": "turbo run test:staged",
     "coverage": "turbo run coverage",
     "storybook": "turbo run storybook",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "publish-packages": "turbo run build lint test --filter=./packages/* && changeset publish"
   },
   "devDependencies": {
     "@sovryn/eslint-config-custom": "*",
@@ -36,5 +37,8 @@
       "prettier --write"
     ]
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "dependencies": {
+    "@changesets/cli": "^2.25.0"
+  }
 }

packages/ui/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @sovryn/ui
+
+## 0.0.1
+
+### Patch Changes
+
+- fc23675: initial components

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sovryn/ui",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "main": "./dist/index.js",
   "module": "./dist/index.esm.js",
   "types": "./dist/typings.d.ts",

packages/ui/src/1_atoms/Icon/Icon.stories.tsx

@@ -4,8 +4,7 @@ import { Story } from '@storybook/react';
 import React, { ComponentProps, useMemo } from 'react';
 
 import { Icon } from './Icon';
-import { IconName } from './Icon.types';
-import * as IconNames from './iconNames';
+import { IconName, IconNames } from './Icon.types';
 
 export default {
   title: 'Atoms/Icon',

packages/ui/src/1_atoms/Icon/Icon.types.ts

@@ -2,7 +2,33 @@ import type { IconProp } from '@fortawesome/fontawesome-svg-core';
 
 import { ReactNode } from 'react';
 
-import * as IconNames from './iconNames';
+export enum IconNames {
+  ARROW_DOWN_WIDE = 'arrow-down-wide',
+  ARROW_DOWN = 'arrow-down',
+  ARROW_RIGHT = 'arrow-right',
+  ARROW_FORWARD = 'arrow-forward',
+  DEPOSIT = 'deposit',
+  EDIT = 'edit',
+  FAILED_TX = 'failed-tx',
+  INFO = 'info',
+  MEATBALLS_MENU = 'meatballs-menu',
+  NEW_TAB = 'new-tab',
+  NOTIFICATIONS_ACTIVE = 'notifications-active',
+  NOTIFICATIONS = 'notifications',
+  PENDING = 'pending',
+  SEARCH = 'search',
+  SETTINGS = 'settings',
+  SUCCESS_ICON = 'success-icon',
+  SWAP_ARROW = 'swap-arrow',
+  TRANSFER = 'transfer',
+  TREND_ARROW_UP = 'trend-arrow-up',
+  TREND_ARROW_DOWN = 'trend-arrow-down',
+  WARNING = 'warning',
+  WITHDRAW = 'withdraw',
+  X_MARK = 'x-mark',
+  COPY = 'copy',
+  EXIT = 'exit',
+}
 
 export type IconName = typeof IconNames[keyof typeof IconNames];
 

packages/ui/src/1_atoms/Icon/icon.test.tsx

@@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react';
 import React from 'react';
 
 import { Icon } from './Icon';
-import { WARNING } from './iconNames';
+import { IconNames } from './Icon.types';
 
 const customIcon = (
   <svg width="20" height="20" data-icon="customIcon" viewBox="0 0 20 20">
@@ -27,7 +27,7 @@ describe('Test for all icon types', () => {
   });
 
   test('renders an icon from Sovryn Library', () => {
-    render(<Icon icon={WARNING} />);
+    render(<Icon icon={IconNames.WARNING} />);
     expect(screen.findAllByRole('svg[data-icon="warning"]')).toBeDefined();
   });
 });

packages/ui/src/2_molecules/Dropdown/Dropdown.tsx

@@ -12,7 +12,7 @@ import React, {
 import classNames from 'classnames';
 
 import { Icon } from '../../1_atoms/Icon/Icon';
-import { ARROW_DOWN } from '../../1_atoms/Icon/iconNames';
+import { IconNames } from '../../1_atoms/Icon/Icon.types';
 import { Portal } from '../../1_atoms/Portal/Portal';
 import { useOnClickOutside } from '../../hooks/useOnClickOutside';
 import { Nullable } from '../../types';
@@ -120,7 +120,7 @@ export const Dropdown = forwardRef<HTMLButtonElement, DropdownProps>(
         >
           {text}
           <Icon
-            icon={ARROW_DOWN}
+            icon={IconNames.ARROW_DOWN}
             size={10}
             className={classNames(styles.icon, {
               [styles.isOpen]: isOpen,

packages/ui/src/2_molecules/WalletContainer/WalletContainer.module.css

@@ -0,0 +1,21 @@
+.walletContainer {
+  @apply flex items-center justify-between w-full h-12 pl-4 pr-3 transition-colors rounded bg-gray-70 text-gray-10 text-opacity-75;
+
+  &:hover {
+    @apply text-opacity-100 cursor-pointer bg-gray-60;
+    & .icon {
+      @apply grayscale-0;
+    }
+  }
+
+  & .icon {
+    @apply h-[2.125rem] w-[2.125rem] rounded p-[0.313rem] bg-gray-10 bg-opacity-10 text-center grayscale;
+  }
+  & .label {
+    @apply flex items-center justify-center;
+
+    & > svg {
+      @apply ml-1.5;
+    }
+  }
+}

packages/ui/src/2_molecules/WalletContainer/WalletContainer.stories.tsx

@@ -0,0 +1,61 @@
+import { Story } from '@storybook/react';
+
+import React, { ComponentProps } from 'react';
+
+import { Icon } from '../../1_atoms/Icon/Icon';
+import { IconNames } from '../../1_atoms/Icon/Icon.types';
+import { WalletContainer } from './WalletContainer';
+
+export default {
+  title: 'Molecule/WalletContainer',
+  component: WalletContainer,
+};
+
+const Template: Story<ComponentProps<typeof WalletContainer>> = args => (
+  <div style={{ width: '200px' }}>
+    <WalletContainer
+      {...args}
+      onClick={() => alert('WalletContainer clicked')}
+    />
+  </div>
+);
+
+export const Basic = Template.bind({});
+Basic.args = {
+  name: 'Ledger',
+  icon: '',
+  tooltip: '',
+  dataLayoutId: '',
+  className: '',
+};
+
+const Advanced: Story<ComponentProps<typeof WalletContainer>> = args => (
+  <div style={{ width: '200px' }}>
+    <WalletContainer
+      {...args}
+      name="Ledger"
+      icon={<Icon icon={IconNames.INFO} size={24} className="text-warning" />}
+      onClick={() => alert('Ledger clicked')}
+    />
+    <br />
+    <WalletContainer
+      {...args}
+      name="Trezor"
+      tooltip="tooltip"
+      icon={
+        <Icon
+          icon={IconNames.NOTIFICATIONS}
+          size={25}
+          className="text-primary"
+        />
+      }
+      onClick={() => alert('Trezor clicked')}
+    />
+  </div>
+);
+
+export const WithIcon = Advanced.bind({});
+WithIcon.args = {
+  dataLayoutId: '',
+  className: '',
+};

packages/ui/src/2_molecules/WalletContainer/WalletContainer.test.tsx

@@ -0,0 +1,44 @@
+import { render, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import React from 'react';
+
+import { Icon } from '../../1_atoms/Icon/Icon';
+import { WalletContainer } from './WalletContainer';
+
+describe('WalletContainer', () => {
+  it('should render a component', () => {
+    const { getByText } = render(<WalletContainer name="Ledger" />);
+    expect(getByText('Ledger')).toBeInTheDocument();
+  });
+
+  it('should render a component with an icon', () => {
+    const { findByRole } = render(
+      <WalletContainer name="Ledger" icon={<Icon icon="info" />} />,
+    );
+    expect(findByRole('svg[data-icon="info"]')).toBeDefined();
+  });
+
+  it('eventHandler called on click', () => {
+    const handleClick = jest.fn();
+    const { getByText } = render(
+      <WalletContainer
+        name="Ledger"
+        icon={<Icon icon="info" />}
+        onClick={handleClick}
+      />,
+    );
+    userEvent.click(getByText('Ledger'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('can be focused when using refs (button)', () => {
+    const ref = React.createRef<HTMLButtonElement>();
+    render(
+      <WalletContainer name="Ledger" icon={<Icon icon="info" />} ref={ref} />,
+    );
+    waitFor(() => ref.current);
+    ref.current?.focus();
+    expect(document.activeElement).toEqual(ref.current);
+  });
+});

packages/ui/src/2_molecules/WalletContainer/WalletContainer.tsx

@@ -0,0 +1,34 @@
+import React, { ReactNode, forwardRef, LegacyRef } from 'react';
+
+import classNames from 'classnames';
+
+import { Icon } from '../../1_atoms/Icon/Icon';
+import styles from './WalletContainer.module.css';
+
+type WalletContainerProps = {
+  name: string;
+  icon?: ReactNode;
+  tooltip?: string;
+  className?: string;
+  dataLayoutId?: string;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+export const WalletContainer = forwardRef<
+  HTMLButtonElement,
+  WalletContainerProps
+>(({ name, icon, tooltip, className, dataLayoutId, ...buttonProps }, ref) => {
+  return (
+    <button
+      ref={ref as LegacyRef<HTMLButtonElement>}
+      data-layout-id={dataLayoutId}
+      className={classNames(className, styles.walletContainer)}
+      {...buttonProps}
+    >
+      <div className={styles.label}>
+        {name}
+        {tooltip && <Icon icon="info" size={10} />}
+      </div>{' '}
+      {icon && <div className={styles.icon}>{icon}</div>}
+    </button>
+  );
+});