Feature/drawer testing

.changeset/chilly-chairs-argue.md

@@ -0,0 +1,6 @@
+---
+"@pixelshades/styles": minor
+"@pixelshades/ui": minor
+---
+
+add drawer component

.github/workflows/release.yml

@@ -19,9 +19,9 @@ jobs:
       - name: Setup Bun
         uses: oven-sh/setup-bun@v1
       - name: Setup PNPM
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@v3
         with:
-          version: 9.1.0
+          version: 9
 
       - name: Install Dependencies
         run: pnpm install

.gitignore

@@ -11,3 +11,6 @@ dist
 .velite
 apps/docs/tsconfig.tsbuildinfo
 apps/docs/tsconfig.tsbuildinfo
+packages/ui/test-results
+
+*storybook.log

apps/docs/content/components/radio-group.mdx

@@ -12,16 +12,3 @@ When used within a `Radio.Group`, only one option can be selected at a time.
 <ComponentPreview name="radio-group/preview" />
 
 
-## Orientation
-
-
-### Horizontal
-
-<ComponentPreview name="radio-group/horizontal" />
-
-
-## Radio Card
-
-<ComponentPreview name="radio-group/card" />
-
-

apps/docs/content/general/color-system.mdx

@@ -3,8 +3,6 @@ title: Color System
 description: Versatile color palette and themable colors ready for your next project.
 
 slug: color-system
-
-
 ---
 
 

apps/docs/content/general/installation.mdx

@@ -3,209 +3,37 @@ title: Installation
 description: How to install DV UI
 
 slug: installation
-
-sortingIndex: 2
 ---
 
