@ubie/vitals-ui-consumer 0.0.1

package/src/stories/RadioCard.stories.tsx

@@ -0,0 +1,236 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { useState, useCallback } from "react";
+import { RadioCard, Stack, RadioGroup } from "..";
+import type { ChangeEventHandler } from "react";
+
+export default {
+  title: "Form/RadioCard",
+  component: RadioCard,
+} satisfies Meta<typeof RadioCard>;
+
+type Story = StoryObj<typeof RadioCard>;
+
+const defaultArgs = {};
+
+const options = ["option1", "option2", "option3"];
+
+export const Default: Story = {
+  render: () => {
+    const [selectedItem, setSelectedItem] = useState(options[0]);
+
+    const onChange: ChangeEventHandler<HTMLInputElement> = useCallback((event) => {
+      setSelectedItem(event.target.value);
+    }, []);
+
+    return (
+      <Stack spacing="lg" alignItems="normal">
+        <RadioGroup label="RadioCard">
+          {options.map((option) => (
+            <RadioCard
+              name="options"
+              value={option}
+              onChange={onChange}
+              checked={selectedItem === option}
+              id={option}
+              key={option}
+            >
+              {option}
+            </RadioCard>
+          ))}
+        </RadioGroup>
+
+        <dl>
+          <dt>Values</dt>
+          <dd>{selectedItem}</dd>
+        </dl>
+      </Stack>
+    );
+  },
+};
+
+export const Horizontally: Story = {
+  render: () => {
+    const [selectedItem, setSelectedItem] = useState(options[0]);
+
+    const onChange: ChangeEventHandler<HTMLInputElement> = useCallback((event) => {
+      setSelectedItem(event.target.value);
+    }, []);
+
+    return (
+      <RadioGroup label="RadioCard" direction="row">
+        {options.map((option) => (
+          <RadioCard
+            name="horizontally"
+            value={option}
+            onChange={onChange}
+            checked={selectedItem === option}
+            id={option}
+            key={option}
+          >
+            {option}
+          </RadioCard>
+        ))}
+      </RadioGroup>
+    );
+  },
+};
+
+export const Block: Story = {
+  render: (args) => {
+    const options = ["option1", "option2", "option3"];
+
+    const [value, setValue] = useState<string>("option1");
+
+    const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setValue(event.target.value);
+    };
+
+    return (
+      <Stack spacing="sm">
+        {options.map((option) => (
+          <RadioCard
+            {...args}
+            key={option}
+            checked={value === option}
+            value={option}
+            onChange={onChange}
+            name="block"
+          >
+            {option}
+          </RadioCard>
+        ))}
+      </Stack>
+    );
+  },
+  args: {
+    ...defaultArgs,
+    name: "block",
+    block: true,
+  },
+};
+
+export const ShowRequiredLabel: Story = {
+  render: () => {
+    const [selectedItem, setSelectedItem] = useState(options[0]);
+
+    const onChange: ChangeEventHandler<HTMLInputElement> = useCallback((event) => {
+      setSelectedItem(event.target.value);
+    }, []);
+
+    return (
+      <RadioGroup label="RadioCard" showRequiredLabel>
+        {options.map((option) => (
+          <RadioCard
+            name="options"
+            value={option}
+            onChange={onChange}
+            checked={selectedItem === option}
+            id={option}
+            key={option}
+          >
+            {option}
+          </RadioCard>
+        ))}
+      </RadioGroup>
+    );
+  },
+};
+
+export const CustomDataAttribute: Story = {
+  args: defaultArgs,
+  render: (args) => {
+    const options = ["option1", "option2", "option3"];
+    const [value, setValue] = useState<string>("option1");
+
+    const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setValue(event.target.value);
+    };
+
+    return (
+      <Stack spacing="sm">
+        {options.map((option, index) => (
+          <RadioCard
+            {...args}
+            key={option}
+            checked={value === option}
+            value={option}
+            onChange={onChange}
+            name="customDataAttribute"
+            data-test-id={index}
+          >
+            {option}
+          </RadioCard>
+        ))}
+      </Stack>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: () => {
+    const [selectedItem, setSelectedItem] = useState(options[0]);
+
+    const onChange: ChangeEventHandler<HTMLInputElement> = useCallback((event) => {
+      setSelectedItem(event.target.value);
+    }, []);
+
+    return (
+      <Stack spacing="lg" alignItems="normal">
+        <RadioGroup label="RadioCard">
+          {options.map((option) => (
+            <RadioCard
+              name="options"
+              value={option}
+              onChange={onChange}
+              checked={selectedItem === option}
+              id={option}
+              key={option}
+              disabled
+            >
+              {option}
+            </RadioCard>
+          ))}
+        </RadioGroup>
+
+        <dl>
+          <dt>Values</dt>
+          <dd>{selectedItem}</dd>
+        </dl>
+      </Stack>
+    );
+  },
+};
+
+export const NoLabelOnGroup: Story = {
+  render: () => {
+    const [selectedItem, setSelectedItem] = useState(options[0]);
+
+    const onChange: ChangeEventHandler<HTMLInputElement> = useCallback((event) => {
+      setSelectedItem(event.target.value);
+    }, []);
+
+    return (
+      <Stack spacing="lg" alignItems="normal">
+        <RadioGroup>
+          {options.map((option) => (
+            <RadioCard
+              name="options"
+              value={option}
+              onChange={onChange}
+              checked={selectedItem === option}
+              id={option}
+              key={option}
+            >
+              {option}
+            </RadioCard>
+          ))}
+        </RadioGroup>
+
+        <dl>
+          <dt>Values</dt>
+          <dd>{selectedItem}</dd>
+        </dl>
+      </Stack>
+    );
+  },
+};

package/src/stories/Select.stories.tsx

@@ -0,0 +1,97 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { ChangeEventHandler, useState, useCallback } from "react";
+import { Select, Stack } from "../";
+
+export default {
+  title: "Form/Select",
+  component: Select,
+} satisfies Meta<typeof Select>;
+
+const defaultArgs = {
+  isInvalid: false,
+  disabled: false,
+};
+
+export const Default: StoryObj<typeof Select> = {
+  render: (args) => {
+    const options = ["option1", "option2", "option3"];
+
+    const [selectedItem, setSelectedItem] = useState(options[0]);
+
+    const onChange: ChangeEventHandler<HTMLSelectElement> = useCallback((event) => {
+      setSelectedItem(event.target.value);
+    }, []);
+
+    return (
+      <Stack spacing="md" alignItems="normal">
+        <Select {...args} value={selectedItem} onChange={onChange}>
+          {options.map((o) => (
+            <option key={o}>{o}</option>
+          ))}
+        </Select>
+
+        <dl>
+          <dt>Value</dt>
+          <dd>{selectedItem}</dd>
+        </dl>
+      </Stack>
+    );
+  },
+  args: defaultArgs,
+};
+
+export const Disabled: StoryObj<typeof Select> = {
+  render: (args) => {
+    const options = ["option1", "option2", "option3"];
+
+    return (
+      <Select {...args} value={options[0]}>
+        {options.map((o) => (
+          <option key={o}>{o}</option>
+        ))}
+      </Select>
+    );
+  },
+  args: {
+    ...defaultArgs,
+    disabled: true,
+  },
+};
+
+export const IsInvalid: StoryObj<typeof Select> = {
+  render: (args) => {
+    const options = ["option1", "option2", "option3"];
+
+    return (
+      <Select {...args} value={options[0]}>
+        {options.map((o) => (
+          <option key={o}>{o}</option>
+        ))}
+      </Select>
+    );
+  },
+  args: {
+    ...defaultArgs,
+    isInvalid: true,
+  },
+};
+
+export const CustomDataAttribute: StoryObj<typeof Select> = {
+  render: (args) => {
+    const options = ["option1", "option2", "option3"];
+
+    return (
+      <Select {...args} value={options[0]}>
+        {options.map((o) => (
+          <option key={o} data-test-id={args["data-test-id"]}>
+            {o}
+          </option>
+        ))}
+      </Select>
+    );
+  },
+  args: {
+    ...defaultArgs,
+    "data-test-id": "select-custom-data-attribute",
+  },
+};

package/src/stories/Stack.stories.tsx

@@ -0,0 +1,167 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { Box, Stack } from "..";
+import { Spacing } from "../types/style";
+
+export default {
+  component: Stack,
+} satisfies Meta<typeof Stack>;
+
+const defaultArgs = {
+  spacing: "md" as Spacing,
+};
+
+type Story = StoryObj<typeof Stack>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Stack {...args}>
+      <p style={{ margin: 0 }}>テスト</p>
+      <p style={{ margin: 0 }}>テスト</p>
+      <p style={{ margin: 0 }}>テスト</p>
+      <p style={{ margin: 0 }}>テスト</p>
+    </Stack>
+  ),
+  args: defaultArgs,
+};
+
+export const Nested: Story = {
+  render: () => (
+    <Stack spacing="xl">
+      <Stack spacing="lg">
+        <p style={{ margin: 0, background: "#DDD" }}>テスト</p>
+        <p style={{ margin: 0, background: "#DDD" }}>テスト</p>
+        <p style={{ margin: 0, background: "#DDD" }}>テスト</p>
+      </Stack>
+
+      <Stack spacing="lg">
+        <p style={{ margin: 0, background: "#DDD" }}>テスト</p>
+        <p style={{ margin: 0, background: "#DDD" }}>テスト</p>
+        <Stack spacing="xs">
+          <p style={{ margin: 0, background: "#DDD" }}>テスト</p>
+          <p style={{ margin: 0, background: "#DDD" }}>テスト</p>
+          <p style={{ margin: 0, background: "#DDD" }}>テスト</p>
+        </Stack>
+        <Stack>
+          <p style={{ margin: 0, background: "#DDD" }}>テスト</p>
+          <p style={{ margin: 0, background: "#DDD" }}>テスト</p>
+          <p style={{ margin: 0, background: "#DDD" }}>テスト</p>
+        </Stack>
+      </Stack>
+    </Stack>
+  ),
+};
+
+export const MarkupAsList: Story = {
+  render: (args) => (
+    <Stack {...args} as="ul">
+      <li>テスト</li>
+      <li>テスト</li>
+      <li>テスト</li>
+      <li>テスト</li>
+    </Stack>
+  ),
+  args: defaultArgs,
+};
+
+export const PutOnTheEnd: Story = {
+  render: (args) => (
+    <Stack {...args} alignItems="flex-end">
+      <p style={{ margin: 0 }}>テスト</p>
+      <p style={{ margin: 0 }}>テスト</p>
+      <p style={{ margin: 0 }}>テスト</p>
+      <p style={{ margin: 0 }}>テスト</p>
+    </Stack>
+  ),
+  args: defaultArgs,
+};
+
+export const MarginAndPadding: Story = {
+  render: (args) => (
+    <Stack {...args} mt="lg" mr="lg" mb="lg" ml="lg" pt="xxl" pr="xxl" pb="xxl" pl="xxl">
+      <p style={{ margin: 0 }}>Text</p>
+      <p style={{ margin: 0 }}>Text</p>
+      <p style={{ margin: 0 }}>Text</p>
+      <p style={{ margin: 0 }}>Text</p>
+    </Stack>
+  ),
+  args: defaultArgs,
+};
+
+export const AsBox: Story = {
+  render: (args) => (
+    <Stack
+      {...args}
+      as={<Box radius="md" backgroundColor="blue" pt="lg" pr="lg" pb="lg" pl="lg" />}
+    >
+      <p style={{ margin: 0 }}>Text</p>
+      <p style={{ margin: 0 }}>Text</p>
+      <p style={{ margin: 0 }}>Text</p>
+      <p style={{ margin: 0 }}>Text</p>
+    </Stack>
+  ),
+  args: defaultArgs,
+};
+
+export const CustomDataAttribute: Story = {
+  render: (args) => (
+    <Stack {...args}>
+      <p>This is a paragraph.</p>
+      <p>This is a paragraph.</p>
+    </Stack>
+  ),
+  args: { ...defaultArgs, "data-test-id": "custom-attribute" },
+};
+
+export const Width: Story = {
+  render: (args) => (
+    <>
+      <Stack {...args} width="100%">
+        <p style={{ margin: 0 }}>width: 100%</p>
+        <p style={{ margin: 0 }}>Text</p>
+        <p style={{ margin: 0 }}>Text</p>
+        <p style={{ margin: 0 }}>Text</p>
+      </Stack>
+
+      <br />
+
+      <Stack {...args} minWidth="500px">
+        <p style={{ margin: 0 }}>min-width: 500px</p>
+        <p style={{ margin: 0 }}>Text</p>
+        <p style={{ margin: 0 }}>Text</p>
+        <p style={{ margin: 0 }}>Text</p>
+      </Stack>
+
+      <br />
+
+      <Stack {...args} maxWidth="500px">
+        <p style={{ margin: 0 }}>max-width: 500px</p>
+        <p style={{ margin: 0 }}>Text</p>
+        <p style={{ margin: 0 }}>Text</p>
+        <p style={{ margin: 0 }}>Text</p>
+      </Stack>
+    </>
+  ),
+  args: defaultArgs,
+};
+
+export const Gap: Story = {
+  render: () => (
+    <Stack gap="md">
+      <p style={{ margin: 0 }}>Text</p>
+      <p style={{ margin: 0 }}>Text</p>
+      <p style={{ margin: 0 }}>Text</p>
+      <p style={{ margin: 0 }}>Text</p>
+    </Stack>
+  ),
+};
+
+export const NoSpacing: Story = {
+  render: () => (
+    <Stack>
+      <p style={{ margin: 0 }}>Text</p>
+      <p style={{ margin: 0 }}>Text</p>
+      <p style={{ margin: 0 }}>Text</p>
+      <p style={{ margin: 0 }}>Text</p>
+    </Stack>
+  ),
+};