@uniai-fe/ui-legacy 0.1.1

package/src/chip/components/Default.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { clsx } from "clsx";
+import StyledChipBase from "../styles/styled/base";
+
+/**
+ * Chip
+ * @component
+ * @param {object} props
+ * @param {React.ReactNode} props.contents
+ */
+export default function ChipDefault({
+  className,
+  contents,
+  radius,
+  height,
+  padding,
+}: {
+  contents: React.ReactNode;
+} & Partial<{
+  className: string;
+  radius: number;
+  height: number | string;
+  padding: number | string;
+}>) {
+  return (
+    <StyledChipBase.container
+      className={clsx("chip", className)}
+      $radius={radius}
+      $height={height}
+      $padding={padding}
+    >
+      {["string", "number"].includes(typeof contents) ? (
+        <span className="chip-span">{contents}</span>
+      ) : (
+        contents
+      )}
+    </StyledChipBase.container>
+  );
+}

package/src/chip/index.tsx

@@ -0,0 +1,5 @@
+import ChipDefault from "./components/Default";
+
+const Chip = { Default: ChipDefault };
+
+export default Chip;

package/src/chip/styled.tsx

@@ -0,0 +1,7 @@
+import StyledChipBase from "./styles/styled/base";
+
+const StyledChip = {
+  ...StyledChipBase,
+};
+
+export default StyledChip;

package/src/chip/styles/scss/variables.scss

@@ -0,0 +1,15 @@
+:root {
+  --chip-height: 2.8rem;
+
+  --chip-padding-vertical: 0px;
+  --chip-padding-horizontal: 1rem;
+
+  --chip-border-width: 1px;
+  --chip-border-color: transparent;
+  --chip-border-radius: 0.4rem;
+
+  --chip-text-size: 1.6rem;
+  --chip-text-color: var(--color_70);
+
+  --chip-bg-color: var(--color_0);
+}

package/src/chip/styles/styled/base.ts

@@ -0,0 +1,41 @@
+"use client";
+
+import { styled } from "styled-components";
+import { styleBaseSize } from "@uniai-fe/util-functions";
+
+type StyledChipProps = Partial<{
+  $radius: number;
+  $height: number | string;
+  $padding: number | string;
+}>;
+const container = styled.div<StyledChipProps>`
+  width: fit-content;
+  height: ${({ $height }) =>
+    styleBaseSize("rem", $height, "var(--chip-height)")};
+  padding: var(--chip-padding-vertical)
+    ${({ $padding }) =>
+      styleBaseSize("rem", $padding, "var(--chip-padding-horizontal)")};
+
+  border: var(--chip-border-width) solid var(--chip-border-color);
+  border-radius: ${({ $radius }) =>
+    styleBaseSize("rem", $radius, "var(--chip-border-radius)")};
+
+  background-color: var(--chip-bg-color);
+
+  display: flex;
+  align-items: center;
+
+  span,
+  .chip-span {
+    font-size: var(--chip-text-size);
+    color: var(--chip-text-color);
+    font-weight: 500;
+    line-height: 1em;
+  }
+`;
+
+const StyledChipBase = {
+  container,
+};
+
+export default StyledChipBase;

package/src/components.tsx

@@ -0,0 +1,42 @@
+// 컴포넌트 모듈
+import Input from "./form-field/input";
+import Select from "./form-field/select";
+import Button from "./button";
+import Chip from "./chip";
+import Dropdown from "./dropdown";
+import Scrollbar from "./scrollbar";
+import Tooltip from "./tooltip";
+import Frame from "./frame";
+import Icon from "./icon";
+import Alternate from "./alternate";
+import Delta from "./delta";
+import Dot from "./dot";
+import Chart from "./chart";
+import Table from "./table";
+import Form from "./form";
+import Modal from "./modal";
+import TabMenu from "./tab-menu";
+import Weather from "./weather/components";
+import TextEditor from "./text-editor";
+
+export {
+  Input,
+  Select,
+  Button,
+  Chip,
+  Dropdown,
+  Scrollbar,
+  Tooltip,
+  Frame,
+  Icon,
+  Alternate,
+  Delta,
+  Dot,
+  Chart,
+  Table,
+  Modal,
+  Form,
+  TabMenu,
+  Weather,
+  TextEditor,
+};

