Merge pull request #96 from 8845musign/add-new-page

Add <Pre> and Update Modals and Upgarde icons

package.json

@@ -32,8 +32,8 @@
     "@types/react-dom": "^18.2.25",
     "@types/react-syntax-highlighter": "^15.5.11",
     "@ubie/design-tokens": "^0.2.0",
-    "@ubie/ubie-icons": "^0.8.0",
-    "@ubie/ubie-ui": "^0.0.35",
+    "@ubie/ubie-icons": "^0.8.1",
+    "@ubie/ubie-ui": "^0.0.36",
     "@unocss/reset": "^0.59.4",
     "astro": "^4.14.2",
     "astro-icon": "^1.1.0",

public/assets/styles/modern-css-reset.css

@@ -0,0 +1,76 @@
+/* Andy-set-studio/modern-css-reset https://github.com/Andy-set-studio/modern-css-reset  */
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+/* Remove default margin */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+    margin: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role="list"],
+ol[role="list"] {
+    list-style: none;
+}
+
+/* Set core root defaults */
+html:focus-within {
+    scroll-behavior: smooth;
+}
+
+/* Set core body defaults */
+body {
+    min-height: 100vh;
+    text-rendering: optimizespeed;
+    line-height: 1.5;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+    text-decoration-skip-ink: auto;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+    display: block;
+    max-width: 100%;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+    font: inherit;
+}
+
+/* Remove all animations and transitions for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+    html:focus-within {
+        scroll-behavior: auto;
+    }
+
+    *,
+    *::before,
+    *::after {
+        transition-duration: 0.01ms !important;
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        scroll-behavior: auto !important;
+    }
+}

src/components/react/ExampleSwitcher.tsx

@@ -6,9 +6,10 @@ import type { FC } from 'react';
 
 interface Props {
   examples: ExampleType[];
+  size?: 'md' | 'lg';
 }
 
-const ExampleSwitcher: FC<Props> = ({ examples }) => {
+const ExampleSwitcher: FC<Props> = ({ examples, size = 'md' }) => {
   const defaultExampleUrl = useMemo(() => {
     return examples[0].url || '';
   }, [examples]);
@@ -37,7 +38,7 @@ const ExampleSwitcher: FC<Props> = ({ examples }) => {
           ))}
         </Flex>
 
-        {currentExample && <ExampleViewer example={currentExample} />}
+        {currentExample && <ExampleViewer size={size} example={currentExample} />}
       </Stack>
     </>
   );

src/components/react/ExampleViewer.module.css

@@ -5,6 +5,10 @@
   border-radius: var(--radius-sm);
 }
 
+.demo.lg {
+  height: 512px;
+}
+
 .demoFrame {
   width: 100%;
   min-height: 100%;

src/components/react/ExampleViewer.tsx

@@ -1,16 +1,18 @@
+import clsx from 'clsx';
 import { Code } from './Code';
 import styles from './ExampleViewer.module.css';
 import type { Example } from '@utils/server';
 import type { FC, PropsWithChildren } from 'react';
 
 type Props = PropsWithChildren<{
   example: Example;
+  size: 'md' | 'lg';
 }>;
 
-const ExampleViewer: FC<Props> = ({ example }) => {
+const ExampleViewer: FC<Props> = ({ example, size = 'md' }) => {
   return (
     <div>
-      <div className={styles.demo}>
+      <div className={clsx(styles.demo, size === 'lg' && styles.lg)}>
         <a className={styles.externalLink} href={example.url} target="_blank" rel="noreferrer">
           Open Window
         </a>

src/components/react/examples/action-half-modal/StickyHeaderAndFooterExample.tsx

@@ -0,0 +1,46 @@
+import { ActionHalfModal } from '@ubie/ubie-ui';
+import { type FC, useCallback, useState } from 'react';
+
+export const StickyHeaderAndFooterExample: FC = () => {
+  const [open, setOpen] = useState(true);
+
+  const onClose = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>
+        Open Modal
+      </button>
+      <ActionHalfModal
+        primaryActionLabel="アクション"
+        onPrimaryAction={onClose}
+        header="Title"
+        open={open}
+        onClose={onClose}
+        stickyHeader
+        stickyFooter
+      >
+        <p style={{ margin: 0 }}>
+          Lorem Ipsum is simply dummy text of the printing and typesetting 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. 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.
+        </p>
+        <p style={{ margin: '12px 0 0' }}>
+          Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin
+          literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
+          College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage,
+          and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem
+          Ipsum comes from sections 1.10.32 and 1.10.33 of &quot;de Finibus Bonorum et Malorum&quot; (The Extremes of
+          Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular
+          during the Renaissance. The first line of Lorem Ipsum, &quot;Lorem ipsum dolor sit amet..&quot;, comes from a
+          line in section 1.10.32.
+        </p>
+      </ActionHalfModal>
+    </>
+  );
+};

src/components/react/examples/action-half-modal/WithHeroExample.tsx

@@ -0,0 +1,42 @@
+import { ActionHalfModal } from '@ubie/ubie-ui';
+import { type FC, useCallback, useState } from 'react';
+
+export const WithHeroExample: FC = () => {
+  const [open, setOpen] = useState(true);
+  const onClose = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>
+        Open Modal
+      </button>
+      <ActionHalfModal
+        hero={
+          <img
+            src="/assets/images/components/modals/hero-placeholder.svg"
+            alt="Illustration: Modal"
+            style={{ width: '100%', height: 'auto', verticalAlign: 'bottom' }}
+            width={560}
+            height={315}
+          />
+        }
+        header="Title"
+        primaryActionLabel="Action"
+        onPrimaryAction={onClose}
+        open={open}
+        onClose={onClose}
+      >
+        <p>
+          Lorem Ipsum is simply dummy text of the printing and typesetting 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. 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.
+        </p>
+      </ActionHalfModal>
+    </>
+  );
+};

src/components/react/examples/action-modal/StickyHeaderAndFooterExample.tsx

@@ -0,0 +1,41 @@
+import { ActionModal } from '@ubie/ubie-ui';
+import { type FC, useState } from 'react';
+
+export const StickyHeaderAndFooterExample: FC = () => {
+  const [open, setOpen] = useState(true);
+
+  return (
+    <>
+      <button type="button" onClick={() => setOpen(true)}>
+        Open Modal
+      </button>
+      <ActionModal
+        header="Title"
+        open={open}
+        onPrimaryAction={() => setOpen(false)}
+        onClose={() => setOpen(false)}
+        stickyHeader
+        stickyFooter
+      >
+        <p style={{ margin: 0 }}>
+          Lorem Ipsum is simply dummy text of the printing and typesetting 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. 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.
+        </p>
+        <p style={{ margin: '12px 0 0' }}>
+          Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin
+          literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
+          College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage,
+          and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem
+          Ipsum comes from sections 1.10.32 and 1.10.33 of &quot;de Finibus Bonorum et Malorum&quot; (The Extremes of
+          Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular
+          during the Renaissance. The first line of Lorem Ipsum, &quot;Lorem ipsum dolor sit amet..&quot;, comes from a
+          line in section 1.10.32.
+        </p>
+      </ActionModal>
+    </>
+  );
+};