2.0.0 ā¢ Published 2 years ago
imagekit-ui-kit v2.0.0
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 |
2.0.0
2 years ago