UI Kit

🚀 UI Kit for ImageKit frontend projects.

Requirements

• Node v14
• yarn

Usage

Run the following command.

yarn add imagekit-ui-kit

Then override the theme in ChakraProvider.

import React from "react"

import {
  Alert,
  Button,
  Checkbox,
  Input,
  Link,
  Select,
  Switch,
  Tabs,
  AlertIcon,
  AlertTitle,
  AlertDescription,
  Box,
  Flex,
  Heading,
  Stack,
  ChakraProvider,
  CloseButton,
  Tab,
  TabList,
  TabPanel,
  TabPanels,
} from "@chakra-ui/react"

import { ChevronRightIcon, DeleteIcon, ExternalLinkIcon } from "@chakra-ui/icons"

import { theme, Fonts, IKReactSelect } from "imagekit-ui-kit"

console.log(theme)

const options = [
  { value: "orange", label: "Orange" },
  { value: "purple", label: "Purple" },
  { value: "red", label: "Red" },
  { value: "green", label: "Green" },
]

export default function App() {
  return (
    <ChakraProvider theme={theme}>
      {/* <Fonts> */}
      <Flex direction="column" alignItems="center" mt={8}>
        <Heading>Button</Heading>
        <Flex direction="row" alignItems="center" mt={3}>
          <Stack spacing={4} direction="column">
            <Button>Save</Button>
            <Button isDisabled>Save</Button>
            <Button variant="outline">Add</Button>
            <Button variant="outline" isDisabled>
              Add
            </Button>
            <Button variant="solid">+Add New</Button>
            <Button variant="solid" isDisabled>
              +Add New
            </Button>
          </Stack>
        </Flex>

        <Heading as="h3" size="md" mt={8}>
          Variants
        </Heading>
        <Flex direction="row" alignItems="center" mt={3}>
          <Stack spacing={4} direction="column">
            <Button variant="deleteCTA">
              <DeleteIcon w={21} h={21} mx="15px" />
              Delete Endpoint
            </Button>
          </Stack>
        </Flex>
      </Flex>

      <Flex direction="column" alignItems="center" mt={8}>
        <Heading>Input</Heading>
        <Flex direction="row" alignItems="center" mt={3}>
          <Stack spacing={5} direction="column">
            <Input placeholder="Here is a sample placeholder" />
            <Input placeholder="Here is a sample placeholder" value="Some text here" onChange={() => {}} />
            <Input isInvalid placeholder="Here is a sample placeholder" value="Invalid input" onChange={() => {}} />
            <Input isDisabled placeholder="Here is a sample placeholder" value="Disabled input" onChange={() => {}} />
          </Stack>
        </Flex>
      </Flex>

      <Flex direction="column" alignItems="center" mt={8}>
        <Heading>Select</Heading>
        <Flex direction="row" alignItems="center" mt={3}>
          <Stack spacing={5} direction="column">
            <Select placeholder="Here is a sample placeholder" />
            <Select placeholder="Here is a sample placeholder" value="Some text here" onChange={() => {}} />
            <Select isInvalid placeholder="Here is a sample placeholder" value="Invalid input" onChange={() => {}} />
            <Select isDisabled placeholder="Here is a sample placeholder" value="Disabled input" onChange={() => {}} />
          </Stack>
        </Flex>
      </Flex>

      <Flex direction="column" alignItems="center" mt={8}>
        <Heading>Checkbox</Heading>
        <Flex direction="row" alignItems="center" mt={3}>
          <Stack spacing={4} direction="column">
            <Checkbox>Checkbox</Checkbox>
            <Checkbox isChecked>Checkbox</Checkbox>
            <Checkbox isInvalid>Checkbox</Checkbox>
            <Checkbox isDisabled>Checkbox</Checkbox>
            <Checkbox isDisabled defaultIsChecked>
              Checkbox
            </Checkbox>
          </Stack>
        </Flex>
      </Flex>

      <Flex direction="column" alignItems="center" mt={8}>
        <Heading>Tabs</Heading>
        <Flex direction="row" alignItems="center" mt={3}>
          <Stack spacing={10} direction="row">
            <Tabs>
              <TabList>
                <Tab>Tab one</Tab>
                <Tab>Tab two</Tab>
              </TabList>

              <TabPanels>
                <TabPanel>
                  <p>one!</p>
                </TabPanel>
                <TabPanel>
                  <p>two!</p>
                </TabPanel>
              </TabPanels>
            </Tabs>
          </Stack>
        </Flex>

        <Flex direction="row" alignItems="center" mt={3}>
          <Stack spacing={10} direction="row">
            <Tabs orientation="vertical">
              <TabList>
                <Tab>
                  Tab one <ChevronRightIcon w="28px" h="28px" position="relative" left="180px" top="2px" />
                </Tab>
                <Tab>
                  Tab two <ChevronRightIcon w="28px" h="28px" position="relative" left="180px" top="2px" />
                </Tab>
              </TabList>

              <TabPanels>
                <TabPanel>
                  <p>one!</p>
                </TabPanel>
                <TabPanel>
                  <p>two!</p>
                </TabPanel>
              </TabPanels>
            </Tabs>
          </Stack>
        </Flex>
      </Flex>

      <Flex direction="column" alignItems="center" mt={8}>
        <Heading>Link</Heading>
        <Flex direction="row" alignItems="center" mt={3}>
          <Stack spacing={10} direction="row">
            <Link>ImageKit</Link>
            <Link variant="disabled">ImageKit</Link>
            <Link href="https://imagekit.io" isExternal>
              ImageKit Website <ExternalLinkIcon mx="2px" />
            </Link>
          </Stack>
        </Flex>
      </Flex>

      <Flex direction="column" alignItems="center" mt={8}>
        <Heading>Switch</Heading>
        <Flex direction="row" alignItems="center" mt={3}>
          <Stack spacing={10} direction="row">
            <Switch />
            <Switch isChecked />
          </Stack>
        </Flex>

        <Flex direction="row" alignItems="center" mt={3}>
          <Stack spacing={10} direction="row">
            <Switch size="lg" />
            <Switch size="lg" isChecked />
          </Stack>
        </Flex>
      </Flex>

      <Flex direction="column" alignItems="center" mt={8}>
        <Heading>Alert</Heading>

        <Heading as="h3" size="md" mt={3}>
          Solid
        </Heading>
        <Flex direction="row" alignItems="center" mt={3}>
          <Stack spacing={4} direction="column">
            <Alert status="info" variant="solid">
              <AlertIcon />
              <AlertDescription>Alert status message here</AlertDescription>
              <CloseButton position="absolute" right="12px" top="12px" />
            </Alert>
            <Alert status="warning" variant="solid">
              <AlertIcon />
              <AlertDescription>Alert status message here</AlertDescription>
              <CloseButton position="absolute" right="12px" top="12px" />
            </Alert>
            <Alert status="success" variant="solid">
              <AlertIcon />
              <AlertDescription>Alert status message here</AlertDescription>
              <CloseButton position="absolute" right="12px" top="12px" />
            </Alert>
            <Alert status="error" variant="solid">
              <AlertIcon />
              <AlertDescription>Alert status message here</AlertDescription>
              <CloseButton position="absolute" right="12px" top="12px" />
            </Alert>
            <Alert status="info" variant="solid">
              <AlertIcon />
              <Box flex="1">
                <AlertTitle mr={2}>Title</AlertTitle>
                <AlertDescription display="block">Alert status message here</AlertDescription>
                <CloseButton position="absolute" right="12px" top="16px" />
              </Box>
            </Alert>
            <Alert status="warning" variant="solid">
              <AlertIcon />
              <Box flex="1">
                <AlertTitle mr={2}>Title</AlertTitle>
                <AlertDescription display="block">Alert status message here</AlertDescription>
                <CloseButton position="absolute" right="12px" top="16px" />
              </Box>
            </Alert>
            <Alert status="success" variant="solid">
              <AlertIcon />
              <Box flex="1">
                <AlertTitle mr={2}>Title</AlertTitle>
                <AlertDescription display="block">Alert status message here</AlertDescription>
                <CloseButton position="absolute" right="12px" top="16px" />
              </Box>
            </Alert>
            <Alert status="error" variant="solid">
              <AlertIcon />
              <Box flex="1">
                <AlertTitle mr={2}>Title</AlertTitle>
                <AlertDescription display="block">Alert status message here</AlertDescription>
                <CloseButton position="absolute" right="12px" top="16px" />
              </Box>
            </Alert>
          </Stack>
        </Flex>

        <Heading as="h3" size="md" mt={8}>
          Subtle
        </Heading>
        <Flex direction="row" alignItems="center" mt={3}>
          <Stack spacing={2} direction="column">
            <Alert status="info">
              <AlertIcon />
              <AlertDescription>Alert status message here</AlertDescription>
              <CloseButton position="absolute" right="12px" top="12px" />
            </Alert>
            <Alert status="warning">
              <AlertIcon />
              <AlertDescription>Alert status message here</AlertDescription>
              <CloseButton position="absolute" right="12px" top="12px" />
            </Alert>
            <Alert status="success">
              <AlertIcon />
              <AlertDescription>Alert status message here</AlertDescription>
              <CloseButton position="absolute" right="12px" top="12px" />
            </Alert>
            <Alert status="error">
              <AlertIcon />
              <AlertDescription>Alert status message here</AlertDescription>
              <CloseButton position="absolute" right="12px" top="12px" />
            </Alert>
            <Alert status="info">
              <AlertIcon />
              <Box flex="1">
                <AlertTitle mr={2}>Title</AlertTitle>
                <AlertDescription display="block">Alert status message here</AlertDescription>
                <CloseButton position="absolute" right="12px" top="16px" />
              </Box>
            </Alert>
            <Alert status="warning">
              <AlertIcon />
              <Box flex="1">
                <AlertTitle mr={2}>Title</AlertTitle>
                <AlertDescription display="block">Alert status message here</AlertDescription>
                <CloseButton position="absolute" right="12px" top="16px" />
              </Box>
            </Alert>
            <Alert status="success">
              <AlertIcon />
              <Box flex="1">
                <AlertTitle mr={2}>Title</AlertTitle>
                <AlertDescription display="block">Alert status message here</AlertDescription>
                <CloseButton position="absolute" right="12px" top="16px" />
              </Box>
            </Alert>
            <Alert status="error">
              <AlertIcon />
              <Box flex="1">
                <AlertTitle mr={2}>Title</AlertTitle>
                <AlertDescription display="block">Alert status message here</AlertDescription>
                <CloseButton position="absolute" right="12px" top="16px" />
              </Box>
            </Alert>
          </Stack>
        </Flex>
      </Flex>

      <Flex direction="column" alignItems="center" mt={8}>
        <Heading>React Select</Heading>
        <Flex direction="row" alignItems="center" mt={3}>
          <Stack spacing={10} direction="row">
            <Box w="408px">
              <IKReactSelect options={options} />
            </Box>
          </Stack>
        </Flex>

        <Flex direction="row" alignItems="center" mt={3}>
          <Stack spacing={10} direction="row">
            <Box w="408px">
              <IKReactSelect options={options} menuIsOpen />
            </Box>
          </Stack>
        </Flex>

        <Flex direction="row" alignItems="center" mt={3}>
          <Stack spacing={10} direction="row">
            <Box w="408px">
              <IKReactSelect options={options} value={[options[0], options[1]]} isMulti />
            </Box>
          </Stack>
        </Flex>
      </Flex>

      <br />

      {/* </Fonts> */}
    </ChakraProvider>
  )
}

Development

Package.json Scripts

| Command | Description | | ----------- | ------------------------------------------------------------------------------------------------------------------------- | | test | Run Test Cases | | postinstall | Executes after running yarn install - Automatically Installs Types required adding a package and removes on removal | | dev | Run nodemon for development | | build | Generate dist package | | serve | Generate dist package and run index.js | | prepare | Executes with yarn install - Initialises husky hooks |