From 1b298ecf22b7999e0cf42d172b354bae47b5d2ef Mon Sep 17 00:00:00 2001 From: Eric Charles Date: Tue, 19 Nov 2024 10:30:33 +0100 Subject: [PATCH] fix: build and start (#46) * fix: build * deps: remove primer-addons * fix: import * fix: build * chore: build * fix: build --- README.md | 25 +++++++++++++++++----- {react => icons-react}/.gitignore | 0 {react => icons-react}/README.md | 0 {react => icons-react}/index.d.ts | 0 {react => icons-react}/index.esm.js | 0 {react => icons-react}/index.js | 0 {react => icons-react}/package.json | 0 package.json | 22 ++++++++++---------- scripts/build.js | 24 +++++++++++++--------- src/DatalayerIcons.tsx | 26 +++++++++++++---------- src/footer/MinimalFooter.tsx | 32 ++++++++++++++--------------- src/footer/component-helpers.tsx | 4 ++-- src/index.ts | 2 +- 13 files changed, 79 insertions(+), 56 deletions(-) rename {react => icons-react}/.gitignore (100%) rename {react => icons-react}/README.md (100%) rename {react => icons-react}/index.d.ts (100%) rename {react => icons-react}/index.esm.js (100%) rename {react => icons-react}/index.js (100%) rename {react => icons-react}/package.json (100%) diff --git a/README.md b/README.md index 0766420..4482fe0 100644 --- a/README.md +++ b/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 diff --git a/react/.gitignore b/icons-react/.gitignore similarity index 100% rename from react/.gitignore rename to icons-react/.gitignore diff --git a/react/README.md b/icons-react/README.md similarity index 100% rename from react/README.md rename to icons-react/README.md diff --git a/react/index.d.ts b/icons-react/index.d.ts similarity index 100% rename from react/index.d.ts rename to icons-react/index.d.ts diff --git a/react/index.esm.js b/icons-react/index.esm.js similarity index 100% rename from react/index.esm.js rename to icons-react/index.esm.js diff --git a/react/index.js b/icons-react/index.js similarity index 100% rename from react/index.js rename to icons-react/index.js diff --git a/react/package.json b/icons-react/package.json similarity index 100% rename from react/package.json rename to icons-react/package.json diff --git a/package.json b/package.json index 12d068e..ebcbd94 100644 --- a/package.json +++ b/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", diff --git a/scripts/build.js b/scripts/build.js index 4ad2b20..0fd3473 100644 --- a/scripts/build.js +++ b/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> & { title?: string, titleId?: string, size?: "small" | "medium" | "large" | number, colored?: boolean } & React.RefAttributes>; export default ${componentName};` diff --git a/src/DatalayerIcons.tsx b/src/DatalayerIcons.tsx index 0acb746..a58ffd9 100644 --- a/src/DatalayerIcons.tsx +++ b/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 = () => { Datalayer - - Run - - - App + + Docs Tech + + Guide + + + Blog + diff --git a/src/footer/MinimalFooter.tsx b/src/footer/MinimalFooter.tsx index 2fa2d7f..2efcf0e 100644 --- a/src/footer/MinimalFooter.tsx +++ b/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) { // 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 function Footnotes({children, className}: PropsWithChildren) { - 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', diff --git a/src/footer/component-helpers.tsx b/src/footer/component-helpers.tsx index 20c7461..45702e7 100644 --- a/src/footer/component-helpers.tsx +++ b/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 diff --git a/src/index.ts b/src/index.ts index 835afac..144c528 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,3 +1,3 @@ -import * as icons from "../react"; +import * as icons from "../icons-react"; export default icons;