package/src/delta/components/Rounded.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useMemo } from "react";
+import { clsx } from "clsx";
+
+import Icon from "../../icon";
+import StyledDelta from "../styles/styled/delta";
+import type {
+  DeltaColorOptions,
+  DeltaDataOptions,
+  DeltaSizeOptions,
+  IconDeltaOptionalProps,
+} from "../../types";
+import { lengthFormat } from "@uniai-fe/util-functions";
+
+export default function DeltaRounded({
+  className,
+  value,
+  digit,
+  height,
+  margin,
+  textSize,
+  colorUp,
+  colorDown,
+  bgUp,
+  bgDown,
+  ...iconProps
+}: {
+  value: number | string | null;
+} & IconDeltaOptionalProps &
+  Partial<DeltaSizeOptions & DeltaColorOptions & DeltaDataOptions>) {
+  const v = useMemo((): number | null => {
+    if (value === null) return null;
+    const res = Number(String(value).replace(/,/g, ""));
+    return isNaN(res) ? null : res;
+  }, [value]);
+
+  const direction = useMemo(() => {
+    if (v === null) return "";
+    return v < 0 ? "down" : v > 0 ? "up" : "";
+  }, [v]);
+
+  return (
+    <StyledDelta.rounded
+      className={clsx("delta delta-rounded", direction, className)}
+      $height={height}
+      $textSize={textSize}
+      $colorUp={colorUp}
+      $colorDown={colorDown}
+      $bgUp={bgUp}
+      $bgDown={bgDown}
+      $margin={margin}
+    >
+      {value !== null && (
+        <Icon.Delta
+          edge="rounded"
+          {...iconProps}
+          shape="triangle"
+          direction={direction}
+        />
+      )}
+      <span>
+        {typeof value === "string"
+          ? value
+          : lengthFormat(
+              typeof value === "number" ? Math.abs(value) : null,
+              digit || 0,
+            )}
+      </span>
+    </StyledDelta.rounded>
+  );
+}

package/src/delta/components/Square.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { useMemo } from "react";
+import { clsx } from "clsx";
+
+import Icon from "../../icon";
+import StyledDelta from "../styles/styled/delta";
+import type {
+  DeltaColorOptions,
+  DeltaDataOptions,
+  DeltaDisplayOptions,
+  DeltaSizeOptions,
+  IconDeltaOptionalProps,
+} from "../../types";
+import { lengthFormat } from "@uniai-fe/util-functions";
+
+export default function DeltaSquare({
+  className,
+  value,
+  digit,
+  height,
+  margin,
+  textSize,
+  colorUp,
+  colorDown,
+  bgUp,
+  bgDown,
+  noIcon,
+  sign,
+  ...iconProps
+}: {
+  value: number | null;
+} & IconDeltaOptionalProps &
+  Partial<
+    DeltaSizeOptions &
+      DeltaColorOptions &
+      DeltaDisplayOptions &
+      DeltaDataOptions
+  >) {
+  const direction = useMemo(() => {
+    if (value === null) return "";
+    return value < 0 ? "down" : value > 0 ? "up" : "";
+  }, [value]);
+
+  return (
+    <StyledDelta.square
+      className={clsx("delta delta-square", direction, className)}
+      $height={height}
+      $textSize={textSize}
+      $colorUp={colorUp}
+      $colorDown={colorDown}
+      $bgUp={bgUp}
+      $bgDown={bgDown}
+      $margin={margin}
+    >
+      {sign && value !== null && value !== 0 && (
+        <span className="delta-sign">
+          {value > 0 ? "+" : value < 0 ? "-" : ""}
+        </span>
+      )}
+      <span title={String(value)}>
+        {lengthFormat(
+          typeof value === "number" && value < 0 ? Math.abs(value) : value,
+          digit,
+        )}
+      </span>
+      {!noIcon && (isNaN(Number(value)) || value !== null) && value !== 0 && (
+        <Icon.Delta {...iconProps} shape="arrow" direction={direction} />
+      )}
+    </StyledDelta.square>
+  );
+}

