スクロール実装

visionary-japan · Apr 3, 2024 · 4e37e44 · 4e37e44
1 parent 4e48a57
commit 4e37e44
Show file tree

Hide file tree

Showing 13 changed files with 669 additions and 90 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
         "@types/react": "^18.2.37",
         "@types/react-beautiful-dnd": "^13.1.8",
         "@types/react-dom": "^18.2.15",
+        "@types/react-scroll": "^1.8.10",
         "@typescript-eslint/eslint-plugin": "^6.10.0",
         "@typescript-eslint/parser": "^6.10.0",
         "@vitejs/plugin-react-swc": "^3.5.0",
@@ -34,6 +35,7 @@
         "prettier": "^3.1.0",
         "react-beautiful-dnd": "^13.1.1",
         "react-router-dom": "^6.20.1",
+        "react-scroll": "^1.9.0",
         "react-sortablejs": "^6.1.4",
         "stylelint": "^15.11.0",
         "stylelint-config-recess-order": "^4.4.0",

diff --git a/src/components/button/ButtonVite.tsx b/src/components/button/ButtonVite.tsx
@@ -1,11 +1,14 @@
 import * as stylex from '@stylexjs/stylex';
-import { type ButtonHTMLAttributes, type FC, memo } from 'react';
+import type { StyleXStyles } from '@stylexjs/stylex';
+import type { UserAuthoredStyles } from '@stylexjs/stylex/lib/StyleXTypes';
+import { type ButtonHTMLAttributes, forwardRef, memo } from 'react';
 
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
     size?: 'small' | 'medium' | 'large';
+    styles?: StyleXStyles<UserAuthoredStyles>;
 }
 
