diff --git a/src/components/Icon/Icon.mdx b/src/components/Icon/Icon.mdx new file mode 100644 index 0000000..f03c318 --- /dev/null +++ b/src/components/Icon/Icon.mdx @@ -0,0 +1,53 @@ +import { Canvas, ArgTypes, Meta, Subtitle, Title } from '@storybook/blocks'; +import { linkTo } from '@storybook/addon-links'; +import * as IconStories from './Icon.stories'; + + + +Icon +Collection of SVG icons exported as React components + +## Usage + +```jsx +import { Search, Settings, Check } from "@openai/apps-sdk-ui/components/Icon"; +``` + + + +## Reference + + + +## Examples + +### Sizing + +Icons accept `width` and `height` props to control their size. By default, icons use `1em` which scales with the font size. + + + +### Colors + +Icons use `currentColor` for their fill, so they inherit the text color from their parent. You can style them using Tailwind color classes. + + + +### Common icons + +A selection of commonly used icons from the collection. + + + +### With text + +Icons work well alongside text content, inheriting the text color and scaling appropriately. + + + +## Icon gallery + +For a complete list of all available icons, see the [Icon Gallery](/foundations-icons). + diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx new file mode 100644 index 0000000..b9c982d --- /dev/null +++ b/src/components/Icon/Icon.stories.tsx @@ -0,0 +1,80 @@ +import { type Meta } from "@storybook/react" +import { type ComponentProps } from "react" +import { ArrowRight, Check, Copy, Robot, Search, Settings } from "./" + +type IconProps = ComponentProps + +const meta = { + title: "Components/Icon", + component: Search, + args: { + width: 24, + height: 24, + }, + argTypes: { + className: { control: false }, + }, +} satisfies Meta + +export default meta + +export const Base = (args: IconProps) => + +export const Sizing = () => ( +
+
+ + 16px +
+
+ + 24px +
+
+ + 32px +
+
+ + 48px +
+
+) + +export const Colors = () => ( +
+ + + + + +
+) + +export const CommonIcons = () => ( +
+ + + + + + +
+) + +export const WithText = () => ( +
+
+ + Search +
+
+ + Settings +
+
+ + Complete +
+
+) diff --git a/src/components/Image/Image.mdx b/src/components/Image/Image.mdx new file mode 100644 index 0000000..b146a8b --- /dev/null +++ b/src/components/Image/Image.mdx @@ -0,0 +1,48 @@ +import { Canvas, ArgTypes, Meta, Subtitle, Title } from '@storybook/blocks'; +import { linkTo } from '@storybook/addon-links'; +import * as ImageStories from './Image.stories'; + + + +Image +Load remote images with fade-in animation and error handling + +## Usage +```jsx +import { Image } from "@openai/apps-sdk-ui/components/Image"; +``` + + + +## Reference + + + +## Examples + +### Loading + +Images fade in smoothly once loaded. The component tracks loaded images to provide instant display on subsequent renders. + + + +### Error + +By default, if an image fails to load, the component returns `null` and nothing is rendered. + + + +### Force render on error + +Use `forceRenderAfterLoadFail` to display the broken image icon when an image fails to load, rather than hiding it completely. + + + +### Draggable + +Control whether the image can be dragged by setting the `draggable` prop. + + + diff --git a/src/components/Image/Image.stories.tsx b/src/components/Image/Image.stories.tsx new file mode 100644 index 0000000..dc6bcef --- /dev/null +++ b/src/components/Image/Image.stories.tsx @@ -0,0 +1,105 @@ +import { type Meta } from "@storybook/react" +import { type ComponentProps } from "react" +import { Image } from "./" + +type ImageProps = ComponentProps<"img"> & { + forceRenderAfterLoadFail?: boolean +} + +const meta = { + title: "Components/Image", + component: Image, + args: { + src: "https://picsum.photos/400/300", + draggable: false, + forceRenderAfterLoadFail: false, + }, + argTypes: { + src: { control: "text" }, + className: { control: false }, + onLoad: { control: false }, + onError: { control: false }, + }, +} satisfies Meta + +export default meta + +export const Base = (args: ImageProps) => + +export const Loading = () => ( +
+ Example image +
+) + +Loading.parameters = { + docs: { + source: { + code: `Example image`, + }, + }, +} + +export const Error = () => ( +
+ This will fail to load +
+) + +Error.parameters = { + docs: { + source: { + code: `This will fail to load`, + }, + description: { + story: "When an image fails to load, the component returns `null` and nothing is rendered.", + }, + }, +} + +export const ForceRenderOnError = () => ( +
+ This will fail to load +
+) + +ForceRenderOnError.parameters = { + docs: { + source: { + code: `This will fail to load`, + }, + description: { + story: + "Use `forceRenderAfterLoadFail` to display the broken image icon when an image fails to load.", + }, + }, +} + +export const Draggable = (args: ImageProps) => ( +
+ Draggable image +
+) + +Draggable.args = { + draggable: true, +} + +Draggable.parameters = { + docs: { + source: { + code: `Draggable image`, + }, + }, +}