Skip to content

Commit 33cc145

Browse files
junbongjunbong
authored
v0.2.12
# Enhancements - Bump eslint to v7 - Add Overlay component - Resolve prop warnings from Icon component
2 parents 9bb4f5f + 8a269cc commit 33cc145

18 files changed

+1489
-404
lines changed

‎.circleci/config.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ jobs:
2929
- restore_cache:
3030
keys:
3131
- design-system-dependencies-{{ checksum "package.json" }}
32-
- run: npm install
32+
- run: npm ci
3333
- save_cache:
3434
paths:
3535
- node_modules

‎.eslintrc.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
module.exports = {
2-
"extends": "@channel.io/eslint-config",
2+
extends: ['@channel.io/eslint-config'],
3+
parserOptions: {
4+
project: ['./tsconfig.eslint.json'],
5+
},
36
rules: {
47
'no-restricted-imports': 'off',
58
'no-restricted-modules': 'off',
9+
'react/jsx-props-no-spreading': 'off',
610
},
7-
};
11+
}

‎package-lock.json

Lines changed: 961 additions & 372 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@channel.io/design-system",
3-
"version": "0.2.11",
3+
"version": "0.2.12",
44
"description": "Design System by Channel",
55
"repository": {
66
"type": "git",
@@ -66,7 +66,7 @@
6666
"@babel/preset-env": "^7.10.4",
6767
"@babel/preset-react": "^7.10.4",
6868
"@babel/preset-typescript": "^7.10.4",
69-
"@channel.io/eslint-config": "^1.0.5",
69+
"@channel.io/eslint-config": "^1.0.8",
7070
"@channel.io/stylelint-config": "^1.1.0",
7171
"@rollup/plugin-babel": "^5.1.0",
7272
"@rollup/plugin-commonjs": "^11.0.2",
@@ -87,24 +87,23 @@
8787
"@types/react": "^16.9.34",
8888
"@types/styled-components": "^5.1.0",
8989
"@types/uuid": "^8.3.0",
90-
"@typescript-eslint/eslint-plugin": "^2.34.0",
91-
"@typescript-eslint/parser": "^2.34.0",
90+
"@typescript-eslint/eslint-plugin": "^4.4.1",
91+
"@typescript-eslint/parser": "^4.4.1",
9292
"babel-eslint": "^8.2.6",
9393
"babel-jest": "^26.2.2",
9494
"babel-loader": "^8.1.0",
9595
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
9696
"babel-preset-react-app": "^9.1.2",
9797
"core-js": "^3.6.5",
9898
"cross-env": "^7.0.2",
99-
"eslint": "^5.16.0",
100-
"eslint-config-airbnb-typescript": "^4.0.1",
101-
"eslint-import-resolver-webpack": "^0.10.1",
99+
"eslint": "^7.11.0",
100+
"eslint-import-resolver-typescript": "^2.3.0",
102101
"eslint-plugin-babel": "^5.3.0",
103-
"eslint-plugin-import": "^2.21.2",
102+
"eslint-plugin-import": "^2.22.1",
104103
"eslint-plugin-jest": "^22.21.0",
105-
"eslint-plugin-jsx-a11y": "^6.2.3",
106-
"eslint-plugin-react": "^7.20.0",
107-
"eslint-plugin-react-hooks": "^1.7.0",
104+
"eslint-plugin-jsx-a11y": "^6.3.1",
105+
"eslint-plugin-react": "^7.21.4",
106+
"eslint-plugin-react-hooks": "^4.1.2",
108107
"husky": "^4.2.5",
109108
"identity-obj-proxy": "^3.0.0",
110109
"jest": "^26.0.1",

‎src/components/Button/Button.types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { StylableComponentProps } from '../../types/ComponentProps'
44
import type { IconName } from '../Icon/generated'
55

66
export enum ButtonTheme {
7-
Normal = 'normal'
7+
Normal = 'normal',
88
}
99

1010
export default interface ButtonProps extends StylableComponentProps {

‎src/components/Icon/Icon.styled.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@ import { styled } from '../../styling/Theme'
33
import { IconStyledProps } from './Icon.types'
44

55
function getMargin({
6-
marginTop,
7-
marginRight,
8-
marginBottom,
9-
marginLeft,
6+
margintop,
7+
marginright,
8+
marginbottom,
9+
marginleft,
1010
}: IconStyledProps): string {
11-
return `${marginTop}px ${marginRight}px ${marginBottom}px ${marginLeft}px`
11+
return `${margintop}px ${marginright}px ${marginbottom}px ${marginleft}px`
1212
}
1313

1414
const Icon = styled.svg<IconStyledProps>`

‎src/components/Icon/Icon.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,10 @@ function Icon({
2929
as={icons[name]}
3030
width={size}
3131
height={size}
32-
marginTop={marginTop}
33-
marginRight={marginRight}
34-
marginBottom={marginBottom}
35-
marginLeft={marginLeft}
32+
margintop={marginTop}
33+
marginright={marginRight}
34+
marginbottom={marginBottom}
35+
marginleft={marginLeft}
3636
/>
3737
)
3838
}

‎src/components/Icon/Icon.types.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@ export enum IconSize {
1717

1818
export interface IconStyledProps {
1919
color?: string
20-
marginTop: number
21-
marginRight: number
22-
marginBottom: number
23-
marginLeft: number
20+
margintop: number
21+
marginright: number
22+
marginbottom: number
23+
marginleft: number
2424
}
2525

2626
export default interface IconProps extends StylableComponentProps, Omit<SVGProps, 'ref'> {

‎src/components/Overlay/Overlay.stories.tsx

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
/* External dependencies */
2+
import React, { useRef } from 'react'
3+
import { base } from 'paths.macro'
4+
5+
/* Internal dependencies */
6+
import { getTitle } from '../../utils/utils'
7+
import { styled } from '../../styling/Theme'
8+
import Palette from '../../styling/Palette'
9+
import Overlay from './Overlay'
10+
import OverlayPosition from './OverlayPosition'
11+
12+
export default {
13+
title: getTitle(base),
14+
component: Overlay,
15+
argTypes: {
16+
placement: {
17+
control: {
18+
type: 'radio',
19+
options: [
20+
OverlayPosition.TopCenter,
21+
OverlayPosition.TopLeft,
22+
OverlayPosition.TopRight,
23+
OverlayPosition.RightCenter,
24+
OverlayPosition.RightTop,
25+
OverlayPosition.RightBottom,
26+
OverlayPosition.BottomCenter,
27+
OverlayPosition.BottomLeft,
28+
OverlayPosition.BottomRight,
29+
OverlayPosition.LeftCenter,
30+
OverlayPosition.LeftTop,
31+
OverlayPosition.LeftBottom,
32+
],
33+
},
34+
},
35+
marginX: {
36+
control: {
37+
type: 'range',
38+
min: -200,
39+
max: 200,
40+
step: 1,
41+
},
42+
},
43+
marginY: {
44+
control: {
45+
type: 'range',
46+
min: -200,
47+
max: 200,
48+
step: 1,
49+
},
50+
},
51+
},
52+
}
53+
54+
const Container = styled.div`
55+
width: 600px;
56+
height: 500px;
57+
overflow: scroll;
58+
border: 1px solid ${Palette.grey700};
59+
`
60+
61+
const Wrapper = styled.div`
62+
display: flex;
63+
justify-content: center;
64+
align-items: center;
65+
width: 900px;
66+
height: 800px;
67+
`
68+
69+
const Target = styled.div`
70+
display: flex;
71+
justify-content: center;
72+
align-items: center;
73+
width: 70px;
74+
height: 40px;
75+
background-color: ${Palette.grey300};
76+
border-radius: 4px;
77+
`
78+
79+
const Children = styled.div`
80+
display: flex;
81+
justify-content: center;
82+
align-items: center;
83+
width: 250px;
84+
height: 150px;
85+
background-color: ${Palette.grey500};
86+
border-radius: 4px;
87+
`
88+
89+
const Template = (props) => {
90+
const targetRef = useRef<any>()
91+
92+
return (
93+
<Container>
94+
<Wrapper>
95+
<Target ref={targetRef}>
96+
target
97+
</Target>
98+
<Overlay
99+
{...props}
100+
target={targetRef.current}
101+
>
102+
<Children>overlay</Children>
103+
</Overlay>
104+
</Wrapper>
105+
</Container>
106+
)
107+
}
108+
109+
export const Primary = Template.bind({})
110+
Primary.args = {
111+
show: false,
112+
placement: OverlayPosition.BottomCenter,
113+
marginX: 0,
114+
marginY: 0,
115+
}

‎src/components/Overlay/Overlay.styled.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/* Internal dependencies */
2+
import { styled, css } from '../../styling/Theme'
3+
import { StyledOverlayProps } from './Overlay.types'
4+
5+
export const Container = styled.div`
6+
width: 100%;
7+
height: 100%;
8+
position: fixed;
9+
top: 0;
10+
left: 0;
11+
bottom: 0;
12+
right: 0;
13+
`
14+
15+
export const Wrapper = styled.div`
16+
width: 100%;
17+
height: 100%;
18+
position: relative;
19+
`
20+
21+
export const StyledOverlay = styled.div<StyledOverlayProps>`
22+
position: absolute;
23+
${props => props.isHidden && css`
24+
visibility: hidden;
25+
`}
26+
`

0 commit comments

Comments
 (0)