chore: add @apps/gallery-new and @reown/appkit-ui-new (#3256)

.changeset/config.json

@@ -7,5 +7,5 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["@examples/*"]
+  "ignore": ["@examples/*", "@apps/gallery-new", "@reown/appkit-ui-new"]
 }

apps/gallery-new/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["../../.eslintrc.json"]
+}

apps/gallery-new/.storybook/main.ts

@@ -0,0 +1,32 @@
+/** @type { import('@storybook/web-components-vite').StorybookConfig } */
+export default {
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  core: {
+    disableTelemetry: true
+  },
+  framework: {
+    name: '@storybook/web-components-vite',
+    options: {}
+  },
+  managerHead: head => `
+  ${head}
+    <style>
+      a[data-nodetype='story'] {
+        display: none;
+      }
+    </style>
+  `,
+  previewHead: head => `
+  ${head}
+    <style>
+      .docblock-code-toggle {
+        display: none !important;
+      }
+    </style>
+  `,
+  docs: {
+    autodocs: true,
+    defaultName: 'Docs'
+  }
+}

apps/gallery-new/.storybook/preview.tsx

@@ -0,0 +1,65 @@
+import { Controls, Description, Primary, Source, Subtitle, Title } from '@storybook/blocks'
+import { GLOBALS_UPDATED, SET_GLOBALS } from '@storybook/core-events'
+import { addons } from '@storybook/preview-api'
+import { themes } from '@storybook/theming'
+import { initializeTheming, setColorTheme } from '@reown/appkit-ui/src/utils/ThemeUtil'
+import React from 'react'
+
+// -- Utilities ------------------------------------------------------------
+initializeTheming({})
+
+const backgroundChangeListener = args => {
+  const bgColor = args.globals.backgrounds?.value
+  if (bgColor) {
+    const theme = bgColor === '#272A2A' ? 'dark' : 'light'
+    setColorTheme(theme)
+  } else {
+    setColorTheme('dark')
+  }
+}
+
+const channel = addons.getChannel()
+channel.addListener(SET_GLOBALS, backgroundChangeListener)
+channel.addListener(GLOBALS_UPDATED, backgroundChangeListener)
+
+// -- Configuration --------------------------------------------------------
+/** @type { import('@storybook/web-components').Preview } */
+export default {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    layout: 'centered',
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/
+      }
+    },
+    backgrounds: {
+      default: 'dark',
+      values: [
+        {
+          name: 'dark',
+          value: '#272A2A'
+        },
+        {
+          name: 'light',
+          value: '#EAF1F1'
+        }
+      ]
+    },
+
+    docs: {
+      theme: themes.dark,
+      page: () => (
+        <>
+          <Title />
+          <Subtitle />
+          <Description />
+          <Primary />
+          <Source dark />
+          <Controls />
+        </>
+      )
+    }
+  }
+}

apps/gallery-new/components/gallery-container/index.ts

@@ -0,0 +1,27 @@
+import { customElement } from '@reown/appkit-ui'
+import { html, LitElement } from 'lit'
+import { property } from 'lit/decorators.js'
+import styles from './styles'
+
+@customElement('gallery-container')
+export class GalleryContainer extends LitElement {
+  public static override styles = [styles]
+
+  // -- state & properties ------------------------------------------- //
+  @property() public width = '0'
+
+  @property() public height = 'auto'
+
+  // -- render ------------------------------------------------------- //
+  public override render() {
+    const inlineStyles = `--container-width: ${this.width}px; --container-height: ${this.height}px;`
+
+    return html`<div style=${inlineStyles}><slot></slot></div>`
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'gallery-container': GalleryContainer
+  }
+}

apps/gallery-new/components/gallery-container/styles.ts

@@ -0,0 +1,16 @@
+import { css } from 'lit'
+
+export default css`
+  div {
+    width: var(--container-width);
+    height: var(--container-height);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: inherit;
+  }
+
+  ::slotted(*) {
+    width: 100%;
+  }
+`

apps/gallery-new/components/gallery-placeholder/index.ts

@@ -0,0 +1,34 @@
+import { customElement } from '@reown/appkit-ui'
+import { html, LitElement } from 'lit'
+import { property } from 'lit/decorators.js'
+import { classMap } from 'lit/directives/class-map.js'
+import styles from './styles'
+
+@customElement('gallery-placeholder')
+export class GalleryPlaceholder extends LitElement {
+  public static override styles = [styles]
+
+  // -- state & properties ------------------------------------------- //
+  @property() public size: 'lg' | 'md' | 'sm' | 'xs' = 'md'
+
+  @property() public background: 'blue' | 'green' | 'red' = 'green'
+
+  @property({ type: Boolean }) public margin = false
+
+  // -- render ------------------------------------------------------- //
+  public override render() {
+    const classes = {
+      [`placeholder-size-${this.size}`]: true,
+      [`placeholder-bg-color-${this.background}`]: true,
+      'placeholder-margin': this.margin
+    }
+
+    return html`<div class="${classMap(classes)}"></div>`
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'gallery-placeholder': GalleryPlaceholder
+  }
+}

apps/gallery-new/components/gallery-placeholder/styles.ts

