fix: build and start (#46)

* fix: build

* deps: remove primer-addons

* fix: import

* fix: build

* chore: build

* fix: build

README.md

@@ -61,21 +61,36 @@ declare module "*.svg" {
 }
 ```
 
-## For Data Products designers
+## For Data Products Designers
 
-Designers will create a SVG and add it in one of the `svg` subfolder of this repository.
+Data Product Designers may add or update the existing icons.
 
-To add an icon to this repository, add the SVG (preferably of viewBox `0 0 20 20`) of the icon one of the `svg` sub-folder. Then run the following commands:
+For that, the initial steps is to clone this repository and install the dependencies.
 
 ```bash
+git clone https://github.com/datalayer/icons
+cd icons
 yarn
-yarn run build-icons
 ```
 
-You should see your icon in the `optimized` folder and also as a component in the `react` folder.
+Designers will create a SVG and add it in one of the `svg` subfolder of this repository.
+
+To add an icon to this repository, add the SVG (preferably of viewBox `0 0 20 20`) of the icon one of the `svg` sub-folder. Then run the following commands.
 
 TODO: Describe the difference between `data1` and `data2`.
 
+```bash
+yarn build-icons
+```
+
+You can preview the icons running the following command (sometimes the colors do not correspond due to many icons being shown).
+
+```bash
+yarn start
+```
+
+## Stencils
+
 We will work to [create stencils for drawing tools](https://github.com/datalayer/icons/issues/2).
 
 ## Theming

package.json

@@ -21,7 +21,7 @@
     "build-data1": "rimraf ./optimized/data && svgo --config=svgo.yaml -f ./svg/data1 -o ./optimized/data1 --pretty --indent=2",
     "build-data2": "rimraf ./optimized/data && svgo --config=svgo.yaml -f ./svg/data2 -o ./optimized/data2 --pretty --indent=2",
     "build-eggs": "rimraf ./optimized/eggs && svgo --config=svgo.yaml -f ./svg/eggs -o ./optimized/eggs --pretty --indent=2",
-    "build-react": "node ./scripts/build.js react",
+    "build-react": "node ./scripts/build.js icons-react",
     "build-vue": "node ./scripts/build.js vue",
     "clean": "rimraf lib build dist tsconfig.tsbuildinfo optimized/data1 optimized/data2 optimized/eggs react/data1 react/data2 react/eggs",
     "dev": "vite",
@@ -31,9 +31,9 @@
   },
   "dependencies": {
     "@jupyterlab/ui-components": "^4.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "styled-components": "^5.3.10"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "styled-components": "5.3.10"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
@@ -43,22 +43,22 @@
     "@primer/react": "^36.25.0",
     "@primer/react-brand": "0.37.0-rc.ab1bfc11",
     "@svgr/core": "^5.5.0",
-    "@types/react": "^18.2.12",
-    "@types/react-dom": "^18.2.5",
+    "@types/react": "18.2.12",
+    "@types/react-dom": "18.2.5",
     "@types/styled-components": "^5.1.26",
-    "@vitejs/plugin-react": "^2.0.0",
+    "@vitejs/plugin-react": "4.3.3",
     "@vue/compiler-dom": "^3.0.5",
     "autoprefixer": "^10.4.14",
     "camelcase": "^6.0.0",
     "cheerio": "^1.0.0-rc.12",
-    "html-to-image": "^1.9.0",
+    "html-to-image": "1.9.0",
     "postcss": "^8.4.23",
     "prettier": "^2.8.7",
     "rimraf": "^3.0.2",
     "svgo": "^1.3.2",
-    "typescript": "~5.0.3",
-    "vite": "^5.2.7",
-    "vite-plugin-svgr": "^3.2.0"
+    "typescript": "5.0.3",
+    "vite": "5.4.11",
+    "vite-plugin-svgr": "4.3.0"
   },
   "resolutions": {
     "react": "18.2.0",

scripts/build.js

@@ -1,16 +1,20 @@
-const fs = require('fs').promises
-const camelcase = require('camelcase')
-const cheerio = require('cheerio')
-const { promisify } = require('util')
-const rimraf = promisify(require('rimraf'))
-const svgr = require('@svgr/core').default
-const babel = require('@babel/core')
+const fs = require('fs').promises;
+
+const { promisify } = require('util');
+const rimraf = promisify(require('rimraf'));
+
+const babel = require('@babel/core');
+const camelcase = require('camelcase');
+const cheerio = require('cheerio');
+const svgr = require('@svgr/core').default;
+
 const { compile: compileVue } = require('@vue/compiler-dom')
+
 const { dirname } = require('path')
 
 let transforms = {
 
-  react: async (svg, componentName, format, style) => {
+  'icons-react': async (svg, componentName, format, style) => {
 
     let component = await svgr(svg, { ref: true, titleProp: true }, { componentName })
     let { code } = await babel.transformAsync(component, {
@@ -58,7 +62,7 @@ let transforms = {
       .replace('export default', 'module.exports =')
   },
 
-  vue: (svg, componentName, format) => {
+  'icons-vue': (svg, componentName, format) => {
     let { code } = compileVue(svg, {
       mode: 'module',
     })
@@ -137,7 +141,7 @@ async function buildIcons(package, flavor, format) {
 
       let content = await transforms[package](svg, componentName, format, flavor)
 
-      let types = package === 'react'
+      let types = package === 'icons-react'
           ? `import * as React from 'react';
 declare const ${componentName}: React.ForwardRefExoticComponent<React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean } & React.RefAttributes<SVGSVGElement>>;
 export default ${componentName};`

src/DatalayerIcons.tsx

@@ -1,13 +1,14 @@
-import React, { useState, useEffect, useRef } from "react";
-// import { useDebounce } from "react-use";
+import { useState, useEffect, useRef } from "react";
 import { CTABanner, Button } from "@primer/react-brand";
 import { ThemeProvider, BaseStyles, IconButton, Text, Box, Link, TextInput, Tooltip, Flash } from "@primer/react";
-import { SearchIcon, AlertIcon } from "@primer/octicons-react";
+import { SearchIcon } from "@primer/octicons-react";
 import { toPng, toSvg } from 'html-to-image';
 import styled from "styled-components";
+
 import { MinimalFooter } from "./footer/MinimalFooter";
-import * as dataIcons from "../react";
-import * as eggsIcons from "../react/eggs";
+
+import * as dataIcons from "../icons-react";
+import * as eggsIcons from "../icons-react/eggs";
 
 import '@primer/react-brand/lib/css/main.css'
 
@@ -36,7 +37,7 @@ const IconLine = (props: { name: string, icon: any}) => {
     if (ref.current === null) {
       return
     }
-    toPng(ref.current, { cacheBust: true, })
+    toPng(ref.current, { cacheBust: true, width: 1000, height: 1000 })
       .then((dataUrl: string) => {
         const link = document.createElement('a');
         link.download = `${name}_${type}.png`;
@@ -277,15 +278,18 @@ const DatalayerIcons = () => {
             <MinimalFooter.Link href="https://datalayer.io" target="_blank">
               Datalayer
             </MinimalFooter.Link>
-            <MinimalFooter.Link href="https://datalayer.run" target="_blank">
-              Run
-            </MinimalFooter.Link>
-            <MinimalFooter.Link href="https://datalayer.io" target="_blank">
-              App
+            <MinimalFooter.Link href="https://docs.datalayer.io" target="_blank">
+              Docs
             </MinimalFooter.Link>
             <MinimalFooter.Link href="https://datalayer.tech" target="_blank">
               Tech
             </MinimalFooter.Link>
+            <MinimalFooter.Link href="https://datalayer.guide" target="_blank">
+              Guide
+            </MinimalFooter.Link>
+            <MinimalFooter.Link href="https://datalayer.blog" target="_blank">
+              Blog
+            </MinimalFooter.Link>
           </MinimalFooter>
         </BaseStyles>
       </ThemeProvider>

src/footer/MinimalFooter.tsx

@@ -1,8 +1,8 @@
-import React, {PropsWithChildren} from 'react';
+import { isValidElement, cloneElement, Children, PropsWithChildren } from 'react';
 import clsx from 'clsx';
-import {DatalayerGreenIcon} from '../../react';
-import {Stack, Text, useTheme} from '@primer/react-brand';
-import {BaseProps} from './component-helpers';
+import { Stack, Text, useTheme } from '@primer/react-brand';
+import { DatalayerGreenIcon } from '../../icons-react';
+import { BaseProps } from './component-helpers';
 
 /**
  * Design tokens
@@ -52,8 +52,8 @@ function Root({
 }: PropsWithChildren<MinimalFooterProps>) {
   // find Footer.Footnotes children
   const footerFootnoteChild = () => {
-    const footnotes = React.Children.toArray(children).find(child => {
-      if (!React.isValidElement(child)) {
+    const footnotes = Children.toArray(children).find(child => {
+      if (!isValidElement(child)) {
         return false
       }
 
@@ -68,10 +68,10 @@ function Root({
    * Renders a maximum of 5 links.
    * If more than 5 links are required, we should encourage usage of Footer instead.
    */
-  const LinkChildren = React.Children.toArray(children)
+  const LinkChildren = Children.toArray(children)
     .filter(child => {
       // if not valid element
-      if (React.isValidElement(child)) {
+      if (isValidElement(child)) {
         if (child.type === Link) {
           return child
         }
@@ -123,14 +123,14 @@ function Root({
 type FootnoteProps = BaseProps<HTMLElement>
 
 function Footnotes({children, className}: PropsWithChildren<FootnoteProps>) {
-  const styledChildren = React.Children.map(children, child => {
+  const styledChildren = Children.map(children, child => {
     // if not valid element
-    if (!React.isValidElement(child)) {
+    if (!isValidElement(child)) {
       return child
     }
 
     if (child.type && child.type === Text) {
-      return React.cloneElement(child as React.ReactElement, {
+      return cloneElement(child as React.ReactElement, {
         as: 'p',
         variant: 'muted',
         size: 200,
@@ -157,10 +157,10 @@ function SocialLogomarks({socialLinks, logoHref}: SocialLogomarksProps) {
 
   const socialLinkData = [
     {
-      name: 'twitter',
-      fullName: 'Twitter',
+      name: 'x',
+      fullName: 'X',
       url: 'https://x.com/datalayerio',
-      icon: 'https://github.githubassets.com/images/modules/site/icons/footer/twitter.svg',
+      icon: 'https://github.githubassets.com/images/modules/site/icons/footer/x.svg',
       iconWidth: 22,
       iconHeight: 18
     },
@@ -180,15 +180,15 @@ function SocialLogomarks({socialLinks, logoHref}: SocialLogomarksProps) {
       iconWidth: 19,
       iconHeight: 18
     },
-    /*
     {
       name: 'youtube',
       fullName: 'YouTube',
-      url: 'https://www.youtube.com/datalayer',
+      url: 'https://www.youtube.com/@datalayer',
       icon: 'https://github.githubassets.com/images/modules/site/icons/footer/youtube.svg',
       iconWidth: 23,
       iconHeight: 16
     },
+    /*
     {
       name: 'facebook',
       fullName: 'Facebook',

src/footer/component-helpers.tsx

@@ -1,5 +1,5 @@
-import React, {Ref, PropsWithChildren} from 'react'
-import {AnimateProps} from '@primer/react-brand'
+import { Ref, PropsWithChildren} from 'react'
+import { AnimateProps } from '@primer/react-brand'
 
 /**
  * Layout

src/index.ts

@@ -1,3 +1,3 @@
-import * as icons from "../react";
+import * as icons from "../icons-react";
 
 export default icons;