MSK UI

A Library of UI Components and Custom Hooks used in MSK projects.

1. Components
2. Hooks

This Library is implemented with the following Technology Stack.

• Vite
• React
• TypeScript
• Storybook
• Tailwind CSS

Components

1. Avatar
2. AvatarGroup
3. Button
4. ButtonGroup
5. Dropdown
6. Input

Avatar

import { Avatar } from '@dev_imlab/msk-ui';

const App = () => {
  return (
    <Avatar
      image={{
        src: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2340&q=80',
      }}
    />
  );
};

AvatarGroup

import { Avatar, AvatarGroup } from '@dev_imlab/msk-ui';

const App = () => {
  return (
    <AvatarGroup>
      <Avatar
        image={{
          src: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2340&q=80',
        }}
      />
      <Avatar
        image={{
          src: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2340&q=80',
        }}
      />
      <Avatar
        image={{
          src: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2340&q=80',
        }}
      />
    </AvatarGroup>
  );
};

Button

import { Input } from '@dev_imlab/msk-ui';

const App = () => {
  return (
    <Button size='lg' variant='primary'>
      Button
    </Button>
  );
};

ButtonGroup(beta)

Dropdown

import { Dropdown, useDropdown } from '@dev_imlab/msk-ui';

const App = () => {
  const { selectedDropdownItem, handleDropdownSelect } = useDropdown({
    initialState: 'Item 1',
  });

  return (
    <Dropdown>
      <Dropdown.Trigger variant='filled' icon='>'>
        {selectedDropdownItem}
      </Dropdown.Trigger>
      <Dropdown.Menu>
        <Dropdown.Item onDropdownSelect={handleDropdownSelect}>
          Item 1
        </Dropdown.Item>
        <Dropdown.Item onDropdownSelect={handleDropdownSelect}>
          Item 2
        </Dropdown.Item>
        <Dropdown.Item onDropdownSelect={handleDropdownSelect}>
          Item 3
        </Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  );
};

Input

import { Input } from '@dev_imlab/msk-ui';

const App = () => {
  return <Input type='text' variant='box' />;
};

Hooks

1. useDropdown

useDropdown

import { Dropdown, useDropdown } from '@dev_imlab/msk-ui';

const App = () => {
  const { selectedDropdownItem, handleDropdownSelect } = useDropdown({
    initialState: 'Item 1',
  });

  return (
    <Dropdown>
      <Dropdown.Trigger variant='filled' icon='>'>
        {selectedDropdownItem}
      </Dropdown.Trigger>
      <Dropdown.Menu>
        <Dropdown.Item onDropdownSelect={handleDropdownSelect}>
          Item 1
        </Dropdown.Item>
        <Dropdown.Item onDropdownSelect={handleDropdownSelect}>
          Item 2
        </Dropdown.Item>
        <Dropdown.Item onDropdownSelect={handleDropdownSelect}>
          Item 3
        </Dropdown.Item>
      </Dropdown.Menu>
    </Dropdown>
  );
};