@remember-web/primitive 0.1.19 → 0.2.0

package/src/Common/Skeleton/index.tsx

@@ -0,0 +1,25 @@
+import type { ComponentPropsWithoutRef, ForwardedRef } from 'react';
+import { forwardRef } from 'react';
+import type { ConvertTransientProps } from '@remember-web/shared';
+
+import type { StyledSkeletonProps } from '@/Common/Skeleton/styles';
+import { StyledSkeleton } from '@/Common/Skeleton/styles';
+
+type SkeletonProps = Partial<ConvertTransientProps<StyledSkeletonProps>> &
+  ComponentPropsWithoutRef<'div'>;
+
+export const Skeleton = forwardRef(function (
+  { variant, width, height, animate = true, ...props }: SkeletonProps,
+  ref: ForwardedRef<HTMLDivElement | null>
+) {
+  return (
+    <StyledSkeleton
+      ref={ref}
+      $variant={variant}
+      $width={width}
+      $height={height}
+      $animate={animate}
+      {...props}
+    />
+  );
+});

package/src/Common/Skeleton/styles.ts

@@ -0,0 +1,46 @@
+import { contents200 } from '@remember-web/mixin';
+import styled, { css, keyframes } from 'styled-components';
+
+const shimmerAnimation = keyframes`
+  0% {
+    background-position: 100% 100%;
+  }
+  100% {
+    background-position: 0% 100%;
+  }
+`;
+
+export const skeletonShimmer = css`
+  --from-color: rgba(255, 255, 255, 0.75);
+  --to-color: rgba(255, 255, 255, 0.55);
+
+  background: linear-gradient(
+    90deg,
+    var(--from-color) 25%,
+    var(--to-color) 37%,
+    var(--from-color) 63%
+  );
+  background-size: 400% 100%;
+  animation: ${shimmerAnimation};
+  animation-duration: 1.8s;
+  animation-iteration-count: infinite;
+`;
+
+export interface StyledSkeletonProps {
+  $variant?: 'circle' | 'rounded';
+  $width?: number | string;
+  $height?: number | string;
+  $animate?: boolean;
+}
+
+export const StyledSkeleton = styled.div<StyledSkeletonProps>`
+  width: ${({ $width = '100%' }) =>
+    typeof $width === 'number' ? `${$width}px` : $width};
+  height: ${({ $height = '100%' }) =>
+    typeof $height === 'number' ? `${$height}px` : $height};
+  border-radius: ${({ $variant = 'rounded' }) => ($variant === 'rounded' ? '4px': '50%')};
+  ${({ $animate }) => ($animate ? skeletonShimmer : null)};
+  background-color: ${contents200};
+  position: relative;
+  overflow: hidden;
+`;

package/src/Common/Spinner/Spinner.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
 import { divider } from '@remember-web/mixin';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Spinner } from './index';
 

package/src/Common/Spinner/styles.ts

