From 019a13eb5a674584b7434198c2170d3b629f1332 Mon Sep 17 00:00:00 2001 From: shirayuki Date: Mon, 28 Oct 2024 03:29:15 +0900 Subject: [PATCH 1/4] feat(Cube): create component Signed-off-by: shirayuki --- src/example/Cube.module.scss | 51 ++++++++++++++++++++++++++++++++++++ src/example/Cube.stories.tsx | 15 +++++++++++ src/example/Cube.tsx | 40 ++++++++++++++++++++++++++++ 3 files changed, 106 insertions(+) create mode 100644 src/example/Cube.module.scss create mode 100644 src/example/Cube.stories.tsx create mode 100644 src/example/Cube.tsx diff --git a/src/example/Cube.module.scss b/src/example/Cube.module.scss new file mode 100644 index 0000000..3c0519e --- /dev/null +++ b/src/example/Cube.module.scss @@ -0,0 +1,51 @@ +.cube { + position: relative; + width: 100px; + height: 100px; + transform-style: preserve-3d; + transform: rotateX(-30deg) rotateY(-45deg); + animation: rotate 1500ms infinite ease-in-out; +} + +.face { + position: absolute; + width: 100px; + height: 100px; + background-color: rgba(66, 105, 145, 0.3); + border: 2px solid #fff; + border-radius: 4px; + display: flex; + justify-content: center; + align-items: center; + font-weight: bold; + color: #fff; + backface-visibility: hidden; +} + +.front { + transform: translateZ(50px); +} +.back { + transform: rotateY(180deg) translateZ(50px); +} +.left { + transform: rotateY(-90deg) translateZ(50px); +} +.right { + transform: rotateY(90deg) translateZ(50px); +} +.top { + transform: rotateX(90deg) translateZ(50px); +} +.bottom { + transform: rotateX(-90deg) translateZ(50px); +} + +@keyframes rotate { + from { + transform: rotateX(-30deg) rotateY(-45deg) rotateZ(0deg); + } + to { + transform: rotateX(-30deg) rotateY(315deg) rotateZ(360deg); + } +} diff --git a/src/example/Cube.stories.tsx b/src/example/Cube.stories.tsx new file mode 100644 index 0000000..4735d94 --- /dev/null +++ b/src/example/Cube.stories.tsx @@ -0,0 +1,15 @@ +import type { Meta, StoryObj } from '@storybook/react' +import { Cube } from './Cube' + +const meta: Meta = { + title: 'Examples/Cube/Cube', + component: Cube, + tags: ['autodocs'] +} + +export default meta +type Story = StoryObj + +export const Primary: Story = { + args: { style: {} } +} diff --git a/src/example/Cube.tsx b/src/example/Cube.tsx new file mode 100644 index 0000000..9f3cd33 --- /dev/null +++ b/src/example/Cube.tsx @@ -0,0 +1,40 @@ +import React from 'react' +import isEqual from 'react-fast-compare' +import styles from './Cube.module.scss' + +// # -------------------------------------------------------------------------------- +// +// props +// +// # -------------------------------------------------------------------------------- + +export interface CubeProps { + style?: React.CSSProperties +} + +// # -------------------------------------------------------------------------------- +// +// component +// +// # -------------------------------------------------------------------------------- + +const CubeComponent = ({ style }: CubeProps) => { + return ( +
+
Front
+
Back
+
Left
+
Right
+
Top
+
Bottom
+
+ ) +} + +// # -------------------------------------------------------------------------------- +// +// memoize +// +// # -------------------------------------------------------------------------------- + +export const Cube = React.memo(CubeComponent, isEqual) From 69fe7671d3ba6c32073d3a717b4c942f2a5a5e74 Mon Sep 17 00:00:00 2001 From: shirayuki Date: Mon, 28 Oct 2024 04:05:52 +0900 Subject: [PATCH 2/4] feat(Cube): fix style issues Signed-off-by: shirayuki --- src/example/Cube.module.scss | 36 ++++++--------------------- src/example/Cube.tsx | 48 ++++++++++++++++++++++++++++++------ 2 files changed, 48 insertions(+), 36 deletions(-) diff --git a/src/example/Cube.module.scss b/src/example/Cube.module.scss index 3c0519e..01960da 100644 --- a/src/example/Cube.module.scss +++ b/src/example/Cube.module.scss @@ -1,44 +1,24 @@ .cube { position: relative; - width: 100px; - height: 100px; transform-style: preserve-3d; transform: rotateX(-30deg) rotateY(-45deg); - animation: rotate 1500ms infinite ease-in-out; + animation: rotate 1500ms infinite linear; } .face { position: absolute; - width: 100px; - height: 100px; - background-color: rgba(66, 105, 145, 0.3); - border: 2px solid #fff; - border-radius: 4px; + width: 100%; + height: 100%; + border-width: 1px; + border-style: solid; + border-radius: 2px; display: flex; justify-content: center; align-items: center; font-weight: bold; - color: #fff; + color: gray; backface-visibility: hidden; -} - -.front { - transform: translateZ(50px); -} -.back { - transform: rotateY(180deg) translateZ(50px); -} -.left { - transform: rotateY(-90deg) translateZ(50px); -} -.right { - transform: rotateY(90deg) translateZ(50px); -} -.top { - transform: rotateX(90deg) translateZ(50px); -} -.bottom { - transform: rotateX(-90deg) translateZ(50px); + user-select: none; } @keyframes rotate { diff --git a/src/example/Cube.tsx b/src/example/Cube.tsx index 9f3cd33..7e9d88e 100644 --- a/src/example/Cube.tsx +++ b/src/example/Cube.tsx @@ -1,5 +1,6 @@ import React from 'react' import isEqual from 'react-fast-compare' + import styles from './Cube.module.scss' // # -------------------------------------------------------------------------------- @@ -10,6 +11,12 @@ import styles from './Cube.module.scss' export interface CubeProps { style?: React.CSSProperties + size?: number + + /** + * Whether or not to use the dark theme + */ + isDark?: boolean } // # -------------------------------------------------------------------------------- @@ -18,15 +25,40 @@ export interface CubeProps { // // # -------------------------------------------------------------------------------- -const CubeComponent = ({ style }: CubeProps) => { +const CubeComponent = ({ style, size = 128, isDark = false }: CubeProps) => { + const commonTranslateZ = `translateZ(${size / 2}px)` + + const faces = [ + { name: 'front', rotate: '' }, + { name: 'back', rotate: 'rotateY(180deg)' }, + { name: 'left', rotate: 'rotateY(-90deg)' }, + { name: 'right', rotate: 'rotateY(90deg)' }, + { name: 'top', rotate: 'rotateX(90deg)' }, + { name: 'bottom', rotate: 'rotateX(-90deg)' } + ] + return ( -
-
Front
-
Back
-
Left
-
Right
-
Top
-
Bottom
+
+ {faces.map((face) => ( +
+ ))}
) } From 83ce95b06d9f01515465465bb345c14d6ae5eff8 Mon Sep 17 00:00:00 2001 From: shirayuki Date: Mon, 28 Oct 2024 04:07:36 +0900 Subject: [PATCH 3/4] style(Cube): change module path Signed-off-by: shirayuki --- src/{example => components/icon}/Cube.module.scss | 0 src/{example => components/icon}/Cube.stories.tsx | 2 +- src/{example => components/icon}/Cube.tsx | 0 3 files changed, 1 insertion(+), 1 deletion(-) rename src/{example => components/icon}/Cube.module.scss (100%) rename src/{example => components/icon}/Cube.stories.tsx (89%) rename src/{example => components/icon}/Cube.tsx (100%) diff --git a/src/example/Cube.module.scss b/src/components/icon/Cube.module.scss similarity index 100% rename from src/example/Cube.module.scss rename to src/components/icon/Cube.module.scss diff --git a/src/example/Cube.stories.tsx b/src/components/icon/Cube.stories.tsx similarity index 89% rename from src/example/Cube.stories.tsx rename to src/components/icon/Cube.stories.tsx index 4735d94..a2ca623 100644 --- a/src/example/Cube.stories.tsx +++ b/src/components/icon/Cube.stories.tsx @@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react' import { Cube } from './Cube' const meta: Meta = { - title: 'Examples/Cube/Cube', + title: 'Components/Icon/Cube', component: Cube, tags: ['autodocs'] } diff --git a/src/example/Cube.tsx b/src/components/icon/Cube.tsx similarity index 100% rename from src/example/Cube.tsx rename to src/components/icon/Cube.tsx From c86f55817c7553b7621f2e1b2de1d7ffd22eeb56 Mon Sep 17 00:00:00 2001 From: shirayuki Date: Mon, 28 Oct 2024 04:11:02 +0900 Subject: [PATCH 4/4] feat(FullscreenFallback): rewrite styles Signed-off-by: shirayuki --- src/components/fallback/FullscreenFallback.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/fallback/FullscreenFallback.tsx b/src/components/fallback/FullscreenFallback.tsx index 246ae06..a8dc2ff 100644 --- a/src/components/fallback/FullscreenFallback.tsx +++ b/src/components/fallback/FullscreenFallback.tsx @@ -1,12 +1,11 @@ import React from 'react' -import { DotLoadingIcon } from '../icon/DotLoadingIcon' - import { RectangleWave } from './RectangleWave' import isEqual from 'react-fast-compare' import styles from './FullscreenFallback.module.scss' +import { Cube } from '../icon/Cube' // # -------------------------------------------------------------------------------- // @@ -45,7 +44,7 @@ const FullscreenFallbackComponent = ({ }} > - +
) }