-const styles = stylex.create({
+const styls = stylex.create({
     base: {
         fontFamily: 'inherit',
         color: '#646cff',
@@ -51,15 +54,17 @@ const sizes = stylex.create({
     },
 });
 
-const Component: FC<Props> = ({
-    type = 'button',
-    size = 'medium',
-    children,
-    ...attrs
-}) => (
-    <button type={type} {...stylex.props(styles.base, sizes[size])} {...attrs}>
-        {children}
-    </button>
+const Component = forwardRef<HTMLButtonElement, Props>(
+    ({ type = 'button', size = 'medium', children, styles, ...attrs }, ref) => (
+        <button
+            ref={ref}
+            type={type}
+            {...stylex.props(styls.base, sizes[size], styles)}
+            {...attrs}
+        >
+            {children}
+        </button>
+    ),
 );
 
 export const ButtonVite = memo(Component);
diff --git a/src/components/button/ButtonZenn.tsx b/src/components/button/ButtonZenn.tsx
@@ -1,7 +1,6 @@
 import clsx from 'clsx';
 import {
     type ComponentPropsWithRef,
-    type FC,
     type ReactElement,
     cloneElement,
     forwardRef,
@@ -10,7 +9,7 @@ import {
 } from 'react';
 
 // https://zenn.dev/kiyoshiro9446/scraps/46b4e4be23bcde
-export type ButtonProps = {
+type Props = {
     variant?: 'primary' | 'secondary';
     disabled?: boolean;
     leftIcon?: ReactElement;
@@ -20,47 +19,48 @@ export type ButtonProps = {
     | ({ asChild?: false } & ComponentPropsWithRef<'button'>)
 );
 
-const Component = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
-    {
-        variant = 'priamry',
-        disabled,
-        leftIcon,
-        rightIcon,
-        asChild = false,
-        children,
-        ...buttonProps
-    },
-    ref,
-) {
-    const shouldActAsChild = asChild && isValidElement(children);
-
-    return cloneElement(
-        shouldActAsChild ? (
-            disabled ? (
-                <div />
-            ) : (
-                children
-            )
-        ) : (
-            <button
-                ref={ref}
-                type='button'
-                disabled={disabled}
-                {...buttonProps}
-            />
-        ),
+const Component = forwardRef<HTMLButtonElement, Props>(
+    (
         {
-            'data-variant': variant,
-            className: clsx(
-                shouldActAsChild && children.props.className,
-                'className' in buttonProps && buttonProps.className,
-            ),
-            ...(disabled && { 'aria-disabled': true }),
+            variant = 'priamry',
+            disabled,
+            leftIcon,
+            rightIcon,
+            asChild = false,
+            children,
+            ...buttonProps
         },
-        leftIcon ? <span>{rightIcon}</span> : null,
-        shouldActAsChild ? children.props.children : children,
-        rightIcon ? <span>{rightIcon}</span> : null,
-    );
-}) as FC<ButtonProps>;
+        ref,
+    ) => {
+        const shouldActAsChild = asChild && isValidElement(children);
+        return cloneElement(
+            shouldActAsChild ? (
+                disabled ? (
+                    <div />
+                ) : (
+                    children
+                )
+            ) : (
+                <button
+                    ref={ref}
+                    type='button'
+                    disabled={disabled}
+                    {...buttonProps}
+                />
+            ),
+            {
+                'data-variant': variant,
+                className: clsx(
+                    shouldActAsChild && children.props.className,
+                    'className' in buttonProps && buttonProps.className,
+                ),
+                ...(disabled && { 'aria-disabled': true }),
+            },
+            leftIcon ? <span>{rightIcon}</span> : null,
+            shouldActAsChild ? children.props.children : children,
+            rightIcon ? <span>{rightIcon}</span> : null,
+        );
+    },
+);
 
 export const ButtonZenn = memo(Component);
diff --git a/src/components/div/DivCustom.tsx b/src/components/div/DivCustom.tsx
@@ -1,9 +1,16 @@
 import type { StyleXStyles } from '@stylexjs/stylex';
 import stylex from '@stylexjs/stylex';
 import type { UserAuthoredStyles } from '@stylexjs/stylex/lib/StyleXTypes';
-import { type FC, type HTMLAttributes, memo } from 'react';
+import { type HTMLAttributes, forwardRef, memo } from 'react';
 
-type TypedStylesKeys = 'center' | 'flexCenter' | 'margin' | 'margin2';
+type TypedStylesKeys =
+    | 'center'
+    | 'flexCenter'
+    | 'flexStart'
+    | 'flexColumn'
+    | 'gap'
+    | 'margin'
+    | 'margin2';
 
 interface Props extends HTMLAttributes<HTMLDivElement> {
     styles?: StyleXStyles<UserAuthoredStyles>;
@@ -24,6 +31,20 @@ const typedStyles: Record<
         justifyContent: 'center',
         alignItems: 'center',
     },
+    flexStart: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'start',
+    },
+    flexColumn: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    gap: {
+        gap: '1em',
+    },
     margin: {
         margin: '1em',
     },
@@ -34,21 +55,26 @@ const typedStyles: Record<
 
 const getTypedStyles = (
     styleTypes?: TypedStylesKeys[],
-): StyleXStyles<UserAuthoredStyles> | undefined => {
-    return styleTypes?.reduce((accStyles, currentType) => {
+): StyleXStyles<UserAuthoredStyles> | undefined =>
+    styleTypes?.reduce((accStyles, currentType) => {
         const styleToAdd = typedStyles[currentType];
         if (styleToAdd) {
             // Avoid the use of spread (`...`) syntax on accumulators.
             Object.assign(accStyles, styleToAdd);
         }
         return accStyles;
     }, {});
-};
 
-const Component: FC<Props> = ({ styles, styleTypes, children, ...attrs }) => (
-    <div {...attrs} {...stylex.props(getTypedStyles(styleTypes), styles)}>
-        {children}
-    </div>
+const Component = forwardRef<HTMLDivElement, Props>(
+    ({ styles, styleTypes, children, ...attrs }, ref) => (
+        <div
+            ref={ref}
+            {...attrs}
+            {...stylex.props(getTypedStyles(styleTypes), styles)}
+        >
+            {children}
+        </div>
+    ),
 );
 
 export const DivCustom = memo(Component);