Merge pull request #17 from TomPlum/develop

Demo loader and NPM publish fixes in CI

Author: TomPlum

.github/workflows/release.yml

@@ -30,6 +30,11 @@ jobs:
         with:
           folder: ./packages/demo/storybook-static
 
+      - name: Authenticate with NPM
+        run: echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > ~/.npmrc
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
       - name: Publish to NPM
         run: npm publish --workspace=@tomplum/react-git-log --access public
         env:

packages/demo/src/GitLog.stories.module.scss

@@ -3,6 +3,14 @@
   box-sizing: border-box;
 }
 
+.loading {
+  width: 100%;
+  height: calc(100vh - 110px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .table {
   >thead > tr > th {
     font-weight: 700;

packages/demo/src/GitLog.stories.tsx

@@ -14,6 +14,7 @@ import { fetchLogEntryData } from 'utils/fetchLogEntryData'
 import { ThemeToggle } from 'components/ThemeToggle'
 import { rainbow } from 'themes.ts'
 import { RepositorySelector } from 'components/RepositorySelector'
+import { Loading } from 'components/Loading'
 
 // TODO: once mono repo in place, extract types and components from here
 
@@ -217,10 +218,6 @@ export const Default: Story = {
       setColours(selected)
     }, [])
 
-    if (loading || !entries) {
-      return <div>Loading...</div>
-    }
-
     const backgroundColour = theme === 'dark' ? '#1a1a1a' : 'white'
     const textColour = theme === 'dark' ? 'white' : '#1a1a1a'
 
@@ -271,23 +268,31 @@ export const Default: Story = {
          </div>
         </div>
 
-        <GitLog
-          {...args}
-          colours={colours.colors}
-          entries={entries}
-          theme={theme}
-          currentBranch={branch}
-          paging={{
-            page: args.page ?? 0,
-            size: args.pageSize ?? entries.length
-          }}
-          classes={{
-            containerStyles: {
-              background: backgroundColour
-            },
-            logTableClass: styles.table
-          }}
-        />
+        {loading && (
+          <div className={styles.loading}>
+            <Loading theme={theme} />
+          </div>
+        )}
+
+        {!loading && entries && (
+          <GitLog
+            {...args}
+            colours={colours.colors}
+            entries={entries}
+            theme={theme}
+            currentBranch={branch}
+            paging={{
+              page: args.page ?? 0,
+              size: args.pageSize ?? entries.length
+            }}
+            classes={{
+              containerStyles: {
+                background: backgroundColour
+              },
+              logTableClass: styles.table
+            }}
+          />
+        )}
       </div>
     )
   }

packages/demo/src/components/Loading/Loading.module.scss

@@ -0,0 +1,36 @@
+.container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 30px;
+}
+
+.loading {
+  height: 60px;
+  aspect-ratio: 2;
+  border-bottom: 3px solid #0000;
+  position: relative;
+  animation: l3-0 .75s linear infinite;
+}
+
+.loading:before {
+  content: "";
+  position: absolute;
+  inset: auto 42.5% 0;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: #CF4647;
+  animation: l3-1 .75s cubic-bezier(0,900,1,900) infinite;
+}
+
+@keyframes l3-0 {
+  to {background-position: -125% 100%}
+}
+
+@keyframes l3-1 {
+  0%,2% {bottom: 0%}
+  98%,to {bottom:.1%}
+}

packages/demo/src/components/Loading/Loading.tsx

@@ -0,0 +1,19 @@
+import styles from './Loading.module.scss'
+import { LoadingProps } from './types'
+
+export const Loading = ({ theme }: LoadingProps) => {
+  const lineColour = theme === 'dark' ? ['#f8f8f8', '#0000'] : ['#524656', '#0000']
+
+  return (
+    <div className={styles.container}>
+      <div
+        style={{
+          background: `linear-gradient(90deg,${lineColour[0]} 50%,${lineColour[1]} 0) -25% 100%/50% 3px repeat-x border-box`
+        }}
+        className={styles.loading}
+      />
+
+      <span style={{ color: lineColour[0] }}>Loading...</span>
+    </div>
+  )
+}

packages/demo/src/components/Loading/index.ts

@@ -0,0 +1,2 @@
+export * from './types'
+export * from './Loading'

packages/demo/src/components/Loading/types.ts

@@ -0,0 +1,5 @@
+import { ThemeMode } from '@tomplum/react-git-log'
+
+export interface LoadingProps {
+  theme: ThemeMode
+}