feat: add loader component

Author: beeman

apps/web/src/app/features/demo/demo-feature-loader.tsx

@@ -0,0 +1,14 @@
+import { SimpleGrid } from '@mantine/core'
+import { UiCard, UiLoader } from '@pubkey-ui/core'
+
+export function DemoFeatureLoader() {
+  return (
+    <UiCard title="Loader">
+      <SimpleGrid cols={3}>
+        <UiLoader />
+        <UiLoader type="dots" />
+        <UiLoader type="bars" />
+      </SimpleGrid>
+    </UiCard>
+  )
+}

apps/web/src/app/features/demo/demo-feature.tsx

@@ -10,6 +10,7 @@ import { DemoFeatureDashboardGrid } from './demo-feature-dashboard-grid'
 import { DemoFeatureDebug } from './demo-feature-debug'
 import { DemoFeatureGroup } from './demo-feature-group'
 import { DemoFeatureHeader } from './demo-feature-header'
+import { DemoFeatureLoader } from './demo-feature-loader'
 import { DemoFeatureLogo } from './demo-feature-logo'
 import { DemoFeatureMenu } from './demo-feature-menu'
 import { DemoFeatureNotFound } from './demo-feature-not-found'
@@ -34,6 +35,7 @@ export function DemoFeature() {
     { path: 'debug', label: 'Debug', element: <DemoFeatureDebug /> },
     { path: 'group', label: 'Group', element: <DemoFeatureGroup /> },
     { path: 'header', label: 'Header', element: <DemoFeatureHeader /> },
+    { path: 'loader', label: 'Loader', element: <DemoFeatureLoader /> },
     { path: 'logo', label: 'Logo', element: <DemoFeatureLogo /> },
     { path: 'menu', label: 'Menu', element: <DemoFeatureMenu /> },
     { path: 'not-found', label: 'Not Found', element: <DemoFeatureNotFound /> },

packages/core/src/lib/index.ts

@@ -8,6 +8,7 @@ export * from './ui-debug'
 export * from './ui-group'
 export * from './ui-header'
 export * from './ui-layout'
+export * from './ui-loader'
 export * from './ui-logo'
 export * from './ui-menu'
 export * from './ui-not-found'

packages/core/src/lib/ui-loader/index.ts

@@ -0,0 +1 @@
+export * from './ui-loader'

packages/core/src/lib/ui-loader/ui-loader.tsx

@@ -0,0 +1,16 @@
+import { Flex, Loader, LoaderProps } from '@mantine/core'
+
+export function UiLoader({
+  size = 'xl',
+  type = 'oval',
+  flex = 'inline',
+  ...props
+}: LoaderProps & {
+  flex?: 'full' | 'inline'
+}) {
+  return (
+    <Flex h={flex === 'full' ? '100vh' : '100%'} justify="center" align="center">
+      <Loader size={size} type={type} {...props} />
+    </Flex>
+  )
+}

packages/generators/src/generators/component/component-generator-schema.d.ts

@@ -24,6 +24,7 @@ export interface ComponentGeneratorSchema {
     | 'group'
     | 'header'
     | 'layout'
+    | 'loader'
     | 'logo'
     | 'menu'
     | 'not-found'

packages/generators/src/generators/component/component-generator-schema.json

@@ -26,6 +26,7 @@
         "group",
         "header",
         "layout",
+        "loader",
         "logo",
         "menu",
         "not-found",

packages/generators/src/generators/component/component-types.ts

@@ -11,6 +11,7 @@ export const componentTypes: ComponentGeneratorSchema['type'][] = [
   'group',
   'header',
   'layout',
+  'loader',
   'logo',
   'menu',
   'not-found',

packages/generators/src/generators/component/files/loader/__prefixFileName__-loader.tsx.template

@@ -0,0 +1,16 @@
+import { Flex, Loader, LoaderProps } from '@mantine/core'
+
+export function UiLoader({
+  size = 'xl',
+  type = 'oval',
+  flex = 'inline',
+  ...props
+}: LoaderProps & {
+  flex?: 'full' | 'inline'
+}) {
+  return (
+    <Flex h={flex === 'full' ? '100vh' : '100%'} justify="center" align="center">
+      <Loader size={size} type={type} {...props} />
+    </Flex>
+  )
+}

packages/generators/src/generators/component/files/loader/index.ts.template

@@ -0,0 +1 @@
+export * from './<%= prefixFileName %>-loader'

packages/generators/src/generators/feature/files/demo/demo-feature-back.tsx.template

@@ -1,9 +1,9 @@
-import { UiBack, UiCard } from '@pubkey-ui/core'
+import { <%= prefix.className %>Back, <%= prefix.className %>Card } from '<%= uiImport %>'
 
 export function DemoFeatureBack() {
   return (
-    <UiCard title="Back">
-      <UiBack />
-    </UiCard>
+    <<%= prefix.className %>Card title="Back">
+      <<%= prefix.className %>Back />
+    </<%= prefix.className %>Card>
   )
 }

packages/generators/src/generators/feature/files/demo/demo-feature-loader.tsx.template

@@ -0,0 +1,14 @@
+import { SimpleGrid } from '@mantine/core'
+import { <%= prefix.className %>Card, <%= prefix.className %>Loader } from '<%= uiImport %>'
+
+export function DemoFeatureLoader() {
+  return (
+    <<%= prefix.className %>Card title="Loader">
+      <SimpleGrid cols={3}>
+        <<%= prefix.className %>Loader />
+        <<%= prefix.className %>Loader type="dots" />
+        <<%= prefix.className %>Loader type="bars" />
+      </SimpleGrid>
+    </<%= prefix.className %>Card>
+  )
+}

packages/generators/src/generators/feature/files/demo/demo-feature-not-found.tsx.template

@@ -1,10 +1,10 @@
-import { UiCardTitle, UiNotFound, UiStack } from '@pubkey-ui/core'
+import { <%= prefix.className %>CardTitle, <%= prefix.className %>NotFound, <%= prefix.className %>Stack } from '<%= uiImport %>'
 
 export function DemoFeatureNotFound() {
   return (
-    <UiStack>
-      <UiCardTitle>NotFound</UiCardTitle>
-      <UiNotFound />
-    </UiStack>
+    <<%= prefix.className %>Stack>
+      <<%= prefix.className %>CardTitle>NotFound</<%= prefix.className %>CardTitle>
+      <<%= prefix.className %>NotFound />
+    </<%= prefix.className %>Stack>
   )
 }

packages/generators/src/generators/feature/files/demo/demo-feature.tsx.template

@@ -10,6 +10,7 @@ import { DemoFeatureDashboardGrid } from './demo-feature-dashboard-grid'
 import { DemoFeatureDebug } from './demo-feature-debug'
 import { DemoFeatureGroup } from './demo-feature-group'
 import { DemoFeatureHeader } from './demo-feature-header'
+import { DemoFeatureLoader } from './demo-feature-loader'
 import { DemoFeatureLogo } from './demo-feature-logo'
 import { DemoFeatureMenu } from './demo-feature-menu'
 import { DemoFeatureNotFound } from './demo-feature-not-found'
@@ -34,6 +35,7 @@ element: ReactNode
 { path: 'debug', label: 'Debug', element: <DemoFeatureDebug /> },
 { path: 'group', label: 'Group', element: <DemoFeatureGroup /> },
 { path: 'header', label: 'Header', element: <DemoFeatureHeader /> },
+{ path: 'loader', label: 'Loader', element: <DemoFeatureLoader /> },
 { path: 'logo', label: 'Logo', element: <DemoFeatureLogo /> },
 { path: 'menu', label: 'Menu', element: <DemoFeatureMenu /> },
 { path: 'not-found', label: 'Not Found', element: <DemoFeatureNotFound /> },