Merge remote-tracking branch 'origin/main' into feat/LW-6695-staking-…

…package-setup

.github/workflows/packages-staking.yml

@@ -40,6 +40,8 @@ jobs:
         run: yarn install --frozen-lockfile --non-interactive
       - name: Check for linter issues
         run: yarn workspace @lace/staking lint
+      - name: Build dependencies of Staking Center
+        run: yarn workspace @lace/ui build
       - name: Run tests
         run: yarn workspace @lace/staking test:unit --coverage
       - name: Upload test coverage artifacts

apps/browser-extension-wallet/src/views/browser-view/features/staking/components/StakingContainer.tsx

@@ -3,7 +3,7 @@ import { Layout } from '@src/views/browser-view/components';
 import React from 'react';
 
 const Staking =
-  process.env.USE_MULTI_DELEGATION_STAKING === 'true' ? require('@lace/staking').Example : require('./Staking').Staking;
+  process.env.USE_MULTI_DELEGATION_STAKING === 'true' ? require('@lace/staking').Staking : require('./Staking').Staking;
 
 export const StakingContainer = (): React.ReactElement => (
   <Layout>

package.json

@@ -51,7 +51,7 @@
       "prettier --write",
       "markdownlint --fix"
     ],
-    "packages/staking/package.json": "sort-package-json"
+    "packages/{staking,ui}/package.json": "sort-package-json"
   },
   "contributors": [
     "Rhys Bartels-Waller <rhys.bartelswaller@iohk.io> (https://iohk.io)"

packages/staking/.eslintrc.cjs

@@ -3,7 +3,6 @@ module.exports = {
     node: true,
   },
   extends: ['prettier'],
-  ignorePatterns: ['node_modules/**/*'],
   overrides: [
     {
       files: ['src/**/*.d.ts', 'tsup.config.ts', 'vitest.config.ts', '.ladle/*.*'],

packages/staking/.ladle/components.tsx

@@ -0,0 +1,12 @@
+import { GlobalProvider, ThemeState } from '@ladle/react';
+import { ThemeColorScheme, ThemeProvider } from '@lace/ui';
+import React, { useMemo } from 'react';
+
+export const Provider: GlobalProvider = ({ children, globalState }) => {
+  const isLightTheme = useMemo(() => globalState.theme === ThemeState.Light, [globalState.theme]);
+  return (
+    <ThemeProvider colorScheme={isLightTheme ? ThemeColorScheme.Light : ThemeColorScheme.Dark}>
+      {children}
+    </ThemeProvider>
+  );
+};

packages/staking/.ladle/config.mjs

@@ -2,6 +2,8 @@ const CWD = process.cwd();
 
 export default {
   host: '127.0.0.1',
+  port: 8080,
   previewHost: '127.0.0.1',
+  previewPort: 8080,
   viteConfig: `${CWD}/.ladle/vite.config.ts`,
 };

packages/staking/.ladle/vite.config.ts

@@ -1,8 +1,10 @@
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 import checker from 'vite-plugin-checker';
 import eslint from 'vite-plugin-eslint';
 
 export const ladleViteConfig = {
   plugins: [
+    vanillaExtractPlugin(),
     checker({
       overlay: {
         position: 'br',
@@ -11,7 +13,10 @@ export const ladleViteConfig = {
         root: '../',
       },
     }),
-    eslint(),
+    eslint({
+      include: './**/*',
+      overrideConfigFile: '.eslintrc.cjs',
+    }),
   ],
 };
 

packages/staking/.lostpixel/.gitignore

@@ -0,0 +1,2 @@
+current
+difference

packages/staking/docs/001-structure.md

@@ -0,0 +1,32 @@
+# Staking package structure
+
+## Problem
+
+Staking package should have a well described way of splitting the code, based on our past experiences.
+The way for the separation of concerns should be easy to understand by any developer reading this codebase.
+
+## Solution
+
+There are numerous ways to split the codebase including:
+
+1. Atomic Design (atoms, molecules, organisms, templates, and views)
+2. NextJS-like simple split (components, views)
+3. BEM-like splitting (elements, blocks)
+4. Flat components directories
+5. Feature-based design
+
+We have chosen to go with Feature-based design.
+We also discussed combining Feature-based design with Atomic Design, but it seemed to be an overkill.
+
+### Proposed structure
+
+- src
+  - features
+    - overview
+      - OverviewNavigation
+      - StakingCard
+      - StakingOverviewView
+      - index
+    - StakingView
+      - StakingView
+      - index

packages/staking/package.json

@@ -50,7 +50,9 @@
   },
   "devDependencies": {
     "@ladle/react": "^2.12.3",
+    "@lace/ui": "^0.1.0",
     "@tsconfig/create-react-app": "^1.0.3",
+    "@vanilla-extract/vite-plugin": "^3.8.2",
     "@vitest/coverage-c8": "^0.31.0",
     "concurrently": "^8.0.1",
     "esbuild-scss-modules-plugin": "^1.1.1",
@@ -64,6 +66,7 @@
     "wait-on": "^7.0.1"
   },
   "peerDependencies": {
+    "@lace/ui": "^0.1.0",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   }

packages/staking/src/features/overview/OverviewNavigation.stories.tsx

@@ -0,0 +1,19 @@
+import type { Story, StoryDefault } from '@ladle/react';
+import { OverviewNavigation } from './OverviewNavigation';
+
+export const BasicStory: Story<{ onValueChange: (newValue: string) => void }> = ({ onValueChange }) => (
+  <OverviewNavigation onValueChange={onValueChange} />
+);
+
+BasicStory.argTypes = {
+  onValueChange: {
+    action: 'valueChanged',
+  },
+};
+
+const storyDefault: StoryDefault = {
+  title: 'Overview / Staking Overview Navigation',
+};
+
+// eslint-disable-next-line import/no-default-export
+export default storyDefault;

packages/staking/src/features/overview/OverviewNavigation.tsx

@@ -0,0 +1,14 @@
+import { SubNavigation } from '@lace/ui';
+
+type OverviewNavigationProps = Omit<SubNavigation.SubNavigationRootProps, 'children'>;
+
+export const OverviewNavigation = ({ onValueChange, defaultValue = 'overview' }: OverviewNavigationProps) => (
+  <SubNavigation.Root
+    aria-label="Staking Overview Navigation"
+    defaultValue={defaultValue}
+    onValueChange={onValueChange}
+  >
+    <SubNavigation.Item name="Overview" value="overview" />
+    <SubNavigation.Item name="Browse pools" value="browse" />
+  </SubNavigation.Root>
+);

packages/staking/src/features/overview/index.ts

@@ -0,0 +1 @@
+export { OverviewNavigation } from './OverviewNavigation';

packages/staking/src/features/staking/Staking.stories.tsx

@@ -0,0 +1,8 @@
+import type { Story } from '@ladle/react';
+import { Staking } from './Staking';
+
+export const StakingStory: Story = () => <Staking />;
+
+StakingStory.args = {
+  test: true,
+};

packages/staking/src/features/staking/Staking.test.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+import { Staking } from './Staking';
+
+describe('test prop', () => {
+  it('renders properly', () => {
+    const { container } = render(<Staking />);
+
+    expect(container.textContent).toMatchInlineSnapshot('"StakingOverviewBrowse pools"');
+  });
+});

packages/staking/src/features/staking/Staking.tsx

@@ -0,0 +1,9 @@
+import { Text } from '@lace/ui';
+import { OverviewNavigation } from '../overview';
+
+export const Staking = () => (
+  <>
+    <Text.Heading>Staking</Text.Heading>
+    <OverviewNavigation />
+  </>
+);

packages/staking/src/features/staking/index.ts

@@ -0,0 +1 @@
+export { Staking } from './Staking';

packages/staking/src/index.ts

@@ -1,2 +1 @@
-export { Example } from './Example';
-export type { ExampleProps } from './Example';
+export { Staking } from './features/staking';

packages/staking/tsup.config.ts

@@ -1,5 +1,3 @@
-/* eslint-disable new-cap */
-import { ScssModulesPlugin } from 'esbuild-scss-modules-plugin';
 import { defineConfig } from 'tsup';
 
 const tsupConfig = defineConfig([
@@ -8,7 +6,6 @@ const tsupConfig = defineConfig([
     clean: true,
     dts: true,
     entry: ['./src/index.ts'],
-    esbuildPlugins: [ScssModulesPlugin() as never],
     format: ['esm', 'cjs'],
     name: 'lace/staking',
     outDir: './dist',

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lace/ui",
-  "version": "1.0.0",
+  "version": "0.1.0",
   "description": "Lace UI Toolkit",
   "repository": {
     "type": "git",
@@ -41,7 +41,7 @@
     "@rollup/plugin-commonjs": "20.0.0",
     "@rollup/plugin-image": "2.1.1",
     "@rollup/plugin-node-resolve": "13.0.4",
-    "@rollup/plugin-typescript": "8.3.0",
+    "@rollup/plugin-typescript": "^11.1.1",
     "@storybook/addon-actions": "^6.5.16",
     "@storybook/addon-essentials": "^6.5.16",
     "@storybook/addon-interactions": "^6.5.16",

packages/ui/rollup.config.js

@@ -13,6 +13,7 @@ export default () => ({
     typescript({
       tsconfig: 'tsconfig.json',
       composite: false,
+      exclude: ['**/*.stories.tsx'],
     }),
     peerDepsExternal(),
     commonjs(),

packages/ui/src/design-system/buttons/skeleton-button.tsx

@@ -39,7 +39,9 @@ export const SkeletonButton = ({
     >
       <Flex alignItems="center" justifyContent="center">
         {icon !== undefined && <Flex pr="$8">{icon}</Flex>}
-        <Text.Button className={className.label}>{label}</Text.Button>
+        <Text.Button className={className.label}>
+          {label}
+        </Text.Button>
       </Flex>
     </button>
   );

packages/ui/src/design-system/sub-navigation/index.ts

@@ -1,2 +1,3 @@
 export { SubNavigation as Root } from './sub-navigation.component';
 export { Item } from './sub-navigation-item.component';
+export type { SubNavigationRootProps } from './sub-navigation.component';

packages/ui/src/design-system/sub-navigation/sub-navigation.component.tsx

@@ -8,7 +8,7 @@ import * as cx from './sub-navigation.css';
 import type { Item } from './sub-navigation-item.component';
 import type { OmitClassName } from '../../types';
 
-type Props = OmitClassName & {
+export type SubNavigationRootProps = OmitClassName & {
   defaultValue?: string;
   children: ReactElement<typeof Item> | ReactElement<typeof Item>[];
   onValueChange?: (value: string) => void;
@@ -19,7 +19,7 @@ export const SubNavigation = ({
   defaultValue,
   onValueChange,
   ...props
-}: Readonly<Props>): JSX.Element => (
+}: Readonly<SubNavigationRootProps>): JSX.Element => (
   <Tabs.Root
     className={cx.root}
     defaultValue={defaultValue}

packages/ui/src/index.ts

@@ -1 +1,2 @@
 export * from './design-system';
+export { ThemeColorScheme, ThemeProvider } from './design-tokens';

packages/ui/tsconfig.json

@@ -18,7 +18,7 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
-    "target": "ES2016"
+    "target": "ES2018"
   },
   "exclude": ["dist"]
 }