) {
6 | const { icon, content, action, style } = props;
7 |
8 | return (
9 |
10 |
11 | {action ? : null}
12 |
13 | );
14 | }
15 |
16 | export default forwardRef(ToastComponent);
17 |
--------------------------------------------------------------------------------
/packages/ui/Toast/icons/alert.tsx:
--------------------------------------------------------------------------------
1 | function ToastIconAlert() {
2 | return (
3 |
27 | );
28 | }
29 |
30 | export default ToastIconAlert;
31 |
--------------------------------------------------------------------------------
/packages/ui/Toast/icons/error.tsx:
--------------------------------------------------------------------------------
1 | function ToastIconError() {
2 | return (
3 |
27 | );
28 | }
29 |
30 | export default ToastIconError;
31 |
--------------------------------------------------------------------------------
/packages/ui/Toast/icons/index.ts:
--------------------------------------------------------------------------------
1 | export { default as ToastIconSuccess } from "./success";
2 | export { default as ToastIconAlert } from "./alert";
3 | export { default as ToastIconError } from "./error";
--------------------------------------------------------------------------------
/packages/ui/Toast/icons/success.tsx:
--------------------------------------------------------------------------------
1 | function ToastIconSuccess() {
2 | return (
3 |
19 | );
20 | }
21 |
22 | export default ToastIconSuccess;
23 |
--------------------------------------------------------------------------------
/packages/ui/Toast/index.tsx:
--------------------------------------------------------------------------------
1 | export { default as ToastProvider } from "./ToastProvider";
2 | export { default as useToast } from "./useToast";
3 | export { default as Toast } from './Toast';
4 | export type { ToastOptionType } from "./types";
5 |
--------------------------------------------------------------------------------
/packages/ui/Toast/types.ts:
--------------------------------------------------------------------------------
1 | export interface Children { children: React.ReactNode }
2 |
3 | export type StrictPropsWithChildren = P & Children;
4 |
5 | export type DefaultIconType = "success" | "alert" | "error";
6 |
7 | export type ActionType = {
8 | name: string;
9 | } & React.ButtonHTMLAttributes;
10 |
11 | export type Styles = "root" | "content" | "action";
12 |
13 | export type StyleType = {
14 | [key in Styles]?: React.CSSProperties;
15 | };
16 |
17 | export interface ToastOptionType {
18 | icon?: DefaultIconType | React.ReactElement;
19 | content: string;
20 | action?: ActionType;
21 | style?: StyleType,
22 | }
23 |
--------------------------------------------------------------------------------
/packages/ui/Toast/useToast.tsx:
--------------------------------------------------------------------------------
1 | import { useContext } from "react";
2 | import { ToastContext } from "./ToastProvider";
3 | import type { ToastOptionType } from "./types";
4 |
5 | const useToast = () => {
6 | const { openToast, closeToast } = useContext(ToastContext);
7 |
8 | return {
9 | open: (option: ToastOptionType) => { openToast(option); },
10 | close: () => { closeToast(); }
11 | };
12 | };
13 |
14 | export default useToast;
15 |
--------------------------------------------------------------------------------
/packages/ui/index.ts:
--------------------------------------------------------------------------------
1 | export * from './cssVariables';
2 |
3 | // component exports
4 | export { default as Button } from './Button';
5 | export { CheckBox, Toggle, Radio } from './Control';
6 | export { Dialog, DialogContext, DialogProvider, useDialog } from './Dialog';
7 | export type { DialogOptionType } from './Dialog';
8 | export { ToastProvider, useToast, Toast } from './Toast';
9 | export type { ToastOptionType } from './Toast';
10 | export { TextField, TextArea, SearchField, SelectV2, Select, UserMention } from './Input';
11 | export { default as Chip } from './Chip';
12 | export { default as Callout } from './Callout';
13 | export { default as Tab } from './Tab';
14 | export * from './Skeleton';
15 | export * from './FieldBox';
16 | export * from './Tag';
17 | // test component
18 | export { default as Test } from './Test';
19 |
--------------------------------------------------------------------------------
/packages/ui/scripts/buildCssModules.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef -- require import 오류 */
2 | const fs = require('node:fs');
3 | const path = require('node:path');
4 | const allVariables = require('../dist/cssVariables');
5 | const outputDir = require('../tsconfig.json').compilerOptions.outDir;
6 |
7 | Object.keys(allVariables).forEach((key) => {
8 | const variableValues = Object.entries(allVariables).find(([name]) => name === key)[1];
9 |
10 | fs.writeFileSync(path.join(outputDir, `${toFileName(key)}.css`), `${variableValues}`);
11 | });
12 |
13 | function toCssCasing(str) {
14 | return str.replace(/(?:[a-z])(?:[A-Z])/g, (match) => `${match[0]}-${match[1]}`).toLowerCase();
15 | }
16 |
17 | function toFileName(str) {
18 | return toCssCasing(str);
19 | }
20 |
--------------------------------------------------------------------------------
/packages/ui/theme.css.ts:
--------------------------------------------------------------------------------
1 | import { createGlobalTheme } from "@vanilla-extract/css";
2 | import { colors } from "@sopt-makers/colors";
3 | import { fontsObject } from "@sopt-makers/fonts";
4 |
5 | const theme = createGlobalTheme("body", {
6 | colors,
7 | fontsObject,
8 | });
9 |
10 | export default theme;
11 |
--------------------------------------------------------------------------------
/packages/ui/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "jsx": "react-jsx",
4 | "types": ["vitest/globals"],
5 | "outDir": ".",
6 | "allowSyntheticDefaultImports": true,
7 | "declaration": true,
8 | "declarationDir": "./dist",
9 | "baseUrl": ".",
10 | "emitDeclarationOnly": true,
11 | "esModuleInterop": true,
12 | "noEmit": false,
13 | "noEmitOnError": true,
14 | "target": "esnext"
15 | },
16 | "extends": "tsconfig/react-library.json",
17 | "include": ["**/*.ts", "**/*.tsx"],
18 | "exclude": ["dist", "build", "node_modules"]
19 | }
20 |
--------------------------------------------------------------------------------
/packages/ui/tsup.config.ts:
--------------------------------------------------------------------------------
1 | import { vanillaExtractPlugin } from '@vanilla-extract/esbuild-plugin';
2 | import { defineConfig } from 'tsup';
3 |
4 | export default defineConfig({
5 | entry: ['index.ts', "cssVariables.ts"],
6 | format: ['cjs', 'esm'], // CommonJS와 ES Module 형식으로 출력
7 | outDir: 'dist',
8 | dts: true,
9 | sourcemap: true,
10 | esbuildPlugins: [vanillaExtractPlugin()],
11 | clean: true,
12 | external: ['react', 'react-dom', '@radix-ui/*'], // nodeExternals와 유사하게 외부 모듈을 제외
13 | onSuccess: 'echo Build completed!',
14 |
15 | esbuildOptions(options) {
16 | options.minify = true;
17 | options.treeShaking = true;
18 | },
19 | });
20 |
--------------------------------------------------------------------------------
/packages/ui/turbo/generators/config.ts:
--------------------------------------------------------------------------------
1 | import type { PlopTypes } from "@turbo/gen";
2 |
3 | // Learn more about Turborepo Generators at https://turbo.build/repo/docs/core-concepts/monorepos/code-generation
4 |
5 | export default function generator(plop: PlopTypes.NodePlopAPI): void {
6 | // A simple generator to add a new React component to the internal UI library
7 | plop.setGenerator("react-component", {
8 | description: "Adds a new react component",
9 | prompts: [
10 | {
11 | type: "input",
12 | name: "name",
13 | message: "What is the name of the component?",
14 | },
15 | ],
16 | actions: [
17 | {
18 | type: "add",
19 | path: "{{pascalCase name}}/style.css.ts",
20 | templateFile: "templates/style.hbs",
21 | },
22 | {
23 | type: "add",
24 | path: "{{pascalCase name}}/{{pascalCase name}}.tsx",
25 | templateFile: "templates/component.hbs",
26 | },
27 | {
28 | type: "add",
29 | path: '{{pascalCase name}}/index.tsx',
30 | template: 'export { default } from "./{{pascalCase name}}";'
31 | },
32 | {
33 | type: "append",
34 | path: "index.tsx",
35 | pattern: /(?\/\/ component exports)/g,
36 | template: 'export { default as {{pascalCase name}} } from "./{{pascalCase name}}";',
37 | },
38 | ],
39 | });
40 | }
41 |
--------------------------------------------------------------------------------
/packages/ui/turbo/generators/templates/component.hbs:
--------------------------------------------------------------------------------
1 | import * as styles from './style';
2 |
3 | interface Props {
4 | children?: React.ReactNode;
5 | }
6 |
7 | function {{ pascalCase name }}(props: Props) {
8 | const { children } = props;
9 |
10 | return (
11 |
12 | {children}
13 |
14 | );
15 | };
16 |
17 | export default {{ pascalCase name }};
--------------------------------------------------------------------------------
/packages/ui/turbo/generators/templates/style.hbs:
--------------------------------------------------------------------------------
1 | import { style } from '@vanilla-extract/css';
2 | import theme from '../theme.css';
3 |
4 | export const root = style({
5 | color: theme.colors.yellow500,
6 | });
7 |
--------------------------------------------------------------------------------
/packages/ui/vitest.config.mjs:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vitest/config';
2 | import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
3 |
4 | export default defineConfig({
5 | plugins: [vanillaExtractPlugin()],
6 | test: {
7 | globals: true,
8 | environment: 'jsdom',
9 | setupFiles: ['./vitest.setup.ts'],
10 | include: ['**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
11 | exclude: ['**/node_modules/**', '**/dist/**'],
12 | },
13 | });
14 |
--------------------------------------------------------------------------------
/packages/ui/vitest.setup.ts:
--------------------------------------------------------------------------------
1 | import '@testing-library/jest-dom';
2 |
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | - 'apps/*'
3 | - 'packages/*'
4 |
--------------------------------------------------------------------------------
/scripts/vscode.sh:
--------------------------------------------------------------------------------
1 | if [ -s ${HOME}/.nvm/nvm.sh ]; then
2 | . ${HOME}/.nvm/nvm.sh
3 | fi
4 |
5 | pnpm install
6 |
7 | packages=("ui" "icons" "fonts" "colors")
8 |
9 | for pkg in ${packages[@]}; do
10 | if [ ! -d "packages/${pkg}/dist" ]; then
11 | pnpm build:${pkg}
12 | fi
13 | done
14 |
15 | pnpm test
16 |
17 |
18 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "tsconfig/base.json"
3 | }
4 |
--------------------------------------------------------------------------------
/turbo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://turbo.build/schema.json",
3 | "globalDependencies": ["**/.env.*local"],
4 | "tasks": {
5 | "build": {
6 | "dependsOn": ["^build"],
7 | "outputs": [".next/**", "!.next/cache/**", "dist/**"]
8 | },
9 | "lint": {
10 | "cache": false
11 | },
12 | "dev": {
13 | "cache": false,
14 | "persistent": true
15 | },
16 | "test": {
17 | "cache": false
18 | }
19 | }
20 | }
21 |
--------------------------------------------------------------------------------