Skip to content

Commit

Permalink
feat: add custom-elements.json (#142)
Browse files Browse the repository at this point in the history
* feat: add custom-elements.json

Fixes #31

* fix: simplify

* fix: add kind: field

* fix: remove type
nolanlawson authored Jun 26, 2021

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent 17ff749 commit fd3e0f3
Showing 3 changed files with 264 additions and 5 deletions.
33 changes: 29 additions & 4 deletions bin/generateCssDocs.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,12 @@
import path from 'path'
import sass from 'sass'
import table from 'markdown-table'
import { readFile, writeFile } from './fs.js'
import { replaceInReadme } from './replaceInReadme.js'
import postcss from 'postcss'

const __dirname = path.dirname(new URL(import.meta.url).pathname)

const START_MARKER = '<!-- CSS variable options start -->'
const END_MARKER = '<!-- CSS variable options end -->'

@@ -25,7 +29,7 @@ function extractCSSVariables (node) {

// Find all the CSS variables declared on the :host and print them out
// into the README as documentation
async function generateMarkdownTable (css) {
async function generateCssVariablesData (css) {
const ast = postcss.parse(css)
const hosts = ast.nodes.filter(({ selector }) => ([':host', ':host,\n:host(.light)'].includes(selector)))
const darkHosts = ast.nodes.filter(({ selector }) => selector === ':host(.dark)')
@@ -34,7 +38,7 @@ async function generateMarkdownTable (css) {

const sortedVars = vars.sort((a, b) => a.name < b.name ? -1 : 1)

const data = sortedVars.map(({ name, value, comment }) => {
return sortedVars.map(({ name, value, comment }) => {
const darkIndex = darkVars.findIndex(_ => _.name === name)
let darkValue = darkIndex !== -1 ? darkVars[darkIndex].value : ''
if (darkValue === value) {
@@ -45,18 +49,39 @@ async function generateMarkdownTable (css) {

return [wrap(name), wrap(value), darkValue ? wrap(darkValue) : '', comment || '']
})
}

function generateMarkdownTable (cssData) {
const headers = ['Variable', 'Default', 'Default (dark)', 'Description']
return table([
headers,
...data
...cssData
])
}

async function replaceInCustomElementsJson (cssData) {
const jsonFilename = path.join(__dirname, '../custom-elements.json')
const json = JSON.parse(await readFile(jsonFilename, 'utf8'))

const unwrap = _ => _.substring(1, _.length - 1) // remove backticks

json.modules[0].declarations[0].cssProperties = cssData.map(([name, value, darkValue, comment]) => {
return {
name: unwrap(name),
description: `${comment} (default: ${value}${darkValue ? `, dark default: ${darkValue}` : ''})`.trim(),
default: JSON.stringify(unwrap(value))
}
})
await writeFile(jsonFilename, JSON.stringify(json, null, 2), 'utf8')
}

async function main () {
const css = sass.renderSync({ file: './src/picker/styles/variables.scss' }).css.toString('utf8')

const markdown = await generateMarkdownTable(css)
const cssData = await generateCssVariablesData(css)
const markdown = generateMarkdownTable(cssData)
await replaceInReadme(START_MARKER, END_MARKER, markdown)
await replaceInCustomElementsJson(cssData)
}

main().catch(err => {
232 changes: 232 additions & 0 deletions custom-elements.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,232 @@
{
"schemaVersion": "1.0.0",
"readme": "",
"modules": [
{
"kind": "javascript-module",
"path": "picker.js",
"declarations": [
{
"kind": "class",
"description": "Lightweight emoji picker distributed as a web component",
"name": "Picker",
"superclass": {
"name": "HTMLElement"
},
"tagName": "emoji-picker",
"customElement": true,
"attributes": [
{
"name": "locale",
"description": "Locale string",
"type": "string",
"default": "\"en\""
},
{
"name": "data-source",
"description": "URL to fetch the emoji data from",
"type": "string",
"default": "\"https://cdn.jsdelivr.net/npm/emoji-picker-element-data@^1/en/emojibase/data.json\""
},
{
"name": "skin-tone-emoji",
"description": "The emoji to use for the skin tone picker",
"type": "string",
"default": "\"🖐\""
}
],
"members": [
{
"name": "locale",
"description": "Locale string",
"kind": "field",
"default": "\"en\""
},
{
"name": "dataSource",
"description": "URL to fetch the emoji data from",
"kind": "field",
"default": "\"https://cdn.jsdelivr.net/npm/emoji-picker-element-data@^1/en/emojibase/data.json\""
},
{
"name": "skinToneEmoji",
"description": "The emoji to use for the skin tone picker",
"kind": "field",
"default": "\"🖐\""
},
{
"name": "i18n",
"description": "i18n object",
"kind": "field"
},
{
"name": "customEmoji",
"description": "Array of custom emoji",
"kind": "field"
},
{
"name": "customCategorySorting",
"description": "Function to sort custom category strings (sorted alphabetically by default)",
"kind": "field"
}
],
"events": [
{
"name": "skin-tone-change",
"description": "This event is fired whenever the user selects a new skin tone."
},
{
"name": "emoji-click",
"description": "The `emoji-click` event is fired when an emoji is selected by the user."
}
],
"cssProperties": [
{
"name": "--background",
"description": "Background of the entire `<emoji-picker>` (default: `#fff`, dark default: `#222`)",
"default": "\"#fff\""
},
{
"name": "--border-color",
"description": "(default: `#e0e0e0`, dark default: `#444`)",
"default": "\"#e0e0e0\""
},
{
"name": "--border-size",
"description": "Width of border used in most of the picker (default: `1px`)",
"default": "\"1px\""
},
{
"name": "--button-active-background",
"description": "Background of an active button (default: `#e6e6e6`, dark default: `#555555`)",
"default": "\"#e6e6e6\""
},
{
"name": "--button-hover-background",
"description": "Background of a hovered button (default: `#d9d9d9`, dark default: `#484848`)",
"default": "\"#d9d9d9\""
},
{
"name": "--category-emoji-padding",
"description": "Vertical/horizontal padding on category emoji, if you want it to be different from `--emoji-padding` (default: `var(--emoji-padding)`)",
"default": "\"var(--emoji-padding)\""
},
{
"name": "--category-emoji-size",
"description": "Width/height of category emoji, if you want it to be different from `--emoji-size` (default: `var(--emoji-size)`)",
"default": "\"var(--emoji-size)\""
},
{
"name": "--category-font-color",
"description": "Font color of custom emoji category headings (default: `#111`, dark default: `#efefef`)",
"default": "\"#111\""
},
{
"name": "--category-font-size",
"description": "Font size of custom emoji category headings (default: `1rem`)",
"default": "\"1rem\""
},
{
"name": "--emoji-padding",
"description": "Vertical and horizontal padding on emoji (default: `0.5rem`)",
"default": "\"0.5rem\""
},
{
"name": "--emoji-size",
"description": "Width and height of all emoji (default: `1.375rem`)",
"default": "\"1.375rem\""
},
{
"name": "--indicator-color",
"description": "Color of the nav indicator (default: `#385ac1`, dark default: `#5373ec`)",
"default": "\"#385ac1\""
},
{
"name": "--indicator-height",
"description": "Height of the nav indicator (default: `3px`)",
"default": "\"3px\""
},
{
"name": "--input-border-color",
"description": "(default: `#999`, dark default: `#ccc`)",
"default": "\"#999\""
},
{
"name": "--input-border-radius",
"description": "(default: `0.5rem`)",
"default": "\"0.5rem\""
},
{
"name": "--input-border-size",
"description": "(default: `1px`)",
"default": "\"1px\""
},
{
"name": "--input-font-color",
"description": "(default: `#111`, dark default: `#efefef`)",
"default": "\"#111\""
},
{
"name": "--input-font-size",
"description": "(default: `1rem`)",
"default": "\"1rem\""
},
{
"name": "--input-line-height",
"description": "(default: `1.5`)",
"default": "\"1.5\""
},
{
"name": "--input-padding",
"description": "(default: `0.25rem`)",
"default": "\"0.25rem\""
},
{
"name": "--input-placeholder-color",
"description": "(default: `#999`, dark default: `#ccc`)",
"default": "\"#999\""
},
{
"name": "--num-columns",
"description": "How many columns to display in the emoji grid (default: `8`)",
"default": "\"8\""
},
{
"name": "--outline-color",
"description": "Focus outline color (default: `#999`, dark default: `#fff`)",
"default": "\"#999\""
},
{
"name": "--outline-size",
"description": "Focus outline width (default: `2px`)",
"default": "\"2px\""
},
{
"name": "--skintone-border-radius",
"description": "Border radius of the skintone dropdown (default: `1rem`)",
"default": "\"1rem\""
}
]
}
],
"exports": [
{
"kind": "custom-element-definition",
"name": "emoji-picker",
"declaration": {
"name": "Picker",
"module": "picker.js"
}
},
{
"kind": "js",
"name": "default",
"declaration": {
"name": "Picker",
"module": "picker.js"
}
}
]
}
]
}
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -6,13 +6,15 @@
"module": "index.js",
"types": "index.d.ts",
"type": "module",
"customElements": "custom-elements.json",
"files": [
"database.js*",
"index.js*",
"picker.js*",
"trimEmojiData.*",
"svelte.js*",
"*.d.ts"
"*.d.ts",
"custom-elements.json"
],
"scripts": {
"prepare": "run-s build",

0 comments on commit fd3e0f3

Please sign in to comment.