Skip to content

Commit 309b3af

Browse files
chacha912hackerwins
chacha912
and
hackerwins
authored
Apply framer motion (yorkie-team#15)
Co-authored-by: Youngteac Hong <[email protected]>
1 parent d579e1f commit 309b3af

File tree

94 files changed

+7038
-10536
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

94 files changed

+7038
-10536
lines changed

‎.prettierrc.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
module.exports = {
2+
bracketSpacing: true,
3+
singleQuote: true,
4+
trailingComma: 'all',
5+
printWidth: 120,
6+
tabWidth: 2,
7+
};

‎components/Button/Button.tsx

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
/*
2+
* Copyright 2022 The Yorkie Authors. All rights reserved.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import React, { forwardRef, ReactNode, AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
18+
import Link from 'next/link';
19+
import classNames from 'classnames';
20+
import { ButtonBox } from './ButtonBox';
21+
22+
const ButtonStyle = {
23+
sm: 'btn_small',
24+
md: undefined,
25+
lg: 'btn_large',
26+
primary: 'orange_0',
27+
success: 'green_0',
28+
danger: 'red_0',
29+
toggle: 'btn_toggle',
30+
disabled: 'btn_line gray300',
31+
default: undefined,
32+
};
33+
34+
type ButtonProps = {
35+
as?: 'button' | 'a' | 'link';
36+
type?: 'button' | 'submit' | 'reset';
37+
href?: string;
38+
disabled?: boolean;
39+
className?: string;
40+
children?: ReactNode;
41+
blindText?: boolean;
42+
icon?: ReactNode;
43+
size?: 'sm' | 'md' | 'lg';
44+
outline?: boolean;
45+
color?: 'primary' | 'success' | 'danger' | 'toggle' | 'default';
46+
isActive?: boolean;
47+
buttonRef?: any;
48+
} & AnchorHTMLAttributes<HTMLAnchorElement> &
49+
ButtonHTMLAttributes<HTMLButtonElement>;
50+
51+
function ButtonInner({
52+
as = 'button',
53+
type = 'button',
54+
href = '',
55+
disabled,
56+
className = '',
57+
children,
58+
icon,
59+
blindText,
60+
size = 'md',
61+
outline,
62+
color = 'default',
63+
isActive,
64+
buttonRef,
65+
...restProps
66+
}: ButtonProps) {
67+
const buttonClassName = classNames('btn', className, ButtonStyle[size], ButtonStyle[color], {
68+
btn_line: outline,
69+
is_active: isActive,
70+
[ButtonStyle.disabled]: disabled,
71+
});
72+
73+
if (as === 'link') {
74+
return (
75+
<Link href={href} className={buttonClassName} {...restProps} ref={buttonRef}>
76+
{icon && icon}
77+
{children && <span className={`${blindText ? 'blind' : 'text'}`}>{children}</span>}
78+
</Link>
79+
);
80+
}
81+
if (as === 'a') {
82+
return (
83+
<a href={href} className={buttonClassName} {...restProps} ref={buttonRef}>
84+
{icon && icon}
85+
{children && <span className={`${blindText ? 'blind' : 'text'}`}>{children}</span>}
86+
</a>
87+
);
88+
}
89+
return (
90+
<button className={buttonClassName} type={type} disabled={disabled} {...restProps} ref={buttonRef}>
91+
{icon && icon}
92+
{children && <span className={`${blindText ? 'blind' : 'text'}`}>{children}</span>}
93+
</button>
94+
);
95+
}
96+
97+
export const Button = forwardRef((props: ButtonProps, ref) => {
98+
return <ButtonInner {...props} buttonRef={ref} />;
99+
}) as any;
100+
101+
Button.displayName = 'Button';
102+
Button.Box = ButtonBox;

‎components/Button/ButtonBox.tsx

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/*
2+
* Copyright 2022 The Yorkie Authors. All rights reserved.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
17+
import React, { ReactNode } from 'react';
18+
import classNames from 'classnames';
19+
20+
export const ButtonBox = React.forwardRef<
21+
HTMLDivElement,
22+
{
23+
fullWidth?: boolean;
24+
children?: ReactNode;
25+
}
26+
>(({ children, fullWidth }, ref) => {
27+
const buttonBoxClassName = classNames('btn_box', {
28+
full_width: fullWidth,
29+
});
30+
return (
31+
<div ref={ref} className={buttonBoxClassName}>
32+
{children}
33+
</div>
34+
);
35+
});
36+
ButtonBox.displayName = 'Button.Box';

‎components/Icons/Icon.tsx

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import classNames from 'classnames';
2+
3+
import StarSVG from '@/public/assets/icons/icon_stars.svg';
4+
import CopySVG from '@/public/assets/icons/icon_copy.svg';
5+
import BookSVG from '@/public/assets/icons/icon_book.svg';
6+
7+
const svgMap = {
8+
star: <StarSVG />,
9+
copy: <CopySVG />,
10+
book: <BookSVG />,
11+
};
12+
type SVGType = keyof typeof svgMap;
13+
14+
export function Icon({ type, color, className }: { type: SVGType; color?: string; className?: string }) {
15+
return <span className={classNames('icon', className, color)}>{svgMap[type]}</span>;
16+
}

‎components/Layout/Header.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ export function Header(): ReactElement {
1717
</h1>
1818
<nav className='nav'>
1919
<ul className='gnb'>
20-
<li className={`gnb_item ${pathname == '/' ? 'is_active' : ''}`}>
21-
<Link href='/' className='link'>
20+
<li className={`gnb_item ${pathname == '/products' ? 'is_active' : ''}`}>
21+
<Link href='/products' className='link'>
2222
Products
2323
</Link>
2424
</li>

‎components/index.ts

+3
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,6 @@ export * from './CustomLink';
33
export * from './Navigator';
44
export * from './CodeBlock';
55
export * from './Image';
6+
export * from './Button/Button';
7+
export * from './Icons/Icon';
8+
export * from './motions';

‎components/motions/ChartMotion.tsx

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { motion } from 'framer-motion';
2+
3+
const Bar = ({ x, y, height }: { x: string; y: string; height: string }) => {
4+
return (
5+
<motion.rect
6+
animate={{
7+
translateX: [-17, -17, -34, -34, -51, -51, -68, -68, -85, -85, -102, -102, -119, -119, -136, -136],
8+
}}
9+
transition={{
10+
duration: 8,
11+
ease: 'easeInOut',
12+
times: [0.085, 0.125, 0.21, 0.25, 0.335, 0.375, 0.46, 0.5, 0.585, 0.625, 0.71, 0.75, 0.835, 0.875, 0.96, 1],
13+
repeat: Infinity,
14+
}}
15+
x={x}
16+
y={y}
17+
width="16.7692"
18+
height={height}
19+
fill="#FDA36A"
20+
/>
21+
);
22+
};
23+
24+
export const ChartMotion = () => {
25+
return (
26+
<svg xmlns="http://www.w3.org/2000/svg" width="466" height="216" viewBox="0 0 466 216" fill="none">
27+
<g clipPath="url(#clip0_6339_210185)">
28+
<Bar x="28" y="123" height="64" />
29+
<Bar x="60.7695" y="59" height="128" />
30+
<Bar x="93.5391" y="139" height="48" />
31+
<Bar x="126.309" y="139" height="48" />
32+
<Bar x="159.076" y="123" height="64" />
33+
<Bar x="191.846" y="123" height="64" />
34+
<Bar x="224.615" y="99" height="88" />
35+
<Bar x="257.385" y="29" height="158" />
36+
<Bar x="290" y="59" height="128" />
37+
<Bar x="322.924" y="115" height="72" />
38+
<Bar x="355.691" y="59" height="128" />
39+
<Bar x="388.461" y="29" height="158" />
40+
<Bar x="421.23" y="115" height="72" />
41+
<Bar x="454" y="123" height="64" />
42+
<Bar x="486.77" y="139" height="128" />
43+
<Bar x="519.539" y="139" height="48" />
44+
<Bar x="552.309" y="139" height="48" />
45+
<Bar x="585.076" y="123" height="64" />
46+
<Bar x="617.846" y="123" height="64" />
47+
</g>
48+
<path d="M28 187H438" stroke="#E93D47" />
49+
<rect x="0.5" y="0.5" width="465" height="215" rx="7.5" stroke="#C2BDBA" />
50+
<defs>
51+
<clipPath id="clip0_6339_210185">
52+
<rect width="410" height="158" fill="white" transform="translate(28 29)" />
53+
</clipPath>
54+
</defs>
55+
</svg>
56+
);
57+
};

‎components/motions/ServerMotion.tsx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { motion } from 'framer-motion';
2+
3+
export const ServerMotion = () => {
4+
return (
5+
<svg width="459" height="206" viewBox="0 0 459 206" fill="none" xmlns="http://www.w3.org/2000/svg">
6+
<rect x="0.5" y="0.5" width="220.342" height="139" rx="7.5" fill="#FEFDFB" stroke="#C2BDBA" />
7+
<rect x="237.582" y="66.5" width="220.342" height="139" rx="7.5" fill="#FEFDFB" stroke="#C2BDBA" />
8+
<rect x="63.4531" y="20" width="98.866" height="100.5" rx="49.433" fill="#3C9AF1" />
9+
<rect x="22.627" y="42.5" width="155.923" height="78" rx="39" fill="#3C9AF1" />
10+
<path
11+
fillRule="evenodd"
12+
clipRule="evenodd"
13+
d="M296.568 164.5C289.251 164.5 283.318 170.432 283.318 177.75C283.318 185.068 289.251 191 296.568 191H398.938C406.256 191 412.188 185.068 412.188 177.75C412.188 170.432 406.256 164.5 398.938 164.5H296.568ZM296.353 183.5C299.477 183.5 302.009 180.926 302.009 177.75C302.009 174.574 299.477 172 296.353 172C293.229 172 290.696 174.574 290.696 177.75C290.696 180.926 293.229 183.5 296.353 183.5Z"
14+
fill="#855CF9"
15+
/>
16+
<path
17+
fillRule="evenodd"
18+
clipRule="evenodd"
19+
d="M296.568 122.5C289.251 122.5 283.318 128.432 283.318 135.75C283.318 143.068 289.251 149 296.568 149H398.938C406.256 149 412.188 143.068 412.188 135.75C412.188 128.432 406.256 122.5 398.938 122.5H296.568ZM296.353 141.5C299.477 141.5 302.009 138.926 302.009 135.75C302.009 132.574 299.477 130 296.353 130C293.229 130 290.696 132.574 290.696 135.75C290.696 138.926 293.229 141.5 296.353 141.5Z"
20+
fill="#855CF9"
21+
/>
22+
<path
23+
fillRule="evenodd"
24+
clipRule="evenodd"
25+
d="M296.568 81C289.251 81 283.318 86.9322 283.318 94.25C283.318 101.568 289.251 107.5 296.568 107.5H398.938C406.256 107.5 412.188 101.568 412.188 94.25C412.188 86.9322 406.256 81 398.938 81H296.568ZM296.353 100C299.477 100 302.009 97.4256 302.009 94.25C302.009 91.0744 299.477 88.5 296.353 88.5C293.229 88.5 290.696 91.0744 290.696 94.25C290.696 97.4256 293.229 100 296.353 100Z"
26+
fill="#855CF9"
27+
/>
28+
</svg>
29+
);
30+
};

0 commit comments

Comments
 (0)