package/src/delta/index.tsx

@@ -0,0 +1,6 @@
+import DeltaRounded from "./components/Rounded";
+import DeltaSquare from "./components/Square";
+
+const Delta = { Rounded: DeltaRounded, Square: DeltaSquare };
+
+export default Delta;

package/src/delta/styles/styled/delta.ts

@@ -0,0 +1,126 @@
+"use client";
+
+import { styled, css } from "styled-components";
+import { styleBaseSize } from "@uniai-fe/util-functions";
+
+type StyledDeltaProps = Partial<{
+  $height: number | string;
+  $margin: number | string;
+  $textSize: number | string;
+  $colorUp: string;
+  $colorDown: string;
+  $bgUp: string;
+  $bgDown: string;
+}>;
+const container = styled.div<StyledDeltaProps>`
+  display: flex;
+  align-items: center;
+
+  width: fit-content;
+  padding: 0 0.8rem;
+  ${({ $margin }) =>
+    typeof $margin !== "undefined" &&
+    css`
+      margin-left: ${styleBaseSize("rem", $margin)};
+    `};
+
+  background-color: var(--color_10);
+
+  figcaption {
+    margin-left: 0.2rem;
+  }
+
+  &.up,
+  &.increase {
+    ${({ $bgUp }) =>
+      $bgUp &&
+      css`
+        background-color: ${$bgUp};
+      `}
+  }
+  &.down,
+  &.decrease {
+    ${({ $bgDown }) =>
+      $bgDown &&
+      css`
+        background-color: ${$bgDown};
+      `}
+  }
+`;
+
+const rounded = styled(container)`
+  height: ${({ $height }) => styleBaseSize("rem", $height, 24)};
+  border-radius: ${({ $height }) =>
+    styleBaseSize(
+      "rem",
+      typeof $height === "number" ? $height / 2 : $height,
+      12,
+    )};
+
+  span {
+    margin-left: 0.4rem;
+    font-size: ${({ $textSize }) => styleBaseSize("rem", $textSize, 14)};
+    font-weight: 600;
+    &:first-child {
+      margin-left: 0px;
+    }
+  }
+  &.up,
+  &.increase {
+    color: ${({ $colorUp }) => $colorUp || "var(--color-red-500)"};
+    .icon-delta {
+      path {
+        fill: ${({ $colorUp }) => $colorUp || "var(--color-red-500)"};
+      }
+    }
+  }
+  &.down,
+  &.decrease {
+    color: ${({ $colorDown }) => $colorDown || "var(--color-light-blue-600)"};
+    .icon-delta {
+      path {
+        fill: ${({ $colorDown }) =>
+          $colorDown || "var(--color-light-blue-600)"};
+      }
+    }
+  }
+`;
+
+const square = styled(container)`
+  height: ${({ $height }) => styleBaseSize("rem", $height, 22)};
+  border-radius: 0.4rem;
+
+  span {
+    font-size: ${({ $textSize }) => styleBaseSize("rem", $textSize, 14)};
+  }
+  &.up,
+  &.increase {
+    color: ${({ $colorUp }) => $colorUp || "var(--color-light-blue-600)"};
+    border: 1px solid
+      ${({ $colorUp }) => $colorUp || "var(--color-light-blue-600)"};
+    .icon-delta {
+      path {
+        stroke: ${({ $colorUp }) => $colorUp || "var(--color-light-blue-600)"};
+      }
+    }
+  }
+  &.down,
+  &.decrease {
+    color: ${({ $colorDown }) => $colorDown || "var(--color-red-500)"};
+    border: 1px solid
+      ${({ $colorDown }) => $colorDown || "var(--color-red-500)"};
+    .icon-delta {
+      path {
+        stroke: ${({ $colorDown }) => $colorDown || "var(--color-red-500)"};
+      }
+    }
+  }
+`;
+
+const StyledDelta = {
+  container,
+  rounded,
+  square,
+};
+
+export default StyledDelta;

