Merge pull request #13103 from overleaf/mj-figure-modal-to-components

[web] Add figure modal components to storybook

GitOrigin-RevId: 9916de620785e3a7dd982f6494f7b471f69c58f7

services/web/frontend/stories/select.stories.tsx

@@ -0,0 +1,35 @@
+import { Select } from '../js/shared/components/select'
+
+const items = [1, 2, 3, 4].map(index => ({
+  key: index,
+  value: `Demo item ${index}`,
+  group: index >= 3 ? 'Large numbers' : undefined,
+}))
+
+export const Base = () => {
+  return (
+    <Select
+      items={items}
+      itemToString={x => String(x?.value)}
+      itemToKey={x => String(x.key)}
+      defaultText="Choose an item"
+    />
+  )
+}
+
+export const WithSubtitles = () => {
+  return (
+    <Select
+      items={items}
+      itemToString={x => String(x?.value)}
+      itemToKey={x => String(x.key)}
+      itemToSubtitle={x => x?.group ?? ''}
+      defaultText="Choose an item"
+    />
+  )
+}
+
+export default {
+  title: 'Shared / Components / Select',
+  component: Select,
+}

services/web/frontend/stories/switcher.stories.tsx

@@ -0,0 +1,28 @@
+import { Switcher, SwitcherItem } from '../js/shared/components/switcher'
+
+export const Base = () => {
+  return (
+    <Switcher name="figure-width" defaultValue="0.5">
+      <SwitcherItem value="0.25" label="¼ width" />
+      <SwitcherItem value="0.5" label="½ width" />
+      <SwitcherItem value="0.75" label="¾ width" />
+      <SwitcherItem value="1.0" label="Full width" />
+    </Switcher>
+  )
+}
+
+export const Disabled = () => {
+  return (
+    <Switcher name="figure-width" defaultValue="0.5" disabled>
+      <SwitcherItem value="0.25" label="¼ width" />
+      <SwitcherItem value="0.5" label="½ width" />
+      <SwitcherItem value="0.75" label="¾ width" />
+      <SwitcherItem value="1.0" label="Full width" />
+    </Switcher>
+  )
+}
+
+export default {
+  title: 'Shared / Components / Switcher',
+  component: Switcher,
+}