@uni-design-system/uni-react 1.0.0 → 2.0.0

package/src/core/text/text.stories.tsx

@@ -3,82 +3,64 @@ import { Text, TextProps } from './text.component';
 
 export default {
   title: 'Typography/Text',
-  component: Text
+  component: Text,
 };
 
 const baseArgs: Partial<TextProps> = {
   text: 'UNI Design System',
-  colorToken: 'on-background'
-}
+  colorToken: 'on-background',
+};
 
 export const DisplayLarge = (args: TextProps) => <Text {...args} />;
-DisplayLarge.args = { ...baseArgs,
-  role: 'display-large'
-}
+DisplayLarge.args = { ...baseArgs, role: 'display-large' };
 DisplayLarge.story = {
   name: 'Display (large)',
 };
 
 export const DisplayMedium = (args: TextProps) => <Text {...args} />;
-DisplayMedium.args = { ...baseArgs,
-  role: 'display-medium'
-}
+DisplayMedium.args = { ...baseArgs, role: 'display-medium' };
 DisplayMedium.story = {
   name: 'Display (medium)',
 };
 
 export const DisplaySmall = (args: TextProps) => <Text {...args} />;
-DisplaySmall.args = { ...baseArgs,
-  role: 'display-small'
-}
+DisplaySmall.args = { ...baseArgs, role: 'display-small' };
 DisplaySmall.story = {
   name: 'Display (small)',
 };
 
 export const HeadlineLarge = (args: TextProps) => <Text {...args} />;
-HeadlineLarge.args = { ...baseArgs,
-  role: 'headline-large'
-}
+HeadlineLarge.args = { ...baseArgs, role: 'headline-large' };
 HeadlineLarge.story = {
   name: 'Headline (large)',
 };
 
 export const HeadlineMedium = (args: TextProps) => <Text {...args} />;
-HeadlineMedium.args = { ...baseArgs,
-  role: 'headline-medium'
-}
+HeadlineMedium.args = { ...baseArgs, role: 'headline-medium' };
 HeadlineMedium.story = {
   name: 'Headline (medium)',
 };
 
 export const HeadlineSmall = (args: TextProps) => <Text {...args} />;
-HeadlineSmall.args = { ...baseArgs,
-  role: 'headline-small'
-}
+HeadlineSmall.args = { ...baseArgs, role: 'headline-small' };
 HeadlineSmall.story = {
   name: 'Headline (small)',
 };
 
 export const TitleLarge = (args: TextProps) => <Text {...args} />;
-TitleLarge.args = { ...baseArgs,
-  role: 'title-large'
-}
+TitleLarge.args = { ...baseArgs, role: 'title-large' };
 TitleLarge.story = {
   name: 'Title (large)',
 };
 
 export const TitleMedium = (args: TextProps) => <Text {...args} />;
-TitleMedium.args = { ...baseArgs,
-  role: 'title-medium'
-}
+TitleMedium.args = { ...baseArgs, role: 'title-medium' };
 TitleMedium.story = {
   name: 'Title (medium)',
 };
 
 export const TitleSmall = (args: TextProps) => <Text {...args} />;
-TitleSmall.args = { ...baseArgs,
-  role: 'title-small'
-}
+TitleSmall.args = { ...baseArgs, role: 'title-small' };
 TitleSmall.story = {
   name: 'Title (small)',
 };

package/src/core/theme/theming.tsx

@@ -1,25 +1,26 @@
 import React, { createContext, useContext, useMemo } from 'react';
-import {LightTheme, type Theme} from "@uni-design-system/uni-core";
+import { LightTheme, type UniTheme } from '@uni-design-system/uni-core';
 
 const defaultTheme = LightTheme;
 
-const ThemeContext = createContext<Theme>(defaultTheme);
+const ThemeContext = createContext<UniTheme>(defaultTheme);
 
