jp.ui.app.ds 1.0.0 → 1.0.1

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "jp.ui.app.ds",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
   "main": "index.js",
   "type": "module",
   "types": "dist/index.d.ts",
+  "module": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "dev": "storybook dev -p 6006",
@@ -13,6 +14,10 @@
   },
   "author": "",
   "license": "ISC",
+  "dependencies": {
+    "@choochoochoo/jp.theme": "1.0.0",
+    "@material-design-icons/svg": "0.14.15"
+  },
   "devDependencies": {
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",
@@ -34,8 +39,7 @@
     "storybook": "9.1.13",
     "typescript": "5.9.3"
   },
-  "dependencies": {
-    "@choochoochoo/jp.theme": "1.0.0",
-    "@material-design-icons/svg": "0.14.15"
-  }
+  "files": [
+    "dist"
+  ]
 }

package/.storybook/main.ts

@@ -1,31 +0,0 @@
-import type { StorybookConfig } from '@storybook/react-webpack5';
-
-const config: StorybookConfig = {
-  stories: [
-    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
-  ],
-  addons: [
-    "@storybook/addon-webpack5-compiler-swc",
-    "@storybook/addon-docs",
-    "@storybook/addon-themes",
-  ],
-  framework: {
-    name: "@storybook/react-webpack5",
-    options: {}
-  },
-  webpackFinal: config => {
-    // remove svg from existing rule
-    const fileLoaderRule = config.module.rules.find(
-        (rule) => rule.test && rule.test.test('.svg')
-    )
-    fileLoaderRule.exclude = /\.svg$/
-
-    config.module.rules.push({
-      test: /\.svg$/,
-      use: ['@svgr/webpack'],
-    })
-
-    return config
-  }
-};
-export default config;

package/.storybook/preview.tsx

@@ -1,38 +0,0 @@
-import type { Preview } from '@storybook/react-webpack5';
-import { Global, css, ThemeProvider } from '@emotion/react';
-import { withThemeFromJSXProvider } from '@storybook/addon-themes';
-import { ColorSchema, getDarkTheme, getLightTheme } from '@choochoochoo/jp.theme';
-
-const GlobalStyles = () => (
-    <Global
-        styles={css`
-            body {
-                font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-            }
-        `}
-    />
-);
-
-const preview: Preview = {
-    parameters: {
-        controls: {
-            matchers: {
-                color: /(background|color)$/i,
-                date: /Date$/i,
-            },
-        },
-    },
-    decorators: [
-        withThemeFromJSXProvider({
-            themes: {
-                light: getLightTheme<object>(ColorSchema.DEFAULT, {}),
-                dark: getDarkTheme<object>('color_schema__default', {}),
-            },
-            defaultTheme: 'light',
-            Provider: ThemeProvider,
-            GlobalStyles,
-        })
-    ]
-};
-
-export default preview;

package/rollup.config.js

@@ -1,31 +0,0 @@
-import commonjs from '@rollup/plugin-commonjs';
-import typescript from '@rollup/plugin-typescript';
-import { dts } from 'rollup-plugin-dts';
-import terser from '@rollup/plugin-terser';
-import svgr from '@svgr/rollup'
-
-const config = [
-    {
-        input: 'src/index.ts',
-        output: [
-            {
-                file: 'dist/index.js',
-                format: 'es',
-                sourcemap: true,
-            },
-        ],
-        plugins: [
-            commonjs(),
-            typescript(),
-            svgr(),
-            // terser(),
-        ],
-    },
-    {
-        input: './dist/index.d.ts',
-        output: [{ file: 'dist/index.d.ts', format: 'es' }],
-        plugins: [dts()],
-    },
-];
-
-export default config;

package/src/index.ts

@@ -1 +0,0 @@
-export * from './matherial3';

package/src/matherial3/button/common-button.style.ts

@@ -1,35 +0,0 @@
-import styled from '@emotion/styled';
-
-import { NoStyleButton } from '../helpers/no-style-button';
-
-export const filled_button_border_radius = 100;
-
-type CommonButtonStyledProps = {
-    borderColor?: string;
-    backgroundColor?: string;
-    hoverColor?: string;
-}
-
-export const CommonButtonStyled = styled(NoStyleButton)<CommonButtonStyledProps>`
-  background-color: ${({ backgroundColor }: { backgroundColor?: string }) => backgroundColor ?? 'transparent'};
-  border: 1px solid ${({ borderColor }: CommonButtonStyledProps) => borderColor ?? 'transparent'};
-  border-radius: ${filled_button_border_radius}px;
-  padding: 10px 24px;
-  position: relative;
-
-  :hover {
-    ::before {
-      left: 0;
-      bottom: 0;
-      content: "\\00a0";
-      position: absolute;
-      right: 0;
-      pointer-events: none;
-      width: 100%;
-      height: 100%;
-      background-color: ${({ hoverColor }: { hoverColor?: string }) => hoverColor};
-      opacity: 0.08;
-      border-radius: ${filled_button_border_radius}px;
-    }
-  }
-`;

