feat(packages): core-ui migration

* chore: fix migration

chore: fix typing

chore: move eslint config and prettier config

* chore(packages): sync up

* chore(packages): fix types

* chore(build): npm ci

* chore(build): update package-lock.json

* chore(build): verbose logging

* chore(build): ignore script

* chore(build): update package-lock.json

* chore(build): update package-lock.json

* chore(packages): sync up

* chore(packages): update initial version

Author: supertong

.github/workflows/verify.yml

@@ -20,7 +20,7 @@ jobs:
           node-version: '22.3.0'
 
       - name: Install dependencies
-        run: npm install
+        run: npm ci --verbose
 
       - name: Lint affected
         run: npx nx affected --target=lint --base=origin/main

package-lock.json

@@ -0,0 +1,9 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"],
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "semi": true,
+  "printWidth": 120,
+  "bracketSpacing": true,
+  "endOfLine": "lf"
+}

packages/babylon-core-ui/.prettierrc

@@ -0,0 +1,25 @@
+import { useMemo, useState, useEffect } from "react";
+import * as React from "react";
+import { addons } from "@storybook/preview-api";
+import { DocsContainer, DocsContainerProps } from "@storybook/addon-docs";
+import { themes } from "@storybook/theming";
+import { DARK_MODE_EVENT_NAME } from "storybook-dark-mode";
+
+const channel = addons.getChannel();
+
+export default function ThemeableDocContainer(props: DocsContainerProps) {
+  const [isDark, setDark] = useState(false);
+
+  const activeTheme = useMemo(
+    () => (isDark ? { ...themes.dark, appPreviewBg: "#222425" } : themes.light),
+    [isDark]
+  );
+
+  useEffect(() => {
+    channel.on(DARK_MODE_EVENT_NAME, setDark);
+
+    return () => channel.removeListener(DARK_MODE_EVENT_NAME, setDark);
+  }, [setDark]);
+
+  return <DocsContainer {...props} theme={activeTheme} />;
+}

packages/babylon-core-ui/.storybook/components/ThemeableDocContainer.tsx

@@ -0,0 +1,17 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-essentials",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions",
+    "storybook-dark-mode",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+};
+export default config;

packages/babylon-core-ui/.storybook/main.ts

@@ -0,0 +1,6 @@
+import { addons } from "@storybook/manager-api";
+import { themes } from "@storybook/theming";
+
+addons.setConfig({
+  theme: themes.light,
+});

packages/babylon-core-ui/.storybook/manager.ts