@@ -0,0 +1,44 @@
+import { css } from 'lit'
+
+export default css`
+  .placeholder-size-xxs {
+    width: 8px;
+    height: 8px;
+  }
+
+  .placeholder-size-xs {
+    width: 16px;
+    height: 16px;
+  }
+
+  .placeholder-size-sm {
+    width: 24px;
+    height: 24px;
+  }
+
+  .placeholder-size-md {
+    width: 32px;
+    height: 32px;
+  }
+
+  .placeholder-size-lg {
+    width: 40px;
+    height: 40px;
+  }
+
+  .placeholder-bg-color-green {
+    background-color: #26d962;
+  }
+
+  .placeholder-bg-color-red {
+    background-color: #f25a67;
+  }
+
+  .placeholder-bg-color-blue {
+    background-color: #667dff;
+  }
+
+  .placeholder-margin {
+    margin: 20px;
+  }
+`

apps/gallery-new/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@apps/gallery-new",
+  "version": "1.4.1",
+  "private": true,
+  "main": "index.js",
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "storybook build -o out",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
+  },
+  "dependencies": {
+    "@reown/appkit-common": "workspace:*",
+    "@reown/appkit-ui": "workspace:*",
+    "lit": "3.1.0",
+    "react": "18.3.1",
+    "storybook": "7.6.7"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "7.6.7",
+    "@storybook/addon-links": "7.6.7",
+    "@storybook/blocks": "7.6.7",
+    "@storybook/theming": "7.6.7",
+    "@storybook/web-components": "7.6.7",
+    "@storybook/web-components-vite": "7.6.7",
+    "file-system-cache": "2.4.4"
+  }
+}

apps/gallery-new/stories/assets/Icons.mdx

@@ -0,0 +1,23 @@
+import { Meta, Title } from '@storybook/blocks'
+import '@reown/appkit-ui/src/layout/wui-grid'
+import '@reown/appkit-ui/src/layout/wui-flex'
+import '@reown/appkit-ui/src/components/wui-icon'
+import '@reown/appkit-ui/src/components/wui-text'
+import { iconOptions } from '../../utils/PresetUtils'
+
+<Meta title="assets/Icons" />
+
+<Title>Icons</Title>
+
+<wui-grid gridTemplateColumns="repeat(6, 1fr)" gap="3xl">
+  {iconOptions.map(value => (
+    <>
+      <wui-flex flexDirection="column" alignItems="center" justifyContent="space-between" gap="s">
+        <wui-icon size="lg" color="fg-100" name={value}></wui-icon>
+        <wui-text variant="paragraph-500" color="fg-100">
+          {value}
+        </wui-text>
+      </wui-flex>
+    </>
+  ))}
+</wui-grid>

apps/gallery-new/stories/components/wui-card.stories.ts

@@ -0,0 +1,19 @@
+import type { Meta } from '@storybook/web-components'
+import '@reown/appkit-ui/src/components/wui-card'
+import type { WuiCard } from '@reown/appkit-ui/src/components/wui-card'
+import { html } from 'lit'
+import '../../components/gallery-placeholder'
+
+type Component = Meta<WuiCard>
+
+export default {
+  title: 'Components/wui-card'
+} as Component
+
+export const Default: Component = {
+  render: () => html`
+    <wui-card>
+      <gallery-placeholder size="lg" margin background="blue"></gallery-placeholder>
+    </wui-card>
+  `
+}

apps/gallery-new/stories/components/wui-icon.stories.ts

@@ -0,0 +1,35 @@
+import type { Meta } from '@storybook/web-components'
+import '@reown/appkit-ui/src/components/wui-icon'
+import type { WuiIcon } from '@reown/appkit-ui/src/components/wui-icon'
+import { html } from 'lit'
+import { colorOptions, iconOptions } from '../../utils/PresetUtils'
+
+type Component = Meta<WuiIcon>
+
+export default {
+  title: 'Components/wui-icon',
+  args: {
+    size: 'md',
+    color: 'fg-100',
+    name: 'copy'
+  },
+  argTypes: {
+    size: {
+      options: ['xxs', 'xs', 'sm', 'md', 'lg'],
+      control: { type: 'select' }
+    },
+    color: {
+      options: colorOptions,
+      control: { type: 'select' }
+    },
+    name: {
+      options: iconOptions,
+      control: { type: 'select' }
+    }
+  }
+} as Component
+
+export const Default: Component = {
+  render: args =>
+    html`<wui-icon size=${args.size} color=${args.color} name=${args.name}></wui-icon>`
+}

apps/gallery-new/stories/components/wui-image.stories.ts

@@ -0,0 +1,19 @@
+import type { Meta } from '@storybook/web-components'
+import '@reown/appkit-ui/src/components/wui-image'
+import type { WuiImage } from '@reown/appkit-ui/src/components/wui-image'
+import { html } from 'lit'
+import { walletImageSrc } from '../../utils/PresetUtils'
+
+type Component = Meta<WuiImage>
+
+export default {
+  title: 'Components/wui-image',
+  args: {
+    src: walletImageSrc,
+    alt: 'Image of Rainbow'
+  }
+} as Component
+
+export const Default: Component = {
+  render: args => html`<wui-image src=${args.src} alt=${args.alt}></wui-image>`
+}

apps/gallery-new/stories/components/wui-loading-hexagon.stories.ts

@@ -0,0 +1,14 @@
+import type { Meta } from '@storybook/web-components'
+import '@reown/appkit-ui/src/components/wui-loading-hexagon'
+import type { WuiLoadingHexagon } from '@reown/appkit-ui/src/components/wui-loading-hexagon'
+import { html } from 'lit'
+
+type Component = Meta<WuiLoadingHexagon>
+
+export default {
+  title: 'Components/wui-loading-hexagon'
+} as Component
+
+export const Default: Component = {
+  render: () => html` <wui-loading-hexagon></wui-loading-hexagon>`
+}