-
Notifications
You must be signed in to change notification settings - Fork 142
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
3807fac
commit d54ded8
Showing
23 changed files
with
188 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
|
||
> @leather-wallet/extension@6.32.1 build-storybook /Users/kyranjamie/dev/leather/wallet | ||
> storybook build "--output-dir" "/var/folders/n2/ds19zkvd5q52dtfnyyb_qdbr0000gn/T/chromatic--27829-yOY4NVX7fkQl" "--webpack-stats-json" "/var/folders/n2/ds19zkvd5q52dtfnyyb_qdbr0000gn/T/chromatic--27829-yOY4NVX7fkQl" | ||
|
||
@storybook/cli v8.0.1 | ||
|
||
info => Cleaning outputDir: ../../../../../var/folders/n2/ds19zkvd5q52dtfnyyb_qdbr0000gn/T/chromatic--27829-yOY4NVX7fkQl | ||
info => Loading presets | ||
WARN The "@storybook/addon-mdx-gfm" addon is meant as a migration assistant for Storybook 8.0; and will likely be removed in a future version. | ||
WARN It's recommended you read this document: | ||
WARN https://storybook.js.org/docs/react/writing-docs/mdx#lack-of-github-flavored-markdown-gfm | ||
WARN | ||
WARN Once you've made the necessary changes, you can remove the addon from your package.json and storybook config. | ||
info Found existing addon {"name":"@storybook/addon-docs","options":{"csfPluginOptions":null,"mdxPluginOptions":{},"transcludeMarkdown":true}}, skipping. | ||
info Found existing addon {"name":"@storybook/addon-docs","options":{"csfPluginOptions":null,"mdxPluginOptions":{},"transcludeMarkdown":true}}, skipping. | ||
info => Building manager.. | ||
info => Manager built (116 ms) | ||
info => Building preview.. | ||
info => Copying static files: public at ../../../../../var/folders/n2/ds19zkvd5q52dtfnyyb_qdbr0000gn/T/chromatic--27829-yOY4NVX7fkQl | ||
info => Using implicit CSS loaders | ||
info => [@storybook/addon-styling-webpack] Applying custom Storybook webpack configuration styling. | ||
info => [@storybook/addon-styling-webpack] Replacing Storybook's webpack rules for styles with given rules. | ||
info => Using default Webpack5 setup | ||
🐼 warn [token] Reference not found: `colors.focus` in "3px solid {colors.focus}" | ||
🐼 warn [token] Reference not found: `colors.focus` in "3px solid {colors.focus}" | ||
🐼 warn [token] Reference not found: `focus` in "3px solid {focus}" | ||
🐼 info [hrtime] Extracted in (1132.02ms) | ||
WARN Module Warning (from ./node_modules/.pnpm/esbuild-loader@4.0.3_webpack@5.90.3/node_modules/esbuild-loader/dist/index.cjs): | ||
WARN [esbuild-loader] The specified tsconfig at "/Users/kyranjamie/dev/leather/wallet/tsconfig.json" was applied to the file "/Users/kyranjamie/dev/leather/wallet/node_modules/.pnpm/@leather-wallet+tokens@0.0.14/node_modules/@leather-wallet/tokens/src/breakpoints.ts" but does not match its "include" patterns | ||
WARN Module Warning (from ./node_modules/.pnpm/esbuild-loader@4.0.3_webpack@5.90.3/node_modules/esbuild-loader/dist/index.cjs): | ||
WARN [esbuild-loader] The specified tsconfig at "/Users/kyranjamie/dev/leather/wallet/tsconfig.json" was applied to the file "/Users/kyranjamie/dev/leather/wallet/node_modules/.pnpm/@leather-wallet+tokens@0.0.14/node_modules/@leather-wallet/tokens/src/colors.ts" but does not match its "include" patterns | ||
WARN Module Warning (from ./node_modules/.pnpm/esbuild-loader@4.0.3_webpack@5.90.3/node_modules/esbuild-loader/dist/index.cjs): | ||
WARN [esbuild-loader] The specified tsconfig at "/Users/kyranjamie/dev/leather/wallet/tsconfig.json" was applied to the file "/Users/kyranjamie/dev/leather/wallet/node_modules/.pnpm/@leather-wallet+tokens@0.0.14/node_modules/@leather-wallet/tokens/src/index.ts" but does not match its "include" patterns | ||
WARN Module Warning (from ./node_modules/.pnpm/esbuild-loader@4.0.3_webpack@5.90.3/node_modules/esbuild-loader/dist/index.cjs): | ||
WARN [esbuild-loader] The specified tsconfig at "/Users/kyranjamie/dev/leather/wallet/tsconfig.json" was applied to the file "/Users/kyranjamie/dev/leather/wallet/node_modules/.pnpm/@leather-wallet+tokens@0.0.14/node_modules/@leather-wallet/tokens/src/keyframes.ts" but does not match its "include" patterns | ||
WARN Module Warning (from ./node_modules/.pnpm/esbuild-loader@4.0.3_webpack@5.90.3/node_modules/esbuild-loader/dist/index.cjs): | ||
WARN [esbuild-loader] The specified tsconfig at "/Users/kyranjamie/dev/leather/wallet/tsconfig.json" was applied to the file "/Users/kyranjamie/dev/leather/wallet/node_modules/.pnpm/@leather-wallet+tokens@0.0.14/node_modules/@leather-wallet/tokens/src/semantic-tokens.ts" but does not match its "include" patterns | ||
WARN Module Warning (from ./node_modules/.pnpm/esbuild-loader@4.0.3_webpack@5.90.3/node_modules/esbuild-loader/dist/index.cjs): | ||
WARN [esbuild-loader] The specified tsconfig at "/Users/kyranjamie/dev/leather/wallet/tsconfig.json" was applied to the file "/Users/kyranjamie/dev/leather/wallet/node_modules/.pnpm/@leather-wallet+tokens@0.0.14/node_modules/@leather-wallet/tokens/src/tokens.ts" but does not match its "include" patterns | ||
WARN Module Warning (from ./node_modules/.pnpm/esbuild-loader@4.0.3_webpack@5.90.3/node_modules/esbuild-loader/dist/index.cjs): | ||
WARN [esbuild-loader] The specified tsconfig at "/Users/kyranjamie/dev/leather/wallet/tsconfig.json" was applied to the file "/Users/kyranjamie/dev/leather/wallet/node_modules/.pnpm/@leather-wallet+tokens@0.0.14/node_modules/@leather-wallet/tokens/src/typography.ts" but does not match its "include" patterns | ||
WARN Module Warning (from ./node_modules/.pnpm/esbuild-loader@4.0.3_webpack@5.90.3/node_modules/esbuild-loader/dist/index.cjs): | ||
WARN [esbuild-loader] The specified tsconfig at "/Users/kyranjamie/dev/leather/wallet/tsconfig.json" was applied to the file "/Users/kyranjamie/dev/leather/wallet/.storybook/preview.ts" but does not match its "include" patterns | ||
WARN Module Warning (from ./node_modules/.pnpm/esbuild-loader@4.0.3_webpack@5.90.3/node_modules/esbuild-loader/dist/index.cjs): | ||
WARN [esbuild-loader] The specified tsconfig at "/Users/kyranjamie/dev/leather/wallet/tsconfig.json" was applied to the file "/Users/kyranjamie/dev/leather/wallet/.storybook/viewports.ts" but does not match its "include" patterns | ||
WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). | ||
WARN This can impact web performance. | ||
WARN Assets: | ||
WARN 8510.0add2d64.iframe.bundle.js (769 KiB) | ||
WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance. | ||
WARN Entrypoints: | ||
WARN main (1010 KiB) | ||
WARN runtime~main.57e1694f.iframe.bundle.js | ||
WARN 8510.0add2d64.iframe.bundle.js | ||
WARN main.d66cdef4.iframe.bundle.js | ||
WARN | ||
info => Preview built (6.26 s) | ||
info => preview stats written to /var/folders/n2/ds19zkvd5q52dtfnyyb_qdbr0000gn/T/chromatic--27829-yOY4NVX7fkQl/preview-stats.json | ||
info => Output directory: /var/folders/n2/ds19zkvd5q52dtfnyyb_qdbr0000gn/T/chromatic--27829-yOY4NVX7fkQl |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,18 +1,48 @@ | ||
import dayjs from 'dayjs'; | ||
import { styled } from 'leather-styles/jsx'; | ||
|
||
import { toLocalizedDateFormat } from '@app/common/date-utils'; | ||
import { capitalize } from '@app/common/utils'; | ||
import { loadingStripedGradient } from '@app/ui/animations/loading-striped-gradient'; | ||
import { BulletSeparator } from '@app/ui/components/bullet-separator/bullet-separator'; | ||
|
||
type ApproverStatus = 'completed' | 'error' | 'pending'; | ||
|
||
interface StatusIndicatorLineProps { | ||
status: ApproverStatus; | ||
} | ||
function StatusIndicatorLine({ status }: StatusIndicatorLineProps) { | ||
switch (status) { | ||
case 'pending': | ||
return <styled.div height="4px" className={loadingStripedGradient} />; | ||
case 'error': | ||
return <styled.div height="4px" bg="red.action-primary-default" />; | ||
case 'completed': | ||
return <styled.div height="4px" bg="green.action-primary-default" />; | ||
default: | ||
return null; | ||
} | ||
} | ||
|
||
interface ApproverStatusProps { | ||
status: 'completed' | 'error' | 'pending'; | ||
status: ApproverStatus; | ||
} | ||
export function ApproverStatus({ status }: ApproverStatusProps) { | ||
return ( | ||
<styled.div> | ||
<BulletSeparator> | ||
{status} | ||
<styled.span>{dayjs(new Date()).format()}</styled.span> | ||
</BulletSeparator> | ||
<styled.div pos="relative"> | ||
<StatusIndicatorLine status={status} /> | ||
<styled.div | ||
mt="4px" | ||
textStyle="label.03" | ||
background="ink.background-primary" | ||
px="space.05" | ||
py="space.03" | ||
> | ||
<BulletSeparator spacing="space.01"> | ||
<styled.span>{capitalize(status)}</styled.span> | ||
<styled.span>{toLocalizedDateFormat(dayjs())}</styled.span> | ||
</BulletSeparator> | ||
</styled.div> | ||
</styled.div> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
21 changes: 21 additions & 0 deletions
21
src/app/ui/animations/loading-striped-gradient.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import { Meta, StoryObj } from '@storybook/react'; | ||
import { styled } from 'leather-styles/jsx'; | ||
|
||
import { loadingStripedGradient } from './loading-striped-gradient'; | ||
|
||
function LoadingStripedGradient() { | ||
return <styled.div className={loadingStripedGradient} width="280px" height="20px" />; | ||
} | ||
|
||
const meta: Meta<typeof LoadingStripedGradient> = { | ||
component: LoadingStripedGradient, | ||
tags: ['autodocs'], | ||
title: 'Animation/LoadingStripedGradient', | ||
}; | ||
|
||
export default meta; | ||
type Story = StoryObj<typeof LoadingStripedGradient>; | ||
|
||
export const Item: Story = { | ||
render: () => <LoadingStripedGradient />, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
import { css } from 'leather-styles/css'; | ||
|
||
export const loadingStripedGradient = css({ | ||
pos: 'relative', | ||
overflow: 'hidden', | ||
content: '""', | ||
position: 'absolute', | ||
top: 0, | ||
left: 0, | ||
right: 0, | ||
bottom: 0, | ||
backgroundImage: | ||
'repeating-linear-gradient(45deg, #F07D12, #F07D12 16px, #FFB977 16px, #FFB977 32px)', | ||
animation: 'barberpole 30s linear infinite', | ||
backgroundSize: '193% 100%', | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.