@@ -0,0 +1,112 @@
+<style>
+  @font-face {
+  font-family: "Px Grotesk";
+  src: url("/fonts/Px-Grotesk/Px-Grotesk-Black.eot");
+  src:
+    url("/fonts/Px-Grotesk/Px-Grotesk-Black.eot?#iefix") format("embedded-opentype"),
+    url("/fonts/Px-Grotesk/Px-Grotesk-Black.woff2") format("woff2"),
+    url("/fonts/Px-Grotesk/Px-Grotesk-Black.woff") format("woff");
+  font-weight: 900;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Px Grotesk";
+  src: url("/fonts/Px-Grotesk/Px-Grotesk-Bold.eot");
+  src:
+    url("/fonts/Px-Grotesk/Px-Grotesk-Bold.eot?#iefix") format("embedded-opentype"),
+    url("/fonts/Px-Grotesk/Px-Grotesk-Bold.woff2") format("woff2"),
+    url("/fonts/Px-Grotesk/Px-Grotesk-Bold.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Px Grotesk";
+  src: url("/fonts/Px-Grotesk/Px-Grotesk-Regular.eot");
+  src:
+    url("/fonts/Px-Grotesk/Px-Grotesk-Regular.eot?#iefix") format("embedded-opentype"),
+    url("/fonts/Px-Grotesk/Px-Grotesk-Regular.woff2") format("woff2"),
+    url("/fonts/Px-Grotesk/Px-Grotesk-Regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Px Grotesk";
+  src: url("/fonts/Px-Grotesk/Px-Grotesk-Light.eot");
+  src:
+    url("/fonts/Px-Grotesk/Px-Grotesk-Light.eot?#iefix") format("embedded-opentype"),
+    url("/fonts/Px-Grotesk/Px-Grotesk-Light.woff2") format("woff2"),
+    url("/fonts/Px-Grotesk/Px-Grotesk-Light.woff") format("woff");
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Px Grotesk";
+  src: url("/fonts/Px-Grotesk/Px-Grotesk-Thin.eot");
+  src:
+    url("/fonts/Px-Grotesk/Px-Grotesk-Thin.eot?#iefix") format("embedded-opentype"),
+    url("/fonts/Px-Grotesk/Px-Grotesk-Thin.woff2") format("woff2"),
+    url("/fonts/Px-Grotesk/Px-Grotesk-Thin.woff") format("woff");
+  font-weight: 250;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Px Grotesk";
+  src: url("/fonts/Px-Grotesk/Px-Grotesk-Screen.eot");
+  src:
+    url("/fonts/Px-Grotesk/Px-Grotesk-Screen.eot?#iefix") format("embedded-opentype"),
+    url("/fonts/Px-Grotesk/Px-Grotesk-Screen.woff2") format("woff2"),
+    url("/fonts/Px-Grotesk/Px-Grotesk-Screen.woff") format("woff");
+  font-weight: 200;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Px Grotesk Mono";
+  src: url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Light.eot");
+  src:
+    url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Light.eot?#iefix") format("embedded-opentype"),
+    url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Light.woff2") format("woff2"),
+    url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Light.woff") format("woff");
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Px Grotesk Mono";
+  src: url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Regular.eot");
+  src:
+    url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Regular.eot?#iefix") format("embedded-opentype"),
+    url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Regular.woff2") format("woff2"),
+    url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Px Grotesk Mono";
+  src: url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Bold.eot");
+  src:
+    url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Bold.eot?#iefix") format("embedded-opentype"),
+    url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Bold.woff2") format("woff2"),
+    url("/fonts/Px-Grotesk-Mono/Px-Grotesk-Mono-Bold.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+}
+
+body {
+  letter-spacing: 0;
+  font-family: Px Grotesk,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+  line-height: 1.5;
+  --tw-text-opacity: 1;
+  color: rgb(18 73 94 / var(--tw-text-opacity));
+  font-feature-settings: "liga" off,"clig" off;
+}
+</style>

packages/babylon-core-ui/.storybook/preview-head.html

@@ -0,0 +1,30 @@
+import type { Preview } from "@storybook/react";
+import { themes } from "@storybook/theming";
+
+import ThemeableDocContainer from "./components/ThemeableDocContainer";
+
+import "../src/index.css";
+
+const preview: Preview = {
+  parameters: {
+    darkMode: {
+      current: "light",
+      darkClass: "dark",
+      lightClass: "light",
+      dark: { ...themes.dark, appPreviewBg: "#222425" },
+      light: themes.light,
+      stylePreview: true,
+    },
+    docs: {
+      container: ThemeableDocContainer,
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

packages/babylon-core-ui/.storybook/preview.ts

@@ -0,0 +1,169 @@
+Business Source License 1.1
+
+License text copyright (c) 2017 MariaDB Corporation Ab, All Rights Reserved.
+"Business Source License" is a trademark of MariaDB Corporation Ab.
+
+
+-----------------------------------------------------------------------------
+
+Parameters
+
+Licensor:             Babylon Labs Ltd.
+
+Licensed Work:        @babylonlabs-io/core-ui
+                      The Licensed Work is (c) 2024 Babylon Labs Ltd.
+
+Additional Use Grant:
+
+In addition to the uses permitted under the non-production license below,
+we grant you a limited, non-exclusive, non-transferable, non-sublicensable,
+revocable license, limited as set forth below, to use the Licensed Work
+in this repository for production commercial uses built on or using and integrated
+with the Babylon Protocol, not including Competing Uses.
+
+Any use beyond the scope of this license, including uses that are not built on or
+using and integrated with the Babylon Protocol, or are Competing Uses,
+will terminate this license to you, automatically and without notice.
+
+This License applies separately and solely to the specific versions of the Licensed Work
+in the specified repository on or before the date of this License, and we may require a
+different license and different provisions for each subsequent version of the
+Licensed Work released by us.
+
+"Babylon Labs", "we", "our", or "us" means Babylon Labs Ltd.
+
+"Babylon Protocol" means the Bitcoin staking protocol as further described in the documentation
+here (https://docs.babylonlabs.io/docs/introduction/babylon-overview), as updated from time to time.
+
+"Competing Use" means any use of the Licensed Work in any product, software, protocol, network,
+application, or service that is made available to any party and that
+(i) substitutes for the use of the Babylon Protocol,
+(ii) offers the same or substantially similar functionality as the Babylon Protocol or
+(iii) is built on or uses a protocol with substantially similar functionality as the Babylon Protocol
+or otherwise facilitates the staking of bitcoin other than by utilizing the Babylon Protocol.
+
+The provisions in this License apply to each individual, entity, group, or association
+(each and collectively, "you" or "your") who uses the Licensed Work for production,
+and you agree to such provisions. Your production use of the Licensed Work is conditional on your
+agreement to this License. If you do not agree and consent to be bound to this License,
+do not so use the Software.
+
+If you do not fall within the limited scope of this license as described above or below,
+or are otherwise not in strict compliance with this License, then this production license does not
+extend to you and does not grant you any production use, including any copying, distributing, or
+making any derivative use of the Licensed Work for production purposes.
+
+Limited Scope of License. Your commercial production license to the Licensed Work
+under this License does not extend to any use:
+
+1.  unless you have legal capacity to consent and agree to be bound by this License;
+2.  unless you have the technical knowledge necessary or advisable to understand and evaluate the
+    risks of using the Licensed Work and the Babylon Protocol;
+3.  if you are a resident or agent of, or an entity organized, incorporated or doing business in,
+    Afghanistan, Belarus, Bosnia and Herzegovina, Burundi, Central African Republic, Crimea, Cuba,
+    Democratic People's Republic of Korea, Democratic Republic of the Congo,
+    Donetsk or Luhansk Regions of Ukraine, Eritrea, Guinea, Guinea-Bissau, Haiti, Iran, Iraq, Lebanon,
+    Libya, Mali, Myanmar, Nicaragua, Russia, Somalia, South Sudan, Sudan, Syria, Venezuela, Yemen,
+    or Zimbabwe or any other country to which the United States, the United Kingdom,
+    the European Union or any of its member states or the United Nations or any of its member states
+    (collectively, the "Major Jurisdictions") embargoes goods or imposes sanctions
+    (such embargoed or sanctioned territories, collectively, the "Restricted Territories");
+4.  if you are, or if you directly or indirectly own or control, from any person or entity that is
+    listed on any sanctions list or equivalent maintained by any of the Major Jurisdictions
+    (collectively, "Sanctions Lists Persons");
+5.  to transact in or with any Restricted Territories or Sanctions List Persons;
+6.  if you are a U.S. Person as defined in 17 CFR § 230.902, or currently or ordinarily located or
+    resident in (or incorporated or organized in) the United States of America, Canada, or
+    Australia (collectively, "Excluded Jurisdictions"), or to transact in or with Excluded Jurisdictions;
+7.  to defraud, or otherwise materially mislead, any person;
+8.  in violation of applicable laws, rules or regulations in your relevant jurisdiction;
+9.  that circumvents any sanctions or export controls targeting you or the country or territory where
+    you are located; or
+10. in any activity that transmits, exchanges, or is otherwise supported by the direct or indirect
+    proceeds of criminal or fraudulent activity.
+
+Any production use of the Licensed Work by you confirms your agreement to the foregoing limitations,
+and your understanding and agreement that they are limitations and not restrictions.
+
+Change Date:          2027-03-15 (March 15th, 2027)
+
+Change License:       Apache 2.0
+
+-----------------------------------------------------------------------------
+
+Terms
+
+The Licensor hereby grants you the right to copy, modify, create derivative
+works, redistribute, and make non-production use of the Licensed Work. The
+Licensor may make an Additional Use Grant, above, permitting limited
+production use.
+
+Effective on the Change Date, or the fourth anniversary of the first publicly
+available distribution of a specific version of the Licensed Work under this
+License, whichever comes first, the Licensor hereby grants you rights under
+the terms of the Change License, and the rights granted in the paragraph
+above terminate.
+
+If your use of the Licensed Work does not comply with the requirements
+currently in effect as described in this License, you must purchase a
+commercial license from the Licensor, its affiliated entities, or authorized
+resellers, or you must refrain from using the Licensed Work.
+
+All copies of the original and modified Licensed Work, and derivative works
+of the Licensed Work, are subject to this License. This License applies
+separately for each version of the Licensed Work and the Change Date may vary
+for each version of the Licensed Work released by Licensor.
+
+You must conspicuously display this License on each original or modified copy
+of the Licensed Work. If you receive the Licensed Work in original or
+modified form from a third party, the terms and conditions set forth in this
+License apply to your use of that work.
+
+Any use of the Licensed Work in violation of this License will automatically
+terminate your rights under this License for the current and all other
+versions of the Licensed Work.
+
+This License does not grant you any right in any trademark or logo of
+Licensor or its affiliates (provided that you may use a trademark or logo of
+Licensor as expressly required by this License).
+
+TO THE EXTENT PERMITTED BY APPLICABLE LAW, THE LICENSED WORK IS PROVIDED ON
+AN "AS IS" BASIS. LICENSOR HEREBY DISCLAIMS ALL WARRANTIES AND CONDITIONS,
+EXPRESS OR IMPLIED, INCLUDING (WITHOUT LIMITATION) WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, NON-INFRINGEMENT, AND
+TITLE.
+
+MariaDB hereby grants you permission to use this License’s text to license
+your works, and to refer to it using the trademark "Business Source License",
+as long as you comply with the Covenants of Licensor below.
+
+-----------------------------------------------------------------------------
+
+Covenants of Licensor
+
+In consideration of the right to use this License’s text and the "Business
+Source License" name and trademark, Licensor covenants to MariaDB, and to all
+other recipients of the licensed work to be provided by Licensor:
+
+1. To specify as the Change License the GPL Version 2.0 or any later version,
+   or a license that is compatible with GPL Version 2.0 or a later version,
+   where "compatible" means that software provided under the Change License can
+   be included in a program with software provided under GPL Version 2.0 or a
+   later version. Licensor may specify additional Change Licenses without
+   limitation.
+
+2. To either: (a) specify an additional grant of rights to use that does not
+   impose any additional restriction on the right granted in this License, as
+   the Additional Use Grant; or (b) insert the text "None".
+
+3. To specify a Change Date.
+
+4. Not to modify this License in any other way.
+
+-----------------------------------------------------------------------------
+
+Notice
+
+The Business Source License (this document, or the "License") is not an Open
+Source license. However, the Licensed Work will eventually be made available
+under an Open Source License, as stated in this License.