@noya-app/noya-designsystem 0.0.2

package/src/components/FillPreviewBackground.tsx

@@ -0,0 +1,132 @@
+import { Sketch } from "@noya-app/noya-file-format";
+// import { useSketchImage } from 'noya-renderer';
+import React, { memo, useMemo } from "react";
+import styled, { useTheme } from "styled-components";
+import { useImageData } from "../contexts/ImageDataContext";
+import { useObjectURL } from "../hooks/useObjectURL";
+import { getGradientBackground } from "../utils/getGradientBackground";
+import { sketchColorToRgbaString } from "../utils/sketchColor";
+import { SketchPattern } from "../utils/sketchPattern";
+
+const dotsHorizontalSvg = (fillColor: string) => `
+  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='${fillColor}'>
+    <path d='M3.625 7.5C3.625 8.12132 3.12132 8.625 2.5 8.625C1.87868 8.625 1.375 8.12132 1.375 7.5C1.375 6.87868 1.87868 6.375 2.5 6.375C3.12132 6.375 3.625 6.87868 3.625 7.5ZM8.625 7.5C8.625 8.12132 8.12132 8.625 7.5 8.625C6.87868 8.625 6.375 8.12132 6.375 7.5C6.375 6.87868 6.87868 6.375 7.5 6.375C8.12132 6.375 8.625 6.87868 8.625 7.5ZM12.5 8.625C13.1213 8.625 13.625 8.12132 13.625 7.5C13.625 6.87868 13.1213 6.375 12.5 6.375C11.8787 6.375 11.375 6.87868 11.375 7.5C11.375 8.12132 11.8787 8.625 12.5 8.625Z'></path>
+  </svg>
+`;
+
+const Background = styled.span<{ background: string }>(({ background }) => ({
+  background,
+  position: "absolute",
+  inset: 0,
+}));
+
+const HorizontalDotsBackground = memo(function HorizontalDotsBackground() {
+  const { inputBackground, placeholderDots } = useTheme().colors;
+
+  const background = useMemo(
+    () =>
+      [
+        `center url("data:image/svg+xml;utf8,${dotsHorizontalSvg(
+          placeholderDots
+        )}") no-repeat`,
+        inputBackground,
+      ].join(","),
+    [inputBackground, placeholderDots]
+  );
+
+  return <Background background={background} />;
+});
+
+function getPatternSizeAndPosition(
+  fillType: Sketch.PatternFillType,
+  tileScale: number
+) {
+  switch (fillType) {
+    case Sketch.PatternFillType.Fit:
+      return "center / contain";
+    case Sketch.PatternFillType.Tile:
+      return `top left / ${tileScale * 100}%`;
+    case Sketch.PatternFillType.Fill:
+      return "center / cover";
+    case Sketch.PatternFillType.Stretch:
+      return "center / 100% 100%";
+  }
+}
+
+export const PatternPreviewBackground = memo(function PatternPreviewBackground({
+  fillType,
+  tileScale,
+  imageRef,
+}: {
+  fillType: Sketch.PatternFillType;
+  tileScale: number;
+  imageRef: string;
+}) {
+  const image = useImageData(imageRef);
+
+  const url = useObjectURL(image);
+
+  const size = getPatternSizeAndPosition(fillType, tileScale);
+
+  const background = useMemo(
+    () =>
+      [
+        size,
+        `url(${url})`,
+        fillType === Sketch.PatternFillType.Tile ? "repeat" : "no-repeat",
+      ].join(" "),
+    [fillType, size, url]
+  );
+
+  return <Background background={background} />;
+});
+
+const ColorPreviewBackground = memo(function ColorPreviewBackground({
+  color,
+}: {
+  color: Sketch.Color;
+}) {
+  const background = useMemo(() => sketchColorToRgbaString(color), [color]);
+
+  return <Background background={background} />;
+});
+
+const GradientPreviewBackground = memo(function GradientPreviewBackground({
+  gradient,
+}: {
+  gradient: Sketch.Gradient;
+}) {
+  const background = useMemo(
+    () => getGradientBackground(gradient.stops, gradient.gradientType, 180),
+    [gradient.gradientType, gradient.stops]
+  );
+
+  return <Background background={background} />;
+});
+
+interface Props {
+  value?: Sketch.Color | Sketch.Gradient | SketchPattern;
+}
+
+export const FillPreviewBackground = memo(function FillPreviewBackground({
+  value,
+}: Props) {
+  if (!value) return <HorizontalDotsBackground />;
+
+  switch (value._class) {
+    case "color":
+      return <ColorPreviewBackground color={value} />;
+    case "gradient":
+      return <GradientPreviewBackground gradient={value} />;
+    case "pattern":
+      if (!value.image) return null;
+
+      return (
+        <PatternPreviewBackground
+          fillType={value.patternFillType}
+          tileScale={value.patternTileScale}
+          imageRef={value.image._ref}
+        />
+      );
+  }
+});

