@reshape-biotech/design-system 2.7.23 → 2.7.25

package/README.md

@@ -1,19 +1,30 @@
-
 ## Local development flow with downstream consumer:
 
-`bun link` will give you a soft link you can install in your consuming project's `node_modules` directory.
+First run
+
+```sh
+bun link
+```
+
+To create a soft link you can install in your consuming project's `node_modules`.
 
 Add this to your consumer's `package.json`:
+
 ```sh
 "@reshape-biotech/design-system": "link:@reshape-biotech/design-system"
 ```
 
+or run this:
+
+```sh
+bun link @reshape-biotech/design-system
+```
+
+Now, to have the package buidling watch for changes:
 
-If you then keep updating the design system, run
 ```sh
 bun run package --watch
 ```
-to keep updating the exported components.
 
 ## Publishing
 
@@ -33,6 +44,7 @@ bun publish
 `bun publish` requires a valid NPM publishing token to be set in your environment.
 
 ## Notes about consuming
+
 As this project heavily uses TailwindCSS **you must** have tailwind include the component files when compiling your bundle css
 
 Specifically, your `tailwind.config.js` should have something like this:
@@ -50,21 +62,18 @@ This package contains the core design system for Reshape Biotech frontend projec
 ### Contents
 
 1. **Component Library**
+
    - A collection of shared, reusable Svelte components
    - Standardized UI elements following Reshape Biotech's design guidelines
    - Fully typed components with TypeScript support
 
 2. **Tailwind Configuration**
-   - Pre-configured Tailwind CSS setup
-   - Custom theme extensions
-   - Shared utility classes
 
-3. **DaisyUI**
-   - Pre-configured DaisyUI setup
+   - Pre-configured Tailwind CSS setup
    - Custom theme extensions
    - Shared utility classes
 
-4. **Design Tokens**
+3. **Design Tokens**
    - Color palette
    - Typography
    - Shadow definitions

package/dist/components/datepicker/DatePicker.stories.svelte

@@ -5,7 +5,8 @@
   import { userEvent, within } from '@storybook/test';
   import { DateTime } from 'luxon';
   import DatePicker from './DatePicker.svelte';
-  import Dropdown from '../dropdown/Dropdown.svelte';
+  import * as Dropdown from '../dropdown/index';
+  import Button from '../button/Button.svelte';
 
   const { Story } = defineMeta({
     component: DatePicker,
@@ -130,22 +131,21 @@
 
 <Story name="In Dropdown" asChild>
   <div class="p-4">
-    <Dropdown bind:open={isOpen} side="dropdown-bottom" alignEnd={false}>
-      {#snippet trigger({ Trigger })}
-        <Trigger>
-          <Icon class="mr-2" size={16}>
-            {#snippet children(props)}
-              <CalendarBlank {...props} />
-            {/snippet}
-          </Icon>
-          {displayText}
-        </Trigger>
-      {/snippet}
-
-      {#snippet content()}
-        <DatePicker selectedDate={dropdownDate} onClick={handleDropdownSelection} />
-      {/snippet}
-    </Dropdown>
+    <Dropdown.Root bind:open={isOpen}>
+      <Dropdown.Trigger>
+        <Icon class="mr-2" size={16}>
+          {#snippet children(props)}
+            <CalendarBlank {...props} />
+          {/snippet}
+        </Icon>
+        {displayText}
+      </Dropdown.Trigger>
+      <Dropdown.Portal>
+        <Dropdown.RawContent side="bottom" sideOffset={4}>
+          <DatePicker selectedDate={dropdownDate} onClick={handleDropdownSelection} />
+        </Dropdown.RawContent>
+      </Dropdown.Portal>
+    </Dropdown.Root>
 
     {#if dropdownDate}
       <div class="mt-4 rounded bg-neutral p-2">
@@ -205,27 +205,26 @@
       </div>
 
       <div class="mb-4">
-        <Dropdown bind:open={formIsOpen} side="dropdown-bottom" alignEnd={false}>
-          {#snippet trigger({ Trigger })}
-            <Trigger>
-              <div data-testid="form-date-trigger" class="flex items-center gap-2">
-                <Icon class="mr-2" size={16}>
-                  {#snippet children(props)}
-                    <CalendarBlank {...props} />
-                  {/snippet}
-                </Icon>
-                {formDisplayText}
-              </div>
-            </Trigger>
-          {/snippet}
-
-          {#snippet content()}
-            <DatePicker selectedDate={formDropdownDate} onClick={handleFormDateSelection} />
-          {/snippet}
-        </Dropdown>
+        <Dropdown.Root bind:open={formIsOpen}>
+          <Dropdown.Trigger>
+            <div data-testid="form-date-trigger" class="flex items-center gap-2">
+              <Icon class="mr-2" size={16}>
+                {#snippet children(props)}
+                  <CalendarBlank {...props} />
+                {/snippet}
+              </Icon>
+              {formDisplayText}
+            </div>
+          </Dropdown.Trigger>
+          <Dropdown.Portal>
+            <Dropdown.RawContent side="bottom" sideOffset={4}>
+              <DatePicker selectedDate={formDropdownDate} onClick={handleFormDateSelection} />
+            </Dropdown.RawContent>
+          </Dropdown.Portal>
+        </Dropdown.Root>
       </div>
 
-      <button type="submit" class="btn btn-primary mt-4">Submit Form</button>
+      <Button type="submit" class="mt-4">Submit Form</Button>
     </form>
   </div>
 </Story>