kongkowitpekanbaru/masjid-network

A mosque accounting management tools

Masjid-Network

Assalamualaikum.

kita rencananya akan membuat sistem yang akan digunakan oleh mesjid dalam membantu pencatatan dan mensistemkan seluruh kegiatan mesjid. ada beberapa fitur yang akan direncanakan. kita juga rencananya ingin menginplementasikan teknologi microservices.

jika teman teman ingin berkontribusi, silahkan tuangkan ide dan sarannya ke bagian Discussion. dan jika diperlukan mengedit dokumen ini, silahkan ajukan pull request.

masjid-network's Issues

Define Theming

This is my proposed theming design, but feel free to discuss more 😃
This theming is based on my own perspective of design file after all.

export const spacing = {
  none: 0,
  xxsmall: '4px',
  xsmall: '8px',
  small: '12px',
  medium: '20px',
  gutter: '24px',
  large: '32px',
  xlarge: '48px',
  xxlarge: '96px',
};

export const fontSizes = {
  xsmall: '0.79rem',
  small: '0.889rem',
  medium: '1rem',
  large: '1.125rem',
  xlarge: '1.266rem',
  xxlarge: '1.424rem',
};
const white = '#fff';
const black = '#111';

const palette = {
  common: {
    black,
    white,
  },
  primary: {
    main: '???', // for this one, i'm waiting for answer from bang @kurnianto12
    light: '#146DD6',
    contrastText: white,
  },
  error: {
    main: '#A51C30',
    light: '#A7333F',
    contrastText: white,
  },
  grey: {
    100: '#EAEAEA',
    200: '#C9C5C5',
    300: '#888',
    400: '#666',
  },
};

const shadows = {
  0: 'none',
  1: '0px 5px 10px rgba(0, 0, 0, 0.12)',
  2: '0px 8px 30px rgba(0, 0, 0, 0.24)',
};

const typography = {
  fontFamily:
    "Poppins", // i think this will be imported 🤔 
};

const shape = {
  borderRadius: spacing['xxsmall'],
};

// final theme would be
const theme = {
  palette,
  shadows,
  typography,
  shape,
};

what do you think?

Create the design system

As of the initial plan, we're planning to create a design system to make a consistent UI on masjid-network
This issue act as a center issue to see all the progress on creating the design system

For the libs to use, i'm considering to use emotion, but feel free to discuss 😃

As of now, here is my plan for the design system. Any please comment here if you want to work on the issue, and if you got any new ideas.

Base

• #8
• #9

Layouting

• #10
• #11
• #12
• #13

Basic Elements

• #16
• Input
• Modal / Dialog
• Heading
• Text
• Image
• Checkbox
• Radio
• Select

And also, i've been meaning to ask, what icon pack would we use @Eore @jufianto ? 😅

figma file: https://www.figma.com/proto/XXNwS8247XVDxwIdEza3wU/masjidsystem?node-id=36%3A4&scaling=min-zoom&page-id=0%3A1

Buat project planning

harus dibuat markdown file / page khusus untuk fitur apa aja yang akan ada di mesjid-network ini.

beberapa fitur yang masih terpikirkan

• pendataan aset mesjid
• pencatatan kas mesjid
• jadwal kajian

beberapa micro yang terpikir

• micro users (manajemen user login)
• micro jadwal kajian
• micro pencatatan aset
• micro pencatatan kas

Todoist

• buat user stories (usecase)
• flowchart setiap proses

Create storybook for each component

This could be actually an epic too. For now i think we will focus on the development of each component first. I'll update this issue when we at least have some components

Button

Box

This Box component is like a div but we can assign any styling to it via the props like so

<Box
    alignItems="center"
    flex
    justifyContent="center"
    padding={10}
>
    Heya!
</Box>

Add contributing.md

Because our project is open source, any help would be very appreciated, and so it would be great to make a CONTRIBUTING.md file to guide the new dev on the project!

Task

• Explain what is masjid-network about
• Explain on the basic of how to contribute on open source
• Explain the procedure of cloning the project to actually running it in local
• Make the explanation into indonesian & english so people that couldn't talk in english or couldn't talk in indonesia understand the project

Also probably explain that were prioritising to use english as the base talking method. As english is an international level, so that people not just from indonesia could contribute and understand our project as well, But i'm not forcing it though. What do you think about this?

Pake bahasa indo aja atau inggris sebagai main method of communicating di repo ini?

Column

This column component will be like row class in bootstrap. The only difference is instead of class, it's a Component!

And also, this component is like the Box component too, it can accept css styling as props. the spacing will be even between child. and probably will have optional props spacing to determine spacing on each item

<Column margin={10} background="grey.100">
    <Box>1</Box>
    <Box>2</Box>
    <Box>3</Box>
</Column>

Stack

Stack is just like Column #11 but instead of the item to be horizontal, it will be vertically Stacked.

no pun intended

Define theming

This is my proposed theming design, but feel free to discuss more 😃
This theming is based on my own perspective of design file after all.

export const spacing = {
  none: 0,
  xxsmall: '4px',
  xsmall: '8px',
  small: '12px',
  medium: '20px',
  gutter: '24px',
  large: '32px',
  xlarge: '48px',
  xxlarge: '96px',
};

export const fontSizes = {
  xsmall: '0.79rem',
  small: '0.889rem',
  medium: '1rem',
  large: '1.125rem',
  xlarge: '1.266rem',
  xxlarge: '1.424rem',
};
const white = '#fff';
const black = '#111';

const palette = {
  common: {
    black,
    white,
  },
  primary: {
    main: '???', // for this one, i'm waiting for answer from bang @kurnianto12
    light: '#146DD6',
    contrastText: white,
  },
  error: {
    main: '#A51C30',
    light: '#A7333F',
    contrastText: white,
  },
  grey: {
    100: '#EAEAEA',
    200: '#C9C5C5',
    300: '#888',
    400: '#666',
  },
};

const shadows = {
  0: 'none',
  1: '0px 5px 10px rgba(0, 0, 0, 0.12)',
  2: '0px 8px 30px rgba(0, 0, 0, 0.24)',
};

const typography = {
  fontFamily:
    "Poppins", // i think this will be imported 🤔 
};

const shape = {
  borderRadius: spacing['xxsmall'],
};

// final theme would be
const theme = {
  palette,
  shadows,
  typography,
  shape,
};

what do you think?

Spacer

Spacer component will mainly used for inside the Column #11 and Stack #12 component. It will act as a spacing inside each of them. As it will take as many spacing as it can

The usage will be like

<Column>
     <Box>Heya</Box>
     <Spacer />
     <Box>Aloha</Box>
</Column>

as for how it look like, it will be like this:

just preted this text is an image for now 🙂 i'll post the image once i have the energy to do it