From a49b2b3502c40bc546248cb2ec95e0ff4de07af2 Mon Sep 17 00:00:00 2001 From: Ahmad Reza Date: Wed, 20 Oct 2021 09:28:28 +0700 Subject: [PATCH 1/3] Create contributing.md --- CONTRIBUTING.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 CONTRIBUTING.md diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..ddc2db0 --- /dev/null +++ b/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` \ No newline at end of file From 002da94c2a53be220a316de1746b56464886436b Mon Sep 17 00:00:00 2001 From: Ahmad Reza Date: Mon, 26 Sep 2022 19:52:37 +0700 Subject: [PATCH 2/3] chore: define Theme globally --- frontend/design-system/components/box.tsx | 21 ++++++++++++- frontend/emotion.d.ts | 37 +++++++++++++++++++++++ frontend/utils/isObjectEmpty.ts | 2 +- 3 files changed, 58 insertions(+), 2 deletions(-) create mode 100644 frontend/emotion.d.ts diff --git a/frontend/design-system/components/box.tsx b/frontend/design-system/components/box.tsx index 99a9792..cf844ea 100644 --- a/frontend/design-system/components/box.tsx +++ b/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; } diff --git a/frontend/emotion.d.ts b/frontend/emotion.d.ts new file mode 100644 index 0000000..e377580 --- /dev/null +++ b/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, + }; + } +} diff --git a/frontend/utils/isObjectEmpty.ts b/frontend/utils/isObjectEmpty.ts index 37e35e4..0ecf5d5 100644 --- a/frontend/utils/isObjectEmpty.ts +++ b/frontend/utils/isObjectEmpty.ts @@ -1,4 +1,4 @@ -export const isObjectEmpty = (obj: Record): boolean => { +export const isObjectEmpty = >(obj: T): boolean => { return Object.keys(obj).length === 0; }; From b882601b4a7dcad9f160ae9699838ab5e4101499 Mon Sep 17 00:00:00 2001 From: Ahmad Reza Date: Mon, 26 Sep 2022 20:24:10 +0700 Subject: [PATCH 3/3] chore: add box story --- frontend/design-system/components/box.tsx | 9 ++--- frontend/stories/Box.stories.tsx | 44 +++++++++++++++++++++++ 2 files changed, 49 insertions(+), 4 deletions(-) create mode 100644 frontend/stories/Box.stories.tsx diff --git a/frontend/design-system/components/box.tsx b/frontend/design-system/components/box.tsx index cf844ea..06e193c 100644 --- a/frontend/design-system/components/box.tsx +++ b/frontend/design-system/components/box.tsx @@ -17,10 +17,10 @@ const defaultProps = { } interface BoxProps extends React.CSSProperties { - paddingX: number; - paddingY: number; - marginX: number; - marginY: number; + paddingX?: number; + paddingY?: number; + marginX?: number; + marginY?: number; theme: Theme; } @@ -66,6 +66,7 @@ const StyledBox = ({ } return { + ...props, padding, paddingTop, paddingRight, diff --git a/frontend/stories/Box.stories.tsx b/frontend/stories/Box.stories.tsx new file mode 100644 index 0000000..fbcb04f --- /dev/null +++ b/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; + +const Template: ComponentStory = (args) => ( +
+ +
+); + +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', +}; \ No newline at end of file