@croquiscom/pastel-ui v5.2.0
Pastel UI
- π¨ Storybook
νμ€ν UIλ μΉ΄μΉ΄μ€μ€νμΌ ννΈλμΌν° λμμΈ μμ€ν μ μν 리μ‘νΈ κΈ°λ°μ λΌμ΄λΈλ¬λ¦¬μ λλ€.
μ¬μ©
νλ‘μ νΈμ @croquiscom/pastel-ui
κ³Ό peer dependenciesλ₯Ό μΆκ°ν΄μ€λλ€.
npm install --save @croquiscom/pastel-ui @emotion/react @emotion/styled react react-dom
import React from 'react'
import { value color, value text_styles, value HStack } from '@croquiscom/pastel-ui';
import styled from '@emotion/styled';
export default function Test() {
return (
<HStack spacing={10}>
<BaseText variant='Heading_24_Bold' color={colors.gray900}>Hello</BaseText>
<StyledText>Pastel UI</StyledText>
</HStack>
);
}
const StyledText = styled.p`
${text_styles.Body_14_SemiBold};
color: ${colors.gray600};
`;
κ°λ°
μꡬλλ κ°λ° νκ²½
Node.js v14+, Yarn v1.22+
λ‘컬μ ν΄λ‘ λ λ ν¬μ§ν λ¦¬λ‘ μ΄λνμ¬, node_modulesλ₯Ό μ€μΉν©λλ€.
yarn
μ€ν 리λΆμ ν΅ν΄ νμΈνκΈ° μν΄μ λ€μ λͺ λ Ήμ΄λ₯Ό μ€νν©λλ€. (λΈλΌμ°μ μμ http://localhost:6006/ λ‘ μ΄λνμΈμ.)
yarn storybook
ꡬ쑰
βββ assets
β βββ icons
βββ src
β βββ [COMPONENT]
β β βββ index.ts
β β βββ [COMPONENT].tsx
β β βββ [COMPONENT].stories.mdx
β β βββ types.ts
β β βββ styles.ts
β βββ icons
β β βββ generated
β β βββ Icon.stories.tsx
β β βββ Icon.stories.mdx
β βββ global_styles
β βββ themes
β βββ styles
β βββ hooks
β βββ stories
β βββ types
β βββ index.ts
βββ tools
βββ svgr-component-template.js
βββ svgr-index-template.js
- COMPONENT: μ»΄ν¬λνΈ λλ ν 리 μ΄λ¦μ μλ¬Έμ, ꡬλΆμλ -λ‘ (eg. toggle-switch) μμ±ν©λλ€. νμμλ κ΄λ ¨ μ»΄ν¬λνΈ νμΌκ³Ό ν΄λΉ μ»΄ν¬λνΈμ μ€ν 리λΆ(
*.stories.tsx
) νμΌμ ν¬ν¨ν©λλ€.styles.ts
,types.ts
κ³Ό κ°μ νμΌμ ν¬ν¨ν μ μμ΅λλ€.- μ»΄ν¬λνΈλ Named Exports ν©λλ€.
- κ° μ»΄ν¬λνΈ λλ ν 리μ src νμμ
index.ts
λ₯Ό ν΅ν΄ export ν©λλ€.
- global_styles: 리μ
μ€νμΌμ ν¬ν¨ν κΈλ‘λ² μ€νμΌμ ν¬ν¨ν©λλ€.
- 리μ
μ€νμΌμ μν class λ€μμ prefixλ‘
pastel-ui-
λ₯Ό λΆμ¬μ€λλ€.
- 리μ
μ€νμΌμ μν class λ€μμ prefixλ‘
- themes: color, typographyμ κ°μ themeκ³Ό κ΄λ ¨λ μ€νμΌ, μ€νμΌ ν ν°μ ν¬ν¨ν©λλ€.
- styles: μ»΄ν¬λνΈμ 곡μ©μΌλ‘ μ¬μ©ν μ€νμΌ, μ€νμΌ ν¨μλ₯Ό ν¬ν¨ν©λλ€.
- hooks: 컀μ€ν ν μ ν¬ν¨ν©λλ€.
- stories: μ€ν 리λΆμ© μ»΄ν¬λνΈλ μ€νμΌ, μ»΄ν¬λνΈ μΈμ μ€ν λ¦¬λΆ λ¬Έμ
- assets: svg λ±μ μμ μ ν¬ν¨ν©λλ€.
- tools: svgr template λ±μ λΌμ΄λΈλ¬λ¦¬ μ μμ μν μ€ν¬λ¦½νΈλ₯Ό ν¬ν¨ν©λλ€.
μμ΄μ½ μΆκ°
β οΈ SVGRμ ν΅ν΄ svgνμΌμ 리μ‘νΈ μ»΄ν¬λνΈλ‘ μ λ€λ μ΄νΈν©λλ€. src/icons/generated
νμμμ μ§μ μμ νμ§ λ§μμ£ΌμΈμ!
assets/icons
μ svgλ₯Ό μΆκ°ν©λλ€.yarn svgr
μ μ€νν©λλ€.src/icons/generated
νμμ μ λ€λ μ΄νΈλ μμ΄μ½ 리μ‘νΈ μ»΄ν¬λνΈμsrc/icons/generated/index.ts
μ ν΄λΉ μ»΄ν¬λνΈμ exportκ° μΆκ°λ κ²μ νμΈν©λλ€.yarn storybook
μ μ€ννμ¬ μ€ν λ¦¬λΆ λ΄μμ Icon/Icons λ©λ΄λ‘ μ΄λνμ¬ λͺ©λ‘μμ ν΄λΉ μμ΄μ½μ΄ μ μΆκ°λμλμ§ νμ λλ€.
PR
- mainμ base λΈλμΉλ‘ ν μμ λΈλμΉλ₯Ό μμ±ν©λλ€.
- λ°°ν¬ λ° λ²μ κ΄λ¦¬λ₯Ό changesetμ ν΅ν΄ κ΄λ¦¬νκ³ μμ΅λλ€. PR μμ±μ changeset README.md λ¬Έμλ₯Ό μ°Έκ³ νμ¬ νμΌμ μμ±ν΄μ£ΌμΈμ.
- PR λ° λ§μ€ν° λ¨Έμ§ μμ chromaticμΌλ‘ μλ λ°°ν¬λ©λλ€.
λ°°ν¬
Github Actionμ ν΅ν΄ μλμΌλ‘ λ°°ν¬νκ³ μμ΅λλ€.
changeset νμΌμ ν¬ν¨ν PRμ΄ mainμ λ¨Έμ§λλ©΄, Github Action μν¬νλ‘μ°κ° λμλλ©°, λ²μ λ°°ν¬λ₯Ό μν Version Packages PRμ΄ μμ±λ©λλ€. ν΄λΉ PRμ λ¨Έμ§νκ² λλ©΄ Github Actionμ μν¬νλ‘μ°κ° λμλλ©° ν¨ν€μ§κ° λ°°ν¬λ©λλ€.
Github Actionμ ν΅ν λ°°ν¬κ° λΆκ°λ₯ν κ²½μ°
npm κΆνμ΄ νμν©λλ€. npmμ κ°μ ν κΆνμ μμ²ν΄μ£ΌμΈμ.
- Version Packages PRμ΄ μμ±λμ§ μμμ κ²½μ°, λ€μμ μνν΄ changelogμ package.jsonμ version bumpλ₯Ό ν¬ν¨ν μμ PRμ μμ±ν©λλ€.
yarn changeset version
git commit -m "chore: version bump"
- Version Packages PRμ΄ μμ±λμμ κ²½μ° ν΄λΉ PRμ λ¨Έμ§νκ³ mainμ μ΅μ μνλ‘ PULL λ°μμ£ΌμΈμ.
yarn release
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago