From 54b6d61e9dfda8ac03067435e7b4acf81c4ea79f Mon Sep 17 00:00:00 2001 From: nz10387 Date: Mon, 17 Jun 2024 20:52:57 +0900 Subject: [PATCH] =?UTF-8?q?feat(@zakelstorm/blog,=20@zakelstorm/ui):=20toa?= =?UTF-8?q?st=20animation=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/blog/README.md | 83 ++++++++++--------- apps/blog/features/List/CommentList.tsx | 8 +- apps/blog/styles/globals.css | 21 ----- packages/ui/.storybook/main.ts | 2 +- packages/ui/.storybook/preview.ts | 2 +- packages/ui/.storybook/tailwind.css | 3 + .../ui/components/Button/Button.stories.tsx | 2 +- packages/ui/components/Button/index.tsx | 2 +- .../components/Input/theme/outlined/index.ts | 2 +- .../ui/components/Popover/Popover.stories.tsx | 4 +- .../ui/components/Popover/PopoverContent.tsx | 19 ++--- .../ui/components/Popover/PopoverContext.tsx | 3 +- .../ui/components/Popover/PopoverHandler.tsx | 12 ++- packages/ui/components/Popover/index.tsx | 42 ++++------ .../ui/components/Spinner/Spinner.stories.tsx | 2 +- packages/ui/components/Spinner/index.tsx | 5 +- packages/ui/hooks/Toast/Description.tsx | 3 +- packages/ui/hooks/Toast/Root.tsx | 2 +- packages/ui/hooks/Toast/Toast.stories.tsx | 39 +++++++++ packages/ui/hooks/Toast/ViewPort.tsx | 2 +- packages/ui/tailwind.config.js | 31 ++++++- packages/ui/tsconfig.json | 3 +- packages/ui/util/withUI.ts | 14 ++-- 23 files changed, 167 insertions(+), 139 deletions(-) create mode 100644 packages/ui/.storybook/tailwind.css create mode 100644 packages/ui/hooks/Toast/Toast.stories.tsx diff --git a/apps/blog/README.md b/apps/blog/README.md index 9e1bda8..89d4c46 100755 --- a/apps/blog/README.md +++ b/apps/blog/README.md @@ -1,38 +1,45 @@ -## Getting Started - -First, run the development server: - -```bash -yarn dev -``` - -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. - -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. - -To create [API routes](https://nextjs.org/docs/app/building-your-application/routing/router-handlers) add an `api/` directory to the `app/` directory with a `route.ts` file. For individual endpoints, create a subfolder in the `api` directory, like `api/hello/route.ts` would map to [http://localhost:3000/api/hello](http://localhost:3000/api/hello). - -## Learn More - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn/foundations/about-nextjs) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! - -## Deploy on Vercel - -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_source=github.com&utm_medium=referral&utm_campaign=turborepo-readme) from the creators of Next.js. - -Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. - -# Sanity Clean Content Studio - -Congratulations, you have now installed the Sanity Content Studio, an open source real-time content editing environment connected to the Sanity backend. - -Now you can do the following things: - -- [Read “getting started” in the docs](https://www.sanity.io/docs/introduction/getting-started?utm_source=readme) -- [Join the community Slack](https://slack.sanity.io/?utm_source=readme) -- [Extend and build plugins](https://www.sanity.io/docs/content-studio/extending?utm_source=readme) +## 기술 스택 + + + + + + + + + + + + + + + + + + + + + + + + + + +
구분기술 스택
common + + +
frontend + + + + + +
backend + +
CI/CD + +
deployment + + + +
diff --git a/apps/blog/features/List/CommentList.tsx b/apps/blog/features/List/CommentList.tsx index 155e2dd..cd8bff0 100644 --- a/apps/blog/features/List/CommentList.tsx +++ b/apps/blog/features/List/CommentList.tsx @@ -75,10 +75,10 @@ export const CommentList = ({ contents, deleteAction }: CommentListProps) => { placement='bottom-end'> - + @@ -104,9 +104,9 @@ export const CommentList = ({ contents, deleteAction }: CommentListProps) => { /> - + diff --git a/apps/blog/styles/globals.css b/apps/blog/styles/globals.css index 56e3387..3eed488 100755 --- a/apps/blog/styles/globals.css +++ b/apps/blog/styles/globals.css @@ -30,27 +30,6 @@ a { @apply no-underline; } -@media (max-width: 1100px) { - html, - body { - font-size: 12px; - } -} - -@media (max-width: 500px) { - html, - body { - font-size: 8px; - } -} - -@media (max-width: 400px) { - html, - body { - font-size: 6px; - } -} - @layer base { h1 { @apply text-2xl; diff --git a/packages/ui/.storybook/main.ts b/packages/ui/.storybook/main.ts index 0a22f1f..0e76eaf 100644 --- a/packages/ui/.storybook/main.ts +++ b/packages/ui/.storybook/main.ts @@ -12,7 +12,7 @@ function getAbsolutePath(value: string): any { const config: StorybookConfig = { stories: [ '../components/**/*.mdx', - '../components/**/*.stories.@(js|jsx|mjs|ts|tsx)', + '../{components,hooks}/**/*.stories.@(js|jsx|mjs|ts|tsx)', ], addons: [ getAbsolutePath('@storybook/addon-links'), diff --git a/packages/ui/.storybook/preview.ts b/packages/ui/.storybook/preview.ts index 26bd198..14a9ffd 100644 --- a/packages/ui/.storybook/preview.ts +++ b/packages/ui/.storybook/preview.ts @@ -1,5 +1,5 @@ import type { Preview } from '@storybook/react' -import '../index.css' +import './tailwind.css' const preview: Preview = { parameters: { diff --git a/packages/ui/.storybook/tailwind.css b/packages/ui/.storybook/tailwind.css new file mode 100644 index 0000000..b5c61c9 --- /dev/null +++ b/packages/ui/.storybook/tailwind.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/packages/ui/components/Button/Button.stories.tsx b/packages/ui/components/Button/Button.stories.tsx index d94f1f0..1a93d2e 100644 --- a/packages/ui/components/Button/Button.stories.tsx +++ b/packages/ui/components/Button/Button.stories.tsx @@ -1,7 +1,7 @@ import { Meta, StoryObj } from '@storybook/react' -import { buttonStyle } from './theme' import { Button } from './index' +import { buttonStyle } from './theme' const meta: Meta = { component: Button, diff --git a/packages/ui/components/Button/index.tsx b/packages/ui/components/Button/index.tsx index 115cf39..bfedd15 100644 --- a/packages/ui/components/Button/index.tsx +++ b/packages/ui/components/Button/index.tsx @@ -3,7 +3,7 @@ import { ComponentProps, forwardRef, memo, PropsWithChildren } from 'react' import { twMerge } from 'tailwind-merge' import { recordValuesToString } from '../../util/recordValuesToString' -import Spinner from '../Spinner' +import { Spinner } from '../Spinner' import { buttonStyle } from './theme' type variant = 'filled' | 'outlined' | 'text' diff --git a/packages/ui/components/Input/theme/outlined/index.ts b/packages/ui/components/Input/theme/outlined/index.ts index fce8d3a..2154946 100644 --- a/packages/ui/components/Input/theme/outlined/index.ts +++ b/packages/ui/components/Input/theme/outlined/index.ts @@ -25,7 +25,7 @@ export const inputOutlined = { position: '-top-1.5', fontSize: 'peer-placeholder-shown:text-sm', floated: { - fontSize: 'text-[1rem] peer-focus:text-[1rem]', + fontSize: 'text-[16px] peer-focus:text-[16px]', }, before: { content: "before:content[' ']", diff --git a/packages/ui/components/Popover/Popover.stories.tsx b/packages/ui/components/Popover/Popover.stories.tsx index 24f8f18..daa86df 100644 --- a/packages/ui/components/Popover/Popover.stories.tsx +++ b/packages/ui/components/Popover/Popover.stories.tsx @@ -1,8 +1,8 @@ import { Meta, StoryObj } from '@storybook/react' -import { popoverStyle } from './theme' -import { Popover, PopoverContent, PopoverHandler } from './index' import { Button } from '../Button' +import { Popover, PopoverContent, PopoverHandler } from './index' +import { popoverStyle } from './theme' const meta: Meta = { component: Popover, diff --git a/packages/ui/components/Popover/PopoverContent.tsx b/packages/ui/components/Popover/PopoverContent.tsx index 2708107..b7d48d9 100644 --- a/packages/ui/components/Popover/PopoverContent.tsx +++ b/packages/ui/components/Popover/PopoverContent.tsx @@ -2,25 +2,22 @@ // @floating-ui import { - FloatingPortal, FloatingFocusManager, + FloatingPortal, useMergeRefs, } from '@floating-ui/react' - -// framer-motion -import { AnimatePresence, m, LazyMotion, domAnimation } from 'framer-motion' - // utils import classnames from 'classnames' +// framer-motion +import { AnimatePresence, domAnimation, LazyMotion, m } from 'framer-motion' +import { ComponentProps, FC, forwardRef, memo } from 'react' import { twMerge } from 'tailwind-merge' -// context -import { popoverStyle } from './theme' -import { usePopover } from './PopoverContext' - import { recordValuesToString } from '../../util/recordValuesToString' import { NewAnimatePresenceProps } from '../../util/type' -import { ComponentProps, FC, forwardRef, memo } from 'react' +import { usePopover } from './PopoverContext' +// context +import { popoverStyle } from './theme' export type PopoverContentProps = ComponentProps<'div'> @@ -93,5 +90,3 @@ export const PopoverContent = memo( ) PopoverContent.displayName = 'PopoverContent' - -export default PopoverContent diff --git a/packages/ui/components/Popover/PopoverContext.tsx b/packages/ui/components/Popover/PopoverContext.tsx index 37480ae..0cb892d 100644 --- a/packages/ui/components/Popover/PopoverContext.tsx +++ b/packages/ui/components/Popover/PopoverContext.tsx @@ -1,7 +1,8 @@ 'use client' import { FloatingContext, ReferenceType, Strategy } from '@floating-ui/react' +import { createContext, HTMLProps, ReactNode, Ref, useContext } from 'react' + import { Animation } from '../../util/type' -import { HTMLProps, ReactNode, Ref, createContext, useContext } from 'react' export interface ContextValue { open?: boolean diff --git a/packages/ui/components/Popover/PopoverHandler.tsx b/packages/ui/components/Popover/PopoverHandler.tsx index 00c4f94..0feaee0 100644 --- a/packages/ui/components/Popover/PopoverHandler.tsx +++ b/packages/ui/components/Popover/PopoverHandler.tsx @@ -1,16 +1,16 @@ // @floating-ui import { useMergeRefs } from '@floating-ui/react' - -// context -import { usePopover } from './PopoverContext' import { - ComponentProps, - ReactNode, cloneElement, + ComponentProps, forwardRef, memo, + ReactNode, } from 'react' +// context +import { usePopover } from './PopoverContext' + export interface PopoverHandlerProps extends ComponentProps { children: ReactNode | ComponentProps } @@ -33,5 +33,3 @@ export const PopoverHandler = memo( ) PopoverHandler.displayName = 'PopoverHandler' - -export default PopoverHandler diff --git a/packages/ui/components/Popover/index.tsx b/packages/ui/components/Popover/index.tsx index e8be3c7..6f86c90 100644 --- a/packages/ui/components/Popover/index.tsx +++ b/packages/ui/components/Popover/index.tsx @@ -1,41 +1,31 @@ 'use client' -import { - Dispatch, - PropsWithChildren, - Ref, - useEffect, - useMemo, - useState, -} from 'react' - // @floating-ui import { - offset as fuiOffset, + autoUpdate, flip, + offset as fuiOffset, + Placement, shift, - autoUpdate, + useClick, + useDismiss, + UseDismissProps, useFloating, + useId, useInteractions, useRole, - useDismiss, - useId, - useClick, - Placement, - UseDismissProps, } from '@floating-ui/react' - // utils import { merge } from 'lodash-es' +import { PropsWithChildren, Ref, useEffect, useMemo, useState } from 'react' -// context -import { popoverStyle } from './theme' +import { Animation } from '../../util/type' +import { PopoverContent, PopoverContentProps } from './PopoverContent' import { PopoverContextProvider, usePopover } from './PopoverContext' - // popover components import { PopoverHandler, PopoverHandlerProps } from './PopoverHandler' -import { PopoverContent, PopoverContentProps } from './PopoverContent' -import { Animation } from '../../util/type' +// context +import { popoverStyle } from './theme' export interface PopoverProps extends PropsWithChildren { open?: boolean @@ -151,9 +141,5 @@ const Popover = ({ Popover.displayName = 'Popover' -export type { PopoverHandlerProps, PopoverContentProps } -export { Popover, PopoverHandler, PopoverContent, usePopover } -export default Object.assign(Popover, { - Handler: PopoverHandler, - Content: PopoverContent, -}) +export type { PopoverContentProps, PopoverHandlerProps } +export { Popover, PopoverContent, PopoverHandler, usePopover } diff --git a/packages/ui/components/Spinner/Spinner.stories.tsx b/packages/ui/components/Spinner/Spinner.stories.tsx index fcb0745..abd44cb 100644 --- a/packages/ui/components/Spinner/Spinner.stories.tsx +++ b/packages/ui/components/Spinner/Spinner.stories.tsx @@ -1,7 +1,7 @@ import { Meta, StoryObj } from '@storybook/react' -import { spinnerStyle } from './theme' import { Spinner } from './index' +import { spinnerStyle } from './theme' const meta: Meta = { component: Spinner, diff --git a/packages/ui/components/Spinner/index.tsx b/packages/ui/components/Spinner/index.tsx index 87d6a7e..0370267 100644 --- a/packages/ui/components/Spinner/index.tsx +++ b/packages/ui/components/Spinner/index.tsx @@ -1,7 +1,6 @@ -import React, { ComponentProps, forwardRef } from 'react' - // utils import classnames from 'classnames' +import { ComponentProps, forwardRef } from 'react' import { twMerge } from 'tailwind-merge' import { recordValuesToString } from '../../util/recordValuesToString' @@ -57,5 +56,3 @@ export const Spinner = forwardRef< }) Spinner.displayName = 'Spinner' - -export default Spinner diff --git a/packages/ui/hooks/Toast/Description.tsx b/packages/ui/hooks/Toast/Description.tsx index b66e22f..fa48f54 100644 --- a/packages/ui/hooks/Toast/Description.tsx +++ b/packages/ui/hooks/Toast/Description.tsx @@ -1,6 +1,5 @@ -import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react' import * as Toast from '@radix-ui/react-toast' - +import { ComponentPropsWithoutRef, ElementRef, forwardRef } from 'react' import { twMerge } from 'tailwind-merge' export const ToastDescription = forwardRef< diff --git a/packages/ui/hooks/Toast/Root.tsx b/packages/ui/hooks/Toast/Root.tsx index 7827e59..88b162d 100644 --- a/packages/ui/hooks/Toast/Root.tsx +++ b/packages/ui/hooks/Toast/Root.tsx @@ -10,7 +10,7 @@ export const ToastRoot = forwardRef< null, +} + +export default meta + +export const Default = { + render: () => { + return ( + <> + + + + ) + }, +} + +const OpenToastButton = () => { + const { toast } = useToast() + + return ( + + ) +} diff --git a/packages/ui/hooks/Toast/ViewPort.tsx b/packages/ui/hooks/Toast/ViewPort.tsx index 8631a46..8edb884 100644 --- a/packages/ui/hooks/Toast/ViewPort.tsx +++ b/packages/ui/hooks/Toast/ViewPort.tsx @@ -9,7 +9,7 @@ export const ToastViewport = forwardRef< { - return merge({}, asdf, { - content: [], - theme: { - extend: {}, - }, - plugins: [], - }) +import config from '../tailwind.config.js' + +export const withUI = (target: any) => { + return merge({}, target, omit(config, 'content')) }