Components module and package structure

.gitignore

@@ -42,6 +42,7 @@ node_modules
 .pnp
 .pnp.js
 *.local
+pnpm-lock.yaml
 
 # testing
 coverage

biome.json

@@ -7,14 +7,16 @@
     "enabled": true,
     "rules": {
       "recommended": true
-    }
+    },
+    "ignore": ["**/dist"]
   },
   "formatter": {
     "enabled": true,
     "formatWithErrors": true,
     "indentStyle": "space",
     "indentWidth": 2,
-    "lineWidth": 80
+    "lineWidth": 80,
+    "ignore": ["**/dist"]
   },
   "files": {
     "ignore": [

package.json

@@ -6,14 +6,13 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "workspaces": [
-    "./packages/*"
-  ],
+  "workspaces": ["./packages/*"],
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "@biomejs/biome": "^1.6.3",
+    "tsup": "^8.0.2",
     "turbo": "^1.13.1"
   }
 }

packages/components/.storybook/main.ts

@@ -0,0 +1,31 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+import { dirname, join } from "node:path";
+
+function getAbsolutePath(value: string) {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+
+const config: StorybookConfig = {
+  stories: ["../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-interactions"),
+    getAbsolutePath("@chakra-ui/storybook-addon"),
+  ],
+  framework: {
+    // @ts-ignore
+    name: getAbsolutePath("@storybook/react-vite"),
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  features: {
+    // @ts-ignore
+    emotionAlias: false,
+  },
+};
+export default config;

packages/components/.storybook/preview.ts

@@ -0,0 +1,14 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

packages/components/biome.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/@biomejs/biome/configuration_schema.json",
+  "extends": ["../../biome.json"],
+  "files": {
+    "ignore": ["**/dist"]
+  }
+}

packages/components/index.ts

@@ -0,0 +1 @@
+export * from "./src";

packages/components/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@bako-ui/components",
+  "version": "0.1.0",
+  "description": "Chakra-ui components of Bako",
+  "source": "src/index.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs"
+    },
+    "./src": {
+      "default": "./src/index.ts"
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/infinitybase/bako-design-system",
+    "directory": "packages/components"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --config tsup.config.ts",
+    "storybook": "sb dev -p 6006",
+    "build-storybook": "sb build"
+  },
+  "peerDependencies": {
+    "@chakra-ui/react": ">=2.8.2",
+    "@emotion/react": ">=11.11.0",
+    "@emotion/styled": ">=11.11.0",
+    "framer-motion": ">=11.0.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@chakra-ui/storybook-addon": "^5.1.0",
+    "@storybook/addon-essentials": "^8.0.5",
+    "@storybook/addon-interactions": "^8.0.5",
+    "@storybook/addon-links": "^8.0.5",
+    "@storybook/addon-onboarding": "^8.0.5",
+    "@storybook/blocks": "^8.0.5",
+    "@storybook/cli": "^8.0.5",
+    "@storybook/react": "^8.0.5",
+    "@storybook/react-vite": "^8.0.5",
+    "@storybook/test": "^8.0.5",
+    "@types/react": "^18.2.74",
+    "tsup": "^8.0.2"
+  }
+}

packages/components/src/dialog/actions.tsx

@@ -0,0 +1,47 @@
+import {
+  Box,
+  type BoxProps,
+  Button,
+  type ButtonProps,
+  Divider,
+  HStack,
+} from "@chakra-ui/react";
+
+export interface DialogActionsProps extends BoxProps {
+  hideDivider?: boolean;
+}
+export interface DialogActionProps extends ButtonProps {}
+
+export const DialogActions = ({
+  children,
+  hideDivider,
+  ...rest
+}: DialogActionsProps) => (
+  <Box w="full" {...rest}>
+    <Divider hidden={hideDivider} my={[3, 6]} />
+    <HStack spacing={4} justifyContent="center">
+      {children}
+    </HStack>
+  </Box>
+);
+
+export const DialogPrimaryAction = (props: DialogActionProps) => (
+  <Button w="full" variant="primary" {...props} />
+);
+
+export const DialogSecondaryAction = (props: DialogActionProps) => (
+  <Button
+    variant="secondary"
+    bgColor="transparent"
+    border="1px solid white"
+    _hover={{
+      borderColor: "brand.500",
+      color: "brand.500",
+    }}
+    {...props}
+  />
+);
+
+export const DialogTertiaryAction = (props: DialogActionProps) => (
+  <Button variant="tertiary" bgColor="error.900" border="none" {...props} />
+);

packages/components/src/dialog/body.tsx

@@ -0,0 +1,10 @@
+import { Box, type BoxProps } from "@chakra-ui/react";
+import React from "react";
+
+export interface DialogBodyProps extends BoxProps {}
+
+export const DialogBody = ({ children, ...rest }: DialogBodyProps) => (
+  <Box w="full" {...rest}>
+    {children}
+  </Box>
+);

