@ubie/vitals-ui-consumer 0.0.1

package/src/stories/Flex.stories.tsx

@@ -0,0 +1,345 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { Flex, Box, FlexItem } from "..";
+
+export default {
+  component: Flex,
+} satisfies Meta<typeof Flex>;
+
+type Story = StoryObj<typeof Flex>;
+
+export const Spacing: Story = {
+  render: () => (
+    <div>
+      <Flex>
+        <div>none</div>
+        <div>none</div>
+        <div>none</div>
+      </Flex>
+
+      <Flex spacing="xxs">
+        <div>xxs</div>
+        <div>xxs</div>
+        <div>xxs</div>
+      </Flex>
+
+      <Flex spacing="xs">
+        <div>xs</div>
+        <div>xs</div>
+        <div>xs</div>
+      </Flex>
+
+      <Flex spacing="sm">
+        <div>sm</div>
+        <div>sm</div>
+        <div>sm</div>
+      </Flex>
+
+      <Flex spacing="md">
+        <div>md</div>
+        <div>md</div>
+        <div>md</div>
+      </Flex>
+
+      <Flex spacing="lg">
+        <div>lg</div>
+        <div>lg</div>
+        <div>lg</div>
+      </Flex>
+
+      <Flex spacing="xl">
+        <div>xl</div>
+        <div>xl</div>
+        <div>xl</div>
+      </Flex>
+
+      <Flex spacing="xxl">
+        <div>xxl</div>
+        <div>xxl</div>
+        <div>xxl</div>
+      </Flex>
+    </div>
+  ),
+};
+
+export const Gap: Story = {
+  render: () => (
+    <Flex gap="xl">
+      <div>xxl</div>
+      <div>xxl</div>
+      <div>xxl</div>
+    </Flex>
+  ),
+};
+
+export const Vertical: Story = {
+  render: () => (
+    <div>
+      <Flex direction="column" spacing="md">
+        <p>Item</p>
+        <p>Item</p>
+        <p>Item</p>
+        <p>Item</p>
+      </Flex>
+
+      <p>※特別な理由がなければStackをつかってください</p>
+    </div>
+  ),
+};
+
+export const StretchedChildren: Story = {
+  render: () => (
+    <div style={{ height: 500 }}>
+      <Flex spacing="lg" alignItems="stretch" height="full">
+        <p style={{ margin: 0, background: "#DDD" }}>Stretched</p>
+        <p style={{ margin: 0, background: "#DDD" }}>Stretched</p>
+      </Flex>
+    </div>
+  ),
+};
+
+export const SpaceBetween: Story = {
+  render: () => (
+    <>
+      <Flex justifyContent="space-between">
+        <p>Item</p>
+        <p>Item</p>
+        <p>Item</p>
+        <p>Item</p>
+      </Flex>
+
+      <Flex justifyContent="space-between">
+        <p>Item</p>
+        <p>Item</p>
+      </Flex>
+    </>
+  ),
+};
+
+export const Centralized: Story = {
+  render: () => (
+    <Flex direction="row" justifyContent="center" alignItems="center" spacing="sm">
+      <span>
+        Words
+        <br />
+        crowded
+      </span>
+      <span>in</span>
+      <span>
+        simply
+        <br />
+        dummy
+        <br />
+        text
+      </span>
+    </Flex>
+  ),
+};
+
+export const Wrap: Story = {
+  render: () => (
+    <div style={{ width: 500 }}>
+      <Flex direction="row" alignItems="center" spacing="lg" wrap>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+      </Flex>
+    </div>
+  ),
+};
+
+export const AsSection: Story = {
+  render: () => (
+    <Flex as="section" spacing="md" alignItems="center">
+      <h1>Heading</h1>
+      <p>text</p>
+      <p>text</p>
+      <p>text</p>
+    </Flex>
+  ),
+};
+
+export const MarginAndPadding: Story = {
+  render: () => (
+    <Flex
+      spacing="md"
+      alignItems="center"
+      mt="lg"
+      mr="lg"
+      mb="lg"
+      ml="lg"
+      pt="xxl"
+      pr="xxl"
+      pb="xxl"
+      pl="xxl"
+    >
+      <h1>Heading</h1>
+      <p>Section</p>
+      <p>Section</p>
+      <p>Section</p>
+    </Flex>
+  ),
+};
+
+export const AsBox: Story = {
+  render: () => (
+    <Flex
+      spacing="md"
+      as={<Box radius="md" backgroundColor="blue" pt="lg" pr="lg" pb="lg" pl="lg" />}
+    >
+      <div>item</div>
+      <div>item</div>
+      <div>item</div>
+    </Flex>
+  ),
+};
+
+export const CustomDataAttribute: Story = {
+  render: () => (
+    <Flex data-test-id="flex-custom-attribute" spacing="md" alignItems="center">
+      <div>Flex component with custom data attribute</div>
+    </Flex>
+  ),
+};
+
+export const WithFlexItem: Story = {
+  render: () => (
+    <div style={{ height: 500 }}>
+      <Flex spacing="lg" alignItems="stretch" height="full">
+        <p style={{ margin: 0, background: "#DDD" }}>
+          column
+          <br />
+          Stretched
+        </p>
+        <FlexItem>
+          <p style={{ margin: 0, background: "#DDD" }}>
+            column
+            <br />
+            not
+            <br />
+            stretched
+          </p>
+        </FlexItem>
+        <FlexItem flex={{ grow: 1 }}>
+          <p style={{ margin: 0, background: "#DDD" }}>row grow</p>
+        </FlexItem>
+      </Flex>
+    </div>
+  ),
+};
+
+export const Width: Story = {
+  render: () => (
+    <div>
+      <Flex direction="row" alignItems="center" spacing="lg" wrap width="100%">
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+      </Flex>
+
+      <br />
+
+      <Flex direction="row" alignItems="center" spacing="lg" wrap maxWidth="500px">
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+      </Flex>
+
+      <Flex direction="row" alignItems="center" spacing="lg" wrap minWidth="500px">
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+        <span>Item</span>
+      </Flex>
+    </div>
+  ),
+};
+
+export const Inline: Story = {
+  render: () => (
+    <p>
+      文章文章文章文章文章文章
+      <Flex as="span" spacing="md" inline>
+        <Box as="span" inline backgroundColor="blue" p="xs" radius="md">
+          Item
+        </Box>
+        <Box as="span" inline backgroundColor="blue" p="xs" radius="md">
+          Item
+        </Box>
+        <Box as="span" inline backgroundColor="blue" p="xs" radius="md">
+          Item
+        </Box>
+      </Flex>
+      文章
+    </p>
+  ),
+};

