# imagekit-ui-kit

> ImageKit UI Kit

Latest version **2.0.0** (published 2022-01-05) · ISC license · 0 weekly downloads

## Install

```sh
npm install imagekit-ui-kit
pnpm add imagekit-ui-kit
yarn add imagekit-ui-kit
bun add imagekit-ui-kit
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2022-01-05 |
| First published | 2022-01-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=10.0.0 |
| Dependencies | 7 |
| Unpacked size | 199.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ImageKit |
| Maintainers | imagekit-developer |
| Keywords | ui, react, chakra, theme |

## Links

- npm: https://www.npmjs.com/package/imagekit-ui-kit
- npm.io page: https://npm.io/package/imagekit-ui-kit

## Dependencies (7)

- [react-select](https://npm.io/package/react-select.md) ^4.3.1
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11
- [@chakra-ui/icons](https://npm.io/package/@chakra-ui/icons.md) ^1.0.15
- [@chakra-ui/react](https://npm.io/package/@chakra-ui/react.md) ^1.6.7
- [react-datepicker](https://npm.io/package/react-datepicker.md) ^4.2.1
- [styled-components](https://npm.io/package/styled-components.md) ^5.3.1

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 2.0.0 (latest) — 2022-01-05

## README

# UI Kit

🚀 UI Kit for ImageKit frontend projects.

## Requirements

- Node v14
- yarn

## Usage

Run the following command.

```bash
yarn add imagekit-ui-kit
```

Then override the `theme` in `ChakraProvider`.

```jsx
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`<br> - 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`<br> - Initialises husky hooks                                                                |

---
_Source: https://npm.io/package/imagekit-ui-kit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._