8/24 [Frontend] Offline meeting

[currybob]

Front end Team Meeting

Today we did

• Analyzed project default structure
• Studied about AntDesign
• Defined component and pages we need
  1. Conpoment
     • Use antdesign default(Layout, Header, Footer, Menus, Card, Modal ...etc)
     • Contributor thumbnail
     • Code editor
     • Login modal (page ? or modal)
  2. Page
     • index
     • contributors
     • feature
     • code view page

Planning to next offline meeting

• Basic Markup and styling
• Code will merge on this repo.
• Study about mobx elements and API

Question

1. We need clear standard about stylsheet file division. For example, We are considering that make each stylesheet file for each component or define style by styled-component in component > [component].js file. which is right? is there more efficient way or any standard? Could we define our own standard?
2. Please confirm for components and pages we divided. @thomasJang @gimdongwoo

[jayjongcheolpark]

@likelionWonHo I recommend to let them in [component].js file when it is pure UI component. If it is a component for feature including lots of pure UI components, we can make its style file for each component. The reason why I recommend it like that is import may not be done completely due to circular references If we are creating a separate style file for every component.

[thomasJang]

You can use it in gitShare projects For styling 'less', 'scss', 'styled-component'. However, I think that it is better to use only 'styled-component' when dealing with the style of 'react components'.

Here's how to use 'styled' inside a component.

I recommend that you create and use the 'styledComponents' folder for convenient use of 'styled-components' . styledComponents/index.ts

export { default as styled, ThemeProvider, withTheme } from 'styled-components';
export { default as theme } from './theme';
export { RoundedButton } from './StyledButton';

If you do this, you can simply import 'styledComponents' from 'component'.

components/Sample.tsx

import * as React from 'react';
import { styled, RoundedButton } from '../styledComponents';

interface IProps {}

const Component = styled.div`
  margin: 50px;

  [data-title] {
    font-size: 20px;
    color: ${props => props.theme.textColor};
  }
  [data-item] {
    border: 1px solid #000;
  }
`;

class Sample extends React.Component<IProps> {
  render() {
    return (
      <Component>
        <div data-title>I am Title</div>
        <div data-item>Item</div>
        <div data-item>Item</div>
        <RoundedButton>Button</RoundedButton>
      </Component>
    );
  }
}

export default Sample;

Here is a description of the restyling component.

styledComponents/Button.tsx

import styled from 'styled-components';
import { Button } from 'antd';

const RoundedButton: typeof Button = styled(Button as any)`
  &.ant-btn {
    border-radius: 30px;
  }
` as any;

export { RoundedButton };

In this case, it is better to use it mainly for styling a component that has already been created. Because you can style in the new component.

---

and I make some folder(components, styledComponents) and has pushed to our repository

[thomasJang]

and I also recommend using https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components for autocomplete in VSCode.

[currybob]

@jayjongcheolpark @thomasJang Ok. We understood what you mean and will follow that convention. Thank you.