playbook_ui_docs 16.6.0.pre.alpha.RTEPOC15805 → 16.6.0.pre.alpha.emptystatepresets15848
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_presets.html.erb +14 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_presets.jsx +27 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/default_image/this_is_fine.svg +21 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/default_image/travolta_lost.gif +0 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +0 -2
- metadata +6 -6
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_rails_default.html.erb +0 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_rails_default.md +0 -12
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_rails_simple.html.erb +0 -9
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_rails_simple.md +0 -8
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 2b5f97f4f41f962f56ceb571eecc1546092d920e09bc6324f1c8866c7930f96c
|
|
4
|
+
data.tar.gz: 2ebd9b58ac96ce14c31ba42fc1633e280bfd3711c2bb9b7acc67b8d37d3bd9d2
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: c72f0b31343b49a9dba06a4c36e777bd7c07036b2b925079dbcd81eaf6d4dced97eac694c4b7971e89363f59be83f2cf6626853bdcb97cccc82ed1005f14c5f4
|
|
7
|
+
data.tar.gz: 52c0f936c6ac781f91a4c1dbe1969a81fc10908d405c2950cb9218ea52c7f441f3f0e31b7945e15ceae34f7d1acd2cae3db75a2c353b1b99e6bab3e57f6dedc1
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<%= pb_rails("flex", props: { align: "start", justify: "start", orientation: "column", gap: "xl" }) do %>
|
|
2
|
+
<%= pb_rails("empty_state", props: {
|
|
3
|
+
description: "This error was unexpected. Please try again in a moment.",
|
|
4
|
+
header: "Something went wrong",
|
|
5
|
+
image: "this_is_fine",
|
|
6
|
+
primary_button: "Back to home",
|
|
7
|
+
}) %>
|
|
8
|
+
<%= pb_rails("empty_state", props: {
|
|
9
|
+
description: "We could not load this resource. Check the URL or try again later.",
|
|
10
|
+
header: "We are not sure what happened",
|
|
11
|
+
image: "travolta_lost",
|
|
12
|
+
link_button: "Contact support",
|
|
13
|
+
}) %>
|
|
14
|
+
<% end %>
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import EmptyState from '../_empty_state'
|
|
3
|
+
import Flex from '../../pb_flex/_flex'
|
|
4
|
+
|
|
5
|
+
const EmptyStatePresets = (props) => (
|
|
6
|
+
<Flex align="start"
|
|
7
|
+
gap="xl"
|
|
8
|
+
orientation="column"
|
|
9
|
+
>
|
|
10
|
+
<EmptyState
|
|
11
|
+
{...props}
|
|
12
|
+
description="This error was unexpected. Please try again in a moment."
|
|
13
|
+
header="Something went wrong"
|
|
14
|
+
image="this_is_fine"
|
|
15
|
+
primaryButton="Back to home"
|
|
16
|
+
/>
|
|
17
|
+
<EmptyState
|
|
18
|
+
{...props}
|
|
19
|
+
description="We could not load this resource. Check the URL or try again later."
|
|
20
|
+
header="We are not sure what happened"
|
|
21
|
+
image="travolta_lost"
|
|
22
|
+
linkButton="Contact support"
|
|
23
|
+
/>
|
|
24
|
+
</Flex>
|
|
25
|
+
)
|
|
26
|
+
|
|
27
|
+
export default EmptyStatePresets
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 48 48" id="This-Is-Fine--Streamline-Memes" height="48" width="48">
|
|
2
|
+
<desc>
|
|
3
|
+
This Is Fine Streamline Element: https://streamlinehq.com
|
|
4
|
+
</desc>
|
|
5
|
+
<path stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M26.114 37.139c1.314 -0.422 1.896 -0.882 2.638 -2.15" stroke-width="1"></path>
|
|
6
|
+
<path stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M11.726 44.394c0 -2.35 0.052 -5.692 0.305 -9.019m11.61 -16.063c1.866 0.475 3.82 1.753 4.843 4.157" stroke-width="1"></path>
|
|
7
|
+
<path stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M26.578 32.669c2.365 -1.31 6.05 -2.796 8.844 -2.614m-5.034 13.948c-0.078 -1.642 -0.558 -5.164 -0.789 -6.72 4.062 1.425 9.68 1.069 9.68 -2.758 0 -0.116 0.005 -0.337 0 -0.449" stroke-width="1"></path>
|
|
8
|
+
<path stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M27.653 36.382c0.576 0.348 1.237 0.651 1.946 0.9" stroke-width="1"></path>
|
|
9
|
+
<path stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M34.17 32.74a3.224 2.638 -11.758 1 0 6.312 -1.314 3.224 2.638 -11.758 1 0 -6.312 1.314" stroke-width="1"></path>
|
|
10
|
+
<path stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M23.04 15.784a2.442 2.442 0 0 1 0.7 3.383c-1.22 1.856 -2.515 3.357 -4.302 4.265 -1.793 0.91 -3.746 1.053 -5.9 0.932a2.442 2.442 0 0 1 -2.303 -2.575c0.076 -1.347 1.223 -1.64 2.57 -1.565 1.836 0.103 3.096 0.07 3.75 -0.261 0.66 -0.335 1.83 -1.544 2.879 -3.14 0.74 -1.128 1.479 -1.78 2.606 -1.039Z" clip-rule="evenodd" stroke-width="1"></path>
|
|
11
|
+
<path stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="m13.938 20.219 -0.234 -3.244a2.712 2.712 0 0 1 1.276 -2.5v0a2.712 2.712 0 0 1 3.212 0.263l2.275 1.986" stroke-width="1"></path>
|
|
12
|
+
<path stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M20.388 16.662c-1.114 -0.27 -2.606 -0.078 -4.06 0.617 -1.035 0.494 -1.883 1.163 -2.463 1.881l0.07 0.977c2.046 0.297 3.364 0.077 4.565 -0.914 0.591 -0.575 1.285 -1.414 1.934 -2.4l0.05 -0.076 -0.096 -0.085Z" stroke-width="1"></path>
|
|
13
|
+
<path stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M16.563 30.91a3.615 4.69 0 1 0 7.23 0 3.615 4.69 0 1 0 -7.23 0" stroke-width="1"></path>
|
|
14
|
+
<path stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M25.161 27.393a3.615 3.908 0 1 0 7.23 0 3.615 3.908 0 1 0 -7.23 0" stroke-width="1"></path>
|
|
15
|
+
<path stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M12.744 24.327c-0.696 1.224 -1.644 2.243 -2.558 3.225 -1.676 1.802 -3.237 3.478 -2.908 6.065 0.456 3.596 4.147 3.122 5.753 0.66 1.838 -2.817 2.145 -7.709 0.577 -9.891a27.982 27.982 0 0 1 -0.57 -0.027 2.769 2.769 0 0 1 -0.294 -0.032Z" stroke-width="1"></path>
|
|
16
|
+
<path stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M15.732 40.583s-0.488 2.834 0 4.006" stroke-width="1"></path>
|
|
17
|
+
<path stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M17.98 40.779c-0.257 1.792 -0.088 2.584 0.488 3.81" stroke-width="1"></path>
|
|
18
|
+
<path stroke="#000000" stroke-linecap="round" stroke-linejoin="round" d="M3.54 44.274C2.694 43.428 1 39.054 1 35.46c1.407 1.407 2.931 1.563 3.517 1.466 -0.977 -1.433 -2.93 -5.16 -2.93 -8.599 1.563 1.563 3.32 1.953 4.004 1.953C4.29 28 2.172 22.405 4.127 18.262c0 0 1.27 2.639 3.029 3.616C6.765 20.118 14.19 7.71 9.89 3.41c8.109 0 19.835 3.615 21.692 13.874 1.042 -0.488 3.185 -2.052 3.42 -4.397 2.188 3.518 1.888 8.696 1.465 10.846 1.798 -1.173 3.094 -3.55 3.517 -4.592 2.614 3.02 3.953 6.401 2.741 11.567 2.033 -1.172 3.655 -3.91 4.274 -4.528 0.032 3.387 -2.56 14.81 -5.842 18.093" stroke-width="1"></path>
|
|
19
|
+
<path fill="#000000" fill-rule="evenodd" d="M29.376 26.341a1.432 1.432 0 1 0 0 2.864 1.432 1.432 0 0 0 0 -2.864Z" clip-rule="evenodd" stroke-width="1"></path>
|
|
20
|
+
<path fill="#000000" fill-rule="evenodd" d="M20.598 29.478a1.432 1.432 0 1 0 0 2.864 1.432 1.432 0 0 0 0 -2.864Z" clip-rule="evenodd" stroke-width="1"></path>
|
|
21
|
+
</svg>
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
examples:
|
|
2
2
|
rails:
|
|
3
3
|
- empty_state_default: Default
|
|
4
|
+
- empty_state_presets: Illustration presets
|
|
4
5
|
- empty_state_size: Size
|
|
5
6
|
- empty_state_orientation: Orientation
|
|
6
7
|
- empty_state_alignment: Alignment
|
|
7
8
|
|
|
8
9
|
react:
|
|
9
10
|
- empty_state_default: Default
|
|
11
|
+
- empty_state_presets: Illustration presets
|
|
10
12
|
- empty_state_size: Size
|
|
11
13
|
- empty_state_orientation: Orientation
|
|
12
14
|
- empty_state_alignment: Alignment
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { default as EmptyStateDefault } from './_empty_state_default.jsx'
|
|
2
|
+
export { default as EmptyStatePresets } from './_empty_state_presets.jsx'
|
|
2
3
|
export { default as EmptyStateOrientation } from './_empty_state_orientation.jsx'
|
|
3
4
|
export { default as EmptyStateSize } from './_empty_state_size.jsx'
|
|
4
5
|
export { default as EmptyStateAlignment } from './_empty_state_alignment.jsx'
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: playbook_ui_docs
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 16.6.0.pre.alpha.
|
|
4
|
+
version: 16.6.0.pre.alpha.emptystatepresets15848
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2026-04-
|
|
12
|
+
date: 2026-04-20 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -1054,10 +1054,14 @@ files:
|
|
|
1054
1054
|
- app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.jsx
|
|
1055
1055
|
- app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.html.erb
|
|
1056
1056
|
- app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.jsx
|
|
1057
|
+
- app/pb_kits/playbook/pb_empty_state/docs/_empty_state_presets.html.erb
|
|
1058
|
+
- app/pb_kits/playbook/pb_empty_state/docs/_empty_state_presets.jsx
|
|
1057
1059
|
- app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.html.erb
|
|
1058
1060
|
- app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.jsx
|
|
1059
1061
|
- app/pb_kits/playbook/pb_empty_state/docs/_playground.json
|
|
1060
1062
|
- app/pb_kits/playbook/pb_empty_state/docs/default_image/computer_fly_no_branding.svg
|
|
1063
|
+
- app/pb_kits/playbook/pb_empty_state/docs/default_image/this_is_fine.svg
|
|
1064
|
+
- app/pb_kits/playbook/pb_empty_state/docs/default_image/travolta_lost.gif
|
|
1061
1065
|
- app/pb_kits/playbook/pb_empty_state/docs/default_image/utils.tsx
|
|
1062
1066
|
- app/pb_kits/playbook/pb_empty_state/docs/example.yml
|
|
1063
1067
|
- app/pb_kits/playbook/pb_empty_state/docs/index.js
|
|
@@ -2135,10 +2139,6 @@ files:
|
|
|
2135
2139
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.md
|
|
2136
2140
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx
|
|
2137
2141
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md
|
|
2138
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_rails_default.html.erb
|
|
2139
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_rails_default.md
|
|
2140
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_rails_simple.html.erb
|
|
2141
|
-
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_rails_simple.md
|
|
2142
2142
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.jsx
|
|
2143
2143
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.md
|
|
2144
2144
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<%= pb_rails("rich_text_editor", props: { input_options: { id: 'hidden_input_id', name: "hidden_input_name" }, value: "Add your text here. You can format your text, add links, quotes, and bullets." }) %>
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
The Rails rich text editor is a TipTap surface with no React. The UI (toolbar, block-style menu, formatting actions) is rendered with Playbook Rails kits (`pb_rails`). The editor document is a vanilla TipTap `Editor` instance; HTML is synced to a hidden `<input>` so standard Rails forms can submit the value.
|
|
2
|
-
|
|
3
|
-
### How TipTap is loaded (Rails)
|
|
4
|
-
|
|
5
|
-
- The kit’s module script (`rich_text_editor_rails.js`) uses `import()` with **full URLs** on [esm.sh](https://esm.sh) (e.g. `@tiptap/core@2.8.0`). esm.sh resolves dependencies server-side, so **no `<script type="importmap">`** is required—this avoids conflicts when the host page already has an import map (e.g. Vite in dev, or another app map) because Firefox only applies one native map.
|
|
6
|
-
- You do not need TipTap in your app’s npm dependencies or Gemfile for this kit; the browser loads modules from esm.sh when the page runs.
|
|
7
|
-
- Ensure **CSP** allows loading scripts from `https://esm.sh` (and esm.sh’s redirected module URLs) if you use a strict `script-src` / `connect-src`.
|
|
8
|
-
|
|
9
|
-
### Relation to the React implementation
|
|
10
|
-
|
|
11
|
-
- Same core: both use TipTap v2 on top of ProseMirror; styling lives in Playbook SCSS (`_tiptap_styles.scss`) so the editor chrome lines up between platforms.
|
|
12
|
-
- Different shell: Rails uses ERB + Playbook Rails components + inline module script. React uses `RichTextEditor` / `_tiptap_editor.tsx` and TipTap wired through the bundled Playbook React package—see Advanced Default for that stack and when you need TipTap installed in your JavaScript bundle.
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
### Simple toolbar (`simple: true`)
|
|
2
|
-
|
|
3
|
-
Pass **`simple: true`** for a compact toolbar: **Bold**, **Italic**, **Undo**, and **Redo** (same history controls as the full toolbar—plain buttons, not popovers).
|
|
4
|
-
|
|
5
|
-
- No block-style dropdown (no “Paragraph” / headings / lists in the menu).
|
|
6
|
-
- No **`pb_popover`** on the toolbar—useful in **native `<dialog>`** modals, turbo-loaded panels, or other tight layouts where the full block menu is awkward to position.
|
|
7
|
-
|
|
8
|
-
The underlying TipTap document still accepts the same HTML as the default Rails editor; `simple` only changes which **toolbar controls** are shown.
|