@uni-design-system/uni-react 2.0.1 → 2.0.2

package/src/stories/button.css

@@ -1,30 +0,0 @@
-.storybook-button {
-  display: inline-block;
-  cursor: pointer;
-  border: 0;
-  border-radius: 3em;
-  font-weight: 700;
-  line-height: 1;
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-.storybook-button--primary {
-  background-color: #555ab9;
-  color: white;
-}
-.storybook-button--secondary {
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-  background-color: transparent;
-  color: #333;
-}
-.storybook-button--small {
-  padding: 10px 16px;
-  font-size: 12px;
-}
-.storybook-button--medium {
-  padding: 11px 20px;
-  font-size: 14px;
-}
-.storybook-button--large {
-  padding: 12px 24px;
-  font-size: 16px;
-}

package/src/stories/header.css

@@ -1,32 +0,0 @@
-.storybook-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  padding: 15px 20px;
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-
-.storybook-header svg {
-  display: inline-block;
-  vertical-align: top;
-}
-
-.storybook-header h1 {
-  display: inline-block;
-  vertical-align: top;
-  margin: 6px 0 6px 10px;
-  font-weight: 700;
-  font-size: 20px;
-  line-height: 1;
-}
-
-.storybook-header button + button {
-  margin-left: 10px;
-}
-
-.storybook-header .welcome {
-  margin-right: 10px;
-  color: #333;
-  font-size: 14px;
-}

package/src/stories/page.css

@@ -1,68 +0,0 @@
-.storybook-page {
-  margin: 0 auto;
-  padding: 48px 20px;
-  max-width: 600px;
-  color: #333;
-  font-size: 14px;
-  line-height: 24px;
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-
-.storybook-page h2 {
-  display: inline-block;
-  vertical-align: top;
-  margin: 0 0 4px;
-  font-weight: 700;
-  font-size: 32px;
-  line-height: 1;
-}
-
-.storybook-page p {
-  margin: 1em 0;
-}
-
-.storybook-page a {
-  color: inherit;
-}
-
-.storybook-page ul {
-  margin: 1em 0;
-  padding-left: 30px;
-}
-
-.storybook-page li {
-  margin-bottom: 8px;
-}
-
-.storybook-page .tip {
-  display: inline-block;
-  vertical-align: top;
-  margin-right: 10px;
-  border-radius: 1em;
-  background: #e7fdd8;
-  padding: 4px 12px;
-  color: #357a14;
-  font-weight: 700;
-  font-size: 11px;
-  line-height: 12px;
-}
-
-.storybook-page .tip-wrapper {
-  margin-top: 40px;
-  margin-bottom: 40px;
-  font-size: 13px;
-  line-height: 20px;
-}
-
-.storybook-page .tip-wrapper svg {
-  display: inline-block;
-  vertical-align: top;
-  margin-top: 3px;
-  margin-right: 4px;
-  width: 12px;
-  height: 12px;
-}
-
-.storybook-page .tip-wrapper svg path {
-  fill: #1ea7fd;
-}

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

@@ -1,151 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { ColorSwatch } from '../color-swatch/color-swatch.component';
-import { RGBA } from '@uni-design-system/uni-core';
-
-export interface ColorPickerProps {
-  imageUrl: string;
-  imageWidth: number;
-  imageHeight: number;
-  sampleSize: number;
-}
-
-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 });
-  const [averageColor, setAverageColor] = useState<RGBA>({ red: 0, green: 0, blue: 0, alpha: 1 });
-
-  let canvas: HTMLCanvasElement | null;
-  let ctx: CanvasRenderingContext2D | null;
-
-  let img: HTMLImageElement;
-
-  useEffect(() => {
-    canvas = canvasRef.current;
-
-    if (canvas) {
-      ctx = canvas.getContext('2d');
-      canvas.width = imageWidth;
-      canvas.style.width = `${imageWidth}px`;
-      canvas.height = imageHeight;
-      canvas.style.height = `${imageHeight}px`;
-    }
-
-    img = document.createElement('img');
-    img.crossOrigin = 'Anonymous';
-    img.src = imageUrl;
-
-    //once the image is loaded, add it to the canvas
-    img.onload = (ev) => {
-      ctx?.drawImage(img, 0, 0);
-      //call the context.getImageData method to get the array of [r,g,b,a] values
-
-      let imgDataObj = ctx?.getImageData(0, 0, canvas?.width || 0, canvas?.height || 0);
-
-      const data = imgDataObj?.data; //data prop is an array
-
-      if (!!data && !!canvas) {
-        canvas?.addEventListener('mousemove', (ev: MouseEvent) => {
-          getPixel(data, ev);
-        });
-      }
-
-      // canvas?.addEventListener('click', addBox);
-    };
-  }, []);
-
-  const getPixel = (data: Uint8ClampedArray, ev: MouseEvent) => {
-    if (!canvas) return;
-    //as the mouse moves around the image
-    // let canvas = ev.target;
-    let cols = canvas.width;
-
-    // let rows = canvas.height;
-    let { offsetX, offsetY } = ev;
-
-    //call the method to get the r,g,b,a values for current pixel
-    let c = getPixelColor(data, cols, offsetY, offsetX);
-
-    //save the string to use elsewhere
-    // pixel = clr;
-    setPixelColor(c);
-
-    //now get the average of the surrounding pixel colours
-    setAverageColor(getAverage(data, ev));
-  };
-
-  const getAverage = (data: Uint8ClampedArray, ev: { offsetX: any; offsetY: any }): RGBA => {
-    if (!ctx) return { red: 0, green: 0, blue: 0, alpha: 1 };
-    //create a 41px by 41px average colour square
-    //replace everything in the canvas with the original image
-    // let canvas = ev.target;
-    let cols = canvas?.width || 0;
-    let rows = canvas?.height || 0;
-
-    //remove the current contents of the canvas to draw the image and box again
-    ctx.clearRect(0, 0, cols, rows);
-
-    //add the image from memory
-    ctx.drawImage(img, 0, 0);
-    let { offsetX, offsetY } = ev;
-    const inset = Math.round(sampleSize / 2);
-    //inset by 20px as our workable range
-    offsetX = Math.min(offsetX, cols - inset);
-    offsetX = Math.max(inset, offsetX);
-    offsetY = Math.min(offsetY, rows - inset);
-    offsetY = Math.max(offsetY, inset);
-    //create a 41 x 41 pixel square for the average
-    let reds = 0; //total for all the red values in the 41x41 square
-    let greens = 0;
-    let blues = 0;
-    //for anything in the range (x-20, y-20) to (x+20, y+20)
-    for (let x = -1 * inset; x <= inset; x++) {
-      for (let y = -1 * inset; y <= inset; y++) {
-        let c = getPixelColor(data, cols, offsetY + y, offsetX + x);
-        reds += c.red;
-        greens += c.green;
-        blues += c.blue;
-      }
-    }
-    let nums = inset * inset * 4; //total number of pixels in the box
-    let red = Math.round(reds / nums);
-    let green = Math.round(greens / nums);
-    let blue = Math.round(blues / nums);
-
-    //now draw an overlaying square of that colour
-    //make the square twice as big as the sample area
-    ctx.fillStyle = `rgb(${red}, ${green}, ${blue})`;
-    ctx.strokeStyle = 'solid 2px #FFFFFF';
-    ctx.strokeRect(offsetX - inset, offsetY - inset, inset * 2, inset * 2);
-    ctx.fillRect(offsetX - inset, offsetY - inset, inset * 2, inset * 2);
-
-    return { red, green, blue, alpha: 1 };
-  };
-
-  const getPixelColor = (data: Uint8ClampedArray, cols: number, x: number, y: number): RGBA => {
-    let pixel = cols * x + y;
-    let arrayPos = pixel * 4;
-
-    return {
-      red: data[arrayPos],
-      green: data[arrayPos + 1],
-      blue: data[arrayPos + 2],
-      alpha: data[arrayPos + 3],
-    };
-  };
-
-  return (
-    <div style={{ padding: 16 }}>
-      <div style={{ marginBottom: 16 }}>
-        <canvas ref={canvasRef} />
-      </div>
-      <ColorSwatch rgba={pixelColor}>Pixel Color</ColorSwatch>
-      <ColorSwatch rgba={averageColor}>Average Color</ColorSwatch>
-    </div>
-  );
-};

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

