Add Pre Component Page

src/components/react/examples/pre/DefaultExample.tsx

@@ -0,0 +1,40 @@
+import { Stack, Pre, Text, Box } from '@ubie/ubie-ui';
+import type { FC } from 'react';
+
+const text = `Lorem                                                                      Ipsum is simply dummy text of the printing and typesetting industry.
+Lorem Ipsum has been the industry'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.
+It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
+It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`;
+
+export const DefaultExample: FC = () => {
+  return (
+    <Box maxWidth="400px" p="lg">
+      <Stack spacing="lg">
+        <Stack spacing="sm">
+          <Text bold>Default(pre-line)</Text>
+          <Pre>{text}</Pre>
+        </Stack>
+
+        <Stack spacing="sm">
+          <Text bold>whiteSpace: pre</Text>
+          <Pre whiteSpace="pre">{text}</Pre>
+        </Stack>
+
+        <Stack spacing="sm">
+          <Text bold>whiteSpace: pre-wrap</Text>
+          <Pre whiteSpace="pre-wrap">{text}</Pre>
+        </Stack>
+
+        <Stack spacing="sm">
+          <Text bold>whiteSpace: pre-line</Text>
+          <Pre whiteSpace="pre-line">{text}</Pre>
+        </Stack>
+
+        <Stack spacing="sm">
+          <Text bold>whiteSpace: break-spaces</Text>
+          <Pre whiteSpace="break-spaces">{text}</Pre>
+        </Stack>
+      </Stack>
+    </Box>
+  );
+};

src/pages/components/examples/pre/default.astro

@@ -0,0 +1,8 @@
+---
+import { DefaultExample } from '@components/react/examples/pre/DefaultExample';
+import ExampleLayout from '@layouts/ExampleLayout.astro';
+---
+
+<ExampleLayout title="Default Example | Pre">
+  <DefaultExample client:only="react" />
+</ExampleLayout>

src/pages/components/pre.mdx

@@ -0,0 +1,27 @@
+---
+title: 'Pre'
+exampleKey: 'pre'
+exampleSize: 'lg'
+layout: '@layouts/ComponentLayout.astro'
+description: 'テキストの折り返しを制御'
+thumbnail: '/assets/images/components/thumbnail-default.svg'
+repositoryUrl: 'https://github.com/ubie-oss/ubie-ui/tree/main/src/components/Pre'
+---
+
+## Feature
+
+- テキストの折り返しを制御します
+- ネイティブの`<pre>`要素と似たような機能を持ちます
+- `<pre>`と違い、フォントのスタイルを変更しません（通常、`<pre>`にはブラウザのデフォルトスタイルが適用されています）
+
+## Usage
+
+`whiteSpace` propはCSSの`white-space`プロパティに該当します。
+
+- **`pre`**: テキストの空白や改行がそのまま表示されます
+- **`pre-wrap`**: `pre`とほぼ同じですが、テキストがコンテナからはみ出る場合に折り返されます
+    - 長い連続する空白が存在した場合、コンテナからはみ出る可能性があります
+- **`pre-line`**: `pre-wrap`とほぼ同じですが、空白が連続した場合は1つにまとめられます
+- **`break-spaces`**: `pre-wrap`とほぼ同じですが、連続する空白がコンテナからはみ出た場合に折り返されます。また、空白が`min-content`や`max-content`などのサイズに影響します。
+
+