feat(core): start working on color slice implementation

edited the types to allow Slices with different values, added the tsx for Color slice (without functionality yet) wip #15
VLK-STUDIO · Jun 12, 2023 · 09374c3 · 09374c3
1 parent 6338943
commit 09374c3
Show file tree

Hide file tree

Showing 27 changed files with 488 additions and 89 deletions.
diff --git a/widget-src/components/BorderWidths/BorderWidthSlice.tsx b/widget-src/components/BorderWidths/BorderWidthSlice.tsx
@@ -1,5 +1,5 @@
 import { BoxPropertyName } from "../../constants";
-import { Slice, SliceItem, Store } from "../../types";
+import { BoxSliceItem, Slice, Store } from "../../types";
 import { deleteSlice } from "../../utils/deleteSlice";
 import { editSliceName } from "../../utils/editSliceName";
 import { editSliceValue } from "../../utils/editSliceValue";
@@ -8,7 +8,7 @@ import { DeleteButton } from "../Buttons/DeleteButton";
 const { widget } = figma;
 const { Frame, Line, Input, AutoLayout } = widget;
 
-interface Props extends SliceItem {
+interface Props extends BoxSliceItem {
   store: Store;
 }
 

diff --git a/widget-src/components/BorderWidths/utils.ts b/widget-src/components/BorderWidths/utils.ts
@@ -1,12 +1,12 @@
 import { BoxPropertyName, ComponentNames } from "../../constants";
-import { Slice, Store } from "../../types";
+import { BoxStore, Slice } from "../../types";
 import { createBoxInstances } from "../../utils/createBoxInstances";
 import { getBoxVariantsFromState } from "../../utils/getBoxVariantsFromState";
 import { getVariantCombinations } from "../../utils/getVariantCombinations";
 import { restoreBoxComponent } from "../../utils/restoreBoxComponent";
 import { updateRefIds } from "../../utils/updateRefIds";
 
-export const addBorderWidthSlice = (store: Store) => {
+export const addBorderWidthSlice = (store: BoxStore) => {
   const { [Slice.Radii]: radiiMap, [Slice.BorderWidths]: borderWidthsMap } =
     store;
   const boxComponent = figma.root.findOne(

diff --git a/widget-src/components/Colors/ColorSlice.tsx b/widget-src/components/Colors/ColorSlice.tsx
@@ -0,0 +1,179 @@
+import { ColorSliceItem, Store } from "../../types";
+import { DeleteButton } from "../Buttons/DeleteButton";
+
+const { widget } = figma;
+const { Frame, Ellipse, Input, AutoLayout, Text } = widget;
+
+interface Props extends ColorSliceItem {
+  store: Store;
+  isHex?: boolean;
+}
+
+const rgbaToBaseOne = (rgba: RGBA) => ({
+  r: rgba.r / 255,
+  g: rgba.g / 255,
+  b: rgba.b / 255,
+  a: rgba.a,
+});
+
+export const ColorSlice = ({ isHex, store, ...slice }: Props) => {
+  const hexValue = "000";
+  return (
+    <AutoLayout
+      name="Color Slice"
+      strokeWidth={0}
+      overflow="visible"
+      direction="horizontal"
+      verticalAlignItems="center"
+      spacing={8}
+      key={slice.id}
+    >
+      <Frame width={41} height={41}>
+        <Frame name="Frame3" overflow="visible" width={41} height={41}>
+          <Ellipse width={41} height={41} fill={rgbaToBaseOne(slice.rgba)} />
+        </Frame>
+        <DeleteButton onClick={() => {}} />
+      </Frame>
+      <AutoLayout direction="vertical" spacing={2}>
+        <Input
+          name={slice.name}
+          x={48}
+          y={2}
+          fill="#000"
+          fontFamily="Inter"
+          fontWeight={700}
+          value={slice.name}
+          width={90}
+          inputBehavior="truncate"
+          inputFrameProps={{ direction: "horizontal" }}
+          onTextEditEnd={() => {}}
+        />
+        {isHex ? (
+          <AutoLayout
+            name="Group11"
+            strokeWidth={0}
+            overflow="visible"
+            width={50}
+            height={12}
+          >
+            <Text
+              name="#"
+              fill="#000"
+              fontFamily="Inter"
+              fontSize={10}
+              fontWeight={500}
+            >
+              #
+            </Text>
+            <Input
+              width="fill-parent"
+              name="Hex color value"
+              fill="#000"
+              fontFamily="Inter"
+              fontSize={10}
+              fontWeight={500}
+              strokeWidth={0.632}
+              value={hexValue}
+              onTextEditEnd={() => {}}
+            />
+          </AutoLayout>
+        ) : (
+          <AutoLayout direction="vertical" width={50} height={50} spacing={2}>
+            <Frame width="fill-parent" height="fill-parent">
+              <Text
+                name="#"
+                fill="#000"
+                fontFamily="Inter"
+                fontSize={10}
+                fontWeight={500}
+              >
+                R
+              </Text>
+              <Input
+                x={10}
+                width={25}
+                name="Red color value"
+                fill="#000"
+                fontFamily="Inter"
+                fontSize={10}
+                fontWeight={500}
+                strokeWidth={0.632}
+                value={`${slice.rgba?.r}`}
+                onTextEditEnd={() => {}}
+              />
+            </Frame>
+            <Frame width="fill-parent" height="fill-parent">
+              <Text
+                name="#"
+                fill="#000"
+                fontFamily="Inter"
+                fontSize={10}
+                fontWeight={500}
+              >
+                G
+              </Text>
+              <Input
+                x={10}
+                width={25}
+                name="Green color value"
+                fill="#000"
+                fontFamily="Inter"
+                fontSize={10}
+                fontWeight={500}
+                strokeWidth={0.632}
+                value={`${slice.rgba?.g}`}
+                onTextEditEnd={() => {}}
+              />
+            </Frame>
+            <Frame width="fill-parent" height="fill-parent">
+              <Text
+                name="#"
+                fill="#000"
+                fontFamily="Inter"
+                fontSize={10}
+                fontWeight={500}
+              >
+                B
+              </Text>
+              <Input
+                x={10}
+                width={25}
+                name="Blue color value"
+                fill="#000"
+                fontFamily="Inter"
+                fontSize={10}
+                fontWeight={500}
+                strokeWidth={0.632}
+                value={`${slice.rgba?.b}`}
+                onTextEditEnd={() => {}}
+              />
+            </Frame>
+            <Frame width="fill-parent" height="fill-parent">
+              <Text
+                name="#"
+                fill="#000"
+                fontFamily="Inter"
+                fontSize={10}
+                fontWeight={500}
+              >
+                A
+              </Text>
+              <Input
+                x={10}
+                width={25}
+                name="Alpha color value"
+                fill="#000"
+                fontFamily="Inter"
+                fontSize={10}
+                fontWeight={500}
+                strokeWidth={0.632}
+                value={`${slice.rgba?.a}`}
+                onTextEditEnd={() => {}}
+              />
+            </Frame>
+          </AutoLayout>
+        )}
+      </AutoLayout>
+    </AutoLayout>
+  );
+};
diff --git a/widget-src/components/Colors/ColorSlices.tsx b/widget-src/components/Colors/ColorSlices.tsx
@@ -0,0 +1,60 @@
+import { Slice, Store } from "../../types";
+import { AddButton } from "../Buttons/AddButton";
+import { ColorSlice } from "./ColorSlice";
+import { HexToggle } from "./HexToggle";
+const { widget } = figma;
+const { Text, AutoLayout, useSyncedState } = widget;
+
+type Props = {
+  store: Store;
+};
+
+export const ColorSlices = ({ store }: Props) => {
+  const [isHex, setIsHex] = useSyncedState("isHex", true);
+  return (
+    <AutoLayout
+      name="Color frame"
+      strokeWidth={0}
+      overflow="visible"
+      direction="vertical"
+      spacing={30}
+    >
+      <AutoLayout direction="vertical" width="fill-parent" spacing={10}>
+        <AutoLayout
+          verticalAlignItems="center"
+          spacing={10}
+          name="Group 10"
+          strokeWidth={0}
+          overflow="visible"
+          width={102}
+          height={35}
+        >
+          <Text
+            name="Colors"
+            fill="#000"
+            fontFamily="Inter"
+            fontSize={28.63157844543457}
+            fontWeight={500}
+            strokeWidth={1.789}
+          >
+            Colors
+          </Text>
+          <AddButton onClick={() => {}} />
+        </AutoLayout>
+        <HexToggle isHex={isHex} setIsHex={setIsHex} />
+      </AutoLayout>
+      <AutoLayout
+        name="Frame 2"
+        y={65}
+        overflow="visible"
+        spacing={40}
+        direction="horizontal"
+        verticalAlignItems="center"
+      >
+        {store[Slice.Colors].values().map((color) => (
+          <ColorSlice isHex={isHex} {...color} store={store} />
+        ))}
+      </AutoLayout>
+    </AutoLayout>
+  );
+};
diff --git a/widget-src/components/Colors/HexToggle.tsx b/widget-src/components/Colors/HexToggle.tsx
@@ -0,0 +1,91 @@
+const { widget } = figma;
+const { Text, Frame, Rectangle } = widget;
+
+type Props = {
+  isHex: boolean;
+  setIsHex: (newValue: boolean | ((currValue: boolean) => boolean)) => void;
+};
+
+export const HexToggle = ({ isHex, setIsHex }: Props) => {
+  const dark = { bg: "#000", txt: "#FFF" };
+  const light = { bg: "#DDD", txt: "#000" };
+  return (
+    <Frame
+      name="HexToggle"
+      strokeWidth={0}
+      overflow="visible"
+      width={108}
+      height={20}
+    >
+      <Frame
+        name="HexButton"
+        strokeWidth={0}
+        overflow="visible"
+        width={54}
+        height={20}
+        onClick={() => setIsHex(true)}
+      >
+        <Rectangle
+          name="Rectangle 20"
+          stroke="#000"
+          fill={isHex ? dark.bg : light.bg}
+          cornerRadius={{
+            topLeft: 3,
+            topRight: 0,
+            bottomRight: 0,
+            bottomLeft: 3,
+          }}
+          width={54}
+          height={20}
+        />
+        <Text
+          name="HEX"
+          x={16}
+          y={4}
+          fill={isHex ? dark.txt : light.txt}
+          horizontalAlignText="center"
+          fontFamily="Inter"
+          fontSize={10}
+          fontWeight={500}
+        >
+          HEX
+        </Text>
+      </Frame>
+      <Frame
+        name="RgbaButton"
+        x={54}
+        strokeWidth={0}
+        overflow="visible"
+        width={54}
+        height={20}
+        onClick={() => setIsHex(false)}
+      >
+        <Rectangle
+          name="Rectangle 21"
+          fill={isHex ? light.bg : dark.bg}
+          stroke="#000"
+          cornerRadius={{
+            topLeft: 0,
+            topRight: 3,
+            bottomRight: 3,
+            bottomLeft: 0,
+          }}
+          width={54}
+          height={20}
+        />
+        <Text
+          name="RGBA"
+          x={13}
+          y={4}
+          fill={isHex ? light.txt : dark.txt}
+          horizontalAlignText="center"
+          fontFamily="Inter"
+          fontSize={10}
+          fontWeight={500}
+        >
+          RGBA
+        </Text>
+      </Frame>
+    </Frame>
+  );
+};
diff --git a/widget-src/components/Radii/RadiiSlice.tsx b/widget-src/components/Radii/RadiiSlice.tsx
@@ -1,5 +1,5 @@
 import { BoxPropertyName } from "../../constants";
-import { Slice, SliceItem, Store } from "../../types";
+import { BoxSliceItem, Slice, Store } from "../../types";
 import { deleteSlice } from "../../utils/deleteSlice";
 import { editSliceName } from "../../utils/editSliceName";
 import { editSliceValue } from "../../utils/editSliceValue";
@@ -8,7 +8,7 @@ import { DeleteButton } from "../Buttons/DeleteButton";
 const { widget } = figma;
 const { Frame, Rectangle, Input, AutoLayout } = widget;
 
-interface Props extends SliceItem {
+interface Props extends BoxSliceItem {
   store: Store;
 }
 

diff --git a/widget-src/components/Radii/utils.test.ts b/widget-src/components/Radii/utils.test.ts
@@ -25,6 +25,7 @@ describe("addRadiiSlice", () => {
     addRadiiSlice({
       [Slice.Radii]: mockRadiiMap,
       [Slice.BorderWidths]: mockBorderWidthsMap,
+      [Slice.Colors]: mockSyncedMap(),
     });
 
     expect(mockRadiiMap.set).toBeCalledWith(expect.any(String), {
@@ -85,6 +86,7 @@ describe("addRadiiSlice", () => {
     addRadiiSlice({
       [Slice.Radii]: mockRadiiMap,
       [Slice.BorderWidths]: mockBorderWidthsMap,
+      [Slice.Colors]: mockSyncedMap(),
     });
 
     expect(mockAppendChild).not.toBeCalled();