-export const ThemeProvider: React.FC<{ theme?: Theme; children: React.ReactNode }> = ({ theme, children }) => {
+export const ThemeProvider: React.FC<{ theme?: UniTheme; children: React.ReactNode }> = ({
+  theme,
+  children,
+}) => {
   // Use useMemo to prevent unnecessary re-renders when the parent re-renders
   const value = useMemo(() => theme || defaultTheme, [theme]);
   return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
 };
 
-
 export const useTheme = () => {
   const context = useContext(ThemeContext);
-  if (!context) throw new Error("useTheme must be used within ThemeProvider");
+  if (!context) throw new Error('useTheme must be used within ThemeProvider');
   return context;
 };
 
-
-export function withTheme<P extends { theme: Theme }>(
+export function withTheme<P extends { theme: UniTheme }>(
   Component: React.ComponentType<P>
 ): React.ComponentType<Omit<P, 'theme'>> {
   return function WrappedComponent(props: any) {

package/src/core/transition/collapse/collapse.component.tsx

@@ -1,7 +1,14 @@
 import React from 'react';
 import { AnimatePresence, HTMLMotionProps, motion, Variants as _Variants } from 'framer-motion';
 import { forwardRef, useEffect, useState } from 'react';
-import { TRANSITION_EASINGS, Variants, withDelay, WithTransitionConfig, cx, warn } from '../transition.utils';
+import {
+  TRANSITION_EASINGS,
+  Variants,
+  withDelay,
+  WithTransitionConfig,
+  cx,
+  warn,
+} from '../transition.utils';
 
 const isNumeric = (value?: string | number) => value != null && parseInt(value.toString(), 10) > 0;
 
@@ -51,7 +58,8 @@ const variants: Variants<CollapseOptions> = {
 
 export type ICollapse = CollapseProps;
 
-export interface CollapseProps extends WithTransitionConfig<HTMLMotionProps<'div'>>, CollapseOptions {}
+export interface CollapseProps
+  extends WithTransitionConfig<HTMLMotionProps<'div'>>, CollapseOptions {}
 
 export const Collapse = forwardRef<HTMLDivElement, CollapseProps>((props, ref) => {
   const {

package/src/core/transition/fade/fade.component.tsx

@@ -3,7 +3,12 @@ import React from 'react';
 import { AnimatePresence, HTMLMotionProps, motion, Variants as _Variants } from 'framer-motion';
 
 import { forwardRef } from 'react';
-import { TRANSITION_DEFAULTS, Variants, withDelay, WithTransitionConfig } from '../transition.utils';
+import {
+  TRANSITION_DEFAULTS,
+  Variants,
+  withDelay,
+  WithTransitionConfig,
+} from '../transition.utils';
 
 export interface FadeProps extends WithTransitionConfig<HTMLMotionProps<'div'>> {}
 
@@ -37,7 +42,16 @@ export const Fade = forwardRef<HTMLDivElement, FadeProps>(function Fade(props, r
 
   return (
     <AnimatePresence custom={custom}>
-      {show && <motion.div ref={ref} className={'fade'} custom={custom} {...fadeConfig} animate={animate} {...rest} />}
+      {show && (
+        <motion.div
+          ref={ref}
+          className={'fade'}
+          custom={custom}
+          {...fadeConfig}
+          animate={animate}
+          {...rest}
+        />
+      )}
     </AnimatePresence>
   );
 });

package/src/core/transition/slide/slide.component.tsx

@@ -1,5 +1,11 @@
 import React from 'react';
-import { AnimatePresence, HTMLMotionProps, motion, MotionStyle, Variants as TVariants } from 'framer-motion';
+import {
+  AnimatePresence,
+  HTMLMotionProps,
+  motion,
+  MotionStyle,
+  Variants as TVariants,
+} from 'framer-motion';
 import { forwardRef } from 'react';
 import {
   SlideDirection,
@@ -71,7 +77,11 @@ export const Slide = forwardRef<HTMLDivElement, SlideProps>(function Slide(props
   } = props;
 
   const transitionStyles = getSlideTransition({ direction });
-  const computedStyle: MotionStyle = Object.assign({ position: 'fixed' }, transitionStyles.position, style);
+  const computedStyle: MotionStyle = Object.assign(
+    { position: 'fixed' },
+    transitionStyles.position,
+    style
+  );
 
   const show = unmountOnExit ? isOpen && unmountOnExit : true;
   const animate = isOpen || unmountOnExit ? 'enter' : 'exit';

package/src/core/transition/transition.utils.ts

@@ -129,11 +129,17 @@ export type WithTransitionConfig<P extends object> = Omit<P, 'transition'> &
   };
 
 export const withDelay = {
-  enter: (transition: Transition, delay?: number | DelayConfig): Transition & { delay: number | undefined } => ({
+  enter: (
+    transition: Transition,
+    delay?: number | DelayConfig
+  ): Transition & { delay: number | undefined } => ({
     ...transition,
     delay: typeof delay === 'number' ? delay : delay?.['enter'],
   }),
-  exit: (transition: Transition, delay?: number | DelayConfig): Transition & { delay: number | undefined } => ({
+  exit: (
+    transition: Transition,
+    delay?: number | DelayConfig
+  ): Transition & { delay: number | undefined } => ({
     ...transition,
     delay: typeof delay === 'number' ? delay : delay?.['exit'],
   }),

package/src/stories/Configure.mdx

@@ -1,35 +1,37 @@
-import { Meta } from "@storybook/addon-docs/blocks";
-
-import Github from "./assets/github.svg";
-import Discord from "./assets/discord.svg";
-import Youtube from "./assets/youtube.svg";
-import Tutorials from "./assets/tutorials.svg";
-import Styling from "./assets/styling.png";
-import Context from "./assets/context.png";
-import Assets from "./assets/assets.png";
-import Docs from "./assets/docs.png";
-import Share from "./assets/share.png";
-import FigmaPlugin from "./assets/figma-plugin.png";
-import Testing from "./assets/testing.png";
-import Accessibility from "./assets/accessibility.png";
-import Theming from "./assets/theming.png";
-import AddonLibrary from "./assets/addon-library.png";
-
-export const RightArrow = () => <svg 
-    viewBox="0 0 14 14" 
-    width="8px" 
-    height="14px" 
-    style={{ 
+import { Meta } from '@storybook/addon-docs/blocks';
+
+import Github from './assets/github.svg';
+import Discord from './assets/discord.svg';
+import Youtube from './assets/youtube.svg';
+import Tutorials from './assets/tutorials.svg';
+import Styling from './assets/styling.png';
+import Context from './assets/context.png';
+import Assets from './assets/assets.png';
+import Docs from './assets/docs.png';
+import Share from './assets/share.png';
+import FigmaPlugin from './assets/figma-plugin.png';
+import Testing from './assets/testing.png';
+import Accessibility from './assets/accessibility.png';
+import Theming from './assets/theming.png';
+import AddonLibrary from './assets/addon-library.png';
+
+export const RightArrow = () => (
+  <svg
+    viewBox="0 0 14 14"
+    width="8px"
+    height="14px"
+    style={{
       marginLeft: '4px',
       display: 'inline-block',
       shapeRendering: 'inherit',
       verticalAlign: 'middle',
       fill: 'currentColor',
-      'path fill': 'currentColor'
+      'path fill': 'currentColor',
     }}
->
-  <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
-</svg>
+  >
+    <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
+  </svg>
+);
 
 <Meta title="Configure your project" />
 
@@ -38,6 +40,7 @@ export const RightArrow = () => <svg
     # Configure your project
 
     Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
+
   </div>
   <div className="sb-section">
     <div className="sb-section-item">
@@ -87,6 +90,7 @@ export const RightArrow = () => <svg
     # Do more with Storybook
 
     Now that you know the basics, let's explore other parts of Storybook that will improve your experience. This list is just to get you started. You can customise Storybook in many ways to fit your needs.
+
   </div>
 
   <div className="sb-section">
@@ -217,6 +221,7 @@ export const RightArrow = () => <svg
           target="_blank"
         >Discover tutorials<RightArrow /></a>
     </div>
+
 </div>
 
 <style>

package/src/tools/color-picker/color-picker.component.tsx

@@ -9,7 +9,12 @@ export interface ColorPickerProps {
   sampleSize: number;
 }
 
-export const ColorPicker = ({ imageUrl, imageWidth, imageHeight, sampleSize = 41 }: ColorPickerProps): JSX.Element => {
+export const ColorPicker = ({
+  imageUrl,
+  imageWidth,
+  imageHeight,
+  sampleSize = 41,
+}: ColorPickerProps): JSX.Element => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   const [pixelColor, setPixelColor] = useState<RGBA>({ red: 0, green: 0, blue: 0, alpha: 1 });

package/src/tools/color-swatch/color-swatch.component.tsx

@@ -13,7 +13,14 @@ export interface ColorSwatchProps {
   height?: string | number;
 }
 
-export function ColorSwatch({ rgba, children, cardType = 'elevated', elevation, width, height }: ColorSwatchProps) {
+export function ColorSwatch({
+  rgba,
+  children,
+  cardType = 'elevated',
+  elevation,
+  width,
+  height,
+}: ColorSwatchProps) {
   const theme = useTheme();
 
   const { borderRadii } = theme.containers.card;

package/src/utils/storage-manager.ts

@@ -35,7 +35,10 @@ const parseCookie = (cookie: string, key: string): string | undefined => {
 
 // Usage
 // export const cookieStorageManager = createCookieStorageManager(STORAGE_KEY);
-export const createCookieStorageManager = (key: string, cookie?: string): StorageManager<string> => ({
+export const createCookieStorageManager = (
+  key: string,
+  cookie?: string
+): StorageManager<string> => ({
   type: 'cookie',
   get(init?): string | undefined {
     if (cookie) return parseCookie(cookie, key);

package/tsconfig.json

@@ -1,12 +1,13 @@
 {
   "extends": "@uni-design-system/tsconfig/base.json",
   "compilerOptions": {
+    "moduleResolution": "bundler",
     "jsx": "react-jsx",
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "noEmit": true,           // Ensures 'tsc' only checks types and doesn't write files
-    "outDir": "dist",         // If you DO emit, they go here
+    "noEmit": true, // Ensures 'tsc' only checks types and doesn't write files
+    "outDir": "dist", // If you DO emit, they go here
     "rootDir": "src"
   },
   "include": ["src"],
-  "exclude": ["dist", "node_modules"]
+  "exclude": ["dist", "node_modules", ".storybook"]
 }

package/vite.config.ts

@@ -6,14 +6,14 @@ import { resolve } from 'path';
 export default defineConfig({
   plugins: [
     react(),
-    dts({ insertTypesEntry: true }) // Automatically generates .d.ts files
+    dts({ insertTypesEntry: true }), // Automatically generates .d.ts files
   ],
   build: {
     lib: {
       entry: resolve(__dirname, 'src/index.ts'),
       name: 'UniReact',
       formats: ['es'], // Modern libraries typically only need ES modules
-      fileName: 'index'
+      fileName: 'index',
     },
     rollupOptions: {
       // CRITICAL: Do not bundle React or Core into your library
@@ -21,9 +21,9 @@ export default defineConfig({
       output: {
         globals: {
           react: 'React',
-          'react-dom': 'ReactDOM'
-        }
-      }
-    }
-  }
+          'react-dom': 'ReactDOM',
+        },
+      },
+    },
+  },
 });

package/vitest.shims.d.ts

@@ -1 +1 @@
-/// <reference types="@vitest/browser-playwright" />
+/// <reference types="@vitest/browser-playwright" />