package/src/matherial3/button/common-button.tsx

@@ -1,40 +0,0 @@
-import * as React from 'react';
-import { useTheme, Theme } from '@emotion/react';
-
-import { Label } from '../typography';
-
-import { CommonButtonStyled } from './common-button.style';
-
-export type CommonTypeStyle = {
-    text: string;
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    className?: string;
-    disabled?: boolean;
-    textColor?: string;
-}
-
-type componentTypeStyle = CommonTypeStyle & {
-    backgroundColor?: string;
-    textColor: string;
-    borderColor?: string;
-}
-
-export const CommonButton = ({ text, onClick, className, backgroundColor, textColor, borderColor, disabled }: componentTypeStyle) => {
-    const theme = useTheme() as Theme;
-
-    return (
-        <CommonButtonStyled
-            title={text}
-            onClick={onClick}
-            className={className}
-            backgroundColor={backgroundColor}
-            borderColor={borderColor}
-            hoverColor={theme.m3Schema.onPrimaryContainer}
-            disabled={disabled}
-        >
-            <Label color={textColor} size="lg">
-                {text}
-            </Label>
-        </CommonButtonStyled>
-    );
-};

package/src/matherial3/button/filled-button.stories.ts

@@ -1,33 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { fn } from 'storybook/test';
-
-import { FilledButton } from './filled-button';
-
-const meta = {
-    title: 'm3/button/FilledButton',
-    component: FilledButton,
-    parameters: {
-        layout: 'centered',
-    },
-    tags: ['autodocs'],
-    argTypes: {
-        text: 'text',
-    },
-    args: { onClick: fn() },
-} satisfies Meta<typeof FilledButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    args: {
-        text: 'Button',
-    },
-};
-
-export const Disabled: Story = {
-    args: {
-        text: 'disabled',
-        disabled: true,
-    },
-};

package/src/matherial3/button/filled-button.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { useTheme, Theme } from '@emotion/react';
-
-import { CommonButton, CommonTypeStyle } from './common-button';
-
-export const FilledButton = ({ text, onClick, className, disabled }: CommonTypeStyle) => {
-    const theme = useTheme() as Theme;
-
-    return (
-        <CommonButton
-            text={text}
-            onClick={onClick}
-            backgroundColor={disabled ? `${theme.m3Schema.onSurface}1f` : theme.m3Schema.primary}
-            borderColor={disabled ? 'transparent' : theme.m3Schema.primary}
-            textColor={disabled ? `${theme.m3Schema.onSurface}b0` : theme.m3Schema.onPrimary}
-            className={className}
-            disabled={disabled}
-        />
-    );
-};

package/src/matherial3/button/outlined-button.stories.ts

@@ -1,33 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { fn } from 'storybook/test';
-
-import { OutlinedButton } from './outlined-button';
-
-const meta = {
-    title: 'm3/button/OutlinedButton',
-    component: OutlinedButton,
-    parameters: {
-        layout: 'centered',
-    },
-    tags: ['autodocs'],
-    argTypes: {
-        text: 'text',
-    },
-    args: { onClick: fn() },
-} satisfies Meta<typeof OutlinedButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    args: {
-        text: 'default',
-    },
-};
-
-export const Disabled: Story = {
-    args: {
-        text: 'disabled',
-        disabled: true,
-    },
-};

package/src/matherial3/button/outlined-button.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { useTheme, Theme } from '@emotion/react';
-
-import { CommonButton, CommonTypeStyle } from './common-button';
-
-export const OutlinedButton = ({ text, onClick, className }: CommonTypeStyle) => {
-    const theme = useTheme() as Theme;
-
-    return (
-        <CommonButton
-            text={text}
-            onClick={onClick}
-            textColor={theme.m3Schema.primary}
-            borderColor={theme.m3Schema.outline}
-            className={className}
-        />
-    );
-};

