From 5b9297f22f3357da2481f231796411ec519c92b8 Mon Sep 17 00:00:00 2001 From: Bram Borggreve Date: Thu, 30 Nov 2023 05:12:08 +0000 Subject: [PATCH] feat: add logo --- apps/web/src/app/app-layout.tsx | 12 ++++---- apps/web/src/app/features/demo/demo-card.tsx | 9 ------ .../app/features/demo/demo-feature-alerts.tsx | 7 ++--- .../app/features/demo/demo-feature-copy.tsx | 7 ++--- .../app/features/demo/demo-feature-debug.tsx | 7 ++--- .../app/features/demo/demo-feature-group.tsx | 7 ++--- .../app/features/demo/demo-feature-logo.tsx | 14 +++++++++ .../demo/demo-feature-search-input.tsx | 7 ++--- .../app/features/demo/demo-feature-stack.tsx | 7 ++--- .../features/demo/demo-feature-tab-routes.tsx | 5 ++-- .../app/features/demo/demo-feature-time.tsx | 7 ++--- .../app/features/demo/demo-feature-toast.tsx | 7 ++--- .../src/app/features/demo/demo-feature.tsx | 2 ++ ...eature-search.tsx => dev-feature-link.tsx} | 2 +- .../src/app/features/dev/dev-feature-logo.tsx | 30 +++++++++++++++++++ apps/web/src/app/features/dev/dev-feature.tsx | 11 +++++-- packages/core/src/lib/index.ts | 1 + packages/core/src/lib/ui-logo-mark/index.ts | 3 ++ .../lib/ui-logo-mark/ui-logo-mark-black.tsx | 26 ++++++++++++++++ .../lib/ui-logo-mark/ui-logo-mark-white.tsx | 26 ++++++++++++++++ .../src/lib/ui-logo-mark/ui-logo-mark.tsx | 14 +++++++++ packages/core/src/lib/ui-logo/index.ts | 4 +++ .../src/lib/ui-logo/ui-logo-type-black.tsx | 26 ++++++++++++++++ .../src/lib/ui-logo/ui-logo-type-white.tsx | 26 ++++++++++++++++ .../core/src/lib/ui-logo/ui-logo-type.tsx | 14 +++++++++ packages/core/src/lib/ui-logo/ui-logo.tsx | 12 ++++++++ .../component/component-generator-schema.d.ts | 1 + .../component/component-generator-schema.json | 1 + ...fixFileName__-logo-type-black.tsx.template | 26 ++++++++++++++++ ...fixFileName__-logo-type-white.tsx.template | 26 ++++++++++++++++ .../__prefixFileName__-logo-type.tsx.template | 14 +++++++++ .../logo/__prefixFileName__-logo.tsx.template | 13 ++++++++ .../component/files/logo/index.ts.template | 4 +++ .../src/generators/components/components.ts | 1 + .../feature/files/demo/demo-card.tsx.template | 9 ------ .../demo/demo-feature-alerts.tsx.template | 7 ++--- .../files/demo/demo-feature-copy.tsx.template | 7 ++--- .../demo/demo-feature-debug.tsx.template | 7 ++--- .../demo/demo-feature-group.tsx.template | 7 ++--- .../files/demo/demo-feature-logo.tsx.template | 14 +++++++++ .../demo-feature-search-input.tsx.template | 7 ++--- .../demo/demo-feature-stack.tsx.template | 7 ++--- .../demo/demo-feature-tab-routes.tsx.template | 5 ++-- .../files/demo/demo-feature-time.tsx.template | 7 ++--- .../demo/demo-feature-toast.tsx.template | 7 ++--- .../files/demo/demo-feature.tsx.template | 2 ++ 46 files changed, 368 insertions(+), 97 deletions(-) delete mode 100644 apps/web/src/app/features/demo/demo-card.tsx create mode 100644 apps/web/src/app/features/demo/demo-feature-logo.tsx rename apps/web/src/app/features/dev/{dev-feature-search.tsx => dev-feature-link.tsx} (91%) create mode 100644 apps/web/src/app/features/dev/dev-feature-logo.tsx create mode 100644 packages/core/src/lib/ui-logo-mark/index.ts create mode 100644 packages/core/src/lib/ui-logo-mark/ui-logo-mark-black.tsx create mode 100644 packages/core/src/lib/ui-logo-mark/ui-logo-mark-white.tsx create mode 100644 packages/core/src/lib/ui-logo-mark/ui-logo-mark.tsx create mode 100644 packages/core/src/lib/ui-logo/index.ts create mode 100644 packages/core/src/lib/ui-logo/ui-logo-type-black.tsx create mode 100644 packages/core/src/lib/ui-logo/ui-logo-type-white.tsx create mode 100644 packages/core/src/lib/ui-logo/ui-logo-type.tsx create mode 100644 packages/core/src/lib/ui-logo/ui-logo.tsx create mode 100644 packages/generators/src/generators/component/files/logo/__prefixFileName__-logo-type-black.tsx.template create mode 100644 packages/generators/src/generators/component/files/logo/__prefixFileName__-logo-type-white.tsx.template create mode 100644 packages/generators/src/generators/component/files/logo/__prefixFileName__-logo-type.tsx.template create mode 100644 packages/generators/src/generators/component/files/logo/__prefixFileName__-logo.tsx.template create mode 100644 packages/generators/src/generators/component/files/logo/index.ts.template delete mode 100644 packages/generators/src/generators/feature/files/demo/demo-card.tsx.template create mode 100644 packages/generators/src/generators/feature/files/demo/demo-feature-logo.tsx.template diff --git a/apps/web/src/app/app-layout.tsx b/apps/web/src/app/app-layout.tsx index 8eb62c9..c7d4f99 100644 --- a/apps/web/src/app/app-layout.tsx +++ b/apps/web/src/app/app-layout.tsx @@ -1,5 +1,5 @@ -import { ActionIcon, Anchor, Box, Card, Group, Text } from '@mantine/core' -import { UiContainer, useUiColorScheme, useUiTheme } from '@pubkey-ui/core' +import { ActionIcon, Anchor, Box, Card, Group } from '@mantine/core' +import { UiContainer, UiLogoType, useUiColorScheme, useUiTheme } from '@pubkey-ui/core' import { IconMoon, IconSun } from '@tabler/icons-react' import { ReactNode } from 'react' @@ -10,10 +10,10 @@ export function AppLayout({ children }: { children: ReactNode }) { - - - Pubkey UI - + + + + Dashboard diff --git a/apps/web/src/app/features/demo/demo-card.tsx b/apps/web/src/app/features/demo/demo-card.tsx deleted file mode 100644 index 3cbd082..0000000 --- a/apps/web/src/app/features/demo/demo-card.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { UiCard, UiStack } from '@pubkey-ui/core' - -export function DemoCard({ children, title }: { children: React.ReactNode; title: string }) { - return ( - - {children} - - ) -} diff --git a/apps/web/src/app/features/demo/demo-feature-alerts.tsx b/apps/web/src/app/features/demo/demo-feature-alerts.tsx index a74cff5..59819b1 100644 --- a/apps/web/src/app/features/demo/demo-feature-alerts.tsx +++ b/apps/web/src/app/features/demo/demo-feature-alerts.tsx @@ -1,10 +1,9 @@ import { SimpleGrid } from '@mantine/core' -import { UiAlert, UiError, UiInfo, UiSuccess, UiWarning } from '@pubkey-ui/core' -import { DemoCard } from './demo-card' +import { UiCard, UiAlert, UiError, UiInfo, UiSuccess, UiWarning } from '@pubkey-ui/core' export function DemoFeatureAlerts() { return ( - + @@ -12,6 +11,6 @@ export function DemoFeatureAlerts() { - + ) } diff --git a/apps/web/src/app/features/demo/demo-feature-copy.tsx b/apps/web/src/app/features/demo/demo-feature-copy.tsx index b36239c..7d52837 100644 --- a/apps/web/src/app/features/demo/demo-feature-copy.tsx +++ b/apps/web/src/app/features/demo/demo-feature-copy.tsx @@ -1,12 +1,11 @@ -import { UiCopy, UiStack } from '@pubkey-ui/core' -import { DemoCard } from './demo-card' +import { UiCard, UiCopy, UiStack } from '@pubkey-ui/core' export function DemoFeatureCopy() { return ( - + - + ) } diff --git a/apps/web/src/app/features/demo/demo-feature-debug.tsx b/apps/web/src/app/features/demo/demo-feature-debug.tsx index 186ab56..178475c 100644 --- a/apps/web/src/app/features/demo/demo-feature-debug.tsx +++ b/apps/web/src/app/features/demo/demo-feature-debug.tsx @@ -1,16 +1,15 @@ import { SimpleGrid } from '@mantine/core' -import { UiDebug, UiDebugModal } from '@pubkey-ui/core' -import { DemoCard } from './demo-card' +import { UiCard, UiDebug, UiDebugModal } from '@pubkey-ui/core' export function DemoFeatureDebug() { return ( - + - + ) } diff --git a/apps/web/src/app/features/demo/demo-feature-group.tsx b/apps/web/src/app/features/demo/demo-feature-group.tsx index 462c2f1..4724fbd 100644 --- a/apps/web/src/app/features/demo/demo-feature-group.tsx +++ b/apps/web/src/app/features/demo/demo-feature-group.tsx @@ -1,10 +1,9 @@ import { Button, SimpleGrid } from '@mantine/core' -import { UiGroup } from '@pubkey-ui/core' -import { DemoCard } from './demo-card' +import { UiCard, UiGroup } from '@pubkey-ui/core' export function DemoFeatureGroup() { return ( - + @@ -25,6 +24,6 @@ export function DemoFeatureGroup() { - + ) } diff --git a/apps/web/src/app/features/demo/demo-feature-logo.tsx b/apps/web/src/app/features/demo/demo-feature-logo.tsx new file mode 100644 index 0000000..fd93ad0 --- /dev/null +++ b/apps/web/src/app/features/demo/demo-feature-logo.tsx @@ -0,0 +1,14 @@ +import { SimpleGrid } from '@mantine/core' +import { UiCard, UiLogoType, UiLogoTypeBlack, UiLogoTypeWhite } from '@pubkey-ui/core' + +export function DemoFeatureLogo() { + return ( + + + + + + + + ) +} diff --git a/apps/web/src/app/features/demo/demo-feature-search-input.tsx b/apps/web/src/app/features/demo/demo-feature-search-input.tsx index 9a0a252..e5abb46 100644 --- a/apps/web/src/app/features/demo/demo-feature-search-input.tsx +++ b/apps/web/src/app/features/demo/demo-feature-search-input.tsx @@ -1,10 +1,9 @@ import { SimpleGrid } from '@mantine/core' -import { UiGroup, UiSearchInput } from '@pubkey-ui/core' -import { DemoCard } from './demo-card' +import { UiCard, UiGroup, UiSearchInput } from '@pubkey-ui/core' export function DemoFeatureSearchInput() { return ( - + @@ -18,6 +17,6 @@ export function DemoFeatureSearchInput() { - + ) } diff --git a/apps/web/src/app/features/demo/demo-feature-stack.tsx b/apps/web/src/app/features/demo/demo-feature-stack.tsx index 2a917f5..2799942 100644 --- a/apps/web/src/app/features/demo/demo-feature-stack.tsx +++ b/apps/web/src/app/features/demo/demo-feature-stack.tsx @@ -1,10 +1,9 @@ import { Button, SimpleGrid } from '@mantine/core' -import { UiStack } from '@pubkey-ui/core' -import { DemoCard } from './demo-card' +import { UiCard, UiStack } from '@pubkey-ui/core' export function DemoFeatureStack() { return ( - + @@ -25,6 +24,6 @@ export function DemoFeatureStack() { - + ) } diff --git a/apps/web/src/app/features/demo/demo-feature-tab-routes.tsx b/apps/web/src/app/features/demo/demo-feature-tab-routes.tsx index 55bcc20..53d12e2 100644 --- a/apps/web/src/app/features/demo/demo-feature-tab-routes.tsx +++ b/apps/web/src/app/features/demo/demo-feature-tab-routes.tsx @@ -1,10 +1,9 @@ import { SimpleGrid } from '@mantine/core' import { UiCard, UiTabRoutes } from '@pubkey-ui/core' -import { DemoCard } from './demo-card' export function DemoFeatureTabRoutes() { return ( - + - + ) } diff --git a/apps/web/src/app/features/demo/demo-feature-time.tsx b/apps/web/src/app/features/demo/demo-feature-time.tsx index 483f5f6..8367687 100644 --- a/apps/web/src/app/features/demo/demo-feature-time.tsx +++ b/apps/web/src/app/features/demo/demo-feature-time.tsx @@ -1,10 +1,9 @@ import { SimpleGrid } from '@mantine/core' -import { UiTime } from '@pubkey-ui/core' -import { DemoCard } from './demo-card' +import { UiCard, UiTime } from '@pubkey-ui/core' export function DemoFeatureTime() { return ( - + @@ -17,6 +16,6 @@ export function DemoFeatureTime() { - + ) } diff --git a/apps/web/src/app/features/demo/demo-feature-toast.tsx b/apps/web/src/app/features/demo/demo-feature-toast.tsx index fe86959..57508fd 100644 --- a/apps/web/src/app/features/demo/demo-feature-toast.tsx +++ b/apps/web/src/app/features/demo/demo-feature-toast.tsx @@ -1,10 +1,9 @@ import { Button, SimpleGrid } from '@mantine/core' -import { toastError, toastInfo, toastSuccess, toastWarning } from '@pubkey-ui/core' -import { DemoCard } from './demo-card' +import { UiCard, toastError, toastInfo, toastSuccess, toastWarning } from '@pubkey-ui/core' export function DemoFeatureToast() { return ( - + - + ) } diff --git a/apps/web/src/app/features/demo/demo-feature.tsx b/apps/web/src/app/features/demo/demo-feature.tsx index 34add33..7e60731 100644 --- a/apps/web/src/app/features/demo/demo-feature.tsx +++ b/apps/web/src/app/features/demo/demo-feature.tsx @@ -4,6 +4,7 @@ import { DemoFeatureCard } from './demo-feature-card' import { DemoFeatureCopy } from './demo-feature-copy' import { DemoFeatureDebug } from './demo-feature-debug' import { DemoFeatureGroup } from './demo-feature-group' +import { DemoFeatureLogo } from './demo-feature-logo' import { DemoFeatureSearchInput } from './demo-feature-search-input' import { DemoFeatureStack } from './demo-feature-stack' import { DemoFeatureTabRoutes } from './demo-feature-tab-routes' @@ -19,6 +20,7 @@ export function DemoFeature() { + diff --git a/apps/web/src/app/features/dev/dev-feature-search.tsx b/apps/web/src/app/features/dev/dev-feature-link.tsx similarity index 91% rename from apps/web/src/app/features/dev/dev-feature-search.tsx rename to apps/web/src/app/features/dev/dev-feature-link.tsx index 9ce4dd2..91b47de 100644 --- a/apps/web/src/app/features/dev/dev-feature-search.tsx +++ b/apps/web/src/app/features/dev/dev-feature-link.tsx @@ -1,7 +1,7 @@ import { Anchor, Button } from '@mantine/core' import { UiCard, UiContainer, useUiTheme } from '@pubkey-ui/core' -export function DevFeatureSearch() { +export function DevFeatureLink() { const { Link } = useUiTheme() return ( diff --git a/apps/web/src/app/features/dev/dev-feature-logo.tsx b/apps/web/src/app/features/dev/dev-feature-logo.tsx new file mode 100644 index 0000000..30548e7 --- /dev/null +++ b/apps/web/src/app/features/dev/dev-feature-logo.tsx @@ -0,0 +1,30 @@ +import { + UiCard, + UiContainer, + UiGroup, + UiLogo, + UiLogoType, + UiLogoTypeBlack, + UiLogoTypeWhite, + UiStack, +} from '@pubkey-ui/core' + +export function DevFeatureLogo() { + return ( + + + + + + + + + + + + + + + + ) +} diff --git a/apps/web/src/app/features/dev/dev-feature.tsx b/apps/web/src/app/features/dev/dev-feature.tsx index 56a68d5..666f05c 100644 --- a/apps/web/src/app/features/dev/dev-feature.tsx +++ b/apps/web/src/app/features/dev/dev-feature.tsx @@ -1,5 +1,12 @@ -import { DevFeatureSearch } from './dev-feature-search' +import { UiContainer } from '@pubkey-ui/core' +import { DevFeatureLink } from './dev-feature-link' +import { DevFeatureLogo } from './dev-feature-logo' export function DevFeature() { - return + return ( + + + + + ) } diff --git a/packages/core/src/lib/index.ts b/packages/core/src/lib/index.ts index 2c67538..b518ad2 100644 --- a/packages/core/src/lib/index.ts +++ b/packages/core/src/lib/index.ts @@ -4,6 +4,7 @@ export * from './ui-container' export * from './ui-copy' export * from './ui-debug' export * from './ui-group' +export * from './ui-logo' export * from './ui-search-input' export * from './ui-stack' export * from './ui-tab-routes' diff --git a/packages/core/src/lib/ui-logo-mark/index.ts b/packages/core/src/lib/ui-logo-mark/index.ts new file mode 100644 index 0000000..fead7bf --- /dev/null +++ b/packages/core/src/lib/ui-logo-mark/index.ts @@ -0,0 +1,3 @@ +export * from './ui-logo-mark' +export * from './ui-logo-mark-black' +export * from './ui-logo-mark-white' diff --git a/packages/core/src/lib/ui-logo-mark/ui-logo-mark-black.tsx b/packages/core/src/lib/ui-logo-mark/ui-logo-mark-black.tsx new file mode 100644 index 0000000..1649ea0 --- /dev/null +++ b/packages/core/src/lib/ui-logo-mark/ui-logo-mark-black.tsx @@ -0,0 +1,26 @@ +import { UiLogoMarkProps } from './ui-logo-mark' + +export function UiLogoMarkBlack({ height, width, ...props }: UiLogoMarkProps = {}) { + return ( + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/packages/core/src/lib/ui-logo-mark/ui-logo-mark-white.tsx b/packages/core/src/lib/ui-logo-mark/ui-logo-mark-white.tsx new file mode 100644 index 0000000..5690245 --- /dev/null +++ b/packages/core/src/lib/ui-logo-mark/ui-logo-mark-white.tsx @@ -0,0 +1,26 @@ +import { UiLogoMarkProps } from './ui-logo-mark' + +export function UiLogoMarkWhite({ height, width, ...props }: UiLogoMarkProps = {}) { + return ( + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/packages/core/src/lib/ui-logo-mark/ui-logo-mark.tsx b/packages/core/src/lib/ui-logo-mark/ui-logo-mark.tsx new file mode 100644 index 0000000..68d8a0a --- /dev/null +++ b/packages/core/src/lib/ui-logo-mark/ui-logo-mark.tsx @@ -0,0 +1,14 @@ +import { useUiColorScheme } from '../ui-theme' +import { SVGProps } from 'react' +import { UiLogoMarkBlack } from './ui-logo-mark-black' +import { UiLogoMarkWhite } from './ui-logo-mark-white' + +export interface UiLogoMarkProps extends SVGProps { + height?: number + width?: number +} +export function UiLogoMark(props: UiLogoMarkProps = {}) { + const { colorScheme } = useUiColorScheme() + + return colorScheme === 'dark' ? : +} diff --git a/packages/core/src/lib/ui-logo/index.ts b/packages/core/src/lib/ui-logo/index.ts new file mode 100644 index 0000000..3502758 --- /dev/null +++ b/packages/core/src/lib/ui-logo/index.ts @@ -0,0 +1,4 @@ +export * from './ui-logo' +export * from './ui-logo-type' +export * from './ui-logo-type-black' +export * from './ui-logo-type-white' diff --git a/packages/core/src/lib/ui-logo/ui-logo-type-black.tsx b/packages/core/src/lib/ui-logo/ui-logo-type-black.tsx new file mode 100644 index 0000000..db4c393 --- /dev/null +++ b/packages/core/src/lib/ui-logo/ui-logo-type-black.tsx @@ -0,0 +1,26 @@ +import { UiLogoTypeProps } from './ui-logo-type' + +export function UiLogoTypeBlack({ height, width, ...props }: UiLogoTypeProps = {}) { + return ( + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/packages/core/src/lib/ui-logo/ui-logo-type-white.tsx b/packages/core/src/lib/ui-logo/ui-logo-type-white.tsx new file mode 100644 index 0000000..9f21f0a --- /dev/null +++ b/packages/core/src/lib/ui-logo/ui-logo-type-white.tsx @@ -0,0 +1,26 @@ +import { UiLogoTypeProps } from './ui-logo-type' + +export function UiLogoTypeWhite({ height, width, ...props }: UiLogoTypeProps = {}) { + return ( + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/packages/core/src/lib/ui-logo/ui-logo-type.tsx b/packages/core/src/lib/ui-logo/ui-logo-type.tsx new file mode 100644 index 0000000..d96f4fd --- /dev/null +++ b/packages/core/src/lib/ui-logo/ui-logo-type.tsx @@ -0,0 +1,14 @@ +import { useUiColorScheme } from '../ui-theme' +import { SVGProps } from 'react' +import { UiLogoTypeBlack } from './ui-logo-type-black' +import { UiLogoTypeWhite } from './ui-logo-type-white' + +export interface UiLogoTypeProps extends SVGProps { + height?: number + width?: number +} +export function UiLogoType(props: UiLogoTypeProps = {}) { + const { colorScheme } = useUiColorScheme() + + return colorScheme === 'dark' ? : +} diff --git a/packages/core/src/lib/ui-logo/ui-logo.tsx b/packages/core/src/lib/ui-logo/ui-logo.tsx new file mode 100644 index 0000000..6e2b16c --- /dev/null +++ b/packages/core/src/lib/ui-logo/ui-logo.tsx @@ -0,0 +1,12 @@ +import { UiLogoTypeProps } from './ui-logo-type' + +export function UiLogo({ height, width, ...props }: UiLogoTypeProps = {}) { + return ( + + + + + + + ) +} diff --git a/packages/generators/src/generators/component/component-generator-schema.d.ts b/packages/generators/src/generators/component/component-generator-schema.d.ts index 15746d7..5c182ec 100644 --- a/packages/generators/src/generators/component/component-generator-schema.d.ts +++ b/packages/generators/src/generators/component/component-generator-schema.d.ts @@ -20,6 +20,7 @@ export interface ComponentGeneratorSchema { | 'copy' | 'debug' | 'group' + | 'logo' | 'search-input' | 'stack' | 'tab-routes' diff --git a/packages/generators/src/generators/component/component-generator-schema.json b/packages/generators/src/generators/component/component-generator-schema.json index d812d36..133880b 100644 --- a/packages/generators/src/generators/component/component-generator-schema.json +++ b/packages/generators/src/generators/component/component-generator-schema.json @@ -22,6 +22,7 @@ "copy", "debug", "group", + "logo", "search-input", "stack", "tab-routes", diff --git a/packages/generators/src/generators/component/files/logo/__prefixFileName__-logo-type-black.tsx.template b/packages/generators/src/generators/component/files/logo/__prefixFileName__-logo-type-black.tsx.template new file mode 100644 index 0000000..c4a7ee7 --- /dev/null +++ b/packages/generators/src/generators/component/files/logo/__prefixFileName__-logo-type-black.tsx.template @@ -0,0 +1,26 @@ +import { <%= prefix.className %>LogoTypeProps } from './<%= prefix.fileName %>-logo-type' + +export function <%= prefix.className %>LogoTypeBlack({ height, width, ...props }: <%= prefix.className %>LogoTypeProps = {}) { + return ( + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/packages/generators/src/generators/component/files/logo/__prefixFileName__-logo-type-white.tsx.template b/packages/generators/src/generators/component/files/logo/__prefixFileName__-logo-type-white.tsx.template new file mode 100644 index 0000000..2b797ed --- /dev/null +++ b/packages/generators/src/generators/component/files/logo/__prefixFileName__-logo-type-white.tsx.template @@ -0,0 +1,26 @@ +import { <%= prefix.className %>LogoTypeProps } from './<%= prefix.fileName %>-logo-type' + +export function <%= prefix.className %>LogoTypeWhite({ height, width, ...props }: <%= prefix.className %>LogoTypeProps = {}) { + return ( + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/packages/generators/src/generators/component/files/logo/__prefixFileName__-logo-type.tsx.template b/packages/generators/src/generators/component/files/logo/__prefixFileName__-logo-type.tsx.template new file mode 100644 index 0000000..05002a8 --- /dev/null +++ b/packages/generators/src/generators/component/files/logo/__prefixFileName__-logo-type.tsx.template @@ -0,0 +1,14 @@ +import { use<%= prefix.className %>ColorScheme } from '../<%= prefix.fileName %>-theme' +import { SVGProps } from 'react' +import { <%= prefix.className %>LogoTypeBlack } from './<%= prefix.fileName %>-logo-type-black' +import { <%= prefix.className %>LogoTypeWhite } from './<%= prefix.fileName %>-logo-type-white' + +export interface <%= prefix.className %>LogoTypeProps extends SVGProps { + height?: number + width?: number +} +export function <%= prefix.className %>LogoType(props: <%= prefix.className %>LogoTypeProps = {}) { + const { colorScheme } = use<%= prefix.className %>ColorScheme() + + return colorScheme === 'dark' ? <<%= prefix.className %>LogoTypeWhite {...props} /> : <<%= prefix.className %>LogoTypeBlack {...props} /> +} diff --git a/packages/generators/src/generators/component/files/logo/__prefixFileName__-logo.tsx.template b/packages/generators/src/generators/component/files/logo/__prefixFileName__-logo.tsx.template new file mode 100644 index 0000000..90de3d0 --- /dev/null +++ b/packages/generators/src/generators/component/files/logo/__prefixFileName__-logo.tsx.template @@ -0,0 +1,13 @@ +import { <%= prefix.className %>LogoTypeProps } from './<%= prefix.fileName %>-logo-type' + +export function <%= prefix.className %>Logo({height, width, ...props}: <%= prefix.className %>LogoTypeProps = {}) { + return ( + + + + + + + ) +} diff --git a/packages/generators/src/generators/component/files/logo/index.ts.template b/packages/generators/src/generators/component/files/logo/index.ts.template new file mode 100644 index 0000000..d5a8ec0 --- /dev/null +++ b/packages/generators/src/generators/component/files/logo/index.ts.template @@ -0,0 +1,4 @@ +export * from './<%= prefixFileName %>-logo' +export * from './<%= prefixFileName %>-logo-type' +export * from './<%= prefixFileName %>-logo-type-black' +export * from './<%= prefixFileName %>-logo-type-white' diff --git a/packages/generators/src/generators/components/components.ts b/packages/generators/src/generators/components/components.ts index f88f77d..8c2e077 100644 --- a/packages/generators/src/generators/components/components.ts +++ b/packages/generators/src/generators/components/components.ts @@ -7,6 +7,7 @@ export const components: ComponentGeneratorSchema['type'][] = [ 'copy', 'debug', 'group', + 'logo', 'search-input', 'stack', 'tab-routes', diff --git a/packages/generators/src/generators/feature/files/demo/demo-card.tsx.template b/packages/generators/src/generators/feature/files/demo/demo-card.tsx.template deleted file mode 100644 index 6118258..0000000 --- a/packages/generators/src/generators/feature/files/demo/demo-card.tsx.template +++ /dev/null @@ -1,9 +0,0 @@ -import { <%= prefix.className %>Card, <%= prefix.className %>Stack } from '@pubkey-ui/core' - -export function DemoCard({ children, title }: { children: React.ReactNode; title: string }) { - return ( - <<%= prefix.className %>Card title={title}> - <<%= prefix.className %>Stack>{children}Stack> - Card> - ) -} diff --git a/packages/generators/src/generators/feature/files/demo/demo-feature-alerts.tsx.template b/packages/generators/src/generators/feature/files/demo/demo-feature-alerts.tsx.template index 83efa1d..d0198a8 100644 --- a/packages/generators/src/generators/feature/files/demo/demo-feature-alerts.tsx.template +++ b/packages/generators/src/generators/feature/files/demo/demo-feature-alerts.tsx.template @@ -1,10 +1,9 @@ import { SimpleGrid } from '@mantine/core' -import { <%= prefix.className %>Alert, <%= prefix.className %>Error, <%= prefix.className %>Info, <%= prefix.className %>Success, <%= prefix.className %>Warning } from '@pubkey-ui/core' -import { DemoCard } from './demo-card' +import { <%= prefix.className %>Card, <%= prefix.className %>Alert, <%= prefix.className %>Error, <%= prefix.className %>Info, <%= prefix.className %>Success, <%= prefix.className %>Warning } from '@pubkey-ui/core' export function DemoFeatureAlerts() { return ( - + <<%= prefix.className %>Card title="Alerts"> <<%= prefix.className %>Error title="Error" message="Hello World" /> <<%= prefix.className %>Info title="Info" message="Hello World" /> @@ -12,6 +11,6 @@ export function DemoFeatureAlerts() { <<%= prefix.className %>Warning title="Warning" message="Hello World" /> <<%= prefix.className %>Alert title="Alert" message="Hello World" /> - + Card> ) } diff --git a/packages/generators/src/generators/feature/files/demo/demo-feature-copy.tsx.template b/packages/generators/src/generators/feature/files/demo/demo-feature-copy.tsx.template index ba674a0..9f617b8 100644 --- a/packages/generators/src/generators/feature/files/demo/demo-feature-copy.tsx.template +++ b/packages/generators/src/generators/feature/files/demo/demo-feature-copy.tsx.template @@ -1,12 +1,11 @@ -import { <%= prefix.className %>Copy, <%= prefix.className %>Stack } from '@pubkey-ui/core' -import { DemoCard } from './demo-card' +import { <%= prefix.className %>Card, <%= prefix.className %>Copy, <%= prefix.className %>Stack } from '@pubkey-ui/core' export function DemoFeatureCopy() { return ( - + <<%= prefix.className %>Card title="Copy"> <<%= prefix.className %>Stack> <<%= prefix.className %>Copy text="Hello PubKey UI" /> Stack> - + Card> ) } diff --git a/packages/generators/src/generators/feature/files/demo/demo-feature-debug.tsx.template b/packages/generators/src/generators/feature/files/demo/demo-feature-debug.tsx.template index 6b8248e..0c37042 100644 --- a/packages/generators/src/generators/feature/files/demo/demo-feature-debug.tsx.template +++ b/packages/generators/src/generators/feature/files/demo/demo-feature-debug.tsx.template @@ -1,16 +1,15 @@ import { SimpleGrid } from '@mantine/core' -import { <%= prefix.className %>Debug, <%= prefix.className %>DebugModal } from '@pubkey-ui/core' -import { DemoCard } from './demo-card' +import { <%= prefix.className %>Card, <%= prefix.className %>Debug, <%= prefix.className %>DebugModal } from '@pubkey-ui/core' export function DemoFeatureDebug() { return ( - + <<%= prefix.className %>Card title="Debug"> <<%= prefix.className %>Debug data={{ foo: 'bar' }} open hideButton /> <<%= prefix.className %>Debug data={{ foo: 'bar' }} /> <<%= prefix.className %>Debug data={{ foo: 'bar' }} open /> <<%= prefix.className %>DebugModal data={{ foo: 'bar' }} /> - + Card> ) } diff --git a/packages/generators/src/generators/feature/files/demo/demo-feature-group.tsx.template b/packages/generators/src/generators/feature/files/demo/demo-feature-group.tsx.template index bce5e2b..e77e79d 100644 --- a/packages/generators/src/generators/feature/files/demo/demo-feature-group.tsx.template +++ b/packages/generators/src/generators/feature/files/demo/demo-feature-group.tsx.template @@ -1,10 +1,9 @@ import { Button, SimpleGrid } from '@mantine/core' -import { <%= prefix.className %>Group } from '@pubkey-ui/core' -import { DemoCard } from './demo-card' +import { <%= prefix.className %>Card, <%= prefix.className %>Group } from '@pubkey-ui/core' export function DemoFeatureGroup() { return ( - + <<%= prefix.className %>Card title="Group"> <<%= prefix.className %>Group justify="space-between"> @@ -25,6 +24,6 @@ export function DemoFeatureGroup() { Group> - + Card> ) } diff --git a/packages/generators/src/generators/feature/files/demo/demo-feature-logo.tsx.template b/packages/generators/src/generators/feature/files/demo/demo-feature-logo.tsx.template new file mode 100644 index 0000000..dc9d690 --- /dev/null +++ b/packages/generators/src/generators/feature/files/demo/demo-feature-logo.tsx.template @@ -0,0 +1,14 @@ +import { SimpleGrid } from '@mantine/core' +import { <%= prefix.className %>Card, <%= prefix.className %>LogoType, <%= prefix.className %>LogoTypeBlack, <%= prefix.className %>LogoTypeWhite } from '@pubkey-ui/core' + +export function DemoFeatureLogo() { + return ( + <<%= prefix.className %>Card title="Logo"> + + <<%= prefix.className %>LogoType height={64} /> + <<%= prefix.className %>LogoTypeBlack height={64} /> + <<%= prefix.className %>LogoTypeWhite height={64} /> + + Card> + ) +} diff --git a/packages/generators/src/generators/feature/files/demo/demo-feature-search-input.tsx.template b/packages/generators/src/generators/feature/files/demo/demo-feature-search-input.tsx.template index 89561d5..c0ef3b2 100644 --- a/packages/generators/src/generators/feature/files/demo/demo-feature-search-input.tsx.template +++ b/packages/generators/src/generators/feature/files/demo/demo-feature-search-input.tsx.template @@ -1,10 +1,9 @@ import { SimpleGrid } from '@mantine/core' -import { <%= prefix.className %>Group, <%= prefix.className %>SearchInput } from '@pubkey-ui/core' -import { DemoCard } from './demo-card' +import { <%= prefix.className %>Card, <%= prefix.className %>Group, <%= prefix.className %>SearchInput } from '@pubkey-ui/core' export function DemoFeatureSearchInput() { return ( - + <<%= prefix.className %>Card title="SearchInput"> <<%= prefix.className %>SearchInput /> <<%= prefix.className %>SearchInput icon={{ radius: 0 }} text={{ radius: 0 }} /> @@ -18,6 +17,6 @@ export function DemoFeatureSearchInput() { <<%= prefix.className %>SearchInput /> <<%= prefix.className %>SearchInput /> Group> - + Card> ) } diff --git a/packages/generators/src/generators/feature/files/demo/demo-feature-stack.tsx.template b/packages/generators/src/generators/feature/files/demo/demo-feature-stack.tsx.template index 1c5076e..f6111c7 100644 --- a/packages/generators/src/generators/feature/files/demo/demo-feature-stack.tsx.template +++ b/packages/generators/src/generators/feature/files/demo/demo-feature-stack.tsx.template @@ -1,10 +1,9 @@ import { Button, SimpleGrid } from '@mantine/core' -import { <%= prefix.className %>Stack } from '@pubkey-ui/core' -import { DemoCard } from './demo-card' +import { <%= prefix.className %>Card, <%= prefix.className %>Stack } from '@pubkey-ui/core' export function DemoFeatureStack() { return ( - + <<%= prefix.className %>Card title="Stack"> <<%= prefix.className %>Stack justify="space-between"> @@ -25,6 +24,6 @@ export function DemoFeatureStack() { Stack> - + Card> ) } diff --git a/packages/generators/src/generators/feature/files/demo/demo-feature-tab-routes.tsx.template b/packages/generators/src/generators/feature/files/demo/demo-feature-tab-routes.tsx.template index 404ad85..dc4784d 100644 --- a/packages/generators/src/generators/feature/files/demo/demo-feature-tab-routes.tsx.template +++ b/packages/generators/src/generators/feature/files/demo/demo-feature-tab-routes.tsx.template @@ -1,10 +1,9 @@ import { SimpleGrid } from '@mantine/core' import { <%= prefix.className %>Card, <%= prefix.className %>TabRoutes } from '@pubkey-ui/core' -import { DemoCard } from './demo-card' export function DemoFeatureTabRoutes() { return ( - + <<%= prefix.className %>Card title="Time"> <<%= prefix.className %>TabRoutes baseUrl="/demo" tabs={[ @@ -37,6 +36,6 @@ export function DemoFeatureTabRoutes() { }, ]} /> - + Card> ) } diff --git a/packages/generators/src/generators/feature/files/demo/demo-feature-time.tsx.template b/packages/generators/src/generators/feature/files/demo/demo-feature-time.tsx.template index 73209ce..ffb99cb 100644 --- a/packages/generators/src/generators/feature/files/demo/demo-feature-time.tsx.template +++ b/packages/generators/src/generators/feature/files/demo/demo-feature-time.tsx.template @@ -1,10 +1,9 @@ import { SimpleGrid } from '@mantine/core' -import { <%= prefix.className %>Time } from '@pubkey-ui/core' -import { DemoCard } from './demo-card' +import { <%= prefix.className %>Card, <%= prefix.className %>Time } from '@pubkey-ui/core' export function DemoFeatureTime() { return ( - + <<%= prefix.className %>Card title="Time"> <<%= prefix.className %>Time date={new Date(new Date().setMonth(new Date().getMonth() - 1))} /> <<%= prefix.className %>Time date={new Date(new Date().setDate(new Date().getDate() - 7))} /> @@ -17,6 +16,6 @@ export function DemoFeatureTime() { <<%= prefix.className %>Time date={new Date(new Date().setFullYear(new Date().getFullYear() + 1))} /> <<%= prefix.className %>Time date={new Date('2021-01-01')} /> - + Card> ) } diff --git a/packages/generators/src/generators/feature/files/demo/demo-feature-toast.tsx.template b/packages/generators/src/generators/feature/files/demo/demo-feature-toast.tsx.template index fe86959..158c03a 100644 --- a/packages/generators/src/generators/feature/files/demo/demo-feature-toast.tsx.template +++ b/packages/generators/src/generators/feature/files/demo/demo-feature-toast.tsx.template @@ -1,10 +1,9 @@ import { Button, SimpleGrid } from '@mantine/core' -import { toastError, toastInfo, toastSuccess, toastWarning } from '@pubkey-ui/core' -import { DemoCard } from './demo-card' +import { <%= prefix.className %>Card, toastError, toastInfo, toastSuccess, toastWarning } from '@pubkey-ui/core' export function DemoFeatureToast() { return ( - + <<%= prefix.className %>Card title="Toast"> - + Card> ) } diff --git a/packages/generators/src/generators/feature/files/demo/demo-feature.tsx.template b/packages/generators/src/generators/feature/files/demo/demo-feature.tsx.template index 798c7f0..42aca85 100644 --- a/packages/generators/src/generators/feature/files/demo/demo-feature.tsx.template +++ b/packages/generators/src/generators/feature/files/demo/demo-feature.tsx.template @@ -4,6 +4,7 @@ import { DemoFeatureCard } from './demo-feature-card' import { DemoFeatureCopy } from './demo-feature-copy' import { DemoFeatureDebug } from './demo-feature-debug' import { DemoFeatureGroup } from './demo-feature-group' +import { DemoFeatureLogo } from './demo-feature-logo' import { DemoFeatureSearchInput } from './demo-feature-search-input' import { DemoFeatureStack } from './demo-feature-stack' import { DemoFeatureTabRoutes } from './demo-feature-tab-routes' @@ -19,6 +20,7 @@ export function DemoFeature() { +