@charcoal-ui/react-sandbox 4.2.0 → 4.3.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react-sandbox",
-  "version": "4.2.0",
+  "version": "4.3.0-beta.0",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -21,7 +21,8 @@
     "test": "vitest run --passWithNoTests"
   },
   "devDependencies": {
-    "@charcoal-ui/esbuild-plugin-styled-components": "^4.2.0",
+    "@babel/core": "^7.23.9",
+    "@charcoal-ui/esbuild-plugin-styled-components": "4.3.0-beta.0",
     "@storybook/addon-actions": "^7.4.1",
     "@storybook/addon-knobs": "^7.0.2",
     "@storybook/addons": "^7.4.1",
@@ -50,11 +51,11 @@
     "vitest": "^2.0.2"
   },
   "dependencies": {
-    "@charcoal-ui/foundation": "^4.2.0",
-    "@charcoal-ui/react": "^4.2.0",
-    "@charcoal-ui/styled": "^4.2.0",
-    "@charcoal-ui/theme": "^4.2.0",
-    "@charcoal-ui/utils": "^4.2.0",
+    "@charcoal-ui/foundation": "4.3.0-beta.0",
+    "@charcoal-ui/react": "4.3.0-beta.0",
+    "@charcoal-ui/styled": "4.3.0-beta.0",
+    "@charcoal-ui/theme": "4.3.0-beta.0",
+    "@charcoal-ui/utils": "4.3.0-beta.0",
     "polished": "^4.1.4",
     "react-spring": "^9.0.0",
     "warning": "^4.0.3"
@@ -76,5 +77,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react-sandbox"
   },
-  "gitHead": "45c93231d4b0feffe8f3a6bef2cdab96302c8eb4"
+  "gitHead": "864fc9a6c8ad391df01c7765ab0dff66842c612d"
 }

package/src/components/Carousel/index.story.tsx

@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from '@storybook/react'
+import Carousel from '.'
+
+export default {
+  title: 'react-sandbox/Carousel',
+  component: Carousel,
+  argTypes: {},
+} satisfies Meta<typeof Carousel>
+
+const items = [1, 2, 3, 4, 5]
+export const Default: StoryObj<typeof Carousel> = {
+  render: (props) => (
+    <Carousel {...props}>
+      <div
+        style={{
+          display: 'flex',
+          gap: '8px',
+        }}
+      >
+        {items.map((item) => (
+          <div
+            key={item}
+            style={{
+              width: '200px',
+              height: '100px',
+              backgroundColor: 'var(--charcoal-brand)',
+              filter: `hue-rotate(0.${item}turn)`,
+            }}
+          />
+        ))}
+      </div>
+    </Carousel>
+  ),
+}

package/src/components/Filter/index.story.tsx

@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { FilterButton, FilterLink, FilterIconButton } from '.'
+
+export default {
+  title: 'react-sandbox/Filter',
+  component: FilterButton,
+} satisfies Meta<typeof FilterButton>
+
+export const Default: StoryObj<typeof Filter> = {
+  render: (props) => {
+    return (
+      <>
+        FilterButton: <FilterButton {...props}>test</FilterButton>
+        FilterLink: <FilterLink {...props}>test</FilterLink>
+        FilterIconButton:{' '}
+        <FilterIconButton width={40} height={40} {...props}>
+          test
+        </FilterIconButton>
+      </>
+    )
+  },
+}

package/src/components/Layout/index.story.tsx

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react'
+import Layout from '.'
+
+export default {
+  title: 'react-sandbox/Layout',
+  component: Layout,
+} satisfies Meta<typeof Layout>
+
+export const Default: StoryObj<typeof Layout> = {
+  render: (props) => {
+    return (
+      <Layout {...props} menu={<>menu</>} header={<>header</>}>
+        children
+      </Layout>
+    )
+  },
+}

package/src/components/LeftMenu/index.story.tsx

@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/react'
+import LeftMenu from '.'
+
+export default {
+  title: 'react-sandbox/LeftMenu',
+  component: LeftMenu,
+} satisfies Meta<typeof LeftMenu>
+
+const links = [
+  { text: 'text1', to: '', id: '1' },
+  { text: 'text2', to: '', id: '2' },
+  { text: 'text3', to: '', id: '3' },
+]
+export const Default: StoryObj<typeof LeftMenu> = {
+  render: (props) => {
+    return (
+      <LeftMenu {...props} links={links} active="1">
+        children
+      </LeftMenu>
+    )
+  },
+}

