@remember-web/primitive 0.4.8 → 0.5.1

package/src/ModalScreen/ModalScreen.Bottom.stories.tsx

@@ -0,0 +1,308 @@
+import { IconResetM } from '@remember-web/icon';
+import { contents150, contents200, secondary100 } from '@remember-web/mixin';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '@/Buttons';
+import { Flex, Typography } from '@/Common';
+import { Checkbox } from '@/Control';
+import { ModalScreen } from './index';
+
+const meta = {
+  title: 'Primitive/ModalScreen/Bottom',
+  component: ModalScreen.Bottom,
+} satisfies Meta<typeof ModalScreen.Bottom>;
+
+export default meta;
+type Story = StoryObj<typeof ModalScreen.Bottom>;
+
+const _PcDecorator = (Story: React.ComponentType) => (
+  <div
+    style={{
+      backgroundColor: '#f2f2f2',
+      padding: '40px',
+      minWidth: '400px',
+    }}
+  >
+    <Story />
+  </div>
+);
+
+const _layout = {
+  decorators: [_PcDecorator],
+};
+
+// ===== Bottom Stories =====
+export const BottomSingleButton: Story = {
+  ..._layout,
+  name: 'SingleButton',
+  render: () => (
+    <ModalScreen.Bottom
+      rightElement={
+        <Button variant="primary" size="xLarge" layout="block">
+          확인
+        </Button>
+      }
+    />
+  ),
+};
+
+export const BottomDualButtons: Story = {
+  ..._layout,
+  name: 'DualButtons',
+  render: () => (
+    <ModalScreen.Bottom
+      rightElement={
+        <Flex gap={8}>
+          <Button variant="outline" size="xLarge" layout="block">
+            취소
+          </Button>
+          <Button variant="primary" size="xLarge" layout="block">
+            확인
+          </Button>
+        </Flex>
+      }
+    />
+  ),
+};
+
+export const BottomWithDescription: Story = {
+  ..._layout,
+  name: 'WithDescription',
+  render: () => (
+    <ModalScreen.Bottom
+      leftElement={
+        <Typography variant="UIBody2" color={contents150}>
+          선택한 프로젝트의 관심인재에 후보자를 저장합니다
+        </Typography>
+      }
+      rightElement={
+        <Button variant="primary" size="xLarge" layout="block">
+          저장
+        </Button>
+      }
+    />
+  ),
+};
+
+export const BottomWithDescriptionHighlight: Story = {
+  ..._layout,
+  name: 'WithDescriptionHighlight',
+  render: () => (
+    <ModalScreen.Bottom
+      leftElement={
+        <Typography variant="UIBody2" color={contents150}>
+          선택한 프로젝트의{' '}
+          <span style={{ color: secondary100 }}>관심인재</span>에 후보자를
+          저장합니다
+        </Typography>
+      }
+      rightElement={
+        <Button variant="primary" size="xLarge" layout="block">
+          제출
+        </Button>
+      }
+    />
+  ),
+};
+
+export const BottomWithLongDescription: Story = {
+  ..._layout,
+  name: 'WithLongDescription',
+  render: () => (
+    <ModalScreen.Bottom
+      leftElement={
+        <Typography variant="UIBody2" color={contents150}>
+          선택한 프로젝트의 관심인재에 후보자를 저장합니다선택한 프로젝트의
+          관심인재에 후보자를 저장합니다선택한 프로젝트의 관심인재에 후보자를
+          저장합니다선택한 프로젝트의 관심인재에 후보자를 저장합니다선택한
+          프로젝트의 관심인재에 후보자를 저장합니다
+        </Typography>
+      }
+      rightElement={
+        <Button variant="primary" size="xLarge" layout="block">
+          제출
+        </Button>
+      }
+    />
+  ),
+};
+
+export const BottomWithOptionButton: Story = {
+  ..._layout,
+  name: 'WithOptionButton',
+  render: () => (
+    <ModalScreen.Bottom
+      leftElement={
+        <button
+          type="button"
+          style={{
+            all: 'unset',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '4px',
+          }}
+        >
+          <IconResetM />
+          <span>선택 초기화</span>
+        </button>
+      }
+      rightElement={
+        <Button variant="primary" size="xLarge" layout="block">
+          적용
+        </Button>
+      }
+    />
+  ),
+};
+
+export const BottomCompleteExample: Story = {
+  ..._layout,
+  name: 'CompleteExample',
+  render: () => (
+    <ModalScreen.Bottom
+      leftElement={
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <Checkbox name="agree" variant="checkbox" />
+          <label htmlFor="agree">
+            <Typography variant="UIBody2" color={contents200}>
+              다시 보지 않기
+            </Typography>
+          </label>
+        </div>
+      }
+      rightElement={
+        <Button variant="primary" size="xLarge" layout="block">
+          확인
+        </Button>
+      }
+    />
+  ),
+};
+
+export const WithoutDivider: Story = {
+  ..._layout,
+  name: 'WithoutDivider',
+  render: () => (
+    <ModalScreen.Bottom
+      divider={false}
+      rightElement={
+        <Button variant="primary" size="xLarge" layout="block">
+          확인
+        </Button>
+      }
+    />
+  ),
+};
+
+// ===== Mobile Type =====
+const _mobileLayout = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  globals: {
+    viewport: { value: 'mobile1', isRotated: false },
+  },
+};
+
+export const MobileSingleButton: Story = {
+  ..._mobileLayout,
+  name: 'Mobile/SingleButton',
+  render: () => (
+    <ModalScreen.Bottom
+      rightElement={
+        <Button variant="primary" size="xLarge" layout="block">
+          확인
+        </Button>
+      }
+    />
+  ),
+};
+
+export const MobileDualButtons: Story = {
+  ..._mobileLayout,
+  name: 'Mobile/DualButtons',
+  render: () => (
+    <ModalScreen.Bottom
+      rightElement={
+        <Flex gap={8}>
+          <Button variant="outline" size="xLarge" layout="block">
+            취소
+          </Button>
+          <Button variant="primary" size="xLarge" layout="block">
+            확인
+          </Button>
+        </Flex>
+      }
+    />
+  ),
+};
+
+export const MobileWithDescription: Story = {
+  ..._mobileLayout,
+  name: 'Mobile/WithDescription',
+  render: () => (
+    <ModalScreen.Bottom
+      leftElement={
+        <Typography variant="UIBody2" color={contents150} ellipsis={1}>
+          선택한 프로젝트의 관심인재에 후보자를 저장합니다
+        </Typography>
+      }
+      rightElement={
+        <Button variant="primary" size="xLarge" layout="block">
+          저장
+        </Button>
+      }
+    />
+  ),
+};
+
+export const MobileWithOptionButton: Story = {
+  ..._mobileLayout,
+  name: 'Mobile/WithOptionButton',
+  render: () => (
+    <ModalScreen.Bottom
+      leftElement={
+        <button
+          type="button"
+          style={{
+            all: 'unset',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '4px',
+          }}
+        >
+          <IconResetM />
+          <span>선택 초기화</span>
+        </button>
+      }
+      rightElement={
+        <Button variant="primary" size="xLarge" layout="block">
+          적용
+        </Button>
+      }
+    />
+  ),
+};
+
+export const MobileCompleteExample: Story = {
+  ..._mobileLayout,
+  name: 'Mobile/CompleteExample',
+  render: () => (
+    <ModalScreen.Bottom
+      leftElement={
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <Checkbox name="agree" variant="checkbox" />
+          <label htmlFor="agree">
+            <Typography variant="UIBody2" color={contents200}>
+              다시 보지 않기
+            </Typography>
+          </label>
+        </div>
+      }
+      rightElement={
+        <Button variant="primary" size="xLarge" layout="block">
+          확인
+        </Button>
+      }
+    />
+  ),
+};