package/src/matherial3/button/text-button.stories.ts

@@ -1,33 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { fn } from 'storybook/test';
-
-import { TextButton } from './text-button';
-
-const meta = {
-    title: 'm3/button/TextButton',
-    component: TextButton,
-    parameters: {
-        layout: 'centered',
-    },
-    tags: ['autodocs'],
-    argTypes: {
-        text: 'text',
-    },
-    args: { onClick: fn() },
-} satisfies Meta<typeof TextButton>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    args: {
-        text: 'Button',
-    },
-};
-
-export const Disabled: Story = {
-    args: {
-        text: 'disabled',
-        disabled: true,
-    },
-};

package/src/matherial3/button/text-button.tsx

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { useTheme, Theme } from '@emotion/react';
-
-import { CommonButton, CommonTypeStyle } from './common-button';
-
-export const TextButton = ({ text, onClick, className, textColor }: CommonTypeStyle) => {
-    const theme = useTheme() as Theme;
-
-    return (
-        <CommonButton
-            text={text}
-            onClick={onClick}
-            textColor={textColor ?? theme.m3Schema.primary}
-            className={className}
-        />
-    );
-};

package/src/matherial3/checkbox/checkbox.stories.ts

@@ -1,29 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { fn } from 'storybook/test';
-
-import { Checkbox } from './checkbox';
-
-const meta = {
-    title: 'm3/Checkbox',
-    component: Checkbox,
-    parameters: {
-        layout: 'centered',
-    },
-    tags: ['autodocs'],
-    args: { onChange: fn(), checked: false },
-} satisfies Meta<typeof Checkbox>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    args: {
-        checked: false,
-    },
-};
-
-export const Checked: Story = {
-    args: {
-        checked: true,
-    },
-};

package/src/matherial3/checkbox/checkbox.style.tsx

@@ -1,53 +0,0 @@
-import styled from '@emotion/styled';
-import { Theme } from '@emotion/react';
-import { SvgIcon } from '../helpers';
-
-
-export const CheckboxRootWrapper = styled.div`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  box-sizing: border-box;
-  -webkit-tap-highlight-color: transparent;
-  background-color: transparent;
-  outline: 0;
-  border: 0;
-  margin: 0;
-  cursor: pointer;
-  user-select: none;
-  vertical-align: middle;
-  appearance: none;
-  text-decoration: none;
-  border-radius: 50%;
-`;
-
-export const CheckboxCheckedIcon = styled(SvgIcon)`
-  svg {
-    path {
-      fill: ${({ theme }: { theme?: Theme }) => theme?.m3Schema.onSurfaceVariant};
-    }
-  }
-`;
-
-export const CheckboxUncheckedIcon = styled(SvgIcon)`
-    svg {
-        path {
-            fill: ${({ theme }: { theme?: Theme }) => theme?.m3Schema.onSurfaceVariant};
-        }
-    }
-`;
-
-export const CheckboxInput = styled.input`
-  cursor: inherit;
-  position: absolute;
-  opacity: 0;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  margin: 0;
-  padding: 0;
-  z-index: 1;
-`;
-

package/src/matherial3/checkbox/checkbox.tsx

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import { useCallback } from 'react';
-import CheckBoxIcon from '@material-design-icons/svg/filled/check_box.svg';
-import CheckBoxOutlineBlankIcon from '@material-design-icons/svg/filled/check_box_outline_blank.svg';
-
-import {
-    CheckboxRootWrapper,
-    CheckboxInput,
-    CheckboxUncheckedIcon,
-    CheckboxCheckedIcon,
-} from './checkbox.style';
-
-export type CheckboxProps = {
-    checked: boolean;
-    onChange?: (checked: boolean) => void;
-}
-
-export const Checkbox = ({ checked, onChange }: CheckboxProps) => {
-    return (
-        <div>
-            <CheckboxRootWrapper>
-                <CheckboxInput
-                    type="checkbox"
-                    checked={checked}
-                    onChange={useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-                        if (onChange) {
-                            onChange(event.target.checked);
-                        }
-                    }, [onChange])}
-                />
-                {
-                    checked ? (
-                        <CheckboxCheckedIcon
-                            width={24}
-                            height={24}
-                            icon={CheckBoxIcon}
-                        />
-                    ) : (
-                        <CheckboxUncheckedIcon
-                            width={24}
-                            height={24}
-                            icon={CheckBoxOutlineBlankIcon}
-                        />
-                    )
-                }
-                </CheckboxRootWrapper>
-        </div>
-    );
-};

