Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: 스토리북 설정 및 스토리들 추가 #27

Merged
merged 12 commits into from
Feb 3, 2024
Merged

feat: 스토리북 설정 및 스토리들 추가 #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
0ed56ca
feat: 스토리북 설정 추가
alstn2468 Feb 3, 2024
600e78f
feat: 버튼 컴포넌트 스토리북 추가
alstn2468 Feb 3, 2024
822c798
feat: reset, 폰트 추가, 뱃지 스토리 추가
alstn2468 Feb 3, 2024
bd4f915
feat: 다른 컴포넌트들 스토리 추가, 설정 추가
alstn2468 Feb 3, 2024
0be6cb3
feat: 아이콘 갤러리 추가
alstn2468 Feb 3, 2024
85d993e
feat: 컬러팔레트 추가
alstn2468 Feb 3, 2024
ba3303a
fix: 텍스트버튼 칠드런 추가
alstn2468 Feb 3, 2024
1f53214
fix: 이모션 관련 타입 오류 수정
alstn2468 Feb 3, 2024
5f62f1b
Merge branch 'main' into feat/storybook
alstn2468 Feb 3, 2024
e68defe
feat: TextField, DatePicker도 스토리 추가
alstn2468 Feb 3, 2024
561b36a
chore: g00 색상 변경
alstn2468 Feb 3, 2024
9415538
fix: port 설정 제거
alstn2468 Feb 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14,697 changes: 12,757 additions & 1,940 deletions .pnp.cjs
View file
Open in desktop

Large diffs are not rendered by default.

Binary file modified .yarn/install-state.gz
View file
Open in desktop
Binary file not shown.
301 changes: 2 additions & 299 deletions apps/preview/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,308 +1,11 @@
import './index.css';
import 'the-new-css-reset/css/reset.css';
import {
Badge,
Button,
TextButton,
BooltiUIProvider,
Footer,
TextField,
DatePicker,
} from '@boolti/ui';
import {
AppleIcon,
ArrowLeftIcon,
ArrowRightIcon,
CalendarIcon,
ChevronLeftIcon,
ChevronRightIcon,
ClockIcon,
CloseIcon,
EditIcon,
GithubIcon,
InstagramIcon,
KakaotalkIcon,
PlusIcon,
SearchIcon,
TicketIcon,
UpDownIcon,
UsersIcon,
WalletIcon,
} from '@boolti/icon';
import { useState } from 'react';
import { BooltiUIProvider } from '@boolti/ui';