package/src/ModalScreen/ModalScreen.Header.stories.tsx

@@ -0,0 +1,261 @@
+import { Dialog } from '@radix-ui/react-dialog';
+import { IconCloseM, IconPlusS } from '@remember-web/icon';
+import { contents200, secondary100 } from '@remember-web/mixin';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '@/Buttons';
+import { Typography } from '@/Common';
+import { ModalScreen } from './index';
+import { ModalScreen as RadixModalScreen } from './radix';
+
+const meta = {
+  title: 'Primitive/ModalScreen/Header',
+  component: ModalScreen.Header,
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const _PcDecorator = (Story: React.ComponentType) => (
+  <div
+    style={{
+      backgroundColor: '#f2f2f2',
+      padding: '40px',
+      minWidth: '400px',
+    }}
+  >
+    <Story />
+  </div>
+);
+
+const _layout = {
+  decorators: [_PcDecorator],
+};
+
+// ===== Default Type =====
+export const DefaultBasic: Story = {
+  ..._layout,
+  name: 'Default/Basic',
+  args: {
+    type: 'default' as const,
+    title: '프로젝트 추가',
+    divider: true,
+  },
+};
+
+export const DefaultRadixHeader: Story = {
+  ..._layout,
+  name: 'Default/Radix Header',
+  args: {
+    type: 'default' as const,
+    title: '프로젝트 추가',
+    divider: true,
+  },
+  render: (args) => {
+    return (
+      <Dialog>
+        <RadixModalScreen.Header {...args} />
+      </Dialog>
+    );
+  },
+};
+
+export const DefaultWithoutDivider: Story = {
+  ..._layout,
+  name: 'Default/WithoutDivider',
+  args: {
+    type: 'default',
+    title: '프로젝트 추가',
+    divider: false,
+  },
+};
+
+export const DefaultWithRightElement: Story = {
+  ..._layout,
+  name: 'Default/WithRightElement',
+  args: {
+    type: 'default' as const,
+    title: '프로젝트 추가',
+    rightElement: (
+      <button type="button" style={{ all: 'unset' }}>
+        <IconCloseM />
+      </button>
+    ),
+  },
+};
+
+// ===== Vertical Type =====
+export const VerticalBasic: Story = {
+  ..._layout,
+  name: 'Vertical/Basic',
+  args: {
+    type: 'vertical' as const,
+    title: '후보자 폴더 편집',
+    description: (
+      <Typography variant="UIBody2" color={contents200}>
+        입력된 정보는{' '}
+        <span style={{ color: secondary100 }}>적합 인재 자동 추천</span>에
+        활용되며, <span style={{ color: secondary100 }}>제안 발송</span> 시에
+        사용됩니다.
+      </Typography>
+    ),
+  },
+};
+
+export const VerticalWithRightElement: Story = {
+  ..._layout,
+  name: 'Vertical/WithRightElement',
+  args: {
+    type: 'vertical' as const,
+    title: '채용 포지션 생성',
+    description: (
+      <Typography variant="UIBody2" color={contents200}>
+        <span style={{ color: secondary100 }}>공고 등록</span> 및{' '}
+        <span style={{ color: secondary100 }}>인재검색</span>을 위해 포지션을
+        생성해야 합니다.
+      </Typography>
+    ),
+    rightElement: (
+      <button type="button" style={{ all: 'unset' }}>
+        <IconCloseM />
+      </button>
+    ),
+  },
+};
+
+export const VerticalLongDescription: Story = {
+  ..._layout,
+  name: 'Vertical/LongDescription',
+  args: {
+    type: 'vertical' as const,
+    title: '회원 정보 수정',
+    description:
+      '정확한 정보를 입력하면 더 나은 매칭이 가능합니다. 회사명, 직무, 경력 기간 등을 상세히 입력해주세요.',
+    rightElement: (
+      <Button variant="outline" size="small" icon={<IconPlusS />} type="button">
+        새 포지션 추가
+      </Button>
+    ),
+  },
+};
+
+// ===== Horizontal Type =====
+export const HorizontalBasic: Story = {
+  ..._layout,
+  name: 'Horizontal/Basic',
+  args: {
+    type: 'horizontal' as const,
+    title: '메시지 전송',
+    description: '김석진 외 n명',
+  },
+};
+
+export const HorizontalWithRightElement: Story = {
+  ..._layout,
+  name: 'Horizontal/WithRightElement',
+  args: {
+    type: 'horizontal' as const,
+    title: '지역',
+    description: '복수 선택 가능',
+    rightElement: (
+      <button type="button" style={{ all: 'unset' }}>
+        <IconCloseM />
+      </button>
+    ),
+  },
+};
+
+// ===== Mobile Type =====
+const _mobileLayout = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  globals: {
+    viewport: { value: 'mobile1', isRotated: false },
+  },
+};
+
+export const MobileBasic: Story = {
+  ..._mobileLayout,
+  name: 'Mobile/Basic',
+  args: {
+    title: '필터 적용',
+    divider: true,
+  },
+};
+
+export const MobileDefaultWithRightElement: Story = {
+  ..._mobileLayout,
+  name: 'Mobile/Default/WithRightElement',
+  args: {
+    type: 'default' as const,
+    title: '프로젝트 추가',
+    rightElement: (
+      <button type="button" style={{ all: 'unset' }}>
+        <IconCloseM />
+      </button>
+    ),
+  },
+};
+
+export const MobileVerticalBasic: Story = {
+  ..._mobileLayout,
+  name: 'Mobile/Vertical/Basic',
+  args: {
+    type: 'vertical' as const,
+    title: '후보자 폴더 편집',
+    description: (
+      <Typography variant="UIBody2" color={contents200}>
+        입력된 정보는{' '}
+        <span style={{ color: secondary100 }}>적합 인재 자동 추천</span>에
+        활용되며, <span style={{ color: secondary100 }}>제안 발송</span> 시에
+        사용됩니다.
+      </Typography>
+    ),
+  },
+};
+
+export const MobileVerticalWithRightElement: Story = {
+  ..._mobileLayout,
+  name: 'Mobile/Vertical/WithRightElement',
+  args: {
+    type: 'vertical' as const,
+    title: '채용 포지션 생성',
+    description: (
+      <Typography variant="UIBody2" color={contents200}>
+        <span style={{ color: secondary100 }}>공고 등록</span> 및{' '}
+        <span style={{ color: secondary100 }}>인재검색</span>을 위해 포지션을
+        생성해야 합니다.
+      </Typography>
+    ),
+    rightElement: (
+      <button type="button" style={{ all: 'unset' }}>
+        <IconCloseM />
+      </button>
+    ),
+  },
+};
+
+export const MobileHorizontalBasic: Story = {
+  ..._mobileLayout,
+  name: 'Mobile/Horizontal/Basic',
+  args: {
+    type: 'horizontal' as const,
+    title: '메시지 전송',
+    description: '김석진 외 n명',
+  },
+};
+
+export const MobileHorizontalWithRightElement: Story = {
+  ..._mobileLayout,
+  name: 'Mobile/Horizontal/WithRightElement',
+  args: {
+    type: 'horizontal' as const,
+    title: '지역',
+    description: '복수 선택',
+    rightElement: (
+      <button type="button" style={{ all: 'unset' }}>
+        <IconCloseM />
+      </button>
+    ),
+  },
+};