feat: Add Aetherspace Logo, improve documentation script

Author: codinsonn

.storybook/main.js

@@ -33,6 +33,7 @@ module.exports = {
     ],
     staticDirs: [
       './public',
+      '../packages/@aetherspace/assets',
       '../apps/next/public',
     ],
     webpackFinal: (config) => {

features/app-core/screens/index.ts

@@ -1 +0,0 @@
-

features/links-page/components/BioLink.tsx

@@ -6,7 +6,7 @@ import { Link, useAetherNav } from 'aetherspace/navigation'
 // Schemas
 import { LinkInBio } from '../schemas'
 // Styles
-import { twStyled } from 'aetherspace/styles' 
+import { twStyled } from 'aetherspace/styles'
 // Primitives
 import { Image } from 'aetherspace/primitives'
 
@@ -26,10 +26,7 @@ export const BioLink = (props: AetherProps<typeof BioLinkProps>) => {
   // -- Render --
 
   return (
-    <StLinkWrapper
-      accessibilityRole="button"
-      onPress={() => openLink(link)}
-    >
+    <StLinkWrapper accessibilityRole="button" onPress={() => openLink(link)}>
       <StImageWrapper>
         <Link href={link}>
           <Image

packages/@aetherspace/README.md

@@ -1,6 +1,8 @@
+<img src="/packages/@aetherspace/assets/AetherspaceLogo.svg" width="50" height="50" />
+
 # GREEN stack quickstart ⚡
 
-> Welcome! Set up your Web, iOS & Android app in minutes, and blow away the competition with write-once components that run on all platforms. Powered by GraphQL, React, Expo & Next.js
+> Welcome to Aetherspace! Set up your Web, iOS & Android app in minutes, and blow away the competition with write-once components that run on all platforms. Powered by GraphQL, React, Expo & Next.js
 
 ## Kickstart for Web & Mobile with Aetherspace
 

packages/@aetherspace/assets/AetherspaceLogo-black.svg

@@ -27,16 +27,17 @@ const StorybookLinkTransformer = (props) => {
   useEffect(() => {
     transformLinks({
       // - Images -
+      '/packages/@aetherspace/assets/AetherspaceLogo.svg': '/AetherspaceLogo.svg',
       '/.storybook/public/TransformToolsExampleRNSVG.png': '/TransformToolsExampleRNSVG.png',
       // - Hrefs -
       '?path=/packages/@aetherspace/README.md': '?path=/docs/aetherspace-quickstart--page',
       '?path=/packages/@aetherspace/core/README.md': '?path=/docs/aetherspace-core-concepts--page',
-      '?path=/packages/@aetherspace/styles/README.md': '?path=/story/aetherspace-cross-platform-styling--page',
-      '?path=/packages/@aetherspace/navigation/README.md': '?path=/docs/aetherspace-universal-routing--page',
-      '?path=/packages/@aetherspace/navigation/AetherPage/README.md': '?path=/docs/aetherspace-graphql-data-fetching--page',
-      '?path=/packages/@aetherspace/components/AetherIcon/README.md': '?path=/docs/aetherspace-icon-management--page',
+      '?path=/packages/@aetherspace/styles/README.md': '?path=/story/aetherspace-cross-platform-styling--page', // prettier-ignore
+      '?path=/packages/@aetherspace/navigation/README.md': '?path=/docs/aetherspace-universal-routing--page', // prettier-ignore
+      '?path=/packages/@aetherspace/navigation/AetherPage/README.md': '?path=/docs/aetherspace-graphql-data-fetching--page', // prettier-ignore
+      '?path=/packages/@aetherspace/components/AetherIcon/README.md': '?path=/docs/aetherspace-icon-management--page', // prettier-ignore
       '?path=/packages/@aetherspace/scripts/README.md': '?path=/docs/aetherspace-automation--page',
-      '?path=/packages/@aetherspace/schemas/README.md': '?path=/docs/aetherspace-single-sources-of-truth--page',
+      '?path=/packages/@aetherspace/schemas/README.md': '?path=/docs/aetherspace-single-sources-of-truth--page', // prettier-ignore
       '?path=/.github/workflows/README.md': '?path=/docs/aetherspace-deployment--page',
       '?path=/LICENSE.md': '?path=/docs/aetherspace-license--page',
     })

packages/@aetherspace/assets/AetherspaceLogo.svg

@@ -0,0 +1,35 @@
+import * as React from 'react'
+import Svg, { Path } from 'react-native-svg'
+import { z, aetherSchema, AetherProps } from '../schemas'
+
+/* --- Schema ---------------------------------------------------------------------------------- */
+
+const AetherspaceLogoProps = aetherSchema('AetherspaceLogoProps', {
+  size: z.number().default(50).describe('Icon dimensions, maps to both width and height'),
+  fill: z.string().color().default('#32b115').describe('Icon fill color'),
+})
+
+/* --- <AetherspaceLogo/> ---------------------------------------------------------------------- */
+
+export const AetherspaceLogo = (props: AetherProps<typeof AetherspaceLogoProps>) => {
+  // Props
+  const { size, fill, ...svgProps } = AetherspaceLogoProps.applyDefaults(props)
+  // Render
+  return (
+    <Svg viewBox="0 0 2250 2250" width={size} height={size} fill={fill} {...svgProps}>
+      <Path d="M395.97 940.89c2.527 8.408-1.431 17.405-9.335 21.225a738.276 738.276 0 0 0-14.242 7.063c-50.449 25.708-91.022 53.798-118.536 84.654-20.083 22.522-32.828 45.774-32.828 70.804s12.745 48.282 32.828 70.804c27.514 30.856 68.087 58.946 118.536 84.654 169.712 86.483 443.872 141.225 752.607 141.225 308.735 0 582.895-54.742 752.607-141.225 50.449-25.708 91.022-53.798 118.536-84.654 20.083-22.522 32.828-45.774 32.828-70.804s-12.745-48.282-32.828-70.804c-27.514-30.856-68.087-58.946-118.536-84.654-17.537-8.936-36.189-17.534-55.877-25.766a40.048 40.048 0 0 1-20.766-53.974c7.283-15.556 15.606-33.258 22.553-48.035 8.508-18.099 29.726-26.333 48.216-18.71 60.001 24.86 111.545 52.535 152.87 82.307 89.935 64.79 135.536 141.668 135.536 219.636 0 77.968-45.601 154.846-135.536 219.637-168.773 121.588-508.005 208.214-899.603 208.214-391.598 0-730.83-86.626-899.603-208.214-89.935-64.791-135.536-141.669-135.536-219.637 0-77.968 45.601-154.846 135.536-219.636 29.984-21.602 71.058-42.099 113.037-61.206a23.879 23.879 0 0 1 32.799 14.842c7.533 25.018 18.631 61.941 24.737 82.254z" />
+      <Path d="M430.304 1586.71a17.441 17.441 0 0 1 21.577-13.324c24.157 6.439 67.183 17.924 91.228 24.342 9.747 2.603 15.83 12.289 13.942 22.2a749.87 749.87 0 0 0-3.332 18.733c-9.195 55.871-10.618 105.197-2.074 145.646 6.236 29.525 17.41 53.571 37.57 68.407 20.16 14.835 46.441 18.352 76.484 15.525 41.16-3.873 87.832-19.902 138.439-45.297 81.026-40.661 170.285-104.639 261.331-187.355 22.022 39.894 58.93 70.052 102.969 82.53-143.279 132.52-283.967 223.908-399.734 261.258-105.488 34.033-194.435 25.196-257.233-21.016-62.797-46.212-97.688-128.506-96.567-239.342.405-40.071 5.604-84.469 15.4-132.307zm934.945-117.258a392.106 392.106 0 0 0 31.678 2.989 2565.575 2565.575 0 0 1-20.41 24.924 176.02 176.02 0 0 0-11.268-27.913z" />
+      <Path d="M1774.3 1426.89c39.125 110.316 59.969 210.25 60.796 292.123 1.121 110.836-33.77 193.13-96.567 239.342-62.798 46.212-151.745 55.049-257.233 21.016-197.962-63.869-468.796-285.75-700.897-601.152-232.1-315.401-363.393-639.97-365.495-847.969-1.121-110.837 33.77-193.131 96.567-239.343 62.798-46.212 151.745-55.049 257.233-21.015 70.917 22.88 188.254 92.996 279.642 158.484a32.883 32.883 0 0 1 6.735 46.679c-12.421 16.161-28.133 36.554-40.065 52.043-9.938 12.898-28.352 15.511-41.486 5.887-53.869-38.781-126.599-85.186-169.392-106.66-50.607-25.396-97.279-41.425-138.439-45.298-30.043-2.826-56.324.69-76.484 15.526-20.16 14.835-31.334 38.881-37.57 68.406-8.544 40.449-7.121 89.776 2.074 145.646 30.933 187.948 149.338 441.208 332.326 689.871 182.988 248.662 389.573 437.031 559.817 522.462 50.607 25.395 97.279 41.424 138.439 45.297 30.043 2.827 56.324-.69 76.484-15.525 20.16-14.836 31.334-38.882 37.57-68.407 8.544-40.449 7.121-89.775-2.074-145.646-10.087-61.284-29.473-129.511-57.37-202.265l134.547 6.901.842-16.403z" />
+      <Path d="m1121.47 1301.07 256.782-402.186c19.479-30.508 10.524-71.092-19.985-90.571s-71.092-10.524-90.571 19.985l-256.782 402.185c-19.479 30.509-10.524 71.093 19.985 90.571 30.508 19.479 71.092 10.524 90.571-19.984zM976.198 1104.1l122.401-191.711c19.479-30.509 10.524-71.092-19.985-90.571-30.508-19.479-71.092-10.524-90.571 19.985l-122.401 191.71c-19.478 30.509-10.524 71.093 19.985 90.572 30.509 19.478 71.092 10.523 90.571-19.985zm400.662 202.37 94.038-147.288c19.479-30.509 10.524-71.092-19.985-90.571s-71.092-10.524-90.571 19.985l-94.038 147.287c-19.479 30.509-10.524 71.093 19.985 90.572 30.508 19.478 71.092 10.523 90.571-19.985z" />
+      <Path d="M1674.9 195.811c20.635-13.405 47.193-13.545 67.967-.357a62.89 62.89 0 0 1 28.6 61.658l-90.484 658.385c-6.334 46.09-46.811 79.718-93.281 77.498-46.471-2.22-83.558-39.553-85.47-86.037l-4.499-109.362a135.57 135.57 0 0 0-189.766-118.644l-112.602 49.232c-44.461 19.44-96.4 1.52-119.414-41.2-23.015-42.72-9.409-95.952 31.283-122.387L1674.9 195.811z" />
+    </Svg>
+  )
+}
+
+/* --- Documentation --------------------------------------------------------------------------- */
+
+export const getDocumentationProps = AetherspaceLogoProps.introspect()
+
+/* --- Exports --------------------------------------------------------------------------------- */
+
+export default AetherspaceLogo

packages/@aetherspace/docs/helpers/StorybookLinkTransformer.tsx

@@ -0,0 +1,7 @@
+import { AetherspaceLogo } from './AetherspaceLogo'
+
+/** --- iconRegistry --------------------------------------------------------------------------- */
+/** -i- Register any icons by preferred AetherIcon "name" key */
+export const iconRegistry = {
+  'aetherspace-logo': AetherspaceLogo,
+} as const

packages/@aetherspace/icons/AetherspaceLogo.tsx

@@ -55,8 +55,6 @@ export const {componentNameConfig} = aetherStoryDocs({ {componentName} }, {getDo
 {{stories}}
 `
 
-
-
 /* --- document-components --------------------------------------------------------------------- */
 
 const documentComponents = () => {
@@ -123,7 +121,7 @@ const documentComponents = () => {
         // Build component import example
         const importStatement = hasNamedExport ? `{ ${componentName} }` : componentName
         const componentFilePath = `${componentFolder.replace('../../', '')}/${componentName}`
-        const [workspaceType, workspaceFolderName, componentFolderName] = componentFilePath.split('/')
+        const [workspaceType, workspaceFolderName, componentFolderName] = componentFilePath.split('/') // prettier-ignore
         const workspaceFolder = [workspaceType, workspaceFolderName].join('/') // e.g. 'packages/@aetherspace'
         const workspaceImport = workspaceImports[workspaceFolder] // e.g. 'aetherspace'
         const importExample = `import ${importStatement} from '${workspaceImport}/${componentFolderName}/${componentName}'` // prettier-ignore
@@ -135,7 +133,7 @@ const documentComponents = () => {
           componentNameDocs: `${componentName}Docs`,
           componentNameConfig: `${componentName}Config`,
           getDocumentationProps: storyPropsAlias,
-          filePath: `\`${componentFilePath}\``,
+          filePath: `\`/${componentFilePath}.tsx\``,
           importExample: '```typescript\n' + importExample + '\n```\n',
         })
         // Add story to the stories list