@@ -15,11 +15,13 @@ export const Container = styled.div<SpinnerStyleProps>(
     justify-content: center;
     width: fit-content;
     height: fit-content;
-    ${layout === 'full' &&
-    css`
+    ${
+      layout === 'full' &&
+      css`
       width: 100%;
       height: 100%;
-    `}
+    `
+    }
 
     ${$color && `color: ${$color};`};
 

package/src/Common/Spinner/types.ts

@@ -1,5 +1,5 @@
-import type { ConvertTransientProps } from '@remember-web/shared';
 import type { ColorVariable } from '@remember-web/mixin';
+import type { ConvertTransientProps } from '@remember-web/shared';
 
 export type SpinnerLayout = 'full' | 'block';
 export type SpinnerSize = 'small' | 'medium' | 'large' | number;

package/src/Common/Typography/Typography.stories.tsx

@@ -1,7 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { renderToStaticMarkup } from 'react-dom/server';
 import type { TypographyStyle } from '@remember-web/mixin';
 import { TYPOGRAPHY_STYLES } from '@remember-web/mixin';
+import type { Meta, StoryObj } from '@storybook/react';
+import { renderToStaticMarkup } from 'react-dom/server';
 
 import {
   Paper,
@@ -12,8 +12,7 @@ import {
   TableRow,
   TitleContainer,
 } from '@/stories/common.styles';
-
-import Typography from '.';
+import { Typography } from '.';
 
 type Story = StoryObj<typeof Typography>;
 
@@ -54,7 +53,7 @@ export const Overview: Story = {
                   </Typography>
                 </TableColumn>
                 <TableColumn align="center">{fontSize}px</TableColumn>
-                <TableColumn align="center">{lineHeight}px</TableColumn>
+                <TableColumn align="center">{lineHeight}</TableColumn>
                 <TableColumn align="center">{fontWeight}</TableColumn>
               </TableRow>
             );

package/src/Common/Typography/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { type TypographyStyle } from '@remember-web/mixin';
+import type { TypographyStyle } from '@remember-web/mixin';
 import type {
   CSSProperties,
   ComponentProps,
@@ -12,11 +12,11 @@ import type { PolymorphicComponent } from 'styled-components';
 
 import { StyledTypography } from './styles';
 
-const Typography = forwardRef(function (
-  { variant, color, children, ellipsis, maxWidth, ...props }: TypographyProps,
-  ref: ForwardedRef<HTMLDivElement | null>
-) {
-  return (
+export const Typography = forwardRef(
+  (
+    { variant, color, children, ellipsis, maxWidth, ...props }: TypographyProps,
+    ref: ForwardedRef<HTMLDivElement | null>
+  ) => (
     <StyledTypography
       ref={ref}
       $variant={variant}
@@ -27,8 +27,8 @@ const Typography = forwardRef(function (
     >
       {children}
     </StyledTypography>
-  );
-}) as PolymorphicComponent<'web', TypographyProps>;
+  )
+) as PolymorphicComponent<'web', TypographyProps>;
 
 type TypographyProps = {
   variant: TypographyStyle;
@@ -37,5 +37,3 @@ type TypographyProps = {
   ellipsis?: number;
   maxWidth?: CSSProperties['maxWidth'];
 } & ComponentProps<'div'>;
-
-export default Typography;

package/src/Common/Typography/styles.ts

@@ -1,12 +1,12 @@
 'use client';
 
-import styled, { css } from 'styled-components';
-import type { CSSProperties } from 'react';
 import {
+  type TypographyStyle,
   ellipsis,
   getTypographyStyles,
-  type TypographyStyle,
 } from '@remember-web/mixin';
+import type { CSSProperties } from 'react';
+import styled, { css } from 'styled-components';
 
 export const StyledTypography = styled.div<{
   $variant: TypographyStyle;

package/src/Common/index.ts

@@ -1,8 +1,9 @@
 export * from './Divider';
-export { default as Flex } from './Flex';
+export * from './Flex';
 export * from './Grid';
 export * from './Spinner';
-export { default as Typography } from './Typography';
+export * from './Skeleton';
+export * from './Typography';
 
 /** GNB에서 의존하기 때문에 export */
 export { StyledTypography } from './Typography/styles';

package/src/Control/BaseToggle/ToggleIcon/index.tsx

@@ -15,9 +15,9 @@ import {
 } from '@remember-web/icon';
 import {
   SVG_SIZES,
-  isSvgRegularSize,
   type SvgSizeProps,
   type WithSvgSizeComponentType,
+  isSvgRegularSize,
 } from '@remember-web/icon/util';
 import styled from 'styled-components';
 

package/src/Control/BaseToggle/styles.ts

@@ -1,7 +1,7 @@
 'use client';
 
-import styled from 'styled-components';
 import { primary100 } from '@remember-web/mixin';
+import styled from 'styled-components';
 
 export const ToggleRoot = styled.label<{ $gap?: number }>`
   width: fit-content;

package/src/Control/Checkbox.stories.tsx

@@ -25,7 +25,6 @@ export const Default: Story = {
     indeterminate: false,
   },
   render: ({ ...args }) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [{ checked }, updateArgs] = useArgs();
     return (
       <Checkbox
@@ -51,7 +50,6 @@ export const Check: Story = {
     indeterminate: { table: { disable: true } },
   },
   render: ({ ...args }) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [{ checked }, updateArgs] = useArgs();
     return (
       <Checkbox

package/src/Control/Checkbox.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { forwardRef, type ForwardRefRenderFunction } from 'react';
+import { type ForwardRefRenderFunction, forwardRef } from 'react';
 
 import type { BaseToggleProps } from './BaseToggle/types';
 import { CircleBaseToggle } from './Toggle';

package/src/Control/Radio.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Radio } from './Radio';
 import { useState } from 'react';
+import { Radio } from './Radio';
 
 type Story = StoryObj<typeof Radio>;
 

package/src/Control/Radio.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { forwardRef, type ForwardRefRenderFunction } from 'react';
+import { type ForwardRefRenderFunction, forwardRef } from 'react';
 
 import type { BaseToggleProps } from './BaseToggle/types';
 import { CircleBaseToggle } from './Toggle';

package/src/Control/Switch/Switch.stories.tsx

@@ -16,7 +16,6 @@ export const Default: Story = {
     checked: false,
   },
   render: ({ onCheckedChange, ...args }) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [{ checked }, updateArgs] = useArgs();
     return (
       <Switch

package/src/Control/Switch/index.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { SwitchRoot, SwitchThumb, Label } from './styles';
+import { Label, SwitchRoot, SwitchThumb } from './styles';
 import type { SwitchProps } from './types';
 
 export function Switch({ size = 'small', ...props }: SwitchProps) {

package/src/Control/Switch/styles.ts

@@ -1,8 +1,8 @@
 'use client';
 
 import * as SwitchPrimitive from '@radix-ui/react-switch';
-import styled, { css } from 'styled-components';
 import { contents300, contents999, secondary100 } from '@remember-web/mixin';
+import styled, { css } from 'styled-components';
 
 import type { SwitchProps } from './types';
 

package/src/Control/Toggle.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
 import { useArgs } from '@storybook/client-api';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Toggle } from './Toggle';
 
@@ -24,7 +24,6 @@ export const Default: Story = {
     labelPosition: 'right',
   },
   render: (args) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [{ checked }, updateArgs] = useArgs();
 
     return (

package/src/Control/Toggle.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { forwardRef, type ForwardRefRenderFunction } from 'react';
+import { type ForwardRefRenderFunction, forwardRef } from 'react';
 import styled from 'styled-components';
 
 import { BaseToggle } from './BaseToggle';

package/src/Floating/DropdownMenu/DropdownMenuSection.tsx

@@ -1,9 +1,9 @@
-import type { ReactNode } from 'react';
 import type { GetStyledComponentProps } from '@remember-web/shared';
+import type { ReactNode } from 'react';
 
 import {
-  StyledDropdownMenuSectionTitle,
   StyledDropdownMenuSection,
+  StyledDropdownMenuSectionTitle,
 } from '@/Floating/DropdownMenu/styles';
 
 type DropdownMenuSectionProps<As> = GetStyledComponentProps<

package/src/Floating/DropdownMenu/index.tsx

@@ -1,10 +1,10 @@
 import * as RadixPopover from '@radix-ui/react-popover';
 
-import type { PopoverContentProps, PopoverProps } from '@/Floating/Popover';
 import {
   StyledDropdownMenuContent,
   StyledDropdownMenuItem,
 } from '@/Floating/DropdownMenu/styles';
+import type { PopoverContentProps, PopoverProps } from '@/Floating/Popover';
 import Popover from '@/Floating/Popover';
 
 import { DropdownMenuSection } from './DropdownMenuSection';

package/src/Floating/DropdownMenu/styles.tsx

@@ -1,4 +1,3 @@
-import styled, { css } from 'styled-components';
 import {
   bg200,
   contents000,
@@ -7,6 +6,7 @@ import {
   getTypographyStyles,
 } from '@remember-web/mixin';
 import type { ConvertTransientProps } from '@remember-web/shared';
+import styled, { css } from 'styled-components';
 
 import { StyledPopoverContent } from '../Popover/styles';
 

package/src/Floating/Popover/Popover.stories.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable no-console */
 import type { Meta, StoryObj } from '@storybook/react';
 
-import Popover from '@/Floating/Popover/index';
 import { Flex } from '@/Common';
+import Popover from '@/Floating/Popover/index';
 
 type Story = StoryObj<typeof Popover>;
 

package/src/Floating/Popover/styles.ts

@@ -1,6 +1,6 @@
-import styled, { keyframes } from 'styled-components';
 import { PopoverContent } from '@radix-ui/react-popover';
 import { bg100, contents000 } from '@remember-web/mixin';
+import styled, { keyframes } from 'styled-components';
 
 export const showFadeIn = keyframes`
     from {

package/src/Floating/Tooltip/Tooltip.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
 import { IconAlarm } from '@remember-web/icon';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from '@/Buttons';
 import { Flex } from '@/Common';

package/src/Floating/Tooltip/index.tsx

@@ -1,18 +1,18 @@
 'use client';
 
 import * as RadixTooltip from '@radix-ui/react-tooltip';
-import { useState, type PropsWithChildren } from 'react';
-import { isSSR } from '@remember-web/shared';
 import { IconCloseS } from '@remember-web/icon';
 import { contents000, contents999 } from '@remember-web/mixin';
+import { isSSR } from '@remember-web/shared';
+import { type PropsWithChildren, useState } from 'react';
 
 import { CloseButton, TooltipContent, TooltipTriggerWrapper } from './styles';
 import {
-  isLargeSizeProps,
-  isStaticTypeProps,
   type TooltipProps,
   type TooltipSize,
   type TooltipType,
+  isLargeSizeProps,
+  isStaticTypeProps,
 } from './types';
 
 const hoverable = isSSR()

package/src/Floating/Tooltip/styles.ts

@@ -1,13 +1,13 @@
 'use client';
 
 import * as RadixTooltip from '@radix-ui/react-tooltip';
-import styled, { css, keyframes } from 'styled-components';
 import type { TypographyStyle } from '@remember-web/mixin';
 import {
   contents000,
   contents999,
   getTypographyStyles,
 } from '@remember-web/mixin';
+import styled, { css, keyframes } from 'styled-components';
 
 import type { TooltipSize, TooltipTextAlign } from './types';
 

package/src/Inputs/Select/DesignedSelect/index.tsx

@@ -1,23 +1,23 @@
 'use client';
 
+import { IconArrow2Down, IconArrow2Up } from '@remember-web/icon';
 import type { KeyboardEvent, ReactNode, Ref, RefCallback } from 'react';
 import {
   Children,
   forwardRef,
   isValidElement,
   useCallback,
+  useId,
   useRef,
   useState,
-  useId,
 } from 'react';
-import { IconArrow2Down, IconArrow2Up } from '@remember-web/icon';
 
 import useMouseEventAway from '@/hooks/useMouseEventAway';
 
-import { focusSibling } from '../utils';
 import { OptionHolder } from '../Option';
 import { SelectContainer } from '../styles';
 import type { OptionElementType, SelectValue } from '../types';
+import { focusSibling } from '../utils';
 import { DEFAULT_MAX_HEIGHT_PX, OPTION_ITEM_HEIGHT_PX } from './const';
 import {
   SelectDownIcon,

package/src/Inputs/Select/DesignedSelect/styles.ts

@@ -1,6 +1,5 @@
 'use client';
 
-import styled, { css } from 'styled-components';
 import {
   bg100,
   bg200,
@@ -10,6 +9,7 @@ import {
   contents300,
   ellipsis,
 } from '@remember-web/mixin';
+import styled, { css } from 'styled-components';
 
 import { SelectContainer } from '../styles';
 import type { ExpandedType } from './types';
@@ -33,7 +33,7 @@ export const StyledSelect = styled.div<{
         border-radius: 4px 4px 0 0;
         border-bottom-color: transparent;
       `,
-    }[expandedDirection ?? 'none'])};
+    })[expandedDirection ?? 'none']};
 
   padding: 10px 36px 10px 12px;
   transition: border-color 0.2s, background-color 0.2s;

package/src/Inputs/Select/NativeSelect/index.tsx

@@ -1,12 +1,12 @@
 'use client';
 
+import { IconArrow2Down } from '@remember-web/icon';
 import type { ForwardRefRenderFunction } from 'react';
 import { forwardRef } from 'react';
-import { IconArrow2Down } from '@remember-web/icon';
 
+import { SelectContainer } from '../styles';
 import { SelectDownIcon, StyledSelect } from './styles';
 import type { NativeSelectInternalProps } from './types';
-import { SelectContainer } from '../styles';
 
 const NativeSelect: ForwardRefRenderFunction<
   HTMLSelectElement,

package/src/Inputs/Select/NativeSelect/styles.ts

@@ -1,6 +1,5 @@
 'use client';
 
-import styled, { css } from 'styled-components';
 import {
   bg200,
   bg300,
@@ -9,6 +8,7 @@ import {
   contents300,
   getTypographyStyles,
 } from '@remember-web/mixin';
+import styled, { css } from 'styled-components';
 
 export const StyledSelect = styled.select<{
   $width?: number | string;

package/src/Inputs/Select/NativeSelect/types.ts

@@ -1,7 +1,7 @@
 import type { ReactElement, SelectHTMLAttributes } from 'react';
 
-import type { NativeOption } from './Option';
 import type { OptionProps } from '../types';
+import type { NativeOption } from './Option';
 
 type NativeOptionElement = ReactElement<
   OptionProps<string>,

package/src/Inputs/Select/Option/index.tsx

@@ -2,7 +2,6 @@
 
 import type { OptionProps, SelectValue } from '../types';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const OptionHolder = <T extends SelectValue>(props: OptionProps<T>) =>
   null;
 

package/src/Inputs/Select/Select.stories.tsx

@@ -25,7 +25,6 @@ const meta = {
 export const Native: Story = {
   render: (props) => {
     const { ...args } = props as NativeSelectProps<string>;
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [value, setValue] = useState<string>();
     return (
       <Select
@@ -57,7 +56,6 @@ export const Native: Story = {
 export const Custom: Story = {
   render: (props) => {
     const { ...args } = props as DesignedSelectProps<string>;
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const [value, setValue] = useState<string>();
     return (
       <Select

package/src/Inputs/Select/styles.ts

@@ -1,6 +1,5 @@
 'use client';
 
-import styled from 'styled-components';
 import {
   bg200,
   contents000,
@@ -9,6 +8,7 @@ import {
   getTypographyStyles,
   roleRed,
 } from '@remember-web/mixin';
+import styled from 'styled-components';
 
 export const SelectContainer = styled.div<{ $width?: number | string }>`
   ${getTypographyStyles('Body1_M')}

package/src/Inputs/TextInput/index.tsx

@@ -1,8 +1,8 @@
 'use client';
 
+import { IconHidden, IconVisible } from '@remember-web/icon';
 import type { ForwardRefRenderFunction } from 'react';
 import { forwardRef, useId, useState } from 'react';
-import { IconHidden, IconVisible } from '@remember-web/icon';
 
 import {
   InputContainer,

package/src/Inputs/TextInput/styles.ts

@@ -1,17 +1,17 @@
 'use client';
 
-import styled, { css } from 'styled-components';
 import type { ColorVariable } from '@remember-web/mixin';
 import {
   bg200,
   contents000,
   contents200,
   contents300,
-  roleRed,
   ellipsis,
   getTypographyStyles,
+  roleRed,
 } from '@remember-web/mixin';
 import { formatUnit } from '@remember-web/shared';
+import styled, { css } from 'styled-components';
 
 export const InputWrapper = styled.div<{ $width?: string | number }>`
   ${({ $width }) =>

package/src/Inputs/TextInput/types.ts

@@ -1,5 +1,5 @@
-import type { InputHTMLAttributes, ReactNode } from 'react';
 import type { ColorVariable } from '@remember-web/mixin';
+import type { InputHTMLAttributes, ReactNode } from 'react';
 
 type BaseInputProps = Omit<
   InputHTMLAttributes<HTMLInputElement>,

package/src/Logos/RememberServiceLogo/index.tsx

@@ -1,7 +1,7 @@
 import type { GetStyledComponentProps } from '@remember-web/shared';
 
-import type { RememberLogoProps } from '@/Logos/types';
 import { Divider } from '@/Common';
+import type { RememberLogoProps } from '@/Logos/types';
 
 import { RememberLogo } from '../RememberLogo';
 import { StyledServiceLogoRoot } from './style';

package/src/Logos/RememberServiceLogo/style.ts

@@ -1,5 +1,5 @@
-import styled from 'styled-components';
 import { contents000, getTypographyStyles } from '@remember-web/mixin';
+import styled from 'styled-components';
 
 export const StyledServiceLogoRoot = styled.a<{ $color?: string }>`
   box-sizing: border-box;

package/src/Modals/Dialog/Dialog.stories.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable no-console */
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Flex } from '@/Common';
 import { Button } from '@/Buttons';
+import { Flex } from '@/Common';
 
 import { Dialog } from '.';
 

package/src/Modals/Dialog/index.tsx

@@ -1,10 +1,10 @@
 'use client';
 
 import type { DialogContentProps, DialogProps } from '@radix-ui/react-dialog';
-import { Root, Trigger, Close, Portal } from '@radix-ui/react-dialog';
+import { Close, Portal, Root, Trigger } from '@radix-ui/react-dialog';
 import { IconClose, PictogramAlert, PictogramCheck } from '@remember-web/icon';
 
-import Flex from '@/Common/Flex';
+import { Flex } from '@/Common/Flex';
 
 import {
   DialogContent,