package/src/components/GradientPicker.tsx

@@ -0,0 +1,88 @@
+import {
+  Alpha,
+  ColorModel,
+  Gradient,
+  Hue,
+  ColorPicker as NoyaColorPicker,
+  RgbaColor,
+  Saturation,
+  equalColorObjects,
+  hsvaToRgba,
+  rgbaToHsva,
+} from '@noya-app/noya-colorpicker';
+import type { Sketch } from '@noya-app/noya-file-format';
+import React, { memo, useCallback, useMemo } from 'react';
+import { Spacer } from '../components/Spacer';
+import { rgbaToSketchColor, sketchColorToRgba } from '../utils/sketchColor';
+
+interface Props {
+  value: Sketch.GradientStop[];
+  selectedStop: number;
+  onChangeColor: (color: Sketch.Color) => void;
+  onChangePosition: (position: number) => void;
+  onAdd: (color: Sketch.Color, position: number) => void;
+  onDelete: () => void;
+  onSelectStop: (index: number) => void;
+}
+
+export const GradientPicker = memo(function GradientPicker({
+  value,
+  selectedStop,
+  onChangeColor,
+  onChangePosition,
+  onAdd,
+  onDelete,
+  onSelectStop,
+}: Props) {
+  const colorModel: ColorModel<RgbaColor> = useMemo(
+    () => ({
+      defaultColor: { r: 0, g: 0, b: 0, a: 1 },
+      toHsva: rgbaToHsva,
+      fromHsva: hsvaToRgba,
+      equal: equalColorObjects,
+    }),
+    [],
+  );
+
+  const rgbaColor = useMemo(
+    () => sketchColorToRgba(value[selectedStop].color),
+    [value, selectedStop],
+  );
+
+  const handleChangeColor = useCallback(
+    (value: RgbaColor) => {
+      onChangeColor(rgbaToSketchColor(value));
+    },
+    [onChangeColor],
+  );
+
+  const handleAddGradientStop = useCallback(
+    (value: RgbaColor, position: number) => {
+      onAdd(rgbaToSketchColor(value), position);
+    },
+    [onAdd],
+  );
+
+  return (
+    <NoyaColorPicker
+      onChange={handleChangeColor}
+      colorModel={colorModel}
+      color={rgbaColor}
+    >
+      <Gradient
+        gradients={value}
+        selectedStop={selectedStop}
+        onSelectStop={onSelectStop}
+        onChangePosition={onChangePosition}
+        onAdd={handleAddGradientStop}
+        onDelete={onDelete}
+      />
+      <Spacer.Vertical size={10} />
+      <Saturation />
+      <Spacer.Vertical size={12} />
+      <Hue />
+      <Spacer.Vertical size={5} />
+      <Alpha />
+    </NoyaColorPicker>
+  );
+});

package/src/components/Grid.tsx

@@ -0,0 +1,54 @@
+import styled from 'styled-components';
+import { Colors } from '../theme';
+
+export type GridProps = {
+  columns?: string;
+  rows?: string;
+  alignItems?: 'start' | 'center' | 'end';
+  justifyItems?: 'start' | 'center' | 'end';
+  placeItems?: 'start' | 'center' | 'end';
+  width?: number | string;
+  minWidth?: number | string;
+  maxWidth?: number | string;
+  height?: number | string;
+  minHeight?: number | string;
+  maxHeight?: number | string;
+  padding?: number | string;
+  paddingX?: number | string;
+  paddingXStart?: number | string;
+  paddingXEnd?: number | string;
+  paddingY?: number | string;
+  paddingYStart?: number | string;
+  paddingYEnd?: number | string;
+  gap?: number | string;
+  gapX?: number | string;
+  gapY?: number | string;
+  background?: keyof Colors;
+};
+
+const Grid = styled.div<GridProps>((props) => ({
+  display: 'grid',
+  gridTemplateColumns: props.columns,
+  gridTemplateRows: props.rows,
+  alignItems: props.alignItems,
+  justifyItems: props.justifyItems,
+  width: props.width,
+  minWidth: props.minWidth ?? 0,
+  maxWidth: props.maxWidth,
+  height: props.height,
+  minHeight: props.minHeight ?? 0,
+  maxHeight: props.maxHeight,
+  padding: props.padding,
+  paddingInline: props.paddingX,
+  paddingInlineStart: props.paddingXStart,
+  paddingInlineEnd: props.paddingXEnd,
+  paddingBlock: props.paddingY,
+  paddingBlockStart: props.paddingYStart,
+  paddingBlockEnd: props.paddingYEnd,
+  gap: props.gap,
+  gapRow: props.gapX,
+  gapColumn: props.gapY,
+  background: props.background,
+}));
+
+export default Grid;