@croquiscom/pds v8.19.2
PDS
- π¨ Storybook
PDS(ννΈλ λμμΈ μμ€ν )μ μΉ΄μΉ΄μ€μ€νμΌ ννΈλμΌν° λμμΈ μμ€ν μ μν 리μ‘νΈ κΈ°λ°μ λΌμ΄λΈλ¬λ¦¬μ λλ€.
μ¬μ©
νλ‘μ νΈμ @croquiscom/pds
μ peer dependenciesλ₯Ό μΆκ°ν΄μ€λλ€.
npm install --save @croquiscom/pds @emotion/react @emotion/styled react react-dom
import React from 'react'
import { value color, value text_styles, value HStack } from '@croquiscom/pds';
import styled from '@emotion/styled';
export default function Test() {
return (
<HStack spacing={10}>
<BaseText kind='Heading_24_Bold' color={colors.gray900}>Hello</BaseText>
<StyledText>PDS UI</StyledText>
</HStack>
);
}
const StyledText = styled.p`
${text_styles.Body_14_SemiBold};
color: ${colors.gray600};
`;
κ°λ°
μꡬλλ κ°λ° νκ²½
Node.js v20+, Yarn v1.22+
λ‘컬μ ν΄λ‘ λ λ ν¬μ§ν λ¦¬λ‘ μ΄λνμ¬, node_modulesλ₯Ό μ€μΉν©λλ€.
yarn
μ€ν 리λΆμ ν΅ν΄ νμΈνκΈ° μν΄μ λ€μ λͺ λ Ήμ΄λ₯Ό μ€νν©λλ€. (λΈλΌμ°μ μμ http://localhost:6006/ λ‘ μ΄λνμΈμ.)
yarn storybook
ꡬ쑰
βββ assets
β βββ icons
β βββ images
βββ src
β βββ components
β β βββ[COMPONENT]
β β β βββ index.ts
β β β βββ [COMPONENT].tsx
β β β βββ [COMPONENT].mdx
β β β βββ types.ts
β β β βββ styles.ts
β β βββ icons
β β β βββ generated
β β β βββ Icon.stories.tsx
β β β βββ Icons.mdx
β β βββ images
β β β βββ generated
β β β βββ Image.stories.tsx
β β β βββ Images.mdx
β βββ container
β β βββ[CONTAINER]
β β β βββ index.ts
β β β βββ [CONTAINER].tsx
β β β βββ [CONTAINER].mdx
β β β βββ types.ts
β β β βββ styles.ts
β βββ constants
β βββ foundation
β βββ global_styles
β βββ styles
β βββ hooks
β βββ stories
β βββ types
β βββ utils
β βββ locales
β βββ index.ts
βββ tools
βββ svgr-icons-component-template.js
βββ svgr-icons-template.js
βββ svgr-images-component-template.js
βββ svgr-images-template.js
- COMPONENT|CONTAINER: μ»΄ν¬λνΈ λλ ν 리 μ΄λ¦μ μλ¬Έμ, ꡬλΆμλ -λ‘ (eg. toggle-switch) μμ±ν©λλ€. νμμλ κ΄λ ¨ μ»΄ν¬λνΈ νμΌκ³Ό ν΄λΉ μ»΄ν¬λνΈμ μ€ν 리λΆ(
*.stories.tsx
) νμΌμ ν¬ν¨ν©λλ€.styles.ts
,types.ts
κ³Ό κ°μ νμΌμ ν¬ν¨ν μ μμ΅λλ€.- μ»΄ν¬λνΈλ Named Exports ν©λλ€.
- κ° μ»΄ν¬λνΈ λλ ν 리μ src νμμ
index.ts
λ₯Ό ν΅ν΄ export ν©λλ€.
- global_styles: 리μ
μ€νμΌμ ν¬ν¨ν κΈλ‘λ² μ€νμΌμ ν¬ν¨ν©λλ€.
- 리μ
μ€νμΌμ μν class λ€μμ prefixλ‘
pds-
λ₯Ό λΆμ¬μ€λλ€.
- 리μ
μ€νμΌμ μν class λ€μμ prefixλ‘
- foundation: color, typographyμ κ°μ themeκ³Ό κ΄λ ¨λ μ€νμΌ, μ€νμΌ ν ν°μ ν¬ν¨ν©λλ€.
- styles: μ»΄ν¬λνΈμ 곡μ©μΌλ‘ μ¬μ©ν μ€νμΌ, μ€νμΌ ν¨μλ₯Ό ν¬ν¨ν©λλ€.
- hooks: 컀μ€ν ν μ ν¬ν¨ν©λλ€.
- stories: μ€ν 리λΆμ© μ»΄ν¬λνΈλ μ€νμΌ, μ»΄ν¬λνΈ μΈμ μ€ν λ¦¬λΆ λ¬Έμ
- utils: μ»΄ν¬λνΈμ 곡μ©μΌλ‘ μ¬μ©ν μ νΈλ¦¬ν° ν¨μλ€μ ν¬ν¨ν©λλ€.
- constants: μμ μ μλ₯Ό ν¬ν¨ν©λλ€.
- types: νμ μ μλ₯Ό ν¬ν¨ν©λλ€.
- assets: svg λ±μ μμ μ ν¬ν¨ν©λλ€.
- locales: κΈ°λ³ΈνκΈ°λ±μ μ¬μ©λλ μΈμ΄μ μ ν¬ν¨ν©λλ€.
- tools: svgr template λ±μ λΌμ΄λΈλ¬λ¦¬ μ μμ μν μ€ν¬λ¦½νΈλ₯Ό ν¬ν¨ν©λλ€.
μμ΄μ½ μΆκ°
β οΈ SVGRμ ν΅ν΄ svgνμΌμ 리μ‘νΈ μ»΄ν¬λνΈλ‘ μ λ€λ μ΄νΈν©λλ€. src/[icons|images]/generated
νμμμ μ§μ μμ νμ§ λ§μμ£ΌμΈμ!
assets/icons
,assets/images
μ svgλ₯Ό μΆκ°ν©λλ€.yarn svgr
μ μ€νν©λλ€.src/[icons|images]/generated
νμμ μ λ€λ μ΄νΈλ μμ΄μ½ 리μ‘νΈ μ»΄ν¬λνΈμsrc/[icons|images]/generated/index.ts
μ ν΄λΉ μ»΄ν¬λνΈμ exportκ° μΆκ°λ κ²μ νμΈν©λλ€.yarn storybook
μ μ€ννμ¬ μ€ν λ¦¬λΆ λ΄μμ Icon/Icons, Image/Images λ©λ΄λ‘ μ΄λνμ¬ λͺ©λ‘μμ ν΄λΉ μμ΄μ½μ΄ μ μΆκ°λμλμ§ νμ λλ€.
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
3 days ago
9 days ago
11 days ago
17 days ago
19 days ago
24 days ago
25 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
5 months ago
5 months ago
9 months ago
9 months ago
7 months ago
7 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
9 months ago
9 months ago
10 months ago
7 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
7 months ago
7 months ago
10 months ago
9 months ago
9 months ago
9 months ago
6 months ago
6 months ago
10 months ago
10 months ago
10 months ago
9 months ago
9 months ago
6 months ago
10 months ago
10 months ago
8 months ago
6 months ago
6 months ago
10 months ago
10 months ago
10 months ago
8 months ago
8 months ago
6 months ago
6 months ago
10 months ago
10 months ago
10 months ago
10 months ago
8 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
12 months ago
1 year ago
11 months ago
1 year ago
12 months ago
11 months ago
1 year ago
1 year ago
1 year ago
11 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
11 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year 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