From cffab6fbfc8faf7e02af677146f5dbd45247db3f Mon Sep 17 00:00:00 2001 From: devohda Date: Sun, 29 May 2022 20:02:13 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20Checkbox=20=EA=B8=B0=EB=B3=B8=20CSS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 3 +- TinyProjects/Team1/.gitignore | 3 + .../components/Checkbox/Checkbox.stories.tsx | 16 +++ .../src/components/Checkbox/Checkbox.tsx | 136 ++++++++++++++++++ 4 files changed, 157 insertions(+), 1 deletion(-) create mode 100644 TinyProjects/Team1/src/components/Checkbox/Checkbox.stories.tsx create mode 100644 TinyProjects/Team1/src/components/Checkbox/Checkbox.tsx diff --git a/.gitignore b/.gitignore index 7c6f65d..c045738 100644 --- a/.gitignore +++ b/.gitignore @@ -25,4 +25,5 @@ yarn-error.log* .vscode/ package-lock.json -.eslintcache \ No newline at end of file +.eslintcache +.idea \ No newline at end of file diff --git a/TinyProjects/Team1/.gitignore b/TinyProjects/Team1/.gitignore index 4d29575..6449c9f 100644 --- a/TinyProjects/Team1/.gitignore +++ b/TinyProjects/Team1/.gitignore @@ -21,3 +21,6 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +yarn.lock +.yarn diff --git a/TinyProjects/Team1/src/components/Checkbox/Checkbox.stories.tsx b/TinyProjects/Team1/src/components/Checkbox/Checkbox.stories.tsx new file mode 100644 index 0000000..bd5726e --- /dev/null +++ b/TinyProjects/Team1/src/components/Checkbox/Checkbox.stories.tsx @@ -0,0 +1,16 @@ +import Checkbox from "components/Checkbox/Checkbox"; +import { ComponentStory, ComponentMeta } from "@storybook/react"; + +export default { + title: "Example/Checkbox", + component: Checkbox, + argTypes: { + backgroundColor: { control: "color" }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ; + +export const Primary = Template.bind({ + size: 7 +}); diff --git a/TinyProjects/Team1/src/components/Checkbox/Checkbox.tsx b/TinyProjects/Team1/src/components/Checkbox/Checkbox.tsx new file mode 100644 index 0000000..575560c --- /dev/null +++ b/TinyProjects/Team1/src/components/Checkbox/Checkbox.tsx @@ -0,0 +1,136 @@ +// https://codepen.io/aaroniker/pen/ZEpEvdz + +import {styled, globalCss} from "@stitches/react"; +import {motion} from "framer-motion"; + +const Grid = styled(motion.div, { + display: "grid", + gridGap: "24px 32px", + gridTemplateColumns: "repeat(3, auto)", + gridTemplateRows: "repeat(3, auto)", + gridAutoFlow: "column", + '.last': { + gridColumn: "1 / 4", + gridRow: "3", + } +}) + +const CheckboxLabel = styled(motion.label, { + display: 'table', + borderRadius: 'var(--border-radius, 12px) var(--border-radius-corner, 12px) var(--border-radius, 12px) var(--border-radius, 12px)', + position: 'relative', + 'input': { + appearance: 'none', + outline: 'none', + border: 'none', + background: 'var(--input-background, none)', + display: 'block', + cursor: 'pointer', + margin: 0, + padding: 0, + borderRadius: 'inherit', + width: 'var(--input-width, 24px)', + height: 'var(--input-height, 24px)', + + '--border-color': 'var(--c-default)', + '--border-width': '2px', + boxShadow: 'inset 0 0 0 var(--border-width) var(--border-color)', + '&:checked': { + '--border-color': 'var(--c-active)', + '--border-width': '12px', + '& + svg': { + '--tick-offset': '46.5px' + } + }, + '&:not(:checked)': { + transition: 'box-shadow .25s', + '&:hover': { + '--border-width': '3px', + '--border-color': 'var(--c-active)' + } + }, + '& + svg': { + '--dot-x': '14px', + '--dot-y': '-14px', + '--dot-s': 1, + '--tick-offset': '20.5px', + '--tick-array': '16.5px', + '--tick-s': 1, + '--drop-s': 1, + '.tick': { + fill: 'none', + strokeWidth: '3px', + strokeLinecap: 'round', + strokeLinejoin: 'round', + stroke: 'var(--c-active-inner)', + strokeDasharray: 'var(--tick-array) 33px', + strokeDashoffset: 'var(--tick-offset)', + transformOrigin: '10.5px 16px', + transform: 'scale(var(--tick-s)) translateZ(0)' + }, + '.dot': { + transformOrigin: '10.5px 15.5px', + transform: 'translate(var(--dot-x), var(--dot-y)) scale(var(--dot-s)) translateZ(0)', + }, + '.drop': { + transformOrigin: '25px -1px', + transform: 'scale(var(--drop-s)) translateZ(0)' + } + } + }, + 'svg': { + display: 'block', + position: 'absolute', + left: 0, + right: 0, + bottom: 0, + top: 0, + pointerEvents: 'none', + fill: 'var(--c-active-inner)', + transform: 'scale(1.01) translateZ(0)' + }, + '--border-radius': '5px', + '--border-radius-corner': '5px' +}) + +type Props = { + size: number +} + +const globalStyles = globalCss({ + ':root': { + '--c-active': '#275EFE', + '--c-active-inner': '#FFFFFF', + '--c-default': '#D2D6E9', + '--c-default-dark': '#C7CBDF', + '--c-black': '#1B1B22' + } +}); + +function Checkbox({size = 9}: Props) { + const theta = 360 / size; + const cellSize = 190; + const radius = Math.round((cellSize / 2) / Math.tan(Math.PI / size)); + + const arrToSize = new Array(size).fill(0).map((arr, i) => i); + const getTransformsArr = (i: number) => { + const ratateNum = new Array(size + 1).fill(0).map((arr, i) => i); + return ratateNum.map(rotate => `rotateY(${theta * (i + rotate)}deg) translateZ(${radius}px)`) + } + + globalStyles(); + + return ( + + + + + + + + + + ) +}; + +export default Checkbox; From 8f5a34afac590606063550d8606d01ba7203c64b Mon Sep 17 00:00:00 2001 From: devohda Date: Mon, 30 May 2022 19:58:43 +0900 Subject: [PATCH 2/2] feat: checkbox animation --- .../components/Checkbox/Checkbox.stories.tsx | 2 +- .../src/components/Checkbox/Checkbox.tsx | 81 +++++++++---------- 2 files changed, 37 insertions(+), 46 deletions(-) diff --git a/TinyProjects/Team1/src/components/Checkbox/Checkbox.stories.tsx b/TinyProjects/Team1/src/components/Checkbox/Checkbox.stories.tsx index bd5726e..6248517 100644 --- a/TinyProjects/Team1/src/components/Checkbox/Checkbox.stories.tsx +++ b/TinyProjects/Team1/src/components/Checkbox/Checkbox.stories.tsx @@ -12,5 +12,5 @@ export default { const Template: ComponentStory = (args) => ; export const Primary = Template.bind({ - size: 7 + backgroundColor : '#fff' }); diff --git a/TinyProjects/Team1/src/components/Checkbox/Checkbox.tsx b/TinyProjects/Team1/src/components/Checkbox/Checkbox.tsx index 575560c..8714dc9 100644 --- a/TinyProjects/Team1/src/components/Checkbox/Checkbox.tsx +++ b/TinyProjects/Team1/src/components/Checkbox/Checkbox.tsx @@ -1,19 +1,7 @@ // https://codepen.io/aaroniker/pen/ZEpEvdz import {styled, globalCss} from "@stitches/react"; -import {motion} from "framer-motion"; - -const Grid = styled(motion.div, { - display: "grid", - gridGap: "24px 32px", - gridTemplateColumns: "repeat(3, auto)", - gridTemplateRows: "repeat(3, auto)", - gridAutoFlow: "column", - '.last': { - gridColumn: "1 / 4", - gridRow: "3", - } -}) +import {animate, motion, useCycle} from "framer-motion"; const CheckboxLabel = styled(motion.label, { display: 'table', @@ -50,31 +38,18 @@ const CheckboxLabel = styled(motion.label, { } }, '& + svg': { - '--dot-x': '14px', - '--dot-y': '-14px', - '--dot-s': 1, '--tick-offset': '20.5px', '--tick-array': '16.5px', '--tick-s': 1, - '--drop-s': 1, '.tick': { fill: 'none', strokeWidth: '3px', strokeLinecap: 'round', strokeLinejoin: 'round', stroke: 'var(--c-active-inner)', - strokeDasharray: 'var(--tick-array) 33px', - strokeDashoffset: 'var(--tick-offset)', + strokeDasharray: '33px', transformOrigin: '10.5px 16px', transform: 'scale(var(--tick-s)) translateZ(0)' - }, - '.dot': { - transformOrigin: '10.5px 15.5px', - transform: 'translate(var(--dot-x), var(--dot-y)) scale(var(--dot-s)) translateZ(0)', - }, - '.drop': { - transformOrigin: '25px -1px', - transform: 'scale(var(--drop-s)) translateZ(0)' } } }, @@ -107,29 +82,45 @@ const globalStyles = globalCss({ } }); -function Checkbox({size = 9}: Props) { - const theta = 360 / size; - const cellSize = 190; - const radius = Math.round((cellSize / 2) / Math.tan(Math.PI / size)); +const variants = { + check: {}, + notCheck: {} +}; - const arrToSize = new Array(size).fill(0).map((arr, i) => i); - const getTransformsArr = (i: number) => { - const ratateNum = new Array(size + 1).fill(0).map((arr, i) => i); - return ratateNum.map(rotate => `rotateY(${theta * (i + rotate)}deg) translateZ(${radius}px)`) - } +function Checkbox({}: Props) { + const [isCheck, toggleCheck] = useCycle(false, true); globalStyles(); return ( - - - - - - - - - + + + toggleCheck()} + variants={variants} + initial={true} + /> + + + + ) };