package/src/stories/Form.stories.tsx

@@ -0,0 +1,83 @@
+import { StoryObj } from "@storybook/react-vite";
+import { useCallback, useState } from "react";
+import { Stack, Label, Input, HelperMessage, ErrorMessage, RadioButton, RadioGroup } from "..";
+import type { ChangeEventHandler } from "react";
+
+export default {
+  title: "Form/Form",
+};
+
+export const Default: StoryObj = {
+  render: () => {
+    const [value, setValue] = useState("");
+    const onChange = useCallback<ChangeEventHandler<HTMLInputElement>>((e) => {
+      setValue(e.target.value);
+    }, []);
+
+    return (
+      <Stack spacing="xs">
+        <Label htmlFor="field" showRequiredLabel>
+          項目
+        </Label>
+        <Input id="field" value={value} onChange={onChange} />
+        <HelperMessage>説明文です</HelperMessage>
+        <HelperMessage>説明文です</HelperMessage>
+      </Stack>
+    );
+  },
+};
+
+export const Error: StoryObj = {
+  render: () => {
+    const [value, setValue] = useState("");
+    const onChange = useCallback<ChangeEventHandler<HTMLInputElement>>((e) => {
+      setValue(e.target.value);
+    }, []);
+
+    return (
+      <Stack spacing="xs">
+        <Label htmlFor="error-field">項目</Label>
+        <Input value={value} id="error-field" onChange={onChange} isInvalid />
+        <ErrorMessage>全角カタカナでご入力ください</ErrorMessage>
+        <ErrorMessage>全角カタカナでご入力ください</ErrorMessage>
+        <HelperMessage>説明文です</HelperMessage>
+      </Stack>
+    );
+  },
+};
+
+export const RadioButtons: StoryObj = {
+  render: () => {
+    const options = ["項目1", "項目2", "項目3"];
+    const [selectedItem, setSelectedItem] = useState<string>(options[0]);
+
+    const onChange: ChangeEventHandler<HTMLInputElement> = useCallback((event) => {
+      setSelectedItem(event.target.value);
+    }, []);
+
+    return (
+      <Stack spacing="md" alignItems="normal">
+        <RadioGroup label="通院状況" showRequiredLabel>
+          {options.map((option) => (
+            <RadioButton
+              name="commuting"
+              value={option}
+              onChange={onChange}
+              checked={selectedItem.includes(option)}
+              key={option}
+            >
+              {option}
+            </RadioButton>
+          ))}
+        </RadioGroup>
+
+        <Stack spacing="xs">
+          <ErrorMessage>何かしらのエラーメッセージ</ErrorMessage>
+          <ErrorMessage>何かしらのエラーメッセージ</ErrorMessage>
+          <HelperMessage>説明文です</HelperMessage>
+          <HelperMessage>説明文です</HelperMessage>
+        </Stack>
+      </Stack>
+    );
+  },
+};