-## Requirements
-
-To be able to use Pixelshades you need to install Tailwind CSS. 
-To do so please follow the instructions on the [Tailwind CSS docs](https://tailwindcss.com/docs/installation).
-
-## Installation
-
-### 1. Create a Next.js App
-
-```bash
-npx create-next-app my-app
-cd my-app
-```
-
 
-### 2. Install Pixelshades Components & Styles
+### Add Package
 
 ```bash
-npm install @pixelshades/ui @pixelshades/styles
+npm install @pixelshades/ui
 ```
 
-### 3. Extend Tailwind Config
 
-After adding Pixelshades components and styles, extend your Tailwind CSS configuration by importing the pixelShadesPlugin and adding it to your `tailwind.config.js/.ts` file. 
+### Extend Tailwind Config
 
 ```ts
-// tailwind.config.js
 import type { Config } from "tailwindcss"
 
-import { pixelShadesPlugin } from "@pixelshades/ui/tailwind"
+import { dvPlugin } from "@pixelshades/ui/tailwind"
 
 const config: Config = {
 	darkMode: ["class"],
 	content: [
+		"../../packages/ui/**/*.{js,ts,jsx,tsx}",
+		"./src/stories/**/*.{js,ts,jsx,tsx,mdx}",
+		"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
 		"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
 		"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-		"node_modules/@lemonsqueezy/wedges/dist/**/*.{js,ts,jsx,tsx}",
-		"node_modules/@pixelshades/styles/dist/**/*.{mjs,js}",
 	],
 	theme: {
 		extend: {},
 	},
-	plugins: [pixelShadesPlugin],
+	plugins: [dvPlugin],
 }
 
 export default config
-
 ```
-
-### 4. Add Design Tokens to your global css file
-
-Replace the content of your global css file with the following:
-
-```css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-
-@layer base {
-  :root {
-    --primary-scale-1: 345.75 42.453% 3.3945%;
-		--primary-scale-2: 342.74 31.057% 9.279%;
-		--primary-scale-3: 338.72 53.878% 14.856%;
-		--primary-scale-4: 334.05 80.379% 17.76%;
-		--primary-scale-5: 334.81 71.898% 22.238%;
-		--primary-scale-6: 336.59 58.805% 28.323%;
-		--primary-scale-7: 337.48 51.909% 36.44%;
-		--primary-scale-8: 337.18 51.933% 47.218%;
-		--primary-scale-9: 329 100% 44%;
-		--primary-scale-10: 328.11 100% 37.911%;
-		--primary-scale-11: 340.99 100% 78.836%;
-		--primary-scale-12: 344.46 100% 91.811%;
-
-          --neutral-scale-1: 218.58 37.692% 3.1765%;
-		--neutral-scale-2: 215.39 16.725% 9.4618%;
-		--neutral-scale-3: 215.39 16.962% 13.684%;
-		--neutral-scale-4: 215.39 18.248% 16.813%;
-		--neutral-scale-5: 215.39 17.903% 19.823%;
-		--neutral-scale-6: 215.38 18.573% 23.534%;
-		--neutral-scale-7: 215.38 18.792% 29.161%;
-		--neutral-scale-8: 215.38 18.954% 39.568%;
-		--neutral-scale-9: 215.38 16.9% 44.893%;
-		--neutral-scale-10: 215.39 14.545% 50.088%;
-		--neutral-scale-11: 215.4 20.453% 71.849%;
-		--neutral-scale-12: 215.44 25.82% 93.74%;
-
-          --success-scale-1: 126.19 41.893% 2.4331%;
-		--success-scale-2: 127.04 23.778% 8.0714%;
-		--success-scale-3: 130.71 45.38% 12.028%;
-		--success-scale-4: 134.46 65.078% 14.299%;
-		--success-scale-5: 134.47 61.29% 18.116%;
-		--success-scale-6: 133.88 55.487% 22.559%;
-		--success-scale-7: 133.87 53.538% 27.267%;
-		--success-scale-8: 134.59 55.693% 31.994%;
-		--success-scale-9: 141.92 91.069% 34.621%;
-		--success-scale-10: 143.33 98.831% 35.796%;
-		--success-scale-11: 144.95 100% 41.618%;
-		--success-scale-12: 127.58 78.858% 81.488%;
-
-          --info-scale-1: 220.88 84.625% 4.0378%;
-		--info-scale-2: 213.78 57.712% 9.5643%;
-		--info-scale-3: 212.48 92.455% 15.767%;
-		--info-scale-4: 211.22 100% 19.251%;
-		--info-scale-5: 210.18 100% 23.242%;
-		--info-scale-6: 210.23 100% 28.537%;
-		--info-scale-7: 210.89 88.998% 35.131%;
-		--info-scale-8: 210.38 91.592% 41.184%;
-		--info-scale-9: 208.42 100% 45.663%;
-		--info-scale-10: 210.18 100% 54.775%;
-		--info-scale-11: 214.9 100% 76.155%;
-		--info-scale-12: 214.22 100% 90.712%;
-
-          --destructive-scale-1: 358.18 40.497% 3.425%;
-		--destructive-scale-2: 358.1 23.808% 9.2438%;
-		--destructive-scale-3: 353.17 56.689% 14.86%;
-		--destructive-scale-4: 349.23 74.569% 18.35%;
-		--destructive-scale-5: 349.78 68.426% 22.959%;
-		--destructive-scale-6: 351.52 57.437% 29.011%;
-		--destructive-scale-7: 352.43 51.153% 36.998%;
-		--destructive-scale-8: 352.12 51.043% 48.457%;
-		--destructive-scale-9: 349.42 84.195% 57.576%;
-		--destructive-scale-10: 352.02 88.216% 63.717%;
-		--destructive-scale-11: 356.41 100% 79.556%;
-		--destructive-scale-12: 358.73 100% 91.778%;
-
-
-          --spacing-xs: 0.125rem;
-          --spacing-sm: 0.25rem;
-          --spacing-md: 0.5rem;
-          --spacing-lg: 1rem;
-          --spacing-xl: 1.5rem;
-
-          --spacing-layout-xs: 1rem;
-          --spacing-layout-sm: 1.5rem;
-          --spacing-layout-md: 2rem;
-          --spacing-layout-lg: 3rem;
-          --spacing-layout-xl: 4rem;
-          --spacing-layout-2xl: 6rem;
-
-
-          --background: 228.57 84% 4.902%;
-          --foreground: 215.44 25.82% 93.74%;
-
-          --subtle: var(--neutral-scale-9);
-          --subtle-foreground: var(--neutral-scale-11);
-
-          --border: var(--neutral-scale-6);
-
-          --primary: var(--primary-scale-9);
-          --primary-foreground: var(--primary-scale-12);
-
-          --destructive: var(--destructive-scale-9);
-          --destructive-foreground: var(--destructive-scale-12);
-
-          --ring: var(--primary-scale-9);
-          --radius: 0.5rem;
-
-          --info: var(--info-scale-9);
-          --info-foreground: var(--info-scale-12);
-  }
-
-  .dark {
-    --background: 0 0% 5%;
-    --foreground: 0 0% 95%;
-
-
-    --subtle: 240 4% 16%;
-    --subtle-foreground: 240 5% 64.9%;
-
-    --card: 0 0% 7%;
-    --card-foreground: 0 0% 98%;
-
-    --border: 213 8% 23%;
-
-
-    --primary: 329 100% 44%;
-    --primary-foreground: 240 0% 100%;
-
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-
-    --destructive: 350 89% 60%;
-    --destructive-foreground: 0 0% 98%;
-
-    --ring: 328.93 100% 43.92%;
-
-    --info: 210 100% 72%;
-    --info-foreground: 0 0% 98%;
-  }
-}
-
-@layer base {
-	* {
-		@apply border-border ring-ring;
-	}
-	body {
-		@apply bg-background text-foreground;
-		font-feature-settings: "rlig" 1, "calt" 1;
-	}
-}
-```

apps/docs/content/general/introduction.mdx

@@ -3,57 +3,7 @@ title: Introduction
 description: Documentation for the Fullstack Digital Ventures Chapter
 
 slug: introduction
-
-sortingIndex: 1
 ---
 
 
-Welcome to Pixelshades, your go-to component library for building stunning user interfaces with ease. In a world where creating accessible and visually appealing UIs is paramount, Pixelshades offers beautifully designed component primitives that empower developers to craft exceptional user experiences effortlessly.
-
-## What is Pixelshades?
-
-Pixelshades is more than just a component library; it's a toolkit designed to streamline your development process and elevate the quality of your applications.
-
-Powered by Adobe's headless UI library [React Aria](https://react-spectrum.adobe.com/react-aria/getting-started.html), Pixelshades offers beautifully designed component primitives that empower developers to craft exceptional user experiences effortlessly.
-
-Here's what Pixelshades brings to the table:
-
-- **Beautifully Designed Component Primitives:** Pixelshades provides a comprehensive collection of component primitives that serve as the building blocks for your UI. These components are meticulously crafted to ensure both aesthetics and accessibility, leveraging Adobe's headless UI library React Aria to deliver seamless user interactions and accessibility support.
-
-  - **Plug and Play Components:** With Pixelshades you can easily build your own components by combining the provided primitives.
-
-  - **Customization Options:** While Pixelshades offers out-of-the-box solutions, it also allows for extensive customization, enabling you to tailor the look and feel of your UI to match your brand's identity or specific project requirements.
-
-- **Design Tokens for Consistency:** Consistency is key to creating a cohesive user experience, and Pixelshades makes it easy to achieve just that. By providing a set of design tokens, Pixelshades ensures consistency across your entire application, from colors and typography to spacing and layout.
-
-- **UI Patterns for Better User Experience:** Pixelshades includes a curated collection of UI patterns and best practices aimed at enhancing the user experience. Whether you're designing a form, navigation menu, or interactive component, Pixelshades offers tried-and-tested patterns to help you deliver intuitive and delightful interfaces.
-
-## Motivation
-
-At T-Systems International - Digital Ventures, our motivation for developing Pixelshades stems from a desire to streamline the development process and deliver exceptional products to our customers. Here's why we chose Pixelshades:
-
-- **Boosting Ramp-Up Time:** With Pixelshades, we aim to accelerate the onboarding process for new projects by providing a consistent styling approach out of the box. By eliminating the need to reinvent the wheel with each project, we can focus our efforts on delivering value to our customers from day one.
-
-- **Customization and Flexibility:** Pixelshades highly customizable design allows us to tailor our applications to meet the unique needs of each customer. Whether it's adjusting colors, typography, or layout, Pixelshades empowers us to create bespoke solutions without sacrificing efficiency.
-
-- **Building Consistent UIs:** Maintaining consistency across our product portfolio is crucial for establishing brand identity and enhancing user trust. With Pixelshades, we can ensure that every application we build adheres to the same design principles, resulting in a seamless and recognizable user experience.
-
-- **Accessibility and Usability:** Accessibility is a top priority for us, and Pixelshades' commitment to building accessible UIs aligns perfectly with our values. By leveraging Pixelshades' accessible components and design patterns, we can ensure that our products are inclusive and easy to use for all users, regardless of their abilities.
-
-In summary, Pixelshades empowers us to create visually stunning, accessible, and consistent user interfaces that drive customer satisfaction and business success.
-
-Feel free to adjust the introduction as needed to fit your documentation style and audience.
-
-## Open Source
-
-Pixelshades is an open-source project, meaning that anyone can contribute to its development and improvement. This open nature brings several benefits:
-
-- **Contribution Opportunities:** Pixelshades welcomes contributions from developers of all backgrounds and skill levels. Whether it's adding new features, fixing bugs, or improving documentation, everyone has the opportunity to make Pixelshades better.
-
-- **Flexibility and Customization:** As an open-source project, Pixelshades offers unparalleled flexibility. Developers can extend, customize, and adjust Pixelshades to meet their specific needs and preferences. Whether you're building a personal project or a large-scale application, Pixelshades provides the tools you need to create a tailored solution.
-
-- **Community Feedback:** The open-source nature of Pixelshades fosters a collaborative environment where users can suggest needed components or report bugs. By actively engaging with the community, the Pixelshades team can prioritize features and address issues effectively.
-
-- **Transparency:** Transparency is a core principle of open-source development, and Pixelshades is no exception. All development processes, discussions, and decisions are conducted in the open, ensuring transparency and accountability at every stage of the project.
 
-Whether you're a developer looking to contribute to an exciting project or a user seeking a flexible and customizable component library, Pixelshades welcomes your involvement and feedback. To do so check out our [GitHub repository](https://github.com/telekom/pixelshades).

apps/docs/package.json

@@ -17,16 +17,15 @@
     "@pixelshades/ui": "workspace:*",
     "@pixelshades/utils": "workspace:*",
     "@radix-ui/colors": "^3.0.0",
-    "@tanstack/react-router": "1.31.26",
-    "@tanstack/router-devtools": "1.31.26",
-    "@tanstack/router-vite-plugin": "^1.31.18",
+    "@tanstack/react-router": "1.31.8",
+    "@tanstack/router-devtools": "1.31.8",
+    "@tanstack/router-vite-plugin": "^1.30.0",
     "bezier-easing": "^2.1.0",
-    "colorjs.io": "^0.5.0",
     "fuse.js": "^7.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "shiki": "^1.5.1",
-    "zod": "^3.23.8"
+    "shiki": "^1.4.0",
+    "zod": "^3.23.6"
   },
   "devDependencies": {
     "@types/react": "^18.3.1",
@@ -44,8 +43,8 @@
     "typescript": "^5.4.5",
     "unist-builder": "^4.0.0",
     "unist-util-visit": "^5.0.0",
-    "velite": "^0.1.0-rc.3",
-    "vite": "^5.2.11",
+    "velite": "^0.1.0-beta.14",
+    "vite": "^5.2.10",
     "vite-tsconfig-paths": "^4.3.2"
   }
 }