diff --git a/packages/smarthr-ui/package.json b/packages/smarthr-ui/package.json index 362ade4000..bcd866baeb 100644 --- a/packages/smarthr-ui/package.json +++ b/packages/smarthr-ui/package.json @@ -121,6 +121,26 @@ }, "main": "lib/index.js", "module": "esm/index.js", + "exports": { + ".": { + "types": "./lib/index.d.ts", + "import": "./esm/index.js", + "require": "./lib/index.js" + }, + "./types": { + "types": "./lib/types/index.d.ts", + "import": "./esm/types/index.js", + "require": "./lib/types/index.js" + }, + "./lib/*": { + "types": "./lib/*.d.ts", + "require": "./lib/*.js" + }, + "./esm/*": { + "types": "./lib/*.d.ts", + "import": "./esm/*.js" + } + }, "publishConfig": { "access": "public", "registry": "https://registry.npmjs.org" diff --git a/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanel.tsx b/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanel.tsx index 99b8d7e69d..9ac8894e7f 100644 --- a/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanel.tsx +++ b/packages/smarthr-ui/src/components/AccordionPanel/AccordionPanel.tsx @@ -79,7 +79,6 @@ export const AccordionPanel: React.FC = ({ parentRef, }} > - {}
) diff --git a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/MultiComboBox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/MultiComboBox.stories.tsx index 90a6097fc0..6fb649ed37 100644 --- a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/MultiComboBox.stories.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/MultiComboBox.stories.tsx @@ -7,7 +7,6 @@ import { Stack } from '../../../Layout' import { Text } from '../../../Text' import { MultiComboBox } from '../MultiComboBox' -// eslint-disable-next-line storybook/prefer-pascal-case export const defaultItems = { 'option 1': { label: 'option 1', diff --git a/packages/smarthr-ui/src/components/Dialog/ActionDialog.stories.tsx b/packages/smarthr-ui/src/components/Dialog/ActionDialog.stories.tsx index 49e8d5db58..a04ce9cec0 100644 --- a/packages/smarthr-ui/src/components/Dialog/ActionDialog.stories.tsx +++ b/packages/smarthr-ui/src/components/Dialog/ActionDialog.stories.tsx @@ -37,12 +37,12 @@ export default { export const Action_Dialog: StoryFn = () => { const [openedDialog, setOpenedDialog] = useState<'normal' | 'opened' | null>(null) - const [responseMessage, setResponseMessage] = - useState['responseMessage']>() + const [responseStatus, setResponseStatus] = + useState['responseStatus']>() const openedFocusRef = useRef(null) const onClickClose = () => { setOpenedDialog(null) - setResponseMessage(undefined) + setResponseStatus(undefined) } return ( @@ -65,11 +65,11 @@ export const Action_Dialog: StoryFn = () => { decorators={{ closeButtonLabel: (txt) => `cancel.(${txt})` }} onClickAction={(closeDialog) => { action('executed')() - setResponseMessage(undefined) + setResponseStatus(undefined) closeDialog() }} onClickClose={onClickClose} - responseMessage={responseMessage} + responseStatus={responseStatus} id="dialog-action" data-test="dialog-content" width="40em" @@ -80,7 +80,7 @@ export const Action_Dialog: StoryFn = () => { - {responseStatus.message && ( + {calcedResponseStatus.message && (
- - {responseStatus.message} + + {calcedResponseStatus.message}
)} diff --git a/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx b/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx index 928b01adc8..886372e499 100644 --- a/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx +++ b/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/FilterDropdown.tsx @@ -5,7 +5,7 @@ import innerText from 'react-innertext' import { tv } from 'tailwind-variants' import { type DecoratorType, type DecoratorsType } from '../../../hooks/useDecorators' -import { type ResponseMessageType, useResponseMessage } from '../../../hooks/useResponseMessage' +import { type ResponseStatus, useResponseStatus } from '../../../hooks/useResponseStatus' import { Button, BaseProps as ButtonProps } from '../../Button' import { FaCircleCheckIcon, FaFilterIcon, FaRotateLeftIcon } from '../../Icon' import { Cluster, Stack } from '../../Layout' @@ -26,7 +26,7 @@ type Props = { decorators?: DecoratorsType< 'status' | 'triggerButton' | 'applyButton' | 'cancelButton' | 'resetButton' > - responseMessage?: ResponseMessageType + responseStatus?: ResponseStatus /** 引き金となるボタンの大きさ */ triggerSize?: ButtonProps['size'] /** 引き金となるボタンをアイコンのみとするかどうか */ @@ -86,7 +86,7 @@ export const FilterDropdown: FC = ({ onClose, children, decorators, - responseMessage, + responseStatus, triggerSize, onlyIconTrigger = false, ...props @@ -113,7 +113,7 @@ export const FilterDropdown: FC = ({ const filteredIconAriaLabel = useMemo(() => innerText(texts.status), [texts.status]) - const calcedResponseStatus = useResponseMessage(responseMessage) + const calcedResponseStatus = useResponseStatus(responseStatus) const styles = useMemo(() => { const { diff --git a/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/stories/FilterDropdown.stories.tsx b/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/stories/FilterDropdown.stories.tsx index aee14e659a..cb1eacd56e 100644 --- a/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/stories/FilterDropdown.stories.tsx +++ b/packages/smarthr-ui/src/components/Dropdown/FilterDropdown/stories/FilterDropdown.stories.tsx @@ -42,13 +42,13 @@ export const Disabled: StoryObj = { }, } -export const ResponseMessage: StoryObj = { - name: 'responseMessage', +export const ResponseStatus: StoryObj = { + name: 'responseStatus', render: (args) => ( - - - + + + ), args: { diff --git a/packages/smarthr-ui/src/components/FloatArea/FloatArea.tsx b/packages/smarthr-ui/src/components/FloatArea/FloatArea.tsx index 387bdf9098..029fc630d8 100644 --- a/packages/smarthr-ui/src/components/FloatArea/FloatArea.tsx +++ b/packages/smarthr-ui/src/components/FloatArea/FloatArea.tsx @@ -1,13 +1,14 @@ import React, { ComponentPropsWithoutRef, FC, ReactNode, useMemo } from 'react' import { tv } from 'tailwind-variants' -import { type ResponseMessageTypeWithoutProcessing } from '../../hooks/useResponseMessage' import { AbstractSize, CharRelativeSize } from '../../themes/createSpacing' import { Gap } from '../../types' import { Base } from '../Base' import { Cluster } from '../Layout' import { ResponseMessage } from '../ResponseMessage' +import type { ResponseStatusWithoutProcessing } from '../../hooks/useResponseStatus' + const floatArea = tv({ base: 'smarthr-ui-FloatArea shr-z-fixed-menu shr-sticky -shr-mx-0.5', variants: { @@ -55,7 +56,7 @@ type Props = StyleProps & { /** tertiary 領域に表示するボタン */ tertiaryButton?: ReactNode /** 操作に対するフィードバックメッセージ */ - responseMessage?: ResponseMessageTypeWithoutProcessing + responseStatus?: ResponseStatusWithoutProcessing } type ElementProps = Omit, keyof Props> @@ -63,7 +64,7 @@ export const FloatArea: FC = ({ primaryButton, secondaryButton, tertiaryButton, - responseMessage, + responseStatus, bottom, zIndex, style, @@ -79,10 +80,8 @@ export const FloatArea: FC = ({ {tertiaryButton}
- {responseMessage && ( - - {responseMessage.text} - + {responseStatus && ( + {responseStatus.text} )} {secondaryButton} diff --git a/packages/smarthr-ui/src/components/FloatArea/stories/FloatArea.stories.tsx b/packages/smarthr-ui/src/components/FloatArea/stories/FloatArea.stories.tsx index 9a53a15a48..a0326a24e5 100644 --- a/packages/smarthr-ui/src/components/FloatArea/stories/FloatArea.stories.tsx +++ b/packages/smarthr-ui/src/components/FloatArea/stories/FloatArea.stories.tsx @@ -1,6 +1,6 @@ import React from 'react' -import { ResponseMessageType } from '../../../types' +import { ResponseStatusWithoutProcessing } from '../../../types' import { Base } from '../../Base' import { Button } from '../../Button' import { Stack } from '../../Layout' @@ -22,7 +22,7 @@ const _tertiaryButtonOptions = { あり: , } -const _responseMessageOptions: { [key: string]: ResponseMessageType | undefined } = { +const _responseStatusOptions: { [key: string]: ResponseStatusWithoutProcessing | undefined } = { なし: undefined, success: { status: 'success', text: '成功メッセージです。' }, error: { status: 'error', text: '失敗メッセージです。' }, @@ -48,10 +48,10 @@ export default { options: Object.keys(_tertiaryButtonOptions), mapping: _tertiaryButtonOptions, }, - responseMessage: { + responseStatus: { control: 'radio', - options: Object.keys(_responseMessageOptions), - mapping: _responseMessageOptions, + options: Object.keys(_responseStatusOptions), + mapping: _responseStatusOptions, }, }, args: { @@ -89,10 +89,10 @@ export const TertiaryButton: StoryObj = { }, } -export const ResponseMessage: StoryObj = { - name: 'responseMessage', +export const ResponseStatus: StoryObj = { + name: 'responseStatus', args: { - responseMessage: _responseMessageOptions.success, + responseStatus: _responseStatusOptions.success, }, } diff --git a/packages/smarthr-ui/src/components/FloatArea/stories/VRTFloatArea.stories.tsx b/packages/smarthr-ui/src/components/FloatArea/stories/VRTFloatArea.stories.tsx index efadf4c592..bee107fe5a 100644 --- a/packages/smarthr-ui/src/components/FloatArea/stories/VRTFloatArea.stories.tsx +++ b/packages/smarthr-ui/src/components/FloatArea/stories/VRTFloatArea.stories.tsx @@ -23,7 +23,7 @@ export default { primaryButton={} secondaryButton={} tertiaryButton={} - responseMessage={{ status: 'error', text: '入力に誤りがあります。' }} + responseStatus={{ status: 'error', text: '入力に誤りがあります。' }} /> ), diff --git a/packages/smarthr-ui/src/components/WarekiPicker/stories/VRTWarekiPicker.stories.tsx b/packages/smarthr-ui/src/components/WarekiPicker/stories/VRTWarekiPicker.stories.tsx index dda5bd4caa..97d34b52d6 100644 --- a/packages/smarthr-ui/src/components/WarekiPicker/stories/VRTWarekiPicker.stories.tsx +++ b/packages/smarthr-ui/src/components/WarekiPicker/stories/VRTWarekiPicker.stories.tsx @@ -1,6 +1,3 @@ -/* eslint-disable smarthr/a11y-input-has-name-attribute */ -/* eslint-disable smarthr/a11y-prohibit-input-placeholder */ -/* eslint-disable smarthr/a11y-input-in-form-control */ import { userEvent, within } from '@storybook/test' import dayjs from 'dayjs' import React from 'react' diff --git a/packages/smarthr-ui/src/components/WarekiPicker/stories/WarekiPicker.stories.tsx b/packages/smarthr-ui/src/components/WarekiPicker/stories/WarekiPicker.stories.tsx index fe104cb5e8..518c06db87 100644 --- a/packages/smarthr-ui/src/components/WarekiPicker/stories/WarekiPicker.stories.tsx +++ b/packages/smarthr-ui/src/components/WarekiPicker/stories/WarekiPicker.stories.tsx @@ -1,4 +1,3 @@ -/* eslint-disable smarthr/a11y-input-in-form-control */ import { userEvent, within } from '@storybook/test' import dayjs from 'dayjs' import React from 'react' diff --git a/packages/smarthr-ui/src/hooks/useResponseMessage.ts b/packages/smarthr-ui/src/hooks/useResponseStatus.ts similarity index 61% rename from packages/smarthr-ui/src/hooks/useResponseMessage.ts rename to packages/smarthr-ui/src/hooks/useResponseStatus.ts index 498571a9a0..1545d4b56c 100644 --- a/packages/smarthr-ui/src/hooks/useResponseMessage.ts +++ b/packages/smarthr-ui/src/hooks/useResponseStatus.ts @@ -1,18 +1,19 @@ import { ReactNode, useMemo } from 'react' -export type ResponseMessageTypeWithoutProcessing = { +export type ResponseStatusWithoutProcessing = { status: 'success' | 'error' text: ReactNode } -export type ResponseMessageType = - | ResponseMessageTypeWithoutProcessing + +export type ResponseStatus = + | ResponseStatusWithoutProcessing | { status: 'processing' } -export const useResponseMessage = (responseMessage: ResponseMessageType | undefined) => { +export const useResponseStatus = (responseStatus: ResponseStatus | undefined) => { const calculated = useMemo(() => { - if (!responseMessage) { + if (!responseStatus) { return { isProcessing: false, status: undefined, @@ -20,7 +21,7 @@ export const useResponseMessage = (responseMessage: ResponseMessageType | undefi } } - if (responseMessage.status === 'processing') { + if (responseStatus.status === 'processing') { return { isProcessing: true, status: undefined, @@ -32,10 +33,10 @@ export const useResponseMessage = (responseMessage: ResponseMessageType | undefi isProcessing: false, // HINT: statusがprocessingではない === success or errorであることが確定する // success or error の場合、text属性も必ず存在する - status: responseMessage.status, - message: responseMessage.text, + status: responseStatus.status, + message: responseStatus.text, } - }, [responseMessage]) + }, [responseStatus]) return calculated } diff --git a/packages/smarthr-ui/src/types/index.ts b/packages/smarthr-ui/src/types/index.ts index 11b54abcd5..58ef8f6e74 100644 --- a/packages/smarthr-ui/src/types/index.ts +++ b/packages/smarthr-ui/src/types/index.ts @@ -1,3 +1,4 @@ export type { Gap, SeparateGap } from './Gap' export type { LocaleMap } from './Locale' export type { ElementRef, ElementRefProps } from './ComponentTypes' +export type { ResponseStatus, ResponseStatusWithoutProcessing } from '../hooks/useResponseStatus' diff --git a/sandbox/next/tsconfig.json b/sandbox/next/tsconfig.json index 7b28589304..f48e7ee6f9 100644 --- a/sandbox/next/tsconfig.json +++ b/sandbox/next/tsconfig.json @@ -1,6 +1,10 @@ { "compilerOptions": { - "lib": ["dom", "dom.iterable", "esnext"], + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], "allowJs": true, "skipLibCheck": true, "strict": true, @@ -18,9 +22,19 @@ } ], "paths": { - "@/*": ["./src/*"] - } + "@/*": [ + "./src/*" + ] + }, + "target": "ES2017" }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], - "exclude": ["node_modules"] + "include": [ + "next-env.d.ts", + "**/*.ts", + "**/*.tsx", + ".next/types/**/*.ts" + ], + "exclude": [ + "node_modules" + ] }