feat: add common components

packages/adena-extension/src/components/atoms/option-dropdown/index.ts

@@ -0,0 +1 @@
+export * from './option-dropdown';

packages/adena-extension/src/components/atoms/option-dropdown/option-dropdown.spec.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { GlobalPopupStyle } from '@styles/global-style';
+import theme from '@styles/theme';
+import { render } from '@testing-library/react';
+import { RecoilRoot } from 'recoil';
+import { ThemeProvider } from 'styled-components';
+import OptionDropdown, { OptionDropdownProps } from './option-dropdown';
+
+describe('OptionDropdown Component', () => {
+  it('OptionDropdown render', () => {
+    const args: OptionDropdownProps = {
+      options: [],
+      buttonNode: <></>,
+      hover: false,
+    };
+
+    render(
+      <RecoilRoot>
+        <GlobalPopupStyle />
+        <ThemeProvider theme={theme}>
+          <OptionDropdown {...args} />
+        </ThemeProvider>
+      </RecoilRoot>,
+    );
+  });
+});

packages/adena-extension/src/components/atoms/option-dropdown/option-dropdown.stories.tsx

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import OptionDropdown, { type OptionDropdownProps } from './option-dropdown';
+
+export default {
+  title: 'components/common/OptionDropdown',
+  component: OptionDropdown,
+} as Meta<typeof OptionDropdown>;
+
+export const Default: StoryObj<OptionDropdownProps> = {
+  args: {},
+};

packages/adena-extension/src/components/atoms/option-dropdown/option-dropdown.styles.ts

@@ -0,0 +1,95 @@
+import { Row, View } from '@components/atoms';
+import mixins from '@styles/mixins';
+import { fonts, getTheme } from '@styles/theme';
+import styled, { css, FlattenSimpleInterpolation } from 'styled-components';
+
+export const OptionDropdownWrapper = styled(View)<{ position: 'left' | 'right' }>`
+  position: relative;
+  width: 24px;
+  height: auto;
+
+  .button-wrapper {
+    display: flex;
+    width: 24px;
+    height: 24px;
+    border-radius: 24px;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+
+    :hover {
+      background-color: ${getTheme('neutral', '_7')};
+    }
+  }
+
+  &.opened {
+    .button-wrapper {
+      background-color: ${getTheme('neutral', '_7')};
+    }
+  }
+
+  .dropdown-static-wrapper {
+    ${mixins.flex()}
+    position: absolute;
+    min-width: 146px;
+    background-color: ${getTheme('neutral', '_8')};
+    border: 1px solid ${getTheme('neutral', '_7')};
+    border-radius: 12.5px;
+    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
+    z-index: 99;
+    overflow: hidden;
+
+    ${({ position }): FlattenSimpleInterpolation | string =>
+      position === 'left'
+        ? css`
+            left: -122px;
+            top: 100%;
+          `
+        : ''}
+  }
+`;
+
+export const OptionDropdownItemWrapper = styled(Row)`
+  width: 100%;
+  height: 30px;
+  padding: 7px 0 7px 12px;
+  gap: 8px;
+  justify-content: flex-start;
+  align-items: center;
+  transition: 0.2s;
+  cursor: pointer;
+
+  .item-icon-wrapper {
+    display: block;
+    width: 12px;
+    height: 14px;
+
+    & > svg {
+      width: 12px;
+      height: 12px;
+
+      &.large {
+        width: 14px;
+        height: 14px;
+      }
+    }
+  }
+
+  & > .title {
+    display: inline-flex;
+    width: 100%;
+    ${fonts.body3Reg}
+  }
+
+  & + & {
+    border-top: 1px solid ${getTheme('neutral', '_7')};
+  }
+
+  &.selected {
+    background-color: ${getTheme('neutral', '_7')};
+  }
+
+  &:hover {
+    background-color: ${getTheme('neutral', '_7')};
+  }
+`;

packages/adena-extension/src/components/atoms/option-dropdown/option-dropdown.tsx

