:feat social login - 1 - UI

apps/gallery/stories/composites/wui-list-button.stories.ts

@@ -0,0 +1,21 @@
+import type { Meta } from '@storybook/web-components'
+import '@web3modal/ui/src/composites/wui-list-button'
+import { html } from 'lit'
+import '../../components/gallery-container'
+import type { WuiListButton } from '@web3modal/ui'
+
+type Component = Meta<WuiListButton>
+
+export default {
+  title: 'Composites/wui-list-button',
+  args: {
+    text: 'Continue with a wallet'
+  }
+} as Component
+
+export const Default: Component = {
+  render: args =>
+    html` <gallery-container width="336">
+      <wui-list-button text=${args.text}></wui-list-button>
+    </gallery-container>`
+}

apps/gallery/stories/composites/wui-list-social.stories.ts

@@ -0,0 +1,30 @@
+import type { Meta } from '@storybook/web-components'
+import '@web3modal/ui/src/composites/wui-list-social'
+import { html } from 'lit'
+import '../../components/gallery-container'
+
+import type { WuiListSocial } from '@web3modal/ui'
+
+type Component = Meta<WuiListSocial>
+
+export default {
+  title: 'Composites/wui-list-social',
+  args: {
+    name: 'google',
+    logo: 'google',
+    align: 'left'
+  },
+  argTypes: {
+    align: {
+      options: ['left', 'center'],
+      control: { type: 'select' }
+    }
+  }
+} as Component
+
+export const Default: Component = {
+  render: args =>
+    html` <gallery-container width="336">
+      <wui-list-social align=${args.align} logo=${args.logo} name=${args.name}></wui-list-social>
+    </gallery-container>`
+}

apps/gallery/stories/composites/wui-logo-select.stories.ts

@@ -2,6 +2,7 @@ import type { Meta } from '@storybook/web-components'
 import '@web3modal/ui/src/composites/wui-logo-select'
 import type { WuiLogoSelect } from '@web3modal/ui/src/composites/wui-logo-select'
 import { html } from 'lit'
+import '../../components/gallery-container'
 import { logoOptions } from '../../utils/PresetUtils'
 
 type Component = Meta<WuiLogoSelect>
@@ -26,5 +27,7 @@ export default {
 
 export const Default: Component = {
   render: args =>
-    html`<wui-logo-select ?disabled=${args.disabled} logo=${args.logo}></wui-logo-select>`
+    html`<gallery-container width="60"
+      ><wui-logo-select ?disabled=${args.disabled} logo=${args.logo}></wui-logo-select>
+    </gallery-container>`
 }

dangerfile.ts

@@ -120,8 +120,8 @@ async function checkUiPackage() {
 
   const ui_index = modified_files.find(f => f.includes('ui/index.ts'))
   const ui_index_diff = ui_index ? await diffForFile(ui_index) : undefined
-  const jsx_index = modified_files.find(f => f.includes('ui/utils/JSXTypesUtil.ts'))
-  const jsx_index_diff = jsx_index ? await diffForFile(jsx_index) : undefined
+  const types_util_index = modified_files.find(f => f.includes('ui/src/utils/JSXTypeUtil.ts'))
+  const types_util_diff = types_util_index ? await diffForFile(types_util_index) : undefined
   const created_ui_components_index_ts = created_ui_components.filter(f => f.endsWith('index.ts'))
   const created_ui_composites_index_ts = created_ui_composites.filter(f => f.endsWith('index.ts'))
   const deleted_ui_composites_index_ts = deleted_ui_composites.filter(f => f.endsWith('index.ts'))
@@ -135,30 +135,31 @@ async function checkUiPackage() {
     fail('New components were added, but not exported in ui/index.ts')
   }
 
-  if (created_ui_composites_index_ts.length !== deleted_ui_composites_index_ts.length) {
-    fail('Number of created composites does not match number of deleted composites')
+  if (is_new_composites_added && !types_util_diff) {
+    fail('New composites were added, but JSXTypeUtil.ts is not modified')
   }
-  if (is_new_composites_added && !ui_index_diff?.added.includes('src/composites')) {
+
+  if (is_new_composites_added && !types_util_diff?.added.includes('../composites')) {
     fail('New composites were added, but not exported in ui/index.ts')
   }
 
   if (created_ui_layout_index_ts.length && !ui_index_diff?.added.includes('src/layout')) {
     fail('New layout components were added, but not exported in ui/index.ts')
   }
 
-  if (created_ui_components_index_ts.length && !jsx_index_diff?.added.includes('../components')) {
+  if (created_ui_components_index_ts.length && !types_util_diff?.added.includes('../components')) {
     fail(
       `New components were added, but not exported in ui/utils/JSXTypeUtil.ts: ${created_ui_components.join(
         ', '
       )}`
     )
   }
 
-  if (is_new_composites_added && !jsx_index_diff?.added.includes('../composites')) {
+  if (is_new_composites_added && !types_util_diff?.added.includes('../composites')) {
     fail('New composites were added, but not exported in ui/utils/JSXTypeUtil.ts')
   }
 
-  if (is_new_layout_added && !jsx_index_diff?.added.includes('../layout')) {
+  if (is_new_layout_added && !types_util_diff?.added.includes('../layout')) {
     fail('New layout components were added, but not exported in ui/utils/JSXTypeUtil.ts')
   }