@@ -1,21 +0,0 @@
-import React from 'react';
-import { ColorPicker, ColorPickerProps } from './color-picker.component';
-
-export default {
-  title: 'Tools/Color Picker',
-  component: ColorPicker,
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export const ColorPickerPlayground = (args: ColorPickerProps) => <ColorPicker {...args} />;
-
-const ColorPickerPlaygroundProps: Partial<ColorPickerProps> = {
-  imageUrl: 'promenade.webp',
-  imageHeight: 683,
-  imageWidth: 1024,
-  sampleSize: 40,
-};
-
-ColorPickerPlayground.args = ColorPickerPlaygroundProps;

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

@@ -1,68 +0,0 @@
-import React, { CSSProperties, ReactNode } from 'react';
-import { HSLAToString, RGB, RGBToHSL, ShadowElevation } from '@uni-design-system/uni-core';
-import { BoxShadow, Padding, Text, useTheme } from '../../core';
-
-export type CardType = 'elevated' | 'filled' | 'outlined';
-
-export interface ColorSwatchProps {
-  rgba: RGB;
-  children?: ReactNode;
-  cardType?: CardType;
-  elevation?: ShadowElevation;
-  width?: string | number;
-  height?: string | number;
-}
-
-export function ColorSwatch({
-  rgba,
-  children,
-  cardType = 'elevated',
-  elevation,
-  width,
-  height,
-}: ColorSwatchProps) {
-  const theme = useTheme();
-
-  const { borderRadii } = theme.containers.card;
-
-  const cardStyle: CSSProperties = {
-    height,
-    width,
-    display: 'inline-block',
-    backgroundColor: theme.colors['background'],
-    color: theme.colors['on-background'],
-    borderRadius: borderRadii?.sm,
-    ...Padding('xs', 'all'),
-    margin: 8,
-  };
-
-  if (cardType === 'elevated') {
-    cardStyle.boxShadow = BoxShadow(elevation || 'pressed');
-  }
-
-  const hsla = RGBToHSL(rgba);
-
-  const HSLColor = HSLAToString({
-    hue: Math.round(hsla.hue || 0),
-    saturation: Math.round(hsla.hue || 0),
-    lightness: Math.round(hsla.lightness || 0),
-  });
-  const swatchColor = `rgb(${rgba.red}, ${rgba.green}, ${rgba.blue})`;
-
-  const swatchStyle: CSSProperties = {
-    backgroundColor: swatchColor,
-    height: 200,
-    width: 200,
-    display: 'inline-block',
-    borderRadius: borderRadii?.xs,
-  };
-
-  return (
-    <div style={cardStyle}>
-      <div style={swatchStyle} />
-      <Text role="headline-medium">{children}</Text>
-      <Text role="title-small">{swatchColor}</Text>
-      <Text role="title-small">{HSLColor}</Text>
-    </div>
-  );
-}

package/src/utils/index.ts

@@ -1 +0,0 @@
-export * from './storage-manager';

package/src/utils/storage-manager.ts

@@ -1,51 +0,0 @@
-export interface StorageManager<T> {
-  type: 'cookie' | 'localStorage';
-  get(init?: T): T | undefined;
-  set(value: T): void;
-}
-
-// Usage
-// export const localStorageManager = createLocalStorageManager(STORAGE_KEY);
-export const createLocalStorageManager = <T>(key: string): StorageManager<T> => ({
-  type: 'localStorage',
-  get(init?) {
-    if (!globalThis?.document) return init;
-    let value: any;
-    try {
-      value = localStorage.getItem(key) || init;
-    } catch (e) {
-      // no op
-    }
-
-    return JSON.parse(value) || init;
-  },
-  set(value) {
-    try {
-      localStorage.setItem(key, JSON.stringify(value));
-    } catch (e) {
-      // no op
-    }
-  },
-});
-
-const parseCookie = (cookie: string, key: string): string | undefined => {
-  const match = cookie.match(new RegExp(`(^| )${key}=([^;]+)`));
-  return match?.[2];
-};
-
-// Usage
-// export const cookieStorageManager = createCookieStorageManager(STORAGE_KEY);
-export const createCookieStorageManager = (
-  key: string,
-  cookie?: string
-): StorageManager<string> => ({
-  type: 'cookie',
-  get(init?): string | undefined {
-    if (cookie) return parseCookie(cookie, key);
-    if (!globalThis?.document) return init;
-    return parseCookie(document.cookie, key) || init;
-  },
-  set(value) {
-    document.cookie = `${key}=${value}; max-age=31536000; path=/`;
-  },
-});

package/tsconfig.json

@@ -1,13 +0,0 @@
-{
-  "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
-    "rootDir": "src"
-  },
-  "include": ["src"],
-  "exclude": ["dist", "node_modules", ".storybook"]
-}