package/src/dot/components/Location.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import StyledDotLocation from "../styles/styled/location";
+
+export default function DotLocation({
+  largeSize,
+  coreSize,
+  bgColor,
+  bgOpacity,
+  coreColor,
+  lineColor,
+  lineWidth,
+  lineHeight,
+  lineTop,
+  lineLeft,
+  lineRight,
+  lineBottom,
+}: Partial<{
+  largeSize: number | string;
+  coreSize: number | string;
+  bgColor: string;
+  bgOpacity: number;
+  coreColor: string;
+  lineColor: string;
+  lineWidth: number | string;
+  lineHeight: number | string;
+  lineTop: number | string;
+  lineLeft: number | string;
+  lineRight: number | string;
+  lineBottom: number | string;
+}>) {
+  return (
+    <StyledDotLocation
+      className="dot-location"
+      $largeSize={largeSize}
+      $coreSize={coreSize}
+      $bgColor={bgColor}
+      $bgOpacity={bgOpacity}
+      $coreColor={coreColor}
+      $lineColor={lineColor}
+      $lineWidth={lineWidth}
+      $lineHeight={lineHeight}
+      $lineTop={lineTop}
+      $lineLeft={lineLeft}
+      $lineRight={lineRight}
+      $lineBottom={lineBottom}
+    >
+      <figure>
+        {(lineWidth || lineHeight) && <div className="dot-location-line"></div>}
+        <div className="dot-location-dot large-dot"></div>
+        <div className="dot-location-dot core-dot"></div>
+      </figure>
+    </StyledDotLocation>
+  );
+}

package/src/dot/index.tsx

@@ -0,0 +1,7 @@
+import DotLocation from "./components/Location";
+
+const Dot = {
+  Location: DotLocation,
+};
+
+export default Dot;

package/src/dot/styles/styled/location.ts

@@ -0,0 +1,78 @@
+"use client";
+
+import { styled, css } from "styled-components";
+import { styleBaseSize } from "@uniai-fe/util-functions";
+
+type StyledDotProps = Partial<{
+  $largeSize: number | string;
+  $coreSize: number | string;
+  $bgColor: string;
+  $bgOpacity: number;
+  $coreColor: string;
+  $lineColor: string;
+  $lineWidth: number | string;
+  $lineHeight: number | string;
+  $lineTop: number | string;
+  $lineLeft: number | string;
+  $lineRight: number | string;
+  $lineBottom: number | string;
+}>;
+
+const StyledDotLocation = styled.div<StyledDotProps>`
+  width: ${({ $largeSize }) => styleBaseSize("rem", $largeSize, 14)};
+  height: ${({ $largeSize }) => styleBaseSize("rem", $largeSize, 14)};
+
+  figure {
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+  .dot-location-line {
+    width: ${({ $lineWidth }) => styleBaseSize("rem", $lineWidth, 0)};
+    height: ${({ $lineHeight }) => styleBaseSize("rem", $lineHeight, 0)};
+    ${({ $lineWidth, $lineColor }) =>
+      $lineWidth &&
+      css`
+        border-top: 1px dashed ${$lineColor || "var(--color_30)"};
+      `}
+    ${({ $lineHeight, $lineColor }) =>
+      $lineHeight &&
+      css`
+        border-left: 1px dashed ${$lineColor || "var(--color_30)"};
+      `}
+      position:absolute;
+    ${({ $lineTop }) => $lineTop && `top:${styleBaseSize("rem", $lineTop)};`}
+    ${({ $lineLeft }) =>
+      $lineLeft && `left:${styleBaseSize("rem", $lineLeft)};`}
+    ${({ $lineRight }) =>
+      $lineRight && `right:${styleBaseSize("rem", $lineRight)};`}
+    ${({ $lineBottom }) =>
+      $lineBottom && `bottom:${styleBaseSize("rem", $lineBottom)};`}
+    transform:translate(${({ $lineHeight }) =>
+      $lineHeight ? "-1px" : "0"}, ${({ $lineWidth }) =>
+      $lineWidth ? "-1px" : "0"});
+  }
+  .large-dot {
+    width: 100%;
+    height: 100%;
+    border-radius: ${({ $largeSize }) =>
+      typeof $largeSize === "number" ? `${$largeSize / 2}px` : "7px"};
+    background-color: ${({ $bgColor }) => $bgColor || `var(--color-blue-600)`};
+    opacity: ${({ $bgOpacity }) => ($bgOpacity ? $bgOpacity : "0.36")};
+  }
+  .core-dot {
+    width: ${({ $coreSize }) => styleBaseSize("rem", $coreSize, 8)};
+    height: ${({ $coreSize }) => styleBaseSize("rem", $coreSize, 8)};
+    border-radius: ${({ $coreSize }) =>
+      typeof $coreSize === "number" ? `${$coreSize / 2}px` : "4px"};
+    border: 2px solid
+      ${({ $coreColor }) => $coreColor || "var(--color-blue-600)"};
+    background-color: #fff;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+`;
+
+export default StyledDotLocation;

