add box stories & enchance box

CONTRIBUTING.md

@@ -0,0 +1,15 @@
+# Contributing
+
+First of all, Thank you very much for taking interest on this repository. Your good intention to contribute is very appreciated.
+
+This is a monorepo for the project masjid-network. It contains code for both Frontend and Backend. you can find the code on each respective folder.
+
+When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change.
+
+### Frontend
+
+For frontend, we use the `frontend` folder. Here is the step to contribute for the first timers:
+
+- cd into `frontend` folder
+- Type `npm install` into your terminal (make sure you have node and npm installed)
+- after installing dependencies, you can start the project in development mode with `npm run dev`

frontend/design-system/components/box.tsx

@@ -4,6 +4,25 @@ import isPropValid from '@emotion/is-prop-valid'
 import { spacing } from '../units'
 import { theme as defaultTheme } from '../theme'
 import { isObjectEmpty } from '../../utils/isObjectEmpty'
+import { Theme } from '@emotion/react'
+
+const defaultProps = {
+    paddingX: 1,
+    paddingY: 1,
+    marginX: 1,
+    marginY: 1,
+    width: 'auto',
+    display: 'block',
+    theme: defaultTheme,
+}
+
+interface BoxProps extends React.CSSProperties {
+    paddingX?: number;
+    paddingY?: number;
+    marginX?: number;
+    marginY?: number;
+    theme: Theme;
+}
 
 const StyledBox = ({
     paddingX,
@@ -14,7 +33,7 @@ const StyledBox = ({
     display,
     theme,
     ...props
-}) => {
+}: BoxProps = defaultProps) => {
     if (isObjectEmpty(theme)) {
         theme = defaultTheme;
     }
@@ -47,6 +66,7 @@ const StyledBox = ({
     }
 
     return {
+        ...props,
         padding,
         paddingTop,
         paddingRight,

frontend/emotion.d.ts

@@ -0,0 +1,37 @@
+import '@emotion/react'
+
+declare module '@emotion/react' {
+  export interface Theme {
+    palette: {
+        common: {
+            black: string,
+            white: string,
+        },
+        primary: {
+            main: string,
+            light: string,
+            contrastText: string,
+        },
+        error: {
+            main: string,
+            light: string,
+            contrastText: string,
+        },
+        grey: {
+            100: string,
+            200: string,
+            300: string,
+            400: string,
+        },
+    },
+    shadows: {
+        0: string,
+        1: string,
+        2: string,
+    },
+    typography: {
+        fontFamily: string,
+        customFontPath: string,
+    };
+  }
+}

frontend/stories/Box.stories.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Box } from '../design-system/components/box';
+
+export default {
+  title: 'masjid-network/Box',
+  component: Box,
+  argTypes: {
+    padding: {
+        control: 'select',
+        options: ['small', 'medium', 'large']
+    },
+    margin: {
+        control: 'select',
+        options: ['small', 'medium', 'large']
+    },
+  },
+} as ComponentMeta<typeof Box>;
+
+const Template: ComponentStory<typeof Box> = (args) => (
+    <div>
+        <Box {...args} />
+    </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  children: 'Box',
+};
+
+export const WithPadding = Template.bind({});
+WithPadding.args = {
+  children: 'Box',
+  padding: 'small',
+  border: '1px solid red',
+};
+
+export const WithMargin = Template.bind({});
+WithMargin.args = {
+  children: 'Box',
+  margin: 'small',
+  border: '1px solid red',
+};

frontend/utils/isObjectEmpty.ts

@@ -1,4 +1,4 @@
-export const isObjectEmpty = (obj: Record<string, unknown>): boolean => {
+export const isObjectEmpty = <T = Record<string, unknown>>(obj: T): boolean => {
 
   return Object.keys(obj).length === 0;
 };