package/vite.config.ts

@@ -1,29 +0,0 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import dts from 'unplugin-dts/vite'; // Essential for shipping types
-import { resolve } from 'path';
-
-export default defineConfig({
-  plugins: [
-    react(),
-    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',
-    },
-    rollupOptions: {
-      // CRITICAL: Do not bundle React or Core into your library
-      external: ['react', 'react-dom', 'react/jsx-runtime', '@repo/core'],
-      output: {
-        globals: {
-          react: 'React',
-          'react-dom': 'ReactDOM',
-        },
-      },
-    },
-  },
-});

package/vitest.config.ts

@@ -1,36 +0,0 @@
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-import { defineConfig } from 'vitest/config';
-
-import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
-
-import { playwright } from '@vitest/browser-playwright';
-
-const dirname =
-  typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
-
-// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
-export default defineConfig({
-  test: {
-    projects: [
-      {
-        extends: true,
-        plugins: [
-          // The plugin will run tests for the stories defined in your Storybook config
-          // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
-          storybookTest({ configDir: path.join(dirname, '.storybook') }),
-        ],
-        test: {
-          name: 'storybook',
-          browser: {
-            enabled: true,
-            headless: true,
-            provider: playwright({}),
-            instances: [{ browser: 'chromium' }],
-          },
-        },
-      },
-    ],
-  },
-});

package/vitest.shims.d.ts

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