package/src/stories/Heading.stories.tsx

@@ -0,0 +1,263 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { Box, Heading, Stack } from "../";
+
+export default {
+  title: "Typography/Heading",
+  component: Heading,
+} as Meta<typeof Heading>;
+
+type Story = StoryObj<typeof Heading>;
+
+export const Default: Story = {
+  render: () => (
+    <Stack spacing="md">
+      <Heading size="xxs">xxs: スマートフォン問診</Heading>
+      <Heading size="xxs">
+        xxs: スマートフォン問診を利用できる
+        <br />
+        近くの医療機関から調べる
+      </Heading>
+      <Heading size="xs">xs: スマートフォン問診</Heading>
+      <Heading size="xs">
+        xs: スマートフォン問診を利用できる
+        <br />
+        近くの医療機関から調べる
+      </Heading>
+      <Heading size="sm">sm: スマートフォン問診</Heading>
+      <Heading size="sm">
+        sm: スマートフォン問診を利用できる
+        <br />
+        近くの医療機関から調べる
+      </Heading>
+      <Heading size="md">md: スマートフォン問診</Heading>
+      <Heading size="md">
+        md: スマートフォン問診を利用できる
+        <br />
+        近くの医療機関から調べる
+      </Heading>
+      <Heading size="lg">lg: スマートフォン問診</Heading>
+      <Heading size="lg">
+        lg: スマートフォン問診を利用できる
+        <br />
+        近くの医療機関から調べる
+      </Heading>
+      <Heading size="xl">xl: スマートフォン問診</Heading>
+      <Heading size="xl">
+        xl: スマートフォン問診を利用できる
+        <br />
+        近くの医療機関から調べる
+      </Heading>
+    </Stack>
+  ),
+};
+
+export const Element: Story = {
+  render: () => (
+    <Stack spacing="md">
+      <Heading as="p" color="main" size="md">
+        p
+      </Heading>
+      <Heading as="h1" color="main" size="md" id="test-id">
+        h1 with id attribute
+      </Heading>
+      <Heading as="h2" color="main" size="md">
+        h2
+      </Heading>
+      <Heading as="h3" color="main" size="md">
+        h3
+      </Heading>
+      <Heading as="h4" color="main" size="md">
+        h4
+      </Heading>
+      <Heading as="h5" color="main" size="md">
+        h5
+      </Heading>
+      <Heading as="h6" color="main" size="md">
+        h6
+      </Heading>
+      {/* markuplint-disable-next-line */}
+      <Heading as="label" color="main" size="md" htmlFor="some-input-id">
+        label
+      </Heading>
+    </Stack>
+  ),
+};
+
+export const Colors: Story = {
+  render: () => (
+    <Stack spacing="md">
+      <Heading as="p" color="main" size="md">
+        スマートフォン問診（main）
+      </Heading>
+
+      <div style={{ backgroundColor: "var(--color-blue-600)", padding: "var(--size-spacing-xs)" }}>
+        <Heading as="p" color="white" size="md">
+          スマートフォン問診（white）
+        </Heading>
+      </div>
+    </Stack>
+  ),
+};
+
+export const HasLink: Story = {
+  render: () => (
+    <Stack spacing="md">
+      <Heading as="p" color="main" size="md">
+        <a href="https://vitals.ubie.life/">Vitals</a> スマートフォン問診（main）
+      </Heading>
+
+      <div style={{ backgroundColor: "var(--color-blue-600)", padding: "var(--size-spacing-xs)" }}>
+        <Heading as="p" color="white" size="md">
+          <a href="https://vitals.ubie.life/">Vitals</a> スマートフォン問診（white）
+        </Heading>
+      </div>
+    </Stack>
+  ),
+};
+
+export const LeadingBorder: Story = {
+  render: () => (
+    <Stack spacing="md">
+      <Heading as="p" leadingBorder size="xxs">
+        スマートフォン問診
+      </Heading>
+      <Heading as="p" leadingBorder size="xxs">
+        スマートフォン問診を利用できる
+        <br />
+        近くの医療機関から調べる
+      </Heading>
+      <Heading as="p" leadingBorder size="xs">
+        スマートフォン問診
+      </Heading>
+      <Heading as="p" leadingBorder size="xs">
+        スマートフォン問診を利用できる
+        <br />
+        近くの医療機関から調べる
+      </Heading>
+      <Heading as="p" leadingBorder size="sm">
+        スマートフォン問診
+      </Heading>
+      <Heading as="p" leadingBorder size="sm">
+        スマートフォン問診を利用できる
+        <br />
+        近くの医療機関から調べる
+      </Heading>
+      <Heading as="p" leadingBorder size="md">
+        スマートフォン問診
+      </Heading>
+      <Heading as="p" leadingBorder size="md">
+        スマートフォン問診を利用できる
+        <br />
+        近くの医療機関から調べる
+      </Heading>
+      <Heading as="p" leadingBorder size="lg">
+        スマートフォン問診
+      </Heading>
+      <Heading as="p" leadingBorder size="lg">
+        スマートフォン問診を利用できる
+        <br />
+        近くの医療機関から調べる
+      </Heading>
+      <Heading as="p" leadingBorder size="xl">
+        スマートフォン問診
+      </Heading>
+      <Heading as="p" leadingBorder size="xl">
+        スマートフォン問診を利用できる
+        <br />
+        近くの医療機関から調べる
+      </Heading>
+    </Stack>
+  ),
+};
+
+export const TextAlign: Story = {
+  render: () => (
+    <Stack spacing="md" alignItems="normal">
+      <div style={{ textAlign: "center" }}>
+        <Heading as="p" size="md">
+          スマートフォン問診（inherit）
+        </Heading>
+      </div>
+
+      <Heading as="p" size="md" textAlign="left">
+        スマートフォン問診（left）
+      </Heading>
+      <Heading as="p" size="md" textAlign="center">
+        スマートフォン問診（center）
+      </Heading>
+      <Heading as="p" size="md" textAlign="right">
+        スマートフォン問診（right）
+      </Heading>
+    </Stack>
+  ),
+};
+
+export const Bold: Story = {
+  render: () => (
+    <Stack spacing="md">
+      <Heading as="h1" color="main" size="md">
+        h1 bold
+      </Heading>
+      <Heading as="h1" color="main" size="md" bold={false}>
+        h1 normal
+      </Heading>
+    </Stack>
+  ),
+};
+
+export const CustomDataAttribute: Story = {
+  render: (args) => <Heading {...args}>Heading with Custom Data Attribute</Heading>,
+  args: {
+    [`data-test-id`]: "heading-custom-attribute",
+  },
+};
+
+export const TextWrap: Story = {
+  render: () => (
+    <div style={{ width: "300px" }}>
+      <Stack spacing="md">
+        <Box border="black">
+          <Heading>
+            私はすべてぼんやりその批評痛というのの中を押しだなけれ。現に十月の仕事方ももしこのお尋ねましたまでをふりまいとならませには刺戟待ったたて、とてもにはなろべきませたです。https://vitals.ubie.life/?hoge=1111111111111111111111111111111111111111111111111111
+          </Heading>
+        </Box>
+
+        <div lang="en">
+          <Box border="black">
+            <Heading>
+              industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the
+              1500s, when an unknown printer took a galley of type and scrambled it to make a type
+              specimen booooooooooooooooooooooooooooooooooooooooooooook.
+            </Heading>
+          </Box>
+        </div>
+
+        <div>
+          <p>
+            <code>noWrap</code>
+          </p>
+
+          <Box border="black">
+            <Heading noWrap>
+              私はすべてぼんやりその批評痛というのの中を押しだなけれ。現に十月の仕事方ももしこのお尋ねましたまでをふりまいとならませには刺戟待ったたて、とてもにはなろべきませたです。https://vitals.ubie.life/?hoge=1111111111111111111111111111111111111111111111111111
+            </Heading>
+          </Box>
+        </div>
+
+        <div>
+          <p>
+            <code>noWrap</code>
+          </p>
+
+          <Box border="black">
+            <Heading noWrap>
+              industry. Lorem Ipsum has been the industry&apos;s standard dummy text ever since the
+              1500s, when an unknown printer took a galley of type and scrambled it to make a type
+              specimen book.
+            </Heading>
+          </Box>
+        </div>
+      </Stack>
+    </div>
+  ),
+};