diff --git a/.storybook/preview.js b/.storybook/preview.js index 212055c7..d02b4987 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -1,4 +1,3 @@ -import '../src/sass/index.scss'; import React from 'react'; import { LubyconUIKitProvider, Container } from 'src'; diff --git a/.yarn/build-state.yml b/.yarn/build-state.yml index f87a8b02..a8d948bd 100644 --- a/.yarn/build-state.yml +++ b/.yarn/build-state.yml @@ -3,7 +3,7 @@ # @lubycon/ui-kit@workspace:. "89e6f5396cad5f9e76a8f8f663ee9bec9593a9910960e2ef97f85e4b1a1e83a4cd81a2f62b8ffa71ab87a9e7f80a70427f020a47eee9290a5ab341ceaf8973d8": - 6b21d0cbf035aa249c55f7e69ba547ff927fb10222f668000c333908c2be6efa4756cf6bbf74173b6507147cf152c9fd70962d874753bb79ed2128a0a7d85ab9 + 39cbf3dc0bd5474da1a4cc3e29b94cc793daf52ed0d3ebf6dd0f2cc64ddfe06bba48785ba2e276308a3e3041b7a9753217c559466a21528e784dc7e4092b22c0 # core-js-pure@npm:3.15.2 "2b9d54bed09edbafda0a9ce9f0deda44bf0efa20a7b5f95fe23989dc8c819b47060dc585fe847db1ac1bd37446f744ace40b4f278c3dd220a77dbead039008ef": diff --git a/.yarn/cache/ansi-styles-npm-2.2.1-f3297e782c-108c749637.zip b/.yarn/cache/ansi-styles-npm-2.2.1-f3297e782c-108c749637.zip deleted file mode 100644 index 3fb5fd37..00000000 Binary files a/.yarn/cache/ansi-styles-npm-2.2.1-f3297e782c-108c749637.zip and /dev/null differ diff --git a/.yarn/cache/chalk-npm-1.1.3-59144c3a87-bc2df54f6d.zip b/.yarn/cache/chalk-npm-1.1.3-59144c3a87-bc2df54f6d.zip deleted file mode 100644 index 70ab0485..00000000 Binary files a/.yarn/cache/chalk-npm-1.1.3-59144c3a87-bc2df54f6d.zip and /dev/null differ diff --git a/.yarn/cache/concat-with-sourcemaps-npm-1.1.0-0cc504d9ba-fdde7c621e.zip b/.yarn/cache/concat-with-sourcemaps-npm-1.1.0-0cc504d9ba-fdde7c621e.zip deleted file mode 100644 index d401f5bd..00000000 Binary files a/.yarn/cache/concat-with-sourcemaps-npm-1.1.0-0cc504d9ba-fdde7c621e.zip and /dev/null differ diff --git a/.yarn/cache/css-modules-loader-core-npm-1.1.0-ab1609ba12-883fef7c95.zip b/.yarn/cache/css-modules-loader-core-npm-1.1.0-ab1609ba12-883fef7c95.zip deleted file mode 100644 index d489e2f0..00000000 Binary files a/.yarn/cache/css-modules-loader-core-npm-1.1.0-ab1609ba12-883fef7c95.zip and /dev/null differ diff --git a/.yarn/cache/css-selector-tokenizer-npm-0.7.3-015149a7d1-b4c0095098.zip b/.yarn/cache/css-selector-tokenizer-npm-0.7.3-015149a7d1-b4c0095098.zip deleted file mode 100644 index 708794f3..00000000 Binary files a/.yarn/cache/css-selector-tokenizer-npm-0.7.3-015149a7d1-b4c0095098.zip and /dev/null differ diff --git a/.yarn/cache/fastparse-npm-1.1.2-6a35154770-a701639184.zip b/.yarn/cache/fastparse-npm-1.1.2-6a35154770-a701639184.zip deleted file mode 100644 index 82288698..00000000 Binary files a/.yarn/cache/fastparse-npm-1.1.2-6a35154770-a701639184.zip and /dev/null differ diff --git a/.yarn/cache/generic-names-npm-2.0.1-6ef8235104-1ed17b3c9a.zip b/.yarn/cache/generic-names-npm-2.0.1-6ef8235104-1ed17b3c9a.zip deleted file mode 100644 index dbca5112..00000000 Binary files a/.yarn/cache/generic-names-npm-2.0.1-6ef8235104-1ed17b3c9a.zip and /dev/null differ diff --git a/.yarn/cache/has-ansi-npm-2.0.0-9bf0cff2af-c6805f5d01.zip b/.yarn/cache/has-ansi-npm-2.0.0-9bf0cff2af-c6805f5d01.zip deleted file mode 100644 index 350ee952..00000000 Binary files a/.yarn/cache/has-ansi-npm-2.0.0-9bf0cff2af-c6805f5d01.zip and /dev/null differ diff --git a/.yarn/cache/has-flag-npm-1.0.0-9e0c397172-556423170e.zip b/.yarn/cache/has-flag-npm-1.0.0-9e0c397172-556423170e.zip deleted file mode 100644 index d1417ed1..00000000 Binary files a/.yarn/cache/has-flag-npm-1.0.0-9e0c397172-556423170e.zip and /dev/null differ diff --git a/.yarn/cache/icss-replace-symbols-npm-1.1.0-bc11c612de-6529ec8274.zip b/.yarn/cache/icss-replace-symbols-npm-1.1.0-bc11c612de-6529ec8274.zip deleted file mode 100644 index 01020081..00000000 Binary files a/.yarn/cache/icss-replace-symbols-npm-1.1.0-bc11c612de-6529ec8274.zip and /dev/null differ diff --git a/.yarn/cache/import-cwd-npm-3.0.0-2f801f964d-5689cfc5d2.zip b/.yarn/cache/import-cwd-npm-3.0.0-2f801f964d-5689cfc5d2.zip deleted file mode 100644 index 0e614d29..00000000 Binary files a/.yarn/cache/import-cwd-npm-3.0.0-2f801f964d-5689cfc5d2.zip and /dev/null differ diff --git a/.yarn/cache/pify-npm-5.0.0-f5abe8ab8d-4c28d29597.zip b/.yarn/cache/pify-npm-5.0.0-f5abe8ab8d-4c28d29597.zip deleted file mode 100644 index b4f1b7d0..00000000 Binary files a/.yarn/cache/pify-npm-5.0.0-f5abe8ab8d-4c28d29597.zip and /dev/null differ diff --git a/.yarn/cache/postcss-modules-extract-imports-npm-1.1.0-b33135c372-49e40c921f.zip b/.yarn/cache/postcss-modules-extract-imports-npm-1.1.0-b33135c372-49e40c921f.zip deleted file mode 100644 index c54152e4..00000000 Binary files a/.yarn/cache/postcss-modules-extract-imports-npm-1.1.0-b33135c372-49e40c921f.zip and /dev/null differ diff --git a/.yarn/cache/postcss-modules-local-by-default-npm-1.2.0-59f9733827-221d2c2467.zip b/.yarn/cache/postcss-modules-local-by-default-npm-1.2.0-59f9733827-221d2c2467.zip deleted file mode 100644 index d444d8ee..00000000 Binary files a/.yarn/cache/postcss-modules-local-by-default-npm-1.2.0-59f9733827-221d2c2467.zip and /dev/null differ diff --git a/.yarn/cache/postcss-modules-npm-2.0.0-de2478a860-a592e1ea16.zip b/.yarn/cache/postcss-modules-npm-2.0.0-de2478a860-a592e1ea16.zip deleted file mode 100644 index e3aff44f..00000000 Binary files a/.yarn/cache/postcss-modules-npm-2.0.0-de2478a860-a592e1ea16.zip and /dev/null differ diff --git a/.yarn/cache/postcss-modules-scope-npm-1.1.0-18e35a3e7d-397b094268.zip b/.yarn/cache/postcss-modules-scope-npm-1.1.0-18e35a3e7d-397b094268.zip deleted file mode 100644 index d1cd9103..00000000 Binary files a/.yarn/cache/postcss-modules-scope-npm-1.1.0-18e35a3e7d-397b094268.zip and /dev/null differ diff --git a/.yarn/cache/postcss-modules-values-npm-1.3.0-ce7f3c4af0-839cc932f7.zip b/.yarn/cache/postcss-modules-values-npm-1.3.0-ce7f3c4af0-839cc932f7.zip deleted file mode 100644 index 58a9a73d..00000000 Binary files a/.yarn/cache/postcss-modules-values-npm-1.3.0-ce7f3c4af0-839cc932f7.zip and /dev/null differ diff --git a/.yarn/cache/postcss-npm-6.0.1-28e1e66467-3c87bd463e.zip b/.yarn/cache/postcss-npm-6.0.1-28e1e66467-3c87bd463e.zip deleted file mode 100644 index 027a3c5a..00000000 Binary files a/.yarn/cache/postcss-npm-6.0.1-28e1e66467-3c87bd463e.zip and /dev/null differ diff --git a/.yarn/cache/postcss-npm-6.0.23-b0e5acc785-9b61abdfb3.zip b/.yarn/cache/postcss-npm-6.0.23-b0e5acc785-9b61abdfb3.zip deleted file mode 100644 index 31ec8ee3..00000000 Binary files a/.yarn/cache/postcss-npm-6.0.23-b0e5acc785-9b61abdfb3.zip and /dev/null differ diff --git a/.yarn/cache/promise.series-npm-0.2.0-286288dd11-51fb6c8e50.zip b/.yarn/cache/promise.series-npm-0.2.0-286288dd11-51fb6c8e50.zip deleted file mode 100644 index cf40462f..00000000 Binary files a/.yarn/cache/promise.series-npm-0.2.0-286288dd11-51fb6c8e50.zip and /dev/null differ diff --git a/.yarn/cache/rollup-plugin-postcss-npm-3.1.8-fcd2b94ec9-7e5bfe3d8a.zip b/.yarn/cache/rollup-plugin-postcss-npm-3.1.8-fcd2b94ec9-7e5bfe3d8a.zip deleted file mode 100644 index c287bd8f..00000000 Binary files a/.yarn/cache/rollup-plugin-postcss-npm-3.1.8-fcd2b94ec9-7e5bfe3d8a.zip and /dev/null differ diff --git a/.yarn/cache/safe-identifier-npm-0.4.2-57e7a2b138-659986cb9f.zip b/.yarn/cache/safe-identifier-npm-0.4.2-57e7a2b138-659986cb9f.zip deleted file mode 100644 index 1a0a046a..00000000 Binary files a/.yarn/cache/safe-identifier-npm-0.4.2-57e7a2b138-659986cb9f.zip and /dev/null differ diff --git a/.yarn/cache/string-hash-npm-1.1.3-3cb8892e7c-178d855be2.zip b/.yarn/cache/string-hash-npm-1.1.3-3cb8892e7c-178d855be2.zip deleted file mode 100644 index 488fb738..00000000 Binary files a/.yarn/cache/string-hash-npm-1.1.3-3cb8892e7c-178d855be2.zip and /dev/null differ diff --git a/.yarn/cache/style-inject-npm-0.3.0-e2042d3aac-1ff06fa7d2.zip b/.yarn/cache/style-inject-npm-0.3.0-e2042d3aac-1ff06fa7d2.zip deleted file mode 100644 index 9163848f..00000000 Binary files a/.yarn/cache/style-inject-npm-0.3.0-e2042d3aac-1ff06fa7d2.zip and /dev/null differ diff --git a/.yarn/cache/supports-color-npm-2.0.0-22c0f0adbc-5d6fb449e2.zip b/.yarn/cache/supports-color-npm-2.0.0-22c0f0adbc-5d6fb449e2.zip deleted file mode 100644 index d46ed05a..00000000 Binary files a/.yarn/cache/supports-color-npm-2.0.0-22c0f0adbc-5d6fb449e2.zip and /dev/null differ diff --git a/.yarn/cache/supports-color-npm-3.2.3-117b06af49-d26b4f5f7a.zip b/.yarn/cache/supports-color-npm-3.2.3-117b06af49-d26b4f5f7a.zip deleted file mode 100644 index d169ab1a..00000000 Binary files a/.yarn/cache/supports-color-npm-3.2.3-117b06af49-d26b4f5f7a.zip and /dev/null differ diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz index 4f4beb2b..816f8d1c 100644 Binary files a/.yarn/install-state.gz and b/.yarn/install-state.gz differ diff --git a/package.json b/package.json index fb037bf1..069209ac 100644 --- a/package.json +++ b/package.json @@ -103,7 +103,6 @@ "@types/react-dom": "^16.9.8", "@typescript-eslint/eslint-plugin": "^4.6.1", "@typescript-eslint/parser": "^4.6.1", - "autoprefixer": "^9.0.0", "babel-loader": "^8.2.1", "classnames": "^2.2.6", "eslint": "^7.14.0", @@ -123,7 +122,6 @@ "remark-codesandbox": "^0.10.0", "rollup": "^2.33.1", "rollup-plugin-peer-deps-external": "^2.2.4", - "rollup-plugin-postcss": "^3.1.8", "rollup-plugin-typescript2": "^0.29.0", "sass": "^1.29.0", "semantic-release": "^17.2.4", diff --git a/rollup.config.js b/rollup.config.js index 24ed538b..c3694150 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -1,23 +1,12 @@ import path from 'path'; -import autoprefixer from 'autoprefixer'; import commonjs from '@rollup/plugin-commonjs'; import resolve from '@rollup/plugin-node-resolve'; -import postcss from 'rollup-plugin-postcss'; import typescript from 'rollup-plugin-typescript2'; import babel from '@rollup/plugin-babel'; const extensions = ['.js', '.jsx', '.ts', '.tsx']; -export default [ - buildCJS('src/index.ts'), - buildESM('src/index.ts'), - buildCSS('src/sass/index.scss', 'css/lubycon-ui-kit.css'), - buildCSS('src/sass/index.scss', 'css/lubycon-ui-kit.min.css', { - minimize: { - preset: ['default'], - }, - }), -]; +export default [buildCJS('src/index.ts'), buildESM('src/index.ts')]; function buildJS(input, output, format) { return { @@ -41,7 +30,6 @@ function buildJS(input, output, format) { function buildCJS(input) { const filename = path.parse(input).name; - return buildJS(input, `dist/${filename}.js`, 'cjs'); } @@ -49,18 +37,3 @@ function buildESM(input) { const filename = path.parse(input).name; return buildJS(input, `dist/esm/${filename}.js`, 'es'); } - -function buildCSS(inputFile, outputFile, postCSSOptions = {}) { - return { - input: inputFile, - output: { file: `dist/${outputFile}`, format: 'cjs' }, // format is not used. - plugins: [ - postcss({ - plugins: [autoprefixer], - extract: true, - extensions: ['.scss', '.css'], - ...postCSSOptions, - }), - ], - }; -} diff --git a/src/components/Accordion/index.tsx b/src/components/Accordion/index.tsx deleted file mode 100644 index 066e7955..00000000 --- a/src/components/Accordion/index.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { forwardRef, useEffect, useRef, useState } from 'react'; -import { CombineElementProps } from '../../types/utils'; -import classnames from 'classnames'; -import Icon from '../Icon'; -import Text from '../Text'; -import { colors } from '../../constants/colors'; -import useElementSize from '../../hooks/useElementSize'; - -type Props = CombineElementProps< - 'div', - { - label: string; - defaultOpen?: boolean; - onChange?: (state: boolean) => void; - onOpen?: () => void; - onClose?: () => void; - } ->; -const Accordion = forwardRef(function Accordion( - { label, className, children, defaultOpen = false, onChange, onOpen, onClose, ...props }, - ref -) { - const [open, setOpen] = useState(defaultOpen); - const contentRef = useRef(null); - const { height: bodyHeight } = useElementSize(contentRef); - - const toggleContentOpen = () => { - setOpen((state) => !state); - }; - - useEffect(() => { - onChange?.(open); - }, [open]); - - useEffect(() => { - if (open === true) { - onOpen?.(); - } else { - onClose?.(); - } - }, [open]); - - return ( -
-
- - - {label} - -
-
-
- {children} -
-
-
- ); -}); - -export default Accordion; diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx deleted file mode 100644 index 05a9d5be..00000000 --- a/src/components/Button/index.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { Ref, forwardRef } from 'react'; -import classnames from 'classnames'; -import { CombineElementProps } from '../../types/utils'; -import Text from '../Text'; -import { SemanticColor } from '../../constants/colors'; - -interface ButtonBaseProps { - size?: 'small' | 'medium' | 'large'; - type?: SemanticColor; - htmlType?: 'button' | 'submit' | 'reset'; -} -type ButtonProps = CombineElementProps<'button', ButtonBaseProps>; - -const Button = ( - { - size = 'small', - disabled, - style, - type, - htmlType, - onClick, - children, - className, - ...props - }: ButtonProps, - ref: Ref -) => { - return ( - - ); -}; - -export default forwardRef(Button) as typeof Button; diff --git a/src/components/Container/index.tsx b/src/components/Container/index.tsx index 4c155d05..e44ace0b 100644 --- a/src/components/Container/index.tsx +++ b/src/components/Container/index.tsx @@ -1,5 +1,5 @@ import { HTMLAttributes } from 'react'; -import classnames from 'classnames'; +import { isMatchedSM } from 'src/utils/mediaQuery'; interface ContainerProps extends HTMLAttributes { fluid?: boolean; } @@ -7,18 +7,17 @@ interface ContainerProps extends HTMLAttributes { export default function Container({ children, fluid = false, - className, ...props }: ContainerProps): JSX.Element { + const maxWidth = isMatchedSM() ? '1200px' : fluid ? 'auto' : 'none'; + return (
{children} diff --git a/src/components/Grid/Column.tsx b/src/components/Grid/Column.tsx index 3041a5ff..2ba3aa83 100644 --- a/src/components/Grid/Column.tsx +++ b/src/components/Grid/Column.tsx @@ -1,7 +1,8 @@ import { ElementType, useMemo, forwardRef } from 'react'; import { ColumnSize, ColumnResponsive, DEFAULT_ELEMENT } from './types'; import { OverridableProps } from '../../types/OverridableProps'; -import classNames from 'classnames'; +import { gridGutter, maxColumns } from './constants'; +import { mediaQuery } from '../../utils/mediaQuery'; const sizes: ColumnResponsive[] = ['xl', 'lg', 'md', 'sm', 'xs']; @@ -15,14 +16,29 @@ type ColumnProps = OverridablePr >; const Column = ( - { as, className, ...props }: ColumnProps, + { as, ...props }: ColumnProps, ref: React.Ref ) => { - const spanClasses = useMemo( + const spanStyles = useMemo( () => sizes.map((size) => { const { [size]: sizeValue } = props; - return sizeValue ? `lubycon-grid__column--${size}--${sizeValue}` : ''; + + if (sizeValue == null) { + return {}; + } + + return mediaQuery( + size, + sizeValue === 'auto' + ? { + flex: '0 0 auto', + } + : { + flex: `0 0 ${(sizeValue / maxColumns) * 100}%`, + width: `${(sizeValue / maxColumns) * 100}%`, + } + ); }), [] ); @@ -33,7 +49,19 @@ const Column = ( return ( ); diff --git a/src/components/Grid/Row.tsx b/src/components/Grid/Row.tsx index da14efbc..173a1af5 100644 --- a/src/components/Grid/Row.tsx +++ b/src/components/Grid/Row.tsx @@ -1,7 +1,7 @@ import { ElementType, Ref, forwardRef } from 'react'; import { DEFAULT_ELEMENT } from './types'; -import classnames from 'classnames'; import { OverridableProps } from '../../types/OverridableProps'; +import { gridGutter } from './constants'; type BaseAlign = 'flex-start' | 'center' | 'flex-end'; interface RowBaseProps { @@ -17,7 +17,6 @@ const Row = ( direction = 'row', justify = 'flex-start', alignItems = 'flex-start', - className, ...props }: RowProps, ref: Ref @@ -27,13 +26,15 @@ const Row = ( return ( ); diff --git a/src/components/Grid/constants.ts b/src/components/Grid/constants.ts new file mode 100644 index 00000000..33832475 --- /dev/null +++ b/src/components/Grid/constants.ts @@ -0,0 +1,2 @@ +export const gridGutter = 12; +export const maxColumns = 12; diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx index 23b21731..d064a7b3 100644 --- a/src/components/Icon/index.tsx +++ b/src/components/Icon/index.tsx @@ -1,5 +1,4 @@ import { useEffect, useState } from 'react'; -import classnames from 'classnames'; import { colors } from '../../constants/colors'; import { CombineElementProps } from '../../types/utils'; import { IconName } from '../../types/icon'; @@ -16,7 +15,6 @@ type Props = CombineElementProps< size?: number; type?: IconType; color?: string; - className?: string; } >; @@ -28,7 +26,6 @@ const Icon = ({ size = 16, type: propsType = 'filled', color = colors.gray100, - className, ...rest }: Props) => { const type = getIconType(name, propsType); @@ -69,16 +66,28 @@ const Icon = ({ return ( {name} diff --git a/src/components/LubyconUIKitProvider/index.tsx b/src/components/LubyconUIKitProvider/index.tsx index 505d568c..4ca7aa9a 100644 --- a/src/components/LubyconUIKitProvider/index.tsx +++ b/src/components/LubyconUIKitProvider/index.tsx @@ -1,6 +1,7 @@ -import { ReactNode } from 'react'; +import { Fragment, ReactNode } from 'react'; import { PortalProvider } from '../../contexts/Portal'; import { OverlayProvider } from '../../contexts/Overlay'; +import { css, Global } from '@emotion/react'; interface Props { children: ReactNode; @@ -8,9 +9,19 @@ interface Props { function LubyconUIKitProvider({ children }: Props) { return ( - - {children} - + + + + {children} + + ); } diff --git a/src/components/Shadow/index.tsx b/src/components/Shadow/index.tsx index 8d54c2e9..a5065648 100644 --- a/src/components/Shadow/index.tsx +++ b/src/components/Shadow/index.tsx @@ -1,13 +1,28 @@ -import classnames from 'classnames'; +import { css } from '@emotion/react'; import { cloneElement, ReactElement } from 'react'; +type ShadowLevel = 0 | 1 | 2 | 3 | 4 | 5; + +const shadows: Record = { + 0: 'none', + 1: '0px 2px 5px rgba(0, 0, 0, 0.1)', + 2: '0px 3px 5px rgba(0, 0, 0, 0.1)', + 3: '0px 6px 10px rgba(0, 0, 0, 0.1)', + 4: '0px 8px 12px rgba(0, 0, 0, 0.1)', + 5: '0px 24px 48px rgba(0, 0, 0, 0.1)', +}; + interface Props { - level: 1 | 2 | 3 | 4 | 5; + level: ShadowLevel; children: ReactElement; } -const Shadow = ({ level, children }: Props) => { +const Shadow = ({ level = 1, children }: Props) => { + const shadow = css` + box-shadow: ${shadows[level]}; + `; + return cloneElement(children, { - className: classnames(children.props.classNames ?? '', `lubycon-shadow--${level}`), + css: shadow, }); }; diff --git a/src/components/Skeleton/Circle.tsx b/src/components/Skeleton/Circle.tsx index 7c89c325..99edf1de 100644 --- a/src/components/Skeleton/Circle.tsx +++ b/src/components/Skeleton/Circle.tsx @@ -15,7 +15,7 @@ type Props = Omit< const Circle = ({ width, height, backgroundStyle, style, ...rest }: Props) => { return (
{ return (
{ - return
; + return ( +
+ ); }; export default Spacing; diff --git a/src/components/Text/index.tsx b/src/components/Text/index.tsx index b8706a98..4ef4ab32 100644 --- a/src/components/Text/index.tsx +++ b/src/components/Text/index.tsx @@ -1,7 +1,13 @@ import { ElementType, Ref, forwardRef } from 'react'; -import { DEFAULT_ELEMENT, FontWeights, Typographys } from './types'; import { OverridableProps } from '../../types/OverridableProps'; -import classnames from 'classnames'; +import { + getFontWeightCss, + getTypographyCss, + FontWeights, + Typographys, +} from '../../utils/typography'; + +export const DEFAULT_ELEMENT = 'span' as const; interface TextBaseProps { typography?: Typographys; @@ -10,7 +16,7 @@ interface TextBaseProps { type TextProps = OverridableProps; const Text = ( - { typography = 'p1', fontWeight = 'regular', as, className, ...props }: TextProps, + { typography = 'p1', fontWeight = 'regular', as, ...props }: TextProps, ref: Ref ) => { const target = as ?? DEFAULT_ELEMENT; @@ -18,14 +24,10 @@ const Text = ( return ( ); diff --git a/src/components/Text/types.ts b/src/components/Text/types.ts deleted file mode 100644 index 51269a77..00000000 --- a/src/components/Text/types.ts +++ /dev/null @@ -1,18 +0,0 @@ -export const typographys = [ - 'h1', - 'h2', - 'h3', - 'h4', - 'h5', - 'h6', - 'subtitle', - 'p1', - 'p2', - 'caption', -] as const; -export type Typographys = typeof typographys[number]; - -export const fontWeights = ['light', 'regular', 'bold', 'black'] as const; -export type FontWeights = typeof fontWeights[number]; - -export const DEFAULT_ELEMENT = 'span' as const; diff --git a/src/components/Tooltip/TooltipBody.tsx b/src/components/Tooltip/TooltipBody.tsx deleted file mode 100644 index e0638745..00000000 --- a/src/components/Tooltip/TooltipBody.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { forwardRef, Ref } from 'react'; -import classnames from 'classnames'; -import Text from '../Text'; -import { CombineElementProps } from '../../types/utils'; - -export type TooltipArrowDirection = - | 'top-left' - | 'top-center' - | 'top-right' - | 'left' - | 'right' - | 'bottom-left' - | 'bottom-center' - | 'bottom-right'; - -type Props = CombineElementProps< - 'div', - { - children: string; - arrowDirection: TooltipArrowDirection; - } ->; -const TooltipBody = forwardRef(function TooltipBody( - { children, arrowDirection, className, ...props }: Props, - forwardedRef: Ref -) { - return ( -
- {children} -
- ); -}); - -export default TooltipBody; diff --git a/src/components/Tooltip/index.tsx b/src/components/Tooltip/index.tsx deleted file mode 100644 index 968920dd..00000000 --- a/src/components/Tooltip/index.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { Fragment, cloneElement, ReactElement, useState, useMemo, useCallback } from 'react'; -import { animated, useSpring } from 'react-spring'; -import { Portal } from '../../contexts/Portal'; -import { CombineElementProps } from '../../types/utils'; -import TooltipBody from './TooltipBody'; -import { OffsetPosition, TooltipElementSize, TooltipPosition } from './types'; -import { getArrowDirection, getTooltipPosition } from './utils'; - -type Props = CombineElementProps< - 'div', - { - show: boolean; - children: ReactElement; - message: string; - position?: TooltipPosition; - } ->; - -const Tooltip = ({ show, children, message, position = 'top-center', ...props }: Props) => { - const [tooltipSize, setTooltipSize] = useState({ width: 0, height: 0 }); - const [tooltipOffset, setTooltipOffset] = useState({ - top: -1, - left: -1, - }); - const arrowDirection = useMemo(() => getArrowDirection(position), [position]); - - const childRef = useCallback( - (childElement: HTMLElement | null) => { - if (childElement !== null) { - setTooltipOffset(getTooltipPosition(childElement, tooltipSize, position)); - } - }, - [tooltipSize, position] - ); - - const tooltipRef = useCallback((node: HTMLDivElement | null) => { - if (node !== null) { - setTooltipSize({ - width: node.clientWidth, - height: node.clientHeight, - }); - } - }, []); - - const animation = useSpring({ - visibility: show ? 'visible' : 'hidden', - opacity: show ? 1 : 0, - }); - - return ( - - {cloneElement(children, { - ref: childRef, - })} - - - - {message} - - - - - ); -}; - -export default Tooltip; diff --git a/src/components/Tooltip/types.ts b/src/components/Tooltip/types.ts deleted file mode 100644 index 02173e8b..00000000 --- a/src/components/Tooltip/types.ts +++ /dev/null @@ -1,19 +0,0 @@ -export type TooltipPosition = - | 'top-left' - | 'top-center' - | 'top-right' - | 'left' - | 'right' - | 'bottom-left' - | 'bottom-center' - | 'bottom-right'; - -export interface OffsetPosition { - top: number; - left: number; -} - -export interface TooltipElementSize { - width: number; - height: number; -} diff --git a/src/components/Tooltip/utils.ts b/src/components/Tooltip/utils.ts deleted file mode 100644 index 9c7d2ecb..00000000 --- a/src/components/Tooltip/utils.ts +++ /dev/null @@ -1,96 +0,0 @@ -import { getAbsoluteOffset } from '../../utils/dom'; -import { TooltipArrowDirection } from './TooltipBody'; -import { OffsetPosition, TooltipElementSize, TooltipPosition } from './types'; - -export function getArrowDirection(position: TooltipPosition): TooltipArrowDirection { - switch (position) { - case 'top-left': - return 'bottom-left'; - case 'top-center': - return 'bottom-center'; - case 'top-right': - return 'bottom-right'; - case 'bottom-left': - return 'top-left'; - case 'bottom-center': - return 'top-center'; - case 'bottom-right': - return 'top-right'; - case 'left': - return 'right'; - case 'right': - return 'left'; - default: - return position; - } -} - -export function getTooltipPosition( - childElement: HTMLElement, - tooltipSize: TooltipElementSize, - position: TooltipPosition -): OffsetPosition { - const arrowHeight = 8; - const spacing = 8; - const { clientWidth, clientHeight } = childElement; - - const { top: offsetTop, left: offsetLeft } = getAbsoluteOffset(childElement); - const offsetRight = offsetLeft + clientWidth; - const offsetBottom = offsetTop + clientHeight; - - const { width: tooltipWidth, height: tooltipHeight } = tooltipSize; - - const topPosition = offsetTop - tooltipHeight - arrowHeight - spacing; - const bottomPosition = offsetBottom + arrowHeight + spacing; - const horizontalCenterOfChildren = offsetLeft + clientWidth / 2 - tooltipWidth / 2; - const verticalCenterOfChildren = offsetTop + clientHeight / 2 - tooltipHeight / 2; - - switch (position) { - case 'top-left': - return { - top: topPosition, - left: offsetLeft, - }; - case 'top-center': - return { - top: topPosition, - left: horizontalCenterOfChildren, - }; - case 'top-right': - return { - top: topPosition, - left: offsetRight - tooltipWidth, - }; - case 'bottom-left': - return { - top: bottomPosition, - left: offsetLeft, - }; - case 'bottom-center': - return { - top: bottomPosition, - left: horizontalCenterOfChildren, - }; - case 'bottom-right': - return { - top: bottomPosition, - left: offsetLeft + clientWidth - tooltipWidth, - }; - case 'left': - return { - top: verticalCenterOfChildren, - left: offsetLeft - tooltipWidth - arrowHeight - spacing, - }; - case 'right': - return { - top: verticalCenterOfChildren, - left: offsetRight + arrowHeight + spacing, - }; - - default: - return { - top: offsetTop - arrowHeight - spacing, - left: offsetLeft, - }; - } -} diff --git a/src/hooks/useCombinedRefs.ts b/src/hooks/useCombinedRefs.ts index 14f529e9..bb603f5b 100644 --- a/src/hooks/useCombinedRefs.ts +++ b/src/hooks/useCombinedRefs.ts @@ -1,5 +1,8 @@ import { Ref, useCallback, MutableRefObject, RefCallback } from 'react'; +/** + * @deprecated "@lubycon/react"의 useCombinedRefs를 사용하세요. + */ export default function useCombinedRefs( ...refs: Array | RefCallback> ): RefCallback { diff --git a/src/hooks/useScroll.ts b/src/hooks/useScroll.ts index a8c1c181..c4878bc8 100644 --- a/src/hooks/useScroll.ts +++ b/src/hooks/useScroll.ts @@ -1,10 +1,8 @@ import { RefObject, useEffect } from 'react'; /** - * 컴포넌트에 스크롤 이벤트를 추가하는 hook입니다. - * useEffect dependency로 hook의 인자인 ref, scrollCallback을 포함하고 있어 - * ref, scrollCallback의 레퍼런스가 변경 될 때마다 스크롤 이벤트가 바인딩됩니다. - * 이 부분을 참고하셔서 성능이슈가 발생하지 않도록 잘 관리해주세요. + * @deprecated + * "@lubycon/react"의 useScrollEvent를 사용하세요 */ const useScroll = (ref: RefObject, scrollCallback: () => void) => { useEffect(() => { diff --git a/src/index.ts b/src/index.ts index 1b71090b..bd01de11 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,10 +1,7 @@ -export { default as Button } from './components/Button'; export { Row, Column } from './components/Grid'; export { default as Container } from './components/Container'; export { default as Text } from './components/Text'; export { default as LubyconUIKitProvider } from './components/LubyconUIKitProvider'; -export { default as Tooltip } from './components/Tooltip'; -export { default as Accordion } from './components/Accordion'; export { Portal } from './contexts/Portal'; export { colors } from './constants/colors'; export { default as Icon } from './components/Icon'; @@ -16,3 +13,4 @@ export { default as useResizeObserver } from './hooks/useResizeObserver'; export { useOverlay } from './contexts/Overlay'; export { default as TransitionMotion } from './components/TransitionMotion'; export { default as useElementSize } from './hooks/useElementSize'; +export { useAnimationFrame } from './hooks/useAnimationFrame'; diff --git a/src/sass/components/_Accordion.scss b/src/sass/components/_Accordion.scss deleted file mode 100644 index b31ac4f3..00000000 --- a/src/sass/components/_Accordion.scss +++ /dev/null @@ -1,42 +0,0 @@ -$animation-duration: 0.3s ease-in-out; - -.lubycon-accordion { - border: { - top: 1px solid get-color('gray20'); - bottom: 1px solid get-color('gray20'); - } - & + & { - border-top: none; - } - &--opened { - .lubycon-accordion__label__icon { - transform: rotate(180deg); - } - } - &__label { - display: flex; - align-items: center; - padding: 16px; - user-select: none; - cursor: pointer; - transition: background-color 0.1s ease-in-out; - &:hover { - background-color: get-color('gray10'); - } - &__icon { - margin-right: 16px; - transition: transform $animation-duration; - } - &__text { - color: get-color('gray90'); - } - } - &__cover { - transition: height $animation-duration; - overflow: hidden; - &__content { - padding: 8px 16px 16px 50px; - transition: opacity $animation-duration; - } - } -} diff --git a/src/sass/components/_Button.scss b/src/sass/components/_Button.scss deleted file mode 100644 index 0bddbafc..00000000 --- a/src/sass/components/_Button.scss +++ /dev/null @@ -1,60 +0,0 @@ -@mixin hoverAndActiveStyle($color) { - &:hover, - &:active { - background-color: get-color($color); - } -} - -.lubycon-button { - font: inherit; - text-align: inherit; - outline: none; - border: 0; - margin: 0; - background-color: transparent; - border-radius: 4px; - color: get-color('gray90'); - cursor: pointer; - -webkit-font-smoothing: antialiased; - transition: background-color 0.2s ease-in-out; - - @include hoverAndActiveStyle('gray20'); - - &--small { - padding: 4px 16px; - } - &--medium { - padding: 8px 16px; - } - &--large { - padding: 12px 32px; - border-radius: 8px; - } - - &--type-informative { - background-color: get-color('blue50'); - color: get-color('white'); - @include hoverAndActiveStyle('blue60'); - } - &--type-positive { - background-color: get-color('green50'); - color: get-color('white'); - @include hoverAndActiveStyle('green60'); - } - &--type-notice { - background-color: get-color('yellow50'); - color: get-color('white'); - @include hoverAndActiveStyle('yellow60'); - } - &--type-negative { - background-color: get-color('red50'); - color: get-color('white'); - @include hoverAndActiveStyle('red60'); - } - - &:disabled { - color: get-color('gray60'); - background-color: get-color('gray40'); - cursor: not-allowed; - } -} diff --git a/src/sass/components/_Column.scss b/src/sass/components/_Column.scss deleted file mode 100644 index 69919308..00000000 --- a/src/sass/components/_Column.scss +++ /dev/null @@ -1,27 +0,0 @@ -@use 'sass:math'; - -.lubycon-grid__column { - position: relative; - padding-right: math.div($grid-gutter, 2); - padding-left: math.div($grid-gutter, 2); - flex-basis: 0; - flex-grow: 1; - min-width: 0; - max-width: 100%; - box-sizing: border-box; -} - -@each $breakpoint, $size in $breakpoints { - .lubycon-grid__column--#{$breakpoint}--auto { - flex: 0 0 auto; - } - - @for $i from 1 through $max-columns { - .lubycon-grid__column--#{$breakpoint}--#{$i} { - @include media-breakpoint($breakpoint) { - flex: 0 0 percentage(math.div($i, $max-columns)); - width: percentage(math.div($i, $max-columns)); - } - } - } -} diff --git a/src/sass/components/_Container.scss b/src/sass/components/_Container.scss deleted file mode 100644 index 4e7deb91..00000000 --- a/src/sass/components/_Container.scss +++ /dev/null @@ -1,11 +0,0 @@ -.lubycon-container { - width: 100%; - max-width: none; - margin: 0 auto; - &--fluid { - max-width: auto; - } - @include media-breakpoint(sm) { - max-width: 1200px; - } -} diff --git a/src/sass/components/_Icon.scss b/src/sass/components/_Icon.scss deleted file mode 100644 index 5ec6c335..00000000 --- a/src/sass/components/_Icon.scss +++ /dev/null @@ -1,21 +0,0 @@ -.lubycon-icon { - display: inline-block; - fill: currentColor; - - &__icon-body { - &--hide-origin-icon { - display: none; - } - } - &__fallback-icon { - display: none; - vertical-align: top; - &--show-fallback-icon { - display: inline-block; - } - } - svg { - width: 100%; - vertical-align: top; - } -} diff --git a/src/sass/components/_Modal.scss b/src/sass/components/_Modal.scss deleted file mode 100644 index 16cd0476..00000000 --- a/src/sass/components/_Modal.scss +++ /dev/null @@ -1,46 +0,0 @@ -.lubycon-modal { - &__overlay { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-color: get-color('gray100'); - opacity: 0.5; - z-index: 1000; - } - &__window-wrapper { - position: fixed; - left: 50%; - top: 50%; - z-index: 1001; - } - &__window { - background-color: get-color('gray10'); - border-radius: 4px; - box-sizing: border-box; - &--small { - width: 280px; - padding: 16px 20px; - } - &--medium { - width: 400px; - padding: 20px 24px; - } - } - &__title { - color: get-color('gray100'); - margin-top: 0; - margin-bottom: 12px; - } - &__content { - color: get-color('gray70'); - margin-bottom: 24px; - white-space: pre-wrap; - } - &__footer { - display: flex; - align-items: center; - justify-content: flex-end; - } -} diff --git a/src/sass/components/_ProgressBar.scss b/src/sass/components/_ProgressBar.scss deleted file mode 100644 index 9a524ea9..00000000 --- a/src/sass/components/_ProgressBar.scss +++ /dev/null @@ -1,48 +0,0 @@ -$label-vertical-space: 4px; -$label-horizontal-space: 12px; - -.lubycon-progress-bar { - display: flex; - - &--direction-row { - flex-direction: row; - align-items: center; - } - &--direction-column { - flex-direction: column; - } - - &__label { - text-align: center; - &--position-top { - margin-bottom: $label-vertical-space; - order: 0; - } - &--position-bottom { - margin-top: $label-vertical-space; - order: 2; - } - &--position-right { - margin-left: $label-horizontal-space; - order: 2; - } - &--position-left { - margin-right: $label-horizontal-space; - order: 0; - } - } - &__bar { - display: flex; - flex-grow: 1; - order: 1; - width: 100%; - background-color: get-color('gray30'); - height: 4px; - border-radius: 100px; - overflow: hidden; - &__fill { - transition: width 0.3s ease-out; - background-color: get-color('blue50'); - } - } -} diff --git a/src/sass/components/_Row.scss b/src/sass/components/_Row.scss deleted file mode 100644 index 8201683a..00000000 --- a/src/sass/components/_Row.scss +++ /dev/null @@ -1,42 +0,0 @@ -@use 'sass:math'; - -@mixin direction($direction) { - &--direction-#{$direction} { - flex-direction: $direction; - } -} -@mixin justify($align) { - &--justify-#{$align} { - justify-content: $align; - } -} -@mixin alignItems($align) { - &--align-items-#{$align} { - align-items: $align; - } -} - -.lubycon-grid__row { - display: flex; - margin: 0 #{math.div(-$grid-gutter, 2)}; - flex-wrap: wrap; - box-sizing: border-box; - - @include direction(row); - @include direction(column); - @include direction(row-reverse); - @include direction(column-reverse); - - @include justify(flex-start); - @include justify(center); - @include justify(flex-end); - @include justify(space-between); - @include justify(space-around); - @include justify(space-evenly); - - @include alignItems(flex-start); - @include alignItems(center); - @include alignItems(flex-end); - @include alignItems(stretch); - @include alignItems(baseline); -} diff --git a/src/sass/components/_Spacing.scss b/src/sass/components/_Spacing.scss deleted file mode 100644 index 68c46318..00000000 --- a/src/sass/components/_Spacing.scss +++ /dev/null @@ -1,4 +0,0 @@ -.lubycon-spacing { - width: 0; - display: inline-block; -} diff --git a/src/sass/components/_Text.scss b/src/sass/components/_Text.scss deleted file mode 100644 index 8a8de41b..00000000 --- a/src/sass/components/_Text.scss +++ /dev/null @@ -1,7 +0,0 @@ -.lubycon-text { - @each $name, $value in $font-weights { - &.lubycon-text--font-weight-#{$name} { - @include font-weight($name, map-get($font-weights, $name)); - } - } -} diff --git a/src/sass/components/_Tooltip.scss b/src/sass/components/_Tooltip.scss deleted file mode 100644 index 1d0d43fa..00000000 --- a/src/sass/components/_Tooltip.scss +++ /dev/null @@ -1,93 +0,0 @@ -$tooltip-h-padding: 12px; - -.lubycon-tooltip__positioner { - position: absolute; -} - -.lubycon-tooltip__body { - position: relative; - display: inline-flex; - background-color: get-color('gray100'); - color: #ffffff; - padding: 4px $tooltip-h-padding; - border-radius: 4px; - -webkit-font-smoothing: antialiased; -} - -%tooltip-arrow-position { - position: absolute; - width: 0; - height: 0; - content: ''; -} -%tooltip-bottom-arrow { - @extend %tooltip-arrow-position; - border-left: 6px solid transparent; - border-right: 6px solid transparent; - border-top: 8px solid get-color('gray100'); -} -%tooltip-left-arrow { - @extend %tooltip-arrow-position; - border-bottom: 6px solid transparent; - border-right: 8px solid get-color('gray100'); - border-top: 6px solid transparent; -} -%tooltip-right-arrow { - @extend %tooltip-arrow-position; - border-left: 8px solid get-color('gray100'); - border-bottom: 6px solid transparent; - border-top: 6px solid transparent; -} -%tooltip-top-arrow { - @extend %tooltip-arrow-position; - border-left: 6px solid transparent; - border-right: 6px solid transparent; - border-bottom: 8px solid get-color('gray100'); -} - -.lubycon-tooltip__body--arrow { - &-bottom-center::before { - @extend %tooltip-bottom-arrow; - top: 100%; - left: 50%; - transform: translateX(-50%); - } - &-bottom-left::before { - @extend %tooltip-bottom-arrow; - top: 100%; - left: $tooltip-h-padding; - } - &-bottom-right::before { - @extend %tooltip-bottom-arrow; - top: 100%; - right: $tooltip-h-padding; - } - &-right::before { - @extend %tooltip-right-arrow; - top: 50%; - transform: translateY(-50%); - left: 100%; - } - &-left::before { - @extend %tooltip-left-arrow; - top: 50%; - transform: translateY(-50%); - right: 100%; - } - &-top-center::before { - @extend %tooltip-top-arrow; - bottom: 100%; - left: 50%; - transform: translateX(-50%); - } - &-top-left::before { - @extend %tooltip-top-arrow; - bottom: 100%; - left: $tooltip-h-padding; - } - &-top-right::before { - @extend %tooltip-top-arrow; - bottom: 100%; - right: $tooltip-h-padding; - } -} diff --git a/src/sass/components/_index.scss b/src/sass/components/_index.scss deleted file mode 100644 index 89150499..00000000 --- a/src/sass/components/_index.scss +++ /dev/null @@ -1,13 +0,0 @@ -@import './Accordion'; -@import './Button'; -@import './Text'; -@import './Row'; -@import './Column'; -@import './Icon'; -@import './Tooltip'; -@import './Container'; -@import './Spacing'; - -// 스토리용 -@import './ProgressBar'; -@import './Modal'; diff --git a/src/sass/functions/_index.scss b/src/sass/functions/_index.scss deleted file mode 100644 index 0e8d1292..00000000 --- a/src/sass/functions/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import './strip-unit'; diff --git a/src/sass/functions/_strip-unit.scss b/src/sass/functions/_strip-unit.scss deleted file mode 100644 index 3b451967..00000000 --- a/src/sass/functions/_strip-unit.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use 'sass:math'; - -@function strip-unit($number) { - @if type-of($number) == 'number' and not unitless($number) { - @return math.div($number, $number * 0 + 1); - } - - @return $number; -} diff --git a/src/sass/index.scss b/src/sass/index.scss deleted file mode 100644 index 6ea120ee..00000000 --- a/src/sass/index.scss +++ /dev/null @@ -1,7 +0,0 @@ -@import './functions/index'; -@import './utils/index'; -@import './components/index.scss'; - -body { - font-size: 16px; -} diff --git a/src/sass/utils/_breakpoints.scss b/src/sass/utils/_breakpoints.scss deleted file mode 100644 index 11389afb..00000000 --- a/src/sass/utils/_breakpoints.scss +++ /dev/null @@ -1,13 +0,0 @@ -$breakpoints: ( - xs: 0, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px, -) !default; - -@mixin media-breakpoint($size) { - @media screen and (min-width: map-get($breakpoints, $size)) { - @content; - } -} diff --git a/src/sass/utils/_colors.scss b/src/sass/utils/_colors.scss deleted file mode 100644 index 875f92a2..00000000 --- a/src/sass/utils/_colors.scss +++ /dev/null @@ -1,40 +0,0 @@ -$colors: ( - 'green40': #dff6e7, - 'green50': #13bc4c, - 'green60': #00a438, - 'blue50': #135ce9, - 'blue40': #e6effe, - 'blue60': #013cad, - 'red50': #cb121c, - 'red40': #fae7e8, - 'red60': #9b0b13, - 'yellow50': #f0ca08, - 'yellow40': #fdf5ce, - 'yellow60': #aa8f00, - 'gray100': #1b1b1c, - 'gray90': #2a2a2c, - 'gray80': #4c4d53, - 'gray70': #76777d, - 'gray60': #8e9095, - 'gray50': #b5b6b9, - 'gray40': #d0d1d3, - 'gray30': #e3e4e5, - 'gray20': #f3f4f5, - 'gray10': #fcfcfd, - 'white': #ffffff, - 'black': #000000, -); - -@mixin color($name, $value) { - :root { - --lubycon-#{$name}: #{$value}; - } -} - -@each $name, $value in $colors { - @include color($name, $value); -} - -@function get-color($name) { - @return map-get($colors, $name); -} diff --git a/src/sass/utils/_font-weights.scss b/src/sass/utils/_font-weights.scss deleted file mode 100644 index ab1a9530..00000000 --- a/src/sass/utils/_font-weights.scss +++ /dev/null @@ -1,24 +0,0 @@ -$font-weights: ( - 'light': 300, - 'regular': 400, - 'bold': 700, - 'black': 900, -); - -@mixin font-weight($name, $value) { - font-weight: $value; - font-weight: var(--lubycon-font-weight-#{$name}); -} - -@mixin global-font-weight($name, $value) { - :root { - --lubycon-font-weight-#{$name}: #{$value}; - } - .lubycon-font-weight--#{$name} { - @include font-weight($name, $value); - } -} - -@each $name, $value in $font-weights { - @include global-font-weight($name, $value); -} diff --git a/src/sass/utils/_font.scss b/src/sass/utils/_font.scss deleted file mode 100644 index 43685e6e..00000000 --- a/src/sass/utils/_font.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700;900&display=swap'); - -html { - font-family: 'Noto Sans KR', sans-serif; -} diff --git a/src/sass/utils/_grid.scss b/src/sass/utils/_grid.scss deleted file mode 100644 index 22e1b4fc..00000000 --- a/src/sass/utils/_grid.scss +++ /dev/null @@ -1,2 +0,0 @@ -$max-columns: 12; -$grid-gutter: 12px; diff --git a/src/sass/utils/_index.scss b/src/sass/utils/_index.scss deleted file mode 100644 index 5d061da7..00000000 --- a/src/sass/utils/_index.scss +++ /dev/null @@ -1,8 +0,0 @@ -@import './breakpoints'; -@import './grid'; -@import './font'; -@import './font-weights'; -@import './typography'; -@import './shadows'; -@import './colors'; -@import './scrollbar'; diff --git a/src/sass/utils/_scrollbar.scss b/src/sass/utils/_scrollbar.scss deleted file mode 100644 index c36ca4a1..00000000 --- a/src/sass/utils/_scrollbar.scss +++ /dev/null @@ -1,7 +0,0 @@ -@mixin remove-scroll-bar { - scrollbar-width: none; - -ms-overflow-style: none; - &::-webkit-scrollbar { - display: none; - } -} diff --git a/src/sass/utils/_shadows.scss b/src/sass/utils/_shadows.scss deleted file mode 100644 index f82dd662..00000000 --- a/src/sass/utils/_shadows.scss +++ /dev/null @@ -1,18 +0,0 @@ -@mixin shadow($shadow-level, $offset-y, $blur-radius) { - $shadow: '0px #{$offset-y} #{$blur-radius} rgba(0, 0, 0, 0.1)'; - - :root { - --lubycon-shadow-#{$shadow-level}: #{$shadow}; - } - - .lubycon-shadow--#{$shadow-level} { - box-shadow: #{$shadow}; - box-shadow: var(--lubycon-shadow-#{$shadow-level}); - } -} - -@include shadow(1, 2px, 5px); -@include shadow(2, 3px, 5px); -@include shadow(3, 6px, 10px); -@include shadow(4, 8px, 12px); -@include shadow(5, 24px, 48px); diff --git a/src/sass/utils/_typography.scss b/src/sass/utils/_typography.scss deleted file mode 100644 index 88a79674..00000000 --- a/src/sass/utils/_typography.scss +++ /dev/null @@ -1,30 +0,0 @@ -@mixin _typography($name, $font-size, $line-height) { - $font-size-number: strip-unit($font-size); - - :root { - --lubycon-font-size-#{$name}: #{$font-size}; - --lubycon-line-height-#{$name}: #{$line-height}; - } - - .lubycon-font-size-#{$name} { - font-size: $font-size; - font-size: var(--lubycon-font-size-#{$name}); - line-height: $line-height; - line-height: var(--lubycon-line-height-#{$name}); - } - - .lubycon-typography-#{$name} { - @extend .lubycon-font-size-#{$name}; - } -} - -@include _typography('h1', 2.625rem, 1.5); -@include _typography('h2', 2rem, 1.5); -@include _typography('h3', 1.75rem, 1.5); -@include _typography('h4', 1.625rem, 1.5); -@include _typography('h5', 1.5rem, 1.5); -@include _typography('h6', 1.25rem, 1.5); -@include _typography('subtitle', 1.125rem, 1.7); -@include _typography('p1', 1rem, 2); -@include _typography('p2', 0.9375rem, 1.7); -@include _typography('caption', 0.75rem, 1.6); diff --git a/src/stories/Components/Accordion/index.stories.mdx b/src/stories/Components/Accordion/index.stories.mdx deleted file mode 100644 index 416ea794..00000000 --- a/src/stories/Components/Accordion/index.stories.mdx +++ /dev/null @@ -1,81 +0,0 @@ -import Accordion from '../../../components/Accordion'; -import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; - - - -# Accordion - -아코디언은 펼치거나 접을 수 있는 패널 컴포넌트 입니다. 펼침 상태를 활용하여 추가적인 정보를 사용자에게 제공할 수 있습니다. 기본적으로 접힌 상태이며, 사용자가 해당 패널을 클릭하면 펼침 상태로 변경됩니다. - -## Preview - -라벨은 펼쳐지기 전에 아코디언에 보여지는 텍스트 영역을 가리킵니다. 펼쳐진 부분의 텍스트 영역은 아코디언 컴포넌트의 내부에 기입한 내용으로 나타납니다. - - - - console.log(`onChange: ${v}`)} - onOpen={() => console.log('handleOpen')} - onClose={() => console.log('handleClose')} - > - 아코디언이 펼쳐지면 아래에 내용이 나옵니다. -
- 아코디언이 펼쳐지면 아래에 내용이 나옵니다. -
- 아코디언이 펼쳐지면 아래에 내용이 나옵니다. -
- - - 귀여운 에비츄 - - - 아코디언이 펼쳐지면 아래에 내용이 나옵니다. -
- 아코디언이 펼쳐지면 아래에 내용이 나옵니다. -
- 아코디언이 펼쳐지면 아래에 내용이 나옵니다. -
- - - - -## Default Open - -아코디언 컴포넌트가 처음 렌더될 때의 펼침여부를 결정할 수 있습니다. - - - - - 아코디언이 펼쳐지면 아래에 내용이 나옵니다. -
- 아코디언이 펼쳐지면 아래에 내용이 나옵니다. -
- 아코디언이 펼쳐지면 아래에 내용이 나옵니다. -
- - - - -## 이벤트 핸들러 - -Lubycon UI Kit에서는 아코디언 컴포넌트의 상태에 따라 호출되는 함수 props를 제공하고 있습니다. - -`onChange`는 아코디언 패널의 펼침 접힘 상태가 변경되었을 때, `onOpen`은 아코디언 패널이 펼쳐졌을 때, `onClose`는 아코디언 패널이 접혀졌을 때 호출됩니다. - - - - - 아코디언이 펼쳐지면 아래에 내용이 나옵니다. -
- 아코디언이 펼쳐지면 아래에 내용이 나옵니다. -
- 아코디언이 펼쳐지면 아래에 내용이 나옵니다. -
- - - diff --git a/src/stories/Components/Modal/Components.tsx b/src/stories/Components/Modal/Components.tsx index 250ce40b..7b224785 100644 --- a/src/stories/Components/Modal/Components.tsx +++ b/src/stories/Components/Modal/Components.tsx @@ -1,5 +1,4 @@ import { useState } from 'react'; -import Button from '../../../components/Button'; import Modal, { ModalHeader, ModalContent, ModalFooter } from './Modal'; import { Column } from '../../../components/Grid'; import { useOverlayModal } from './useOverlayModal'; @@ -12,17 +11,11 @@ interface FooterProps { type ModalFn = (state: boolean) => void; const DefaultModalHeader = () => 타이틀입니다; -const DefaultModalFooter = ({ size, showCancelBtn = true, closeModal }: FooterProps) => { +const DefaultModalFooter = ({ showCancelBtn = true, closeModal }: FooterProps) => { return ( - {showCancelBtn ? ( - - ) : null} - + {showCancelBtn ? : null} + ); }; @@ -39,7 +32,7 @@ export const OverlayModal = () => { openModal(); }; - return ; + return ; }; export const Preview = () => { @@ -57,13 +50,9 @@ export const Preview = () => { return ( - + handleClose('Close small modal', setShowSmallModal)} @@ -79,13 +68,9 @@ export const Preview = () => { /> - + ) => void; @@ -12,7 +13,16 @@ const ModalBackdrop = forwardRef(function Mo return (
; -const ModalContent = ({ children, size, className, ...props }: ModalContentProps) => { +const ModalContent = ({ children, size, ...props }: ModalContentProps) => { const typography: Typographys = size === 'small' ? 'p2' : 'p1'; return ( -
+
{isValidElement(children) ? children : {children}}
); diff --git a/src/stories/Components/Modal/Modal/ModalFooter.tsx b/src/stories/Components/Modal/Modal/ModalFooter.tsx index c6e0f836..d1eee43d 100644 --- a/src/stories/Components/Modal/Modal/ModalFooter.tsx +++ b/src/stories/Components/Modal/Modal/ModalFooter.tsx @@ -1,6 +1,6 @@ import { ReactNode } from 'react'; import { CombineElementProps } from '../../../../types/utils'; -import classnames from 'classnames'; +import { css } from '@emotion/react'; type ModalFooterProps = CombineElementProps< 'div', @@ -9,9 +9,16 @@ type ModalFooterProps = CombineElementProps< } >; -const ModalFooter = ({ children, className, ...props }: ModalFooterProps) => { +const ModalFooter = ({ children, ...props }: ModalFooterProps) => { return ( -
+
{children}
); diff --git a/src/stories/Components/Modal/Modal/ModalHeader.tsx b/src/stories/Components/Modal/Modal/ModalHeader.tsx index b1592ecd..02cbebb0 100644 --- a/src/stories/Components/Modal/Modal/ModalHeader.tsx +++ b/src/stories/Components/Modal/Modal/ModalHeader.tsx @@ -1,8 +1,9 @@ import { ReactNode, isValidElement } from 'react'; import Text from '../../../../components/Text'; -import { Typographys } from '../../../../components/Text/types'; +import { Typographys } from '../../../../utils/typography'; import { CombineElementProps } from '../../../../types/utils'; -import classnames from 'classnames'; +import { css } from '@emotion/react'; +import { colors } from '../../../../constants/colors'; type ModalHeaderProps = CombineElementProps< 'div', @@ -12,11 +13,18 @@ type ModalHeaderProps = CombineElementProps< } >; -const ModalHeader = ({ size, children, className, ...props }: ModalHeaderProps) => { +const ModalHeader = ({ size, children, ...props }: ModalHeaderProps) => { const typography: Typographys = size === 'small' ? 'subtitle' : 'h6'; return ( -
+
{isValidElement(children) ? children : {children}}
); diff --git a/src/stories/Components/Modal/Modal/ModalWindow.tsx b/src/stories/Components/Modal/Modal/ModalWindow.tsx index b4a08895..91c957b8 100644 --- a/src/stories/Components/Modal/Modal/ModalWindow.tsx +++ b/src/stories/Components/Modal/Modal/ModalWindow.tsx @@ -1,6 +1,7 @@ import { ReactNode } from 'react'; -import classnames from 'classnames'; import { CombineElementProps } from '../../../../types/utils'; +import { css } from '@emotion/react'; +import { colors } from '../../../../constants/colors'; type ModalWindowProps = CombineElementProps< 'div', @@ -10,10 +11,16 @@ type ModalWindowProps = CombineElementProps< } >; -const ModalWindow = ({ children, size, className, ...props }: ModalWindowProps) => { +const ModalWindow = ({ children, size, ...props }: ModalWindowProps) => { return (
{children} diff --git a/src/stories/Components/Modal/Modal/index.tsx b/src/stories/Components/Modal/Modal/index.tsx index ea5348f4..bf78de48 100644 --- a/src/stories/Components/Modal/Modal/index.tsx +++ b/src/stories/Components/Modal/Modal/index.tsx @@ -4,6 +4,7 @@ import ModalWindow from './ModalWindow'; import { generateID } from '../../../../utils/index'; import { CombineElementProps } from '../../../../types/utils'; import TransitionMotion from '../../../../components/TransitionMotion'; +import { css } from '@emotion/react'; export type ModalProps = CombineElementProps< 'div', @@ -22,7 +23,6 @@ const Modal = ({ children, onClose, onCloseTransitionEnd, - className, ...props }: ModalProps) => { const backdropRef = useRef(null); @@ -52,7 +52,7 @@ const Modal = ({ }, []); return ( -
+
onCloseTransitionEnd?.()} > - + {Children.map(children, (child) => { return cloneElement(child, { key: generateID('lubycon-modal__children'), diff --git a/src/stories/Components/ProgressBar/ProgressBar.tsx b/src/stories/Components/ProgressBar/ProgressBar.tsx index 23ffb5a9..3c52e820 100644 --- a/src/stories/Components/ProgressBar/ProgressBar.tsx +++ b/src/stories/Components/ProgressBar/ProgressBar.tsx @@ -1,12 +1,36 @@ import { forwardRef } from 'react'; -import classnames from 'classnames'; import { CombineElementProps } from '../../../types/utils'; import Text from '../../../components/Text'; import useProgress from '../../../hooks/useProgress'; +import { colors } from '../../../constants/colors'; const noop = (value: number) => value; export type ProgressBarLabelPosition = 'top' | 'bottom' | 'left' | 'right'; +const getLabelPositionStyle = (position: ProgressBarLabelPosition) => { + switch (position) { + case 'top': + return { + marginBottom: 4, + order: 0, + }; + case 'bottom': + return { + marginTop: 4, + order: 2, + }; + case 'right': + return { + marginLeft: 12, + order: 2, + }; + case 'left': + return { + marginRight: 12, + order: 0, + }; + } +}; type Props = CombineElementProps< 'div', { @@ -25,7 +49,6 @@ const ProgressBar = forwardRef(function ProgressBar( value, valueMapper, max, - className, labelFormatter = noop, showLabel, labelPosition = 'top', @@ -38,27 +61,44 @@ const ProgressBar = forwardRef(function ProgressBar( return (
{showLabel === true ? ( {labelFormatter(value)} ) : null} -
-
+
+
); diff --git a/src/stories/Components/Spacing/Components.tsx b/src/stories/Components/Spacing/Components.tsx new file mode 100644 index 00000000..512a1975 --- /dev/null +++ b/src/stories/Components/Spacing/Components.tsx @@ -0,0 +1,11 @@ +export function Box({ color }: { color: string }) { + return ( +
+ ); +} diff --git a/src/stories/Components/Spacing/index.stories.mdx b/src/stories/Components/Spacing/index.stories.mdx new file mode 100644 index 00000000..8a87fc0e --- /dev/null +++ b/src/stories/Components/Spacing/index.stories.mdx @@ -0,0 +1,24 @@ +import Spacing from '../../../components/Spacing'; +import { Box } from './Components'; +import { colors } from '../../../constants/colors'; +import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; + + + +# Spacing + +Spacing 컴포넌트는 요소와 요소 사이에 간격을 만듭니다. + +특정 요소와 요소 사이의 간격이 명확하게 특정 컴포넌트 관심사가 아니라고 판단되는 경우, 각 컴포넌트에서 간격에 대한 관심사를 Spacing 컴포넌트에게 위임하세요. + + + +
+ + + + + +
+ + diff --git a/src/stories/Components/Tooltip/Components.tsx b/src/stories/Components/Tooltip/Components.tsx deleted file mode 100644 index 695ffd84..00000000 --- a/src/stories/Components/Tooltip/Components.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import { useState } from 'react'; -import Tooltip from '../../../components/Tooltip'; -import Button from '../../../components/Button'; -import { TooltipPosition } from '../../../components/Tooltip/types'; -import { positions } from './data'; - -const TooltipButton = ({ children }: { children: TooltipPosition }) => { - const [show, setShow] = useState(false); - return ( - - - - ); -}; - -export const Preview = () => { - return ( -
- - - -
- ); -}; - -export const Positions = () => { - return ( -
    - {positions.map((p) => ( -
  • - {p} -
    • - ))} -
- ); -}; - -export const AbsolutePositionTest = () => { - return ( -
-
- - - -
-
- ); -}; diff --git a/src/stories/Components/Tooltip/data.ts b/src/stories/Components/Tooltip/data.ts deleted file mode 100644 index 6f912566..00000000 --- a/src/stories/Components/Tooltip/data.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { TooltipPosition } from '../../../components/Tooltip/types'; - -export const positions: TooltipPosition[] = [ - 'top-left', - 'top-center', - 'top-right', - 'left', - 'right', - 'bottom-left', - 'bottom-center', - 'bottom-right', -]; diff --git a/src/stories/Components/Tooltip/index.stories.mdx b/src/stories/Components/Tooltip/index.stories.mdx deleted file mode 100644 index 6d17194b..00000000 --- a/src/stories/Components/Tooltip/index.stories.mdx +++ /dev/null @@ -1,31 +0,0 @@ -import Tooltip from '../../../components/Tooltip'; -import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; -import { Preview, Positions, AbsolutePositionTest } from './Components'; - - - -# Tooltip - -## Preview - - - - - - - -## Positions - - - - - - - -## Position with Absolute - - - - - - diff --git a/src/stories/Styles/Shadows/index.stories.mdx b/src/stories/Styles/Shadows/index.stories.mdx index a664027c..3716ecd9 100644 --- a/src/stories/Styles/Shadows/index.stories.mdx +++ b/src/stories/Styles/Shadows/index.stories.mdx @@ -19,40 +19,28 @@ import { Box } from './components'; - 0px + + 0px + - 2px 드랍다운 + + 2px 드랍다운 + - 3px 버튼, 카드 + + 3px 버튼, 카드 + - 6px 토스트 + + 6px 토스트 + - 8px 탭 + + 8px 탭 + - 24px 모달 팝업 - - - -# Shadow With Class - -기본적인 루비콘의 그림자 시스템은 별도의 컴포넌트가 아니기 때문에, 클래스를 직접 입력하여 사용하게 됩니다. - - - -
- 1단계 그림자입니다 -
- - - -# Shadow With Component - -이렇게 클래스를 사용하여 그림자를 정의하는 것이 여러분의 어플리케이션 규칙에 맞지 않다면, Lubycon UI Kit이 제공하고 있는 `Shadow` 컴포넌트를 사용할 수도 있습니다. - - - - -
test
+ + 24px 모달 팝업 diff --git a/src/stories/Styles/Typography/data.ts b/src/stories/Styles/Typography/data.ts index 210b2a42..c1b2f8ad 100644 --- a/src/stories/Styles/Typography/data.ts +++ b/src/stories/Styles/Typography/data.ts @@ -1,4 +1,4 @@ -import { Typographys, FontWeights } from '../../../components/Text/types'; +import { Typographys, FontWeights } from '../../../utils/typography'; export const typographyNames: { [key in Typographys]: string } = { h1: '머릿말 1', diff --git a/src/stories/Styles/Typography/index.stories.mdx b/src/stories/Styles/Typography/index.stories.mdx index 09baea16..b0743137 100644 --- a/src/stories/Styles/Typography/index.stories.mdx +++ b/src/stories/Styles/Typography/index.stories.mdx @@ -1,5 +1,5 @@ import Text from '../../../components/Text'; -import { typographys, Typographys, FontWeights, fontWeights } from '../../../components/Text/types'; +import { typographys, Typographys, FontWeights, fontWeights } from '../../../utils/typography'; import { Meta, Story } from '@storybook/addon-docs/blocks'; import { typographyNames, fontWeightNames } from './data'; diff --git a/src/utils/mediaQuery.ts b/src/utils/mediaQuery.ts index f3cf9ba7..3fd73b3b 100644 --- a/src/utils/mediaQuery.ts +++ b/src/utils/mediaQuery.ts @@ -1,3 +1,5 @@ +import { CSSObject } from '@emotion/react'; + const breakpoints = { xs: 0, sm: 576, @@ -33,3 +35,11 @@ export function isMatchedLG() { export function isMatchedXL() { return !isMatchMinWidth('xs'); } + +export function mediaQuery(size: MediaQueryKeys, style: CSSObject): CSSObject { + return { + [`@media screen and (min-width: ${breakpoints[size]}px)`]: { + ...style, + }, + }; +} diff --git a/src/utils/sleep.ts b/src/utils/sleep.ts deleted file mode 100644 index 8b27999e..00000000 --- a/src/utils/sleep.ts +++ /dev/null @@ -1,5 +0,0 @@ -export function sleep(ms: number) { - return new Promise((resolve) => { - setTimeout(resolve, ms); - }); -} diff --git a/src/utils/typography.ts b/src/utils/typography.ts new file mode 100644 index 00000000..5296f969 --- /dev/null +++ b/src/utils/typography.ts @@ -0,0 +1,71 @@ +export type Typographys = + | 'h1' + | 'h2' + | 'h3' + | 'h4' + | 'h5' + | 'h6' + | 'subtitle' + | 'p1' + | 'p2' + | 'caption'; +export const typographys: Record = { + h1: { + fontSize: '2.625rem', + lineHeight: 1.5, + }, + h2: { + fontSize: '2rem', + lineHeight: 1.5, + }, + h3: { + fontSize: '1.75rem', + lineHeight: 1.5, + }, + h4: { + fontSize: '1.625rem', + lineHeight: 1.5, + }, + h5: { + fontSize: '1.5rem', + lineHeight: 1.5, + }, + h6: { + fontSize: '1.25rem', + lineHeight: 1.5, + }, + subtitle: { + fontSize: '1.125rem', + lineHeight: 1.7, + }, + p1: { + fontSize: '1rem', + lineHeight: 2, + }, + p2: { + fontSize: '0.9375rem', + lineHeight: 1.7, + }, + caption: { + fontSize: '0.75rem', + lineHeight: 1.6, + }, +}; + +export type FontWeights = 'light' | 'regular' | 'bold' | 'black'; +export const fontWeights: Record = { + light: 300, + regular: 400, + bold: 700, + black: 900, +}; + +export function getFontWeightCss(weight: FontWeights) { + return { + fontWeight: fontWeights[weight], + }; +} + +export function getTypographyCss(typo: Typographys) { + return typographys[typo]; +} diff --git a/yarn.lock b/yarn.lock index 009f4031..e443e9d1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2914,7 +2914,6 @@ __metadata: "@typescript-eslint/eslint-plugin": ^4.6.1 "@typescript-eslint/parser": ^4.6.1 "@yarnpkg/pnpify": ^3.0.0-rc.10 - autoprefixer: ^9.0.0 babel-loader: ^8.2.1 classnames: ^2.2.6 eslint: ^7.14.0 @@ -2936,7 +2935,6 @@ __metadata: resize-observer-polyfill: ^1.5.1 rollup: ^2.33.1 rollup-plugin-peer-deps-external: ^2.2.4 - rollup-plugin-postcss: ^3.1.8 rollup-plugin-typescript2: ^0.29.0 sass: ^1.29.0 semantic-release: ^17.2.4 @@ -6454,13 +6452,6 @@ __metadata: languageName: node linkType: hard -"ansi-styles@npm:^2.2.1": - version: 2.2.1 - resolution: "ansi-styles@npm:2.2.1" - checksum: 108c7496372982f1ee53f3f09975de89cc771d2f7c89a32d56ab7a542f67b7de97391c9c16b43b39eb7ea176d3cfbb15975b6b355ae827f15f5a457b1b9dec31 - languageName: node - linkType: hard - "ansi-styles@npm:^3.2.0, ansi-styles@npm:^3.2.1": version: 3.2.1 resolution: "ansi-styles@npm:3.2.1" @@ -6858,7 +6849,7 @@ __metadata: languageName: node linkType: hard -"autoprefixer@npm:^9.0.0, autoprefixer@npm:^9.6.1, autoprefixer@npm:^9.8.6": +"autoprefixer@npm:^9.6.1, autoprefixer@npm:^9.8.6": version: 9.8.6 resolution: "autoprefixer@npm:9.8.6" dependencies: @@ -8112,19 +8103,6 @@ __metadata: languageName: node linkType: hard -"chalk@npm:^1.1.3": - version: 1.1.3 - resolution: "chalk@npm:1.1.3" - dependencies: - ansi-styles: ^2.2.1 - escape-string-regexp: ^1.0.2 - has-ansi: ^2.0.0 - strip-ansi: ^3.0.0 - supports-color: ^2.0.0 - checksum: bc2df54f6da63d0918254aa2d79dd87f75442e35c751b07f5ca37e5886dd0963472e37ee8c5fa6da27710fdfa0e10779c72be4a6c860c67e96769ba63ee2901e - languageName: node - linkType: hard - "chalk@npm:^3.0.0": version: 3.0.0 resolution: "chalk@npm:3.0.0" @@ -8849,15 +8827,6 @@ __metadata: languageName: node linkType: hard -"concat-with-sourcemaps@npm:^1.1.0": - version: 1.1.0 - resolution: "concat-with-sourcemaps@npm:1.1.0" - dependencies: - source-map: ^0.6.1 - checksum: fdde7c621e5f8e1015670294ec5d524787b0eb53c422222dc10a0b2b2762a310197043aba526a3ed5f8933fb44e68d40e8119723bbf20f1f95d43699960f6933 - languageName: node - linkType: hard - "configstore@npm:^3.0.0": version: 3.1.5 resolution: "configstore@npm:3.1.5" @@ -9373,20 +9342,6 @@ __metadata: languageName: node linkType: hard -"css-modules-loader-core@npm:^1.1.0": - version: 1.1.0 - resolution: "css-modules-loader-core@npm:1.1.0" - dependencies: - icss-replace-symbols: 1.1.0 - postcss: 6.0.1 - postcss-modules-extract-imports: 1.1.0 - postcss-modules-local-by-default: 1.2.0 - postcss-modules-scope: 1.1.0 - postcss-modules-values: 1.3.0 - checksum: 883fef7c950c6df72cfcf6af8935bd96e4c9be7866b9e1907cf71018a4a5ac87fe4147c2d82d4018cce51bf80e3ca7fa5db29e24ada080a9e05c96875501050d - languageName: node - linkType: hard - "css-prefers-color-scheme@npm:^3.1.1": version: 3.1.1 resolution: "css-prefers-color-scheme@npm:3.1.1" @@ -9430,16 +9385,6 @@ __metadata: languageName: node linkType: hard -"css-selector-tokenizer@npm:^0.7.0": - version: 0.7.3 - resolution: "css-selector-tokenizer@npm:0.7.3" - dependencies: - cssesc: ^3.0.0 - fastparse: ^1.1.2 - checksum: b4c0095098fe69fb079ca8b9e42767d5ae3222b752276a94be88d8ad68b485478109b96d11d646393edfa055a5f6d3a2269e384b821d645d35d1324f2e17fb2b - languageName: node - linkType: hard - "css-tree@npm:1.0.0-alpha.37": version: 1.0.0-alpha.37 resolution: "css-tree@npm:1.0.0-alpha.37" @@ -11588,13 +11533,6 @@ __metadata: languageName: node linkType: hard -"fastparse@npm:^1.1.2": - version: 1.1.2 - resolution: "fastparse@npm:1.1.2" - checksum: a701639184b1507122e04c2863b96630e1d229f755369fd0aaf096db4d4575ccc2db475ef1ec171fe631a2df90ee38070afd520694fa39dd5ca4041a7716917d - languageName: node - linkType: hard - "fastq@npm:^1.6.0": version: 1.11.1 resolution: "fastq@npm:1.11.1" @@ -12312,15 +12250,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"generic-names@npm:^2.0.1": - version: 2.0.1 - resolution: "generic-names@npm:2.0.1" - dependencies: - loader-utils: ^1.1.0 - checksum: 1ed17b3c9a635cce5e740ca6e983889e41f65e5e1b4ae500d6f64dc2984cad400a7a86f9bd3c4b598a63e5b69b03cbe0155acf6e958909eece71efb50da76307 - languageName: node - linkType: hard - "genfun@npm:^4.0.1": version: 4.0.1 resolution: "genfun@npm:4.0.1" @@ -12847,15 +12776,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"has-ansi@npm:^2.0.0": - version: 2.0.0 - resolution: "has-ansi@npm:2.0.0" - dependencies: - ansi-regex: ^2.0.0 - checksum: c6805f5d01ced45ba247ff2b8c914f401e70aa9086552d8eafbdf6bc0b0e38ea4a3bf1a387d100ff5f07e5854bca96532a01777820a16be2cdf8cf6582091bad - languageName: node - linkType: hard - "has-bigints@npm:^1.0.1": version: 1.0.1 resolution: "has-bigints@npm:1.0.1" @@ -12863,13 +12783,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"has-flag@npm:^1.0.0": - version: 1.0.0 - resolution: "has-flag@npm:1.0.0" - checksum: 556423170e15c694061a69052773114159c18ddf4ca0c72912591343f9568878c0ab29c16ab901f3466eaca25faf5ca4b1c6831b6795a3a3cd5d1606bdc6fa1f - languageName: node - linkType: hard - "has-flag@npm:^3.0.0": version: 3.0.0 resolution: "has-flag@npm:3.0.0" @@ -13490,13 +13403,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"icss-replace-symbols@npm:1.1.0, icss-replace-symbols@npm:^1.1.0": - version: 1.1.0 - resolution: "icss-replace-symbols@npm:1.1.0" - checksum: 6529ec8274f670e4ed5ded7d48f3f6d6f1576078353f3a363e6183f0be95166c74b4e2a93e1557d1852c59d0ce573ad5e91329e65a8fe94ab88fbb12a02f0ea9 - languageName: node - linkType: hard - "icss-utils@npm:^4.0.0, icss-utils@npm:^4.1.1": version: 4.1.1 resolution: "icss-utils@npm:4.1.1" @@ -13586,15 +13492,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"import-cwd@npm:^3.0.0": - version: 3.0.0 - resolution: "import-cwd@npm:3.0.0" - dependencies: - import-from: ^3.0.0 - checksum: 5689cfc5d26336ed9ae15a2c725d881845a2455a75fdd92cf715fa92e13ede901cf95c7bb48aeca9b7612f23d53380ff762defc804403f653eedcf53c37e9e5c - languageName: node - linkType: hard - "import-fresh@npm:^2.0.0": version: 2.0.0 resolution: "import-fresh@npm:2.0.0" @@ -18151,7 +18048,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"p-queue@npm:^6.0.0, p-queue@npm:^6.3.0": +"p-queue@npm:^6.0.0": version: 6.6.2 resolution: "p-queue@npm:6.6.2" dependencies: @@ -18570,13 +18467,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"pify@npm:^5.0.0": - version: 5.0.0 - resolution: "pify@npm:5.0.0" - checksum: 4c28d29597a49bbf320c0c6526fac7858d53b8398a46bfa6ed1a120a922773c7ef50bea166e27952bbc476bce1c72cf3e7d648462ac82e704e62431bdec95cec - languageName: node - linkType: hard - "pinkie-promise@npm:^2.0.0": version: 2.0.1 resolution: "pinkie-promise@npm:2.0.1" @@ -19006,7 +18896,7 @@ fsevents@^1.2.7: languageName: node linkType: hard -"postcss-load-config@npm:^2.0.0, postcss-load-config@npm:^2.1.0": +"postcss-load-config@npm:^2.0.0": version: 2.1.2 resolution: "postcss-load-config@npm:2.1.2" dependencies: @@ -19136,15 +19026,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"postcss-modules-extract-imports@npm:1.1.0": - version: 1.1.0 - resolution: "postcss-modules-extract-imports@npm:1.1.0" - dependencies: - postcss: ^6.0.1 - checksum: 49e40c921f0c783998a8ea9757abdfcbd216823c5e9e1240a64fca993109937ddff6dc17719c4439194b14269a1902169abba610d23dee8cc25d6abf997079ef - languageName: node - linkType: hard - "postcss-modules-extract-imports@npm:^2.0.0": version: 2.0.0 resolution: "postcss-modules-extract-imports@npm:2.0.0" @@ -19154,16 +19035,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"postcss-modules-local-by-default@npm:1.2.0": - version: 1.2.0 - resolution: "postcss-modules-local-by-default@npm:1.2.0" - dependencies: - css-selector-tokenizer: ^0.7.0 - postcss: ^6.0.1 - checksum: 221d2c2467bcb959c084f2c0ed746d5a312226393c80325096c00a7bbddaadee99c1ff5f8b037aa09b1f7a545e694725f8a2c991a9d543c04ce46f87adb44077 - languageName: node - linkType: hard - "postcss-modules-local-by-default@npm:^3.0.2, postcss-modules-local-by-default@npm:^3.0.3": version: 3.0.3 resolution: "postcss-modules-local-by-default@npm:3.0.3" @@ -19176,16 +19047,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"postcss-modules-scope@npm:1.1.0": - version: 1.1.0 - resolution: "postcss-modules-scope@npm:1.1.0" - dependencies: - css-selector-tokenizer: ^0.7.0 - postcss: ^6.0.1 - checksum: 397b0942681953c46939537453fb9999d150845afd84dd97513fbe22702cd61f471110f5ae2b0d429be198cd1de87e98e76ca910cf02ecbdd07f558bdb551231 - languageName: node - linkType: hard - "postcss-modules-scope@npm:^2.2.0": version: 2.2.0 resolution: "postcss-modules-scope@npm:2.2.0" @@ -19196,16 +19057,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"postcss-modules-values@npm:1.3.0": - version: 1.3.0 - resolution: "postcss-modules-values@npm:1.3.0" - dependencies: - icss-replace-symbols: ^1.1.0 - postcss: ^6.0.1 - checksum: 839cc932f76930548af1cef2d4cefb7d4833a71561aad0663c29359e083c31e1c5cddc9c5d4dc78d3a22f622453cdadd776138164a9efdc76c09e2a2828fc68c - languageName: node - linkType: hard - "postcss-modules-values@npm:^3.0.0": version: 3.0.0 resolution: "postcss-modules-values@npm:3.0.0" @@ -19216,19 +19067,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"postcss-modules@npm:^2.0.0": - version: 2.0.0 - resolution: "postcss-modules@npm:2.0.0" - dependencies: - css-modules-loader-core: ^1.1.0 - generic-names: ^2.0.1 - lodash.camelcase: ^4.3.0 - postcss: ^7.0.1 - string-hash: ^1.1.1 - checksum: a592e1ea16f065320ccbe3bc8ce95c40810a08c7c7fc266ff0e751d44f2909fe3082873ab97c487c2291b0e3ba326fb2d84d91db1f0be425b7145b0a6dfcbfa2 - languageName: node - linkType: hard - "postcss-nesting@npm:^7.0.0": version: 7.0.1 resolution: "postcss-nesting@npm:7.0.1" @@ -19585,17 +19423,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"postcss@npm:6.0.1": - version: 6.0.1 - resolution: "postcss@npm:6.0.1" - dependencies: - chalk: ^1.1.3 - source-map: ^0.5.6 - supports-color: ^3.2.3 - checksum: 3c87bd463e86e19077dc71ab1051a5831c6544479079db1dcf50b677876cbd79048f570669e3d58056e45d4bce9925eda4749b261bc096e16fde73342ac492b4 - languageName: node - linkType: hard - "postcss@npm:7.0.36, postcss@npm:^7, postcss@npm:^7.0.0, postcss@npm:^7.0.1, postcss@npm:^7.0.14, postcss@npm:^7.0.17, postcss@npm:^7.0.2, postcss@npm:^7.0.26, postcss@npm:^7.0.27, postcss@npm:^7.0.32, postcss@npm:^7.0.36, postcss@npm:^7.0.5, postcss@npm:^7.0.6": version: 7.0.36 resolution: "postcss@npm:7.0.36" @@ -19607,17 +19434,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"postcss@npm:^6.0.1": - version: 6.0.23 - resolution: "postcss@npm:6.0.23" - dependencies: - chalk: ^2.4.1 - source-map: ^0.6.1 - supports-color: ^5.4.0 - checksum: 9b61abdfb366491debc6a633ba3703ae43c674b6c1c64def54e131c8ec01862fc95b3271bde221db805389fc76c3b3f1447b5a9c1d0b332c53cfcc9bfe1b1fa6 - languageName: node - linkType: hard - "postcss@npm:^8.1.0": version: 8.3.5 resolution: "postcss@npm:8.3.5" @@ -19830,13 +19646,6 @@ fsevents@^1.2.7: languageName: node linkType: hard -"promise.series@npm:^0.2.0": - version: 0.2.0 - resolution: "promise.series@npm:0.2.0" - checksum: 51fb6c8e50d756a1ce934407fd2bc8f3dcee2bf280c7bbd8cc95925f58358625059adf4437801556d6d381d84e91b6e98fda9780e601fe56f81a856ea8f95e25 - languageName: node - linkType: hard - "promise@npm:^7.3.1": version: 7.3.1 resolution: "promise@npm:7.3.1" @@ -21279,7 +21088,7 @@ resolve@1.18.1: languageName: node linkType: hard -"resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.16.1, resolve@^1.17.0, resolve@^1.18.1, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.3.2, resolve@^1.8.1": +"resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.17.0, resolve@^1.18.1, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.3.2, resolve@^1.8.1": version: 1.20.0 resolution: "resolve@npm:1.20.0" dependencies: @@ -21318,7 +21127,7 @@ resolve@^2.0.0-next.3: languageName: node linkType: hard -"resolve@patch:resolve@^1.10.0#builtin, resolve@patch:resolve@^1.12.0#builtin, resolve@patch:resolve@^1.13.1#builtin, resolve@patch:resolve@^1.14.2#builtin, resolve@patch:resolve@^1.16.1#builtin, resolve@patch:resolve@^1.17.0#builtin, resolve@patch:resolve@^1.18.1#builtin, resolve@patch:resolve@^1.19.0#builtin, resolve@patch:resolve@^1.20.0#builtin, resolve@patch:resolve@^1.3.2#builtin, resolve@patch:resolve@^1.8.1#builtin": +"resolve@patch:resolve@^1.10.0#builtin, resolve@patch:resolve@^1.12.0#builtin, resolve@patch:resolve@^1.13.1#builtin, resolve@patch:resolve@^1.14.2#builtin, resolve@patch:resolve@^1.17.0#builtin, resolve@patch:resolve@^1.18.1#builtin, resolve@patch:resolve@^1.19.0#builtin, resolve@patch:resolve@^1.20.0#builtin, resolve@patch:resolve@^1.3.2#builtin, resolve@patch:resolve@^1.8.1#builtin": version: 1.20.0 resolution: "resolve@patch:resolve@npm%3A1.20.0#builtin::version=1.20.0&hash=3388aa" dependencies: @@ -21487,28 +21296,6 @@ resolve@^2.0.0-next.3: languageName: node linkType: hard -"rollup-plugin-postcss@npm:^3.1.8": - version: 3.1.8 - resolution: "rollup-plugin-postcss@npm:3.1.8" - dependencies: - chalk: ^4.0.0 - concat-with-sourcemaps: ^1.1.0 - cssnano: ^4.1.10 - import-cwd: ^3.0.0 - p-queue: ^6.3.0 - pify: ^5.0.0 - postcss: ^7.0.27 - postcss-load-config: ^2.1.0 - postcss-modules: ^2.0.0 - promise.series: ^0.2.0 - resolve: ^1.16.1 - rollup-pluginutils: ^2.8.2 - safe-identifier: ^0.4.1 - style-inject: ^0.3.0 - checksum: 7e5bfe3d8a426c3ae0e6e1b5560f18c8443b6f60f83e1288ac8302b0216b3a29e57294400611726235473680bd1a193e12217c61ee5b38521b5c55dd437e374f - languageName: node - linkType: hard - "rollup-plugin-terser@npm:^5.3.1": version: 5.3.1 resolution: "rollup-plugin-terser@npm:5.3.1" @@ -21638,13 +21425,6 @@ resolve@^2.0.0-next.3: languageName: node linkType: hard -"safe-identifier@npm:^0.4.1": - version: 0.4.2 - resolution: "safe-identifier@npm:0.4.2" - checksum: 659986cb9f995387032675b89eed8a0a129af7fece421ed0488072644b7c29266aa76c01576d1c4eb24764048da9be3cc65ab643a8732be277dae0d7590cb086 - languageName: node - linkType: hard - "safe-regex@npm:^1.1.0": version: 1.1.0 resolution: "safe-regex@npm:1.1.0" @@ -22752,13 +22532,6 @@ resolve@^2.0.0-next.3: languageName: node linkType: hard -"string-hash@npm:^1.1.1": - version: 1.1.3 - resolution: "string-hash@npm:1.1.3" - checksum: 178d855be2999a4ae2070d578e872574370224d86ca5d7b45bd709562a9acca61ac165a866c0b8b39e1cf2c181d781b96735725b7036e10b94196b261eb8229e - languageName: node - linkType: hard - "string-length@npm:^4.0.1": version: 4.0.2 resolution: "string-length@npm:4.0.2" @@ -23019,13 +22792,6 @@ resolve@^2.0.0-next.3: languageName: node linkType: hard -"style-inject@npm:^0.3.0": - version: 0.3.0 - resolution: "style-inject@npm:0.3.0" - checksum: 1ff06fa7d2f1724ca333c402eff1b221a4bc829c617743639e02e7e4ee1ee276443994917c34521c3b826805d84e8e4bbc69e8f74a21fcda87d4647c624f377d - languageName: node - linkType: hard - "style-loader@npm:1.3.0, style-loader@npm:^1.3.0": version: 1.3.0 resolution: "style-loader@npm:1.3.0" @@ -23065,23 +22831,7 @@ resolve@^2.0.0-next.3: languageName: node linkType: hard -"supports-color@npm:^2.0.0": - version: 2.0.0 - resolution: "supports-color@npm:2.0.0" - checksum: 5d6fb449e29f779cc639756f0d6b9ab6138048e753683cd2c647f36a9254714051909a5f569e6aa83c5310c8dfe8a1f481967e02bef401ac8eed46ee0950d779 - languageName: node - linkType: hard - -"supports-color@npm:^3.2.3": - version: 3.2.3 - resolution: "supports-color@npm:3.2.3" - dependencies: - has-flag: ^1.0.0 - checksum: d26b4f5f7ab4408e3ecf5809896a399a0d388b948701a8958bb6610ca30aa837e75d56d7dfb5e175f8ffd92431dc1e149faa6183cf166178ea63c74e974a87ce - languageName: node - linkType: hard - -"supports-color@npm:^5.3.0, supports-color@npm:^5.4.0": +"supports-color@npm:^5.3.0": version: 5.5.0 resolution: "supports-color@npm:5.5.0" dependencies: