Merge pull request #16 from ymrl/v100_1_0

v100.1.0

.github/workflows/publish_package_to_npmjs.yml

@@ -0,0 +1,25 @@
+name: Publish Package to npmjs
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: .node-version
+          cache: 'npm'
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.jest/Mock.js

@@ -1,18 +0,0 @@
-export default {
-  use: () => {},
-  unuse: () => {}
-};
-
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: jest.fn().mockImplementation(query => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(), // Deprecated
-    removeListener: jest.fn(), // Deprecated
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
-  })),
-});

.jest/setup.js

@@ -1 +0,0 @@
-import 'jest-canvas-mock';

.storybook/main.js → .storybook/main.ts

@@ -1,10 +1,14 @@
-module.exports = {
+import type { StorybookConfig } from '@storybook/react-webpack5';
+
+const config: StorybookConfig = {
   addons: [
     '@storybook/addon-knobs',
     '@storybook/addon-essentials',
     '@storybook/addon-links',
     '@storybook/addon-a11y',
+    '@storybook/addon-interactions',
     '@storybook/addon-storysource',
+    'storybook-addon-pseudo-states',
     '@kemuridama/storybook-addon-github',
   ],
   stories: [
@@ -20,7 +24,7 @@ module.exports = {
     module: {
       ...config.module,
       rules: [
-        ...config.module.rules,
+        ...(config.module?.rules ?? []),
         {
           test: /\.stories\.tsx?$/,
           use: [require.resolve('@storybook/source-loader')],
@@ -63,3 +67,5 @@ module.exports = {
     autodocs: true,
   },
 };
+
+export default config;

.storybook/manager.js

@@ -1,11 +1,11 @@
 import { addons } from '@storybook/addons';
 import { create } from '@storybook/theming';
-import logo from '../.storybook/logo-vibes.svg';
+import logo from './logo-vibes.svg';
 
 addons.setConfig({
   theme: create({
     base: 'light',
     brandTitle: 'vibes',
     brandImage: logo,
   }),
-})
+});

.storybook/preview.js → .storybook/preview.tsx

@@ -1,16 +1,18 @@
 import * as React from 'react';
+import ReactDOM from 'react-dom';
 import { DocsContainer } from '@storybook/addon-docs';
-import '../vibes_2021.min.css';
+import { Decorator, Parameters } from '@storybook/react';
 import { VibesProvider, useLang } from '../src/utilities/VibesProvider';
-import ReactDOM from 'react-dom';
+import '../vibes_2021.min.css';
 
-const LanguagePortal = React.forwardRef(({ lang }, ref) =>
-  ReactDOM.createPortal(<div lang={lang} ref={ref}></div>, document.body)
+const LanguagePortal = React.forwardRef<HTMLDivElement, { lang: string }>(
+  ({ lang }, ref) =>
+    ReactDOM.createPortal(<div lang={lang} ref={ref}></div>, document.body)
 );
 
-export const decorators = [
+export const decorators: Decorator[] = [
   (Story, context) => {
-    const portalParentRef = React.useRef();
+    const portalParentRef = React.useRef(null);
     return (
       <VibesProvider
         fixedLayout={!context.globals.responsive}
@@ -26,7 +28,7 @@ export const decorators = [
   },
 ];
 
-export const parameters = {
+export const parameters: Parameters = {
   viewMode: 'docs',
   docs: {
     container: ({ children, context }) => (

dist/lv2/accordionPanel/AccordionPanel.d.ts

@@ -9,6 +9,9 @@ declare type Props = {
      * border を表示するか
      */
     border?: 'both' | 'bottom' | 'top';
+    /**
+     * @deprecated この値を指定しても何も変わりません
+     */
     small?: boolean;
     onClick: () => any;
 } & MarginClassProps & CommonProps;

dist/lv2/breadcrumbs/Breadcrumbs.d.ts

@@ -8,7 +8,7 @@ declare type Props = {
         url?: string;
         onClick?: () => void;
         /**
-         * (deprecated) `onSelfWindowNavigation` を使用してください
+         * @deprecated `onSelfWindowNavigation` を使用してください
          */
         onClickNavigator?: () => void;
         /**

dist/lv2/combobox/ApiMultiComboBox.d.ts

@@ -1,11 +1,16 @@
 import * as React from 'react';
-import { CommonProps } from '../../utilities/commonProps';
 import { PropsFromTextField } from './MultiComboBox';
 import { ApiMetaData, FetchParams, MultiComboBoxOption } from './hooks';
 export { useApiMultiComboBox } from './hooks/apiMultiComboBox';
 export type { ApiMetaData } from './hooks';
 export type { MultiComboBoxOption } from './hooks';
-declare type Props = {
+/**
+ * `MultiComboBox` に API による検索とページネーションの機能を付与したコンポーネントです。使い方・使い分けについては `MultiComboBox` も参照してください
+ *
+ * * リソース管理のため、基本的には`useApiMultiComboBox`を併用してください
+ * * リスト内の項目が固定されている場合は`MultiComboBox`を使用してください。
+ */
+declare const ApiMultiComboBox: React.ForwardRefExoticComponent<{
     /**
      * コンボボックスに表示するためのデータを取得するメソッドです。
      * 検索やページネーションのタイミングで呼び出されます。
@@ -22,20 +27,14 @@ declare type Props = {
     /**
      * 新規登録時のハンドラです。新規登録を表示するか否かの判定も兼ねています。
      */
-    createNewItem?: (fieldValue: string) => void;
-    values?: MultiComboBoxOption[];
+    createNewItem?: ((fieldValue: string) => void) | undefined;
+    values?: MultiComboBoxOption<never>[] | undefined;
     options: MultiComboBoxOption[];
-    maxSelectionCount?: number;
-    listWidth?: 'xSmall' | 'small' | 'medium' | 'large';
-    emptyMessage?: string;
-    onChange?: (values: MultiComboBoxOption[]) => void;
-    onBlur?: (e: React.FormEvent, fetchParams: FetchParams, values?: MultiComboBoxOption[]) => void;
-    onFocus?: () => void;
-} & Omit<PropsFromTextField, 'onFocus' | 'onBlur'> & CommonProps;
-/**
- * `MultiComboBox` に API による検索とページネーションの機能を付与したコンポーネントです。使い方・使い分けについては `MultiComboBox` も参照してください
- *
- * * リソース管理のため、基本的には`useApiMultiComboBox`を併用してください
- * * リスト内の項目が固定されている場合は`MultiComboBox`を使用してください。
- */
-export default function ApiMultiComboBox(props: Props): React.ReactElement;
+    maxSelectionCount?: number | undefined;
+    listWidth?: "small" | "medium" | "large" | "xSmall" | undefined;
+    emptyMessage?: string | undefined;
+    onChange?: ((values: MultiComboBoxOption[]) => void) | undefined;
+    onBlur?: ((e: React.FormEvent, fetchParams: FetchParams, values?: MultiComboBoxOption<never>[] | undefined) => void) | undefined;
+    onFocus?: (() => void) | undefined;
+} & Omit<PropsFromTextField, "onFocus" | "onBlur"> & import("../../utilities/commonProps").CommonDataProps & import("../../utilities/functionalMarginClasses").FunctionalMarginProps & React.RefAttributes<HTMLInputElement>>;
+export default ApiMultiComboBox;