package/src/matherial3/helpers/backdrop/backdrop.style.ts

@@ -1,14 +0,0 @@
-import styled from '@emotion/styled';
-
-export const BackdropStyled = styled.div`
-  background-color: ${({ theme }) => theme.m3Schema.scrim}85;
-  position: fixed;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottoM: 0;
-  z-index: -1;
-`;

package/src/matherial3/helpers/backdrop/backdrop.tsx

@@ -1,9 +0,0 @@
-import * as React from 'react';
-
-import { BackdropStyled } from './backdrop.style';
-
-export const Backdrop = () => {
-    return (
-        <BackdropStyled aria-hidden="true"/>
-    );
-};

package/src/matherial3/helpers/index.ts

@@ -1,19 +0,0 @@
-import { Backdrop } from './backdrop';
-import { NoStyleButton } from './no-style-button';
-import { Popup } from './popup';
-import { ColumnLeft, ColumnCenter, RowCenter, RowStart, Stack} from './stack';
-import { useOutsideClick } from './outside-click';
-import { SvgIcon } from './svg-icon';
-
-export {
-    Backdrop,
-    NoStyleButton,
-    Popup,
-    ColumnLeft,
-    ColumnCenter,
-    RowCenter,
-    RowStart,
-    Stack,
-    useOutsideClick,
-    SvgIcon,
-}

package/src/matherial3/helpers/no-style-button/no-style-button.style.ts

@@ -1,12 +0,0 @@
-import styled from '@emotion/styled';
-
-export const NoStyleButton = styled.button`
-  background-color: transparent;
-  cursor: pointer;
-  border: none;
-  padding: 0;
-  margin: 0;
-  -webkit-tap-highlight-color: transparent;
-  appearance: none;
-  user-select: none;
-`;

package/src/matherial3/helpers/outside-click.ts

@@ -1,17 +0,0 @@
-import { MutableRefObject, useEffect } from 'react';
-
-export const useOutsideClick = (ref: MutableRefObject<HTMLElement | undefined | null>, callback: (event: MouseEvent) => void) => {
-    const handleClickOutside = (event: DocumentEventMap['mousedown']) => {
-        const target = event.target as HTMLElement;
-        if (ref.current && !ref.current?.contains(target)) {
-            callback(event);
-        }
-    };
-
-    useEffect(() => {
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    });
-};

package/src/matherial3/helpers/popup/popup.style.tsx

@@ -1,14 +0,0 @@
-import styled from '@emotion/styled';
-
-export type PopupStyleType = {
-    zIndex: number;
-}
-
-export const PopupStyle = styled.div`
-  position: fixed;
-  z-index: ${({ zIndex }: PopupStyleType) => zIndex};
-  top: 0;
-  left: 0;
-  right: 0;
-  bottoM: 0;
-`;

package/src/matherial3/helpers/popup/popup.tsx

@@ -1,17 +0,0 @@
-import * as React from 'react';
-
-import { PopupStyle } from './popup.style';
-
-type componentType = {
-    children: React.ReactNode;
-    zIndex: number;
-    className?: string;
-}
-
-export const Popup = ({ children, zIndex, className }: componentType) => {
-    return (
-        <PopupStyle zIndex={zIndex} className={className}>
-            {children}
-        </PopupStyle>
-    );
-};

package/src/matherial3/helpers/stack/column-center.tsx

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import { SerializedStyles } from '@emotion/react';
-
-import { Stack } from './stack';
-
-type componentType = {
-    children: React.ReactNode;
-    css?: SerializedStyles;
-}
-
-export const ColumnCenter = ({ children, css }: componentType) => {
-    return (
-        <Stack
-            direction="column"
-            alignItems="center"
-            justifyContent="center"
-            css={css}
-        >
-            {children}
-        </Stack>
-    );
-};

package/src/matherial3/helpers/stack/column-left.tsx

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import { SerializedStyles } from '@emotion/react';
-
-import { Stack } from './stack';
-
-type componentType = {
-    children: React.ReactNode;
-    css?: SerializedStyles;
-}
-
-export const ColumnLeft = ({ children, css }: componentType) => {
-    return (
-        <Stack
-            direction="column"
-            alignItems="start"
-            justifyContent="center"
-            css={css}
-        >
-            {children}
-        </Stack>
-    );
-};