@croquiscom/pds v10.8.1
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μ μ νλ‘ Approve ν λ¨Έμ§νκ² λλ©΄ 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
Figma Code Connect
PDSλ Figmaμ Code Connectλ₯Ό μ¬μ©ν΄μ, Dev Modeμμ κ°λ°μκ° μ¬μ©ν μ μλ JSXλ₯Ό λ°λ‘ λ ΈμΆν μ μμ΅λλ€.
Code Connectλ₯Ό μ¬μ©νκΈ° μν΄μλ, PDSμμ figma μ»΄ν¬λνΈ λ§€νμ μ§νν΄μΌ ν©λλ€. κ° μ»΄ν¬λνΈμ .figma.tsx
κ° λ§€νμ μ§μνκ³ μμ΅λλ€.
Figma Personal access token λ°κΈ
λ‘컬 νκ²½μμ Code Connectλ₯Ό μ¬μ©νλ €λ©΄ Figmaμ PAT (Personal Access Token)μ λ°κΈν΄μΌ ν©λλ€.
- https://www.figma.com/ μμ λ‘κ·ΈμΈν λ€, μ’μΈ‘ μλ¨μ κ³μ μ΄λ¦μ μ νν ν Settingsλ₯Ό λλ¦ λλ€.
- Account νμμ, νλ¨μΌλ‘ μ€ν¬λ‘€μ λ΄λ¦¬λ©΄ Personal access tokens νλͺ©μ΄ μμ΅λλ€. μ¬κΈ°μ Generate new tokenμ μ νν©λλ€.
- ν ν° μ΄λ¦μ μ λΉν μ§μ νκ³ , Expirationμ No expirationμΌλ‘ μ νν©λλ€.
- File contentλ Read-only, Code Connectλ Writeλ‘ μ§μ ν©λλ€.
- Generate token λ²νΌμ λλ¦ λλ€.
- PDSμμ
.env
νμΌμ μλ‘ μμ±νκ³ , λ°κΈλ ν ν° κ°μ μλμ κ°μ΄ λΆμ¬λ£μ΅λλ€.
FIGMA_ACCESS_TOKEN=figd_...
Figma Code Connect μμ νκΈ°
PDSμ μ»΄ν¬λνΈλ₯Ό Figmaμ μ°λνκ³ μ νλ κ²½μ°, μλμ κ°μ κ³Όμ μΌλ‘ μ§ννλ©΄ λ©λλ€.
- Figmaμμ μνλ μ»΄ν¬λνΈμ μλ³Έμ μ°Ύμ΅λλ€.
- μ»΄ν¬λνΈ μλ³Έμ μλμ κ°μ λͺ¨μμΌλ‘ μκ²Όμ΅λλ€.
- μ»΄ν¬λνΈλ₯Ό μ νν λ€, μ°μΈ‘μ "Go to main component"λ₯Ό μ ννλ©΄ μ΄λν μ μμ΅λλ€.
- μ»΄ν¬λνΈ μλ³Έμ μλμ κ°μ λͺ¨μμΌλ‘ μκ²Όμ΅λλ€.
- μ»΄ν¬λνΈλ₯Ό μΌμͺ½μ νΈλ¦¬μμ μ°ν΄λ¦ν ν, "Copy link to selection"μ μ νν©λλ€.
- ν°λ―Έλμμ ν΄λΉ μ»΄ν¬λνΈμ μμ€κ° μ‘΄μ¬νλ λλ ν λ¦¬λ‘ μ΄λνκ³ , μλμ κ°μ΄ λͺ λ Ήμ μ€νν©λλ€.
$ yarn figma connect create 'https://www.figma.com/design/...'
- μ»΄ν¬λνΈ μ΄λ¦μ λ§λ
Component.figma.tsx
κ° μμ±λ©λλ€. - νΌκ·Έλ§κ° μ 곡ν κΈ°λ³Έ λ§€νμ μ€μ μ»΄ν¬λνΈμ λ§κ² μμ ν©λλ€. λ§€ν κ°μ΄λ
- μμ μ λ§μΉλ©΄, μλ λͺ λ Ήμ ν΅ν΄ μ€μ λ‘ νΌκ·Έλ§λ‘ μ λ‘λν©λλ€.
$ yarn figma connect publish
- νΌκ·Έλ§μμ ν΄λΉ μ»΄ν¬λνΈλ₯Ό μ¬μ©νλ κ³³μμ dev modeλ₯Ό μΌλ©΄, μ€μ λ‘ ν΄λΉ μ½λλ₯Ό νμΈν΄λ³Ό μ μμ΅λλ€.
- GitHub Action λν μΈν λμ΄ μκΈ° λλ¬Έμ, μ§μ publishνμ§ μμλ μλμΌλ‘ λ°μλ©λλ€.
μμ΄μ½ μ λ‘λνκΈ°
Figma Code Connectμ μμ΄μ½, μ΄λ―Έμ§λ€μ scripts/figma-import-icons.js
μ μν΄ μλμΌλ‘ λ§€νλκ³ μμ΅λλ€.
yarn svgr
μ μ€ννλ©΄ μλμΌλ‘ νΌκ·Έλ§μ μμ΄μ½λ€κ³Ό λ§€νλ©λλ€.
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 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
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
11 months ago
1 year ago
1 year ago
1 year ago
11 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
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
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
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
2 years ago
2 years ago
3 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 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
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
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
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
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago