feat: init elements

[gao-sun]

Summary

introduce the @logto/elements package

Background

we are starting the account center and direct sign-in elements projects, which requires us to deliver a set of ui elements for our developers. per our strategy, these elements should cover the major frameworks, or be framework-agnostic.

so Web Components is definitely a choice. besides, we can use these elements in the Logto Cloud's account center to always be the first user of these elements (i.e. eat your own dog food).

Tech choices and rationale

• Web Components: lit. lit uses decorators but it's the most popular existing Web Components library. stencil is also cool but is has a memory leak issue since 2022. apparently the company has no enough resource on this project.
• bundling: tsup. near-zero config, very neat and simple. nothing to complain so far.

About this pull

init the basic setup of @logto/elements, and introduce this package to @logto/console. since this pull is already large, several things to-do in separate pulls:

• show i18n result in components (now they are just keys) #6250
• replace current console account page with elements
• figure out online documentation for elements
• consider a better approach for react component exports
• try to resolve the duplicate component registration issue in dev (hot reload)
• add tests

Testing

Checklist

• [ ] .changeset
• [ ] unit tests
• [ ] integration tests
• [x] necessary TSDoc comments

[github-actions[bot]]

COMPARE TO master

Total Size Diff :warning: :chart_with_upwards_trend: +11.02 KB

Diff by File

|Name|Diff| |---|---| |packages/console/package.json|:chart_with_upwards_trend: +43 Bytes| |packages/console/src/pages/Profile/index.tsx|:chart_with_upwards_trend: +586 Bytes| |packages/core/src/routes/experience/classes/experience-interaction.ts|:chart_with_upwards_trend: +1.67 KB| |packages/core/src/routes/experience/classes/utils.ts|:chart_with_upwards_trend: +1.5 KB| |packages/core/src/routes/experience/classes/validators/profile-validator.ts|:chart_with_upwards_trend: +2.17 KB| |packages/core/src/routes/experience/classes/verifications/code-verification.ts|:chart_with_upwards_trend: +196 Bytes| |packages/core/src/routes/experience/classes/verifications/enterprise-sso-verification.ts|:chart_with_upwards_trend: +1.48 KB| |packages/core/src/routes/experience/classes/verifications/password-verification.ts|:chart_with_upwards_trend: +74 Bytes| |packages/core/src/routes/experience/classes/verifications/social-verification.ts|:chart_with_upwards_trend: +1.53 KB| |packages/core/src/routes/experience/classes/verifications/verification-record.ts|:chart_with_upwards_trend: +590 Bytes| |packages/core/src/routes/experience/index.ts|:chart_with_upwards_trend: +15 Bytes| |packages/core/src/routes/experience/types.ts|:chart_with_upwards_trend: +1.21 KB| |packages/elements/README.md|:chart_with_upwards_trend: +40 Bytes| |packages/elements/package.json|:chart_with_upwards_trend: +1.74 KB| |packages/elements/src/components/logto-card.ts|:chart_with_upwards_trend: +504 Bytes| |packages/elements/src/components/logto-form-card.ts|:chart_with_upwards_trend: +1.2 KB| |packages/elements/src/components/logto-theme-provider.ts|:chart_with_upwards_trend: +543 Bytes| |packages/elements/src/index.ts|:chart_with_upwards_trend: +147 Bytes| |packages/elements/src/locales/en.ts|:chart_with_upwards_trend: +166 Bytes| |packages/elements/src/locales/index.ts|:chart_with_upwards_trend: +1009 Bytes| |packages/elements/src/react.ts|:chart_with_upwards_trend: +636 Bytes| |packages/elements/src/utils/css.ts|:chart_with_upwards_trend: +1.13 KB| |packages/elements/src/utils/string.ts|:chart_with_upwards_trend: +758 Bytes| |packages/elements/src/utils/theme.ts|:chart_with_upwards_trend: +3.79 KB| |packages/elements/tsconfig.json|:chart_with_upwards_trend: +225 Bytes| |packages/elements/tsup.config.ts|:chart_with_upwards_trend: +160 Bytes| |pnpm-lock.yaml|:chart_with_upwards_trend: +8.88 KB|