package/src/components/Pager/index.story.tsx

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react'
+import Pager from '.'
+
+export default {
+  title: 'react-sandbox/Pager',
+  component: Pager,
+  args: {
+    page: 5,
+    pageCount: 10,
+  },
+} satisfies Meta<typeof Pager>
+
+export const Default: StoryObj<typeof Pager> = {
+  render: (props) => {
+    return <Pager {...props}>children</Pager>
+  },
+}

package/src/components/SwitchCheckbox/index.story.tsx

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react'
+import SwitchCheckbox from '.'
+
+export default {
+  title: 'react-sandbox/SwitchCheckbox',
+  component: SwitchCheckbox,
+} satisfies Meta<typeof SwitchCheckbox>
+
+export const Default: StoryObj<typeof SwitchCheckbox> = {
+  render: (props) => {
+    return <SwitchCheckbox {...props}>children</SwitchCheckbox>
+  },
+}

package/src/components/TextEllipsis/helper.ts

@@ -1,12 +1,6 @@
 // https://github.com/fernandopasik/react-children-utilities/blob/971d8a0324e6183734d8d1af9a65dbad18ab3d00/src/lib/onlyText.ts
 
-import {
-  Children,
-  isValidElement,
-  ReactElement,
-  ReactNode,
-  ReactText,
-} from 'react'
+import { Children, isValidElement, ReactElement, ReactNode } from 'react'
 
 const hasChildren = (
   element: ReactNode
@@ -16,7 +10,7 @@ const hasChildren = (
 
 export const childToString = (
   // eslint-disable-next-line @typescript-eslint/ban-types
-  child?: ReactText | boolean | {} | null
+  child?: number | string | boolean | {} | null
 ): string => {
   if (
     typeof child === 'undefined' ||

package/src/components/WithIcon/index.story.tsx

@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from '@storybook/react'
+import WithIcon from '.'
+
+export default {
+  title: 'react-sandbox/WithIcon',
+  component: WithIcon,
+  argTypes: {
+    prefix: {
+      type: 'boolean',
+    },
+    fit: {
+      type: 'boolean',
+    },
+    width: {
+      type: 'number',
+    },
+    fixed: {
+      type: 'boolean',
+    },
+  },
+} satisfies Meta<typeof WithIcon>
+
+export const Default: StoryObj<typeof WithIcon> = {
+  render: (props) => {
+    return (
+      <WithIcon {...props} icon={<pixiv-icon name="16/Like" />}>
+        children
+      </WithIcon>
+    )
+  },
+}

package/src/components/icons/DotsIcon.tsx

@@ -7,7 +7,7 @@ interface Props {
 
 export { DotsIcon as default }
 
-function DotsIcon({ size }: Props) {
+function DotsIcon({ size = 16 }: Props) {
   return (
     <StyledSVG viewBox="0 0 20 6" width={size} height={size}>
       <path
@@ -23,9 +23,6 @@ function DotsIcon({ size }: Props) {
     </StyledSVG>
   )
 }
-DotsIcon.defaultProps = {
-  size: 16,
-}
 
 const StyledSVG = styled.svg`
   fill: currentColor;

package/src/components/icons/WedgeIcon.tsx

@@ -14,7 +14,7 @@ interface Props {
   direction: WedgeDirection
 }
 
-export default function WedgeIcon({ size, direction }: Props) {
+export default function WedgeIcon({ size = 16, direction }: Props) {
   return (
     // NOTE: directionToTransform depends on the value of viewBox
     <svg viewBox="0 0 10 8" width={size} height={size}>
@@ -26,11 +26,6 @@ export default function WedgeIcon({ size, direction }: Props) {
     </svg>
   )
 }
-WedgeIcon.defaultProps = {
-  size: 16,
-  white: false,
-  lightGray: false,
-}
 
 function directionToTransform(direction: WedgeDirection) {
   // "5 4" is the center point of the "0 0 10 8" viewBox

package/src/foundation/hooks.ts

@@ -96,7 +96,7 @@ function measure(ref: Element | null): ElementSize | undefined {
 }
 
 export function useElementSize(
-  ref: React.RefObject<Element>,
+  ref: React.RefObject<Element | null>,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   deps: any[] = []
 ) {
@@ -174,7 +174,9 @@ export function useElementSize(
  */
 export function useDebounceAnimationState<T>(defaultValue: T) {
   const [state, setState] = useState(defaultValue)
-  const timer = useRef<ReturnType<typeof requestAnimationFrame>>()
+  const timer = useRef<ReturnType<typeof requestAnimationFrame> | undefined>(
+    undefined
+  )
   // typescript bug? (any when omitting type annotation)
   // eslint-disable-next-line @typescript-eslint/no-inferrable-types
   const setDebounceState = useCallback((value: T, force: boolean = false) => {