package/src/dropdown/components/Container.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { clsx } from "clsx";
+import StyledDropdown from "../styled";
+
+export default function DropdownContainer({
+  className,
+  isOpen,
+  gap,
+  horizontal,
+  disabled,
+  children,
+}: {
+  isOpen: boolean;
+  children: React.ReactNode;
+} & Partial<{
+  className: string;
+  gap: number;
+  horizontal: "left" | "right";
+  disabled: boolean;
+}>) {
+  return (
+    isOpen &&
+    !disabled && (
+      <StyledDropdown.container
+        className={clsx("dropdown-container", className, { open: isOpen })}
+        $horizontal={horizontal}
+        $gap={gap}
+      >
+        <StyledDropdown.wrapper className="dropdown-wrapper">
+          {children}
+        </StyledDropdown.wrapper>
+      </StyledDropdown.container>
+    )
+  );
+}

package/src/dropdown/components/ParentContainer.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { forwardRef } from "react";
+import StyledDropdown from "../styled";
+import { clsx } from "clsx";
+
+const DropdownParentContainer = forwardRef(
+  (
+    {
+      className,
+      children,
+      width,
+    }: {
+      children: React.ReactNode;
+    } & Partial<{
+      className: string;
+      width: string | number;
+    }>,
+    ref: React.ForwardedRef<HTMLDivElement | null>,
+  ) => {
+    return (
+      <StyledDropdown.parent
+        className={clsx("dropdown-parent", className)}
+        ref={ref}
+        $width={width}
+      >
+        {children}
+      </StyledDropdown.parent>
+    );
+  },
+);
+export default DropdownParentContainer;

package/src/dropdown/dropdown.scss

@@ -0,0 +1 @@
+@use "./styles/scss/variables.scss";

package/src/dropdown/index.tsx

@@ -0,0 +1,9 @@
+import DropdownContainer from "./components/Container";
+import DropdownParentContainer from "./components/ParentContainer";
+
+const Dropdown = {
+  ParentContainer: DropdownParentContainer,
+  Container: DropdownContainer,
+};
+
+export default Dropdown;

package/src/dropdown/styled.tsx

@@ -0,0 +1,3 @@
+import StyledDropdown from "./styles/styled-components/dropdown";
+
+export default StyledDropdown;

package/src/dropdown/styles/scss/variables.scss

@@ -0,0 +1,24 @@
+:root {
+  // --dropdown-margin-top: 0px;
+  // --dropdown-padding-top: 0px;
+
+  --dropdown-padding-vertical: 0.3rem;
+  --dropdown-padding-horizontal: 0px;
+
+  --dropdown-border-width: 1px;
+  --dropdown-border-color: var(--color_30);
+  --dropdown-border-top-radius: 0px;
+  --dropdown-border-bottom-radius: 0.4rem;
+
+  --dropdown-bg-default: var(--color_0);
+  --dropdown-button-active: var(--color_10);
+
+  --dropdown-button-width: 100%;
+  --dropdown-button-height: 100%;
+  --dropdown-button-padding-vertical: 0px;
+  --dropdown-button-padding-horizontal: 1.5rem;
+
+  --dropdown-shadow: none;
+
+  --dropdown-scroll-max-height: 20rem;
+}