feat: add nui-slimscroll utility stories

src/plugins/components/slimscroll/slimscroll.component.ts

@@ -0,0 +1,63 @@
+import { html } from 'lit'
+import { spread } from '@open-wc/lit-helpers'
+
+import type { SlimscrollAttrs } from './slimscroll.types'
+import * as variants from './slimscroll.variants'
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Slimscroll = ({ ...attrs }: SlimscrollAttrs) => {
+  return html`
+    <div class="flex items-center justify-center px-4 pt-4 pb-0">
+      <div class="w-full bg-muted-100 dark:bg-muted-900 rounded-xl p-4 md:p-8">
+        <div class="max-w-full">
+          <div
+            class="p-6 bg-white dark:bg-muted-800 border border-muted-200 dark:border-muted-400 rounded-lg"
+          >
+            <div class="space-y-4 pe-4 h-64 overflow-y-auto nui-slimscroll">
+              <p class="nui-text nui-text-sm text-muted-400">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                Universa enim illorum ratione cum tota vestra confligendum puto.
+                Fortemne possumus dicere eundem illum Torquatum? Bonum patria:
+                miserum exilium. Duo Reges: constructio interrete. Vide, quaeso,
+                rectumne sit. Cur tantas regiones barbarorum pedibus obiit, tot
+                maria transmisit? Nunc de hominis summo bono quaeritur; Ut
+                optime, secundum naturam affectum esse possit.
+              </p>
+              <p class="nui-text nui-text-sm text-muted-400">
+                Est, ut dicis, inquit; Ergo ita: non posse honeste vivi, nisi
+                honeste vivatur? Nec mihi illud dixeris: Haec enim ipsa mihi
+                sunt voluptati, et erant illa Torquatis. Quod eo liquidius
+                faciet, si perspexerit rerum inter eas verborumne sit
+                controversia. Scaevolam M. Sic exclusis sententiis reliquorum
+                cum praeterea nulla esse possit, haec antiquorum valeat necesse
+                est. Quodsi ipsam honestatem undique pertectam atque absolutam.
+                Hoc etsi multimodis reprehendi potest, tamen accipio, quod dant.
+                Nam de isto magna dissensio est.
+              </p>
+              <p class="nui-text nui-text-sm text-muted-400">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                Universa enim illorum ratione cum tota vestra confligendum puto.
+                Fortemne possumus dicere eundem illum Torquatum? Bonum patria:
+                miserum exilium. Duo Reges: constructio interrete. Vide, quaeso,
+                rectumne sit. Cur tantas regiones barbarorum pedibus obiit, tot
+                maria transmisit? Nunc de hominis summo bono quaeritur; Ut
+                optime, secundum naturam affectum esse possit. Est, ut dicis,
+                inquit; Ergo ita: non posse honeste vivi, nisi honeste vivatur?
+                Nec mihi illud dixeris: Haec enim ipsa mihi sunt voluptati, et
+                erant illa Torquatis. Quod eo liquidius faciet, si perspexerit
+                rerum inter eas verborumne sit controversia. Scaevolam M. Sic
+                exclusis sententiis reliquorum cum praeterea nulla esse possit,
+                haec antiquorum valeat necesse est. Quodsi ipsam honestatem
+                undique pertectam atque absolutam. Hoc etsi multimodis
+                reprehendi potest, tamen accipio, quod dant. Nam de isto magna
+                dissensio est.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `
+}

src/plugins/components/slimscroll/slimscroll.doc.mdx

@@ -0,0 +1,51 @@
+import { Meta, Primary, Controls, Story } from '@storybook/blocks'
+import * as SlimscrollStories from './slimscroll.stories'
+import { defaultConfig } from './slimscroll.config'
+
+<Meta of={SlimscrollStories} />
+
+# nui-slimscroll
+
+When using autocompletes or search, you often see some highlighted text. This is the component that does that.
+
+<Primary />
+
+## Props
+
+<Controls />
+
+## Customization
+
+### Default config
+
+<div className="relative">
+  <details className="relative bg-slate-50 border border-slate-200 rounded-lg p-4 [&>summary>svg]:open:-rotate-180">
+    <summary className="list-none cursor-pointer">
+      <span className="font-sans text-slate-500">View configuration options</span>
+      <svg
+        className="w-5 h-5 text-slate-500 absolute top-5 end-4 transition-transform duration-300"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          d="m6 9l6 6l6-6"
+        />
+      </svg>
+    </summary>
+
+    <div className="!mt-4">
+      <pre >
+        {JSON.stringify(defaultConfig, null, 2)}
+      </pre>
+    </div>
+
+  </details>
+</div>
+

src/plugins/components/slimscroll/slimscroll.stories.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/web-components'
+import { html } from 'lit'
+
+import type { SlimscrollAttrs } from './slimscroll.types'
+import { Slimscroll } from './slimscroll.component'
+
+// More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction
+const meta = {
+  title: 'Shuriken UI/Utility/Slimscroll',
+  // tags: ['autodocs'],
+  render: (args) => Slimscroll(args),
+  argTypes: {},
+} satisfies Meta<SlimscrollAttrs>
+
+export default meta
+type Story = StoryObj<SlimscrollAttrs>
+
+// first export is the Primary story
+
+// #region Main
+export const Main: Story = {
+  name: 'Main example',
+  args: {},
+}
+// #endregion

src/plugins/components/slimscroll/slimscroll.types.ts

@@ -0,0 +1,12 @@
+import type { PropertyVariant } from '~/types/utils'
+
+export interface SlimscrollProps extends Record<string, unknown> {}
+
+export interface SlimscrollEvents {}
+
+export interface SlimscrollSlots {}
+
+export type SlimscrollAttrs = SlimscrollProps &
+  SlimscrollEvents &
+  SlimscrollSlots
+export type SlimscrollVariant<T> = PropertyVariant<T, SlimscrollProps>

src/plugins/components/slimscroll/slimscroll.variants.ts

@@ -0,0 +1 @@
+export {}