packages/components/src/dialog/header.tsx

@@ -0,0 +1,39 @@
+import { Box, Heading, type StackProps, Text, VStack } from "@chakra-ui/react";
+
+export interface DialogHeaderProps extends StackProps {
+  title: string;
+  description?: string;
+  descriptionFontSize?: string;
+  descriptionColor?: string;
+}
+
+export const DialogHeader = ({
+  title,
+  description,
+  descriptionFontSize,
+  descriptionColor,
+  ...stackProps
+}: DialogHeaderProps) => (
+  <VStack
+    w="full"
+    mb={[6, 12]}
+    spacing={3}
+    alignItems="flex-start"
+    {...stackProps}
+  >
+    <Heading fontSize={{ base: "lg", sm: "3xl" }} color="white">
+      {title}
+    </Heading>
+    <Box maxW={500} mb={[4, 0]}>
+      {description && (
+        <Text
+          color={descriptionColor}
+          fontSize={{ base: "sm", sm: descriptionFontSize }}
+          variant="description"
+        >
+          {description}
+        </Text>
+      )}
+    </Box>
+  </VStack>
+);

packages/components/src/dialog/index.tsx

@@ -0,0 +1,26 @@
+import { useDisclosure } from "@chakra-ui/react";
+import {
+  DialogActions,
+  DialogPrimaryAction,
+  DialogSecondaryAction,
+  DialogTertiaryAction,
+} from "./actions";
+import { DialogBody } from "./body";
+import { DialogHeader } from "./header";
+import { DialogModal } from "./modal";
+import { DialogSection } from "./section";
+
+export const Dialog = {
+  Header: DialogHeader,
+  Modal: DialogModal,
+  Body: DialogBody,
+  Actions: DialogActions,
+  PrimaryAction: DialogPrimaryAction,
+  SecondaryAction: DialogSecondaryAction,
+  TertiaryAction: DialogTertiaryAction,
+  Section: DialogSection,
+};
+
+export const useModal = useDisclosure;
+
+export type DialogType = typeof Dialog;

packages/components/src/dialog/link.tsx

@@ -0,0 +1,12 @@
+import { Link as ChakraLink, LinkProps } from '@chakra-ui/react';
+import { Link, useLocation } from 'react-router-dom';
+
+const DialogLink = (props: LinkProps) => {
+  const location = useLocation();
+
+  return (
+    <ChakraLink as={Link} state={{ from: location }} {...props}></ChakraLink>
+  );
+};
+
+export { DialogLink };

packages/components/src/dialog/modal.tsx

@@ -0,0 +1,59 @@
+import {
+  Flex,
+  HStack,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalOverlay,
+  type ModalProps,
+  Text,
+} from "@chakra-ui/react";
+
+export interface DialogModalProps extends ModalProps {
+  hideCloseButton?: boolean;
+}
+
+const DialogModal = (props: DialogModalProps) => {
+  const { children, ...rest } = props;
+
+  const hideCloseButton = props?.hideCloseButton ?? false;
+
+  return (
+    <Modal
+      variant="glassmorphic"
+      size="2xl"
+      blockScrollOnMount={false}
+      isCentered
+      {...rest}
+    >
+      <ModalOverlay />
+      <ModalContent rounded="3xl">
+        {!hideCloseButton && (
+          <Flex w="full" align="center" justifyContent="flex-end">
+            <HStack
+              onClick={props.onClose}
+              cursor="pointer"
+              spacing={2}
+              zIndex={1}
+            >
+              <Text fontWeight="normal" color="white">
+                Close
+              </Text>
+              {/*<CloseIcon />*/}
+            </HStack>
+          </Flex>
+        )}
+        <ModalBody
+          w="full"
+          display="flex"
+          alignItems="center"
+          flexDirection="column"
+        >
+          {children}
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export { DialogModal };

packages/components/src/dialog/section.tsx

@@ -0,0 +1,27 @@
+import { type StackProps, Text, VStack } from "@chakra-ui/react";
+import type React from "react";
+
+export interface DialogSectionProps extends Omit<StackProps, "title"> {
+  title: React.ReactNode;
+  description?: string;
+  children?: React.ReactNode;
+}
+
+const DialogSection = ({
+  title,
+  description,
+  children,
+  ...stackProps
+}: DialogSectionProps) => (
+  <VStack spacing={1} alignItems="flex-start" {...stackProps}>
+    {title}
+    {description && (
+      <Text w="90%" fontSize={{ base: "sm", sm: "md" }} variant="description">
+        {description}
+      </Text>
+    )}
+    {children}
+  </VStack>
+);
+
+export { DialogSection };

packages/components/src/index.ts

@@ -0,0 +1,2 @@
+export { Dialog, useModal } from "./dialog";
+export type { DialogType } from "./dialog";