const App = () => {
const [date, setDate] = useState<string>('');
return (
<BooltiUIProvider>
<h1>
Preview
<div
style={{
display: 'flex',
width: 1200,
justifyContent: 'space-between',
marginBottom: 20,
alignItems: 'flex-end',
}}
>
<Button size="bold" colorTheme="primary">
BUTTON
</Button>
<Button size="medium" colorTheme="primary">
BUTTON
</Button>
<Button size="regular" colorTheme="primary">
BUTTON
</Button>
<Button size="small" colorTheme="primary">
BUTTON
</Button>
<Button size="x-small" colorTheme="primary">
BUTTON
</Button>
<Button size="x-small" colorTheme="primary" disabled>
BUTTON
</Button>
</div>
<div
style={{
display: 'flex',
width: 1200,
justifyContent: 'space-between',
marginBottom: 20,
alignItems: 'flex-end',
}}
>
<Button icon={<AppleIcon size={20} />} size="bold" colorTheme="primary">
BUTTON
</Button>
<Button icon={<AppleIcon size={20} />} size="medium" colorTheme="primary">
BUTTON
</Button>
<Button icon={<AppleIcon size={20} />} size="regular" colorTheme="primary">
BUTTON
</Button>
<Button icon={<AppleIcon size={20} />} size="small" colorTheme="primary">
BUTTON
</Button>
<Button icon={<AppleIcon size={20} />} size="x-small" colorTheme="primary">
BUTTON
</Button>
<Button icon={<AppleIcon size={20} />} size="x-small" colorTheme="primary" disabled>
BUTTON
</Button>
</div>
<div
style={{
display: 'flex',
width: 1200,
justifyContent: 'space-between',
marginBottom: 20,
alignItems: 'flex-end',
}}
>
<Button icon={<AppleIcon size={20} />} size="bold" colorTheme="netural">
BUTTON
</Button>
<Button icon={<AppleIcon size={20} />} size="medium" colorTheme="netural">
BUTTON
</Button>
<Button icon={<AppleIcon size={20} />} size="regular" colorTheme="netural">
BUTTON
</Button>
<Button icon={<AppleIcon size={20} />} size="small" colorTheme="netural">
BUTTON
</Button>
<Button icon={<AppleIcon size={20} />} size="x-small" colorTheme="netural">
BUTTON
</Button>
<Button icon={<AppleIcon size={20} />} size="x-small" colorTheme="netural" disabled>
BUTTON
</Button>
</div>
<div
style={{
display: 'flex',
width: 1200,
justifyContent: 'space-between',
marginBottom: 20,
alignItems: 'flex-end',
}}
>
<Button size="bold" colorTheme="netural">
BUTTON
</Button>
<Button size="medium" colorTheme="netural">
BUTTON
</Button>
<Button size="regular" colorTheme="netural">
BUTTON
</Button>
<Button size="small" colorTheme="netural">
BUTTON
</Button>
<Button size="x-small" colorTheme="netural">
BUTTON
</Button>
<Button size="x-small" colorTheme="netural" disabled>
BUTTON
</Button>
</div>
<div
style={{
display: 'flex',
width: 1200,
justifyContent: 'space-between',
marginBottom: 20,
alignItems: 'flex-end',
}}
>
<Button icon={<AppleIcon size={20} />} size="bold" colorTheme="line">
BUTTON
</Button>
<Button icon={<AppleIcon size={20} />} size="medium" colorTheme="line">
BUTTON
</Button>
<Button icon={<AppleIcon size={20} />} size="regular" colorTheme="line">
BUTTON
</Button>
<Button icon={<AppleIcon size={20} />} size="small" colorTheme="line">
BUTTON
</Button>
<Button icon={<AppleIcon size={20} />} size="x-small" colorTheme="line">
BUTTON
</Button>
<Button icon={<AppleIcon size={20} />} size="x-small" colorTheme="line" disabled>
BUTTON
</Button>
</div>
<div
style={{
display: 'flex',
width: 1200,
justifyContent: 'space-between',
marginBottom: 20,
alignItems: 'flex-end',
}}
>
<Button size="bold" colorTheme="line">
BUTTON
</Button>
<Button size="medium" colorTheme="line">
BUTTON
</Button>
<Button size="regular" colorTheme="line">
BUTTON
</Button>
<Button size="small" colorTheme="line">
BUTTON
</Button>
<Button size="x-small" colorTheme="line">
BUTTON
</Button>
<Button size="x-small" colorTheme="line" disabled>
BUTTON
</Button>
</div>
<div style={{ marginBottom: 20 }}>
<TextButton>TEXT BUTTON</TextButton>
<TextButton icon={<AppleIcon size={20} />}>TEXT BUTTON</TextButton>
<TextButton disabled>TEXT BUTTON</TextButton>
<TextButton icon={<AppleIcon size={20} />} disabled>
TEXT BUTTON
</TextButton>
</div>
<div style={{ display: 'flex', width: 600, justifyContent: 'space-between' }}>
<Badge colorTheme="purple">티켓 판매 오픈 D-n</Badge>
<Badge colorTheme="blue">티켓 판매 중</Badge>
<Badge colorTheme="green">티켓 판매 종료</Badge>
<Badge colorTheme="red">공연 당일</Badge>
<Badge colorTheme="grey">공연 종료</Badge>
</div>
<div style={{ color: 'blue' }}>
<AppleIcon size={20} /> <AppleIcon size={24} />
<GithubIcon size={20} /> <GithubIcon size={24} />
<InstagramIcon size={20} /> <InstagramIcon size={24} />
<KakaotalkIcon size={20} /> <KakaotalkIcon size={24} />
<TicketIcon size={20} /> <TicketIcon size={24} />
<WalletIcon size={20} /> <WalletIcon size={24} />
<UsersIcon size={20} /> <UsersIcon size={24} />
<EditIcon size={20} /> <EditIcon size={24} />
<CalendarIcon size={20} /> <CalendarIcon size={24} />
<ClockIcon size={20} /> <ClockIcon size={24} />
<SearchIcon size={20} /> <SearchIcon size={24} />
<UpDownIcon size={20} /> <UpDownIcon size={24} />
<ChevronRightIcon size={20} /> <ChevronRightIcon size={24} />
<ChevronLeftIcon size={20} /> <ChevronLeftIcon size={24} />
<ArrowLeftIcon size={20} /> <ArrowLeftIcon size={24} />
<ArrowRightIcon size={20} /> <ArrowRightIcon size={24} />
<PlusIcon size={20} /> <PlusIcon size={24} />
<CloseIcon size={20} /> <CloseIcon size={24} />
</div>
</h1>
<br />
<TextField placeholder="aaa" size="small" inputType="text" />
<br />
<TextField
value="abc"
onChange={() => {
/** noop */
}}
size="big"
inputType="text"
/>

<br />
<TextField
value="abc"
onChange={() => {
/** noop */
}}
size="big"
inputType="text"
buttonProps={{ children: 'BUTTON' }}
/>

<br />
<TextField
disabled
value="abc"
onChange={() => {
/** noop */
}}
size="big"
inputType="text"
buttonProps={{ children: 'BUTTON' }}
/>

<br />
<TextField
placeholder="YYYY.MM.DD"
size="big"
inputType="date"
value={date}
onChange={(event) => {
setDate(event.target.value);
}}
buttonProps={{ children: 'BUTTON' }}
/>

<br />
<TextField
placeholder="abc"
size="big"
inputType="file"
buttonProps={{ children: 'BUTTON' }}
/>

<br />
<DatePicker size="small" />

<br />
<DatePicker size="big" />

<Footer />
<h1>Preview</h1>
</BooltiUIProvider>
);
};
Expand Down
27 changes: 27 additions & 0 deletions apps/storybook/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

# storybook build output
storybook-static
29 changes: 29 additions & 0 deletions apps/storybook/.storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import type { StorybookConfig } from '@storybook/react-vite';

import { join, dirname } from 'path';

/**
* This function is used to resolve the absolute path of a package.
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
*/
function getAbsolutePath(value: string): any {
return dirname(require.resolve(join(value, 'package.json')));
}
const config: StorybookConfig = {
stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [
getAbsolutePath('@storybook/addon-links'),
getAbsolutePath('@storybook/addon-essentials'),
getAbsolutePath('@storybook/addon-onboarding'),
getAbsolutePath('@storybook/addon-interactions'),
getAbsolutePath('storybook-dark-mode'),
],
framework: {
name: getAbsolutePath('@storybook/react-vite'),
options: {},
},
docs: {
autodocs: 'tag',
},
};
export default config;
Loading
Loading