From 73a5821e2d96eb136a8580909959d4da7bf986f6 Mon Sep 17 00:00:00 2001 From: Ji Sungbin Date: Sat, 6 May 2023 09:52:11 +0900 Subject: [PATCH] Supplementing documentation (#662) * Change how to manage the sidebar * Cleanup * Cleanup * Reorganize documentation approach * Supplemental documentation * Write button documents * Write missing documents * Remove unused modules from indexing in AS --- .../src/main/kotlin/ProjectOrArtifact.kt | 7 +- .../main/kotlin/ProjectOrArtifactConfig.kt | 35 +++- .../src/main/kotlin/SugarPoetConfig.kt | 2 +- .../src/main/kotlin/internal/versioning.kt | 2 +- build.gradle.kts | 7 + .../duckie/quackquack/material/modifier.kt | 4 +- .../quackquack/runtime/ComposedModifier.kt | 1 - .../team/duckie/quackquack/ui/button.kt | 138 ++++++++++++++- website/docs/01-intro.mdx | 166 ------------------ website/docs/06-release.md | 95 ---------- website/docs/architecture.mdx | 17 ++ .../{05-contribute.md => contributing.mdx} | 8 +- website/docs/development.mdx | 42 +++++ .../aide/annotation.mdx} | 4 +- .../06-Aide => guides/aide}/images/tag.svg | 0 .../aide/overview.mdx} | 2 +- .../aide/processor.mdx} | 4 +- .../03-animation.md => guides/animation.mdx} | 4 - .../casa/annotation.mdx} | 4 +- .../casa/material.mdx} | 4 +- .../casa/overview.mdx} | 2 +- .../casa/processor.mdx} | 2 +- .../documentation-style.mdx} | 3 +- .../images/comment-ui.svg | 0 .../images/secondary-button.svg | 0 .../images/typography.svg | 0 .../02-material.md => guides/material.mdx} | 6 +- .../01-runtime.md => guides/runtime.mdx} | 4 - .../images/complex-psi-defaultvalue.jpeg | Bin .../05-Sugar => guides/sugar}/images/flow.png | Bin .../images/simple-psi-defaultvalue.jpeg | Bin .../sugar/material.mdx} | 2 +- .../sugar/overview.mdx} | 3 +- website/docs/guides/ui/components.mdx | 3 + .../04-ui.md => guides/ui/mental-model.mdx} | 10 +- website/docs/guides/ui/tokens.mdx | 7 + website/docs/guides/util/backend.mdx | 7 + .../08-util.md => guides/util/common.mdx} | 4 +- website/docs/images/logo.svg | 1 - website/docs/images/quackquack.svg | 66 +++++++ website/docs/introduction.mdx | 60 +++++++ website/docs/license.mdx | 25 +++ website/docs/modularization.mdx | 38 ++++ website/docs/releases.mdx | 7 + .../docs/{04-resources.md => resources.mdx} | 0 website/docs/testing.mdx | 75 ++++++++ website/docusaurus.config.js | 12 +- website/package-lock.json | 34 +++- website/package.json | 3 +- website/sidebars.js | 94 +++++++++- website/src/components/ColorBox.js | 2 +- website/static/images/duckie-developer.svg | 74 ++++++++ website/static/{img => images}/logo.ico | Bin website/static/images/logo.svg | 39 ++++ website/static/images/meta-banner.png | Bin 0 -> 8100 bytes website/static/img/logo.svg | 1 - 56 files changed, 810 insertions(+), 320 deletions(-) delete mode 100644 website/docs/01-intro.mdx delete mode 100644 website/docs/06-release.md create mode 100644 website/docs/architecture.mdx rename website/docs/{05-contribute.md => contributing.mdx} (65%) create mode 100644 website/docs/development.mdx rename website/docs/{03-Artifacts/06-Aide/02-annotation.md => guides/aide/annotation.mdx} (63%) rename website/docs/{03-Artifacts/06-Aide => guides/aide}/images/tag.svg (100%) rename website/docs/{03-Artifacts/06-Aide/01-overview.md => guides/aide/overview.mdx} (99%) rename website/docs/{03-Artifacts/06-Aide/03-processor.md => guides/aide/processor.mdx} (80%) rename website/docs/{03-Artifacts/03-animation.md => guides/animation.mdx} (89%) rename website/docs/{03-Artifacts/07-Casa/02-annotation.md => guides/casa/annotation.mdx} (73%) rename website/docs/{03-Artifacts/07-Casa/03-material.md => guides/casa/material.mdx} (76%) rename website/docs/{03-Artifacts/07-Casa/01-overview.md => guides/casa/overview.mdx} (92%) rename website/docs/{03-Artifacts/07-Casa/04-processor.md => guides/casa/processor.mdx} (97%) rename website/docs/{02-documentation-rule.mdx => guides/documentation-style.mdx} (98%) rename website/docs/{03-Artifacts => guides}/images/comment-ui.svg (100%) rename website/docs/{03-Artifacts => guides}/images/secondary-button.svg (100%) rename website/docs/{03-Artifacts => guides}/images/typography.svg (100%) rename website/docs/{03-Artifacts/02-material.md => guides/material.mdx} (86%) rename website/docs/{03-Artifacts/01-runtime.md => guides/runtime.mdx} (89%) rename website/docs/{03-Artifacts/05-Sugar => guides/sugar}/images/complex-psi-defaultvalue.jpeg (100%) rename website/docs/{03-Artifacts/05-Sugar => guides/sugar}/images/flow.png (100%) rename website/docs/{03-Artifacts/05-Sugar => guides/sugar}/images/simple-psi-defaultvalue.jpeg (100%) rename website/docs/{03-Artifacts/05-Sugar/02-material.md => guides/sugar/material.mdx} (92%) rename website/docs/{03-Artifacts/05-Sugar/01-overview.mdx => guides/sugar/overview.mdx} (99%) create mode 100644 website/docs/guides/ui/components.mdx rename website/docs/{03-Artifacts/04-ui.md => guides/ui/mental-model.mdx} (97%) create mode 100644 website/docs/guides/ui/tokens.mdx create mode 100644 website/docs/guides/util/backend.mdx rename website/docs/{03-Artifacts/08-util.md => guides/util/common.mdx} (86%) delete mode 100644 website/docs/images/logo.svg create mode 100644 website/docs/images/quackquack.svg create mode 100644 website/docs/introduction.mdx create mode 100644 website/docs/license.mdx create mode 100644 website/docs/modularization.mdx create mode 100644 website/docs/releases.mdx rename website/docs/{04-resources.md => resources.mdx} (100%) create mode 100644 website/docs/testing.mdx create mode 100644 website/static/images/duckie-developer.svg rename website/static/{img => images}/logo.ico (100%) create mode 100644 website/static/images/logo.svg create mode 100644 website/static/images/meta-banner.png delete mode 100644 website/static/img/logo.svg diff --git a/build-logic/src/main/kotlin/ProjectOrArtifact.kt b/build-logic/src/main/kotlin/ProjectOrArtifact.kt index 5ac3e06bb..57318d50c 100644 --- a/build-logic/src/main/kotlin/ProjectOrArtifact.kt +++ b/build-logic/src/main/kotlin/ProjectOrArtifact.kt @@ -7,7 +7,12 @@ import org.gradle.api.artifacts.ProjectDependency -// TODO: 문서화 +/** + * 로컬 모듈을 publishing된 아티팩트로 변환합니다. + * 해당 모듈이 maven-central에 publishing 되어 있다고 가정합니다. + * + * @see useArtifact + */ fun ProjectDependency.orArtifact(): Any { return if (useArtifact) { val artifact = ArtifactConfig.of(dependencyProject) diff --git a/build-logic/src/main/kotlin/ProjectOrArtifactConfig.kt b/build-logic/src/main/kotlin/ProjectOrArtifactConfig.kt index a48b040cb..91fe140f3 100644 --- a/build-logic/src/main/kotlin/ProjectOrArtifactConfig.kt +++ b/build-logic/src/main/kotlin/ProjectOrArtifactConfig.kt @@ -5,5 +5,38 @@ * Please see full license: https://github.com/duckie-team/quack-quack-android/blob/main/LICENSE */ -// TODO: 문서화 +import org.gradle.api.artifacts.ProjectDependency + +/** + * 로컬 모듈 의존성을 가지는 모듈을 publishing하면 해당 아티팩트를 + * 다운받았을 때 아티팩트 내부에서 참조하고 있는 로컬 모듈을 불러오지 못해 + * 싱크 에러가 발생합니다. 예를 들어 다음과 같은 상황에 해당합니다. + * + * ``` + * // file:build.gradle + * + * dependencies { + * implementation projects.util.common // local-module + * implementation projects.compose.ui // local-module + * } + * ``` + * + * 이를 대응하기 위해 [useArtifact]가 true라면 로컬 모듈을 + * publishing된 아티팩트로 변환하여 참조합니다. + * + * ``` + * // file:build.gradle + * + * dependencies { + * implementation 'team.duckie.quackquack.util:util-common:$version' + * implementation 'team.duckie.quackquack.compose:compose-ui:$version' + * } + * ``` + * + * 즉, 모듈을 안전하게 publishing하기 위해선 publishing 전에 먼저 [useArtifact]를 + * true로 설정해야 합니다. + * + * 로컬 모듈을 아티팩트로 변환하는 로직은 [ProjectDependency.orArtifact]를 + * 참고하세요. + */ const val useArtifact = false diff --git a/build-logic/src/main/kotlin/SugarPoetConfig.kt b/build-logic/src/main/kotlin/SugarPoetConfig.kt index f21552d32..c550ce846 100644 --- a/build-logic/src/main/kotlin/SugarPoetConfig.kt +++ b/build-logic/src/main/kotlin/SugarPoetConfig.kt @@ -5,5 +5,5 @@ * Please see full license: https://github.com/duckie-team/quack-quack-android/blob/main/LICENSE */ -// TODO: 문서화 +// TODO: 작동 방식 변경 (gradle task) const val sugarPoet = true diff --git a/build-logic/src/main/kotlin/internal/versioning.kt b/build-logic/src/main/kotlin/internal/versioning.kt index 58ca07829..c32d319b3 100644 --- a/build-logic/src/main/kotlin/internal/versioning.kt +++ b/build-logic/src/main/kotlin/internal/versioning.kt @@ -10,7 +10,7 @@ package internal import java.io.File import org.gradle.api.Project -// TODO: 문서화 +// TODO: 테스트 방식 변경 internal var projectTestingMode = false internal fun Project.parseArtifactVersion(): String { diff --git a/build.gradle.kts b/build.gradle.kts index fbd26e07e..6e979592d 100644 --- a/build.gradle.kts +++ b/build.gradle.kts @@ -14,6 +14,7 @@ plugins { alias(libs.plugins.kotlin.ktlint) alias(libs.plugins.gradle.dependency.handler.extensions) alias(libs.plugins.gradle.dependency.graph) + id("idea") } private val quackquackColor = "#36bcf5" @@ -45,6 +46,12 @@ tasks.matching { task -> notCompatibleWithConfigurationCache("https://github.com/jisungbin/dependency-graph-plugin/issues/8") } +idea { + module { + excludeDirs = excludeDirs + file("website") + } +} + buildscript { repositories { google() diff --git a/material/src/main/kotlin/team/duckie/quackquack/material/modifier.kt b/material/src/main/kotlin/team/duckie/quackquack/material/modifier.kt index b99c6e02c..45445b480 100644 --- a/material/src/main/kotlin/team/duckie/quackquack/material/modifier.kt +++ b/material/src/main/kotlin/team/duckie/quackquack/material/modifier.kt @@ -20,7 +20,9 @@ import androidx.compose.ui.semantics.Role import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp -// TODO: 문서화 +/** + * 컴포넌트에 주어진 디자인 스팩을 적용합니다. + */ @Stable public fun Modifier.quackSurface( shape: Shape = RectangleShape, diff --git a/runtime/src/main/kotlin/team/duckie/quackquack/runtime/ComposedModifier.kt b/runtime/src/main/kotlin/team/duckie/quackquack/runtime/ComposedModifier.kt index 9c3b44fb2..ec4c8eeeb 100644 --- a/runtime/src/main/kotlin/team/duckie/quackquack/runtime/ComposedModifier.kt +++ b/runtime/src/main/kotlin/team/duckie/quackquack/runtime/ComposedModifier.kt @@ -113,7 +113,6 @@ public fun Modifier.quackComposed(factory: @Composable Modifier.() -> Modifier): return then(QuackComposedModifier(factory)) } -// TODO: 문서화 개선 (key, fqn 인자 역할 설명, inspectableInfo 사용 불가 안내) /** * [Modifier.composed]의 꽥꽥 버전을 구현합니다. * diff --git a/ui/src/main/kotlin/team/duckie/quackquack/ui/button.kt b/ui/src/main/kotlin/team/duckie/quackquack/ui/button.kt index 87af2ab75..5e3bf9812 100644 --- a/ui/src/main/kotlin/team/duckie/quackquack/ui/button.kt +++ b/ui/src/main/kotlin/team/duckie/quackquack/ui/button.kt @@ -8,8 +8,11 @@ package team.duckie.quackquack.ui import android.annotation.SuppressLint -import androidx.annotation.RestrictTo import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.width import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.runtime.Composable import androidx.compose.runtime.Immutable @@ -26,6 +29,8 @@ import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.layout.Layout import androidx.compose.ui.layout.LayoutModifier import androidx.compose.ui.layout.layoutId +import androidx.compose.ui.node.LayoutModifierNode +import androidx.compose.ui.platform.InspectorInfo import androidx.compose.ui.platform.debugInspectorInfo import androidx.compose.ui.platform.inspectable import androidx.compose.ui.platform.testTag @@ -56,40 +61,63 @@ import team.duckie.quackquack.ui.util.wrappedDebugInspectable import team.duckie.quackquack.util.MustBeTested import team.duckie.quackquack.util.fastFirstIsInstanceOrNull +/** + * 버튼의 디자인 스팩을 나타냅니다. + * + * @see QuackButtonStyle + */ @QuackDsl -@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP_PREFIX) public interface ButtonStyleMarker +/** + * 기본으로 제공되는 [ButtonStyleMarker]의 스팩들에서 공통되는 필드를 나타냅니다. + */ @Immutable public interface QuackButtonStyle { + /** 사용할 색상들 */ public val colors: QuackButtonColors + /** 모서리의 둥글기 정도 */ public val radius: Dp + /** 컨텐츠 주변에 들어갈 패딩 */ public val contentPadding: QuackPadding + + /** 배치되는 아이콘과 텍스트 사이의 간격 */ public val iconSpacedBy: Dp + /** 테두리의 굵기 */ public val borderThickness: Dp + /** 활성화 상태에서 표시될 텍스트의 타이포그래피 */ public val typography: QuackTypography + + /** 비활성화 상태에서 표시될 텍스트의 타이포그래피 */ public val disabledTypography: QuackTypography + /** 필드에 mutation을 적용하는 람다 */ @Stable public operator fun invoke(styleBuilder: T.() -> Unit): T public companion object { + /** 기본으로 정의된 스팩 중 [QuackLargeButtonDefaults]를 가져옵니다. */ @Stable public val Large: QuackButtonStyle get() = QuackLargeButtonDefaults() + /** 기본으로 정의된 스팩 중 [QuackMediumButtonDefaults]를 가져옵니다. */ @Stable public val Medium: QuackButtonStyle get() = QuackMediumButtonDefaults() + /** 기본으로 정의된 스팩 중 [QuackSmallButtonDefaults]를 가져옵니다. */ // TODO(3): 데코레이터 모디파이어 사용 금지 린트 제공 @Stable public val Small: QuackButtonStyle get() = QuackSmallButtonDefaults() } } +/** + * [QuackButtonStyle]의 필드들을 [InspectorInfo]로 기록합니다. + */ @SuppressLint("ModifierFactoryExtensionFunction") @Stable private fun QuackButtonStyle<*>.wrappedDebugInspectable(baseline: Modifier): Modifier = @@ -104,6 +132,18 @@ private fun QuackButtonStyle<*>.wrappedDebugInspectable(baseline: Modifier): Mod properties["disabledTypography"] = disabledTypography } +/** + * 버튼에서 사용할 색상들을 정의합니다. + * + * @param backgroundColor 활성화 상태의 배경 색상 + * @param disabledBackgroundColor 비활성화 상태의 배경 색상 + * @param contentColor 활성화 상태의 컨텐츠 색상 (아이콘 색상은 [iconColor]로 + * 관리되며, 컨텐츠라 하면 대부분 버튼의 텍스트를 의미합니다.) + * @param disabledBorderColor 비활성화 상태의 컨텐츠 색상 (아이콘 색상은 + * [iconColor]로 관리되며, 컨텐츠라 하면 대부분 버튼의 텍스트를 의미합니다.) + * @param iconColor 활성화 상태에 관계 없이 항상 사용할 아이콘 색상 + * @param rippleColor 활성화 상태에 관계 없이 항상 사용할 리플 색상 + */ @Immutable public class QuackButtonColors internal constructor( internal val backgroundColor: QuackColor, @@ -115,6 +155,9 @@ public class QuackButtonColors internal constructor( internal val iconColor: QuackColor, internal val rippleColor: QuackColor, ) { + /** + * 기존 색상에서 일부 값만 변경하여 새로운 인스턴스를 반환합니다. + */ @Stable internal fun copy( backgroundColor: QuackColor = this.backgroundColor, @@ -182,6 +225,9 @@ public class QuackButtonColors internal constructor( } } +/** + * 꽥꽥 디자인 가이드의 `Buttons#LargeButtons`에 해당하는 디자인 스팩을 정의합니다. + */ @Immutable public class QuackLargeButtonDefaults internal constructor() : QuackButtonStyle, ButtonStyleMarker { @@ -230,6 +276,9 @@ public class QuackLargeButtonDefaults internal constructor() : override fun toString(): String = "QuackLargeButtonDefaults" } +/** + * 꽥꽥 디자인 가이드의 `Buttons#MediumButton`에 해당하는 디자인 스팩을 정의합니다. + */ @Immutable public class QuackMediumButtonDefaults internal constructor() : QuackButtonStyle, ButtonStyleMarker { @@ -270,6 +319,9 @@ public class QuackMediumButtonDefaults internal constructor() : override fun toString(): String = "QuackMediumButtonDefaults" } +/** + * 꽥꽥 디자인 가이드의 `Buttons#SmallButtons`에 해당하는 디자인 스팩을 정의합니다. + */ @Immutable public class QuackSmallButtonDefaults internal constructor() : QuackButtonStyle, ButtonStyleMarker { @@ -317,12 +369,25 @@ public class QuackSmallButtonDefaults internal constructor() : override fun toString(): String = "QuackSmallButtonDefaults" } +/** + * 버튼의 아이콘 데코레이터 데이터를 저장합니다. + * + * @param leadingIcon 왼쪽에 배치될 아이콘 데이터 + * @param trailingIcon 오른쪽에 배치될 아이콘 데이터 + */ @Stable private data class ButtonIconData( val leadingIcon: QuackIcon?, val trailingIcon: QuackIcon?, ) : QuackDataModifierModel +/** + * 버튼에 아이콘을 추가합니다. 모든 아이콘은 버튼 텍스트를 기준으로 + * 양옆에 배치됩니다. + * + * @param leadingIcon 왼쪽에 배치될 아이콘 + * @param trailingIcon 오른쪽에 배치될 아이콘 + */ @DecorateModifier @Stable public fun Modifier.icons( @@ -341,7 +406,67 @@ public fun Modifier.icons( ) } -@MustBeTested(passed = false) +/** + * 버튼을 그립니다. + * + * - 이 컴포넌트는 자체의 패딩 정책을 구현합니다. + * - 이 컴포넌트는 자체의 배치 정책을 구현합니다. + * - [스타일][style]별로 사용 가능한 데코레이터가 달라집니다. + * + * 패딩 정책 + * ========= + * + * 1. [버튼의 스타일][QuackButtonStyle]에서 [contentPadding][QuackButtonStyle.contentPadding] 옵션을 + * 별도로 제공하고 있습니다. 이는 [Modifier.padding]과 다른 패딩 정책을 사용합니다. [Modifier.padding]은 + * 버튼의 루트 레이아웃을 기준으로 패딩이 적용되지만, [QuackButtonStyle.contentPadding]은 버튼의 + * 텍스트를 기준으로 패딩이 적용됩니다. 이 부분의 자세한 내용은 배치 정책 세션을 참고하세요. + * 2. [LayoutModifier]를 사용하여 컴포넌트의 사이즈가 명시됐다면 [QuackButtonStyle.contentPadding] + * 옵션은 무시됩니다. [contentPadding][QuackButtonStyle.contentPadding]은 컴포넌트 사이즈 하드코딩을 + * 대체하는 용도로 제공됩니다. 하지만 컴포넌트 사이즈가 하드코딩됐다면 [contentPadding][QuackButtonStyle.contentPadding]을 + * 제공하는 의미가 없어집니다. 따라서 컴포넌트의 사이즈가 하드코딩됐다면 개발자의 의도를 존중한다는 원칙하에 + * 컴포넌트의 사이즈가 중첩으로 확장되는 일을 예방하고자 [contentPadding][QuackButtonStyle.contentPadding] + * 옵션을 무시합니다. 예를 들어 `Modifier.height(10.dp)`로 컴포넌트 높이를 명시했고, [contentPadding][QuackButtonStyle.contentPadding]으로 + * `QuackPadding(vertical=10.dp)`을 제공했다고 해봅시다. 이런 경우에는 [contentPadding][QuackButtonStyle.contentPadding]이 + * 무시되고 버튼의 높이가 10dp로 적용됩니다. 컴포넌트 사이즈를 명시하면서 패딩을 적용하고 싶다면 + * [contentPadding][QuackButtonStyle.contentPadding] 대신에 [Modifier.padding]을 사용하세요. + * [LayoutModifier]를 사용하는 흔한 [Modifier]로는 [Modifier.size], [Modifier.height], [Modifier.width] 등이 + * 있습니다. [LayoutModifierNode]를 사용하는 [Modifier]는 [contentPadding][QuackButtonStyle.contentPadding] 무시 + * 옵션이 아직 지원되지 않습니다. ([#636](https://github.com/duckie-team/quack-quack-android/issues/636)) + * + * 배치 정책 + * ========= + * + * [style.contentPadding][QuackButtonStyle.contentPadding]은 항상 버튼의 텍스트를 기준으로 + * 적용됩니다. 예를 들어 버튼의 아이콘을 leading과 trailing을 모두 제공했고, [contentPadding][QuackButtonStyle.contentPadding]으로 + * `QuackPadding(horizontal=10.dp)`를 제공했다면 양끝의 horizontal 패딩이 각각 아이콘을 기준으로 + * 적용되는 게 아닌 버튼의 텍스트를 기준으로 적용됩니다. 따라서 개발자는 [contentPadding][QuackButtonStyle.contentPadding]의 값을 + * 제공할 때 양끝 아이콘을 기준으로 제공하는 게 아닌 가운데 텍스트를 기준으로 제공해야 합니다. + * 이 정책은 양끝 아이콘이 동적으로 적용될 때 의도하지 않는 버튼 사이즈 변경을 예방하기 위해 + * 고안됐습니다. 예를 들어 `contentPadding: QuackPadding(horizontal=10.dp)`을 양끝 아이콘 기준으로 + * 적용했다고 해봅시다. 처음에는 양끝에 아이콘이 없어서 가운데 텍스트를 기준으로 패딩이 적용됩니다. + * 이 시점에는 버튼의 너비가 25dp입니다. (왼쪽 패딩 10dp, 텍스트 5dp, 오른쪽 패딩 10dp) 사용자 + * 요청에 의해 양쪽 모두에 5dp의 너비를 갖는 아이콘이 추가되었습니다. 이 시점에서는 양쪽 아이콘이 + * 존재하므로 [contentPadding][QuackButtonStyle.contentPadding]이 양쪽 아이콘을 기준으로 적용되어 + * 버튼의 너비가 35dp입니다. (왼쪽 패딩 10dp, 왼쪽 아이콘 5dp, 텍스트 5dp, 오른쪽 아이콘 5dp, + * 오른쪽 패딩 10dp) 즉, 의도하지 않게 버튼의 너비가 10dp 증가하였습니다. 이러한 상황을 예방하기 + * 위해 이 정책이 사용됩니다. + * + * 사용 가능 데코레이터 + * ==================== + * + * | style | [icons][Modifier.icons] | description | + * | :---------------------------------: | :---------------------: | :----------------------------------------------------------: | + * | [Large][QuackLargeButtonDefaults] | ⭕ | | + * | [Medium][QuackMediumButtonDefaults] | ⭕ | | + * | [Small][QuackSmallButtonDefaults] | ❌ | 버튼의 너비가 좁기에 아이콘 데코레이터를 사용할 수 없습니다. | + * + * @param enabled 활성화 상태 여부 + * @param style 적용할 스타일. 사전 정의 스타일로 [QuackButtonStyle.Large][QuackLargeButtonDefaults], + * [QuackButtonStyle.Medium][QuackMediumButtonDefaults], [QuackButtonStyle.Small][QuackSmallButtonDefaults]이 제공됩니다. + * @param rippleEnabled 클릭됐을 때 리플 애니메이션을 적용할지 여부 + * @param onClick 클릭했을 때 실행할 람다식. [enabled]이 true일 때만 작동합니다. + */ +@MustBeTested(passed = true) @Composable @NonRestartableComposable @ExperimentalQuackQuackApi @@ -358,6 +483,7 @@ public fun QuackButton( ) { val isSmallButton = style is QuackSmallButtonDefaults // TODO: 다른 경우로 사이즈를 지정하는 방법이 있을까? + // TODO(3): LayoutModifierNode 지원 var isSizeSpecified = false val (composeModifier, quackDataModels) = currentComposer.quackMaterializeOf(modifier) { currentModifier -> if (!isSizeSpecified) { @@ -464,6 +590,12 @@ private const val TextLayoutId = "QuackBaseButtonText" private const val LeadingIconLayoutId = "QuackBaseButtonLeadingIcon" private const val TrailingIconLayoutId = "QuackBaseButtonTrailingIcon" +/** + * 고유한 배치 정책으로 버튼을 그립니다. + * 배치 정책의 자세한 정보는 [QuackButton] 문서를 참고하세요. + * + * 이 컴포넌트는 [QuackButtonStyle]의 필드를 개별 인자로 받습니다. + */ @NoSugar @Composable public fun QuackBaseButton( diff --git a/website/docs/01-intro.mdx b/website/docs/01-intro.mdx deleted file mode 100644 index f711215d8..000000000 --- a/website/docs/01-intro.mdx +++ /dev/null @@ -1,166 +0,0 @@ ---- -sidebar_label: 'Getting started' -title: 'QuackQuack Design System' -slug: / ---- - - - QuackQuack - - - - - - -QuackQuack은 꽥꽥이라 발음하며 덕키의 UI Kit, 그 이상의 제품입니다. 덕키의 모든 프로덕트에 기본으로 사용되며, 최고의 사용자 경험과 개발자 경험 제공을 목표로 합니다. - -꽥꽥은 아래와 같은 이유로 탄생했습니다. - -
-디자이너-개발자 간 UI 컴포넌트 용어/이미지 통일 - 디자이너는 컴포넌트를 디자인하면서 붙이는 레이블에 익숙하지만 개발자는 해당 레이블에 익숙하지 않을 수 있습니다. 또한 컴포넌트의 디자인 맥락이 머릿속에 있는데 개발자는 그렇지 않을 수 있습니다. 이러한 상황이 지속되면 디자이너와 개발자 간 소통이 어려워질 수 있습니다. 이를 예방하기 위해 덕키 디자인에 사용되는 컴포넌트를 시스템화하여 모두가 동일한 용어와 이미지를 연상할 수 있게 합니다. 또한 모르는 컴포넌트가 나왔을 때도 쉽게 찾아볼 수 있도록 합니다. -
- -
-생산성 - 디자인을 시스템화하여 개발하면 다음과 같은 이점을 기대할 수 있습니다. -

- • 구현이 완료된 컴포넌트와 그렇지 않은 컴포넌트가 명확하게 구분되어 하나의 컴포넌트를 중복으로 개발하는 일이 없어짐 -
- • 동일한 컴포넌트인데 개발자의 실수로 세부 디자인에 오차가 생길 일이 없어짐 -
- • UI Kit 피쳐를 별도로 가져가면 프로덕트 피쳐 개발자가 하나의 주제에만 집중할 수 있음 (디자인에 변경이 생겼을 때 직접 UI 코드베이스를 건들 필요가 없고, 오직 비즈니스 로직에만 집중할 수 있음) -
- -꽥꽥은 덕키 내부에서 사용할 목적으로 만들어졌기에 외부 프로젝트엔 적합하지 않을 수 있습니다. 다만, Jetpack Compose로 UI Kit 개발을 처음 시도하거나 UI Kit 도입을 고민하시는 분들께 도움이 됐으면 해서 public으로 진행합니다. - -## Goals - -- 접근성, 재사용성 확장 (`이 컴포넌트가 없어요` ❌) -- [오버엔지니어링](https://en.wikipedia.org/wiki/Overengineering), [조기 최적화](http://wiki.c2.com/?PrematureOptimization) ❌ - -## Project Structure - -![project-dependency-graph.dot.svg](images/project-dependency-graph.dot.svg) - -- ![catalog](images/badges/catalog.svg): 디자인 컴포넌트 미리 보기 앱 -- ![casa](images/badges/casa.svg): 디자인 컴포넌트 미리 보기 구성 요소 자동 생성 모듈 -- ![aide](images/badges/aide.svg): 안전한 UI Kit 사용을 돕는 안드로이드 린트 모듈 -- ![sugar](images/badges/sugar.svg): 디자인 컴포넌트의 문법 설탕 자동 생성 모듈 -- ![quackquack](images/badges/quackquack.svg): 디자인 컴포넌트 구현 모듈 - -각각 기능은 세부 도메인별로 모듈화돼 있습니다. - -#### casa - -- `annotation`: `CasaModel` 생성을 위한 메타데이터 어노테이션을 제공합니다. -- `material`: casa 구성 클래스를 제공합니다. -- `processor`: 주어진 메타데이터를 기반으로 `CasaModel`을 자동 생성합니다. -- `ui`: 주어진 casa 구성 클래스를 기반으로 UI를 그립니다. - -#### aide - -- `annotation`: aide 규칙 생성을 위한 메타데이터 어노테이션을 제공합니다. -- `processor`: 주어진 메타데이터를 기반으로 aide 규칙을 자동 생성합니다. -- `aide`: 주어진 규칙을 기반으로 aide를 구현합니다. - -#### sugar - -- `material`: 문법 설탕 컴포넌트 생성을 위한 메타데이터를 제공합니다. -- `processor`: 주어진 메타데이터를 기반으로 문법 설탕 컴포넌트를 자동 생성합니다. - -#### quackquack - -- `runtime`: Compose Runtime을 활용하여 꽥꽥 디자인 컴포넌트가 작동하기 위한 환경을 제공합니다. -- `material`: UI Kit의 기본 리소스를 제공합니다. -- `animation`: 기초적인 애니메이션을 제공합니다. -- `ui`: 디자인 컴포넌트를 구현합니다. - -## Workflows - -![workflows](images/workflows.png) - -## Tech Stacks - -- GitHub Actions -- Android Lint -- Jetpack Compose UI for Android -- Jetpack Compose Runtime -- Kotlin Symbol Processing -- Kotlin Compiler Plugin -- Gradle Plugin - -구현 세부사항은 아티팩트별 세부 페이지를 참고해 주세요. - -## Testing - -테스트 가치가 있는 로직은 모두 테스트를 작성하였습니다. - -- Compose Integration Test, Compose Screenshot Test -- Unit Test - -Compose Test는 JUnit4에 의존하기에 [JUnit4](https://junit.org/junit4/)를 사용하고, Unit Test는 [Kotest](https://kotest.io/)를 사용합니다. - -Compile Test는 [Kotlin Compile Testing](https://github.com/tschuchortdev/kotlin-compile-testing)를 사용하고, Screenshot Test는 [Roborazzi](https://github.com/takahirom/roborazzi)를 사용합니다. - -## [WIP] Preview - -[Google PlayStore](https://play.google.com/store/apps/details?id=team.duckie.quackquack.playground)에서 catalog 앱을 설치하실 수 있습니다. - -google playstore - -## BOM Download ![](https://img.shields.io/maven-central/v/team.duckie.quackquack.bom/bom?style=flat-square) - -꽥꽥은 MavenCentral 저장소에 배포됩니다. - -```kotlin -implementation(platform("team.duckie.quackquack.bom:bom:${version}")) - -implementation("team.duckie.quackquack.runtime:runtime") -implementation("team.duckie.quackquack.material:material") -implementation("team.duckie.quackquack.animation:animation") -implementation("team.duckie.quackquack.ui:ui") - -// "kotlinCompilerPluginClasspath"("team.duckie.quackquack.sugar:sugar-processor:${version}") -implementation("team.duckie.quackquack.sugar:sugar-material") - -lintChecks("team.duckie.quackquack.aide:aide:${version}") -implementation("team.duckie.quackquack.aide:aide-annotation") -ksp("team.duckie.quackquack.aide:aide-processor:${version}") - -implementation("team.duckie.quackquack.casa:casa-ui") -implementation("team.duckie.quackquack.casa:casa-annotation") -implementation("team.duckie.quackquack.casa:casa-material") -// ksp("team.duckie.quackquack.casa:casa-processor:${version}") - -implementation("team.duckie.quackquack.util:util") -``` - -#### Snapshot - -개발 중 버전은 [Sonatype의 snapshot 저장소](https://s01.oss.sonatype.org/content/repositories/snapshots/team/duckie/quackquack/)에 배포됩니다. - -```kotlin -repositories { - maven("https://s01.oss.sonatype.org/content/repositories/snapshots/") { - mavenContent { snapshotsOnly() } - } -} -``` - -## Maintainers - -- Dev: [지성빈](https://sungb.in) -- Design: [김혜진](https://my.surfit.io/w/417265724) - -## Contributions - -모든 기여를 환영합니다. 기여하시기 전에 [contribution guide](05-contribute.md)를 읽어 주세요. - -> 기여해 주신 모든 분께 감사합니다. -> -> contributor graph - -## License - -꽥꽥은 [MIT 라이선스](https://github.com/duckie-team/quack-quack-android/blob/main/LICENSE)로 관리됩니다. diff --git a/website/docs/06-release.md b/website/docs/06-release.md deleted file mode 100644 index 27b2eda7a..000000000 --- a/website/docs/06-release.md +++ /dev/null @@ -1,95 +0,0 @@ ---- -sidebar_label: 'Release' ---- - -# Releasing note (out-of-date) - -## Prerequisites & Labels - -모든 배포 작동화는 PR 이 `master` 브런치로 open 됐을 때만 작동하며, 특정 label 이 중요하게 작용합니다. - -### BumpType - -`BumpType` label 은 배포 과정에서 bump 할 대상을 정의합니다. - -| Label | Description | -|-----------------------------------------------------------------------------------------|---------------------| -| ![label-preview](https://img.shields.io/badge/BumpType__Major-E99695?style=flat-square) | Major 버전을 bump 합니다. | -| ![label-preview](https://img.shields.io/badge/BumpType__Minor-E99695?style=flat-square) | Minor 버전을 bump 합니다. | -| ![label-preview](https://img.shields.io/badge/BumpType__Patch-E99695?style=flat-square) | Patch 버전을 bump 합니다. | - -### ReleaseTarget - -`ReleaseTarget` label 은 배포 과정에서 release 할 대상을 정의합니다. - -| Label | Description | -|-----------------------------------------------------------------------------------------------------|-----------------------------------------------| -| ![label-preview](https://img.shields.io/badge/ReleaseTarget__Playground-F9D0C4?style=flat-square) | `ui-components` 의 `playground` 를 release 합니다. | -| ![label-preview](https://img.shields.io/badge/ReleaseTarget__LintCore-F9D0C4?style=flat-square) | `lint-core` 를 release 합니다. | -| ![label-preview](https://img.shields.io/badge/ReleaseTarget__LintQuack-F9D0C4?style=flat-square) | `lint-quack` 를 release 합니다. | -| ![label-preview](https://img.shields.io/badge/ReleaseTarget__LintCompose-F9D0C4?style=flat-square) | `lint-compose` 를 release 합니다. | -| ![label-preview](https://img.shields.io/badge/ReleaseTarget__LintWriting-F9D0C4?style=flat-square) | `lint-writing` 를 release 합니다. | -| ![label-preview](https://img.shields.io/badge/ReleaseTarget__UiComponents-F9D0C4?style=flat-square) | `ui-components` 를 release 합니다. | - -## 버전 관리 - -모든 아티팩트의 버전은 프로젝트 루트에 있는 version.txt 파일로 관리됩니다. - -| File name | Content | Description | -|---------------------|--------------------------------------|------------------------------------------------------------------------| -| `ui-components.txt` | `major=x; minor=y; patch=z;` | `x.y.z` 버전을 `ui-components` 배포에 사용합니다. | -| `playground.txt` | `major=x; minor=y; patch=z; code=n;` | `x.y.z` 을 `versionName`, `n` 을 `verionCode` 로 `playground` 릴리스에 사용합니다. | -| `lint-core.txt` | `major=x; minor=y; patch=z;` | `x.y.z` 버전을 `lint-core` 배포에 사용합니다. | -| `lint-quack.txt` | `major=x; minor=y; patch=z;` | `x.y.z` 버전을 `lint-quack` 배포에 사용합니다. | -| `lint-compose.txt` | `major=x; minor=y; patch=z;` | `x.y.z` 버전을 `lint-compose` 배포에 사용합니다. | -| `lint-writing.txt` | `major=x; minor=y; patch=z;` | `x.y.z` 버전을 `lint-writing` 배포에 사용합니다. | - -자동화의 bump 과정에서 `BumpType` 과 `ReleaseTarget` label 에 맞게 각각 버전 파일에서 bump 가 진행됩니다. - -## 배포 시나리오 - -꽥꽥은 master 브런치 하나를 메인으로 가져갑니다. 따라서 **master 브런치로 들어오는 모든 커밋은 스냅샷 버전으로 배포**되고, **정식 배포는 ![label-preview](https://img.shields.io/badge/publish-FBCA04?style=flat-square) label 을 가진 PR 이 master 브런치에 merge 됐을 때** 진행됩니다. - -### 스냅샷 배포 - -스냅샷 버전은 versions 폴더 안에 있는 현재 버전에서 `y` 값을 +1 하고, `z` 값을 0 으로 교체한 값을 사용합니다. 즉, **`z` 는 항상 0 으로 고정**됩니다. 이는 "스냅샷" 버전임을 강조하기 위함입니다. - -**스냅샷 배포는 bump 하는 과정을 진행하지 않고, 해당 PR 에 ![label-preview](https://img.shields.io/badge/publish-FBCA04?style=flat-square) label 이 없을 때**만 진행됩니다. - -만약 `ReleaseTarget` label 이 설정되지 않았다면 스냅샷 배포는 건너뜁니다. - -### 정식 배포 - -**정식 배포는 해당 PR 에 ![label-preview](https://img.shields.io/badge/publish-FBCA04?style=flat-square) label 이 있을 때** 진행됩니다. 정식 배포 과정이 진행되면 bump 하는 과정을 먼저 시작하고, bump 가 진행된 이후 결정된 버전으로 publishing 을 시작합니다. bump 된 파일은 배포가 마무리된 이후 `git push` 를 통해 `master` 브런치에 바로 반영됩니다. - -## Artifact 배포 - -꽥꽥 **아티팩트 배포는 ![label-preview](https://img.shields.io/badge/release-D4C5F9?style=flat-square) label 이 없을 때**만 진행되며, 진행 순서는 다음과 같습니다. - -1. ![label-preview](https://img.shields.io/badge/publish-FBCA04?style=flat-square) :o:: 미리 정의한 `bump` gradle task 를 label 된 이름들로 진행하여 `BumpType` 과 `ReleaseTarget` label 에 맞게 bump 과정을 진행합니다. -2. ![label-preview](https://img.shields.io/badge/publish-FBCA04?style=flat-square) :x:: 미리 정의한 `setSnapshotVersion` gradle task 를 진행하여 스냅샷 버전을 설정합니다. -3. 지정된 `ReleaseTarget` label 에 맞게 publish 과정을 시작합니다. -4. ![label-preview](https://img.shields.io/badge/publish-FBCA04?style=flat-square) :o:: 새로운 버전으로 `git tag` 및 깃허브 Release 등록을 진행합니다. - -:::caution - -`BumpType` 과 `ReleaseTarget` label 이 모두 지정돼 있지 않다면 배포에 필요한 gradle task 실행에 실패하여 배포 자동화에 실패합니다. - -::: - -## Playground 릴리스 - -꽥꽥 **플레이그라운드 릴리스는 ![label-preview](https://img.shields.io/badge/release-D4C5F9?style=flat-square) label 이 있을 때**만 진행되며, 진행 순서는 다음과 같습니다. - -1. 미리 정의한 `bump` gradle task 를 진행하여 `BumpType` label 에 맞게 `playground` 의 bump 과정을 진행합니다. -2. `playground` 의 release 과정을 시작합니다. Releasing 되면서 덕키팀 슬랙에 APK 가 [Firebase App Distribution](https://firebase.google.com/docs/app-distribution) 을 통해 전달되고, AAB 가 Google Playstore 에 업데이트 요청됩니다. - -:::tip - -Playground 릴리스는 Artifact 배포와는 다르게 `BumpType` label 만 요구합니다. - -::: - -## 경고 - -모든 자동화는 최대 1개까지만 배포를 진행할 수 있습니다. **동시에 여러 배포는 불가능**합니다. 따라서 `BumpType` 과 `ReleaseTarget` label 은 각각 하나씩만 설정돼야 합니다. 여러개의 동시 배포가 필요한 경우는 수동 배포를 진행해야 합니다. diff --git a/website/docs/architecture.mdx b/website/docs/architecture.mdx new file mode 100644 index 000000000..147ad16be --- /dev/null +++ b/website/docs/architecture.mdx @@ -0,0 +1,17 @@ +# Architecture + +... 작성 중 + +## Workflows + +![workflows](images/workflows.png) + +## Tech Stacks + +- GitHub Actions +- Android Studio Lint +- Jetpack Compose UI (for Android) +- Jetpack Compose Runtime +- Kotlin Symbol Processing +- Kotlin Compiler Plugin +- Gradle Plugin \ No newline at end of file diff --git a/website/docs/05-contribute.md b/website/docs/contributing.mdx similarity index 65% rename from website/docs/05-contribute.md rename to website/docs/contributing.mdx index 3ff2b720b..ed4b4187e 100644 --- a/website/docs/05-contribute.md +++ b/website/docs/contributing.mdx @@ -1,10 +1,11 @@ --- -sidebar_label: 'Contributing' +sidebar_label: Contributing --- # How to contribute -quack-quack-android 프로젝트에 관심을 갖고 기여해 주셔서 감사합니다. 따라야 할 몇 가지 작은 규칙이 있습니다. +꽥꽥 프로젝트에 관심을 갖고 기여해 주셔서 감사합니다. +따라야 할 몇 가지 작은 규칙이 있습니다. ## Preparing a pull request for review @@ -29,4 +30,5 @@ quack-quack-android 프로젝트에 관심을 갖고 기여해 주셔서 감사 ## Code reviews -덕키 멤버의 PR을 포함한 모든 PR은 검토가 필요합니다. 검토는 최대 일주일 내로 진행됩니다. +덕키 멤버의 PR을 포함한 모든 PR은 검토가 필요합니다. +검토는 최대 일주일 내로 진행됩니다. diff --git a/website/docs/development.mdx b/website/docs/development.mdx new file mode 100644 index 000000000..a8e0a08cb --- /dev/null +++ b/website/docs/development.mdx @@ -0,0 +1,42 @@ +# Development + +... 작성 중 + +## BOM Download ![](https://img.shields.io/maven-central/v/team.duckie.quackquack.bom/bom?style=flat-square) + +꽥꽥은 MavenCentral 저장소에 배포됩니다. + +```kotlin +implementation(platform("team.duckie.quackquack.bom:bom:${version}")) + +implementation("team.duckie.quackquack.runtime:runtime") +implementation("team.duckie.quackquack.material:material") +implementation("team.duckie.quackquack.animation:animation") +implementation("team.duckie.quackquack.ui:ui") + +// "kotlinCompilerPluginClasspath"("team.duckie.quackquack.sugar:sugar-processor:${version}") +implementation("team.duckie.quackquack.sugar:sugar-material") + +lintChecks("team.duckie.quackquack.aide:aide:${version}") +implementation("team.duckie.quackquack.aide:aide-annotation") +ksp("team.duckie.quackquack.aide:aide-processor:${version}") + +implementation("team.duckie.quackquack.casa:casa-ui") +implementation("team.duckie.quackquack.casa:casa-annotation") +implementation("team.duckie.quackquack.casa:casa-material") +// ksp("team.duckie.quackquack.casa:casa-processor:${version}") + +implementation("team.duckie.quackquack.util:util") +``` + +#### Snapshot + +개발 중 버전은 [Sonatype의 snapshot 저장소](https://s01.oss.sonatype.org/content/repositories/snapshots/team/duckie/quackquack/)에 배포됩니다. + +```kotlin +repositories { + maven("https://s01.oss.sonatype.org/content/repositories/snapshots/") { + mavenContent { snapshotsOnly() } + } +} +``` \ No newline at end of file diff --git a/website/docs/03-Artifacts/06-Aide/02-annotation.md b/website/docs/guides/aide/annotation.mdx similarity index 63% rename from website/docs/03-Artifacts/06-Aide/02-annotation.md rename to website/docs/guides/aide/annotation.mdx index 4bb212ce1..08af2ed68 100644 --- a/website/docs/03-Artifacts/06-Aide/02-annotation.md +++ b/website/docs/guides/aide/annotation.mdx @@ -1,10 +1,10 @@ --- -sidebar_label: 'Annotation' +sidebar_label: annotation --- # aide-annotation -본 모듈은 [`aide-processor`](03-processor.md)의 메타데이터 어노테이션을 제공합니다. +본 모듈은 [`aide-processor`](processor.mdx)의 메타데이터 어노테이션을 제공합니다. ## Download ![](https://img.shields.io/maven-central/v/team.duckie.quackquack.aide/aide-annotation?style=flat-square) diff --git a/website/docs/03-Artifacts/06-Aide/images/tag.svg b/website/docs/guides/aide/images/tag.svg similarity index 100% rename from website/docs/03-Artifacts/06-Aide/images/tag.svg rename to website/docs/guides/aide/images/tag.svg diff --git a/website/docs/03-Artifacts/06-Aide/01-overview.md b/website/docs/guides/aide/overview.mdx similarity index 99% rename from website/docs/03-Artifacts/06-Aide/01-overview.md rename to website/docs/guides/aide/overview.mdx index 3edcc52b4..b5705c143 100644 --- a/website/docs/03-Artifacts/06-Aide/01-overview.md +++ b/website/docs/guides/aide/overview.mdx @@ -1,5 +1,5 @@ --- -sidebar_label: 'Overview' +sidebar_label: Overview --- # aide diff --git a/website/docs/03-Artifacts/06-Aide/03-processor.md b/website/docs/guides/aide/processor.mdx similarity index 80% rename from website/docs/03-Artifacts/06-Aide/03-processor.md rename to website/docs/guides/aide/processor.mdx index 130a17fa9..c163fdb2c 100644 --- a/website/docs/03-Artifacts/06-Aide/03-processor.md +++ b/website/docs/guides/aide/processor.mdx @@ -1,10 +1,10 @@ --- -sidebar_label: 'Processor' +sidebar_label: processor --- # aide-processor -본 모듈은 [`aide`](01-overview.md)의 규칙을 자동 생산합니다. 기본 작동은 [`KSP`](https://kotlinlang.org/docs/ksp-overview.html)와 [`kotlinpoet`](https://github.com/square/kotlinpoet)으로 진행됩니다. +본 모듈은 [`aide`](overview.mdx)의 규칙을 자동 생산합니다. 기본 작동은 [`KSP`](https://kotlinlang.org/docs/ksp-overview.html)와 [`kotlinpoet`](https://github.com/square/kotlinpoet)으로 진행됩니다. 생성하는 규칙은 `QuackComponents`, `AideModifiers`가 있습니다. diff --git a/website/docs/03-Artifacts/03-animation.md b/website/docs/guides/animation.mdx similarity index 89% rename from website/docs/03-Artifacts/03-animation.md rename to website/docs/guides/animation.mdx index 282882834..5567efa3f 100644 --- a/website/docs/03-Artifacts/03-animation.md +++ b/website/docs/guides/animation.mdx @@ -1,7 +1,3 @@ ---- -sidebar_label: 'Animation' ---- - # animation 본 모듈은 꽥꽥의 기본 애니메이션 컴포넌트를 제공합니다. diff --git a/website/docs/03-Artifacts/07-Casa/02-annotation.md b/website/docs/guides/casa/annotation.mdx similarity index 73% rename from website/docs/03-Artifacts/07-Casa/02-annotation.md rename to website/docs/guides/casa/annotation.mdx index 4f7207bdc..d9f61368c 100644 --- a/website/docs/03-Artifacts/07-Casa/02-annotation.md +++ b/website/docs/guides/casa/annotation.mdx @@ -1,10 +1,10 @@ --- -sidebar_label: 'Annotation' +sidebar_label: annotation --- # casa-annotation -본 모듈은 안드로이드 의존성이 없는 순수한 [casa-processor](04-processor.md) 메타데이터 어노테이션을 제공합니다. +본 모듈은 안드로이드 의존성이 없는 순수한 [casa-processor](processor.mdx) 메타데이터 어노테이션을 제공합니다. ## Download ![](https://img.shields.io/maven-central/v/team.duckie.quackquack.casa/casa-annotation?style=flat-square) diff --git a/website/docs/03-Artifacts/07-Casa/03-material.md b/website/docs/guides/casa/material.mdx similarity index 76% rename from website/docs/03-Artifacts/07-Casa/03-material.md rename to website/docs/guides/casa/material.mdx index e15525190..e2ac72d6c 100644 --- a/website/docs/03-Artifacts/07-Casa/03-material.md +++ b/website/docs/guides/casa/material.mdx @@ -1,10 +1,10 @@ --- -sidebar_label: 'Material' +sidebar_label: material --- # casa-material -본 모듈은 안드로이드 의존성이 있는 [casa-processor](04-processor.md) 메타데이터 클래스를 제공합니다. +본 모듈은 안드로이드 의존성이 있는 [casa-processor](processor.mdx) 메타데이터 클래스를 제공합니다. ## Download ![](https://img.shields.io/maven-central/v/team.duckie.quackquack.casa/casa-material?style=flat-square) diff --git a/website/docs/03-Artifacts/07-Casa/01-overview.md b/website/docs/guides/casa/overview.mdx similarity index 92% rename from website/docs/03-Artifacts/07-Casa/01-overview.md rename to website/docs/guides/casa/overview.mdx index c3083a71c..43b1dc341 100644 --- a/website/docs/03-Artifacts/07-Casa/01-overview.md +++ b/website/docs/guides/casa/overview.mdx @@ -1,5 +1,5 @@ --- -sidebar_label: 'Overview' +sidebar_label: Overview --- # casa-ui diff --git a/website/docs/03-Artifacts/07-Casa/04-processor.md b/website/docs/guides/casa/processor.mdx similarity index 97% rename from website/docs/03-Artifacts/07-Casa/04-processor.md rename to website/docs/guides/casa/processor.mdx index 593c5969b..0fa21a095 100644 --- a/website/docs/03-Artifacts/07-Casa/04-processor.md +++ b/website/docs/guides/casa/processor.mdx @@ -1,5 +1,5 @@ --- -sidebar_label: 'Processor' +sidebar_label: processor --- # casa-processor diff --git a/website/docs/02-documentation-rule.mdx b/website/docs/guides/documentation-style.mdx similarity index 98% rename from website/docs/02-documentation-rule.mdx rename to website/docs/guides/documentation-style.mdx index a9354067f..76abce1ba 100644 --- a/website/docs/02-documentation-rule.mdx +++ b/website/docs/guides/documentation-style.mdx @@ -1,6 +1,5 @@ --- -sidebar_label: 'Documentation' -slug: /documentation +sidebar_label: Documentation style --- import ColorBox from '@site/src/components/ColorBox'; diff --git a/website/docs/03-Artifacts/images/comment-ui.svg b/website/docs/guides/images/comment-ui.svg similarity index 100% rename from website/docs/03-Artifacts/images/comment-ui.svg rename to website/docs/guides/images/comment-ui.svg diff --git a/website/docs/03-Artifacts/images/secondary-button.svg b/website/docs/guides/images/secondary-button.svg similarity index 100% rename from website/docs/03-Artifacts/images/secondary-button.svg rename to website/docs/guides/images/secondary-button.svg diff --git a/website/docs/03-Artifacts/images/typography.svg b/website/docs/guides/images/typography.svg similarity index 100% rename from website/docs/03-Artifacts/images/typography.svg rename to website/docs/guides/images/typography.svg diff --git a/website/docs/03-Artifacts/02-material.md b/website/docs/guides/material.mdx similarity index 86% rename from website/docs/03-Artifacts/02-material.md rename to website/docs/guides/material.mdx index cab91a713..fa1abdb7a 100644 --- a/website/docs/03-Artifacts/02-material.md +++ b/website/docs/guides/material.mdx @@ -1,7 +1,3 @@ ---- -sidebar_label: 'Material' ---- - # material 본 모듈은 꽥꽥의 기본 디자인 리소스를 제공합니다. @@ -11,7 +7,7 @@ sidebar_label: 'Material' - 색상 - 아이콘 - 타이포그래피 -- 컴포저블 모양 +- 컴포저블 모양 (shape) - 컴포저블 테마 ## Download ![](https://img.shields.io/maven-central/v/team.duckie.quackquack.material/material?style=flat-square) diff --git a/website/docs/03-Artifacts/01-runtime.md b/website/docs/guides/runtime.mdx similarity index 89% rename from website/docs/03-Artifacts/01-runtime.md rename to website/docs/guides/runtime.mdx index 1504619b4..844c455f1 100644 --- a/website/docs/03-Artifacts/01-runtime.md +++ b/website/docs/guides/runtime.mdx @@ -1,7 +1,3 @@ ---- -sidebar_label: 'Runtime' ---- - # runtime 본 모듈은 꽥꽥의 런타임(Jetpack Compose Runtime) 함수를 구현합니다. diff --git a/website/docs/03-Artifacts/05-Sugar/images/complex-psi-defaultvalue.jpeg b/website/docs/guides/sugar/images/complex-psi-defaultvalue.jpeg similarity index 100% rename from website/docs/03-Artifacts/05-Sugar/images/complex-psi-defaultvalue.jpeg rename to website/docs/guides/sugar/images/complex-psi-defaultvalue.jpeg diff --git a/website/docs/03-Artifacts/05-Sugar/images/flow.png b/website/docs/guides/sugar/images/flow.png similarity index 100% rename from website/docs/03-Artifacts/05-Sugar/images/flow.png rename to website/docs/guides/sugar/images/flow.png diff --git a/website/docs/03-Artifacts/05-Sugar/images/simple-psi-defaultvalue.jpeg b/website/docs/guides/sugar/images/simple-psi-defaultvalue.jpeg similarity index 100% rename from website/docs/03-Artifacts/05-Sugar/images/simple-psi-defaultvalue.jpeg rename to website/docs/guides/sugar/images/simple-psi-defaultvalue.jpeg diff --git a/website/docs/03-Artifacts/05-Sugar/02-material.md b/website/docs/guides/sugar/material.mdx similarity index 92% rename from website/docs/03-Artifacts/05-Sugar/02-material.md rename to website/docs/guides/sugar/material.mdx index a8e9a2df8..20fd7e7e3 100644 --- a/website/docs/03-Artifacts/05-Sugar/02-material.md +++ b/website/docs/guides/sugar/material.mdx @@ -1,5 +1,5 @@ --- -sidebar_label: 'Material' +sidebar_label: material --- # sugar-material diff --git a/website/docs/03-Artifacts/05-Sugar/01-overview.mdx b/website/docs/guides/sugar/overview.mdx similarity index 99% rename from website/docs/03-Artifacts/05-Sugar/01-overview.mdx rename to website/docs/guides/sugar/overview.mdx index 408bbb9cd..77b45785f 100644 --- a/website/docs/03-Artifacts/05-Sugar/01-overview.mdx +++ b/website/docs/guides/sugar/overview.mdx @@ -1,6 +1,5 @@ --- -sidebar_label: 'Overview' -title: 'sugar-processor' +sidebar_label: Overview --- # sugar-processor-kotlinc diff --git a/website/docs/guides/ui/components.mdx b/website/docs/guides/ui/components.mdx new file mode 100644 index 000000000..345052cd3 --- /dev/null +++ b/website/docs/guides/ui/components.mdx @@ -0,0 +1,3 @@ +# Components + +TODO \ No newline at end of file diff --git a/website/docs/03-Artifacts/04-ui.md b/website/docs/guides/ui/mental-model.mdx similarity index 97% rename from website/docs/03-Artifacts/04-ui.md rename to website/docs/guides/ui/mental-model.mdx index f04e0c3c9..fe365c20a 100644 --- a/website/docs/03-Artifacts/04-ui.md +++ b/website/docs/guides/ui/mental-model.mdx @@ -1,8 +1,8 @@ --- -sidebar_label: 'Ui' +sidebar_label: Mental model --- -# ui +# Thinking in QuackQuack 본 모듈은 꽥꽥의 디자인 컴포넌트를 구현합니다. 기존의 `ui-components` 모듈과 완전히 다른 구현을 제공합니다. @@ -10,7 +10,7 @@ sidebar_label: 'Ui' `1.x.x` 버전까지 제공되는 `ui-components`는 *정직한* 디자인 시스템이었습니다. 정직하다 보니 발생하는 문제도 몇몇 있었습니다. 예를 들어 아래와 같은 컴포넌트가 있습니다. -![secondary-button](images/secondary-button.svg) +![secondary-button](../images/secondary-button.svg) 이 컴포넌트는 덕키의 secondary 버튼입니다. secondary 버튼의 특징으론 양옆에 아이콘이 들어갈 수 있습니다. 이 특징은 secondary 버튼만의 고유한 특징입니다. 하지만 UI 개발 중에 primary 버튼에도 양옆 아이콘이 있음을 발견했습니다. @@ -36,11 +36,11 @@ sidebar_label: 'Ui' 이뿐만 아니라 variant 문제도 종종 발생합니다. 덕키에서 사용되는 타이포그래피는 다음과 같습니다. -![typography](images/typography.svg) +![typography](../images/typography.svg) 그리고 아래 화면이 있습니다. -![comment](images/comment-ui.svg) +![comment](../images/comment-ui.svg) 이 화면에서 `@멘션`은 `Body1` 타이포그래피를 사용하고 클릭 가능해야 했기에 `QuackAnnotatedBody1`이라는 네이밍의 컴포넌트로 개발되고 사용됐습니다. 하지만 다른 화면에서 동일한 역할을 하는 `Headline1` 타이포그래피의 컴포넌트가 필요해졌습니다. diff --git a/website/docs/guides/ui/tokens.mdx b/website/docs/guides/ui/tokens.mdx new file mode 100644 index 000000000..4f2ca1746 --- /dev/null +++ b/website/docs/guides/ui/tokens.mdx @@ -0,0 +1,7 @@ +--- +sidebar_label: Tokens +--- + +# Design Tokens + +TODO \ No newline at end of file diff --git a/website/docs/guides/util/backend.mdx b/website/docs/guides/util/backend.mdx new file mode 100644 index 000000000..81cbda059 --- /dev/null +++ b/website/docs/guides/util/backend.mdx @@ -0,0 +1,7 @@ +--- +sidebar_label: backend +--- + +# backend-util + +TODO \ No newline at end of file diff --git a/website/docs/03-Artifacts/08-util.md b/website/docs/guides/util/common.mdx similarity index 86% rename from website/docs/03-Artifacts/08-util.md rename to website/docs/guides/util/common.mdx index 1f5ab9b8b..c4debe8ba 100644 --- a/website/docs/03-Artifacts/08-util.md +++ b/website/docs/guides/util/common.mdx @@ -1,8 +1,8 @@ --- -sidebar_label: 'Util' +sidebar_label: common --- -# util +# util (common-util) 본 모듈은 꽥꽥에서 사용할 유틸을 제공합니다. diff --git a/website/docs/images/logo.svg b/website/docs/images/logo.svg deleted file mode 100644 index dbf2c0911..000000000 --- a/website/docs/images/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/website/docs/images/quackquack.svg b/website/docs/images/quackquack.svg new file mode 100644 index 000000000..4b56c0c08 --- /dev/null +++ b/website/docs/images/quackquack.svg @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/docs/introduction.mdx b/website/docs/introduction.mdx new file mode 100644 index 000000000..b9dc84366 --- /dev/null +++ b/website/docs/introduction.mdx @@ -0,0 +1,60 @@ +--- +slug: / +sidebar_label: Introduction +--- + +import QuackQuackCharacter from './images/quackquack.svg'; + +# QuackQuack for Android + + + +

+ +QuackQuack은 꽥꽥이라 발음하며 **덕키의 UI Kit, 그 이상의 제품**입니다. +덕키 모바일 프로덕트에 사용되며, 최고의 사용자 경험과 개발자 경험 제공을 목표로 합니다. + +꽥꽥은 아래와 같은 목표로 탄생했습니다. + +
+디자이너-개발자 간 UI 컴포넌트 용어/이미지 통일 + 디자이너는 컴포넌트를 디자인하면서 붙이는 레이블에 익숙하지만 개발자는 해당 레이블에 익숙하지 않을 수 있습니다. + 또한 컴포넌트의 디자인 맥락이 머릿속에 있는데 개발자는 그렇지 않을 수 있습니다. + 이러한 상황이 지속되면 디자이너와 개발자 간 소통이 어려워질 수 있습니다. + 이를 예방하기 위해 덕키 디자인에 사용되는 컴포넌트를 UI Kit로 만들어 모두가 동일한 용어와 이미지를 연상할 수 있게 합니다. + 또한 모르는 컴포넌트가 나왔을 때도 쉽게 찾아볼 수 있도록 합니다. +
+ +
+생산성 + 디자인을 시스템화하여 개발하면 다음과 같은 이점을 기대할 수 있습니다. +

+ • 구현이 완료된 컴포넌트와 그렇지 않은 컴포넌트가 명확하게 구분되어 하나의 컴포넌트를 중복으로 개발하는 일이 없어짐 +
+ • 동일한 컴포넌트인데 개발자의 실수로 세부 디자인에 오차가 생길 일이 없어짐 +
+ • UI Kit 피쳐를 별도로 가져가면 프로덕트 피쳐 개발자가 하나의 주제에만 집중할 수 있음 + (디자인에 변경이 생겼을 때 직접 UI 코드베이스를 건들 필요가 없고, 오직 비즈니스 로직에만 집중할 수 있음) +
+ +꽥꽥은 덕키 내부에서 사용할 목적으로 만들어졌기에 외부 프로젝트엔 적합하지 않을 수 있습니다. +다만, Jetpack Compose로 UI Kit 개발을 처음 시도하거나 UI Kit 도입을 고민하시는 분께 도움이 됐으면 해서 public으로 진행합니다. + +## Preview + +[Google PlayStore](https://play.google.com/store/apps/details?id=team.duckie.quackquack.playground)에서 catalog 앱을 설치하실 수 있습니다. + +google playstore + +## Maintainers + +- 개발: [지성빈](https://sungb.in) +- 디자인: [김혜진](https://my.surfit.io/w/417265724) + +## Contributions + +모든 기여를 환영합니다. 기여하시기 전에 [contribution guide](contributing.mdx)를 읽어 주세요. + +> 기여해 주신 모든 분께 감사합니다. +> +> contributor graph diff --git a/website/docs/license.mdx b/website/docs/license.mdx new file mode 100644 index 000000000..9dcea128a --- /dev/null +++ b/website/docs/license.mdx @@ -0,0 +1,25 @@ +--- +sidebar_label: License +--- + +# MIT License + +Copyright (c) 2023 Duckie Team + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. \ No newline at end of file diff --git a/website/docs/modularization.mdx b/website/docs/modularization.mdx new file mode 100644 index 000000000..c63ec8587 --- /dev/null +++ b/website/docs/modularization.mdx @@ -0,0 +1,38 @@ +# Modularization + +... 작성 중 + +![project-dependency-graph.dot.svg](images/project-dependency-graph.dot.svg) + +- ![catalog](images/badges/catalog.svg): 디자인 컴포넌트 미리 보기 앱 +- ![casa](images/badges/casa.svg): 디자인 컴포넌트 미리 보기 구성 요소 자동 생성 모듈 +- ![aide](images/badges/aide.svg): 안전한 UI Kit 사용을 돕는 안드로이드 린트 모듈 +- ![sugar](images/badges/sugar.svg): 디자인 컴포넌트의 문법 설탕 자동 생성 모듈 +- ![quackquack](images/badges/quackquack.svg): 디자인 컴포넌트 구현 모듈 + +각각 기능은 세부 도메인별로 모듈화돼 있습니다. + +### casa + +- `annotation`: `CasaModel` 생성을 위한 메타데이터 어노테이션을 제공합니다. +- `material`: casa 구성 클래스를 제공합니다. +- `processor`: 주어진 메타데이터를 기반으로 `CasaModel`을 자동 생성합니다. +- `ui`: 주어진 casa 구성 클래스를 기반으로 UI를 그립니다. + +### aide + +- `annotation`: aide 규칙 생성을 위한 메타데이터 어노테이션을 제공합니다. +- `processor`: 주어진 메타데이터를 기반으로 aide 규칙을 자동 생성합니다. +- `aide`: 주어진 규칙을 기반으로 aide를 구현합니다. + +### sugar + +- `material`: 문법 설탕 컴포넌트 생성을 위한 메타데이터를 제공합니다. +- `processor`: 주어진 메타데이터를 기반으로 문법 설탕 컴포넌트를 자동 생성합니다. + +### quackquack + +- `runtime`: Compose Runtime을 활용하여 꽥꽥 디자인 컴포넌트가 작동하기 위한 환경을 제공합니다. +- `material`: UI Kit의 기본 리소스를 제공합니다. +- `animation`: 기초적인 애니메이션을 제공합니다. +- `ui`: 디자인 컴포넌트를 구현합니다. diff --git a/website/docs/releases.mdx b/website/docs/releases.mdx new file mode 100644 index 000000000..0cd6f47cf --- /dev/null +++ b/website/docs/releases.mdx @@ -0,0 +1,7 @@ +--- +sidebar_label: Releases +--- + +# Releases (Changelog) + +... 작성 중 diff --git a/website/docs/04-resources.md b/website/docs/resources.mdx similarity index 100% rename from website/docs/04-resources.md rename to website/docs/resources.mdx diff --git a/website/docs/testing.mdx b/website/docs/testing.mdx new file mode 100644 index 000000000..5d5674126 --- /dev/null +++ b/website/docs/testing.mdx @@ -0,0 +1,75 @@ +import 'react-tooltip/dist/react-tooltip.css' +import { Tooltip } from 'react-tooltip' + +# Testing + +테스트 가치가 있다고 판단되는 기능이라면 최대 3가지 방식의 테스트를 진행합니다. + +1. 단위 테스트 +2. UI 테스트 +3. 스냅샷 테스트 + +## 단위 테스트 + +단위 테스트는 다음과 같은 이유로 진행합니다. + +- 리팩터링은 "*기존 결과에 영향을 미치지 않고* 코드의 로직을 개선하는 작업"를 뜻합니다. + 테스트가 없다면 리팩터링 후에 기존 결과에 영향을 미치지 않았는지 확인하기 위해 구현된 모든 로직들을 검토해야 합니다. + 이는 리팩터링마다 생산성 저하를 의미하고 리팩터링을 멀리하게 되는 이유가 됩니다. 하지만 테스트 코드가 있다면 리팩터링 + 후에 전체 테스트를 실행해 보는 것만으로 기존 결과에 영향을 미치지 않았는지 검토할 수 있습니다. + +- 본인 의외에 다른 사람이 작성한 코드가 내가 생각한 대로 100% 작동할 것이라고 확신하는 건 + 쉽지 않습니다. 하지만 테스트 코드가 있다면 해당 테스트가 성공함을 확인함으로써 이 코드가 내가 생각한 대로 작동한다는 걸 확신할 후 있습니다. + +- 테스트를 하지 않는다면 Clean Code의 조건 중 하나인 "testable 한 코드" 조건이 무시됩니다. + 그러면 자연스럽게 Clean Code와는 점점 멀어지게 됩니다. + +단위 테스트 프레임워크로는 [JUnit4](https://junit.org/junit4/)와 [Kotest](https://kotest.io/)를 사용합니다. + +Compose 테스트에 사용합니다. +Compose 테스트 외에 모든 테스트에 사용합니다. + +## UI 테스트 + +UI 테스트는 다음과 같은 이유로 진행합니다. + +- 여러 가지 UI 상태의 depth에 직접 도달하면서 테스트를 진행하는 건 시간적으로 매우 비효율적입니다. +- 유저가 하나의 UI에서 정말 많은 상태를 만들 수 있으므로 최대한 많은 상태에서의 UI 테스트가 권장됩니다. + +## 스냅샷 테스트 + +스냅샷 테스트는 다음과 같은 이유로 진행합니다. + +- 캡처한 UI를 이미지로 저장하여 디자이너분께 전달하면 좀 더 정확하게 UI를 검증할 수 있습니다. + +- 의도하지 않은 UI에 변화가 생겼는지를 검사할 수 있습니다. 예를 들어 안드로이드의 디자인 시스템은 + 기본적으로 머터리얼을 사용합니다. 만약 머터리얼이 업데이트되면서 Checkbox를 그리는 방식이 달라졌다면 머터리얼 + Change Note를 보지 않는 이상 알아차리기 쉽지 않습니다. (Checkbox의 사용 비중이 앱 내에서 크지 않다고 가정합니다.) + 의도치 않은 Checkbox의 변화를 알아차리기 위해선 직접 Checkbox가 쓰이고 있는 UI에 도달해야 합니다. + 하지만 스냅샷 테스트를 이용한다면 Checkbox가 변하기 전의 golden과 비교하여 쉽게 변경을 알아차릴 수 있습니다. + +- 직접 확인하는 UI 테스트의 경우에는 확인하고 싶은 UI를 보기 위해 앱 실행 후 해당 UI가 보여지는 화면까지 + 매번 클릭하여 들어가야 합니다. 하지만 스냅샷 테스트를 이용한다면 내가 원하는 UI가 캡처된 이미지 파일을 + 확인하는 것으로 원하는 UI의 결과 확인이 가능합니다. 이렇게 스냅샷 테스트를 진행한다면 많은 UI 테스트의 시간을 + 줄일 수 있습니다. + +- UI 캡처만 하면 되므로 정말 쉽게 여러 상태의 디자인을 테스트할 수 있습니다. + 덕분에 font scale, 다크 모드, 폴더블 디바이스 등등 여러 상태의 UI 테스트를 정말 쉽게 진행하게 됩니다. + +스냅샷 테스트 라이브러리는 [Roborazzi](https://github.com/takahirom/roborazzi)를 사용합니다. + + + Paparazzi와 비슷하지만 보다 안정적입니다. + + +스냅샷 테스트의 방식으론 크게 3가지가 있습니다. + +1. 피그마 이미지로 골든 테스트 +2. 골든 컴포넌트를 만들어서 골든 테스트 +3. 골든 이미지를 만들어서 골든 테스트 + +1번의 경우 디자이너분이 가정하신 density 환경과 test-device의 density 환경을 맞추는 게 까다롭습니다.
+2번의 경우 골든 컴포넌트를 잘못 설계할 수 있으므로 비교적 정확도가 떨어집니다.
+3번의 경우 직접 스냅샷을 확인하여 골든으로 처리하므로 1번과 2번에 비해 높은 정확도를 갖습니다. + +따라서 꽥꽥은 스냅샷 테스트를 3번 방식으로 진행합니다. \ No newline at end of file diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index c0ec8e1b9..b8d07d85e 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -6,9 +6,9 @@ const config = { title: 'QuackQuack', url: 'https://quackquack.duckie.team', baseUrl: '/android/', - favicon: 'img/logo.ico', + favicon: 'images/logo.ico', onBrokenMarkdownLinks: 'throw', - tagline: 'Highly automated and Modifier-driven Jetpack Compose design system', + tagline: 'Highly automated and Modifier-driven Jetpack Compose UI Kit', presets: [ [ '@docusaurus/preset-classic', @@ -36,6 +36,7 @@ const config = { ], ], themeConfig: { + image: 'images/meta-banner.png', docs: { sidebar: { hideable: true, @@ -45,7 +46,7 @@ const config = { title: 'QuackQuack', logo: { alt: 'QuackQuack Logo', - src: 'img/logo.svg', + src: 'images/logo.svg', }, items: [ { @@ -57,6 +58,11 @@ const config = { }, footer: { style: 'dark', + logo: { + alt: 'Duckie Developer', + src: 'images/duckie-developer.svg', + href: 'https://github.com/duckie-team', + }, copyright: `Copyright © ${new Date().getFullYear()} Duckie team. Built with Docusaurus.`, }, prism: { diff --git a/website/package-lock.json b/website/package-lock.json index fbc30a643..d01446620 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -15,7 +15,8 @@ "clsx": "^1.2.1", "prism-react-renderer": "^1.3.5", "react": "^17.0.2", - "react-dom": "^17.0.2" + "react-dom": "^17.0.2", + "react-tooltip": "^5.11.2" }, "devDependencies": { "@docusaurus/module-type-aliases": "2.4.0", @@ -2644,6 +2645,19 @@ "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/@floating-ui/core": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.6.tgz", + "integrity": "sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg==" + }, + "node_modules/@floating-ui/dom": { + "version": "1.2.7", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.7.tgz", + "integrity": "sha512-DyqylONj1ZaBnzj+uBnVfzdjjCkFCL2aA9ESHLyUOGSqb03RpbLMImP1ekIQXYs4KLk9jAjJfZAU8hXfWSahEg==", + "dependencies": { + "@floating-ui/core": "^1.2.6" + } + }, "node_modules/@hapi/hoek": { "version": "9.3.0", "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz", @@ -4753,6 +4767,11 @@ "node": ">=8" } }, + "node_modules/classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "node_modules/clean-css": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz", @@ -10020,6 +10039,19 @@ "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-tooltip": { + "version": "5.11.2", + "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.11.2.tgz", + "integrity": "sha512-yKTX6FeHtv2DjvuHHIjvNkBcTzbTk63wqVbAe7+Ub09ePzby54AdfYppZKbx5KT1+k9+vEv+k+jTaOZMNxsTnA==", + "dependencies": { + "@floating-ui/dom": "^1.0.0", + "classnames": "^2.3.0" + }, + "peerDependencies": { + "react": ">=16.14.0", + "react-dom": ">=16.14.0" + } + }, "node_modules/readable-stream": { "version": "3.6.2", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", diff --git a/website/package.json b/website/package.json index abc27f76a..475ae8ddb 100644 --- a/website/package.json +++ b/website/package.json @@ -22,7 +22,8 @@ "clsx": "^1.2.1", "prism-react-renderer": "^1.3.5", "react": "^17.0.2", - "react-dom": "^17.0.2" + "react-dom": "^17.0.2", + "react-tooltip": "^5.11.2" }, "devDependencies": { "@docusaurus/module-type-aliases": "2.4.0", diff --git a/website/sidebars.js b/website/sidebars.js index 4f2bbce6e..84fcbf4dd 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -1,6 +1,94 @@ /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */ const sidebars = { - tutorialSidebar: [{type: 'autogenerated', dirName: '.'}], + docs: [ + 'introduction', + { + type: 'category', + label: 'Guides', + link: { + type: 'generated-index', + title: 'QuackQuack Guides', + description: '꽥꽥의 다양한 기능을 배워봅시다!', + keywords: ['guides'], + }, + items: [ + 'guides/documentation-style', + 'guides/runtime', + 'guides/material', + 'guides/animation', + { + type: 'category', + label: 'ui', + link: { + type: 'generated-index', + title: 'QuackQuack UI', + description: '꽥꽥의 핵심 모듈인 ui를 배워봅시다!', + keywords: ['ui'], + }, + items: [ + 'guides/ui/mental-model', + 'guides/ui/components', + 'guides/ui/tokens', + ], + }, + { + type: 'category', + label: 'sugar', + link: { + type: 'doc', + id: 'guides/sugar/overview', + }, + items: ['guides/sugar/material'], + }, + { + type: 'category', + label: 'aide', + link: { + type: 'doc', + id: 'guides/aide/overview', + }, + items: [ + 'guides/aide/annotation', + 'guides/aide/processor', + ], + }, + { + type: 'category', + label: 'casa', + link: { + type: 'doc', + id: 'guides/casa/overview', + }, + items: [ + 'guides/casa/annotation', + 'guides/casa/material', + 'guides/casa/processor', + ], + }, + { + type: 'category', + label: 'utils', + link: { + type: 'generated-index', + title: 'QuackQuack Utils', + description: '꽥꽥은 개발자의 편의를 위해 다양한 유틸을 제공합니다.', + keywords: ['utilities'], + }, + items: [ + 'guides/util/common', + 'guides/util/backend', + ], + }, + ], + }, + 'development', + 'architecture', + 'modularization', + 'testing', + 'contributing', + 'resources', + 'releases', + 'license', + ], }; - -module.exports = sidebars; +module.exports = sidebars; \ No newline at end of file diff --git a/website/src/components/ColorBox.js b/website/src/components/ColorBox.js index 1afdb53e4..ad0f90476 100644 --- a/website/src/components/ColorBox.js +++ b/website/src/components/ColorBox.js @@ -5,7 +5,7 @@ export default function ColorBox({width, height, color}) { width: width, height: height, 'background-color': color, - display: "inline-block" + display: "inline-block", }; return ( diff --git a/website/static/images/duckie-developer.svg b/website/static/images/duckie-developer.svg new file mode 100644 index 000000000..90f05a0ac --- /dev/null +++ b/website/static/images/duckie-developer.svg @@ -0,0 +1,74 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/static/img/logo.ico b/website/static/images/logo.ico similarity index 100% rename from website/static/img/logo.ico rename to website/static/images/logo.ico diff --git a/website/static/images/logo.svg b/website/static/images/logo.svg new file mode 100644 index 000000000..27bfe1dc3 --- /dev/null +++ b/website/static/images/logo.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/website/static/images/meta-banner.png b/website/static/images/meta-banner.png new file mode 100644 index 0000000000000000000000000000000000000000..f4f56bedc347bc910bc06c00804e07845c72f03f GIT binary patch literal 8100 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 literal 0 HcmV?d00001 diff --git a/website/static/img/logo.svg b/website/static/img/logo.svg deleted file mode 100644 index dbf2c0911..000000000 --- a/website/static/img/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file