jp.ui.app.ds 1.0.0 → 1.0.2

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>
-    );
-};

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

@@ -1,19 +0,0 @@
-import * as React from 'react';
-
-import { Stack } from './stack';
-
-type componentType = {
-    children: React.ReactNode;
-}
-
-export const RowCenter = ({ children }: componentType) => {
-    return (
-        <Stack
-            direction="row"
-            alignItems="center"
-            justifyContent="center"
-        >
-            {children}
-        </Stack>
-    );
-};

package/src/matherial3/helpers/stack/row-start.tsx

@@ -1,20 +0,0 @@
-
-import * as React from 'react';
-
-import { Stack } from './stack';
-
-type componentType = {
-    children: React.ReactNode;
-}
-
-export const RowStart = ({ children }: componentType) => {
-    return (
-        <Stack
-            direction="row"
-            alignItems="start"
-            justifyContent="center"
-        >
-            {children}
-        </Stack>
-    );
-};

package/src/matherial3/helpers/stack/stack.tsx

@@ -1,16 +0,0 @@
-import styled from '@emotion/styled';
-
-type componentType = {
-    direction: 'row' | 'column'
-    justifyContent: 'start' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'end'
-    alignItems: 'stretch' | 'center' | 'start' | 'end'
-    gap?: number
-}
-
-export const Stack = styled.div`
-  display: flex;
-  flex-direction: ${({ direction }: componentType) => direction};
-  justify-content: ${({ justifyContent }: componentType) => justifyContent};
-  align-items: ${({ alignItems }: componentType) => alignItems};
-  gap: ${({ gap }: componentType) => gap ? `${gap}px` : 'initial'};
-`;

package/src/matherial3/helpers/svg-icon/svg-icon.tsx

@@ -1,46 +0,0 @@
-import * as React from 'react';
-import styled  from '@emotion/styled';
-
-type componentTypeStyle = {
-    width?: number;
-    height?: number;
-    color?: string;
-    className?: string;
-}
-
-export const SvgIconStyle = styled.div`
-  display: flex;
-  width: ${({ width }: componentTypeStyle) => width}px;
-  height: ${({ height }: componentTypeStyle) => height}px;
-  
-  svg {
-    width: ${({ width }: componentTypeStyle) => width}px;
-    height: ${({ height }: componentTypeStyle) => height}px;
-  }
-  path {
-    fill: ${({ color }: componentTypeStyle) => color};
-  };
-
-  circle {
-    fill: ${({ color }: componentTypeStyle) => color};
-  };
-`;
-
-type componentType = {
-    icon: string;
-} & componentTypeStyle;
-
-export const SvgIcon = ({ icon, width, height, color, className }: componentType) => {
-    const Icon = icon;
-
-    return (
-        <SvgIconStyle
-            width={width}
-            height={height}
-            color={color}
-            className={className}
-        >
-            <Icon />
-        </SvgIconStyle>
-    );
-};

package/src/matherial3/typography/body.tsx

@@ -1,19 +0,0 @@
-import { useTheme } from '@emotion/react';
-import * as React from 'react';
-
-import { TextStyle, TypographyProps } from './m3-typography';
-
-export const Body = ({ size, color, children, className }: TypographyProps) => {
-    const theme = useTheme();
-
-    return (
-        <TextStyle
-            className={className}
-            body={theme.m3TextStyle.body}
-            size={size}
-            color={color}
-        >
-            {children}
-        </TextStyle>
-    );
-};

package/src/matherial3/typography/display.tsx

@@ -1,19 +0,0 @@
-import { useTheme } from '@emotion/react';
-import * as React from 'react';
-
-import { TextStyle, TypographyProps } from './m3-typography';
-
-export const Display = ({ size, color, children, className }: TypographyProps) => {
-    const theme = useTheme();
-
-    return (
-        <TextStyle
-            className={className}
-            body={theme.m3TextStyle.display}
-            size={size}
-            color={color}
-        >
-            {children}
-        </TextStyle>
-    );
-};

package/src/matherial3/typography/headline.tsx

@@ -1,19 +0,0 @@
-import { useTheme } from '@emotion/react';
-import * as React from 'react';
-
-import { TextStyle, TypographyProps } from './m3-typography';
-
-export const Headline = ({ size, color, children, className }: TypographyProps) => {
-    const theme = useTheme();
-
-    return (
-        <TextStyle
-            className={className}
-            body={theme.m3TextStyle.headline}
-            size={size}
-            color={color}
-        >
-            {children}
-        </TextStyle>
-    );
-};

package/src/matherial3/typography/label.tsx

@@ -1,19 +0,0 @@
-import { useTheme } from '@emotion/react';
-import * as React from 'react';
-
-import { TextStyle, TypographyProps } from './m3-typography';
-
-export const Label = ({ size, color, children, className }: TypographyProps) => {
-    const theme = useTheme();
-
-    return (
-        <TextStyle
-            className={className}
-            body={theme.m3TextStyle.label}
-            size={size}
-            color={color}
-        >
-            {children}
-        </TextStyle>
-    );
-};