@@ -0,0 +1,87 @@
+import React, { useCallback, useState } from 'react';
+import { OptionDropdownItemWrapper, OptionDropdownWrapper } from './option-dropdown.styles';
+
+interface OptionItem {
+  icon?: React.ReactNode;
+  text: string;
+  onClick: () => void;
+}
+
+export interface OptionDropdownProps {
+  buttonNode: React.ReactNode;
+  options: OptionItem[];
+  hover?: boolean;
+}
+
+const OptionDropdown: React.FC<OptionDropdownProps> = ({ buttonNode, options, hover }) => {
+  const [opened, setOpened] = useState(false);
+
+  const onMouseOverDropdown = useCallback(() => {
+    if (!hover) {
+      return;
+    }
+
+    setOpened(true);
+  }, [hover]);
+
+  const onMouseOutDropdown = useCallback(() => {
+    setOpened(false);
+  }, [hover]);
+
+  const onClickDropdown = useCallback(() => {
+    if (hover) {
+      return;
+    }
+    setOpened(true);
+  }, [hover]);
+
+  const onClickOptionItem = useCallback((option: OptionDropdownItemProps) => {
+    option.onClick();
+    setOpened(false);
+  }, []);
+
+  return (
+    <OptionDropdownWrapper
+      className={opened ? 'opened' : ''}
+      position='left'
+      onMouseOver={onMouseOverDropdown}
+      onMouseOut={onMouseOutDropdown}
+      onClick={onClickDropdown}
+    >
+      <div className='button-wrapper'>{buttonNode}</div>
+
+      {opened && (
+        <div className={opened ? 'dropdown-static-wrapper active' : 'dropdown-static-wrapper'}>
+          {options.map((option, index) => (
+            <OptionDropdownItem
+              key={index}
+              text={option.text}
+              icon={option.icon}
+              onClick={(): void => onClickOptionItem(option)}
+            />
+          ))}
+        </div>
+      )}
+    </OptionDropdownWrapper>
+  );
+};
+
+/**
+ * Option Dropdown Item Component
+ */
+interface OptionDropdownItemProps {
+  icon?: React.ReactNode;
+  text: string;
+  onClick: () => void;
+}
+
+const OptionDropdownItem: React.FC<OptionDropdownItemProps> = ({ icon, text, onClick }) => {
+  return (
+    <OptionDropdownItemWrapper onClick={onClick}>
+      <div className='item-icon-wrapper'>{!!icon && icon}</div>
+      <span className='title'>{text}</span>
+    </OptionDropdownItemWrapper>
+  );
+};
+
+export default OptionDropdown;

packages/adena-extension/src/components/atoms/sub-header/sub-header.styles.ts

@@ -1,12 +1,18 @@
 import mixins from '@styles/mixins';
-import { fonts } from '@styles/theme';
+import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const SubHeaderWrapper = styled.div`
   ${mixins.flex({ direction: 'row' })};
   position: relative;
   width: 100%;
 
+  .icon-dropdown {
+    path {
+      fill: ${getTheme('neutral', 'a')};
+    }
+  }
+
   .icon-wrapper {
     position: absolute;
     display: flex;
@@ -31,6 +37,11 @@ export const SubHeaderWrapper = styled.div`
   }
 
   .title-wrapper {
+    max-width: calc(100% - 48px - 32px);
+    text-overflow: ellipsis;
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
     ${fonts.header4}
   }
 `;

packages/adena-extension/src/components/atoms/toggle/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ToggleWrapper } from './toggle.styles';
+
+export interface ToggleProps {
+  activated: boolean;
+  onToggle: (activated: boolean) => void;
+}
+
+const Toggle: React.FC<ToggleProps> = ({ activated, onToggle }) => {
+  return (
+    <ToggleWrapper
+      className={activated ? 'activated' : ''}
+      onClick={(): void => onToggle(!activated)}
+    >
+      <div className='circle' />
+    </ToggleWrapper>
+  );
+};
+
+export default Toggle;

packages/adena-extension/src/components/atoms/toggle/toggle.spec.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { RecoilRoot } from 'recoil';
+import { ThemeProvider } from 'styled-components';
+import { render } from '@testing-library/react';
+import theme from '@styles/theme';
+import { GlobalPopupStyle } from '@styles/global-style';
+import Toggle, { ToggleProps } from '.';
+
+describe('Toggle Component', () => {
+  it('Toggle render', () => {
+    const args: ToggleProps = {
+      activated: true,
+      onToggle: () => {
+        return;
+      },
+    };
+
+    render(
+      <RecoilRoot>
+        <GlobalPopupStyle />
+        <ThemeProvider theme={theme}>
+          <Toggle {...args} />
+        </ThemeProvider>
+      </RecoilRoot>,
+    );
+  });
+});

packages/adena-extension/src/components/atoms/toggle/toggle.stories.tsx

@@ -0,0 +1,22 @@
+import Toggle, { type ToggleProps } from '.';
+import { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'components/common/Toggle',
+  component: Toggle,
+} as Meta<typeof Toggle>;
+
+export const Activated: StoryObj<ToggleProps> = {
+  args: {
+    activated: true,
+    onToggle: action('on toggle'),
+  },
+};
+
+export const Deactivated: StoryObj<ToggleProps> = {
+  args: {
+    activated: false,
+    onToggle: action('on toggle'),
+  },
+};

packages/adena-extension/src/components/atoms/toggle/toggle.styles.ts

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+import { getTheme } from '@styles/theme';
+import mixins from '@styles/mixins';
+
+export const ToggleWrapper = styled.div`
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
+  flex-shrink: 0;
+  width: 46px;
+  height: 26px;
+  padding: 3px;
+  border-radius: 100px;
+  background-color: ${getTheme('neutral', '_5')};
+  transition: 0.2s;
+  cursor: pointer;
+
+  .circle {
+    display: block;
+    width: 20px;
+    height: 20px;
+    background-color: ${getTheme('neutral', '_1')};
+    border-radius: 20px;
+    transition: 0.2s;
+  }
+
+  &.activated {
+    background-color: ${getTheme('primary', '_7')};
+
+    .circle {
+      margin-left: 20px;
+    }
+  }
+`;