Clean up styled-components-related legacy (#1962)

<!--
  How to write a good PR title:
- Follow [the Conventional Commits
specification](https://www.conventionalcommits.org/en/v1.0.0/).
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

## Self Checklist

- [x] I wrote a PR title in **English** and added an appropriate
**label** to the PR.
- [x] I wrote the commit message in **English** and to follow [**the
Conventional Commits
specification**](https://www.conventionalcommits.org/en/v1.0.0/).
- [x] I [added the
**changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
about the changes that needed to be released. (or didn't have to)
- [x] I wrote or updated **documentation** related to the changes. (or
didn't have to)
- [x] I wrote or updated **tests** related to the changes. (or didn't
have to)
- [x] I tested the changes in various browsers. (or didn't have to)
  - Windows: Chrome, Edge, (Optional) Firefox
  - macOS: Chrome, Edge, Safari, (Optional) Firefox

## Related Issue
<!-- Please link to issue if one exists -->

Fixes #1961

## Summary
<!-- Please brief explanation of the changes made -->

Clean up styled-components-related legacy

## Details
<!-- Please elaborate description of the changes -->

styled-components 관련 레거시를 제거합니다!

- peer deps에서 styled-components 제거
- styled-components 관련 패키지/설정 제거
- **`src/foundation` 제거**
- **`BezierProvider` 제거**
- **`css` 를 사용하는 믹스인 제거**
  - `gap`, `ellipsis`
  - Input 관련 믹스인
- `interpolation` 타입 제거
- 위 변경에 맞춰 스토리북의 foundation 사용처 마이그레이션

몇 가지 누락된 개선 사항들을 적용합니다.

- `Spinner`, `Tooltip` 에 `AlphaBezierCompnentProps` 적용 (drop `as`)
- `.storybook` 디렉터리 하위 파일에도 eslint이 적용되도록 변경 및 위 변경사항 마이그레이션

### Breaking change? (Yes/No)
<!-- If Yes, please describe the impact and migration path for users -->

Yes

.changeset/wild-walls-suffer.md

@@ -0,0 +1,58 @@
+---
+"@channel.io/bezier-react": major
+---
+
+**Breaking Changes: Deprecate support for `styled-components` related modules**
+
+- No longer support legacy foundation modules. Use the `useToken` hook and components to replace it
+  - `LightFoundation` and `DarkFoundation`
+  - `Spacing`
+  - `ev1`, `ev2`, `ev3`, `ev4`, `ev5` and `ev6`
+  - `createThemes`, `Theme`, `SemanticNames`, `LightTheme` and `DarkTheme`
+  - `TransitionDuration` and `Transition`
+  - `Border`
+  - `Typography`, `TypoAbsoluteNumber`, `LineHeightAbsoluteNumber` and `TypographyType`
+  - `absoluteCenter`, `disableAutoMinimum`, `hideScrollbars` and `ellipsis`
+  - `ThemeVarsAdditionalType` and `ThemeVars`
+  - `GlobalStyle`
+  - `Foundation`
+  - `GlobalStyleProp`
+  - `createGlobalStyle`, `styled`, `css`, `FoundationProvider`, `useFoundation`, `keyframes`, `StyleSheetManager` and `ServerStyleSheet`
+- No longer support `BezierProvider`. Use the `AppProvider` instead
+- No longer support `gap` and `touchableHover` mixins. Please implement and use your own
+
+```tsx
+function gap(spacing: number): InjectedInterpolation {
+  return css`
+    gap: ${spacing}px;
+
+    @supports not(gap: ${spacing}px) {
+      margin-top: ${-spacing}px;
+      margin-left: ${-spacing}px;
+
+      > * {
+        margin-top: ${spacing}px;
+        margin-left: ${spacing}px;
+      }
+    }
+  `
+}
+
+function touchableHover(interpolation: InjectedInterpolation): InjectedInterpolation {
+  return css`
+    @media (hover: hover) {
+      &:hover {
+        ${interpolation}
+      }
+    }
+
+    @media (hover: none) {
+      &:active {
+        ${interpolation}
+      }
+    }
+  `
+}
+```
+
+- No longer support `inputTextStyle`, `inputPlaceholderStyle`, `inputWrapperStyle`, `focusedInputWrapperStyle` and `erroredInputWrapperStyle`. Please migrate using `@channel.io/bezier-codemod`'s `v2-interpolation-to-css-variable` transformer.

packages/bezier-react/.eslintignore

@@ -2,3 +2,4 @@ node_modules
 dist
 coverage
 __mocks__
+!.storybook

packages/bezier-react/.eslintrc.js

@@ -30,23 +30,13 @@ module.exports = {
             group: 'external',
             position: 'before',
           },
-          {
-            pattern: '~/src/foundation',
-            group: 'internal',
-            position: 'before',
-          },
-          {
-            pattern: '~/src/foundation/**',
-            group: 'internal',
-            position: 'before',
-          },
           {
             pattern: '~/src/components/**',
             group: 'internal',
             position: 'after',
           },
           {
-            pattern: './**/*.+(styled|scss)',
+            pattern: './**/*.scss',
             group: 'sibling',
             position: 'after',
           },

packages/bezier-react/.storybook/WithProvider.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+
+import type { Preview } from '@storybook/react'
+
+import { SmoothCornersFeature } from '~/src/features'
+import { AppProvider } from '~/src/providers/AppProvider'
+import { InvertedThemeProvider } from '~/src/providers/ThemeProvider'
+
+import { Text } from '~/src/components/Text'
+
+import styles from './preview.module.scss'
+
+const features = [SmoothCornersFeature]
+
+export const WithProvider: NonNullable<Preview['decorators']>[number] = (Story, context) => (
+  <AppProvider
+    themeName="light"
+    features={features}
+  >
+    <div className={styles.Wrapper}>
+      <div className={styles.Theme}>
+        <div className={styles.Story}>
+          { Story(context) }
+        </div>
+        <Text bold color="bgtxt-absolute-black-light">
+          Light Theme
+        </Text>
+      </div>
+
+      <InvertedThemeProvider>
+        <div className={styles.Theme}>
+          <div className={styles.Story}>
+            { Story(context) }
+          </div>
+          <Text bold color="bgtxt-absolute-black-light">
+            Dark Theme
+          </Text>
+        </div>
+      </InvertedThemeProvider>
+    </div>
+  </AppProvider>
+)

packages/bezier-react/.storybook/main.ts

@@ -1,24 +1,27 @@
-import { dirname, join } from "path"
+import {
+  dirname,
+  join,
+} from 'path'
 
-import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'
 import { type StorybookConfig } from '@storybook/react-webpack5'
+import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'
 
 function getAbsolutePath(value) {
-  return dirname(require.resolve(join(value, "package.json")))
+  return dirname(require.resolve(join(value, 'package.json')))
 }
 
-const config: StorybookConfig = {
+export default {
   stories: [
     '../src/**/*.stories.(tsx|mdx)',
   ],
 
   addons: [
-    getAbsolutePath("@storybook/addon-controls"),
-    getAbsolutePath("@storybook/addon-actions"),
-    getAbsolutePath("@storybook/addon-a11y"),
-    getAbsolutePath("@storybook/addon-toolbars"),
-    getAbsolutePath("@storybook/addon-docs"),
-    getAbsolutePath("@storybook/addon-backgrounds"),
+    getAbsolutePath('@storybook/addon-controls'),
+    getAbsolutePath('@storybook/addon-actions'),
+    getAbsolutePath('@storybook/addon-a11y'),
+    getAbsolutePath('@storybook/addon-toolbars'),
+    getAbsolutePath('@storybook/addon-docs'),
+    getAbsolutePath('@storybook/addon-backgrounds'),
     {
       name: '@storybook/addon-styling',
       options: {
@@ -49,40 +52,38 @@ const config: StorybookConfig = {
       ...config.resolve,
       // Apply tsconfig alias path
       plugins: [
-      ...(config?.resolve?.plugins ?? []),
-      new TsconfigPathsPlugin({}),
+        ...(config?.resolve?.plugins ?? []),
+        new TsconfigPathsPlugin({}),
       ],
       extensions: [
         ...(config.resolve?.extensions ?? []),
         '.ts',
         '.tsx',
-      ]
+      ],
     }
 
     config.module = {
       ...config.module,
       rules: [
         ...(config.module?.rules ?? []), {
-        test: /\.(ts|tsx)$/,
-        loader: require.resolve('babel-loader'),
-        options: {
-          presets: [['react-app', { flow: false, typescript: true }]],
-          }
-        }
-      ]
+          test: /\.(ts|tsx)$/,
+          loader: require.resolve('babel-loader'),
+          options: {
+            presets: [['react-app', { flow: false, typescript: true }]],
+          },
+        },
+      ],
     }
 
     return config
   },
 
   framework: {
     name: '@storybook/react-webpack5',
-    options: {}
+    options: {},
   },
 
   docs: {
-    autodocs: true
-  }
-}
-
-export default config
+    autodocs: true,
+  },
+} as StorybookConfig

packages/bezier-react/.storybook/preview.module.scss

@@ -0,0 +1,27 @@
+.Wrapper {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 20px;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+}
+
+.Theme {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  align-items: center;
+  justify-content: center;
+
+  padding: 20px;
+}
+
+.Story {
+  height: 100%;
+  padding: 40px;
+  background-color: var(--bg-white-normal);
+  border-radius: 20px;
+}

packages/bezier-react/.storybook/preview.ts

@@ -1,11 +1,11 @@
-import type { Preview } from "@storybook/react"
+import type { Preview } from '@storybook/react'
 
-import '~/src/styles/index.scss'
+import { WithProvider } from './WithProvider'
 
-import { WithFoundationProvider } from './WithFoundationProvider'
+import '~/src/styles/index.scss'
 
 const preview: Preview = {
-  decorators: [WithFoundationProvider],
+  decorators: [WithProvider],
 }
 
 export default preview

packages/bezier-react/babel.config.js

@@ -9,11 +9,4 @@ module.exports = {
     ['@babel/preset-react', { useBuiltIns: true }],
     ['@babel/preset-typescript', { isTSX: true, allExtensions: true }],
   ],
-  plugins: [
-    ['babel-plugin-styled-components', {
-      minify: true,
-      pure: true,
-      topLevelImportPaths: ['~/src/foundation'],
-    }],
-  ],
 }

packages/bezier-react/jest.setup.ts

@@ -1,5 +1,4 @@
 import '@testing-library/jest-dom'
-import 'jest-styled-components'
 
 Object.defineProperty(window, 'requestAnimationFrame', {
   writable: true,