From 5e7604605569664a90212a48a6037c6b50a34264 Mon Sep 17 00:00:00 2001 From: atanasster Date: Wed, 17 Feb 2021 17:52:39 -0500 Subject: [PATCH] feat: components history and catalog --- .vscode/launch.json | 4 +- .../test/__snapshots__/stories.test.ts.snap | 14 +- core/core/src/common.ts | 5 + core/core/src/components.ts | 11 + core/core/src/controls-utils.ts | 1 + core/core/src/files.ts | 81 + core/core/src/index.ts | 1 + core/core/src/utility.ts | 5 + core/instrument/package.json | 4 + .../instrument/src/babel/extract-component.ts | 21 +- core/instrument/src/index.ts | 8 +- core/instrument/src/misc/chached-file.ts | 55 + core/instrument/src/misc/file-info.ts | 95 + core/instrument/src/misc/package-info.ts | 3 + core/instrument/src/misc/props-info.ts | 44 +- .../test/__snapshots__/esm-async.test.ts.snap | 32 +- .../__snapshots__/esm-components.test.ts.snap | 97 +- .../test/__snapshots__/esm-doc.test.ts.snap | 40 +- .../__snapshots__/esm-hoisted.test.ts.snap | 28 +- .../esm-named-exports.test.ts.snap | 24 +- .../__snapshots__/esm-parameters.test.ts.snap | 28 +- .../esm-props-info-external.test.ts.snap | 25 +- .../__snapshots__/esm-props-info.test.ts.snap | 275 +- .../esm-props-usage.test.ts.snap | 112 +- .../__snapshots__/esm-stories.test.ts.snap | 72 +- .../esm-story-source.test.ts.snap | 20 +- .../__snapshots__/esm-template.test.ts.snap | 50 +- .../__snapshots__/esm-toggle.test.ts.snap | 8 +- .../extract-component.test.ts.snap | 156 + .../extract-props-info.test.ts.snap | 34 +- .../test/__snapshots__/mdx-async.test.ts.snap | 8 +- .../__snapshots__/mdx-component.test.ts.snap | 126 +- .../__snapshots__/mdx-playground.test.ts.snap | 36 +- .../__snapshots__/mdx-stories.test.ts.snap | 77 +- .../mdx-story-source.test.ts.snap | 20 +- .../__snapshots__/mdx-template.test.ts.snap | 8 +- .../__snapshots__/package-info.test.ts.snap | 5 + core/instrument/test/file-info.test.ts | 34 + core/store/src/serialization/load-store.ts | 2 + .../react-typescript.test.ts.snap | 414 +- core/webpack-configs/src/react/index.ts | 2 +- .../tests/__snapshots__/react.test.ts.snap | 2 +- .../custom-pages-storybook-6/package.json | 6 +- examples/gatsby/.config/buildtime.js | 4 +- examples/gatsby/.config/runtime.tsx | 65 +- examples/gatsby/package.json | 4 +- examples/nextjs/.config/buildtime.js | 4 +- examples/nextjs/.config/runtime.tsx | 8 +- examples/nextjs/package.json | 4 +- examples/stories/src/catalogs/Meta.jsx | 1 + examples/stories/src/catalogs/app.mdx | 21 + examples/stories/src/catalogs/blocks.mdx | 32 + examples/stories/src/catalogs/components.mdx | 37 + examples/stories/src/catalogs/editors.mdx | 22 + examples/stories/src/catalogs/plugins.mdx | 16 + .../stories/src/components/VariantButton.tsx | 17 +- examples/stories/src/pages/home-page.mdx | 2 +- .../template-doc.stories.tsx | 0 .../getting-started/external-libraries.mdx | 4 +- .../storybook-6-no-docs/.storybook/main.js | 5 +- .../storybook-6-no-docs/.storybook/preview.js | 18 +- examples/storybook-6-no-docs/package.json | 2 +- examples/storybook-6/.storybook/main.js | 4 +- examples/storybook-6/.storybook/preview.js | 18 +- examples/storybook-6/package.json | 4 +- .../gatsby-theme-stories/src/pages/404.tsx | 6 +- integrations/storybook/package.json | 6 +- misc/storybook-custom-docs/package.json | 8 +- plugins/addon-catalog/.config/buildtime.js | 5 + plugins/addon-catalog/.eslintignore | 1 + plugins/addon-catalog/CHANGELOG.md | 163 + plugins/addon-catalog/LICENSE.md | 21 + plugins/addon-catalog/README.md | 195 + plugins/addon-catalog/package.json | 60 + plugins/addon-catalog/rollup.config.js | 5 + plugins/addon-catalog/src/Catalog/Catalog.tsx | 22 + plugins/addon-catalog/src/Catalog/index.ts | 1 + .../src/ComponentCard/ComponentCard.tsx | 152 + .../addon-catalog/src/ComponentCard/index.ts | 1 + .../src/ComponentFilter/ComponentFilter.tsx | 63 + .../src/ComponentFilter/index.ts | 1 + .../src/ComponentList/ComponentList.tsx | 41 + .../addon-catalog/src/ComponentList/index.ts | 1 + .../ComponentsCatalog/ComponentsCatalog.tsx | 232 + .../src/ComponentsCatalog/index.ts | 1 + .../src/context/ComponentCatalogContext.tsx | 48 + plugins/addon-catalog/src/context/index.ts | 1 + plugins/addon-catalog/src/index.ts | 6 + .../src/stories/Catalog.stories.tsx | 21 + .../src/stories/ComponentCard.stories.tsx | 21 + .../src/stories/ComponentFilter.stories.tsx | 18 + .../src/stories/ComponentList.stories.tsx | 28 + .../src/stories/ComponentsCatalog.stories.tsx | 21 + .../tests/__snapshots__/stories.test.js.snap | 1193 ++ plugins/addon-catalog/tsconfig.json | 15 + plugins/addon-images/.eslintignore | 1 + .../src/stories/ImagesBlock.stories.tsx | 1 + plugins/addon-notes/.eslintignore | 1 + .../src/stories/NotesBlock.stories.tsx | 1 + .../src/stories/AttributeUsage.stories.tsx | 1 + .../AttributesUsageDetails.stories.tsx | 1 + .../stories/AttributesUsageList.stories.tsx | 1 + .../src/stories/ComponentUsage.stories.tsx | 1 + .../stories/ComponentUsageDetails.stories.tsx | 1 + .../stories/ComponentUsageList.stories.tsx | 1 + .../src/stories/AllyBlock.stories.tsx | 1 + .../src/stories/FigmaEmbedBlock.stories.tsx | 1 + plugins/figma-embed/.eslintignore | 1 + .../src/stories/FigmaEmbedBlock.stories.tsx | 1 + .../src/stories/ViewportBlock.stories.tsx | 1 + .../tests/__snapshots__/stories.test.js.snap | 4 +- .../test/__snapshots__/extends.test.ts.snap | 5 +- .../test/__snapshots__/full.test.ts.snap | 12 +- .../test/__snapshots__/imports.test.ts.snap | 12 +- .../test/__snapshots__/jsx.test.ts.snap | 5 +- .../test/__snapshots__/other.test.ts.snap | 1 + .../test/fixtures/full/typescript.tsx | 7 + .../test/loadTestFiles.ts | 3 +- ui/app/src/App/App.stories.tsx | 1 + ui/app/src/AppError/AppError.stories.tsx | 1 + .../src/CategoryList/CategoryList.stories.tsx | 1 + ui/app/src/CategoryList/CategoryList.tsx | 5 +- .../src/CategoryPage/CategoryPage.stories.tsx | 1 + ui/app/src/CategoryPage/CategoryPage.tsx | 6 +- ui/app/src/Container/Container.stories.tsx | 1 + ui/app/src/DocPage/DocPage.stories.tsx | 1 + .../DocumentHomePage.stories.tsx | 1 + .../src/DocumentHomePage/DocumentHomePage.tsx | 5 +- .../DocumentsList/DocumentsList.stories.tsx | 1 + ui/app/src/Footer/Footer.stories.tsx | 1 + ui/app/src/Header/Header.stories.tsx | 1 + ui/app/src/Sidebar/Sidebar.stories.tsx | 1 + .../src/SidebarsPage/SidebarsPage.stories.tsx | 1 + .../tests/__snapshots__/stories.test.js.snap | 548 +- ui/blocks/.eslintignore | 3 +- .../ComponentContributors.stories.tsx | 23 + .../ComponentContributors.tsx | 57 + ui/blocks/src/ComponentContributors/index.ts | 1 + .../ComponentDependencies.tsx | 67 - .../ComponentDeps.stories.tsx | 17 - .../ComponentExternalDependencies.tsx | 128 + .../ComponentLocalDependencies.tsx | 94 + .../ExternalDependencies.stories.tsx | 13 + .../ExternalDependencies.tsx | 140 +- .../LocalDependencies.stories.tsx | 13 + .../LocalDependencies.tsx | 105 +- ui/blocks/src/ComponentDependencies/index.ts | 4 +- ui/blocks/src/ComponentDependencies/types.ts | 6 + .../src/ComponentJSX/ComponentJSX.stories.tsx | 1 + .../src/ComponentJSX/ComponentJSXTree.tsx | 5 +- .../ComponentSource/BaseComponentSource.tsx | 54 +- .../ComponentSource.stories.tsx | 1 + .../src/ComponentStats/ComponentStats.tsx | 40 + ui/blocks/src/ComponentStats/index.ts | 1 + ui/blocks/src/Container/Container.stories.tsx | 1 + ui/blocks/src/Container/Container.tsx | 2 +- .../src/Description/Description.stories.tsx | 1 + .../src/DocumentItem/DocumentItem.stories.tsx | 1 + ui/blocks/src/EditPage/EditPage.stories.tsx | 1 + ui/blocks/src/PackageLink/PackageLink.tsx | 9 +- ui/blocks/src/PackageLink/PackageVersion.tsx | 2 +- .../PageContainer/PageContainer.stories.tsx | 1 + .../src/PageTypeTag/PageTypeTag.stories.tsx | 1 + .../src/Pagination/Pagination.stories.tsx | 1 + .../src/Playground/Playground.stories.tsx | 1 + .../src/PropsTable/PropsTable.stories.tsx | 1 + ui/blocks/src/Search/Search.stories.tsx | 1 + ui/blocks/src/Stories/Stories.stories.tsx | 1 + ui/blocks/src/Story/Story.stories.tsx | 1 + .../src/StoryConfig/StoryConfig.stories.tsx | 1 + .../src/StorySource/StorySource.stories.tsx | 1 + ui/blocks/src/Subtitle/Subtitle.stories.tsx | 1 + ui/blocks/src/TagsList/TagsList.stories.tsx | 1 + ui/blocks/src/Title/Title.stories.tsx | 1 + ui/blocks/src/Title/Title.tsx | 35 +- ui/blocks/src/index.ts | 2 + ui/blocks/src/test/storyStore.tsx | 22 +- .../tests/__snapshots__/stories.test.js.snap | 1459 +- ui/components/.eslintignore | 3 +- ui/components/README.md | 2 +- ui/components/package.json | 2 + .../src/ActionBar/ActionBar.stories.tsx | 2 + ui/components/src/ActionBar/ActionBar.tsx | 6 +- .../ActionContainer.stories.tsx | 33 +- .../src/ActionContainer/ActionContainer.tsx | 2 +- .../BlockContainer/BlockContainer.stories.tsx | 1 + .../src/BlockContainer/BlockContainer.tsx | 2 +- .../src/Collapsible/Collapsible.stories.tsx | 5 +- ui/components/src/Collapsible/Collapsible.tsx | 2 +- .../src/ColorMode/ColorMode.stories.tsx | 1 + ui/components/src/ColorMode/ColorMode.tsx | 2 +- .../CopyContainer/CopyContainer.stories.tsx | 1 + .../src/CopyContainer/CopyContainer.tsx | 2 +- .../src/Description/Description.stories.tsx | 1 + .../src/ExternalLink/ExternalLink.stories.tsx | 1 + .../src/ExternalLink/ExternalLink.tsx | 2 +- .../src/GithubAvatarList/GithubAvatarItem.tsx | 150 + .../GithubAvatarList.stories.tsx | 36 + .../src/GithubAvatarList/GithubAvatarList.tsx | 71 + ui/components/src/GithubAvatarList/index.ts | 1 + .../src/GithubAvatarList/useGithubProfile.tsx | 71 + ui/components/src/Header/Header.stories.tsx | 1 + .../src/HoverBox/HoverBox.stories.tsx | 1 + ui/components/src/HoverBox/HoverBox.tsx | 2 +- ui/components/src/Link/Link.stories.tsx | 1 + ui/components/src/Link/Link.tsx | 3 + .../src/LinkHeading/LinkHeading.stories.tsx | 5 +- ui/components/src/LinkHeading/LinkHeading.tsx | 2 +- .../src/Markdown/Markdown.stories.tsx | 1 + ui/components/src/Markdown/Markdown.tsx | 2 +- .../src/Multiselect/Multiselect.stories.tsx | 1 + ui/components/src/Multiselect/Multiselect.tsx | 2 +- .../src/Pagination/Pagination.stories.tsx | 24 +- ui/components/src/Pagination/Pagination.tsx | 2 +- .../PanelContainer/PanelContainer.stories.tsx | 13 +- .../src/PanelContainer/PanelContainer.tsx | 2 +- ui/components/src/Popover/Popover.stories.tsx | 1 + ui/components/src/Popover/Popover.tsx | 11 +- .../ProgressIndicator.stories.tsx | 7 +- .../ProgressIndicator/ProgressIndicator.tsx | 4 + .../src/SearchInput/SearchInput.stories.tsx | 1 + ui/components/src/SearchInput/SearchInput.tsx | 4 +- ui/components/src/Sidebar/Sidebar.stories.tsx | 1 + ui/components/src/Source/Source.stories.tsx | 1 + ui/components/src/Subheading/Subheading.tsx | 15 - .../src/Subheading/Subjeading.stories.tsx | 16 - ui/components/src/Subheading/index.ts | 1 - .../src/Subtitle/Subtitle.stories.tsx | 1 + .../SyntaxHighlighter.stories.tsx | 1 + .../SyntaxHighlighter/SyntaxHighlighter.tsx | 2 +- ui/components/src/Table/Table.stories.tsx | 1 + ui/components/src/Table/Table.tsx | 2 +- ui/components/src/Tabs/Tabs.stories.tsx | 1 + ui/components/src/Tabs/Tabs.tsx | 2 +- ui/components/src/Tag/Tag.stories.tsx | 1 + ui/components/src/Tag/Tag.tsx | 2 +- ui/components/src/ThemeContext/theme.ts | 12 +- ui/components/src/Title/Title.stories.tsx | 16 - ui/components/src/Title/Title.tsx | 19 - ui/components/src/Title/index.ts | 1 - .../src/TitledImage/TitledImage.stories.tsx | 1 + ui/components/src/TitledImage/TitledImage.tsx | 2 +- ui/components/src/Toggle/Toggle.stories.tsx | 1 + ui/components/src/Tree/Tree.stories.tsx | 5 +- ui/components/src/Value/Value.stories.tsx | 1 + ui/components/src/Value/Value.tsx | 10 +- ui/components/src/Zoom/Zoom.stories.tsx | 47 +- ui/components/src/Zoom/Zoom.tsx | 2 +- ui/components/src/index.ts | 3 +- .../tests/__snapshots__/stories.test.js.snap | 3846 ++--- .../tests/__snapshots__/stories.test.js.snap | 1371 +- .../tests/__snapshots__/stories.test.js.snap | 16 +- ui/pages/src/pages/ClassicPage.tsx | 8 +- ui/pages/src/pages/ComponentPage.tsx | 8 +- yarn.lock | 12052 +++++++--------- 255 files changed, 14939 insertions(+), 10721 deletions(-) create mode 100644 core/core/src/files.ts create mode 100644 core/instrument/src/misc/chached-file.ts create mode 100644 core/instrument/src/misc/file-info.ts create mode 100644 core/instrument/test/file-info.test.ts create mode 100644 examples/stories/src/catalogs/Meta.jsx create mode 100644 examples/stories/src/catalogs/app.mdx create mode 100644 examples/stories/src/catalogs/blocks.mdx create mode 100644 examples/stories/src/catalogs/components.mdx create mode 100644 examples/stories/src/catalogs/editors.mdx create mode 100644 examples/stories/src/catalogs/plugins.mdx rename examples/stories/src/{stories => stories_native}/template-doc.stories.tsx (100%) create mode 100644 plugins/addon-catalog/.config/buildtime.js create mode 100644 plugins/addon-catalog/.eslintignore create mode 100644 plugins/addon-catalog/CHANGELOG.md create mode 100644 plugins/addon-catalog/LICENSE.md create mode 100644 plugins/addon-catalog/README.md create mode 100644 plugins/addon-catalog/package.json create mode 100644 plugins/addon-catalog/rollup.config.js create mode 100644 plugins/addon-catalog/src/Catalog/Catalog.tsx create mode 100644 plugins/addon-catalog/src/Catalog/index.ts create mode 100644 plugins/addon-catalog/src/ComponentCard/ComponentCard.tsx create mode 100644 plugins/addon-catalog/src/ComponentCard/index.ts create mode 100644 plugins/addon-catalog/src/ComponentFilter/ComponentFilter.tsx create mode 100644 plugins/addon-catalog/src/ComponentFilter/index.ts create mode 100644 plugins/addon-catalog/src/ComponentList/ComponentList.tsx create mode 100644 plugins/addon-catalog/src/ComponentList/index.ts create mode 100644 plugins/addon-catalog/src/ComponentsCatalog/ComponentsCatalog.tsx create mode 100644 plugins/addon-catalog/src/ComponentsCatalog/index.ts create mode 100644 plugins/addon-catalog/src/context/ComponentCatalogContext.tsx create mode 100644 plugins/addon-catalog/src/context/index.ts create mode 100644 plugins/addon-catalog/src/index.ts create mode 100644 plugins/addon-catalog/src/stories/Catalog.stories.tsx create mode 100644 plugins/addon-catalog/src/stories/ComponentCard.stories.tsx create mode 100644 plugins/addon-catalog/src/stories/ComponentFilter.stories.tsx create mode 100644 plugins/addon-catalog/src/stories/ComponentList.stories.tsx create mode 100644 plugins/addon-catalog/src/stories/ComponentsCatalog.stories.tsx create mode 100644 plugins/addon-catalog/tests/__snapshots__/stories.test.js.snap create mode 100644 plugins/addon-catalog/tsconfig.json create mode 100644 plugins/addon-images/.eslintignore create mode 100644 plugins/addon-notes/.eslintignore create mode 100644 plugins/figma-embed/.eslintignore create mode 100644 ui/blocks/src/ComponentContributors/ComponentContributors.stories.tsx create mode 100644 ui/blocks/src/ComponentContributors/ComponentContributors.tsx create mode 100644 ui/blocks/src/ComponentContributors/index.ts delete mode 100644 ui/blocks/src/ComponentDependencies/ComponentDependencies.tsx delete mode 100644 ui/blocks/src/ComponentDependencies/ComponentDeps.stories.tsx create mode 100644 ui/blocks/src/ComponentDependencies/ComponentExternalDependencies.tsx create mode 100644 ui/blocks/src/ComponentDependencies/ComponentLocalDependencies.tsx create mode 100644 ui/blocks/src/ComponentDependencies/ExternalDependencies.stories.tsx create mode 100644 ui/blocks/src/ComponentDependencies/LocalDependencies.stories.tsx create mode 100644 ui/blocks/src/ComponentDependencies/types.ts create mode 100644 ui/blocks/src/ComponentStats/ComponentStats.tsx create mode 100644 ui/blocks/src/ComponentStats/index.ts create mode 100644 ui/components/src/GithubAvatarList/GithubAvatarItem.tsx create mode 100644 ui/components/src/GithubAvatarList/GithubAvatarList.stories.tsx create mode 100644 ui/components/src/GithubAvatarList/GithubAvatarList.tsx create mode 100644 ui/components/src/GithubAvatarList/index.ts create mode 100644 ui/components/src/GithubAvatarList/useGithubProfile.tsx delete mode 100644 ui/components/src/Subheading/Subheading.tsx delete mode 100644 ui/components/src/Subheading/Subjeading.stories.tsx delete mode 100644 ui/components/src/Subheading/index.ts delete mode 100644 ui/components/src/Title/Title.stories.tsx delete mode 100644 ui/components/src/Title/Title.tsx delete mode 100644 ui/components/src/Title/index.ts diff --git a/.vscode/launch.json b/.vscode/launch.json index ee1f22dee..9e449c482 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -112,7 +112,7 @@ "name": "jest instrument", "program": "${workspaceFolder}/node_modules/.bin/jest", "cwd": "${workspaceFolder}/core/instrument", - "args": ["mdx-story-source"], + "args": ["file-info"], "console": "integratedTerminal", "internalConsoleOptions": "neverOpen", "disableOptimisticBPs": true, @@ -126,7 +126,7 @@ "name": "jest react-docgen-typescript", "program": "${workspaceFolder}/node_modules/.bin/jest", "cwd": "${workspaceFolder}/props-info/react-docgen-typescript", - "args": ["extends"], + "args": ["full"], "console": "integratedTerminal", "internalConsoleOptions": "neverOpen", "disableOptimisticBPs": true, diff --git a/core/config/test/__snapshots__/stories.test.ts.snap b/core/config/test/__snapshots__/stories.test.ts.snap index e99c54813..510730d75 100644 --- a/core/config/test/__snapshots__/stories.test.ts.snap +++ b/core/config/test/__snapshots__/stories.test.ts.snap @@ -21,6 +21,7 @@ Array [ "/Users/atanasster/component-controls/ui/components/src/CopyContainer/CopyContainer.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/Description/Description.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/ExternalLink/ExternalLink.stories.tsx", + "/Users/atanasster/component-controls/ui/components/src/GithubAvatarList/GithubAvatarList.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/Header/Header.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/HoverBox/HoverBox.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/Link/Link.stories.tsx", @@ -34,19 +35,19 @@ Array [ "/Users/atanasster/component-controls/ui/components/src/SearchInput/SearchInput.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/Sidebar/Sidebar.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/Source/Source.stories.tsx", - "/Users/atanasster/component-controls/ui/components/src/Subheading/Subjeading.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/Subtitle/Subtitle.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/SyntaxHighlighter/SyntaxHighlighter.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/Table/Table.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/Tabs/Tabs.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/Tag/Tag.stories.tsx", - "/Users/atanasster/component-controls/ui/components/src/Title/Title.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/TitledImage/TitledImage.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/Toggle/Toggle.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/Tree/Tree.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/Value/Value.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/Zoom/Zoom.stories.tsx", - "/Users/atanasster/component-controls/ui/blocks/src/ComponentDependencies/ComponentDeps.stories.tsx", + "/Users/atanasster/component-controls/ui/blocks/src/ComponentContributors/ComponentContributors.stories.tsx", + "/Users/atanasster/component-controls/ui/blocks/src/ComponentDependencies/ExternalDependencies.stories.tsx", + "/Users/atanasster/component-controls/ui/blocks/src/ComponentDependencies/LocalDependencies.stories.tsx", "/Users/atanasster/component-controls/ui/blocks/src/ComponentJSX/ComponentJSX.stories.tsx", "/Users/atanasster/component-controls/ui/blocks/src/ComponentSource/ComponentSource.stories.tsx", "/Users/atanasster/component-controls/ui/blocks/src/Container/Container.stories.tsx", @@ -99,6 +100,7 @@ Array [ "/Users/atanasster/component-controls/ui/components/src/CopyContainer/CopyContainer.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/Description/Description.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/ExternalLink/ExternalLink.stories.tsx", + "/Users/atanasster/component-controls/ui/components/src/GithubAvatarList/GithubAvatarList.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/Header/Header.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/HoverBox/HoverBox.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/Link/Link.stories.tsx", @@ -112,19 +114,19 @@ Array [ "/Users/atanasster/component-controls/ui/components/src/SearchInput/SearchInput.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/Sidebar/Sidebar.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/Source/Source.stories.tsx", - "/Users/atanasster/component-controls/ui/components/src/Subheading/Subjeading.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/Subtitle/Subtitle.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/SyntaxHighlighter/SyntaxHighlighter.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/Table/Table.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/Tabs/Tabs.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/Tag/Tag.stories.tsx", - "/Users/atanasster/component-controls/ui/components/src/Title/Title.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/TitledImage/TitledImage.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/Toggle/Toggle.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/Tree/Tree.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/Value/Value.stories.tsx", "/Users/atanasster/component-controls/ui/components/src/Zoom/Zoom.stories.tsx", - "/Users/atanasster/component-controls/ui/blocks/src/ComponentDependencies/ComponentDeps.stories.tsx", + "/Users/atanasster/component-controls/ui/blocks/src/ComponentContributors/ComponentContributors.stories.tsx", + "/Users/atanasster/component-controls/ui/blocks/src/ComponentDependencies/ExternalDependencies.stories.tsx", + "/Users/atanasster/component-controls/ui/blocks/src/ComponentDependencies/LocalDependencies.stories.tsx", "/Users/atanasster/component-controls/ui/blocks/src/ComponentJSX/ComponentJSX.stories.tsx", "/Users/atanasster/component-controls/ui/blocks/src/ComponentSource/ComponentSource.stories.tsx", "/Users/atanasster/component-controls/ui/blocks/src/Container/Container.stories.tsx", diff --git a/core/core/src/common.ts b/core/core/src/common.ts index edfdcd681..5047b40da 100644 --- a/core/core/src/common.ts +++ b/core/core/src/common.ts @@ -54,4 +54,9 @@ export interface StoryProps { * plugins configuration settings */ plugins?: any; + + /** + * category string - can be used for cleanly separating stories/components + */ + category?: string; } diff --git a/core/core/src/components.ts b/core/core/src/components.ts index dcf3c5c37..1eb290ad1 100644 --- a/core/core/src/components.ts +++ b/core/core/src/components.ts @@ -1,4 +1,5 @@ import { CodeLocation, ImportType, Imports } from './utility'; +import { FileInfo } from './files'; export type TypeValue = | 'any' @@ -126,6 +127,11 @@ export interface Component { */ request?: string; + /** + * file name with extension + */ + fileName?: string; + /** * file containing the component's props info * sometimes different from the component source file @@ -165,6 +171,11 @@ export interface Component { * jsx component tree */ jsx?: JSXTree; + + /** + * source file info + */ + fileInfo?: FileInfo; } /** * given a component, return its name diff --git a/core/core/src/controls-utils.ts b/core/core/src/controls-utils.ts index 44e8d313c..d2dac8d74 100644 --- a/core/core/src/controls-utils.ts +++ b/core/core/src/controls-utils.ts @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/explicit-module-boundary-types */ import escape from 'escape-html'; import { deepmerge } from './deepMerge'; import { diff --git a/core/core/src/files.ts b/core/core/src/files.ts new file mode 100644 index 000000000..b74b278d1 --- /dev/null +++ b/core/core/src/files.ts @@ -0,0 +1,81 @@ +/** + * git commits fields + */ +export interface Commit { + commitHash?: string; + subject?: string; + authorName?: string; + authorData?: string; + authorEmail?: string; + committerName?: string; + committerDate?: string; + committerEmail?: string; +} + +export type Commits = Commit[]; + +export interface FileInfo { + /** + * date file created + */ + dateCreated?: Date; + + /** + * date last modified + */ + dateModified?: Date; + + /** + * git commits for the file + */ + commits?: Commits; + /** + * number of lines of code + */ + sloc?: { + /** + * lines of block comments + */ + block: number; + + /** + * empty lines of block comments + */ + + blockEmpty: number; + /** + * total lines of comments + */ + comment: number; + + /** + * empty lines + */ + empty: number; + + /** + * lines mixed up with source and comments + */ + mixed: number; + + /** + * lines with single-line comments + */ + single: number; + + /** + * lines of code (source) + */ + source: number; + + /** + * lines with TODO's + */ + todo: number; + + /** + * physical total lines + */ + total: number; + }; +} diff --git a/core/core/src/index.ts b/core/core/src/index.ts index d756c2feb..01bf673e4 100644 --- a/core/core/src/index.ts +++ b/core/core/src/index.ts @@ -8,6 +8,7 @@ export * from './deepMerge'; export * from './propsInfo'; export * from './document'; export * from './document-utils'; +export * from './files'; export * from './utility'; export { randomizeData, canRandomizeControl } from './controls-randomize'; export * from './controls-smart'; diff --git a/core/core/src/utility.ts b/core/core/src/utility.ts index c954d92ff..5a2556156 100644 --- a/core/core/src/utility.ts +++ b/core/core/src/utility.ts @@ -86,6 +86,11 @@ export interface PackageInfo { */ peerDependencies?: PackageDependencies; + /** + * if false, the package is not published to npm + */ + privateNpm?: boolean; + /** * repository information extracted from the "repository" field in package.json. */ diff --git a/core/instrument/package.json b/core/instrument/package.json index 6753286dd..85642a6e0 100644 --- a/core/instrument/package.json +++ b/core/instrument/package.json @@ -40,14 +40,17 @@ "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5" }, "devDependencies": { @@ -57,6 +60,7 @@ "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2" diff --git a/core/instrument/src/babel/extract-component.ts b/core/instrument/src/babel/extract-component.ts index 35db313af..d8fbfb4f6 100644 --- a/core/instrument/src/babel/extract-component.ts +++ b/core/instrument/src/babel/extract-component.ts @@ -13,6 +13,7 @@ import { followImports } from './follow-imports'; import { analyze_components } from './analyze-component'; import { packageInfo } from '../misc/package-info'; import { readSourceFile } from '../misc/source-options'; +import { getFileIinfo } from '../misc/file-info'; import { LoadingDocStore, InstrumentOptions } from '../types'; @@ -108,15 +109,7 @@ export const extractComponent = async ( } component.request = follow.filePath; - if (components && typeof components.resolvePropsFile === 'function') { - const propsFile = components.resolvePropsFile( - componentName, - follow.filePath, - ); - if (propsFile !== component.request) { - component.propsInfoFile = propsFile; - } - } + component.fileName = path.basename(follow.filePath); const saveSource = readSourceFile( components?.sourceFiles, follow.source, @@ -127,6 +120,16 @@ export const extractComponent = async ( component.source = saveSource; component.loc = follow.loc; } + component.fileInfo = await getFileIinfo(follow.filePath, saveSource); + if (components && typeof components.resolvePropsFile === 'function') { + const propsFile = components.resolvePropsFile( + componentName, + follow.filePath, + ); + if (propsFile !== component.request) { + component.propsInfoFile = propsFile; + } + } } componentPackage = await packageInfo( componentName, diff --git a/core/instrument/src/index.ts b/core/instrument/src/index.ts index b5daf64fb..4559f3999 100644 --- a/core/instrument/src/index.ts +++ b/core/instrument/src/index.ts @@ -1,4 +1,3 @@ -import * as fs from 'fs'; import mdx from '@mdx-js/mdx'; import matter from 'gray-matter'; import { File } from '@babel/types'; @@ -20,6 +19,7 @@ import { extractStoryExports } from './misc/mdx-exports'; import { prettify } from './misc/prettify'; import { parseFile } from './misc/ast_store'; import { readSourceFile } from './misc/source-options'; +import { getFileIinfo } from './misc/file-info'; import { LoadingDocStore, InstrumentOptions, @@ -96,9 +96,9 @@ const parseSource = async ( store.packages[storyPackage.fileHash] = storyPackage; doc.package = storyPackage.fileHash; } - const stats = fs.statSync(filePath); - doc.dateModified = doc.dateModified || stats.mtime; - doc.date = doc.date || stats.birthtime; + const fileInfo = await getFileIinfo(filePath); + doc.dateModified = doc.dateModified || fileInfo.dateModified; + doc.date = doc.date || fileInfo.dateCreated; } for (const key of Object.keys(store.stories)) { const story: Story = store.stories[key]; diff --git a/core/instrument/src/misc/chached-file.ts b/core/instrument/src/misc/chached-file.ts new file mode 100644 index 000000000..b1c03b5a0 --- /dev/null +++ b/core/instrument/src/misc/chached-file.ts @@ -0,0 +1,55 @@ +import * as fs from 'fs'; +import * as path from 'path'; +import * as os from 'os'; +import { createHash } from 'crypto'; +import findCacheDir from 'find-cache-dir'; + +export class CachedFileResource { + private folderKey: string; + private fileKey: string; + private filePath: string; + + constructor(folderKey: string, fileKey: string, filePath: string) { + this.folderKey = folderKey; + this.fileKey = fileKey; + this.filePath = filePath; + } + + private getCacheFolder = () => { + const folderName = + findCacheDir({ name: `component-controls-${this.folderKey}` }) || + os.tmpdir(); + if (!fs.existsSync(folderName)) { + fs.mkdirSync(folderName, { recursive: true }); + } + return folderName; + }; + + private getCachedFile = () => { + const cachedFolder = this.getCacheFolder(); + return path.join( + cachedFolder, + createHash('md5') + .update(this.fileKey) + .digest('hex'), + ); + }; + get = (): T | undefined => { + const cachedFileName = this.getCachedFile(); + if (fs.existsSync(cachedFileName)) { + const cacheStats = fs.statSync(cachedFileName); + const fileStats = fs.statSync(this.filePath); + if (cacheStats.mtime.getTime() >= fileStats.mtime.getTime()) { + const fileData = fs.readFileSync(cachedFileName, 'utf8'); + const json = JSON.parse(fileData); + return Object.keys(json).length ? json : undefined; + } + } + return undefined; + }; + + set = (data: T | undefined): void => { + const cachedFileName = this.getCachedFile(); + fs.writeFileSync(cachedFileName, JSON.stringify(data || {})); + }; +} diff --git a/core/instrument/src/misc/file-info.ts b/core/instrument/src/misc/file-info.ts new file mode 100644 index 000000000..5b8f8133a --- /dev/null +++ b/core/instrument/src/misc/file-info.ts @@ -0,0 +1,95 @@ +import fs from 'fs'; +import path from 'path'; +import gitlog, { GitlogOptions } from 'gitlog'; +import slocAPI from 'sloc'; +import { findUpFile } from '@component-controls/core/node-utils'; +import { FileInfo } from '@component-controls/core'; +import { CachedFileResource } from './chached-file'; +export const getFileIinfo = async ( + filePath: string, + source?: string, +): Promise => { + const cached = new CachedFileResource( + 'file-stats', + filePath, + filePath, + ); + let result: FileInfo | undefined; + result = cached.get(); + if (result) { + return result; + } + const sloc = source ? slocAPI(source, 'jsx') : undefined; + const gitFolder = findUpFile(path.dirname(filePath), '.git'); + if (gitFolder) { + //try to get file stats from github + const rootFolder = path.resolve(gitFolder, '..'); + const options: GitlogOptions< + | 'hash' + | 'subject' + | 'authorName' + | 'authorDate' + | 'authorEmail' + | 'committerName' + | 'committerDate' + | 'committerEmail' + > = { + repo: rootFolder, + number: 1000, + file: path.relative(rootFolder, filePath), + fields: [ + 'hash', + 'subject', + 'authorName', + 'authorDate', + 'authorEmail', + 'committerName', + 'committerDate', + 'committerEmail', + ], + execOptions: { maxBuffer: 1000 * 1024 }, + }; + + try { + const commits = gitlog(options); + if (commits.length > 0) { + result = { + dateCreated: new Date(commits[commits.length - 1].authorDate), + dateModified: new Date(commits[0].authorDate), + sloc, + commits: commits.map( + ({ + hash, + subject, + authorName, + authorDate, + authorEmail, + committerName, + committerDate, + committerEmail, + }) => ({ + hash, + subject, + authorName, + authorDate: new Date(authorDate).toISOString(), + authorEmail, + committerName, + committerDate: new Date(committerDate).toISOString(), + committerEmail, + }), + ), + }; + cached.set(result); + return result; + } + } catch (e) {} + } + const stats = fs.statSync(filePath); + result = { + dateCreated: stats.birthtime, + dateModified: stats.mtime, + sloc, + }; + cached.set(result); + return result; +}; diff --git a/core/instrument/src/misc/package-info.ts b/core/instrument/src/misc/package-info.ts index 6a88a990c..b9d1dee06 100644 --- a/core/instrument/src/misc/package-info.ts +++ b/core/instrument/src/misc/package-info.ts @@ -73,6 +73,9 @@ export const packageInfo = async ( devDependencies, peerDependencies, }; + if (packageJSON['private']) { + result.privateNpm = true; + } if (repositoryURL) { const templates = hostedGitInfo.fromUrl(repositoryURL) || diff --git a/core/instrument/src/misc/props-info.ts b/core/instrument/src/misc/props-info.ts index 5a947dce8..f2eaff3aa 100644 --- a/core/instrument/src/misc/props-info.ts +++ b/core/instrument/src/misc/props-info.ts @@ -1,13 +1,9 @@ -import * as fs from 'fs'; -import * as path from 'path'; -import * as os from 'os'; -import { createHash } from 'crypto'; -import findCacheDir from 'find-cache-dir'; import { ComponentInfo, PropsInfoExtractorFunction, } from '@component-controls/core'; import { PropsLoaderConfig } from '../types'; +import { CachedFileResource } from './chached-file'; export const getComponentProps = async ( options: PropsLoaderConfig[], @@ -15,11 +11,6 @@ export const getComponentProps = async ( componentName?: string, source?: string, ): Promise => { - const cacheFolder = - findCacheDir({ name: 'component-controls-props-info' }) || os.tmpdir(); - if (!fs.existsSync(cacheFolder)) { - fs.mkdirSync(cacheFolder, { recursive: true }); - } const loaders = options.filter(loader => { const include = Array.isArray(loader.test) ? loader.test @@ -42,26 +33,20 @@ export const getComponentProps = async ( console.error(`Multiple propsloaders found for file ${filePath}`); } const propsLoaderName = loaders.length === 1 ? loaders[0] : undefined; - const cachedFileName = path.join( - cacheFolder, - createHash('md5') - .update( - `${filePath}-${componentName}-${ - propsLoaderName ? propsLoaderName.name : '' - }`, - ) - .digest('hex'), + + const cached = new CachedFileResource( + 'props-info', + `${filePath}-${componentName}-${ + propsLoaderName ? propsLoaderName.name : '' + }`, + filePath, ); - if (fs.existsSync(cachedFileName)) { - const cacheStats = fs.statSync(cachedFileName); - const fileStats = fs.statSync(filePath); - if (cacheStats.mtime.getTime() >= fileStats.mtime.getTime()) { - const fileData = fs.readFileSync(cachedFileName, 'utf8'); - const json = JSON.parse(fileData); - return Object.keys(json).length ? json : undefined; - } + + let result: ComponentInfo | undefined = cached.get(); + if (result) { + // already in cache and file has not changed + return result; } - let result: ComponentInfo | undefined = undefined; if (propsLoaderName) { const { run } = require(propsLoaderName.name); @@ -72,6 +57,7 @@ export const getComponentProps = async ( result = await propsLoader(filePath, componentName, source); } } - fs.writeFileSync(cachedFileName, JSON.stringify(result || {})); + // save to cache + cached.set(result); return result; }; diff --git a/core/instrument/test/__snapshots__/esm-async.test.ts.snap b/core/instrument/test/__snapshots__/esm-async.test.ts.snap index f367cacfd..e046c8d1c 100644 --- a/core/instrument/test/__snapshots__/esm-async.test.ts.snap +++ b/core/instrument/test/__snapshots__/esm-async.test.ts.snap @@ -6,8 +6,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.427Z, - "dateModified": 2020-10-21T01:23:26.427Z, + "date": "2020-10-13T05:44:51.000Z", + "dateModified": "2020-10-13T05:44:51.000Z", "package": "03e9ead294a52fb93b8bafaee7295e69", "title": "Story", }, @@ -24,14 +24,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -41,6 +44,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -86,8 +90,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.427Z, - "dateModified": 2020-10-21T01:23:26.427Z, + "date": "2020-10-13T05:44:51.000Z", + "dateModified": "2020-10-13T05:44:51.000Z", "package": "edd499a9a5eb06d2d2a7406ee10873b2", "title": "Story", }, @@ -104,14 +108,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -121,6 +128,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -182,8 +190,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.427Z, - "dateModified": 2020-10-21T01:23:26.427Z, + "date": "2020-10-13T05:44:51.000Z", + "dateModified": "2020-10-13T05:44:51.000Z", "package": "0597587489b541974c8824897528d020", "title": "Story", }, @@ -200,14 +208,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -217,6 +228,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -262,8 +274,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.427Z, - "dateModified": 2020-10-21T01:23:26.427Z, + "date": "2020-10-13T05:44:51.000Z", + "dateModified": "2020-10-13T05:44:51.000Z", "package": "c9acc309451d1827133fb0bc49b1d9c1", "title": "Story", }, @@ -280,14 +292,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -297,6 +312,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", diff --git a/core/instrument/test/__snapshots__/esm-components.test.ts.snap b/core/instrument/test/__snapshots__/esm-components.test.ts.snap index 4a3a5dc9e..a67a68621 100644 --- a/core/instrument/test/__snapshots__/esm-components.test.ts.snap +++ b/core/instrument/test/__snapshots__/esm-components.test.ts.snap @@ -12,6 +12,23 @@ Object { }, ], }, + "fileInfo": Object { + "commits": Array [ + Object { + "authorDate": "2020-03-14T17:49:39.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-14T17:49:39.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "f0b0beb616c2b86713c4064552fa39dffcd60771", + "subject": "chore: rename examples go fixtures", + }, + ], + "dateCreated": "2020-03-14T17:49:39.000Z", + "dateModified": "2020-03-14T17:49:39.000Z", + }, + "fileName": "button-default-arrow-func.js", "from": "../../components/button-default-arrow-func", "importedName": "default", "jsx": Array [ @@ -32,8 +49,8 @@ Object { "componentsLookup": Object { "Button": "ceea0565a65f75c8c7b6b355d6d335ac", }, - "date": 2020-10-21T01:23:26.427Z, - "dateModified": 2020-10-21T01:23:26.427Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "title": "Story", }, "packages": Object {}, @@ -59,6 +76,23 @@ Object { }, ], }, + "fileInfo": Object { + "commits": Array [ + Object { + "authorDate": "2020-03-14T17:49:39.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-14T17:49:39.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "f0b0beb616c2b86713c4064552fa39dffcd60771", + "subject": "chore: rename examples go fixtures", + }, + ], + "dateCreated": "2020-03-14T17:49:39.000Z", + "dateModified": "2020-03-14T17:49:39.000Z", + }, + "fileName": "button-named-arrow-func.js", "from": "../../components/button-named-arrow-func", "importedName": "Button", "jsx": Array [ @@ -81,6 +115,23 @@ Object { }, ], }, + "fileInfo": Object { + "commits": Array [ + Object { + "authorDate": "2020-03-14T17:49:39.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-14T17:49:39.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "f0b0beb616c2b86713c4064552fa39dffcd60771", + "subject": "chore: rename examples go fixtures", + }, + ], + "dateCreated": "2020-03-14T17:49:39.000Z", + "dateModified": "2020-03-14T17:49:39.000Z", + }, + "fileName": "button-default-arrow-func.js", "from": "../../components/button-default-arrow-func", "importedName": "default", "jsx": Array [ @@ -101,8 +152,8 @@ Object { "ArrowButton": "dc262d21cd7820523c7e0bacca461e87", "Button": "2f4bd34d15be236674abaf6e894afe6e", }, - "date": 2020-12-04T07:09:16.743Z, - "dateModified": 2020-12-04T07:09:16.743Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "title": "Story", }, "packages": Object {}, @@ -157,6 +208,23 @@ Object { }, ], }, + "fileInfo": Object { + "commits": Array [ + Object { + "authorDate": "2020-03-14T17:49:39.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-14T17:49:39.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "f0b0beb616c2b86713c4064552fa39dffcd60771", + "subject": "chore: rename examples go fixtures", + }, + ], + "dateCreated": "2020-03-14T17:49:39.000Z", + "dateModified": "2020-03-14T17:49:39.000Z", + }, + "fileName": "button-named-arrow-func.js", "from": "../../components/button-named-arrow-func", "importedName": "Button", "jsx": Array [ @@ -179,6 +247,23 @@ Object { }, ], }, + "fileInfo": Object { + "commits": Array [ + Object { + "authorDate": "2020-03-14T17:49:39.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-14T17:49:39.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "f0b0beb616c2b86713c4064552fa39dffcd60771", + "subject": "chore: rename examples go fixtures", + }, + ], + "dateCreated": "2020-03-14T17:49:39.000Z", + "dateModified": "2020-03-14T17:49:39.000Z", + }, + "fileName": "button-default-arrow-func.js", "from": "../../components/button-default-arrow-func", "importedName": "default", "jsx": Array [ @@ -200,8 +285,8 @@ Object { "ArrowButton": "dc262d21cd7820523c7e0bacca461e87", "Button": "2f4bd34d15be236674abaf6e894afe6e", }, - "date": 2020-10-21T01:23:26.427Z, - "dateModified": 2020-10-21T01:23:26.427Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "subcomponents": Object { "Button": "Button", }, diff --git a/core/instrument/test/__snapshots__/esm-doc.test.ts.snap b/core/instrument/test/__snapshots__/esm-doc.test.ts.snap index 5426635a6..b0535aea7 100644 --- a/core/instrument/test/__snapshots__/esm-doc.test.ts.snap +++ b/core/instrument/test/__snapshots__/esm-doc.test.ts.snap @@ -14,8 +14,8 @@ Object { "componentsLookup": Object { "ControlsTable": "73cac298d983c71aec166657453a64fe", }, - "date": 2020-10-21T01:23:26.428Z, - "dateModified": 2020-10-21T01:23:26.428Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "66a23e9fdf3e9e6ca71ed416ae8a58d5", "smartControls": Object { "smart": false, @@ -35,14 +35,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -52,6 +55,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -78,14 +82,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -95,6 +102,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -144,8 +152,8 @@ Object { "value": "Mark", }, }, - "date": 2020-10-21T01:23:26.428Z, - "dateModified": 2020-10-21T01:23:26.428Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "e194529ece324f1590bfbf7aaec14410", "title": "Storybook/Kind", }, @@ -162,14 +170,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -179,6 +190,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -205,14 +217,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -222,6 +237,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -260,8 +276,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-12-30T06:22:19.020Z, - "dateModified": 2020-12-30T06:22:19.020Z, + "date": "2020-11-15T16:00:39.000Z", + "dateModified": "2020-11-15T16:00:39.000Z", "package": "847a998ed4a715ed09a24acd70b0c848", "title": "Story", }, @@ -278,14 +294,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -295,6 +314,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -326,8 +346,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.428Z, - "dateModified": 2020-10-21T01:23:26.428Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "7eb653b10808310c21c23cba95a76b32", "title": "Storybook/Blocks/ControlsTable", }, @@ -344,14 +364,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -361,6 +384,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", diff --git a/core/instrument/test/__snapshots__/esm-hoisted.test.ts.snap b/core/instrument/test/__snapshots__/esm-hoisted.test.ts.snap index c0deac434..9ed7b024e 100644 --- a/core/instrument/test/__snapshots__/esm-hoisted.test.ts.snap +++ b/core/instrument/test/__snapshots__/esm-hoisted.test.ts.snap @@ -13,8 +13,8 @@ Object { "componentsLookup": Object { "ControlsTable": "57e65d42bacf0af9b3f4dd3fe2377cde", }, - "date": 2020-10-21T01:23:26.428Z, - "dateModified": 2020-10-21T01:23:26.428Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "f287f1a0ceeea6cbbc4c37123d236d06", "title": "Story", }, @@ -31,14 +31,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -48,6 +51,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -74,14 +78,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -91,6 +98,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -145,8 +153,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.428Z, - "dateModified": 2020-10-21T01:23:26.429Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "882d9c5faa549a3a402322c66bc1fc90", "title": "Story", }, @@ -163,14 +171,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -180,6 +191,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -248,8 +260,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.429Z, - "dateModified": 2020-10-21T01:23:26.429Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "60758f1e6b5e3aeeaa541b7d91504436", "title": "Story", }, @@ -266,14 +278,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -283,6 +298,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", diff --git a/core/instrument/test/__snapshots__/esm-named-exports.test.ts.snap b/core/instrument/test/__snapshots__/esm-named-exports.test.ts.snap index 4a6c7e352..ad147fd37 100644 --- a/core/instrument/test/__snapshots__/esm-named-exports.test.ts.snap +++ b/core/instrument/test/__snapshots__/esm-named-exports.test.ts.snap @@ -6,8 +6,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.429Z, - "dateModified": 2020-10-21T01:23:26.429Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "e53b3e5b7514bc8ba694d92494da097c", "title": "Story", }, @@ -24,14 +24,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -41,6 +44,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -91,8 +95,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.429Z, - "dateModified": 2020-10-21T01:23:26.429Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "9dbf4c8290952e00012d4800973d54e9", "title": "Story", }, @@ -109,14 +113,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -126,6 +133,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -176,8 +184,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.429Z, - "dateModified": 2020-10-21T01:23:26.429Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "618ca94e4346ec00c097481c1e57b5f6", "title": "Story", }, @@ -194,14 +202,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -211,6 +222,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", diff --git a/core/instrument/test/__snapshots__/esm-parameters.test.ts.snap b/core/instrument/test/__snapshots__/esm-parameters.test.ts.snap index 5c350bfad..4983fd32e 100644 --- a/core/instrument/test/__snapshots__/esm-parameters.test.ts.snap +++ b/core/instrument/test/__snapshots__/esm-parameters.test.ts.snap @@ -13,8 +13,8 @@ Object { "componentsLookup": Object { "ControlsTable": "3880efc294775fe5c4afbb60ef59b162", }, - "date": 2020-10-21T01:23:26.429Z, - "dateModified": 2020-10-21T01:23:26.429Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "88c5aea0fddc19a67df23e2335e64036", "title": "Story", }, @@ -31,14 +31,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -48,6 +51,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -74,14 +78,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -91,6 +98,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -147,8 +155,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.429Z, - "dateModified": 2020-10-21T01:23:26.429Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "34bc7325264153ecebfb43811bd20164", "title": "Story", }, @@ -165,14 +173,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -182,6 +193,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -252,8 +264,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.429Z, - "dateModified": 2020-10-21T01:23:26.429Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "514de6078cace1101b526c04fd631dce", "title": "Story", }, @@ -270,14 +282,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -287,6 +302,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", diff --git a/core/instrument/test/__snapshots__/esm-props-info-external.test.ts.snap b/core/instrument/test/__snapshots__/esm-props-info-external.test.ts.snap index 7f784d3e0..3daa8f9cb 100644 --- a/core/instrument/test/__snapshots__/esm-props-info-external.test.ts.snap +++ b/core/instrument/test/__snapshots__/esm-props-info-external.test.ts.snap @@ -921,7 +921,7 @@ Array values are converted into responsive values. }, "inputMode": Object { "description": "Hints at the type of data that might be entered by the user while editing the element or its contents -@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute", +@see https ://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute", "parentName": "HTMLAttributes", "type": Object { "name": "enum", @@ -964,7 +964,7 @@ Array values are converted into responsive values. }, "is": Object { "description": "Specify that a standard HTML element should behave like a defined custom built-in element -@see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is", +@see https ://html.spec.whatwg.org/multipage/custom-elements.html#attr-is", "parentName": "HTMLAttributes", "type": Object { "name": "string", @@ -2898,6 +2898,9 @@ behind an element is visible. }, }, }, + "tags": Object { + "see": "https ://theme-ui.com/components/button", + }, } `; @@ -2948,6 +2951,11 @@ Object { }, ], }, + "fileInfo": Object { + "dateCreated": "2021-02-14T20:01:09.002Z", + "dateModified": "2021-02-14T20:01:09.002Z", + }, + "fileName": "index.d.ts", "from": "theme-ui", "importedName": "Button", "jsx": Array [], @@ -3029,6 +3037,11 @@ Object { }, ], }, + "fileInfo": Object { + "dateCreated": "2021-02-14T20:01:09.002Z", + "dateModified": "2021-02-14T20:01:09.002Z", + }, + "fileName": "index.d.ts", "from": "theme-ui", "importedName": "Button", "jsx": Array [], @@ -3044,8 +3057,8 @@ Object { "componentsLookup": Object { "Button": "98b2111b08fbab8e38c938acaf3e129a", }, - "date": 2020-10-21T01:23:26.430Z, - "dateModified": 2020-10-21T01:23:26.430Z, + "date": "2020-08-05T13:28:21.000Z", + "dateModified": "2020-08-05T13:28:21.000Z", "package": "295d57ccad25aab2260adf38810e8858", "title": "Storybook/Blocks/Button", }, @@ -3062,14 +3075,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -3079,6 +3095,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", diff --git a/core/instrument/test/__snapshots__/esm-props-info.test.ts.snap b/core/instrument/test/__snapshots__/esm-props-info.test.ts.snap index 97111868d..74f9ab0c0 100644 --- a/core/instrument/test/__snapshots__/esm-props-info.test.ts.snap +++ b/core/instrument/test/__snapshots__/esm-props-info.test.ts.snap @@ -34,6 +34,273 @@ Object { }, ], }, + "fileInfo": Object { + "commits": Array [ + Object { + "authorDate": "2020-12-08T07:22:31.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-12-08T07:22:31.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "0204f50533cea5e2eeb694fe64cc6fc115fd2fd4", + "subject": "feat: addon-stats", + }, + Object { + "authorDate": "2020-09-07T16:05:15.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-09-07T16:05:15.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "7cbba59092b06fbc12e6e0bac8f63480afeecd12", + "subject": "feat: docz migration compatibility", + }, + Object { + "authorDate": "2020-08-08T07:56:52.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-08-08T07:56:52.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "f46e8be0fcb7ac3588213423e82ce069928d310f", + "subject": "feat: props and controls table visibility", + }, + Object { + "authorDate": "2020-08-01T20:18:46.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-08-01T20:18:46.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "7af6bb892c03a6751db8f566b3171bbad7b29829", + "subject": "fix: notify stories on changes non-current", + }, + Object { + "authorDate": "2020-07-25T05:26:24.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-07-25T05:26:24.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "c6b78bc75e8464b7123436da485b985f0f1910ff", + "subject": "chore: remove react context api", + }, + Object { + "authorDate": "2020-07-10T23:27:51.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-07-10T23:27:51.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "07b9f6480ac7a2b1e0a3384007755f1e9a5c86ba", + "subject": "feat: data-testids", + }, + Object { + "authorDate": "2020-06-30T21:06:54.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-06-30T21:06:54.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "fc3c2fd047e56bb750b7669d5d474b6c605fb808", + "subject": "docs: writing mdx stories docs", + }, + Object { + "authorDate": "2020-05-10T20:20:37.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-05-10T20:20:37.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "0ac5038d49d9604c10728adddd54596383aa8370", + "subject": "feat: props table selectively display props, controls or both", + }, + Object { + "authorDate": "2020-05-08T17:41:12.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-05-08T17:41:12.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "6b91c0a7113ba12bf5f15db6164b7a8179dd4b4e", + "subject": "feat: copy table added to props table", + }, + Object { + "authorDate": "2020-05-04T23:53:45.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-05-04T23:53:45.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "62366e405fc254b30d293fd68d24ee6adb9e0858", + "subject": "feat: enhance object controls handling, merging", + }, + Object { + "authorDate": "2020-05-04T06:29:26.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-05-04T06:29:26.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "28b45b92d650629b126beb34c6f975706329ae33", + "subject": "chore: change editors from props to context", + }, + Object { + "authorDate": "2020-05-03T18:15:29.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-05-03T18:15:29.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "37fa1fbb1469dbbffa4298af59297e5516fcba0a", + "subject": "fix: remove args from context, issues", + }, + Object { + "authorDate": "2020-05-03T16:23:38.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-05-03T16:23:38.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "737aac65d45f9b978204f1087a762c543a9c9f3e", + "subject": "feat: use tags in PropsTable", + }, + Object { + "authorDate": "2020-05-03T05:14:37.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-05-03T05:14:37.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "fc9a8f7d83e400d534305c978247a93a2d73174d", + "subject": "feat: props table featured controls with actions", + }, + Object { + "authorDate": "2020-04-25T16:41:38.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-04-25T16:41:38.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "fa09d0efb3ff6d20549f34ff333771eb80bf2a9f", + "subject": "fix: force refresh props table on story change", + }, + Object { + "authorDate": "2020-04-16T12:42:11.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-04-16T12:42:11.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "7885080f3a723ed567544039ad422e6933d19856", + "subject": "fix: hide blocks that have no content", + }, + Object { + "authorDate": "2020-04-16T02:28:39.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-04-16T02:28:39.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "ae6f7c108dfb90b8bc0d841c3c60bc1b81d01bac", + "subject": "feat: added theme, components for PageContainer", + }, + Object { + "authorDate": "2020-04-12T00:10:52.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-04-12T00:10:52.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "95d071b28e35bf6c19ebecc03efb9576b10a603c", + "subject": "feat: optimize BlockContext", + }, + Object { + "authorDate": "2020-04-07T01:13:20.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-04-07T01:13:20.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "69f57622a97499f6196896aa685e4f0601ea8e0c", + "subject": "feat: initial check-in store package", + }, + Object { + "authorDate": "2020-04-01T15:17:43.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-04-01T15:17:43.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "b87ad46bafe71fcb74f32bdfef4c92b3f75afe10", + "subject": "fix: table editing lock update", + }, + Object { + "authorDate": "2020-03-31T00:05:00.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-31T00:05:00.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "70005845b211574d1b1d82a57f50b9678dbedab0", + "subject": "fix: blocks clean up", + }, + Object { + "authorDate": "2020-03-30T20:39:00.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-30T20:39:00.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "fdb5795f6b88d17cf49fc716c7c6d012b306079d", + "subject": "chore: refactor PropsTable", + }, + Object { + "authorDate": "2020-03-13T14:58:12.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-13T14:58:12.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "1ce84e4ceb3fbee6041151efc811a850813628b0", + "subject": "chore: separate PropsTable into Block", + }, + Object { + "authorDate": "2020-03-13T14:27:51.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-13T14:27:51.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "e1b8c87cbb2161e58ee452e33d5fa88dc02e57cb", + "subject": "fix: table block header styling", + }, + Object { + "authorDate": "2020-03-13T06:07:44.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-13T06:07:44.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "2711667bcdf1375819aa27e5ec085347855adffd", + "subject": "feat: add filtering to table", + }, + Object { + "authorDate": "2020-03-12T19:44:49.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-12T19:44:49.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "2c5a560958a9d1fcad6a0c57334808c8a5baf47a", + "subject": "feat: added PropsTable", + }, + ], + "dateCreated": "2020-03-12T19:44:49.000Z", + "dateModified": "2020-12-08T07:22:31.000Z", + }, + "fileName": "PropsTable.tsx", "from": "@component-controls/blocks", "importedName": "PropsTable", "jsx": Array [ @@ -120,8 +387,8 @@ Object { "componentsLookup": Object { "PropsTable": "26090286b0d42fa7a92590e6843f1687", }, - "date": 2020-10-21T01:23:26.430Z, - "dateModified": 2020-10-21T01:23:26.430Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "942f7c3f19d9e197f86041eed5e46838", "title": "Storybook/Blocks/PropsTable", }, @@ -191,14 +458,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -208,6 +478,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", diff --git a/core/instrument/test/__snapshots__/esm-props-usage.test.ts.snap b/core/instrument/test/__snapshots__/esm-props-usage.test.ts.snap index d4792782e..56e151e8e 100644 --- a/core/instrument/test/__snapshots__/esm-props-usage.test.ts.snap +++ b/core/instrument/test/__snapshots__/esm-props-usage.test.ts.snap @@ -6,8 +6,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.430Z, - "dateModified": 2020-10-21T01:23:26.430Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "a7193179ecf0779da0f8745aa25fb16f", "title": "Story", }, @@ -24,14 +24,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -41,6 +44,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -123,8 +127,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.430Z, - "dateModified": 2020-10-21T01:23:26.430Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "e29c8135e9c608fe008a315d25c201b0", "title": "Story", }, @@ -141,14 +145,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -158,6 +165,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -268,8 +276,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.430Z, - "dateModified": 2020-10-21T01:23:26.430Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "6b1e224ac16097889a07e950dc91da6a", "title": "Story", }, @@ -286,14 +294,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -303,6 +314,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -395,8 +407,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.430Z, - "dateModified": 2020-10-21T01:23:26.430Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "4c19f3b76b8ab9a7c8cd349af53adcd6", "title": "Story", }, @@ -413,14 +425,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -430,6 +445,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -540,8 +556,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.430Z, - "dateModified": 2020-10-21T01:23:26.430Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "31a3398d2705e8d1f3606294985d9c04", "title": "Story", }, @@ -558,14 +574,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -575,6 +594,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -691,8 +711,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.430Z, - "dateModified": 2020-10-21T01:23:26.430Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "02163b946b4a3e645402a9dd80ac6ad2", "title": "Story", }, @@ -709,14 +729,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -726,6 +749,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -924,8 +948,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.430Z, - "dateModified": 2020-10-21T01:23:26.431Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "148100976725fa64e0cd3e6b8f5ab70f", "title": "Story", }, @@ -942,14 +966,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -959,6 +986,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -1036,8 +1064,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.431Z, - "dateModified": 2020-10-21T01:23:26.431Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "5cb9f0e4e9b7610ff459490ccfda3dcc", "title": "Story", }, @@ -1054,14 +1082,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -1071,6 +1102,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -1178,8 +1210,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.431Z, - "dateModified": 2020-10-21T01:23:26.431Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "9f47664ae1fdd66baf7a9ce52c961032", "title": "Story", }, @@ -1196,14 +1228,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -1213,6 +1248,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -1323,8 +1359,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.431Z, - "dateModified": 2020-10-21T01:23:26.431Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "e293029d97356050be6d9dce1d8dad98", "title": "Story", }, @@ -1341,14 +1377,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -1358,6 +1397,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -1476,8 +1516,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.431Z, - "dateModified": 2020-10-21T01:23:26.431Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "c02f1c496c215a299355ba50a365e183", "title": "Story", }, @@ -1494,14 +1534,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -1511,6 +1554,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -1686,8 +1730,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.431Z, - "dateModified": 2020-10-21T01:23:26.431Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "3d35813c0140070f94d9f5783e7191c7", "title": "Story", }, @@ -1704,14 +1748,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -1721,6 +1768,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -1812,8 +1860,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.431Z, - "dateModified": 2020-10-21T01:23:26.431Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "71aec6b23825670f65c73ae6a7aa081d", "title": "Story", }, @@ -1830,14 +1878,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -1847,6 +1898,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -1972,8 +2024,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.431Z, - "dateModified": 2020-10-21T01:23:26.431Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "3446779011041fa8b753053121a4b4b0", "title": "Story", }, @@ -1990,14 +2042,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -2007,6 +2062,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", diff --git a/core/instrument/test/__snapshots__/esm-stories.test.ts.snap b/core/instrument/test/__snapshots__/esm-stories.test.ts.snap index 21bfcbda5..a419c1233 100644 --- a/core/instrument/test/__snapshots__/esm-stories.test.ts.snap +++ b/core/instrument/test/__snapshots__/esm-stories.test.ts.snap @@ -6,8 +6,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.432Z, - "dateModified": 2020-10-21T01:23:26.432Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "a764e2f1f1f8cc23edccb9cfb301ec8e", "title": "Story", }, @@ -24,14 +24,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -41,6 +44,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -71,8 +75,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.432Z, - "dateModified": 2020-10-21T01:23:26.432Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "5f97f1689681bb75b22fb6973c4c8397", "title": "Story", }, @@ -89,14 +93,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -106,6 +113,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -151,8 +159,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.432Z, - "dateModified": 2020-10-21T01:23:26.432Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "947c20fa355bb677d067a09d46558900", "title": "Story", }, @@ -169,14 +177,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -186,6 +197,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -214,8 +226,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.432Z, - "dateModified": 2020-11-15T16:38:06.844Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "c525e04e9beb03220dd4fa6d09af4958", "title": "Story", }, @@ -232,14 +244,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -249,6 +264,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -309,8 +325,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.432Z, - "dateModified": 2020-10-21T01:23:26.432Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "3135bea8e9a3103e26e81e541800e043", "title": "Story", }, @@ -327,14 +343,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -344,6 +363,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -462,8 +482,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.432Z, - "dateModified": 2020-10-21T01:23:26.432Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "33a786db69e3366a4131eef973b8ad77", "title": "Story", }, @@ -480,14 +500,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -497,6 +520,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -571,8 +595,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.432Z, - "dateModified": 2020-10-21T01:23:26.432Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "244bd9e12bf9fbfc25a493133455fa30", "title": "Story", }, @@ -589,14 +613,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -606,6 +633,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -695,8 +723,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.432Z, - "dateModified": 2020-10-21T01:23:26.433Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "dda8a6c0184dad7581d495667190312f", "title": "Story", }, @@ -713,14 +741,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -730,6 +761,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -819,8 +851,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.433Z, - "dateModified": 2020-10-21T01:23:26.433Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "b92edb32865b71e9d6623213bf5d565d", "title": "Story", }, @@ -837,14 +869,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -854,6 +889,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", diff --git a/core/instrument/test/__snapshots__/esm-story-source.test.ts.snap b/core/instrument/test/__snapshots__/esm-story-source.test.ts.snap index b40c83de8..1ee7bfb38 100644 --- a/core/instrument/test/__snapshots__/esm-story-source.test.ts.snap +++ b/core/instrument/test/__snapshots__/esm-story-source.test.ts.snap @@ -6,8 +6,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.433Z, - "dateModified": 2020-10-21T01:23:26.433Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "title": "Story", }, "packages": Object {}, @@ -43,8 +43,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.433Z, - "dateModified": 2020-10-21T01:23:26.433Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "title": "Story", }, "packages": Object {}, @@ -125,8 +125,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.433Z, - "dateModified": 2020-10-21T01:23:26.433Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "title": "Story", }, "packages": Object {}, @@ -192,8 +192,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.433Z, - "dateModified": 2020-10-21T01:23:26.433Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "title": "Story", }, "packages": Object {}, @@ -229,8 +229,8 @@ Object { "doc": Object { "components": Object {}, "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.433Z, - "dateModified": 2020-10-21T01:23:26.433Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "title": "Story", }, "packages": Object {}, diff --git a/core/instrument/test/__snapshots__/esm-template.test.ts.snap b/core/instrument/test/__snapshots__/esm-template.test.ts.snap index 3f8546031..4576dfb2d 100644 --- a/core/instrument/test/__snapshots__/esm-template.test.ts.snap +++ b/core/instrument/test/__snapshots__/esm-template.test.ts.snap @@ -20,6 +20,44 @@ Object { }, ], }, + "fileInfo": Object { + "commits": Array [ + Object { + "authorDate": "2020-11-28T08:43:35.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-11-28T08:43:35.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "628d09ffa2c92a92805309ad16c4596f31259582", + "subject": "feat: local dependencies", + }, + Object { + "authorDate": "2020-11-15T22:37:57.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-11-15T22:37:57.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "a4dfb9ff61330620614c2faa0b6547a38f386368", + "subject": "feat: bind templates to stories", + }, + ], + "dateCreated": "2020-11-15T22:37:57.000Z", + "dateModified": "2020-11-28T08:43:35.000Z", + "sloc": Object { + "block": 0, + "blockEmpty": 0, + "comment": 0, + "empty": 1, + "mixed": 0, + "single": 0, + "source": 8, + "todo": 0, + "total": 9, + }, + }, + "fileName": "button-props.tsx", "from": "../../components/button-props", "importedName": "Button", "jsx": Array [ @@ -63,8 +101,8 @@ export const Button: FC = props => ( "componentsLookup": Object { "Button": "fbea66d4bd64ea2b935855efa5d522a1", }, - "date": 2020-12-30T06:22:19.021Z, - "dateModified": 2020-12-30T06:22:19.022Z, + "date": "2020-11-16T21:30:05.000Z", + "dateModified": "2020-11-16T21:30:05.000Z", "package": "f4ca1c7bc1501c3fcaf51e85d24145e2", "smartControls": false, "template": Object { @@ -127,14 +165,17 @@ export const Button: FC = props => ( "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -144,6 +185,7 @@ export const Button: FC = props => ( "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -170,14 +212,17 @@ export const Button: FC = props => ( "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -187,6 +232,7 @@ export const Button: FC = props => ( "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", diff --git a/core/instrument/test/__snapshots__/esm-toggle.test.ts.snap b/core/instrument/test/__snapshots__/esm-toggle.test.ts.snap index c0638eeb7..3af69c97b 100644 --- a/core/instrument/test/__snapshots__/esm-toggle.test.ts.snap +++ b/core/instrument/test/__snapshots__/esm-toggle.test.ts.snap @@ -15,8 +15,8 @@ Object { "componentsLookup": Object { "Toggle": "88b383f24b1cfbfb44763744ac121b71", }, - "date": 2020-10-21T01:23:26.434Z, - "dateModified": 2020-10-21T01:23:26.434Z, + "date": "2020-07-06T20:55:12.000Z", + "dateModified": "2020-07-06T20:55:12.000Z", "package": "bbdba31aae8aad2329b500b56e78cb36", "title": "Components/Toggle", }, @@ -33,14 +33,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -50,6 +53,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", diff --git a/core/instrument/test/__snapshots__/extract-component.test.ts.snap b/core/instrument/test/__snapshots__/extract-component.test.ts.snap index 8f25303e2..cf2aee279 100644 --- a/core/instrument/test/__snapshots__/extract-component.test.ts.snap +++ b/core/instrument/test/__snapshots__/extract-component.test.ts.snap @@ -11,6 +11,23 @@ Object { }, ], }, + "fileInfo": Object { + "commits": Array [ + Object { + "authorDate": "2020-03-14T17:49:39.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-14T17:49:39.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "f0b0beb616c2b86713c4064552fa39dffcd60771", + "subject": "chore: rename examples go fixtures", + }, + ], + "dateCreated": "2020-03-14T17:49:39.000Z", + "dateModified": "2020-03-14T17:49:39.000Z", + }, + "fileName": "button-default-class-export.js", "from": "../components/button-default-class-export", "importedName": "namespace", "jsx": Array [ @@ -36,14 +53,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -53,6 +73,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -81,6 +102,23 @@ Object { }, ], }, + "fileInfo": Object { + "commits": Array [ + Object { + "authorDate": "2020-03-14T17:49:39.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-14T17:49:39.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "f0b0beb616c2b86713c4064552fa39dffcd60771", + "subject": "chore: rename examples go fixtures", + }, + ], + "dateCreated": "2020-03-14T17:49:39.000Z", + "dateModified": "2020-03-14T17:49:39.000Z", + }, + "fileName": "button-default-arrow-func.js", "from": "../components/button-default-arrow-func", "importedName": "default", "jsx": Array [ @@ -106,14 +144,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -123,6 +164,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -159,6 +201,33 @@ Object { }, ], }, + "fileInfo": Object { + "commits": Array [ + Object { + "authorDate": "2020-11-30T06:16:03.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-11-30T06:16:03.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "c530e29f73414fe47ae648134385ed7b36670955", + "subject": "feat: component jsx explorer", + }, + Object { + "authorDate": "2020-11-28T08:43:35.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-11-28T08:43:35.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "628d09ffa2c92a92805309ad16c4596f31259582", + "subject": "feat: local dependencies", + }, + ], + "dateCreated": "2020-11-28T08:43:35.000Z", + "dateModified": "2020-11-30T06:16:03.000Z", + }, + "fileName": "component-jsx.tsx", "from": "../components/component-jsx", "importedName": "Button", "jsx": Array [ @@ -240,14 +309,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -257,6 +329,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -291,14 +364,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -308,6 +384,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -344,14 +421,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -361,6 +441,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -389,6 +470,23 @@ Object { }, ], }, + "fileInfo": Object { + "commits": Array [ + Object { + "authorDate": "2020-03-14T17:49:39.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-14T17:49:39.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "f0b0beb616c2b86713c4064552fa39dffcd60771", + "subject": "chore: rename examples go fixtures", + }, + ], + "dateCreated": "2020-03-14T17:49:39.000Z", + "dateModified": "2020-03-14T17:49:39.000Z", + }, + "fileName": "button-named-class.js", "from": "../components/button-named-class", "importedName": "Button", "jsx": Array [ @@ -414,14 +512,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -431,6 +532,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -459,6 +561,11 @@ Object { }, ], }, + "fileInfo": Object { + "dateCreated": "2021-02-14T20:01:09.002Z", + "dateModified": "2021-02-14T20:01:09.002Z", + }, + "fileName": "Button.js", "from": "theme-ui", "importedName": "Button", "jsx": Array [ @@ -518,6 +625,11 @@ exports[`extract-component node-modules-source.js 1`] = ` Object { "component": Object { "externalDependencies": Object {}, + "fileInfo": Object { + "dateCreated": "2020-04-04T08:48:22.000Z", + "dateModified": "2021-02-17T19:02:36.276Z", + }, + "fileName": "index.js", "from": "@component-controls/components", "importedName": "Subtitle", "jsx": Array [], @@ -533,6 +645,7 @@ Object { "copy-to-clipboard": "^3.2.1", "fast-memoize": "^2.5.2", "markdown-to-jsx": "^6.11.0", + "md5": "^2.3.0", "mdx-utils": "*", "prism-react-renderer": "^1.0.2", "react-animate-height": "^2.0.20", @@ -548,6 +661,7 @@ Object { "@component-controls/ts-markdown-docs": "^2.6.0", "@theme-ui/css": "^0.6.0-alpha.6", "@types/markdown-to-jsx": "^6.11.0", + "@types/md5": "^2.3.0", "@types/react": "^16.9.34", "@types/react-table": "^7.0.10", "@types/react-tabs": "^2.3.1", @@ -596,6 +710,23 @@ Object { }, ], }, + "fileInfo": Object { + "commits": Array [ + Object { + "authorDate": "2020-03-14T17:49:39.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-14T17:49:39.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "f0b0beb616c2b86713c4064552fa39dffcd60771", + "subject": "chore: rename examples go fixtures", + }, + ], + "dateCreated": "2020-03-14T17:49:39.000Z", + "dateModified": "2020-03-14T17:49:39.000Z", + }, + "fileName": "button-named-arrow-func.js", "from": "../components/button-named-arrow-func", "importedName": "Button", "jsx": Array [ @@ -621,14 +752,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -638,6 +772,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -666,6 +801,23 @@ Object { }, ], }, + "fileInfo": Object { + "commits": Array [ + Object { + "authorDate": "2020-03-14T17:49:39.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-14T17:49:39.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "f0b0beb616c2b86713c4064552fa39dffcd60771", + "subject": "chore: rename examples go fixtures", + }, + ], + "dateCreated": "2020-03-14T17:49:39.000Z", + "dateModified": "2020-03-14T17:49:39.000Z", + }, + "fileName": "button-named-class.js", "from": "../components/button-named-class", "importedName": "Button", "jsx": Array [ @@ -691,14 +843,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -708,6 +863,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", diff --git a/core/instrument/test/__snapshots__/extract-props-info.test.ts.snap b/core/instrument/test/__snapshots__/extract-props-info.test.ts.snap index 51082c168..22e7ea967 100644 --- a/core/instrument/test/__snapshots__/extract-props-info.test.ts.snap +++ b/core/instrument/test/__snapshots__/extract-props-info.test.ts.snap @@ -775,7 +775,7 @@ A hint could be a sample value or a brief description of the expected format.", "parentName": "BoxOwnProps", "type": Object { "name": "union", - "raw": "\\"symbol\\" | \\"object\\" | \\"a\\" | \\"abbr\\" | \\"address\\" | \\"area\\" | \\"article\\" | \\"aside\\" | \\"audio\\" | \\"b\\" | \\"base\\" | \\"bdi\\" | \\"bdo\\" | \\"big\\" | \\"blockquote\\" | \\"body\\" | \\"br\\" | \\"button\\" | \\"canvas\\" | ... 158 more ...", + "raw": "\\"symbol\\" | \\"object\\" | \\"div\\" | \\"a\\" | \\"abbr\\" | \\"address\\" | \\"area\\" | \\"article\\" | \\"aside\\" | \\"audio\\" | \\"b\\" | \\"base\\" | \\"bdi\\" | \\"bdo\\" | \\"big\\" | \\"blockquote\\" | \\"body\\" | \\"br\\" | \\"button\\" | \\"canvas\\" | ... 157 more ...", "value": Array [ Object { "name": "symbol", @@ -783,6 +783,9 @@ A hint could be a sample value or a brief description of the expected format.", Object { "name": "object", }, + Object { + "name": "div", + }, Object { "name": "a", }, @@ -835,7 +838,7 @@ A hint could be a sample value or a brief description of the expected format.", "name": "canvas", }, Object { - "name": "... 158 more ...", + "name": "... 157 more ...", }, ], }, @@ -1067,7 +1070,7 @@ from the title.", }, "inputMode": Object { "description": "Hints at the type of data that might be entered by the user while editing the element or its contents -@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute", +@see https ://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute", "parentName": "HTMLAttributes", "type": Object { "name": "union", @@ -1102,7 +1105,7 @@ from the title.", }, "is": Object { "description": "Specify that a standard HTML element should behave like a defined custom built-in element -@see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is", +@see https ://html.spec.whatwg.org/multipage/custom-elements.html#attr-is", "parentName": "HTMLAttributes", "type": Object { "name": "string", @@ -2760,6 +2763,7 @@ user setting can display only props table or only controls", }, }, }, + "tags": Object {}, } `; @@ -4047,7 +4051,7 @@ A hint could be a sample value or a brief description of the expected format.", }, "inputMode": Object { "description": "Hints at the type of data that might be entered by the user while editing the element or its contents -@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute", +@see https ://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute", "parentName": "HTMLAttributes", "type": Object { "name": "union", @@ -4089,7 +4093,7 @@ A hint could be a sample value or a brief description of the expected format.", }, "is": Object { "description": "Specify that a standard HTML element should behave like a defined custom built-in element -@see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is", +@see https ://html.spec.whatwg.org/multipage/custom-elements.html#attr-is", "parentName": "HTMLAttributes", "type": Object { "name": "string", @@ -5894,6 +5898,7 @@ A hint could be a sample value or a brief description of the expected format.", }, }, }, + "tags": Object {}, } `; @@ -7174,7 +7179,7 @@ A hint could be a sample value or a brief description of the expected format.", }, "inputMode": Object { "description": "Hints at the type of data that might be entered by the user while editing the element or its contents -@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute", +@see https ://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute", "parentName": "HTMLAttributes", "type": Object { "name": "union", @@ -7216,7 +7221,7 @@ A hint could be a sample value or a brief description of the expected format.", }, "is": Object { "description": "Specify that a standard HTML element should behave like a defined custom built-in element -@see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is", +@see https ://html.spec.whatwg.org/multipage/custom-elements.html#attr-is", "parentName": "HTMLAttributes", "type": Object { "name": "string", @@ -9014,6 +9019,7 @@ A hint could be a sample value or a brief description of the expected format.", }, }, }, + "tags": Object {}, } `; @@ -10301,7 +10307,7 @@ A hint could be a sample value or a brief description of the expected format.", }, "inputMode": Object { "description": "Hints at the type of data that might be entered by the user while editing the element or its contents -@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute", +@see https ://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute", "parentName": "HTMLAttributes", "type": Object { "name": "union", @@ -10343,7 +10349,7 @@ A hint could be a sample value or a brief description of the expected format.", }, "is": Object { "description": "Specify that a standard HTML element should behave like a defined custom built-in element -@see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is", +@see https ://html.spec.whatwg.org/multipage/custom-elements.html#attr-is", "parentName": "HTMLAttributes", "type": Object { "name": "string", @@ -12148,12 +12154,13 @@ A hint could be a sample value or a brief description of the expected format.", }, }, }, + "tags": Object {}, } `; exports[`extract-props-info Tabs 1`] = ` Object { - "description": "Create tabs and multi-page ui layouts. Uses [react-tabs](https://reactcommunity.org/react-tabs/) component.", + "description": "Tabs component with [react-tabs](https://reactcommunity.org/react-tabs/) and theme-ui styling.", "displayName": "Tabs", "methods": Array [], "props": Object { @@ -13479,7 +13486,7 @@ A hint could be a sample value or a brief description of the expected format.", }, "inputMode": Object { "description": "Hints at the type of data that might be entered by the user while editing the element or its contents -@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute", +@see https ://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute", "parentName": "HTMLAttributes", "type": Object { "name": "union", @@ -13521,7 +13528,7 @@ A hint could be a sample value or a brief description of the expected format.", }, "is": Object { "description": "Specify that a standard HTML element should behave like a defined custom built-in element -@see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is", +@see https ://html.spec.whatwg.org/multipage/custom-elements.html#attr-is", "parentName": "HTMLAttributes", "type": Object { "name": "string", @@ -15333,5 +15340,6 @@ A hint could be a sample value or a brief description of the expected format.", }, }, }, + "tags": Object {}, } `; diff --git a/core/instrument/test/__snapshots__/mdx-async.test.ts.snap b/core/instrument/test/__snapshots__/mdx-async.test.ts.snap index 74b6af260..aad8a2535 100644 --- a/core/instrument/test/__snapshots__/mdx-async.test.ts.snap +++ b/core/instrument/test/__snapshots__/mdx-async.test.ts.snap @@ -14,8 +14,8 @@ Object { "componentsLookup": Object { "Button": "fbc7c3606fe52918c0716b2079a81097", }, - "date": 2020-12-30T06:22:19.023Z, - "dateModified": 2020-12-30T06:22:19.023Z, + "date": "2020-10-13T05:44:51.000Z", + "dateModified": "2020-11-13T00:59:52.000Z", "mdxType": "Meta", "package": "fdb6fae63b892ee658c132e3eeaa8860", "title": "MDX", @@ -40,14 +40,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -57,6 +60,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", diff --git a/core/instrument/test/__snapshots__/mdx-component.test.ts.snap b/core/instrument/test/__snapshots__/mdx-component.test.ts.snap index ff6c970f5..38783fb03 100644 --- a/core/instrument/test/__snapshots__/mdx-component.test.ts.snap +++ b/core/instrument/test/__snapshots__/mdx-component.test.ts.snap @@ -12,6 +12,23 @@ Object { }, ], }, + "fileInfo": Object { + "commits": Array [ + Object { + "authorDate": "2020-03-14T17:49:39.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-14T17:49:39.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "f0b0beb616c2b86713c4064552fa39dffcd60771", + "subject": "chore: rename examples go fixtures", + }, + ], + "dateCreated": "2020-03-14T17:49:39.000Z", + "dateModified": "2020-03-14T17:49:39.000Z", + }, + "fileName": "button-named-arrow-func.js", "from": "../../components/button-named-arrow-func", "importedName": "Button", "jsx": Array [ @@ -31,8 +48,8 @@ Object { "componentsLookup": Object { "Button": "2f4bd34d15be236674abaf6e894afe6e", }, - "date": 2020-12-30T06:22:19.023Z, - "dateModified": 2020-12-30T06:22:19.024Z, + "date": "2020-03-14T17:49:39.000Z", + "dateModified": "2020-11-13T00:59:52.000Z", "mdxType": "Meta", "title": "MDX", }, @@ -67,8 +84,8 @@ Object { "componentsLookup": Object { "Button": "dc86c4457416c54c13147e780d972747", }, - "date": 2020-12-30T06:22:19.024Z, - "dateModified": 2020-12-30T06:22:19.024Z, + "date": "2020-03-14T17:49:39.000Z", + "dateModified": "2020-11-13T00:59:52.000Z", "title": "MDX", }, "exports": Object { @@ -98,6 +115,23 @@ Object { }, ], }, + "fileInfo": Object { + "commits": Array [ + Object { + "authorDate": "2020-03-14T17:49:39.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-14T17:49:39.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "f0b0beb616c2b86713c4064552fa39dffcd60771", + "subject": "chore: rename examples go fixtures", + }, + ], + "dateCreated": "2020-03-14T17:49:39.000Z", + "dateModified": "2020-03-14T17:49:39.000Z", + }, + "fileName": "button-default-arrow-func.js", "from": "../../components/button-default-arrow-func", "importedName": "default", "jsx": Array [ @@ -116,8 +150,8 @@ Object { "componentsLookup": Object { "ArrowButton": "dc262d21cd7820523c7e0bacca461e87", }, - "date": 2020-10-21T01:23:26.440Z, - "dateModified": 2020-10-21T01:23:26.440Z, + "date": "2020-03-16T23:53:33.000Z", + "dateModified": "2020-05-19T05:00:26.000Z", "mdxType": "Meta", "title": "Story", }, @@ -160,8 +194,8 @@ Object { "Button": "1e542c3ba23e8699f77ec19bf3f9e3ea", "Toggle": "7e2f74e50bd73c6a0bf50c40d3c149d4", }, - "date": 2020-12-30T06:22:19.025Z, - "dateModified": 2020-12-30T06:22:19.025Z, + "date": "2020-03-14T17:49:39.000Z", + "dateModified": "2020-11-13T00:59:52.000Z", "mdxType": "Meta", "title": "MDX", }, @@ -214,6 +248,23 @@ Object { }, ], }, + "fileInfo": Object { + "commits": Array [ + Object { + "authorDate": "2020-03-14T17:49:39.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-14T17:49:39.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "f0b0beb616c2b86713c4064552fa39dffcd60771", + "subject": "chore: rename examples go fixtures", + }, + ], + "dateCreated": "2020-03-14T17:49:39.000Z", + "dateModified": "2020-03-14T17:49:39.000Z", + }, + "fileName": "button-named-arrow-func.js", "from": "../../components/button-named-arrow-func", "importedName": "Button", "jsx": Array [ @@ -236,6 +287,23 @@ Object { }, ], }, + "fileInfo": Object { + "commits": Array [ + Object { + "authorDate": "2020-03-14T17:49:39.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-14T17:49:39.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "f0b0beb616c2b86713c4064552fa39dffcd60771", + "subject": "chore: rename examples go fixtures", + }, + ], + "dateCreated": "2020-03-14T17:49:39.000Z", + "dateModified": "2020-03-14T17:49:39.000Z", + }, + "fileName": "button-default-arrow-func.js", "from": "../../components/button-default-arrow-func", "importedName": "default", "jsx": Array [ @@ -255,8 +323,8 @@ Object { "ArrowButton": "dc262d21cd7820523c7e0bacca461e87", "Button": "2f4bd34d15be236674abaf6e894afe6e", }, - "date": 2020-10-21T01:23:26.441Z, - "dateModified": 2020-10-21T01:23:26.441Z, + "date": "2020-03-16T23:53:33.000Z", + "dateModified": "2020-05-19T05:00:26.000Z", "mdxType": "Meta", "title": "Story", }, @@ -319,6 +387,23 @@ Object { }, ], }, + "fileInfo": Object { + "commits": Array [ + Object { + "authorDate": "2020-03-14T17:49:39.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-14T17:49:39.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "f0b0beb616c2b86713c4064552fa39dffcd60771", + "subject": "chore: rename examples go fixtures", + }, + ], + "dateCreated": "2020-03-14T17:49:39.000Z", + "dateModified": "2020-03-14T17:49:39.000Z", + }, + "fileName": "button-named-arrow-func.js", "from": "../../components/button-named-arrow-func", "importedName": "Button", "jsx": Array [ @@ -341,6 +426,23 @@ Object { }, ], }, + "fileInfo": Object { + "commits": Array [ + Object { + "authorDate": "2020-03-14T17:49:39.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-14T17:49:39.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "f0b0beb616c2b86713c4064552fa39dffcd60771", + "subject": "chore: rename examples go fixtures", + }, + ], + "dateCreated": "2020-03-14T17:49:39.000Z", + "dateModified": "2020-03-14T17:49:39.000Z", + }, + "fileName": "button-default-arrow-func.js", "from": "../../components/button-default-arrow-func", "importedName": "default", "jsx": Array [ @@ -361,8 +463,8 @@ Object { "ArrowButton": "dc262d21cd7820523c7e0bacca461e87", "Button": "2f4bd34d15be236674abaf6e894afe6e", }, - "date": 2020-10-21T01:23:26.441Z, - "dateModified": 2020-10-21T01:23:26.441Z, + "date": "2020-03-16T23:53:33.000Z", + "dateModified": "2020-05-19T05:00:26.000Z", "mdxType": "Meta", "subcomponents": Object { "Button": "Button", diff --git a/core/instrument/test/__snapshots__/mdx-playground.test.ts.snap b/core/instrument/test/__snapshots__/mdx-playground.test.ts.snap index fb92025a9..6b7c630b6 100644 --- a/core/instrument/test/__snapshots__/mdx-playground.test.ts.snap +++ b/core/instrument/test/__snapshots__/mdx-playground.test.ts.snap @@ -5,16 +5,16 @@ Object { "components": Object {}, "doc": Object { "componentsLookup": Object {}, - "date": 2020-12-30T06:22:19.025Z, - "dateModified": 2020-12-30T06:22:19.025Z, + "date": "2020-11-13T00:59:52.000Z", + "dateModified": "2020-11-13T17:34:06.000Z", "title": "MDX", }, "exports": Object { "default": Object { "story": Object { "componentsLookup": Object {}, - "date": 2020-12-30T06:22:19.025Z, - "dateModified": 2020-12-30T06:22:19.025Z, + "date": "2020-11-13T00:59:52.000Z", + "dateModified": "2020-11-13T17:34:06.000Z", "title": "MDX", }, }, @@ -75,15 +75,7 @@ MDXContent.isMDXComponent = true; { } - ,\\"dateModified\\": - { - - } - ,\\"date\\": - { - - } - + ,\\"dateModified\\": \\"2020-11-13T17:34:06.000Z\\",\\"date\\": \\"2020-11-13T00:59:52.000Z\\" } ); export default mdxDefaultExport; @@ -96,16 +88,16 @@ Object { "components": Object {}, "doc": Object { "componentsLookup": Object {}, - "date": 2020-12-30T06:22:19.025Z, - "dateModified": 2020-12-30T06:22:19.026Z, + "date": "2020-11-13T00:59:52.000Z", + "dateModified": "2020-11-13T00:59:52.000Z", "title": "MDX", }, "exports": Object { "default": Object { "story": Object { "componentsLookup": Object {}, - "date": 2020-12-30T06:22:19.025Z, - "dateModified": 2020-12-30T06:22:19.026Z, + "date": "2020-11-13T00:59:52.000Z", + "dateModified": "2020-11-13T00:59:52.000Z", "title": "MDX", }, }, @@ -146,15 +138,7 @@ MDXContent.isMDXComponent = true; { } - ,\\"dateModified\\": - { - - } - ,\\"date\\": - { - - } - + ,\\"dateModified\\": \\"2020-11-13T00:59:52.000Z\\",\\"date\\": \\"2020-11-13T00:59:52.000Z\\" } ); export default mdxDefaultExport; diff --git a/core/instrument/test/__snapshots__/mdx-stories.test.ts.snap b/core/instrument/test/__snapshots__/mdx-stories.test.ts.snap index 0b6026909..5fd403ed4 100644 --- a/core/instrument/test/__snapshots__/mdx-stories.test.ts.snap +++ b/core/instrument/test/__snapshots__/mdx-stories.test.ts.snap @@ -14,8 +14,8 @@ Object { "componentsLookup": Object { "Button": "2855216c2faa4ab43ed978e3ff6743e4", }, - "date": 2020-12-30T06:22:19.026Z, - "dateModified": 2020-12-30T06:22:19.026Z, + "date": "2020-03-14T17:49:39.000Z", + "dateModified": "2020-11-13T00:59:52.000Z", "mdxType": "Meta", "package": "3ae9354c82688a27372041e032d9a3d2", "title": "MDX", @@ -40,14 +40,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -57,6 +60,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -99,8 +103,8 @@ Object { "componentsLookup": Object { "Button": "adb0a7ff2c278d595f4ce67bb4b42887", }, - "date": 2020-12-30T06:22:19.027Z, - "dateModified": 2020-12-30T06:22:19.027Z, + "date": "2020-03-14T17:49:39.000Z", + "dateModified": "2020-11-13T00:59:52.000Z", "mdxType": "Meta", "package": "2a402139de103fe4f924b61618619173", "title": "MDX", @@ -125,14 +129,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -142,6 +149,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -216,6 +224,23 @@ Object { }, ], }, + "fileInfo": Object { + "commits": Array [ + Object { + "authorDate": "2020-03-14T17:49:39.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-14T17:49:39.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "f0b0beb616c2b86713c4064552fa39dffcd60771", + "subject": "chore: rename examples go fixtures", + }, + ], + "dateCreated": "2020-03-14T17:49:39.000Z", + "dateModified": "2020-03-14T17:49:39.000Z", + }, + "fileName": "button-default-arrow-func.js", "from": "../../components/button-default-arrow-func", "importedName": "default", "jsx": Array [ @@ -252,8 +277,8 @@ export default Button; "componentsLookup": Object { "Button": "ceea0565a65f75c8c7b6b355d6d335ac", }, - "date": 2020-12-30T06:22:19.027Z, - "dateModified": 2020-12-30T06:22:19.028Z, + "date": "2020-03-14T17:49:39.000Z", + "dateModified": "2020-11-13T00:59:52.000Z", "mdxType": "Meta", "package": "a588f2668941163f0163aabd28f5304e", "title": "MDX", @@ -278,14 +303,17 @@ export default Button; "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -295,6 +323,7 @@ export default Button; "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -321,14 +350,17 @@ export default Button; "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -338,6 +370,7 @@ export default Button; "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -398,8 +431,8 @@ Object { "componentsLookup": Object { "Button": "c63d685efb0c65f18ffc63184e852ef4", }, - "date": 2020-12-30T06:22:19.028Z, - "dateModified": 2020-12-30T06:22:19.028Z, + "date": "2020-03-14T17:49:39.000Z", + "dateModified": "2020-11-13T00:59:52.000Z", "mdxType": "Meta", "package": "92ff07f5e66bce7d793d8a6b561a1e0d", "title": "MDX", @@ -424,14 +457,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -441,6 +477,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -575,8 +612,8 @@ Object { "componentsLookup": Object { "Button": "88c2f5883a4daf6051d3f8a38ce7bf75", }, - "date": 2020-12-30T06:22:19.029Z, - "dateModified": 2020-12-30T06:22:19.029Z, + "date": "2020-03-14T17:49:39.000Z", + "dateModified": "2020-11-13T00:59:52.000Z", "mdxType": "Meta", "package": "6e59e023145bf99af36eacdfc87d4c4e", "title": "MDX", @@ -601,14 +638,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -618,6 +658,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -722,8 +763,8 @@ Object { "componentsLookup": Object { "Button": "fe664c2ffbbcacffdac896ace94db697", }, - "date": 2020-12-30T06:22:19.030Z, - "dateModified": 2020-12-30T06:22:19.030Z, + "date": "2020-03-14T17:49:39.000Z", + "dateModified": "2020-11-13T00:59:52.000Z", "mdxType": "Meta", "package": "a1ab80046bc96afbd8544a77ddf630e5", "title": "MDX", @@ -748,14 +789,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -765,6 +809,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -854,8 +899,8 @@ Object { "componentsLookup": Object { "Button": "0a73df5cffa26ca62ec534813a77384f", }, - "date": 2020-12-30T06:22:19.030Z, - "dateModified": 2020-12-30T06:22:19.030Z, + "date": "2020-03-14T17:49:39.000Z", + "dateModified": "2020-11-13T00:59:52.000Z", "mdxType": "Meta", "package": "195529eaaf75e7a96c882e2a716448ae", "title": "MDX", @@ -880,14 +925,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -897,6 +945,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", diff --git a/core/instrument/test/__snapshots__/mdx-story-source.test.ts.snap b/core/instrument/test/__snapshots__/mdx-story-source.test.ts.snap index cdcebe9a8..bbdede513 100644 --- a/core/instrument/test/__snapshots__/mdx-story-source.test.ts.snap +++ b/core/instrument/test/__snapshots__/mdx-story-source.test.ts.snap @@ -5,8 +5,8 @@ Object { "components": Object {}, "doc": Object { "componentsLookup": Object {}, - "date": 2020-12-29T05:27:27.469Z, - "dateModified": 2020-12-29T05:27:27.469Z, + "date": "2020-05-19T05:00:26.000Z", + "dateModified": "2020-05-19T05:00:26.000Z", "title": "MDX", }, "exports": Object { @@ -92,8 +92,8 @@ Object { "components": Object {}, "doc": Object { "componentsLookup": Object {}, - "date": 2020-12-29T05:27:27.468Z, - "dateModified": 2020-12-29T05:27:27.469Z, + "date": "2020-05-19T05:00:26.000Z", + "dateModified": "2020-05-19T05:00:26.000Z", "title": "MDX", }, "exports": Object { @@ -231,8 +231,8 @@ Object { "components": Object {}, "doc": Object { "componentsLookup": Object {}, - "date": 2020-12-29T05:27:27.469Z, - "dateModified": 2020-12-29T05:27:27.469Z, + "date": "2020-05-19T05:00:26.000Z", + "dateModified": "2020-05-19T05:00:26.000Z", "title": "MDX", }, "exports": Object { @@ -355,8 +355,8 @@ Object { "components": Object {}, "doc": Object { "componentsLookup": Object {}, - "date": 2020-10-21T01:23:26.442Z, - "dateModified": 2020-10-21T01:23:26.442Z, + "date": "2020-05-19T05:00:26.000Z", + "dateModified": "2020-05-19T05:00:26.000Z", "title": "MDX", }, "exports": Object { @@ -448,8 +448,8 @@ Object { "components": Object {}, "doc": Object { "componentsLookup": Object {}, - "date": 2020-12-29T05:27:27.469Z, - "dateModified": 2020-12-29T05:27:27.470Z, + "date": "2020-05-19T05:00:26.000Z", + "dateModified": "2020-05-19T05:00:26.000Z", "title": "MDX", }, "exports": Object { diff --git a/core/instrument/test/__snapshots__/mdx-template.test.ts.snap b/core/instrument/test/__snapshots__/mdx-template.test.ts.snap index c11e66b0b..125accb87 100644 --- a/core/instrument/test/__snapshots__/mdx-template.test.ts.snap +++ b/core/instrument/test/__snapshots__/mdx-template.test.ts.snap @@ -5,8 +5,8 @@ Object { "components": Object {}, "doc": Object { "componentsLookup": Object {}, - "date": 2020-12-30T06:22:19.031Z, - "dateModified": 2020-12-30T06:22:19.032Z, + "date": "2020-11-17T15:18:17.000Z", + "dateModified": "2020-11-17T15:18:17.000Z", "package": "b5d157962341328fdbed2962a4272111", "title": "MDX", }, @@ -48,14 +48,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -65,6 +68,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", diff --git a/core/instrument/test/__snapshots__/package-info.test.ts.snap b/core/instrument/test/__snapshots__/package-info.test.ts.snap index c31aa64cf..5d58e915b 100644 --- a/core/instrument/test/__snapshots__/package-info.test.ts.snap +++ b/core/instrument/test/__snapshots__/package-info.test.ts.snap @@ -13,14 +13,17 @@ Object { "camelcase": "^6.0.0", "deepmerge": "^4.2.2", "find-cache-dir": "^3.3.1", + "gitlog": "^4.0.4", "gray-matter": "^4.0.2", "hosted-git-info": "^3.0.4", + "isomorphic-git": "^1.8.0", "js-string-escape": "^1.0.1", "prettier": "^1.19.1", "read-package-json": "^2.1.1", "remark-emoji": "^2.1.0", "remark-images": "^2.0.0", "resolve": "^1.15.1", + "sloc": "^0.2.1", "typescript": "^4.0.5", }, "devDependencies": Object { @@ -30,6 +33,7 @@ Object { "@types/find-cache-dir": "^3.2.0", "@types/hosted-git-info": "^3.0.0", "@types/jest": "^26.0.10", + "@types/sloc": "^0.2.0", "cross-env": "^5.2.1", "eslint": "^6.5.1", "jest": "^26.4.2", @@ -114,6 +118,7 @@ Object { "fileHash": "82e7ff4ad10d0aa6da8708ad08b069ae", "name": "", "peerDependencies": undefined, + "privateNpm": true, "repository": Object { "browse": "https://github.com/ccontrols/component-controls/tree/master/", "docs": "https://github.com/ccontrols/component-controls/tree/master#readme", diff --git a/core/instrument/test/file-info.test.ts b/core/instrument/test/file-info.test.ts new file mode 100644 index 000000000..a423e45b8 --- /dev/null +++ b/core/instrument/test/file-info.test.ts @@ -0,0 +1,34 @@ +import path from 'path'; +import fs from 'fs'; +import { getFileIinfo } from '../src/misc/file-info'; + +const getFileInfoResults = async (filePath: string) => { + const source = fs.readFileSync(filePath, 'utf8'); + return await getFileIinfo(filePath, source); +}; +describe('file-info', () => { + it('tree', async () => { + const info = await getFileInfoResults( + path.resolve(__dirname, '../../../ui/components/src/Tree/Tree.tsx'), + ); + expect(info.commits[info.commits.length - 1].subject).toBe( + 'feat: component jsx explorer', + ); + }); + it('index file', async () => { + const info = await getFileInfoResults( + path.resolve(__dirname, '../src/index.ts'), + ); + expect(info.dateCreated).toBe('2020-02-13T13:10:53.000Z'); + }); + + it('actionbar', async () => { + const info = await getFileInfoResults( + path.resolve( + __dirname, + '../../../ui/components/src/ActionBar/ActionBar.tsx', + ), + ); + expect(info.dateCreated).toBe('2020-02-28T18:14:04.000Z'); + }); +}); diff --git a/core/store/src/serialization/load-store.ts b/core/store/src/serialization/load-store.ts index c77be2113..f34547a2a 100644 --- a/core/store/src/serialization/load-store.ts +++ b/core/store/src/serialization/load-store.ts @@ -47,6 +47,7 @@ export const loadStore = (store: LoadingStore, building?: boolean): Store => { subcomponents: globalStore.config.subcomponents, controls: globalStore.config.controls, smartControls: globalStore.config.smartControls, + category: globalStore.config.category, decorators: Array.isArray(globalStore.config.decorators) ? globalStore.config.decorators.filter(d => typeof d === 'function') : undefined, @@ -77,6 +78,7 @@ export const loadStore = (store: LoadingStore, building?: boolean): Store => { subcomponents: doc.subcomponents, controls: doc.controls, smartControls: doc.smartControls, + category: doc.category, decorators: Array.isArray(doc.decorators) ? doc.decorators.filter(d => typeof d === 'function') : undefined, diff --git a/core/webpack-compile/tests/__snapshots__/react-typescript.test.ts.snap b/core/webpack-compile/tests/__snapshots__/react-typescript.test.ts.snap index eabb3c982..53ea4e1a5 100644 --- a/core/webpack-compile/tests/__snapshots__/react-typescript.test.ts.snap +++ b/core/webpack-compile/tests/__snapshots__/react-typescript.test.ts.snap @@ -91,12 +91,380 @@ Object { }, ], }, + "fileInfo": Object { + "commits": Array [ + Object { + "authorDate": "2020-12-23T05:06:30.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-12-23T05:06:30.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "975030766aca0dddb9cab347dd9a16b8a14fff03", + "subject": "fix: sidebar styling", + }, + Object { + "authorDate": "2020-10-11T03:29:52.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-10-11T03:29:52.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "8d941dd0b6aca276ea70a18e3f0d137b728b5ffb", + "subject": "feat: site logo, default and custom", + }, + Object { + "authorDate": "2020-08-05T05:34:14.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-08-05T05:34:14.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "95aa431723311ffd1704628a07e90e60af8daa00", + "subject": "docs: customize sidebar items", + }, + Object { + "authorDate": "2020-08-05T04:18:41.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-08-05T04:18:41.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "66e08b5d85400daf0cb4831cb4cc320a0fda7174", + "subject": "feat: footer left and right customization", + }, + Object { + "authorDate": "2020-07-08T16:58:26.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-07-08T16:58:26.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "0528403711674527750cf5ea08d8776855fb5d46", + "subject": "chore: more spacing around toolbar links", + }, + Object { + "authorDate": "2020-06-24T21:41:16.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-06-24T21:41:16.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "c56b7e306a0652c5fafad31cc77867e05f873493", + "subject": "chore: actionitems node renamed", + }, + Object { + "authorDate": "2020-06-24T21:21:11.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-06-24T21:21:11.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "b37084a9eb078423cda27b00348282649401829d", + "subject": "feat: toolbar actionbar styling", + }, + Object { + "authorDate": "2020-06-13T03:46:14.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-06-13T03:46:14.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "c287815309631101b2b0a09a00ff87db550a1a22", + "subject": "feat: components in theme", + }, + Object { + "authorDate": "2020-06-10T23:29:45.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-06-10T23:29:45.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "b5aa2de671270708789493d4b62437b86c481089", + "subject": "chore: action items useMemo", + }, + Object { + "authorDate": "2020-06-10T23:09:40.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-06-10T23:09:40.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "182907d529da0cd48b868099c7fa6c2a73fcf139", + "subject": "feat: useTheme hook", + }, + Object { + "authorDate": "2020-06-07T16:47:38.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-06-07T16:47:38.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "c284170bed9d5b6dbc86db93a3da36d231621a79", + "subject": "fix: preserve component name as string", + }, + Object { + "authorDate": "2020-05-23T20:38:25.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-05-23T20:38:25.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "d7ea3a0798e8c6b3c52b7a5a36bec1520dd8ffc6", + "subject": "feat: initial checkin gatsby bundler", + }, + Object { + "authorDate": "2020-05-16T16:56:16.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-05-16T16:56:16.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "71b94aee7eebb8196d95645e9dc523032ef06936", + "subject": "docs: added props to stories for CONTROLS", + }, + Object { + "authorDate": "2020-05-16T13:37:01.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-05-16T13:37:01.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "b5e76dc9c8bcb0889d6c15fa867f72d529cf6bad", + "subject": "fix: safari action button color fix", + }, + Object { + "authorDate": "2020-05-14T21:54:04.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-05-14T21:54:04.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "e05e65f414538896d5670feb447ee6cfb6b49040", + "subject": "feat: deque's axe-core ally testing plugin", + }, + Object { + "authorDate": "2020-05-12T11:09:54.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-05-12T11:09:54.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "58bf9f3bd9be1e0ec0dbc30572a0ec44c276d856", + "subject": "feat: background and direction modes to playground", + }, + Object { + "authorDate": "2020-05-07T02:35:24.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-05-07T02:35:24.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "1608bb7f9e82a713c755ea4dfff86e8ed3d9b2f1", + "subject": "feat: array structured control editor", + }, + Object { + "authorDate": "2020-05-03T05:14:37.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-05-03T05:14:37.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "fc9a8f7d83e400d534305c978247a93a2d73174d", + "subject": "feat: props table featured controls with actions", + }, + Object { + "authorDate": "2020-04-12T17:52:00.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-04-12T17:52:00.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "b8ff182fcca57c237256c9be032e6207ce5daa96", + "subject": "fix: sync StoryContext on change story", + }, + Object { + "authorDate": "2020-04-04T08:22:04.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-04-04T08:22:04.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "f475d86a4e4ac5ba1ce11467d9ae45f24a518f79", + "subject": "Revert \\"chore: update infrastructure\\"", + }, + Object { + "authorDate": "2020-04-04T04:59:40.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-04-04T04:59:40.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "85a11b34e1484cc0a767b75ba537b0b53dab729b", + "subject": "chore: update infrastructure", + }, + Object { + "authorDate": "2020-03-31T21:35:28.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-31T21:35:28.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "c4347f242f0841b480d018e392c57b893018ef28", + "subject": "fix: actionbar styling", + }, + Object { + "authorDate": "2020-03-31T20:47:20.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-31T20:47:20.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "cf7d6a6769ecfba9c4d2887bca3b827e99a17589", + "subject": "fix: various fixes", + }, + Object { + "authorDate": "2020-03-31T17:22:19.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-31T17:22:19.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "6371068dde145474904445a2ae588f16c331fbdb", + "subject": "feat: add panels and story source to Playground", + }, + Object { + "authorDate": "2020-03-31T00:05:00.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-31T00:05:00.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "70005845b211574d1b1d82a57f50b9678dbedab0", + "subject": "fix: blocks clean up", + }, + Object { + "authorDate": "2020-03-30T22:41:38.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-30T22:41:38.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "ef3a2f30ff055f68538fcd8132aadd3aa10cd0e4", + "subject": "fix: margin on ActionItem group undefined", + }, + Object { + "authorDate": "2020-03-30T22:37:50.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-30T22:37:50.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "50e7fef4007b0e944421e7ddced1d7be1cab0e88", + "subject": "feat: group ActionItems", + }, + Object { + "authorDate": "2020-03-21T15:30:22.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-21T15:30:22.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "8b51ae1d9cb6283ce310bd444f5e54162a55f720", + "subject": "feat: add aria-label to action items", + }, + Object { + "authorDate": "2020-03-19T21:41:40.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-19T21:41:40.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "71ba0de0c0d61784a90c016a617dcfbc446894c6", + "subject": "fix: refactor bock components", + }, + Object { + "authorDate": "2020-03-12T19:44:49.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-12T19:44:49.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "2c5a560958a9d1fcad6a0c57334808c8a5baf47a", + "subject": "feat: added PropsTable", + }, + Object { + "authorDate": "2020-03-12T03:47:33.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-12T03:47:33.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "53aa0cb7f1d94ddef729cf023ebed49e59bd7c89", + "subject": "feat: add react-table to components", + }, + Object { + "authorDate": "2020-03-12T00:23:13.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-12T00:23:13.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "6dad9d969ab33470445703e132114a34eb635f50", + "subject": "fix: imporove actions and blocks ui", + }, + Object { + "authorDate": "2020-03-08T21:00:22.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-08T21:00:22.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "aa0c212fb042a03e0854f0042475bf590620cd26", + "subject": "feat: actionbar ui improvements", + }, + Object { + "authorDate": "2020-03-02T01:10:34.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-03-02T01:10:34.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "4d7ac924cdb3103e8fd3e2fd8d3d0a2f0999aade", + "subject": "feat: repository info for stories file", + }, + Object { + "authorDate": "2020-02-28T18:14:04.000Z", + "authorEmail": "atanasster@gmail.com", + "authorName": "atanasster", + "committerDate": "2020-02-28T18:14:04.000Z", + "committerEmail": "atanasster@gmail.com", + "committerName": "atanasster", + "hash": "8c11dcc447ea712048f95f71e7a902c892b9442f", + "subject": "chore: move to @component-controls/components", + }, + ], + "dateCreated": "2020-02-28T18:14:04.000Z", + "dateModified": "2020-12-23T05:06:30.000Z", + "sloc": Object { + "block": 13, + "blockEmpty": 0, + "comment": 13, + "empty": 3, + "mixed": 0, + "single": 0, + "source": 62, + "todo": 0, + "total": 78, + }, + }, + "fileName": "ActionBar.tsx", "from": "./ActionBar", "importedName": "ActionBar", "info": Object { - "description": "a strip of actions to be attached to a container -the action items contain the labels and click event handler -actions can accept an order prop, and can also be superimposed", + "description": "A strip of actions to be attached to a container. +The action items contain the labels and click event handlers. +Actions can accept an order prop, and can also overwrite default actions.", "displayName": "ActionBar", "methods": Array [], "props": Object { @@ -119,6 +487,7 @@ actions can accept an order prop, and can also be superimposed", }, }, }, + "tags": Object {}, }, "jsx": Array [ Object { @@ -228,9 +597,9 @@ export interface ActionBarProps { } /** - * a strip of actions to be attached to a container - * the action items contain the labels and click event handler - * actions can accept an order prop, and can also be superimposed + * A strip of actions to be attached to a container. + * The action items contain the labels and click event handlers. + * Actions can accept an order prop, and can also overwrite default actions. * */ export const ActionBar: FC = ({ @@ -300,6 +669,7 @@ export const ActionBar: FC = ({ "copy-to-clipboard": "^3.2.1", "fast-memoize": "^2.5.2", "markdown-to-jsx": "^6.11.0", + "md5": "^2.3.0", "mdx-utils": "*", "prism-react-renderer": "^1.0.2", "react-animate-height": "^2.0.20", @@ -315,6 +685,7 @@ export const ActionBar: FC = ({ "@component-controls/ts-markdown-docs": "^2.6.0", "@theme-ui/css": "^0.6.0-alpha.6", "@types/markdown-to-jsx": "^6.11.0", + "@types/md5": "^2.3.0", "@types/react": "^16.9.34", "@types/react-table": "^7.0.10", "@types/react-tabs": "^2.3.1", @@ -346,6 +717,7 @@ export const ActionBar: FC = ({ "copy-to-clipboard": "^3.2.1", "fast-memoize": "^2.5.2", "markdown-to-jsx": "^6.11.0", + "md5": "^2.3.0", "mdx-utils": "*", "prism-react-renderer": "^1.0.2", "react-animate-height": "^2.0.20", @@ -361,6 +733,7 @@ export const ActionBar: FC = ({ "@component-controls/ts-markdown-docs": "^2.6.0", "@theme-ui/css": "^0.6.0-alpha.6", "@types/markdown-to-jsx": "^6.11.0", + "@types/md5": "^2.3.0", "@types/react": "^16.9.34", "@types/react-table": "^7.0.10", "@types/react-tabs": "^2.3.1", @@ -389,13 +762,14 @@ export const ActionBar: FC = ({ "stores": Array [ Object { "doc": Object { + "category": "Navigation", "component": "ActionBar", "components": Object {}, "componentsLookup": Object { "ActionBar": "fded7dbaa855ea6869a794f877eab680", }, - "date": "2020-12-30T06:22:21.140Z", - "dateModified": "2020-12-30T06:22:21.141Z", + "date": "2020-03-08T21:00:22.000Z", + "dateModified": "2020-12-06T02:39:10.000Z", "fileName": "/Users/atanasster/component-controls/ui/components/src/ActionBar/ActionBar.stories.tsx", "package": "8c5a495b6c81e803332610dad9861480", "title": "Components/ActionBar", @@ -408,11 +782,11 @@ export const ActionBar: FC = ({ "loc": Object { "end": Object { "column": 1, - "line": 122, + "line": 124, }, "start": Object { "column": 33, - "line": 104, + "line": 106, }, }, "name": "groupEnd", @@ -443,11 +817,11 @@ export const ActionBar: FC = ({ "loc": Object { "end": Object { "column": 1, - "line": 142, + "line": 144, }, "start": Object { "column": 35, - "line": 124, + "line": 126, }, }, "name": "groupStart", @@ -478,11 +852,11 @@ export const ActionBar: FC = ({ "loc": Object { "end": Object { "column": 1, - "line": 61, + "line": 63, }, "start": Object { "column": 29, - "line": 51, + "line": 53, }, }, "name": "link", @@ -505,11 +879,11 @@ export const ActionBar: FC = ({ "loc": Object { "end": Object { "column": 1, - "line": 80, + "line": 82, }, "start": Object { "column": 30, - "line": 63, + "line": 65, }, }, "name": "order", @@ -539,11 +913,11 @@ export const ActionBar: FC = ({ "loc": Object { "end": Object { "column": 1, - "line": 102, + "line": 104, }, "start": Object { "column": 33, - "line": 82, + "line": 84, }, }, "name": "override", @@ -630,11 +1004,11 @@ export const ActionBar: FC = ({ "loc": Object { "end": Object { "column": 1, - "line": 41, + "line": 43, }, "start": Object { "column": 49, - "line": 25, + "line": 27, }, }, "name": "overview", diff --git a/core/webpack-configs/src/react/index.ts b/core/webpack-configs/src/react/index.ts index a9c6cb999..ad8b949b4 100644 --- a/core/webpack-configs/src/react/index.ts +++ b/core/webpack-configs/src/react/index.ts @@ -59,7 +59,7 @@ export const react: PresetType = (options: BuildProps) => { corejs: 3, }, ], - ['@babel/preset-react', { runtime: 'automatic' }], + ['@babel/preset-react', { runtime: 'classic' }], ], }, }, diff --git a/core/webpack-configs/tests/__snapshots__/react.test.ts.snap b/core/webpack-configs/tests/__snapshots__/react.test.ts.snap index a94114dc9..7ad323f09 100644 --- a/core/webpack-configs/tests/__snapshots__/react.test.ts.snap +++ b/core/webpack-configs/tests/__snapshots__/react.test.ts.snap @@ -32,7 +32,7 @@ Object { Array [ "@babel/preset-react", Object { - "runtime": "automatic", + "runtime": "classic", }, ], ], diff --git a/examples/custom-pages-storybook-6/package.json b/examples/custom-pages-storybook-6/package.json index 61688e6ba..3e701c7a3 100644 --- a/examples/custom-pages-storybook-6/package.json +++ b/examples/custom-pages-storybook-6/package.json @@ -20,9 +20,9 @@ "@babel/preset-react": "^7.9.4", "@component-controls/storybook": "^2.6.5", "@component-controls/storybook-custom-docs": "^2.6.0", - "@storybook/addon-docs": "^6.2.0-alpha.3", - "@storybook/client-api": "^6.2.0-alpha.3", - "@storybook/react": "^6.2.0-alpha.3", + "@storybook/addon-docs": "^6.2.0-alpha.29", + "@storybook/client-api": "^6.2.0-alpha.29", + "@storybook/react": "^6.2.0-alpha.29", "babel-loader": "^8.1.0", "prop-types": "^15.7.2", "react": "^17.0.1", diff --git a/examples/gatsby/.config/buildtime.js b/examples/gatsby/.config/buildtime.js index 659adf90d..261b000b9 100644 --- a/examples/gatsby/.config/buildtime.js +++ b/examples/gatsby/.config/buildtime.js @@ -19,7 +19,7 @@ module.exports = { '../../stories/src/stories/*.stories.@(js|jsx|tsx|mdx)', '../../stories/src/stories_native/*.stories.@(js|jsx|tsx|mdx)', '../../stories/src/mdx-stories/*.mdx', - '../../../ui/app/src/**/*.stories.@(js|jsx|tsx|mdx)', + '../../stories/src/catalogs/*.mdx', '../../../ui/components/src/**/*.mdx', '../../../ui/components/src/**/*.stories.@(js|jsx|tsx|mdx)', '../../../ui/blocks/src/**/*.mdx', @@ -30,9 +30,11 @@ module.exports = { '../../../plugins/axe-plugin/src/stories/**/*.stories.@(js|jsx|tsx|mdx)', '../../../plugins/viewport-plugin/src/stories/**/*.stories.@(js|jsx|tsx|mdx)', '../../../plugins/addon-stats/src/stories/**/*.stories.@(js|jsx|tsx|mdx)', + '../../../plugins/addon-catalog/src/stories/**/*.stories.@(js|jsx|tsx|mdx)', '../../../plugins/figma-embed/src/stories/**/*.stories.@(js|jsx|tsx|mdx)', '../../../plugins/addon-notes/src/stories/**/*.stories.@(js|jsx|tsx|mdx)', '../../../plugins/addon-images/src/stories/**/*.stories.@(js|jsx|tsx|mdx)', + '../../../ui/app/src/**/*.stories.@(js|jsx|tsx|mdx)', //'../../stories/src/blogs/introduction-to-controls.mdx', //'../../stories/src/stories/controls-editors-starter.stories.tsx', //'../../stories/src/blogs/gatsby-nextjs-storybook.mdx', diff --git a/examples/gatsby/.config/runtime.tsx b/examples/gatsby/.config/runtime.tsx index 990b2cd25..8c087b79d 100644 --- a/examples/gatsby/.config/runtime.tsx +++ b/examples/gatsby/.config/runtime.tsx @@ -1,11 +1,20 @@ - /** @jsx jsx */ import { jsx, Box, Text } from 'theme-ui'; -import { RunOnlyConfiguration } from "@component-controls/core"; -import { Link } from "@component-controls/components"; +import { RunOnlyConfiguration } from '@component-controls/core'; +import { Link } from '@component-controls/components'; import { OctofaceIcon } from '@primer/octicons-react'; -const categories = ['ESM', 'MDX', 'Application','Controls','Blocks', 'Design Tokens', 'Editors', 'Components', 'Plugins'] +const categories = [ + 'ESM', + 'MDX', + 'Components', + 'Blocks', + 'Design Tokens', + 'Plugins', + 'Controls', + 'Editors', + 'Application', +]; const config: RunOnlyConfiguration = { analytics: 'UA-172446254-1', @@ -16,7 +25,7 @@ const config: RunOnlyConfiguration = { theme: { colors: { // primary: 'pink', - } + }, }, pages: { story: { @@ -41,14 +50,25 @@ const config: RunOnlyConfiguration = { { node: ( - - - - + + + - - twitter - + twitter ), @@ -56,17 +76,22 @@ const config: RunOnlyConfiguration = { { node: ( - + - - github - + github ), }, - ] - } -} + ], + }, +}; -export default config; \ No newline at end of file +export default config; diff --git a/examples/gatsby/package.json b/examples/gatsby/package.json index b43cb4caa..eff0e9cb3 100644 --- a/examples/gatsby/package.json +++ b/examples/gatsby/package.json @@ -14,11 +14,11 @@ "directory": "examples/gatsby" }, "dependencies": { - "@component-controls/axe-plugin": "^2.6.5", + "@component-controls/addon-catalog": "^2.6.5", "@component-controls/blocks": "^2.6.5", "@component-controls/core": "^2.6.3", "@component-controls/gatsby-theme-stories": "^2.6.5", - "@component-controls/viewport-plugin": "^2.6.5", + "@component-controls/pages": "^2.6.5", "@theme-ui/presets": "^0.6.0-alpha.6", "gatsby": "^2.27.4", "react": "^17.0.1", diff --git a/examples/nextjs/.config/buildtime.js b/examples/nextjs/.config/buildtime.js index d5b5ddd3e..cc3e63a0d 100644 --- a/examples/nextjs/.config/buildtime.js +++ b/examples/nextjs/.config/buildtime.js @@ -18,7 +18,7 @@ module.exports = { '../../stories/src/stories/*.stories.@(js|jsx|tsx|mdx)', '../../stories/src/stories_native/*.stories.@(js|jsx|tsx|mdx)', '../../stories/src/mdx-stories/*.mdx', - '../../../ui/app/src/**/*.stories.@(js|jsx|tsx|mdx)', + '../../stories/src/catalogs/*.mdx', '../../../ui/components/src/**/*.mdx', '../../../ui/components/src/**/*.stories.@(js|jsx|tsx|mdx)', '../../../ui/blocks/src/**/*.mdx', @@ -29,9 +29,11 @@ module.exports = { '../../../plugins/axe-plugin/src/stories/**/*.stories.@(js|jsx|tsx|mdx)', '../../../plugins/viewport-plugin/src/stories/**/*.stories.@(js|jsx|tsx|mdx)', '../../../plugins/addon-stats/src/stories/**/*.stories.@(js|jsx|tsx|mdx)', + '../../../plugins/addon-catalog/src/stories/**/*.stories.@(js|jsx|tsx|mdx)', '../../../plugins/figma-embed/src/stories/**/*.stories.@(js|jsx|tsx|mdx)', '../../../plugins/addon-notes/src/stories/**/*.stories.@(js|jsx|tsx|mdx)', '../../../plugins/addon-images/src/stories/**/*.stories.@(js|jsx|tsx|mdx)', + '../../../ui/app/src/**/*.stories.@(js|jsx|tsx|mdx)', // '../../stories/src/blogs/introduction-to-controls.mdx', ], siteUrl: diff --git a/examples/nextjs/.config/runtime.tsx b/examples/nextjs/.config/runtime.tsx index fac51f595..b2446cc3c 100644 --- a/examples/nextjs/.config/runtime.tsx +++ b/examples/nextjs/.config/runtime.tsx @@ -7,13 +7,13 @@ import { OctofaceIcon } from '@primer/octicons-react'; const categories = [ 'ESM', 'MDX', - 'Application', - 'Controls', + 'Components', 'Blocks', 'Design Tokens', - 'Editors', - 'Components', 'Plugins', + 'Controls', + 'Editors', + 'Application', ]; const config: RunOnlyConfiguration = { diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json index 922b3a5fc..4da1bab0b 100644 --- a/examples/nextjs/package.json +++ b/examples/nextjs/package.json @@ -16,11 +16,11 @@ "directory": "examples/nextjs" }, "dependencies": { - "@component-controls/axe-plugin": "^2.6.5", + "@component-controls/addon-catalog": "^2.6.5", "@component-controls/blocks": "^2.6.5", "@component-controls/core": "^2.6.3", "@component-controls/nextjs-plugin": "^2.6.5", - "@component-controls/viewport-plugin": "^2.6.5", + "@component-controls/pages": "^2.6.5", "@theme-ui/presets": "^0.6.0-alpha.6", "next": "^10.0.3", "react": "^17.0.1", diff --git a/examples/stories/src/catalogs/Meta.jsx b/examples/stories/src/catalogs/Meta.jsx new file mode 100644 index 000000000..68539f048 --- /dev/null +++ b/examples/stories/src/catalogs/Meta.jsx @@ -0,0 +1 @@ +export const Meta = () => null; diff --git a/examples/stories/src/catalogs/app.mdx b/examples/stories/src/catalogs/app.mdx new file mode 100644 index 000000000..73a9e8d86 --- /dev/null +++ b/examples/stories/src/catalogs/app.mdx @@ -0,0 +1,21 @@ +import { Meta } from './Meta'; +import { Catalog } from '@component-controls/addon-catalog'; + + + +# Overview + +Components to create a `@component-controls` standalone application, that is connected to the store of documents. + +- Portability between different build systems ie - Gatsby, CRA, Vercel. +- Create a true CMS-type user-interface, allowing for different document types ie. "stories", "blogs", "articles". +- Category pages for "tags", "authors". +- Fully customizable standalone pages, including Home page. +- Responsive user/interface, with sidebars transforming into popouts for small screen resolutions. + +# Components + + doc.title.startsWith('Application')} + group={({ story }) => story.category} +/> diff --git a/examples/stories/src/catalogs/blocks.mdx b/examples/stories/src/catalogs/blocks.mdx new file mode 100644 index 000000000..13c8de68e --- /dev/null +++ b/examples/stories/src/catalogs/blocks.mdx @@ -0,0 +1,32 @@ +import { Meta } from './Meta'; +import { Catalog } from '@component-controls/addon-catalog'; + + + +# Overview + +`@component-controls/blocks` is a library of context-sensitive components to display specific bits of information +about the pages, documents, components and stories in your documentation site. + +- There are thre main categories of components: + - that display information about a page/document. + - that display story data (i.e. story source, story render) + - that display component(s) data (i.e. prop tables, component sources) +- Many of the block components should have a 'plain' and a 'block' version, where the block version adds a collapsible box with a title. +- Some components accept a list of custom ActionItems to be extended. +- Components that deal with source code (story or component source) display actions to browse their respective repositories. + +# Installation + +This package is installed as part of `component-controls` and you should never need to install it manually. + +# Cross-usage + +You can view a table with the [cross-usage](/api/blocks-internal-usage) of the included components + +# Components + + doc.title.startsWith('Blocks')} + group={({ story }) => story.category} +/> diff --git a/examples/stories/src/catalogs/components.mdx b/examples/stories/src/catalogs/components.mdx new file mode 100644 index 000000000..0e0904414 --- /dev/null +++ b/examples/stories/src/catalogs/components.mdx @@ -0,0 +1,37 @@ +import { Meta } from './Meta'; +import { Catalog } from '@component-controls/addon-catalog'; + + + +# Overview + +`@component-controls/components` is an ecclectic collection of [theme-ui](https://theme-ui.com)-based components that are used throughout `component-controls`. + +Third-party libraries used: + +- [prism](https://prismjs.com) for source code syntax highlighting, rendered with [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer). +- [markdown-to-jsx](https://probablyup.com/markdown-to-jsx/) to transform markdown to JSX at runtime. +- [react-table](https://github.com/tannerlinsley/react-table) to display tabular data. +- [octicons](https://octicons.github.com) for icons used in the components. +- [react-tabs](https://reactcommunity.org/react-tabs/) for tabs and multi-page components. +- [react-popper-tooltip](https://react-popper-tooltip.netlify.com) for popups and tooltips. +- [react-animate-height](https://muffinman.io/react-animate-height/) for collapsible components. +- [@theme-ui/presets](https://theme-ui.com/packages/presets/) for custom theming. +- [react-switch](https://github.com/markusenglund/react-switch) for toggle/boolean inputs. + +# Installation + +```bash +$ npm install @component-controls/components --save +``` + +# Cross-usage + +You can view a table with the [cross-usage](/api/components-internal-usage) of the included components + +# Components + + doc.title.startsWith('Components')} + group={({ story }) => story.category} +/> diff --git a/examples/stories/src/catalogs/editors.mdx b/examples/stories/src/catalogs/editors.mdx new file mode 100644 index 000000000..79ecb334a --- /dev/null +++ b/examples/stories/src/catalogs/editors.mdx @@ -0,0 +1,22 @@ +import { Meta } from './Meta'; +import { Catalog } from '@component-controls/addon-catalog'; + + + +# Overview + +`@component-controls/editors` is a collection of control editors part to enable to run-time editing of [controls api](/tutorial/reference/controls-api) properties. + +- Extensible using `addPropertyEditor`, so you can replace or add new editors. +- All editors offer a consistent interface through the `getPropertyEditor` factory. + +# Installation + +This package is installed as part of `component-controls` and you should never need to install it manually. + +# Components + + doc.title.startsWith('Editors')} + group={({ story }) => story.category} +/> diff --git a/examples/stories/src/catalogs/plugins.mdx b/examples/stories/src/catalogs/plugins.mdx new file mode 100644 index 000000000..e35d51226 --- /dev/null +++ b/examples/stories/src/catalogs/plugins.mdx @@ -0,0 +1,16 @@ +import { Meta } from './Meta'; +import { Catalog } from '@component-controls/addon-catalog'; + + + +# Overview + +`component-controls` has a very flexible api that allows creating and installing various plugins. The following are the +official plaugins, please refer to each plugin's own documetation for installation and usage. + +# Components + + doc.title.startsWith('Plugins')} + group={({ story }) => story.category} +/> diff --git a/examples/stories/src/components/VariantButton.tsx b/examples/stories/src/components/VariantButton.tsx index faaaa265c..e7b2f0c17 100644 --- a/examples/stories/src/components/VariantButton.tsx +++ b/examples/stories/src/components/VariantButton.tsx @@ -8,6 +8,11 @@ import { ArrowUpIcon, } from '@primer/octicons-react'; +/** + * @todo Write the documentation. + * @todo Add variant for spinner. + */ + type ButtonVariant = | 'primary' | 'accent' @@ -94,6 +99,12 @@ export interface VariantButtonProps { * padding variants */ padding: SizeVariants; + + /** + * boolean switch for primary variant + * @deprecated since version 1.0 + */ + isPrimary?: boolean; } /** @@ -106,14 +117,16 @@ export const VariantButton: FC = ({ variant = 'primary', iconSide = 'left', padding = 'medium', + isPrimary = false, icon, }) => { const Icon = variant_icons[icon]; + const finalVariant = isPrimary ? 'primary' : variant; return ( -
-
- -
-
- + +
+ + story +
- - story - +
-
@@ -2271,38 +2299,42 @@ exports[`Application/Sidebar Overview 1`] = ` href="/docs/id-of-single" >
- + +
+ + story +
- - story - +
-
@@ -2323,38 +2355,42 @@ exports[`Application/Sidebar Overview 1`] = ` href="/docs/id-of-button-story" >
- + +
+ + button +
- - button - +
-
@@ -2375,38 +2411,42 @@ exports[`Application/Sidebar Overview 1`] = ` href="/docs/blocks-core-story-plain--controls" >
- + +
+ + controls +
- - controls - +
-
@@ -2428,38 +2468,42 @@ exports[`Application/Sidebar Overview 1`] = ` href="/docs/mdx-story" >
- + +
+ + MDX Story +
- - MDX Story - +
-
@@ -2596,13 +2640,17 @@ exports[`Application/SidebarsPage Overview 1`] = `
-

- Story -

+

+ Story +

+

+
-
- - <Button -
+ <Button + +
- ref + + ref + - - - id + + id + +
+ + />
- - /> -
-
- -
-
-
+
- +
- +
+ + + + + Button - - -
- - from - - - "./Button" - +
+ + from + + + "./Button" + +
+
diff --git a/ui/blocks/.eslintignore b/ui/blocks/.eslintignore index 53c37a166..86608912b 100644 --- a/ui/blocks/.eslintignore +++ b/ui/blocks/.eslintignore @@ -1 +1,2 @@ -dist \ No newline at end of file +dist +*.mdx \ No newline at end of file diff --git a/ui/blocks/src/ComponentContributors/ComponentContributors.stories.tsx b/ui/blocks/src/ComponentContributors/ComponentContributors.stories.tsx new file mode 100644 index 000000000..d9f6b0e48 --- /dev/null +++ b/ui/blocks/src/ComponentContributors/ComponentContributors.stories.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { Document, Example } from '@component-controls/core'; +import { ComponentContributors } from './ComponentContributors'; +import { store } from '../test/storyStore'; + +export default { + title: 'Blocks/ComponentContributors', + component: ComponentContributors, + category: ' Component', +} as Document; + +export const overview: Example = () => { + return ; +}; + +export const caption: Example = () => { + return ( + + ); +}; diff --git a/ui/blocks/src/ComponentContributors/ComponentContributors.tsx b/ui/blocks/src/ComponentContributors/ComponentContributors.tsx new file mode 100644 index 000000000..b2dc95c47 --- /dev/null +++ b/ui/blocks/src/ComponentContributors/ComponentContributors.tsx @@ -0,0 +1,57 @@ +/** @jsx jsx */ +import { FC, useMemo } from 'react'; +import { jsx } from 'theme-ui'; +import { Component } from '@component-controls/core'; +import { + GithubAvatarList, + GithubAvatarListProps, + GithubAvatarUser, +} from '@component-controls/components'; +import { useCustomProps } from '../context'; + +export interface ComponentContributorsProps { + caption?: string; + component?: Component; +} + +export const ComponentContributors: FC> = ({ caption, component, ...rest }) => { + const props = useCustomProps>( + 'component_contributors', + rest, + ); + + const contributors = useMemo(() => { + if (!component?.fileInfo?.commits?.length) { + return []; + } + return component.fileInfo.commits.reduce( + (acc: GithubAvatarUser[], commit) => { + if (!acc.find(a => a.username === commit.authorName)) { + if (commit.authorName) { + acc.push({ + username: commit.authorName, + useremail: commit.authorEmail, + }); + } + } + if (!acc.find(a => a.username === commit.committerName)) { + if (commit.committerName) { + acc.push({ + username: commit.committerName, + useremail: commit.committerEmail, + }); + } + } + return acc; + }, + [], + ); + }, [component?.fileInfo?.commits]); + return !!contributors.length ? ( +
+ {caption &&
{caption}
} + +
+ ) : null; +}; diff --git a/ui/blocks/src/ComponentContributors/index.ts b/ui/blocks/src/ComponentContributors/index.ts new file mode 100644 index 000000000..a4e9c8d06 --- /dev/null +++ b/ui/blocks/src/ComponentContributors/index.ts @@ -0,0 +1 @@ +export * from './ComponentContributors'; diff --git a/ui/blocks/src/ComponentDependencies/ComponentDependencies.tsx b/ui/blocks/src/ComponentDependencies/ComponentDependencies.tsx deleted file mode 100644 index c7909ded2..000000000 --- a/ui/blocks/src/ComponentDependencies/ComponentDependencies.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import React, { FC } from 'react'; -import { useComponent } from '@component-controls/store'; -import { - ComponentsBlockContainer, - ComponentsBlockContainerProps, -} from '../BlockContainer/components/ComponentsBlockContainer'; -import { ExternalDependencies } from './ExternalDependencies'; -import { LocalDependencies } from './LocalDependencies'; -import { useCustomProps } from '../context'; - -export type ComponentDepsProps = {} & Omit< - ComponentsBlockContainerProps, - 'children' ->; -/** - * Displays external dependencies for a component - */ - -export const ComponentExternalDependencies: FC = fullProps => { - const props = useCustomProps( - 'external_dependencies', - fullProps, - ); - - const component = useComponent({ of: props.of }); - if (!component) { - return null; - } - const { externalDependencies } = component; - if (!externalDependencies || !Object.keys(externalDependencies).length) { - return null; - } - return ( - - {(component, rest) => ( - - )} - - ); -}; - -/** - * Displays local dependencies for a component - */ - -export const ComponentLocalDependencies: FC = fullProps => { - const props = useCustomProps( - 'local_dependencies', - fullProps, - ); - const component = useComponent({ of: props.of }); - if (!component) { - return null; - } - const { localDependencies } = component; - if (!localDependencies || !Object.keys(localDependencies).length) { - return null; - } - - return ( - - {(component, rest) => ( - - )} - - ); -}; diff --git a/ui/blocks/src/ComponentDependencies/ComponentDeps.stories.tsx b/ui/blocks/src/ComponentDependencies/ComponentDeps.stories.tsx deleted file mode 100644 index 15322aa57..000000000 --- a/ui/blocks/src/ComponentDependencies/ComponentDeps.stories.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; -import { Document, Example } from '@component-controls/core'; -import { - ComponentExternalDependencies, - ComponentLocalDependencies, -} from './ComponentDependencies'; -import { mockDecorators } from '../test/MockContext'; - -export default { - title: 'Blocks/ComponentDependencies', - component: ComponentExternalDependencies, - decorators: mockDecorators, -} as Document; - -export const overview: Example = () => ; - -export const localDependencies: Example = () => ; diff --git a/ui/blocks/src/ComponentDependencies/ComponentExternalDependencies.tsx b/ui/blocks/src/ComponentDependencies/ComponentExternalDependencies.tsx new file mode 100644 index 000000000..2d9677060 --- /dev/null +++ b/ui/blocks/src/ComponentDependencies/ComponentExternalDependencies.tsx @@ -0,0 +1,128 @@ +/* eslint-disable react/display-name */ +/** @jsx jsx */ +import { FC, useMemo } from 'react'; +import { jsx, Flex } from 'theme-ui'; +import { defaultExport, Component, ImportType } from '@component-controls/core'; +import { usePackage } from '@component-controls/store'; +import { Table, Column, Tag } from '@component-controls/components'; +import { PackageLink } from '../PackageLink/PackageLink'; +export interface ComponentExternalDependenciesProps { + component?: Component; +} + +/** + * base component dependencies + */ + +export const ComponentExternalDependencies: FC = ({ + component, +}) => { + type DataType = { + name: string; + imports: ImportType[]; + peer: boolean; + }; + const componentPackage = usePackage(component?.package); + const { + privateNpm, + dependencies = {}, + devDependencies = {}, + peerDependencies = {}, + } = componentPackage || {}; + const { externalDependencies: imports = {} } = component || {}; + const columns = useMemo( + () => + [ + { + Header: 'package', + accessor: 'name', + Cell: ({ + row: { + original: { name }, + }, + }: any) => + privateNpm !== true ? ( + + ) : null, + }, + { + Header: 'imports', + accessor: 'imports', + width: '70%', + Cell: ({ value }: { value: ImportType[] }) => ( + + {value.map(v => ( + + {v.importedName === defaultExport ? v.name : v.importedName} + + ))} + + ), + }, + { + Header: 'peer', + accessor: 'peer', + Cell: ({ value }: { value: boolean }) => (value ? '*' : ''), + }, + ] as Column[], + [privateNpm, dependencies, devDependencies], + ); + const rows: DataType[] = useMemo(() => { + const dependenciesKeys = Object.keys(dependencies); + const devDependenciesKeys = Object.keys(devDependencies); + const peerDependenciesKeys = + peerDependencies && Object.keys(peerDependencies); + return Object.keys(imports) + .map(name => { + const packageName: string | undefined = + (dependenciesKeys && + dependenciesKeys.find(packageName => + name.startsWith(packageName), + )) || + (devDependenciesKeys && + devDependenciesKeys.find(packageName => + name.startsWith(packageName), + )); + return { + name, + imports: [...(imports[name] as ImportType[])].sort((a, b) => { + if (a.importedName === defaultExport) { + return -1; + } else if (b.importedName === defaultExport) { + return 1; + } + if (a.importedName > b.importedName) { + return -1; + } else if (a.importedName < b.importedName) { + return 1; + } + return 0; + }), + peer: packageName + ? peerDependenciesKeys.includes(packageName) + : false, + }; + }) + .sort((a, b) => a.name.localeCompare(b.name)); + }, [dependencies, devDependencies, imports, peerDependencies]); + if (!imports) { + return null; + } + + return data={rows} columns={columns} />; +}; diff --git a/ui/blocks/src/ComponentDependencies/ComponentLocalDependencies.tsx b/ui/blocks/src/ComponentDependencies/ComponentLocalDependencies.tsx new file mode 100644 index 000000000..427409c8d --- /dev/null +++ b/ui/blocks/src/ComponentDependencies/ComponentLocalDependencies.tsx @@ -0,0 +1,94 @@ +/* eslint-disable react/display-name */ +/** @jsx jsx */ +import { FC, useMemo } from 'react'; +import { jsx, Flex, Text } from 'theme-ui'; +import { Component, JSXNode } from '@component-controls/core'; +import { Table, Column } from '@component-controls/components'; +import { LocalImport } from '../PackageLink'; +export interface ComponentLocalDependenciesProps { + component?: Component; +} + +type TableImportTypeRow = { + from: string; + imports: Omit[]; +}; +type TableImportType = TableImportTypeRow[]; + +/** + * base component dependencies + */ + +export const ComponentLocalDependencies: FC = ({ + component, +}) => { + const imports: TableImportType = useMemo(() => { + const { localDependencies } = component || {}; + return localDependencies + ? Object.keys(localDependencies).reduce( + (acc: TableImportType, key: string) => [ + ...acc, + { + from: key, + imports: localDependencies[key], + }, + ], + [], + ) + : []; + }, [component]); + const columns = useMemo( + () => + [ + { + Header: 'file', + accessor: 'name', + Cell: ({ + row: { + original: { from }, + }, + }: any) => ( + {`"${from}"`} + ), + }, + { + Header: 'imports', + accessor: 'imports', + Cell: ({ value }: { value: JSXNode[] }) => ( + + {value.map(node => ( + + ))} + + ), + }, + ] as Column[], + [], + ); + + if (!imports) { + return null; + } + + return ( + + data-testid="local-dependencies" + data={imports} + columns={columns} + /> + ); +}; diff --git a/ui/blocks/src/ComponentDependencies/ExternalDependencies.stories.tsx b/ui/blocks/src/ComponentDependencies/ExternalDependencies.stories.tsx new file mode 100644 index 000000000..649b38baa --- /dev/null +++ b/ui/blocks/src/ComponentDependencies/ExternalDependencies.stories.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { Document, Example } from '@component-controls/core'; +import { ExternalDependencies } from './ExternalDependencies'; +import { mockDecorators } from '../test/MockContext'; + +export default { + title: 'Blocks/ExternalDependencies', + component: ExternalDependencies, + decorators: mockDecorators, + category: ' Component', +} as Document; + +export const overview: Example = () => ; diff --git a/ui/blocks/src/ComponentDependencies/ExternalDependencies.tsx b/ui/blocks/src/ComponentDependencies/ExternalDependencies.tsx index b44f3aaf3..68ccad803 100644 --- a/ui/blocks/src/ComponentDependencies/ExternalDependencies.tsx +++ b/ui/blocks/src/ComponentDependencies/ExternalDependencies.tsx @@ -1,123 +1,33 @@ -/* eslint-disable react/display-name */ -/** @jsx jsx */ -import { FC, useMemo } from 'react'; -import { jsx, Flex } from 'theme-ui'; -import { defaultExport, Component, ImportType } from '@component-controls/core'; -import { usePackage } from '@component-controls/store'; -import { Table, Column, Tag } from '@component-controls/components'; -import { PackageLink } from '../PackageLink/PackageLink'; -export interface ExternalDependenciesProps { - component?: Component; -} +import React, { FC } from 'react'; +import { useComponent } from '@component-controls/store'; +import { ComponentsBlockContainer } from '../BlockContainer/components/ComponentsBlockContainer'; +import { ComponentExternalDependencies } from './ComponentExternalDependencies'; +import { DependenciesProps } from './types'; +import { useCustomProps } from '../context'; /** - * base component dependencies + * Displays external dependencies for a component */ -export const ExternalDependencies: FC = ({ - component, -}) => { - type DataType = { - name: string; - imports: ImportType[]; - peer: boolean; - }; - const componentPackage = usePackage(component?.package); - const { dependencies = {}, devDependencies = {}, peerDependencies = {} } = - componentPackage || {}; - const { externalDependencies: imports = {} } = component || {}; - const columns = useMemo( - () => - [ - { - Header: 'package', - accessor: 'name', - Cell: ({ - row: { - original: { name }, - }, - }: any) => ( - - ), - }, - { - Header: 'imports', - accessor: 'imports', - width: '70%', - Cell: ({ value }: { value: ImportType[] }) => ( - - {value.map(v => ( - - {v.importedName === defaultExport ? v.name : v.importedName} - - ))} - - ), - }, - { - Header: 'peer', - accessor: 'peer', - Cell: ({ value }: { value: boolean }) => (value ? '*' : ''), - }, - ] as Column[], - [dependencies, devDependencies], +export const ExternalDependencies: FC = fullProps => { + const props = useCustomProps( + 'external_dependencies', + fullProps, ); - const rows: DataType[] = useMemo(() => { - const dependenciesKeys = Object.keys(dependencies); - const devDependenciesKeys = Object.keys(devDependencies); - const peerDependenciesKeys = - peerDependencies && Object.keys(peerDependencies); - return Object.keys(imports) - .map(name => { - const packageName: string | undefined = - (dependenciesKeys && - dependenciesKeys.find(packageName => - name.startsWith(packageName), - )) || - (devDependenciesKeys && - devDependenciesKeys.find(packageName => - name.startsWith(packageName), - )); - return { - name, - imports: [...(imports[name] as ImportType[])].sort((a, b) => { - if (a.importedName === defaultExport) { - return -1; - } else if (b.importedName === defaultExport) { - return 1; - } - if (a.importedName > b.importedName) { - return -1; - } else if (a.importedName < b.importedName) { - return 1; - } - return 0; - }), - peer: packageName - ? peerDependenciesKeys.includes(packageName) - : false, - }; - }) - .sort((a, b) => a.name.localeCompare(b.name)); - }, [dependencies, devDependencies, imports, peerDependencies]); - if (!imports) { + + const component = useComponent({ of: props.of }); + if (!component) { return null; } - - return data={rows} columns={columns} />; + const { externalDependencies } = component; + if (!externalDependencies || !Object.keys(externalDependencies).length) { + return null; + } + return ( + + {(component, rest) => ( + + )} + + ); }; diff --git a/ui/blocks/src/ComponentDependencies/LocalDependencies.stories.tsx b/ui/blocks/src/ComponentDependencies/LocalDependencies.stories.tsx new file mode 100644 index 000000000..e968cec45 --- /dev/null +++ b/ui/blocks/src/ComponentDependencies/LocalDependencies.stories.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { Document, Example } from '@component-controls/core'; +import { LocalDependencies } from './LocalDependencies'; +import { mockDecorators } from '../test/MockContext'; + +export default { + title: 'Blocks/LocalDependencies', + component: LocalDependencies, + decorators: mockDecorators, + category: ' Component', +} as Document; + +export const overview: Example = () => ; diff --git a/ui/blocks/src/ComponentDependencies/LocalDependencies.tsx b/ui/blocks/src/ComponentDependencies/LocalDependencies.tsx index f68022f34..67a0681e9 100644 --- a/ui/blocks/src/ComponentDependencies/LocalDependencies.tsx +++ b/ui/blocks/src/ComponentDependencies/LocalDependencies.tsx @@ -1,94 +1,33 @@ -/* eslint-disable react/display-name */ -/** @jsx jsx */ -import { FC, useMemo } from 'react'; -import { jsx, Flex, Text } from 'theme-ui'; -import { Component, JSXNode } from '@component-controls/core'; -import { Table, Column } from '@component-controls/components'; -import { LocalImport } from '../PackageLink'; -export interface LocalDependenciesProps { - component?: Component; -} - -type TableImportTypeRow = { - from: string; - imports: Omit[]; -}; -type TableImportType = TableImportTypeRow[]; +import React, { FC } from 'react'; +import { useComponent } from '@component-controls/store'; +import { ComponentsBlockContainer } from '../BlockContainer/components/ComponentsBlockContainer'; +import { ComponentLocalDependencies } from './ComponentLocalDependencies'; +import { DependenciesProps } from './types'; +import { useCustomProps } from '../context'; /** - * base component dependencies + * Displays local dependencies for a component */ -export const LocalDependencies: FC = ({ - component, -}) => { - const imports: TableImportType = useMemo(() => { - const { localDependencies } = component || {}; - return localDependencies - ? Object.keys(localDependencies).reduce( - (acc: TableImportType, key: string) => [ - ...acc, - { - from: key, - imports: localDependencies[key], - }, - ], - [], - ) - : []; - }, [component]); - const columns = useMemo( - () => - [ - { - Header: 'file', - accessor: 'name', - Cell: ({ - row: { - original: { from }, - }, - }: any) => ( - {`"${from}"`} - ), - }, - { - Header: 'imports', - accessor: 'imports', - Cell: ({ value }: { value: JSXNode[] }) => ( - - {value.map(node => ( - - ))} - - ), - }, - ] as Column[], - [], +export const LocalDependencies: FC = fullProps => { + const props = useCustomProps( + 'local_dependencies', + fullProps, ); - - if (!imports) { + const component = useComponent({ of: props.of }); + if (!component) { + return null; + } + const { localDependencies } = component; + if (!localDependencies || !Object.keys(localDependencies).length) { return null; } return ( - - data-testid="local-dependencies" - data={imports} - columns={columns} - /> + + {(component, rest) => ( + + )} + ); }; diff --git a/ui/blocks/src/ComponentDependencies/index.ts b/ui/blocks/src/ComponentDependencies/index.ts index 70ff58316..f8acdd9a7 100644 --- a/ui/blocks/src/ComponentDependencies/index.ts +++ b/ui/blocks/src/ComponentDependencies/index.ts @@ -1 +1,3 @@ -export * from './ComponentDependencies'; +export * from './ExternalDependencies'; +export * from './LocalDependencies'; +export * from './types'; diff --git a/ui/blocks/src/ComponentDependencies/types.ts b/ui/blocks/src/ComponentDependencies/types.ts new file mode 100644 index 000000000..27fde3450 --- /dev/null +++ b/ui/blocks/src/ComponentDependencies/types.ts @@ -0,0 +1,6 @@ +import { ComponentsBlockContainerProps } from '../BlockContainer/components/ComponentsBlockContainer'; + +export type DependenciesProps = {} & Omit< + ComponentsBlockContainerProps, + 'children' +>; diff --git a/ui/blocks/src/ComponentJSX/ComponentJSX.stories.tsx b/ui/blocks/src/ComponentJSX/ComponentJSX.stories.tsx index 1937d0d1c..58c7f2e04 100644 --- a/ui/blocks/src/ComponentJSX/ComponentJSX.stories.tsx +++ b/ui/blocks/src/ComponentJSX/ComponentJSX.stories.tsx @@ -7,6 +7,7 @@ export default { title: 'Blocks/ComponentJSX', component: ComponentJSX, decorators: mockDecorators, + category: ' Component', } as Document; export const overview: Example = () => ; diff --git a/ui/blocks/src/ComponentJSX/ComponentJSXTree.tsx b/ui/blocks/src/ComponentJSX/ComponentJSXTree.tsx index b1afe2207..85d4e3469 100644 --- a/ui/blocks/src/ComponentJSX/ComponentJSXTree.tsx +++ b/ui/blocks/src/ComponentJSX/ComponentJSXTree.tsx @@ -1,6 +1,6 @@ /* eslint-disable react/display-name */ import React, { FC, useMemo, useEffect, useReducer } from 'react'; -import { TriangleDownIcon, TriangleRightIcon } from '@primer/octicons-react'; +import { TriangleDownIcon } from '@primer/octicons-react'; import { Component, JSXTree, isLocalImport } from '@component-controls/core'; import { usePackage } from '@component-controls/store'; import { @@ -174,8 +174,7 @@ export const ComponentJSXTree: FC = ({ component }) => { arrowPosition="start" onExpandCollapse={onExpandCollapse} items={rows} - iconExpanded={} - iconCollapsed={} + chevronIcon={} indentPixels={16} /> diff --git a/ui/blocks/src/ComponentSource/BaseComponentSource.tsx b/ui/blocks/src/ComponentSource/BaseComponentSource.tsx index 20b08eab1..1eef40c88 100644 --- a/ui/blocks/src/ComponentSource/BaseComponentSource.tsx +++ b/ui/blocks/src/ComponentSource/BaseComponentSource.tsx @@ -1,13 +1,17 @@ -import React, { FC, useState } from 'react'; +/** @jsx jsx */ +import { FC, useState } from 'react'; +import { jsx } from 'theme-ui'; import { Component } from '@component-controls/core'; import { usePackage } from '@component-controls/store'; import { + ActionContainer, ActionItem, Source, SourceProps, } from '@component-controls/components'; import { useCustomProps } from '../context'; import { repositoryActions } from '../utils/repositoryActions'; +import { ComponentStats } from '../ComponentStats'; export interface BaseComponentSourceOwnProps { component: Component; @@ -17,13 +21,33 @@ const NAME = 'componentsource'; export type BaseComponentSourceProps = BaseComponentSourceOwnProps & SourceProps; +type ShowType = 'import' | 'source' | 'stats'; + +const getNextState = (current: ShowType, component: Component): ShowType => { + switch (current) { + case 'import': + return component.source + ? 'source' + : component.fileInfo + ? 'stats' + : 'import'; + case 'source': + return component.fileInfo ? 'stats' : 'import'; + case 'stats': + default: + return 'import'; + } +}; export const BaseComponentSource: FC = props => { - const [showFileSource, setShowFileSource] = useState(false); + const [showType, setShowType] = useState('import'); const custom = useCustomProps(NAME, props); const { component, actions, ...rest } = custom; + if (!component) { + return null; + } let source; - const componentPackage = usePackage(component?.package); - const { from, importedName, name: componentName } = component || {}; + const componentPackage = usePackage(component.package); + const { from, importedName, name: componentName } = component; const importFrom = componentPackage && componentPackage.name ? componentPackage.name : from; if (importFrom) { @@ -36,13 +60,19 @@ export const BaseComponentSource: FC = props => { return null; } - const onShowFileSource = () => setShowFileSource(!showFileSource); + const onShowClick = () => { + setShowType(getNextState(showType, component)); + }; const allActions: ActionItem[] = []; - if (component && component.source) { + if (component.source || component.fileInfo) { allActions.push({ - node: showFileSource ? 'import' : 'source', - onClick: onShowFileSource, + node: getNextState(showType, component), + 'aria-label': `view ${component.name} ${getNextState( + showType, + component, + )}`, + onClick: onShowClick, }); } const repositoryItems = component && repositoryActions(componentPackage); @@ -52,9 +82,13 @@ export const BaseComponentSource: FC = props => { if (actions) { allActions.push(...actions); } - return ( + return showType === 'stats' ? ( + + + + ) : ( - {showFileSource ? component?.source ?? '' : source} + {showType === 'source' ? component?.source ?? '' : source} ); }; diff --git a/ui/blocks/src/ComponentSource/ComponentSource.stories.tsx b/ui/blocks/src/ComponentSource/ComponentSource.stories.tsx index e278d5284..f17158630 100644 --- a/ui/blocks/src/ComponentSource/ComponentSource.stories.tsx +++ b/ui/blocks/src/ComponentSource/ComponentSource.stories.tsx @@ -7,6 +7,7 @@ import { makeDecorators } from '../test/MockContext'; export default { title: 'Blocks/ComponentSource', component: ComponentSource, + category: ' Component', } as Document; export const overview: Example = () => ; diff --git a/ui/blocks/src/ComponentStats/ComponentStats.tsx b/ui/blocks/src/ComponentStats/ComponentStats.tsx new file mode 100644 index 000000000..2ddca475a --- /dev/null +++ b/ui/blocks/src/ComponentStats/ComponentStats.tsx @@ -0,0 +1,40 @@ +/** @jsx jsx */ +import { FC } from 'react'; +import { jsx, BoxProps } from 'theme-ui'; +import { Component } from '@component-controls/core'; +import { Value } from '@component-controls/components'; + +export const ComponentStats: FC<{ component?: Component } & BoxProps> = ({ + component, + ...rest +}) => { + if (!component) { + return null; + } + + const stats = component.fileInfo?.sloc; + return stats ? ( +
+ {!!component.fileInfo?.commits?.length && ( + + )} + + + {!!stats.todo && } +
+ ) : null; +}; diff --git a/ui/blocks/src/ComponentStats/index.ts b/ui/blocks/src/ComponentStats/index.ts new file mode 100644 index 000000000..681a99ea0 --- /dev/null +++ b/ui/blocks/src/ComponentStats/index.ts @@ -0,0 +1 @@ +export * from './ComponentStats'; diff --git a/ui/blocks/src/Container/Container.stories.tsx b/ui/blocks/src/Container/Container.stories.tsx index b5a2d200f..5df2748ee 100644 --- a/ui/blocks/src/Container/Container.stories.tsx +++ b/ui/blocks/src/Container/Container.stories.tsx @@ -7,6 +7,7 @@ export default { title: 'Blocks/Container', component: Container, decorators: mockDecorators, + category: 'Page', } as Document; export const overview: Example = () => ; diff --git a/ui/blocks/src/Container/Container.tsx b/ui/blocks/src/Container/Container.tsx index e443972bc..f4f41468c 100644 --- a/ui/blocks/src/Container/Container.tsx +++ b/ui/blocks/src/Container/Container.tsx @@ -47,7 +47,7 @@ export const Container: FC = ({ {secondRow} )} - + <Title sx={{ pb: 0 }} /> </Box> <Subtitle /> diff --git a/ui/blocks/src/Description/Description.stories.tsx b/ui/blocks/src/Description/Description.stories.tsx index 358a91b6c..b23b1b03c 100644 --- a/ui/blocks/src/Description/Description.stories.tsx +++ b/ui/blocks/src/Description/Description.stories.tsx @@ -8,6 +8,7 @@ export default { title: 'Blocks/Description', component: Description, decorators: mockDecorators, + category: 'Page', } as Document; export const overview: Example = () => <Description of="Button" />; diff --git a/ui/blocks/src/DocumentItem/DocumentItem.stories.tsx b/ui/blocks/src/DocumentItem/DocumentItem.stories.tsx index 3ca8548a5..65da196e2 100644 --- a/ui/blocks/src/DocumentItem/DocumentItem.stories.tsx +++ b/ui/blocks/src/DocumentItem/DocumentItem.stories.tsx @@ -8,6 +8,7 @@ export default { title: 'Blocks/DocumentItem', component: DocumentItem, decorators: mockDecorators, + category: 'Document', } as Document; export const overview: Example = () => { diff --git a/ui/blocks/src/EditPage/EditPage.stories.tsx b/ui/blocks/src/EditPage/EditPage.stories.tsx index ddd988e27..61325e7eb 100644 --- a/ui/blocks/src/EditPage/EditPage.stories.tsx +++ b/ui/blocks/src/EditPage/EditPage.stories.tsx @@ -7,6 +7,7 @@ export default { title: 'Blocks/EditPage', component: EditPage, decorators: mockDecorators, + category: 'Page', } as Document; export const overview: Example = () => <EditPage />; diff --git a/ui/blocks/src/PackageLink/PackageLink.tsx b/ui/blocks/src/PackageLink/PackageLink.tsx index 3dee259ce..a1b45211a 100644 --- a/ui/blocks/src/PackageLink/PackageLink.tsx +++ b/ui/blocks/src/PackageLink/PackageLink.tsx @@ -51,7 +51,14 @@ export const PackageLink: FC<PackageLinkProps> = ({ } const baseVersion = packageVersion.replace(/[\^=~]/, ''); return ( - <Box sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}> + <Box + sx={{ + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + my: 1, + }} + > <ExternalLink href={`https://npmjs.com/package/${packageName}/v/${baseVersion}`} > diff --git a/ui/blocks/src/PackageLink/PackageVersion.tsx b/ui/blocks/src/PackageLink/PackageVersion.tsx index cf0fda530..28535529b 100644 --- a/ui/blocks/src/PackageLink/PackageVersion.tsx +++ b/ui/blocks/src/PackageLink/PackageVersion.tsx @@ -16,7 +16,7 @@ import { PackageLink } from './PackageLink'; export const PackageVersion: FC<ComponentInputProps> = props => { const component = useComponent(props); const componentPackage = usePackage(component?.package); - return componentPackage?.name ? ( + return componentPackage?.name && componentPackage.privateNpm !== true ? ( <PackageLink name={componentPackage.name} version={componentPackage.version} diff --git a/ui/blocks/src/PageContainer/PageContainer.stories.tsx b/ui/blocks/src/PageContainer/PageContainer.stories.tsx index bf15b007d..31fae7bde 100644 --- a/ui/blocks/src/PageContainer/PageContainer.stories.tsx +++ b/ui/blocks/src/PageContainer/PageContainer.stories.tsx @@ -8,6 +8,7 @@ import { Title } from '../Title'; export default { title: 'Blocks/PageContainer', component: PageContainer, + category: 'Page', } as Document; export const overview: Example = () => <Title />; diff --git a/ui/blocks/src/PageTypeTag/PageTypeTag.stories.tsx b/ui/blocks/src/PageTypeTag/PageTypeTag.stories.tsx index 338e03deb..22efabf95 100644 --- a/ui/blocks/src/PageTypeTag/PageTypeTag.stories.tsx +++ b/ui/blocks/src/PageTypeTag/PageTypeTag.stories.tsx @@ -7,6 +7,7 @@ export default { title: 'Blocks/PageTypeTag', component: PageTypeTag, decorators: mockDecorators, + category: 'Document', } as Document; export const overview: Example = () => <PageTypeTag type="story" />; diff --git a/ui/blocks/src/Pagination/Pagination.stories.tsx b/ui/blocks/src/Pagination/Pagination.stories.tsx index 6d3b7af7a..6c470cdd6 100644 --- a/ui/blocks/src/Pagination/Pagination.stories.tsx +++ b/ui/blocks/src/Pagination/Pagination.stories.tsx @@ -8,6 +8,7 @@ export default { title: 'Blocks/Pagination', component: Pagination, decorators: mockDecorators, + category: 'Page', } as Document; export const overview: Example = () => <Pagination />; diff --git a/ui/blocks/src/Playground/Playground.stories.tsx b/ui/blocks/src/Playground/Playground.stories.tsx index cb6717e0e..bf81af6c2 100644 --- a/ui/blocks/src/Playground/Playground.stories.tsx +++ b/ui/blocks/src/Playground/Playground.stories.tsx @@ -8,6 +8,7 @@ import { makeDecorators } from '../test/MockContext'; export default { title: 'Blocks/Playground/ESM', component: Playground, + category: 'Stories', } as Document; export const overview: Example = () => ( diff --git a/ui/blocks/src/PropsTable/PropsTable.stories.tsx b/ui/blocks/src/PropsTable/PropsTable.stories.tsx index 791f5cee0..ac55a90e8 100644 --- a/ui/blocks/src/PropsTable/PropsTable.stories.tsx +++ b/ui/blocks/src/PropsTable/PropsTable.stories.tsx @@ -7,6 +7,7 @@ import { makeDecorators } from '../test/MockContext'; export default { title: 'Blocks/PropsTable', component: PropsTable, + category: 'Component', } as Document; export const overview: Example = () => <PropsTable />; diff --git a/ui/blocks/src/Search/Search.stories.tsx b/ui/blocks/src/Search/Search.stories.tsx index 9492aa71b..a962a21da 100644 --- a/ui/blocks/src/Search/Search.stories.tsx +++ b/ui/blocks/src/Search/Search.stories.tsx @@ -6,6 +6,7 @@ export default { title: 'Blocks/Search', component: Search, decorators: mockDecorators, + category: 'Document', } as Document; export const overview: Example = () => <Search />; diff --git a/ui/blocks/src/Stories/Stories.stories.tsx b/ui/blocks/src/Stories/Stories.stories.tsx index bc86519e6..a201d1888 100644 --- a/ui/blocks/src/Stories/Stories.stories.tsx +++ b/ui/blocks/src/Stories/Stories.stories.tsx @@ -7,6 +7,7 @@ export default { title: 'Blocks/Stories', component: Stories, decorators: mockDecorators, + category: 'Stories', } as Document; export const overview: Example = () => <Stories id="." />; diff --git a/ui/blocks/src/Story/Story.stories.tsx b/ui/blocks/src/Story/Story.stories.tsx index 6202d725f..b0db469f9 100644 --- a/ui/blocks/src/Story/Story.stories.tsx +++ b/ui/blocks/src/Story/Story.stories.tsx @@ -6,6 +6,7 @@ import { makeDecorators } from '../test/MockContext'; export default { title: 'Blocks/Story', component: Story, + category: 'Stories', } as Document; export const overview: Example = () => <Story id="." />; diff --git a/ui/blocks/src/StoryConfig/StoryConfig.stories.tsx b/ui/blocks/src/StoryConfig/StoryConfig.stories.tsx index dc881e09b..262be24dc 100644 --- a/ui/blocks/src/StoryConfig/StoryConfig.stories.tsx +++ b/ui/blocks/src/StoryConfig/StoryConfig.stories.tsx @@ -17,6 +17,7 @@ import { makeDecorators } from '../test/MockContext'; export default { title: 'Blocks/StoryConfig', component: StoryConfig, + category: 'Stories', } as Document; export const overview: Example = () => <StoryConfig id="." />; diff --git a/ui/blocks/src/StorySource/StorySource.stories.tsx b/ui/blocks/src/StorySource/StorySource.stories.tsx index 78a39d7ee..6c28819f1 100644 --- a/ui/blocks/src/StorySource/StorySource.stories.tsx +++ b/ui/blocks/src/StorySource/StorySource.stories.tsx @@ -17,6 +17,7 @@ import { makeDecorators } from '../test/MockContext'; export default { title: 'Blocks/StorySource', component: StorySource, + category: 'Stories', } as Document; export const overview: Example = () => <StorySource id="." />; diff --git a/ui/blocks/src/Subtitle/Subtitle.stories.tsx b/ui/blocks/src/Subtitle/Subtitle.stories.tsx index b37d4b1cd..71481442f 100644 --- a/ui/blocks/src/Subtitle/Subtitle.stories.tsx +++ b/ui/blocks/src/Subtitle/Subtitle.stories.tsx @@ -7,6 +7,7 @@ export default { title: 'Blocks/Subtitle', component: Subtitle, decorators: mockDecorators, + category: 'Page', } as Document; export const overview: Example = () => <Subtitle />; diff --git a/ui/blocks/src/TagsList/TagsList.stories.tsx b/ui/blocks/src/TagsList/TagsList.stories.tsx index 094854e97..b19dd38fc 100644 --- a/ui/blocks/src/TagsList/TagsList.stories.tsx +++ b/ui/blocks/src/TagsList/TagsList.stories.tsx @@ -7,6 +7,7 @@ export default { title: 'Blocks/TagsList', component: TagsList, decorators: mockDecorators, + category: 'Document', } as Document; export const overview: Example = () => <TagsList tags={['atanasster']} />; diff --git a/ui/blocks/src/Title/Title.stories.tsx b/ui/blocks/src/Title/Title.stories.tsx index a160e4d52..b3e65aa09 100644 --- a/ui/blocks/src/Title/Title.stories.tsx +++ b/ui/blocks/src/Title/Title.stories.tsx @@ -7,6 +7,7 @@ export default { title: 'Blocks/Title', component: Title, decorators: mockDecorators, + category: 'Page', } as Document; export const overview: Example = () => <Title />; diff --git a/ui/blocks/src/Title/Title.tsx b/ui/blocks/src/Title/Title.tsx index 282a9d1d1..9624109d0 100644 --- a/ui/blocks/src/Title/Title.tsx +++ b/ui/blocks/src/Title/Title.tsx @@ -1,8 +1,6 @@ -import React, { FC } from 'react'; -import { - Title as TitleBlock, - TitleProps as TitlePropsBase, -} from '@component-controls/components'; +/** @jsx jsx */ +import { FC } from 'react'; +import { jsx, Themed, BoxProps } from 'theme-ui'; import { useStory, useDocument, @@ -10,13 +8,21 @@ import { StoryInputProps, } from '@component-controls/store'; import { getStoryTitle } from '../utils'; +import { ComponentContributors } from '../ComponentContributors'; -export type TitleProps = StoryInputProps & TitlePropsBase; +export type TitleProps = { contributors?: boolean } & StoryInputProps & + BoxProps; /** * displays a title as assigned to the story document */ -export const Title: FC<TitleProps> = ({ id, name, children, ...rest }) => { +export const Title: FC<TitleProps> = ({ + id, + name, + contributors = true, + children, + ...rest +}) => { const story = useStory({ id, name, @@ -28,5 +34,18 @@ export const Title: FC<TitleProps> = ({ id, name, children, ...rest }) => { }); const title = typeof children === 'string' ? children : getStoryTitle(doc, component); - return title ? <TitleBlock {...rest}>{title}</TitleBlock> : null; + return title ? ( + <div + sx={{ + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }} + {...rest} + > + <Themed.h1>{title}</Themed.h1> + {contributors && <ComponentContributors component={component} />} + </div> + ) : null; }; diff --git a/ui/blocks/src/index.ts b/ui/blocks/src/index.ts index c8d2f03e6..831510853 100644 --- a/ui/blocks/src/index.ts +++ b/ui/blocks/src/index.ts @@ -1,8 +1,10 @@ export * from './BlockContainer'; export * from './context'; +export * from './ComponentContributors'; export * from './ComponentDependencies'; export * from './ComponentJSX'; export * from './ComponentSource'; +export * from './ComponentStats'; export * from './Container'; export * from './Description'; export * from './DocumentItem'; diff --git a/ui/blocks/src/test/storyStore.tsx b/ui/blocks/src/test/storyStore.tsx index d5c9cc687..850256374 100644 --- a/ui/blocks/src/test/storyStore.tsx +++ b/ui/blocks/src/test/storyStore.tsx @@ -320,8 +320,28 @@ and a [link](https://google.com) name: 'Button', request: '/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-named-arrow-func.js', + fileInfo: { + commits: [ + { + committerName: 'hasparus', + authorName: 'hasparus', + }, + { + committerName: 'hasparus', + authorName: 'lachlanjc', + }, + { + committerName: 'lachlanjc', + + authorName: 'atanasster', + }, + ], + }, info: { - description: '', + description: ` +Markdown descripton for component. +with a [link](https://google.com) + `, displayName: 'Control', props: { name: { diff --git a/ui/blocks/tests/__snapshots__/stories.test.js.snap b/ui/blocks/tests/__snapshots__/stories.test.js.snap index 912d6d895..2364aaf7f 100644 --- a/ui/blocks/tests/__snapshots__/stories.test.js.snap +++ b/ui/blocks/tests/__snapshots__/stories.test.js.snap @@ -1,223 +1,123 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Blocks/ComponentDependencies Local Dependencies 1`] = ` +exports[`Blocks/ComponentContributors Caption 1`] = ` <DocumentFragment> <div - class="css-1xkyebe" + class="css-6582y1-ComponentContributors" > <div - class="css-jxxswp" - id="" + class="css-1nwo78o-ComponentContributors" > - <div - class="css-xhp9da" + contributors + </div> + <div + aria-label="avatars of [object Object], [object Object], [object Object]" + class="css-1wxrz40-GithubAvatarList" + > + <a + aria-label="visit profile of hasparus" + class="css-1yyqj5g-GithubAvatarItem" + href="" > - <h3 - class="css-16ist9v-BlockContainer" + <img + alt="hasparus" + class="css-1y16e88" + height="24" + src="https://github.com/hasparus" + title="hasparus" + width="24" /> - </div> + </a> + <a + aria-label="visit profile of lachlanjc" + class="css-1yyqj5g-GithubAvatarItem" + href="" + > + <img + alt="lachlanjc" + class="css-1y16e88" + height="24" + src="https://github.com/lachlanjc" + title="lachlanjc" + width="24" + /> + </a> + <a + aria-label="visit profile of atanasster" + class="css-1yyqj5g-GithubAvatarItem" + href="" + > + <img + alt="atanasster" + class="css-1y16e88" + height="24" + src="https://github.com/atanasster" + title="atanasster" + width="24" + /> + </a> </div> + </div> +</DocumentFragment> +`; + +exports[`Blocks/ComponentContributors Overview 1`] = ` +<DocumentFragment> + <div + class="css-6582y1-ComponentContributors" + > <div - aria-hidden="false" - class="rah-static rah-static--height-auto" - style="height: auto; overflow: visible;" + aria-label="avatars of [object Object], [object Object], [object Object]" + class="css-1wxrz40-GithubAvatarList" > - <div> - <div - class="css-1d6wxci" - > - <div - class="css-nm5f2c-Tabs" - > - <div - class="react-tabs" - data-tabs="true" - > - <ul - class="react-tabs__tab-list" - role="tablist" - > - <li - aria-controls="react-tabs-5" - aria-disabled="false" - aria-selected="true" - class="react-tabs__tab react-tabs__tab--selected" - id="react-tabs-4" - role="tab" - tabindex="0" - > - ArrowButton - </li> - <li - aria-controls="react-tabs-7" - aria-disabled="false" - aria-selected="false" - class="react-tabs__tab" - id="react-tabs-6" - role="tab" - > - My Button Tab - </li> - </ul> - <div - aria-labelledby="react-tabs-4" - class="react-tabs__tab-panel react-tabs__tab-panel--selected" - id="react-tabs-5" - role="tabpanel" - > - <table - class="css-11y77l0" - data-testid="local-dependencies" - role="table" - > - <thead - class="css-14kw1rx" - > - <tr - class="css-vurnku" - role="row" - > - <th - class="css-9hyy6f" - colspan="1" - role="columnheader" - style="width: 150px;" - > - <div - class="css-wwqljn" - > - <div - class="css-206mi5" - > - file - </div> - </div> - </th> - <th - class="css-9hyy6f" - colspan="1" - role="columnheader" - style="width: 150px;" - > - <div - class="css-wwqljn" - > - <div - class="css-206mi5" - > - imports - </div> - </div> - </th> - </tr> - </thead> - <tbody - class="css-tuhk50" - role="rowgroup" - > - <tr - class="css-ijvt85" - role="row" - > - <td - class="css-l4u9co" - role="cell" - style="width: 150px;" - > - <span - class="css-b7g03d-Cell" - > - "./Button" - </span> - </td> - <td - class="css-l4u9co" - role="cell" - style="width: 150px;" - > - <div - class="css-zivbkl-Cell" - > - <span - class="css-1ver5lo-LocalImport" - > - <span - class="css-vurnku" - > - <a - class="css-1t54e2w" - href="/docs/id-of-story" - > - Button - </a> - </span> - </span> - <span - class="css-9c8bof-LocalImport" - > - <span - class="css-vurnku" - > - ButtonProps - </span> - </span> - </div> - </td> - </tr> - <tr - class="css-ijvt85" - role="row" - > - <td - class="css-l4u9co" - role="cell" - style="width: 150px;" - > - <span - class="css-b7g03d-Cell" - > - "@component-controls/components" - </span> - </td> - <td - class="css-l4u9co" - role="cell" - style="width: 150px;" - > - <div - class="css-zivbkl-Cell" - > - <span - class="css-9c8bof-LocalImport" - > - <span - class="css-vurnku" - > - Table - </span> - </span> - </div> - </td> - </tr> - </tbody> - </table> - </div> - <div - aria-labelledby="react-tabs-6" - class="react-tabs__tab-panel" - id="react-tabs-7" - role="tabpanel" - /> - </div> - </div> - </div> - </div> + <a + aria-label="visit profile of hasparus" + class="css-1yyqj5g-GithubAvatarItem" + href="" + > + <img + alt="hasparus" + class="css-1y16e88" + height="24" + src="https://github.com/hasparus" + title="hasparus" + width="24" + /> + </a> + <a + aria-label="visit profile of lachlanjc" + class="css-1yyqj5g-GithubAvatarItem" + href="" + > + <img + alt="lachlanjc" + class="css-1y16e88" + height="24" + src="https://github.com/lachlanjc" + title="lachlanjc" + width="24" + /> + </a> + <a + aria-label="visit profile of atanasster" + class="css-1yyqj5g-GithubAvatarItem" + href="" + > + <img + alt="atanasster" + class="css-1y16e88" + height="24" + src="https://github.com/atanasster" + title="atanasster" + width="24" + /> + </a> </div> </div> </DocumentFragment> `; -exports[`Blocks/ComponentDependencies Overview 1`] = ` +exports[`Blocks/ComponentJSX Overview 1`] = ` <DocumentFragment> <div class="css-1xkyebe" @@ -255,437 +155,182 @@ exports[`Blocks/ComponentDependencies Overview 1`] = ` role="tablist" > <li - aria-controls="react-tabs-1" + aria-controls="react-tabs-9" aria-disabled="false" aria-selected="true" class="react-tabs__tab react-tabs__tab--selected" - id="react-tabs-0" + id="react-tabs-8" role="tab" tabindex="0" > ArrowButton </li> <li - aria-controls="react-tabs-3" + aria-controls="react-tabs-11" aria-disabled="false" aria-selected="false" class="react-tabs__tab" - id="react-tabs-2" + id="react-tabs-10" role="tab" > My Button Tab </li> </ul> <div - aria-labelledby="react-tabs-0" + aria-labelledby="react-tabs-8" class="react-tabs__tab-panel react-tabs__tab-panel--selected" - id="react-tabs-1" + id="react-tabs-9" role="tabpanel" > - <table - class="css-11y77l0" - role="table" - > - <thead - class="css-14kw1rx" + <div> + <div + class="css-15owl46" > - <tr - class="css-vurnku" - role="row" + <div + class="css-x60p33" > - <th - class="css-9hyy6f" - colspan="1" - role="columnheader" - style="width: 150px;" - > - <div - class="css-wwqljn" - > - <div - class="css-206mi5" - > - package - </div> - </div> - </th> - <th - class="css-9hyy6f" - colspan="1" - role="columnheader" - style="width: 70%;" - > - <div - class="css-wwqljn" - > - <div - class="css-206mi5" - > - imports - </div> - </div> - </th> - <th - class="css-9hyy6f" - colspan="1" - role="columnheader" - style="width: 150px;" + <div + class="css-1vga9oy" > - <div - class="css-wwqljn" + <button + class="css-1tf4h46" > - <div - class="css-206mi5" - > - peer - </div> - </div> - </th> - </tr> - </thead> - <tbody - class="css-tuhk50" - role="rowgroup" + collapse all + </button> + </div> + </div> + </div> + <div + class="css-eqxzio" > - <tr - class="css-ijvt85" - role="row" - > - <td - class="css-l4u9co" - role="cell" - style="width: 150px;" - > - <div - class="css-121ufn9-PackageLink" - > - <a - class="css-1t54e2w" - href="https://npmjs.com/package/@component-controls/components/v/1.0.1" - rel="noopener noreferrer" - target="_blank" - > - <div - class="css-13b120i-PackageLink" - > - @component-controls/components - </div> - </a> - <span - class="css-n8ts03-PackageLink" - > - <span - class="css-vurnku" - > - ^1.0.1 - </span> - </span> - </div> - </td> - <td - class="css-l4u9co" - role="cell" - style="width: 70%;" - > - <div - class="css-zivbkl-Cell" - > - <span - class="css-hpa617-Tag" - > - <span - class="css-vurnku" - > - Table - </span> - </span> - </div> - </td> - <td - class="css-l4u9co" - role="cell" - style="width: 150px;" - /> - </tr> - <tr - class="css-ijvt85" - role="row" + <div + class="css-aroec7-Tree" + data-testid="component-jsx" > - <td - class="css-l4u9co" - role="cell" - style="width: 150px;" + <div + class="css-vurnku" > <div - class="css-121ufn9-PackageLink" + class="css-15ej8gm" > - <a - class="css-1t54e2w" - href="https://npmjs.com/package/react/v/16.13.1" - rel="noopener noreferrer" - target="_blank" + <div + class="css-tizfsr" > <div - class="css-13b120i-PackageLink" + class="css-162ewbd" > - react + <a + class="css-p1dwhj" + rel="noopener noreferrer" + target="_blank" + /> + <div + class="css-dcq909" + > + <a + class="css-p1dwhj" + rel="noopener noreferrer" + target="_blank" + > + <div + class="css-f5h6sg" + > + <div + class="css-1ujq37u-JSXTreeNode" + > + <span + class="css-kde9kw-JSXTreeNode" + > + <Button + </span> + <div + class="css-1j19kj1-JSXTreeNode" + > + <span + class="css-19j54vt-Tag" + > + <span + class="css-vurnku" + > + ref + </span> + </span> + <span + class="css-19j54vt-Tag" + > + <span + class="css-vurnku" + > + id + </span> + </span> + </div> + <span + class="css-kde9kw-JSXTreeNode" + > + /> + </span> + </div> + </div> + </a> + <div + class="css-vthntz" + > + <a + class="css-p1dwhj" + rel="noopener noreferrer" + target="_blank" + /> + <div + class="css-vurnku" + > + <a + class="css-p1dwhj" + rel="noopener noreferrer" + target="_blank" + /> + <div + class="css-u91vyr-ImportLabel" + > + <a + class="css-p1dwhj" + rel="noopener noreferrer" + target="_blank" + > + <span + class="css-1ver5lo-LocalImport" + > + <span + class="css-vurnku" + /> + </span> + </a> + <a + class="css-1t54e2w" + href="/docs/id-of-story" + > + Button + </a> + <div + class="css-10stqcc-ImportLabel" + > + <span + class="css-1tf5k16-ImportLabel" + > + from + </span> + <span + class="css-tfsmtt-ImportLabel" + > + "./Button" + </span> + </div> + </div> + </div> + </div> + </div> </div> - </a> - <span - class="css-n8ts03-PackageLink" - > - <span - class="css-vurnku" - > - ^16.13.1 - </span> - </span> - </div> - </td> - <td - class="css-l4u9co" - role="cell" - style="width: 70%;" - > - <div - class="css-zivbkl-Cell" - > - <span - class="css-1j59y6j-Tag" - > - <span - class="css-vurnku" - > - React - </span> - </span> - <span - class="css-hpa617-Tag" - > - <span - class="css-vurnku" - > - FC - </span> - </span> - </div> - </td> - <td - class="css-l4u9co" - role="cell" - style="width: 150px;" - > - * - </td> - </tr> - </tbody> - </table> - </div> - <div - aria-labelledby="react-tabs-2" - class="react-tabs__tab-panel" - id="react-tabs-3" - role="tabpanel" - /> - </div> - </div> - </div> - </div> - </div> - </div> -</DocumentFragment> -`; - -exports[`Blocks/ComponentJSX Overview 1`] = ` -<DocumentFragment> - <div - class="css-1xkyebe" - > - <div - class="css-jxxswp" - id="" - > - <div - class="css-xhp9da" - > - <h3 - class="css-16ist9v-BlockContainer" - /> - </div> - </div> - <div - aria-hidden="false" - class="rah-static rah-static--height-auto" - style="height: auto; overflow: visible;" - > - <div> - <div - class="css-1d6wxci" - > - <div - class="css-nm5f2c-Tabs" - > - <div - class="react-tabs" - data-tabs="true" - > - <ul - class="react-tabs__tab-list" - role="tablist" - > - <li - aria-controls="react-tabs-9" - aria-disabled="false" - aria-selected="true" - class="react-tabs__tab react-tabs__tab--selected" - id="react-tabs-8" - role="tab" - tabindex="0" - > - ArrowButton - </li> - <li - aria-controls="react-tabs-11" - aria-disabled="false" - aria-selected="false" - class="react-tabs__tab" - id="react-tabs-10" - role="tab" - > - My Button Tab - </li> - </ul> - <div - aria-labelledby="react-tabs-8" - class="react-tabs__tab-panel react-tabs__tab-panel--selected" - id="react-tabs-9" - role="tabpanel" - > - <div> - <div - class="css-15owl46" - > - <div - class="css-x60p33" - > - <div - class="css-1vga9oy" - > - <button - class="css-1tf4h46" - > - collapse all - </button> - </div> - </div> - </div> - <div - class="css-eqxzio" - > - <div - class="css-aroec7-Tree" - data-testid="component-jsx" - > - <div - class="css-vurnku" - > - <div - class="css-15ej8gm" - > - <div - class="css-tizfsr" - > - <div - class="css-162ewbd" - > - <a - class="css-p1dwhj" - rel="noopener noreferrer" - target="_blank" - > - <div - class="css-f5h6sg" - > - <div - class="css-1ujq37u-JSXTreeNode" - > - <span - class="css-kde9kw-JSXTreeNode" - > - <Button - </span> - <div - class="css-1j19kj1-JSXTreeNode" - > - <span - class="css-19j54vt-Tag" - > - <span - class="css-vurnku" - > - ref - </span> - </span> - <span - class="css-19j54vt-Tag" - > - <span - class="css-vurnku" - > - id - </span> - </span> - </div> - <span - class="css-kde9kw-JSXTreeNode" - > - /> - </span> - </div> - </div> - </a> - </div> - <div - class="css-vthntz" - > - <div - class="css-vurnku" - > - <div - class="css-u91vyr-ImportLabel" - > - <span - class="css-1ver5lo-LocalImport" - > - <span - class="css-vurnku" - > - <a - class="css-1t54e2w" - href="/docs/id-of-story" - > - Button - </a> - </span> - </span> - <div - class="css-10stqcc-ImportLabel" - > - <span - class="css-1tf5k16-ImportLabel" - > - from - </span> - <span - class="css-tfsmtt-ImportLabel" - > - "./Button" - </span> - </div> - </div> - </div> - </div> - </div> + </div> </div> </div> </div> @@ -1625,6 +1270,16 @@ exports[`Blocks/ComponentSource Theme 1`] = ` copy </button> </div> + <div + class="css-7d11p2" + > + <button + aria-label="view Button stats" + class="css-1tf4h46" + > + stats + </button> + </div> </div> </div> <div @@ -2029,13 +1684,17 @@ exports[`Blocks/Container Overview 1`] = ` </div> </div> <div - class="css-hi5zbn" + class="css-i0y2du" > - <h1 - class="css-9kctfa-Container" + <div + class="css-1k9l6xu-Container" > - Story - </h1> + <h1 + class="css-ymxumn" + > + Story + </h1> + </div> </div> <h2 class="css-1uqrmoi" @@ -2203,64 +1862,568 @@ exports[`Blocks/DocumentItem Overview 1`] = ` </DocumentFragment> `; -exports[`Blocks/EditPage Overview 1`] = ` +exports[`Blocks/EditPage Overview 1`] = ` +<DocumentFragment> + <div + class="css-1h9kuou" + > + <a + aria-label="edit this page" + class="css-1t54e2w" + href="https://github.com/ccontrols/component-controls/tree/master/ui/blocks/src/Title/Title.stories.tsx" + rel="noopener noreferrer" + target="_blank" + > + <div + class="css-f5h6sg" + > + <svg + aria-hidden="true" + class="octicon" + fill="currentColor" + height="16" + role="img" + style="display: inline-block; user-select: none; vertical-align: text-bottom;" + viewBox="0 0 16 16" + width="16" + > + <path + d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" + fill-rule="evenodd" + /> + </svg> + <span + class="css-6amu4j" + > + Edit this page + </span> + </div> + </a> + </div> +</DocumentFragment> +`; + +exports[`Blocks/ExternalDependencies Overview 1`] = ` +<DocumentFragment> + <div + class="css-1xkyebe" + > + <div + class="css-jxxswp" + id="" + > + <div + class="css-xhp9da" + > + <h3 + class="css-16ist9v-BlockContainer" + /> + </div> + </div> + <div + aria-hidden="false" + class="rah-static rah-static--height-auto" + style="height: auto; overflow: visible;" + > + <div> + <div + class="css-1d6wxci" + > + <div + class="css-nm5f2c-Tabs" + > + <div + class="react-tabs" + data-tabs="true" + > + <ul + class="react-tabs__tab-list" + role="tablist" + > + <li + aria-controls="react-tabs-1" + aria-disabled="false" + aria-selected="true" + class="react-tabs__tab react-tabs__tab--selected" + id="react-tabs-0" + role="tab" + tabindex="0" + > + ArrowButton + </li> + <li + aria-controls="react-tabs-3" + aria-disabled="false" + aria-selected="false" + class="react-tabs__tab" + id="react-tabs-2" + role="tab" + > + My Button Tab + </li> + </ul> + <div + aria-labelledby="react-tabs-0" + class="react-tabs__tab-panel react-tabs__tab-panel--selected" + id="react-tabs-1" + role="tabpanel" + > + <table + class="css-11y77l0" + role="table" + > + <thead + class="css-14kw1rx" + > + <tr + class="css-vurnku" + role="row" + > + <th + class="css-9hyy6f" + colspan="1" + role="columnheader" + style="width: 150px;" + > + <div + class="css-wwqljn" + > + <div + class="css-206mi5" + > + package + </div> + </div> + </th> + <th + class="css-9hyy6f" + colspan="1" + role="columnheader" + style="width: 70%;" + > + <div + class="css-wwqljn" + > + <div + class="css-206mi5" + > + imports + </div> + </div> + </th> + <th + class="css-9hyy6f" + colspan="1" + role="columnheader" + style="width: 150px;" + > + <div + class="css-wwqljn" + > + <div + class="css-206mi5" + > + peer + </div> + </div> + </th> + </tr> + </thead> + <tbody + class="css-tuhk50" + role="rowgroup" + > + <tr + class="css-ijvt85" + role="row" + > + <td + class="css-l4u9co" + role="cell" + style="width: 150px;" + > + <div + class="css-14a8v30-PackageLink" + > + <a + class="css-1t54e2w" + href="https://npmjs.com/package/@component-controls/components/v/1.0.1" + rel="noopener noreferrer" + target="_blank" + > + <div + class="css-13b120i-PackageLink" + > + @component-controls/components + </div> + </a> + <span + class="css-n8ts03-PackageLink" + > + <span + class="css-vurnku" + > + ^1.0.1 + </span> + </span> + </div> + </td> + <td + class="css-l4u9co" + role="cell" + style="width: 70%;" + > + <div + class="css-zivbkl-Cell" + > + <span + class="css-hpa617-Tag" + > + <span + class="css-vurnku" + > + Table + </span> + </span> + </div> + </td> + <td + class="css-l4u9co" + role="cell" + style="width: 150px;" + /> + </tr> + <tr + class="css-ijvt85" + role="row" + > + <td + class="css-l4u9co" + role="cell" + style="width: 150px;" + > + <div + class="css-14a8v30-PackageLink" + > + <a + class="css-1t54e2w" + href="https://npmjs.com/package/react/v/16.13.1" + rel="noopener noreferrer" + target="_blank" + > + <div + class="css-13b120i-PackageLink" + > + react + </div> + </a> + <span + class="css-n8ts03-PackageLink" + > + <span + class="css-vurnku" + > + ^16.13.1 + </span> + </span> + </div> + </td> + <td + class="css-l4u9co" + role="cell" + style="width: 70%;" + > + <div + class="css-zivbkl-Cell" + > + <span + class="css-1j59y6j-Tag" + > + <span + class="css-vurnku" + > + React + </span> + </span> + <span + class="css-hpa617-Tag" + > + <span + class="css-vurnku" + > + FC + </span> + </span> + </div> + </td> + <td + class="css-l4u9co" + role="cell" + style="width: 150px;" + > + * + </td> + </tr> + </tbody> + </table> + </div> + <div + aria-labelledby="react-tabs-2" + class="react-tabs__tab-panel" + id="react-tabs-3" + role="tabpanel" + /> + </div> + </div> + </div> + </div> + </div> + </div> +</DocumentFragment> +`; + +exports[`Blocks/LocalDependencies Overview 1`] = ` <DocumentFragment> <div - class="css-1h9kuou" + class="css-1xkyebe" > - <a - aria-label="edit this page" - class="css-1t54e2w" - href="https://github.com/ccontrols/component-controls/tree/master/ui/blocks/src/Title/Title.stories.tsx" - rel="noopener noreferrer" - target="_blank" + <div + class="css-jxxswp" + id="" > <div - class="css-f5h6sg" + class="css-xhp9da" > - <svg - aria-hidden="true" - class="octicon" - fill="currentColor" - height="16" - role="img" - style="display: inline-block; user-select: none; vertical-align: text-bottom;" - viewBox="0 0 16 16" - width="16" - > - <path - d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" - fill-rule="evenodd" - /> - </svg> - <span - class="css-6amu4j" + <h3 + class="css-16ist9v-BlockContainer" + /> + </div> + </div> + <div + aria-hidden="false" + class="rah-static rah-static--height-auto" + style="height: auto; overflow: visible;" + > + <div> + <div + class="css-1d6wxci" > - Edit this page - </span> + <div + class="css-nm5f2c-Tabs" + > + <div + class="react-tabs" + data-tabs="true" + > + <ul + class="react-tabs__tab-list" + role="tablist" + > + <li + aria-controls="react-tabs-5" + aria-disabled="false" + aria-selected="true" + class="react-tabs__tab react-tabs__tab--selected" + id="react-tabs-4" + role="tab" + tabindex="0" + > + ArrowButton + </li> + <li + aria-controls="react-tabs-7" + aria-disabled="false" + aria-selected="false" + class="react-tabs__tab" + id="react-tabs-6" + role="tab" + > + My Button Tab + </li> + </ul> + <div + aria-labelledby="react-tabs-4" + class="react-tabs__tab-panel react-tabs__tab-panel--selected" + id="react-tabs-5" + role="tabpanel" + > + <table + class="css-11y77l0" + data-testid="local-dependencies" + role="table" + > + <thead + class="css-14kw1rx" + > + <tr + class="css-vurnku" + role="row" + > + <th + class="css-9hyy6f" + colspan="1" + role="columnheader" + style="width: 150px;" + > + <div + class="css-wwqljn" + > + <div + class="css-206mi5" + > + file + </div> + </div> + </th> + <th + class="css-9hyy6f" + colspan="1" + role="columnheader" + style="width: 150px;" + > + <div + class="css-wwqljn" + > + <div + class="css-206mi5" + > + imports + </div> + </div> + </th> + </tr> + </thead> + <tbody + class="css-tuhk50" + role="rowgroup" + > + <tr + class="css-ijvt85" + role="row" + > + <td + class="css-l4u9co" + role="cell" + style="width: 150px;" + > + <span + class="css-b7g03d-Cell" + > + "./Button" + </span> + </td> + <td + class="css-l4u9co" + role="cell" + style="width: 150px;" + > + <div + class="css-zivbkl-Cell" + > + <span + class="css-1ver5lo-LocalImport" + > + <span + class="css-vurnku" + > + <a + class="css-1t54e2w" + href="/docs/id-of-story" + > + Button + </a> + </span> + </span> + <span + class="css-9c8bof-LocalImport" + > + <span + class="css-vurnku" + > + ButtonProps + </span> + </span> + </div> + </td> + </tr> + <tr + class="css-ijvt85" + role="row" + > + <td + class="css-l4u9co" + role="cell" + style="width: 150px;" + > + <span + class="css-b7g03d-Cell" + > + "@component-controls/components" + </span> + </td> + <td + class="css-l4u9co" + role="cell" + style="width: 150px;" + > + <div + class="css-zivbkl-Cell" + > + <span + class="css-9c8bof-LocalImport" + > + <span + class="css-vurnku" + > + Table + </span> + </span> + </div> + </td> + </tr> + </tbody> + </table> + </div> + <div + aria-labelledby="react-tabs-6" + class="react-tabs__tab-panel" + id="react-tabs-7" + role="tabpanel" + /> + </div> + </div> + </div> </div> - </a> + </div> </div> </DocumentFragment> `; exports[`Blocks/PageContainer Components 1`] = ` <DocumentFragment> - <h1 - class="css-ixvu55" + <div + class="css-cwbyoi-Title" > - MDX Story - </h1> + <h1 + class="css-ymxumn" + > + MDX Story + </h1> + </div> </DocumentFragment> `; exports[`Blocks/PageContainer Overview 1`] = ` <DocumentFragment> - <h1 - class="css-ixvu55" + <div + class="css-cwbyoi-Title" > - Story - </h1> + <h1 + class="css-ymxumn" + > + Story + </h1> + </div> </DocumentFragment> `; @@ -19135,10 +19298,14 @@ exports[`Blocks/TagsList Overview 1`] = ` exports[`Blocks/Title Overview 1`] = ` <DocumentFragment> - <h1 - class="css-ixvu55" + <div + class="css-cwbyoi-Title" > - Story - </h1> + <h1 + class="css-ymxumn" + > + Story + </h1> + </div> </DocumentFragment> `; diff --git a/ui/components/.eslintignore b/ui/components/.eslintignore index 53c37a166..86608912b 100644 --- a/ui/components/.eslintignore +++ b/ui/components/.eslintignore @@ -1 +1,2 @@ -dist \ No newline at end of file +dist +*.mdx \ No newline at end of file diff --git a/ui/components/README.md b/ui/components/README.md index 63b8c2695..7b0c56854 100644 --- a/ui/components/README.md +++ b/ui/components/README.md @@ -58,7 +58,7 @@ $ npm install @component-controls/components --save # Documentation -[live documentation site](https://component-controls.com/api/components-actionbar--overview) +[live documentation site](https://component-controls.com/api/components-index) # Overview diff --git a/ui/components/package.json b/ui/components/package.json index eff76e313..baa7fe084 100644 --- a/ui/components/package.json +++ b/ui/components/package.json @@ -38,6 +38,7 @@ "copy-to-clipboard": "^3.2.1", "fast-memoize": "^2.5.2", "markdown-to-jsx": "^6.11.0", + "md5": "^2.3.0", "mdx-utils": "*", "prism-react-renderer": "^1.0.2", "react-animate-height": "^2.0.20", @@ -53,6 +54,7 @@ "@component-controls/ts-markdown-docs": "^2.6.0", "@theme-ui/css": "^0.6.0-alpha.6", "@types/markdown-to-jsx": "^6.11.0", + "@types/md5": "^2.3.0", "@types/react": "^16.9.34", "@types/react-table": "^7.0.10", "@types/react-tabs": "^2.3.1", diff --git a/ui/components/src/ActionBar/ActionBar.stories.tsx b/ui/components/src/ActionBar/ActionBar.stories.tsx index 40135c8e4..328612910 100644 --- a/ui/components/src/ActionBar/ActionBar.stories.tsx +++ b/ui/components/src/ActionBar/ActionBar.stories.tsx @@ -8,6 +8,7 @@ import { ExternalLink } from '../ExternalLink'; export default { title: 'Components/ActionBar', component: ActionBar, + category: 'Navigation', } as Document; const Container: FC = ({ children }) => ( @@ -15,6 +16,7 @@ const Container: FC = ({ children }) => ( <Box style={{ height: 100, + width: '100%', backgroundColor: 'rgb(250, 248, 245)', }} > diff --git a/ui/components/src/ActionBar/ActionBar.tsx b/ui/components/src/ActionBar/ActionBar.tsx index 4c3d2d47c..890eb8bc5 100644 --- a/ui/components/src/ActionBar/ActionBar.tsx +++ b/ui/components/src/ActionBar/ActionBar.tsx @@ -17,9 +17,9 @@ export interface ActionBarProps { } /** - * a strip of actions to be attached to a container - * the action items contain the labels and click event handler - * actions can accept an order prop, and can also be superimposed + * A strip of actions to be attached to a container. + * The action items contain the labels and click event handlers. + * Actions can accept an order prop, and can also overwrite default actions. * */ export const ActionBar: FC<ActionBarProps> = ({ diff --git a/ui/components/src/ActionContainer/ActionContainer.stories.tsx b/ui/components/src/ActionContainer/ActionContainer.stories.tsx index bdec5bc86..a06672742 100644 --- a/ui/components/src/ActionContainer/ActionContainer.stories.tsx +++ b/ui/components/src/ActionContainer/ActionContainer.stories.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Donut } from 'theme-ui'; +import { Donut, Box } from 'theme-ui'; import { Document, Example } from '@component-controls/core'; import { ExternalLink } from '../ExternalLink'; import { ActionContainer } from './ActionContainer'; @@ -7,24 +7,27 @@ import { ActionContainer } from './ActionContainer'; export default { title: 'Components/ActionContainer', component: ActionContainer, + category: 'Containers', } as Document; export const overview: Example = () => { return ( - <ActionContainer - actions={[ - { - node: 'action 1', - onClick: () => console.log('clicked'), - }, - { - node: <ExternalLink href="https://google.com">google</ExternalLink>, - onClick: () => console.log('clicked'), - }, - ]} - > - <Donut value={1 / 2} /> - </ActionContainer> + <Box style={{ width: '100%' }}> + <ActionContainer + actions={[ + { + node: 'action 1', + onClick: () => console.log('clicked'), + }, + { + node: <ExternalLink href="https://google.com">google</ExternalLink>, + onClick: () => console.log('clicked'), + }, + ]} + > + <Donut value={1 / 2} /> + </ActionContainer> + </Box> ); }; diff --git a/ui/components/src/ActionContainer/ActionContainer.tsx b/ui/components/src/ActionContainer/ActionContainer.tsx index 67d5dc448..27b876385 100644 --- a/ui/components/src/ActionContainer/ActionContainer.tsx +++ b/ui/components/src/ActionContainer/ActionContainer.tsx @@ -16,7 +16,7 @@ export interface ActionContainerProps { } /** - * a boxed container with actions. + * Container box with actions. */ export const ActionContainer: FC<ActionContainerProps> = ({ children, diff --git a/ui/components/src/BlockContainer/BlockContainer.stories.tsx b/ui/components/src/BlockContainer/BlockContainer.stories.tsx index c9511653e..e109badbb 100644 --- a/ui/components/src/BlockContainer/BlockContainer.stories.tsx +++ b/ui/components/src/BlockContainer/BlockContainer.stories.tsx @@ -7,6 +7,7 @@ import { BlockContainer, BlockContainerProps } from './BlockContainer'; export default { title: 'Components/BlockContainer', component: BlockContainer, + category: 'Containers', } as Document; export const overview: Example = ({ title }: BlockContainerProps) => { diff --git a/ui/components/src/BlockContainer/BlockContainer.tsx b/ui/components/src/BlockContainer/BlockContainer.tsx index b6144fd9b..4904ca4a5 100644 --- a/ui/components/src/BlockContainer/BlockContainer.tsx +++ b/ui/components/src/BlockContainer/BlockContainer.tsx @@ -42,7 +42,7 @@ export interface BlockContainerOwnProps { export type BlockContainerProps = BlockContainerOwnProps & BoxProps; /** - * a collapsible block with a title. The title creates also an attribute id and an octicon for github style navigation. + * Collapsible block container with a title. The title creates also an attribute id and an octicon for github style navigation. * */ export const BlockContainer: FC<BlockContainerProps> = ({ diff --git a/ui/components/src/Collapsible/Collapsible.stories.tsx b/ui/components/src/Collapsible/Collapsible.stories.tsx index af890d3a4..b7026fbd9 100644 --- a/ui/components/src/Collapsible/Collapsible.stories.tsx +++ b/ui/components/src/Collapsible/Collapsible.stories.tsx @@ -1,11 +1,12 @@ import React, { useState } from 'react'; -import { Box, Button } from 'theme-ui'; +import { Box, Button, Donut } from 'theme-ui'; import { Document, Example, ControlTypes } from '@component-controls/core'; import { Collapsible, CollapsibleProps } from './Collapsible'; export default { title: 'Components/Collapsible', component: Collapsible, + category: 'Containers', } as Document; export const overview: Example<CollapsibleProps> = ({ easing }) => { @@ -16,7 +17,7 @@ export const overview: Example<CollapsibleProps> = ({ easing }) => { {isOpen ? 'close' : 'open'} </Button> <Collapsible isOpen={isOpen} easing={easing}> - content + <Donut value={1 / 2} /> </Collapsible> </Box> ); diff --git a/ui/components/src/Collapsible/Collapsible.tsx b/ui/components/src/Collapsible/Collapsible.tsx index e89255caf..49336e022 100644 --- a/ui/components/src/Collapsible/Collapsible.tsx +++ b/ui/components/src/Collapsible/Collapsible.tsx @@ -11,7 +11,7 @@ export interface CollapsibleOwnProps { export type CollapsibleProps = CollapsibleOwnProps & AnimateHeightProps; /** - * Animated expand/collapse container component + * Animated expand/collapse container component, using [react-animate-height](https://github.com/Stanko/react-animate-height). * */ export const Collapsible: FC<CollapsibleProps> = ({ diff --git a/ui/components/src/ColorMode/ColorMode.stories.tsx b/ui/components/src/ColorMode/ColorMode.stories.tsx index 67d410f12..2afd49e6e 100644 --- a/ui/components/src/ColorMode/ColorMode.stories.tsx +++ b/ui/components/src/ColorMode/ColorMode.stories.tsx @@ -6,6 +6,7 @@ import { ColorMode } from '.'; export default { title: 'Components/ColorMode', component: ColorMode, + category: 'Utilities', } as Document; export const overview: Example = () => ( diff --git a/ui/components/src/ColorMode/ColorMode.tsx b/ui/components/src/ColorMode/ColorMode.tsx index fe012cafc..9657420a3 100644 --- a/ui/components/src/ColorMode/ColorMode.tsx +++ b/ui/components/src/ColorMode/ColorMode.tsx @@ -6,7 +6,7 @@ import { FC } from 'react'; import { Toggle, ToggleProps } from '../Toggle'; /** - * dark/light mode toggle for theme-ui themes + * Theme-ui dark/light mode toggle. */ export const ColorMode: FC<Omit< ToggleProps, diff --git a/ui/components/src/CopyContainer/CopyContainer.stories.tsx b/ui/components/src/CopyContainer/CopyContainer.stories.tsx index b4f1b9493..79f7940a3 100644 --- a/ui/components/src/CopyContainer/CopyContainer.stories.tsx +++ b/ui/components/src/CopyContainer/CopyContainer.stories.tsx @@ -5,6 +5,7 @@ import { CopyContainer } from '.'; export default { title: 'Components/CopyContainer', component: CopyContainer, + category: 'Utilities', } as Document; export const overview: Example = () => ( diff --git a/ui/components/src/CopyContainer/CopyContainer.tsx b/ui/components/src/CopyContainer/CopyContainer.tsx index 14dde2e98..e3e30bf63 100644 --- a/ui/components/src/CopyContainer/CopyContainer.tsx +++ b/ui/components/src/CopyContainer/CopyContainer.tsx @@ -15,7 +15,7 @@ export interface CopyContainerProps { } /** - * conainer to enclose items that will provide copy fnctionality on click + * Container component to enclose items that will provide copy functionality on click. * */ export const CopyContainer: FC<CopyContainerProps> = ({ diff --git a/ui/components/src/Description/Description.stories.tsx b/ui/components/src/Description/Description.stories.tsx index 7a55ab302..735b2f4df 100644 --- a/ui/components/src/Description/Description.stories.tsx +++ b/ui/components/src/Description/Description.stories.tsx @@ -5,6 +5,7 @@ import { Description } from '.'; export default { title: 'Components/Description', component: Description, + category: 'Typography', } as Document; export const overview: Example = () => ( diff --git a/ui/components/src/ExternalLink/ExternalLink.stories.tsx b/ui/components/src/ExternalLink/ExternalLink.stories.tsx index f50fb31a4..978b38d35 100644 --- a/ui/components/src/ExternalLink/ExternalLink.stories.tsx +++ b/ui/components/src/ExternalLink/ExternalLink.stories.tsx @@ -5,6 +5,7 @@ import { ExternalLink, ExternalLinkProps } from './ExternalLink'; export default { title: 'Components/ExternalLink', component: ExternalLink, + category: 'Navigation', } as Document; export const overview: Example = ({ href }: ExternalLinkProps) => { diff --git a/ui/components/src/ExternalLink/ExternalLink.tsx b/ui/components/src/ExternalLink/ExternalLink.tsx index 8d7efeb11..3490cf249 100644 --- a/ui/components/src/ExternalLink/ExternalLink.tsx +++ b/ui/components/src/ExternalLink/ExternalLink.tsx @@ -5,7 +5,7 @@ export type ExternalLinkProps = LinkProps; /** * Anchor link to an external url, - * adds the default `target="_blank" rel="noopener noreferrer"` props + * adds the default `target="_blank" rel="noopener noreferrer"` props. */ export const ExternalLink: FC<ExternalLinkProps> = props => ( <Link {...(props as LinkProps)} target="_blank" rel="noopener noreferrer" /> diff --git a/ui/components/src/GithubAvatarList/GithubAvatarItem.tsx b/ui/components/src/GithubAvatarList/GithubAvatarItem.tsx new file mode 100644 index 000000000..b68176e1d --- /dev/null +++ b/ui/components/src/GithubAvatarList/GithubAvatarItem.tsx @@ -0,0 +1,150 @@ +/** @jsx jsx */ +import { FC, ReactNode } from 'react'; +import { jsx, Avatar } from 'theme-ui'; +import { LocationIcon } from '@primer/octicons-react'; +import { Value } from '../Value'; +import { Link } from '../Link'; +import { Popover } from '../Popover'; +import { useGithubProfile } from './useGithubProfile'; + +export interface GithubAvatarItemProps { + /** + * user name + */ + username: string; + + /** + * optional user email to link to gravatar + */ + useremail?: string; + /** + * on hover profile box + */ + tooltip?: ReactNode; + /** + * overlap % of the avatars in a list + */ + overlap?: number; + /** + * size in pixels + */ + size?: number; + /** + * whether to freeze the size of the avataro on hover + */ + freeze?: boolean; +} + +/** + * avatar to be used in an AvatarList container + */ +export const GithubAvatarItem: FC<GithubAvatarItemProps> = ({ + username, + useremail, + size = 48, + overlap = 0.4, + freeze = false, +}) => { + const profile = useGithubProfile(username, useremail); + const profileBox = ( + <div sx={{ p: 2 }}> + <div sx={{ fontSize: 4, fontWeight: 'bold' }}> + {profile.name || profile.login} + </div> + <div sx={{ borderBottom: '1px solid rgba(0, 0, 0, 0.125)', my: 2 }} /> + <div sx={{ display: 'flex', flexDirection: 'row' }}> + {profile.avatar_url && ( + <div sx={{ display: 'flex', flexDirection: 'column', px: 1 }}> + <Avatar + alt={username} + size={64} + src={profile.avatar_url || ''} + title={username} + /> + </div> + )} + <div + sx={{ + display: 'flex', + flexDirection: 'column', + px: 1, + justifyContent: 'space-between', + }} + > + <p sx={{ maxWidth: 400, py: 0 }}>{profile.bio}</p> + {profile.location && ( + <div + sx={{ + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + }} + > + <LocationIcon /> + <div sx={{ ml: 1 }}>{profile.location}</div> + </div> + )} + </div> + </div> + {(profile.public_repos || profile.public_gists || profile.followers) && ( + <div + sx={{ + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + borderTop: '1px solid rgba(0, 0, 0, 0.125)', + mt: 2, + py: 2, + }} + > + <Value label="repos" value={profile.public_repos} /> + <Value label="gists" value={profile.public_gists} /> + <Value label="followers" value={profile.followers} /> + </div> + )} + </div> + ); + const link = ( + <Link + aria-label={`visit profile of ${username}`} + href={profile.html_url || ''} + sx={{ + maxWidth: 'unset', + display: 'block', + overflow: 'hidden', + lineHeight: 1, + width: size, + height: size, + verticalAlign: 'middle', + }} + > + <Avatar + alt={username} + size={size} + src={profile.avatar_url || ''} + title={username} + /> + </Link> + ); + return profile.id ? ( + <Popover + trigger="hover" + placement="bottom-start" + tooltip={() => profileBox} + sx={{ + maxWidth: Math.round(size * (1 - overlap)), + transition: '0.2s ease', + ':hover': !freeze + ? { + maxWidth: size, + } + : {}, + }} + > + {link} + </Popover> + ) : ( + link + ); +}; diff --git a/ui/components/src/GithubAvatarList/GithubAvatarList.stories.tsx b/ui/components/src/GithubAvatarList/GithubAvatarList.stories.tsx new file mode 100644 index 000000000..0e784ca58 --- /dev/null +++ b/ui/components/src/GithubAvatarList/GithubAvatarList.stories.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { Document, Example } from '@component-controls/core'; +import { GithubAvatarList, GithubAvatarListProps } from './GithubAvatarList'; + +export default { + title: 'Components/GithubAvatarList', + component: GithubAvatarList, + category: 'Display', +} as Document; + +export const overview: Example<GithubAvatarListProps> = ({ size, overlap }) => { + return ( + <GithubAvatarList + size={size} + overlap={overlap} + users={[ + { username: 'hasparus' }, + { username: 'lachlanjc' }, + { username: 'atanasster' }, + ]} + /> + ); +}; + +export const maxItems: Example<GithubAvatarListProps> = () => { + return ( + <GithubAvatarList + maxItems={2} + users={[ + { username: 'hasparus' }, + { username: 'lachlanjc' }, + { username: 'atanasster' }, + ]} + /> + ); +}; diff --git a/ui/components/src/GithubAvatarList/GithubAvatarList.tsx b/ui/components/src/GithubAvatarList/GithubAvatarList.tsx new file mode 100644 index 000000000..250e77b30 --- /dev/null +++ b/ui/components/src/GithubAvatarList/GithubAvatarList.tsx @@ -0,0 +1,71 @@ +/** @jsx jsx */ +import { FC, useMemo } from 'react'; +import { jsx, Box, BoxProps } from 'theme-ui'; +import { GithubAvatarItem, GithubAvatarItemProps } from './GithubAvatarItem'; + +export interface GithubAvatarUser { + username: string; + useremail?: string; +} + +export interface GithubAvatarListOwnProps { + /** + * list of github user names + */ + users: GithubAvatarUser[]; + + /** + * max number of avatars, then use a '...' + */ + maxItems?: number; +} + +export type GithubAvatarListProps = GithubAvatarListOwnProps & + Omit<GithubAvatarItemProps, 'username' | 'useremail'> & + BoxProps; + +/** + * Avatar list that links to github profiles using rest api + */ + +export const GithubAvatarList: FC<GithubAvatarListProps> = ({ + users, + size = 32, + overlap = 0.4, + maxItems = 7, + ...rest +}) => { + const width = useMemo(() => { + const halfSizes = Math.max(0, users.length - 2) * size * overlap; + const expanded = Math.max(users.length, 1) * size; // the last item and the hovered items + return halfSizes + expanded; + }, [size, overlap, users.length]); + const lastIndex = Math.min(maxItems, users.length) - 1; + return ( + <Box + aria-label={`avatars of ${users.join(', ')}`} + sx={{ + display: 'flex', + alignItems: 'center', + width, + }} + {...rest} + > + {users.slice(0, maxItems).map((user, index) => ( + <GithubAvatarItem + key={`avatar_item${user.username}`} + size={size} + username={user.username} + useremail={user.useremail} + overlap={overlap} + freeze={index === lastIndex} + /> + ))} + {users.length > maxItems && ( + <div sx={{ ml: `${Math.round(overlap * size)}px`, fontWeight: 'bold' }}> + ... + </div> + )} + </Box> + ); +}; diff --git a/ui/components/src/GithubAvatarList/index.ts b/ui/components/src/GithubAvatarList/index.ts new file mode 100644 index 000000000..46657a5d2 --- /dev/null +++ b/ui/components/src/GithubAvatarList/index.ts @@ -0,0 +1 @@ +export * from './GithubAvatarList'; diff --git a/ui/components/src/GithubAvatarList/useGithubProfile.tsx b/ui/components/src/GithubAvatarList/useGithubProfile.tsx new file mode 100644 index 000000000..f0982b1c1 --- /dev/null +++ b/ui/components/src/GithubAvatarList/useGithubProfile.tsx @@ -0,0 +1,71 @@ +import { useState, useEffect } from 'react'; +import md5 from 'md5'; + +export interface GithubProfile { + login: string | null; + id: number; + node_id?: string | null; + avatar_url: string | null; + gravatar_id?: string | null; + url?: string | null; + html_url: string | null; + followers_url?: string | null; + following_url?: string | null; + gists_url?: string | null; + starred_url?: string | null; + subscriptions_url?: string | null; + organizations_url?: string | null; + repos_url?: string | null; + events_url?: string | null; + received_events_url?: string | null; + type?: string | null; + site_admin?: boolean | null; + name?: string | null; + company?: string | null; + blog?: string | null; + location?: string | null; + email?: string | null; + hireable?: boolean | null; + bio?: string | null; + twitter_username?: string | null; + public_repos?: number; + public_gists?: number; + followers?: number; + following?: number; + created_at?: string; + updated_at?: string; +} + +const profilesCache: Record<string, GithubProfile> = {}; + +export const useGithubProfile = ( + username: string, + useremail?: string, +): GithubProfile => { + const [profile, setProfile] = useState<GithubProfile>( + profilesCache[username] || { + login: username, + email: useremail, + avatar_url: useremail + ? `https://www.gravatar.com/avatar/${md5( + useremail.trim().toLowerCase(), + )}` + : `https://github.com/${username}`, + }, + ); + useEffect(() => { + const fetchData = async () => { + fetch(`https://api.github.com/users/${username}`) + .then(res => res.json()) + .then(result => { + profilesCache[username] = result; + setProfile(result); + }); + }; + if (!profile.id && typeof fetch !== 'undefined') { + fetchData(); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [username]); + return profile; +}; diff --git a/ui/components/src/Header/Header.stories.tsx b/ui/components/src/Header/Header.stories.tsx index fce13a6f7..3a9f2200b 100644 --- a/ui/components/src/Header/Header.stories.tsx +++ b/ui/components/src/Header/Header.stories.tsx @@ -5,6 +5,7 @@ import { Header } from '.'; export default { title: 'Components/Header', component: Header, + category: 'Display', } as Document; export const overview: Example = () => <Header>header</Header>; diff --git a/ui/components/src/HoverBox/HoverBox.stories.tsx b/ui/components/src/HoverBox/HoverBox.stories.tsx index f554f62ec..e4ae0df02 100644 --- a/ui/components/src/HoverBox/HoverBox.stories.tsx +++ b/ui/components/src/HoverBox/HoverBox.stories.tsx @@ -6,6 +6,7 @@ import { HoverBox } from '.'; export default { title: 'Components/HoverBox', component: HoverBox, + category: 'Containers', } as Document; export const overview: Example = () => ( diff --git a/ui/components/src/HoverBox/HoverBox.tsx b/ui/components/src/HoverBox/HoverBox.tsx index d279820f3..95d494749 100644 --- a/ui/components/src/HoverBox/HoverBox.tsx +++ b/ui/components/src/HoverBox/HoverBox.tsx @@ -10,7 +10,7 @@ export type HoverBoxProps = { } & BoxProps; /** - * Box component that will fade/outline a label at the bottom + * Container component that will fade/outline a label at the bottom * */ export const HoverBox: FC<HoverBoxProps> = ({ label, children, ...rest }) => { diff --git a/ui/components/src/Link/Link.stories.tsx b/ui/components/src/Link/Link.stories.tsx index 21961d955..0a5750ff3 100644 --- a/ui/components/src/Link/Link.stories.tsx +++ b/ui/components/src/Link/Link.stories.tsx @@ -5,6 +5,7 @@ import { Link } from '.'; export default { title: 'Components/Link', component: Link, + category: 'Navigation', } as Document; export const overview: Example = () => <Link href="/">link to home</Link>; diff --git a/ui/components/src/Link/Link.tsx b/ui/components/src/Link/Link.tsx index 44c055e28..95d63e314 100644 --- a/ui/components/src/Link/Link.tsx +++ b/ui/components/src/Link/Link.tsx @@ -4,6 +4,9 @@ import { ExternalLink } from '../ExternalLink'; import { useGetLinkClass } from './LinkContext'; import { useIsLocalLink } from './useIsLocalLink'; +/** + * Configurable anchor link with a LinkContext. Also checks if the link is intrenal to the site/app or external. + */ export const Link: FC<LinkProps> = (props: LinkProps) => { const { href } = props; const isLocal = useIsLocalLink(href); diff --git a/ui/components/src/LinkHeading/LinkHeading.stories.tsx b/ui/components/src/LinkHeading/LinkHeading.stories.tsx index d45cbdf20..43d649872 100644 --- a/ui/components/src/LinkHeading/LinkHeading.stories.tsx +++ b/ui/components/src/LinkHeading/LinkHeading.stories.tsx @@ -6,10 +6,13 @@ import { LinkHeading, LinkHeadingProps } from './'; export default { title: 'Components/LinkHeading', component: LinkHeading, + category: 'Navigation', } as Document; export const overview: Example<LinkHeadingProps> = ({ as, children }) => ( - <LinkHeading as={as}>{children}</LinkHeading> + <div style={{ marginLeft: '32px' }}> + <LinkHeading as={as}>{children}</LinkHeading> + </div> ); overview.controls = { diff --git a/ui/components/src/LinkHeading/LinkHeading.tsx b/ui/components/src/LinkHeading/LinkHeading.tsx index 54afcfee2..f40c1e7c8 100644 --- a/ui/components/src/LinkHeading/LinkHeading.tsx +++ b/ui/components/src/LinkHeading/LinkHeading.tsx @@ -14,7 +14,7 @@ const iconSize: Record<string, { size: number; level: number }> = { }; export type LinkHeadingProps = HeadingProps; /** - * h1-h6 heading component that generates automatically a github-style anchor to navigate to a section + * h1-h6 heading component that generates automatically a github-style anchor to navigate to a section on hover. */ export const LinkHeading: FC<LinkHeadingProps> = ({ as = 'h3', diff --git a/ui/components/src/Markdown/Markdown.stories.tsx b/ui/components/src/Markdown/Markdown.stories.tsx index 4e9ab34f9..5ee84fefd 100644 --- a/ui/components/src/Markdown/Markdown.stories.tsx +++ b/ui/components/src/Markdown/Markdown.stories.tsx @@ -6,6 +6,7 @@ import { ThemeProvider } from '../ThemeContext'; export default { title: 'Components/Markdown', component: Markdown, + category: 'Typography', } as Document; export const overview: Example = () => ( diff --git a/ui/components/src/Markdown/Markdown.tsx b/ui/components/src/Markdown/Markdown.tsx index 5c0f67b8c..36b33c792 100644 --- a/ui/components/src/Markdown/Markdown.tsx +++ b/ui/components/src/Markdown/Markdown.tsx @@ -18,7 +18,7 @@ export interface MarkdownProps { /** * Markdown display component to compile and display markdown at run-time. - * Uses `markdown-to-jsx` to compile the markdown. + * Uses [markdown-to-jsx](https://github.com/probablyup/markdown-to-jsx) internally. */ export const Markdown: FC<MarkdownProps> = ({ children, components }) => ( <MarkdownToJSX diff --git a/ui/components/src/Multiselect/Multiselect.stories.tsx b/ui/components/src/Multiselect/Multiselect.stories.tsx index 9bff2c62c..6d2e8b5d2 100644 --- a/ui/components/src/Multiselect/Multiselect.stories.tsx +++ b/ui/components/src/Multiselect/Multiselect.stories.tsx @@ -6,6 +6,7 @@ import { Multiselect, MultiselectItem } from './Multiselect'; export default { title: 'Components/Multiselect', component: Multiselect, + category: 'Input', } as Document; export const overview: Example = () => { diff --git a/ui/components/src/Multiselect/Multiselect.tsx b/ui/components/src/Multiselect/Multiselect.tsx index 75887beb5..4212eb317 100644 --- a/ui/components/src/Multiselect/Multiselect.tsx +++ b/ui/components/src/Multiselect/Multiselect.tsx @@ -22,7 +22,7 @@ export type MultiselectProps = MultiselectOwnProps & Omit<PopoverProps, 'tooltip'>; /** - * A Popover multiselect displaying checkboxes for select/unselect. + * Popover multiselect displaying checkboxes to select/unselect. */ export const Multiselect: FC<MultiselectProps> = ({ items, diff --git a/ui/components/src/Pagination/Pagination.stories.tsx b/ui/components/src/Pagination/Pagination.stories.tsx index 941debb36..150bb7c71 100644 --- a/ui/components/src/Pagination/Pagination.stories.tsx +++ b/ui/components/src/Pagination/Pagination.stories.tsx @@ -1,23 +1,27 @@ import React from 'react'; +import { Box } from 'theme-ui'; import { Document, Example } from '@component-controls/core'; import { Pagination } from '.'; export default { title: 'Components/Pagination', component: Pagination, + category: 'Navigation', } as Document; export const overview: Example = () => ( - <Pagination - prev={{ - link: '/', - title: 'link to prev', - }} - next={{ - link: '/', - title: 'link to prev', - }} - /> + <Box style={{ width: '100%' }}> + <Pagination + prev={{ + link: '/', + title: 'link to prev', + }} + next={{ + link: '/', + title: 'link to prev', + }} + /> + </Box> ); export const onlyPrev: Example = () => ( diff --git a/ui/components/src/Pagination/Pagination.tsx b/ui/components/src/Pagination/Pagination.tsx index 875345c98..ec84133c5 100644 --- a/ui/components/src/Pagination/Pagination.tsx +++ b/ui/components/src/Pagination/Pagination.tsx @@ -21,7 +21,7 @@ export interface PaginationProps { next?: PaginationPage; } /** - * A pagination component, navigate previous and next page + * Pagination component to navigate previous/next page */ export const Pagination: FC<PaginationProps> = ({ prev, next }) => ( <Box variant="pagination.container"> diff --git a/ui/components/src/PanelContainer/PanelContainer.stories.tsx b/ui/components/src/PanelContainer/PanelContainer.stories.tsx index 45b4de7fc..742aa1470 100644 --- a/ui/components/src/PanelContainer/PanelContainer.stories.tsx +++ b/ui/components/src/PanelContainer/PanelContainer.stories.tsx @@ -1,11 +1,12 @@ import React from 'react'; -import { Donut } from 'theme-ui'; +import { Box, Donut } from 'theme-ui'; import { Document, Example } from '@component-controls/core'; import { PanelContainer } from './PanelContainer'; export default { title: 'Components/PanelContainer', component: PanelContainer, + category: 'Containers', } as Document; const actions = [ @@ -39,9 +40,13 @@ const actions = [ ]; export const overview: Example = () => { return ( - <PanelContainer actions={actions}> - <Donut value={1} /> - </PanelContainer> + <Box style={{ width: '100%' }}> + <PanelContainer actions={actions}> + <Box sx={{ mt: '30px' }}> + <Donut value={1} /> + </Box> + </PanelContainer> + </Box> ); }; diff --git a/ui/components/src/PanelContainer/PanelContainer.tsx b/ui/components/src/PanelContainer/PanelContainer.tsx index 3812bc403..96749540c 100644 --- a/ui/components/src/PanelContainer/PanelContainer.tsx +++ b/ui/components/src/PanelContainer/PanelContainer.tsx @@ -47,7 +47,7 @@ export interface PanelContainerOwnProps { export type PanelContainerProps = PanelContainerOwnProps & ActionContainerProps; /** - * an action container with built-in collapsible panels + * Action container with built-in collapsible panels * */ export const PanelContainer: FC<PanelContainerProps> = ({ diff --git a/ui/components/src/Popover/Popover.stories.tsx b/ui/components/src/Popover/Popover.stories.tsx index d95046377..3b4c3aa00 100644 --- a/ui/components/src/Popover/Popover.stories.tsx +++ b/ui/components/src/Popover/Popover.stories.tsx @@ -6,6 +6,7 @@ import { Popover, PopoverProps } from './Popover'; export default { title: 'Components/Popover', component: Popover, + category: 'Containers', } as Document; export const overview: Example<PopoverProps> = ({ placement, trigger }) => { diff --git a/ui/components/src/Popover/Popover.tsx b/ui/components/src/Popover/Popover.tsx index df3635987..eebb7c0e1 100644 --- a/ui/components/src/Popover/Popover.tsx +++ b/ui/components/src/Popover/Popover.tsx @@ -5,7 +5,7 @@ import { TooltipTriggerProps, ChildrenArg, } from 'react-popper-tooltip/dist/types'; -import { Box, ColorModesScale } from 'theme-ui'; +import { ColorModesScale } from 'theme-ui'; import { Arrow, Wrapper } from './PopoverUtils'; import { useTheme } from '../ThemeContext'; @@ -20,8 +20,7 @@ export type PopoverProps = PopoverOwnProps & Omit<Partial<TooltipTriggerProps>, 'children'>; /** - * A Popover container that is triggered by a click/hover event. - * Used to display enhanced information that could not fit into the main scren. + * Popover container that is triggered by a click/hover event, using [react-popper-tooltip](https://github.com/mohsinulhaq/react-popper-tooltip). */ export const Popover: FC<PopoverProps> = ({ arrowVisible = true, @@ -81,14 +80,14 @@ export const Popover: FC<PopoverProps> = ({ }} > {({ getTriggerProps, triggerRef }: ChildrenArg) => ( - <Box + <div ref={triggerRef as any} {...getTriggerProps()} - css={{ display: 'inline-block' }} + style={{ display: 'inline-block' }} {...rest} > {children} - </Box> + </div> )} </TooltipTrigger> ); diff --git a/ui/components/src/ProgressIndicator/ProgressIndicator.stories.tsx b/ui/components/src/ProgressIndicator/ProgressIndicator.stories.tsx index 7eb0de04c..f31f52f68 100644 --- a/ui/components/src/ProgressIndicator/ProgressIndicator.stories.tsx +++ b/ui/components/src/ProgressIndicator/ProgressIndicator.stories.tsx @@ -5,6 +5,7 @@ import { ProgressIndicator, ProgressIndicatorProps } from './ProgressIndicator'; export default { title: 'Components/ProgressIndicator', component: ProgressIndicator, + category: 'Display', } as Document; export const overview: Example<ProgressIndicatorProps> = ({ @@ -12,7 +13,11 @@ export const overview: Example<ProgressIndicatorProps> = ({ value, color, }) => { - return <ProgressIndicator max={max} value={value} color={color} />; + return ( + <div style={{ width: '100%' }}> + <ProgressIndicator max={max} value={value} color={color} /> + </div> + ); }; overview.controls = { diff --git a/ui/components/src/ProgressIndicator/ProgressIndicator.tsx b/ui/components/src/ProgressIndicator/ProgressIndicator.tsx index 9eb770ef1..da2644926 100644 --- a/ui/components/src/ProgressIndicator/ProgressIndicator.tsx +++ b/ui/components/src/ProgressIndicator/ProgressIndicator.tsx @@ -7,6 +7,10 @@ export interface ProgressIndicatorProps { max: number; color?: string; } +/** + * Progress indicator with a label + * + */ export const ProgressIndicator: FC<ProgressIndicatorProps> = ({ value, max, diff --git a/ui/components/src/SearchInput/SearchInput.stories.tsx b/ui/components/src/SearchInput/SearchInput.stories.tsx index ba9bdecd9..7573f8e1f 100644 --- a/ui/components/src/SearchInput/SearchInput.stories.tsx +++ b/ui/components/src/SearchInput/SearchInput.stories.tsx @@ -7,6 +7,7 @@ import { SearchInput } from './SearchInput'; export default { title: 'Components/SearchInput', component: SearchInput, + category: 'Input', } as Document; interface FakeItem { diff --git a/ui/components/src/SearchInput/SearchInput.tsx b/ui/components/src/SearchInput/SearchInput.tsx index ebc18fe8f..708ad7daf 100644 --- a/ui/components/src/SearchInput/SearchInput.tsx +++ b/ui/components/src/SearchInput/SearchInput.tsx @@ -55,7 +55,7 @@ export interface SearchInputOwnProps<ItemType> { /** * items array */ - items: ItemType[]; + items?: ItemType[]; /** * customize the popover */ @@ -73,7 +73,7 @@ export type SearchInputProps<ItemType> = SearchInputOwnProps<ItemType> & */ export const SearchInput = <ItemType extends SearchInputItemType>({ onSearch, - items, + items = [], children, onSelect, popoverProps, diff --git a/ui/components/src/Sidebar/Sidebar.stories.tsx b/ui/components/src/Sidebar/Sidebar.stories.tsx index 931bc7dcd..31de79bbc 100644 --- a/ui/components/src/Sidebar/Sidebar.stories.tsx +++ b/ui/components/src/Sidebar/Sidebar.stories.tsx @@ -8,6 +8,7 @@ import { Sidebar, SidebarContext, SidebarContextProvider } from '.'; export default { title: 'Components/Sidebar', component: Sidebar, + category: 'Navigation', } as Document; export const overview: Example<{ diff --git a/ui/components/src/Source/Source.stories.tsx b/ui/components/src/Source/Source.stories.tsx index 61c22b327..3a27cfc26 100644 --- a/ui/components/src/Source/Source.stories.tsx +++ b/ui/components/src/Source/Source.stories.tsx @@ -16,6 +16,7 @@ import { ActionItem } from '../ActionBar'; export default { title: 'Components/Source', component: Source, + category: 'Display', } as Document; const source = `export const sample = () => { diff --git a/ui/components/src/Subheading/Subheading.tsx b/ui/components/src/Subheading/Subheading.tsx deleted file mode 100644 index eb068bb5f..000000000 --- a/ui/components/src/Subheading/Subheading.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React, { FC } from 'react'; -import { Heading, HeadingProps } from 'theme-ui'; - -export type SubheadingProps = Omit<HeadingProps, 'as'>; - -/** - * `h3` level headings - */ -export const Subheading: FC<SubheadingProps> = ({ children, ...rest }) => { - return ( - <Heading as="h3" variant="subheading" {...rest}> - {children} - </Heading> - ); -}; diff --git a/ui/components/src/Subheading/Subjeading.stories.tsx b/ui/components/src/Subheading/Subjeading.stories.tsx deleted file mode 100644 index 5d92c3029..000000000 --- a/ui/components/src/Subheading/Subjeading.stories.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { Document, Example, ControlTypes } from '@component-controls/core'; -import { Subheading, SubheadingProps } from './Subheading'; - -export default { - title: 'Components/Subheading', - component: Subheading, -} as Document; - -export const overview: Example<SubheadingProps> = ({ children }) => { - return <Subheading>{children}</Subheading>; -}; - -overview.controls = { - children: { type: ControlTypes.TEXT, value: 'Subheading text' }, -}; diff --git a/ui/components/src/Subheading/index.ts b/ui/components/src/Subheading/index.ts deleted file mode 100644 index 7f596a22d..000000000 --- a/ui/components/src/Subheading/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Subheading'; diff --git a/ui/components/src/Subtitle/Subtitle.stories.tsx b/ui/components/src/Subtitle/Subtitle.stories.tsx index 069a158b8..343565e70 100644 --- a/ui/components/src/Subtitle/Subtitle.stories.tsx +++ b/ui/components/src/Subtitle/Subtitle.stories.tsx @@ -5,6 +5,7 @@ import { Subtitle, SubtitleProps } from './Subtitle'; export default { title: 'Components/Subtitle', component: Subtitle, + category: 'Typography', } as Document; export const overview: Example<SubtitleProps> = ({ children }) => { diff --git a/ui/components/src/SyntaxHighlighter/SyntaxHighlighter.stories.tsx b/ui/components/src/SyntaxHighlighter/SyntaxHighlighter.stories.tsx index 75185d302..908863fa2 100644 --- a/ui/components/src/SyntaxHighlighter/SyntaxHighlighter.stories.tsx +++ b/ui/components/src/SyntaxHighlighter/SyntaxHighlighter.stories.tsx @@ -6,6 +6,7 @@ import { SyntaxHighlighter, SyntaxHighlighterProps } from './SyntaxHighlighter'; export default { title: 'Components/SyntaxHighlighter', component: SyntaxHighlighter, + category: 'Display', } as Document; const source = `import { Button } from 'theme-ui';`; diff --git a/ui/components/src/SyntaxHighlighter/SyntaxHighlighter.tsx b/ui/components/src/SyntaxHighlighter/SyntaxHighlighter.tsx index 0bbdb12f9..a315c0367 100644 --- a/ui/components/src/SyntaxHighlighter/SyntaxHighlighter.tsx +++ b/ui/components/src/SyntaxHighlighter/SyntaxHighlighter.tsx @@ -83,7 +83,7 @@ export interface SyntaxHighlighterProps { } /** - * Syntax highlighter component. Uses [prism](https://prismjs.com) for the actual source display. + * Syntax highlighter component using [prism](https://prismjs.com) for the actual source display. */ export const SyntaxHighlighter: FC<SyntaxHighlighterProps> = ({ children = '', diff --git a/ui/components/src/Table/Table.stories.tsx b/ui/components/src/Table/Table.stories.tsx index 0ea31bc71..4d56a2d0a 100644 --- a/ui/components/src/Table/Table.stories.tsx +++ b/ui/components/src/Table/Table.stories.tsx @@ -7,6 +7,7 @@ import { ThemeProvider } from '../ThemeContext'; export default { title: 'Components/Table', component: Table, + category: 'Display', } as Document; type DataType = { diff --git a/ui/components/src/Table/Table.tsx b/ui/components/src/Table/Table.tsx index 1d111f526..d73d2e48d 100644 --- a/ui/components/src/Table/Table.tsx +++ b/ui/components/src/Table/Table.tsx @@ -118,7 +118,7 @@ export type TableProps<D extends { [key: string]: any }> = TableOwnProps<D> & BoxProps; /** - * Table component. Uses [react-table](https://github.com/tannerlinsley/react-table) to display the data. + * Table component using [react-table](https://github.com/tannerlinsley/react-table) to display the data. * Can be grouped, filtered, sorted. Themed with theme-ui for consistency. */ export function Table<D extends { [key: string]: any }>({ diff --git a/ui/components/src/Tabs/Tabs.stories.tsx b/ui/components/src/Tabs/Tabs.stories.tsx index 82fa63a98..669c5f5dc 100644 --- a/ui/components/src/Tabs/Tabs.stories.tsx +++ b/ui/components/src/Tabs/Tabs.stories.tsx @@ -10,6 +10,7 @@ export default { TabList, TabPanel, }, + category: 'Navigation', } as Document; const tabs: { diff --git a/ui/components/src/Tabs/Tabs.tsx b/ui/components/src/Tabs/Tabs.tsx index 61d240ff8..af9524ec0 100644 --- a/ui/components/src/Tabs/Tabs.tsx +++ b/ui/components/src/Tabs/Tabs.tsx @@ -35,7 +35,7 @@ export interface TabsOwnProps { type TabsProps = TabsOwnProps & Omit<OriginalTabsProps, 'ref'>; /** - * Create tabs and multi-page ui layouts. Uses [react-tabs](https://reactcommunity.org/react-tabs/) component. + * Tabs component with [react-tabs](https://reactcommunity.org/react-tabs/) and theme-ui styling. * */ export const Tabs: FC<TabsProps> = ({ fontSize = 1, ...props }) => { diff --git a/ui/components/src/Tag/Tag.stories.tsx b/ui/components/src/Tag/Tag.stories.tsx index bfa325fef..0954e26b6 100644 --- a/ui/components/src/Tag/Tag.stories.tsx +++ b/ui/components/src/Tag/Tag.stories.tsx @@ -5,6 +5,7 @@ import { Tag, TagProps } from './Tag'; export default { title: 'Components/Tag', component: Tag, + category: 'Display', } as Document; export const overview: Example<TagProps> = ({ color }) => { diff --git a/ui/components/src/Tag/Tag.tsx b/ui/components/src/Tag/Tag.tsx index 0ec6abb85..40f4fad17 100644 --- a/ui/components/src/Tag/Tag.tsx +++ b/ui/components/src/Tag/Tag.tsx @@ -32,7 +32,7 @@ export interface TagProps { } /** - * A copntainer component to display text in a colored box. + * A container component to display text in a colored box, with a semi-transparent background. */ export const Tag: FC<TagProps & Omit<BoxProps, 'variant'>> = ({ children, diff --git a/ui/components/src/ThemeContext/theme.ts b/ui/components/src/ThemeContext/theme.ts index a1726d799..f5e0f7307 100644 --- a/ui/components/src/ThemeContext/theme.ts +++ b/ui/components/src/ThemeContext/theme.ts @@ -160,12 +160,16 @@ export const theme: ControlsTheme = { }, cards: { primary: { + overflow: 'hidden', display: 'flex', flexDirection: 'column', - alignItems: 'center', padding: 2, - borderRadius: 4, - boxShadow: '0 0 8px rgba(0, 0, 0, 0.125)', + borderRadius: 8, + border: '1px solid rgba(0, 0, 0, 0.125)', + ':hover': { + border: '1px solid rgba(0, 0, 0, 0.25)', + boxShadow: '0 0 8px rgba(0, 0, 0, 0.125)', + }, }, }, links: { @@ -469,7 +473,7 @@ export const theme: ControlsTheme = { pt: 2, }, titlerow: { - my: 4, + mt: 4, }, createdbox: { container: { diff --git a/ui/components/src/Title/Title.stories.tsx b/ui/components/src/Title/Title.stories.tsx deleted file mode 100644 index d247d8268..000000000 --- a/ui/components/src/Title/Title.stories.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; -import { Document, Example, ControlTypes } from '@component-controls/core'; -import { Title, TitleProps } from './Title'; - -export default { - title: 'Components/Title', - component: Title, -} as Document; - -export const overview: Example<TitleProps> = ({ children }) => { - return <Title>{children}; -}; - -overview.controls = { - children: { type: ControlTypes.TEXT, value: 'Title text' }, -}; diff --git a/ui/components/src/Title/Title.tsx b/ui/components/src/Title/Title.tsx deleted file mode 100644 index 5d4caa1e2..000000000 --- a/ui/components/src/Title/Title.tsx +++ /dev/null @@ -1,19 +0,0 @@ -/** @jsx jsx */ -import { jsx } from 'theme-ui'; -import { FC } from 'react'; -import { Heading, HeadingProps } from 'theme-ui'; - -interface TitleOwnProps { - /** - * text to be displayed in the component. - */ - children?: string; -} - -export type TitleProps = TitleOwnProps & Omit; - -export const Title: FC = ({ children, ...rest }) => ( - - {children} - -); diff --git a/ui/components/src/Title/index.ts b/ui/components/src/Title/index.ts deleted file mode 100644 index 304b1af24..000000000 --- a/ui/components/src/Title/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Title'; diff --git a/ui/components/src/TitledImage/TitledImage.stories.tsx b/ui/components/src/TitledImage/TitledImage.stories.tsx index 765069316..b12a28f3d 100644 --- a/ui/components/src/TitledImage/TitledImage.stories.tsx +++ b/ui/components/src/TitledImage/TitledImage.stories.tsx @@ -6,6 +6,7 @@ import { TitledImage } from './TitledImage'; export default { title: 'Components/TitledImage', component: TitledImage, + category: 'Display', } as Document; export const overview: Example = ({ title }) => { diff --git a/ui/components/src/TitledImage/TitledImage.tsx b/ui/components/src/TitledImage/TitledImage.tsx index 47d626370..e42d932fe 100644 --- a/ui/components/src/TitledImage/TitledImage.tsx +++ b/ui/components/src/TitledImage/TitledImage.tsx @@ -2,7 +2,7 @@ import React, { FC } from 'react'; import { Image, ImageProps, Embed, Text, Box } from 'theme-ui'; /** - * image components with a title if available + * Image component with a title if available */ export const TitledImage: FC> = props => { const { title, src } = props; diff --git a/ui/components/src/Toggle/Toggle.stories.tsx b/ui/components/src/Toggle/Toggle.stories.tsx index ad5300957..dfa1edddb 100644 --- a/ui/components/src/Toggle/Toggle.stories.tsx +++ b/ui/components/src/Toggle/Toggle.stories.tsx @@ -7,6 +7,7 @@ import { Toggle } from './Toggle'; export default { title: 'Components/Toggle', component: Toggle, + category: 'Input', } as Document; export const overview: Example = () => { diff --git a/ui/components/src/Tree/Tree.stories.tsx b/ui/components/src/Tree/Tree.stories.tsx index ab3fd1ee4..575bca3d5 100644 --- a/ui/components/src/Tree/Tree.stories.tsx +++ b/ui/components/src/Tree/Tree.stories.tsx @@ -10,13 +10,13 @@ import { TrashcanIcon, StarIcon, TriangleDownIcon, - TriangleRightIcon, } from '@primer/octicons-react'; import { Tree } from '.'; export default { title: 'Components/Tree', component: Tree, + category: 'Navigation', } as Document; export const overview: Example = () => ( @@ -157,8 +157,7 @@ export const customExpandIcons: Example = () => ( } - iconCollapsed={} + chevronIcon={} /> ); diff --git a/ui/components/src/Value/Value.stories.tsx b/ui/components/src/Value/Value.stories.tsx index d61b55386..86b46e3e6 100644 --- a/ui/components/src/Value/Value.stories.tsx +++ b/ui/components/src/Value/Value.stories.tsx @@ -5,6 +5,7 @@ import { Value, ValueProps } from './Value'; export default { title: 'Components/Value', component: Value, + category: 'Display', } as Document; export const overview: Example = ({ label, value }) => { diff --git a/ui/components/src/Value/Value.tsx b/ui/components/src/Value/Value.tsx index 769c8fd56..af38faba3 100644 --- a/ui/components/src/Value/Value.tsx +++ b/ui/components/src/Value/Value.tsx @@ -1,5 +1,5 @@ import React, { FC, ReactNode } from 'react'; -import { Box, Text } from 'theme-ui'; +import { Box, BoxProps, Text } from 'theme-ui'; export interface ValueProps { /** @@ -14,13 +14,13 @@ export interface ValueProps { /** * - * Displays a label and value styled + * Displays a value with a small label */ -export const Value: FC = ({ label, value }) => { +export const Value: FC = ({ label, value, ...rest }) => { return ( - + {label} - {value} + {!!value && {value}} ); }; diff --git a/ui/components/src/Zoom/Zoom.stories.tsx b/ui/components/src/Zoom/Zoom.stories.tsx index fca5068cf..91deec99c 100644 --- a/ui/components/src/Zoom/Zoom.stories.tsx +++ b/ui/components/src/Zoom/Zoom.stories.tsx @@ -1,36 +1,41 @@ import React, { useState } from 'react'; import { Document, Example } from '@component-controls/core'; +import { Donut, Box } from 'theme-ui'; import { Zoom } from './Zoom'; -import { Donut } from 'theme-ui'; import { ActionContainer } from '../ActionContainer'; export default { title: 'Components/Zoom', component: Zoom, + category: 'Display', } as Document; export const overview: Example = () => { const [scale, setScale] = useState(1); return ( - setScale(1), - }, - { - node: 'zoom out', - onClick: () => setScale(scale / 2), - }, - { - node: 'zoom in', - onClick: () => setScale(scale * 2), - }, - ]} - > - - - - + + setScale(1), + }, + { + node: 'zoom out', + onClick: () => setScale(scale / 2), + }, + { + node: 'zoom in', + onClick: () => setScale(scale * 2), + }, + ]} + > + + + + + + + ); }; diff --git a/ui/components/src/Zoom/Zoom.tsx b/ui/components/src/Zoom/Zoom.tsx index 72057f5c1..e53e9f7b3 100644 --- a/ui/components/src/Zoom/Zoom.tsx +++ b/ui/components/src/Zoom/Zoom.tsx @@ -9,7 +9,7 @@ export interface ZoomProps { } /** - * zooming transform component + * zoom effect using transform */ export const Zoom: FC = ({ scale = 1, children }) => { return ( diff --git a/ui/components/src/index.ts b/ui/components/src/index.ts index a159abab4..b88fb2537 100644 --- a/ui/components/src/index.ts +++ b/ui/components/src/index.ts @@ -15,6 +15,7 @@ export * from './ColorMode'; export * from './CopyContainer'; export * from './Description'; export * from './ExternalLink'; +export * from './GithubAvatarList'; export * from './Header'; export * from './HoverBox'; export * from './Keyboard'; @@ -30,14 +31,12 @@ export * from './SearchInput'; export * from './Sidebar'; export * from './SkipLinks'; export * from './Source'; -export * from './Subheading'; export * from './Subtitle'; export * from './SyntaxHighlighter'; export * from './Table'; export * from './Tabs'; export * from './Tag'; export * from './ThemeContext'; -export * from './Title'; export * from './TitledImage'; export * from './Toggle'; export * from './Tree'; diff --git a/ui/components/tests/__snapshots__/stories.test.js.snap b/ui/components/tests/__snapshots__/stories.test.js.snap index b3e84c0a4..0b8a091cf 100644 --- a/ui/components/tests/__snapshots__/stories.test.js.snap +++ b/ui/components/tests/__snapshots__/stories.test.js.snap @@ -4,7 +4,7 @@ exports[`Components/ActionBar Group End 1`] = `
-
-
+
+ -
-
- - - - + + + + +
@@ -972,7 +977,8 @@ exports[`Components/ColorMode Overview 1`] = ` exports[`Components/CopyContainer Overview 1`] = `
`; +exports[`Components/GithubAvatarList Max Items 1`] = ` + +
+ + hasparus + + + lachlanjc + +
+ ... +
+
+ +`; + +exports[`Components/GithubAvatarList Overview 1`] = ` + +
+ + hasparus + + + lachlanjc + + + atanasster + +
+ +`; + exports[`Components/Header Overview 1`] = `
- - - -

- LinkHeading text -

+ + +

+ LinkHeading text +

+
@@ -1373,7 +1478,7 @@ exports[`Components/Markdown Overview 1`] = ` exports[`Components/Multiselect Overview 1`] = `
@@ -1759,86 +1869,95 @@ exports[`Components/PanelContainer Open Tab 1`] = ` exports[`Components/PanelContainer Overview 1`] = ` -
-
+
+
- -
-
- +
+
- open panel-2 - -
-
- +
+
- action - + +
-
-
-
- - - - -
@@ -1936,7 +2055,7 @@ exports[`Components/PanelContainer Visible Tabs 1`] = ` exports[`Components/Popover Overview 1`] = `
`; @@ -1969,7 +2092,7 @@ exports[`Components/ProgressIndicator Overview 1`] = ` exports[`Components/SearchInput Customize 1`] = `
`; -exports[`Components/Subheading Overview 1`] = ` - -

- Subheading text -

- -`; - exports[`Components/Subtitle Overview 1`] = `

`; -exports[`Components/Title Overview 1`] = ` - -

- Title text -

- -`; - exports[`Components/TitledImage Overview 1`] = `
- -
-
- +
+
- - + +
+ + + Inbox + +
- - - Inbox - - +
-

- - All - + + All + +
+
+
+
+ 10 +
+
+
-
-
-
- 10 -
-
-
@@ -11277,29 +11388,33 @@ exports[`Components/Tree Arrows Start 1`] = ` href="/inbox/gmail" >
- - GMail - + + GMail + +
+
+
+
+ 8 +
+
+
-
-
-
- 8 -
-
-
@@ -11320,29 +11435,33 @@ exports[`Components/Tree Arrows Start 1`] = ` href="/inbox/work" >
- - Work - + + Work + +
+
+
+
+ 1 +
+
+
-
-
-
- 1 -
-
-
@@ -11363,29 +11482,33 @@ exports[`Components/Tree Arrows Start 1`] = ` href="/inbox/amazon" >
- - Amazon - + + Amazon + +
+
+
+
+ 1 +
+
+
-
-
-
- 1 -
-
-
@@ -11407,38 +11530,42 @@ exports[`Components/Tree Arrows Start 1`] = ` href="/inbox/sent" >
-
+ - - + Sent +
- - Sent - +
-
@@ -11459,48 +11586,52 @@ exports[`Components/Tree Arrows Start 1`] = ` href="/inbox/flagged" >
- + +
+ + Flagged +
- - Flagged - +
+
+ 3 +
+
+
-
-
-
- 3 -
-
-
@@ -11521,38 +11652,42 @@ exports[`Components/Tree Arrows Start 1`] = ` href="/inbox/starred" >
-
+ - - + Starred +
- - Starred - +
-
@@ -11573,38 +11708,42 @@ exports[`Components/Tree Arrows Start 1`] = ` href="/inbox/drafts" >
-
+ - - + Drafts +
- - Drafts - +
-
@@ -11625,38 +11764,42 @@ exports[`Components/Tree Arrows Start 1`] = ` href="/inbox/tagged" >
-
+ - - + Tagged +
- - Tagged - +
-
@@ -11677,38 +11820,42 @@ exports[`Components/Tree Arrows Start 1`] = ` href="/inbox/trash" >
-
+ - - + Trash +
- - Trash - +
-
@@ -11741,60 +11888,64 @@ exports[`Components/Tree Custom Expand Icons 1`] = ` class="css-t9fq0h" >
-
+ - - + + Inbox + +
- - - Inbox - - +
+ +
+ -
-
- -
-
- - All - + + All + +
+
+
+
+ 10 +
+
+
-
-
-
- 10 -
-
-
@@ -11857,29 +12012,33 @@ exports[`Components/Tree Custom Expand Icons 1`] = ` href="/inbox/gmail" >
- - GMail - + + GMail + +
+
+
+
+ 8 +
+
+
-
-
-
- 8 -
-
-
@@ -11900,29 +12059,33 @@ exports[`Components/Tree Custom Expand Icons 1`] = ` href="/inbox/work" >
- - Work - + + Work + +
+
+
+
+ 1 +
+
+
-
-
-
- 1 -
-
-
@@ -11943,29 +12106,33 @@ exports[`Components/Tree Custom Expand Icons 1`] = ` href="/inbox/amazon" >
- - Amazon - + + Amazon + +
+
+
+
+ 1 +
+
+
-
-
-
- 1 -
-
-
@@ -11987,38 +12154,42 @@ exports[`Components/Tree Custom Expand Icons 1`] = ` href="/inbox/sent" >
-
+ - - + Sent +
- - Sent - +
-
@@ -12039,48 +12210,52 @@ exports[`Components/Tree Custom Expand Icons 1`] = ` href="/inbox/flagged" >
-
+ - - + Flagged +
- - Flagged - +
+
+ 3 +
+
+ -
-
-
- 3 -
-
-
@@ -12101,38 +12276,42 @@ exports[`Components/Tree Custom Expand Icons 1`] = ` href="/inbox/starred" >
-
+ - - + Starred +
- - Starred - +
-
@@ -12153,38 +12332,42 @@ exports[`Components/Tree Custom Expand Icons 1`] = ` href="/inbox/drafts" >
- + +
+ + Drafts +
- - Drafts - +
-
@@ -12205,38 +12388,42 @@ exports[`Components/Tree Custom Expand Icons 1`] = ` href="/inbox/tagged" >
-
+ - - + Tagged +
- - Tagged - +
-
@@ -12257,38 +12444,42 @@ exports[`Components/Tree Custom Expand Icons 1`] = ` href="/inbox/trash" >
- + +
+ + Trash +
- - Trash - +
-
@@ -12321,61 +12512,65 @@ exports[`Components/Tree Items 1`] = ` class="css-t9fq0h" >
-
+ - - + + Inbox + +
- - - Inbox - - +
+ +
+ -
-
- -
-
- - All - + + All + +
+
+
+
+ 10 +
+
+
-
-
-
- 10 -
-
-
@@ -12438,29 +12637,33 @@ exports[`Components/Tree Items 1`] = ` href="/inbox/gmail" >
- - GMail - + + GMail + +
+
+
+
+ 8 +
+
+
-
-
-
- 8 -
-
-
@@ -12481,29 +12684,33 @@ exports[`Components/Tree Items 1`] = ` href="/inbox/work" >
- - Work - + + Work + +
+
+
+
+ 1 +
+
+
-
-
-
- 1 -
-
-
@@ -12524,29 +12731,33 @@ exports[`Components/Tree Items 1`] = ` href="/inbox/amazon" >
- - Amazon - + + Amazon + +
+
+
+
+ 1 +
+
+
-
-
-
- 1 -
-
-
@@ -12568,38 +12779,42 @@ exports[`Components/Tree Items 1`] = ` href="/inbox/sent" >
-
+ - - + Sent +
- - Sent - +
-
@@ -12620,48 +12835,52 @@ exports[`Components/Tree Items 1`] = ` href="/inbox/flagged" >
- + +
+ + Flagged +
- - Flagged - +
+
+ 3 +
+
+ -
-
-
- 3 -
-
-
@@ -12682,38 +12901,42 @@ exports[`Components/Tree Items 1`] = ` href="/inbox/starred" >
-
+ - - + Starred +
- - Starred - +
-
@@ -12734,38 +12957,42 @@ exports[`Components/Tree Items 1`] = ` href="/inbox/drafts" >
-
+ - - + Drafts +
- - Drafts - +
-
@@ -12786,38 +13013,42 @@ exports[`Components/Tree Items 1`] = ` href="/inbox/tagged" >
-
+ - - + Tagged +
- - Tagged - +
-
@@ -12838,38 +13069,42 @@ exports[`Components/Tree Items 1`] = ` href="/inbox/trash" >
-
+ - - + Trash +
- - Trash - +
-
@@ -12902,61 +13137,65 @@ exports[`Components/Tree Large Indentation 1`] = ` class="css-t9fq0h" >
-
+ - - + + Inbox + +
- - - Inbox - - +
+ +
+ -
-
- -
-
- - All - + + All + +
+
+
+
+ 10 +
+
+
-
-
-
- 10 -
-
-
@@ -13019,29 +13262,33 @@ exports[`Components/Tree Large Indentation 1`] = ` href="/inbox/gmail" >
- - GMail - + + GMail + +
+
+
+
+ 8 +
+
+
-
-
-
- 8 -
-
-
@@ -13062,29 +13309,33 @@ exports[`Components/Tree Large Indentation 1`] = ` href="/inbox/work" >
- - Work - + + Work + +
+
+
+
+ 1 +
+
+
-
-
-
- 1 -
-
-
@@ -13105,29 +13356,33 @@ exports[`Components/Tree Large Indentation 1`] = ` href="/inbox/amazon" >
- - Amazon - + + Amazon + +
+
+
+
+ 1 +
+
+
-
-
-
- 1 -
-
-
@@ -13149,38 +13404,42 @@ exports[`Components/Tree Large Indentation 1`] = ` href="/inbox/sent" >
-
+ - - + Sent +
- - Sent - +
-
@@ -13201,48 +13460,52 @@ exports[`Components/Tree Large Indentation 1`] = ` href="/inbox/flagged" >
-
+ - - + Flagged +
- - Flagged - +
+
+ 3 +
+
+ -
-
-
- 3 -
-
-
@@ -13263,38 +13526,42 @@ exports[`Components/Tree Large Indentation 1`] = ` href="/inbox/starred" >
- + +
+ + Starred +
- - Starred - +
-
@@ -13315,38 +13582,42 @@ exports[`Components/Tree Large Indentation 1`] = ` href="/inbox/drafts" >
-
+ - - + Drafts +
- - Drafts - +
-
@@ -13367,38 +13638,42 @@ exports[`Components/Tree Large Indentation 1`] = ` href="/inbox/tagged" >
- + +
+ + Tagged +
- - Tagged - +
-
@@ -13419,38 +13694,42 @@ exports[`Components/Tree Large Indentation 1`] = ` href="/inbox/trash" >
-
+ - - + Trash +
- - Trash - +
-
@@ -13483,42 +13762,46 @@ exports[`Components/Tree Overview 1`] = ` class="css-t9fq0h" >
- + + + Local + + +
+
- - Local - - +
+ +
+
-
-
- -
-
- - C: drive - + + C: drive + +
+
-
@@ -13572,19 +13859,23 @@ exports[`Components/Tree Overview 1`] = ` target="_blank" >
- - F: drive - + + F: drive + +
+
-
@@ -13605,42 +13896,46 @@ exports[`Components/Tree Overview 1`] = ` class="css-t9fq0h" >
- + + + Cloud + + +
+
- - Cloud - - +
+ +
+
-
-
- -
-
@@ -13678,61 +13973,65 @@ exports[`Components/Tree Search 1`] = ` class="css-t9fq0h" >
- + +
+ + + Inbox + +
- - - Inbox - - +
+ +
+ -
-
- -
-
- - All - + + All + +
+
+
+
+ 10 +
+
+
-
-
-
- 10 -
-
-
@@ -13795,29 +14098,33 @@ exports[`Components/Tree Search 1`] = ` href="/inbox/gmail" >
- - GMail - + + GMail + +
+
+
+
+ 8 +
+
+
-
-
-
- 8 -
-
-
@@ -13838,29 +14145,33 @@ exports[`Components/Tree Search 1`] = ` href="/inbox/work" >
- - Work - + + Work + +
+
+
+
+ 1 +
+
+
-
-
-
- 1 -
-
-
@@ -13881,29 +14192,33 @@ exports[`Components/Tree Search 1`] = ` href="/inbox/amazon" >
- - Amazon - + + Amazon + +
+
+
+
+ 1 +
+
+
-
-
-
- 1 -
-
-
@@ -13925,38 +14240,42 @@ exports[`Components/Tree Search 1`] = ` href="/inbox/sent" >
-
+ - - + Sent +
- - Sent - +
-
@@ -13977,48 +14296,52 @@ exports[`Components/Tree Search 1`] = ` href="/inbox/flagged" >
- + +
+ + Flagged +
- - Flagged - +
+
+ 3 +
+
+ -
-
-
- 3 -
-
-
@@ -14039,38 +14362,42 @@ exports[`Components/Tree Search 1`] = ` href="/inbox/starred" >
-
+ - - + Starred +
- - Starred - +
-
@@ -14091,38 +14418,42 @@ exports[`Components/Tree Search 1`] = ` href="/inbox/drafts" >
- + +
+ + Drafts +
- - Drafts - +
-
@@ -14143,38 +14474,42 @@ exports[`Components/Tree Search 1`] = ` href="/inbox/tagged" >
-
+ - - + Tagged +
- - Tagged - +
-
@@ -14195,38 +14530,42 @@ exports[`Components/Tree Search 1`] = ` href="/inbox/trash" >
-
+ - - + Trash +
- - Trash - +
-
@@ -14256,79 +14595,88 @@ exports[`Components/Value Overview 1`] = ` exports[`Components/Zoom Overview 1`] = ` -
-
+
+
- -
-
- +
+
- zoom out - -
-
- +
+
- zoom in - + +
-
-
- - - - +
+ + + + +
+
diff --git a/ui/design-tokens/tests/__snapshots__/stories.test.js.snap b/ui/design-tokens/tests/__snapshots__/stories.test.js.snap index 8f76ee622..0d49d141d 100644 --- a/ui/design-tokens/tests/__snapshots__/stories.test.js.snap +++ b/ui/design-tokens/tests/__snapshots__/stories.test.js.snap @@ -6,7 +6,8 @@ exports[`Design Tokens/Colors/AltaColor Hsl 1`] = ` class="css-439ki4-AltaColor" >
@@ -4026,7 +4117,8 @@ exports[`Design Tokens/Colors/BaseWebColor Palette 1`] = ` class="css-iiq0sn-BaseBaseWebColor" >
@@ -4057,7 +4149,8 @@ exports[`Design Tokens/Colors/BaseWebColor Palette 1`] = ` class="css-iiq0sn-BaseBaseWebColor" >
@@ -4088,7 +4181,8 @@ exports[`Design Tokens/Colors/BaseWebColor Palette 1`] = ` class="css-iiq0sn-BaseBaseWebColor" >
@@ -4119,7 +4213,8 @@ exports[`Design Tokens/Colors/BaseWebColor Palette 1`] = ` class="css-iiq0sn-BaseBaseWebColor" >
@@ -4150,7 +4245,8 @@ exports[`Design Tokens/Colors/BaseWebColor Palette 1`] = ` class="css-iiq0sn-BaseBaseWebColor" >
@@ -4181,7 +4277,8 @@ exports[`Design Tokens/Colors/BaseWebColor Palette 1`] = ` class="css-iiq0sn-BaseBaseWebColor" >
@@ -4212,7 +4309,8 @@ exports[`Design Tokens/Colors/BaseWebColor Palette 1`] = ` class="css-iiq0sn-BaseBaseWebColor" >
@@ -4243,7 +4341,8 @@ exports[`Design Tokens/Colors/BaseWebColor Palette 1`] = ` class="css-iiq0sn-BaseBaseWebColor" >
@@ -4277,7 +4376,8 @@ exports[`Design Tokens/Colors/BeelineColor Hsl 1`] = ` class="css-8jebb7-BeelineColor" >
#2F9D89
@@ -8233,7 +8372,8 @@ exports[`Design Tokens/Colors/CometColor Palette 1`] = ` class="css-qe1bk5-BaseCometColor" >
#020D17
@@ -8271,7 +8411,8 @@ exports[`Design Tokens/Colors/CometColor Palette 1`] = ` class="css-qe1bk5-BaseCometColor" >
#041B2F
@@ -8309,7 +8450,8 @@ exports[`Design Tokens/Colors/CometColor Palette 1`] = ` class="css-qe1bk5-BaseCometColor" >
#08365E
@@ -8347,7 +8489,8 @@ exports[`Design Tokens/Colors/CometColor Palette 1`] = ` class="css-qe1bk5-BaseCometColor" >
#0C518D
@@ -8385,7 +8528,8 @@ exports[`Design Tokens/Colors/CometColor Palette 1`] = ` class="css-qe1bk5-BaseCometColor" >
#106CBC
@@ -8423,7 +8567,8 @@ exports[`Design Tokens/Colors/CometColor Palette 1`] = ` class="css-qe1bk5-BaseCometColor" >
#1487EB
@@ -8461,7 +8606,8 @@ exports[`Design Tokens/Colors/CometColor Palette 1`] = ` class="css-qe1bk5-BaseCometColor" >
#439FEF
@@ -8499,7 +8645,8 @@ exports[`Design Tokens/Colors/CometColor Palette 1`] = ` class="css-qe1bk5-BaseCometColor" >
#72B7F3
@@ -8537,7 +8684,8 @@ exports[`Design Tokens/Colors/CometColor Palette 1`] = ` class="css-qe1bk5-BaseCometColor" >
#A1CFF7
@@ -8575,7 +8723,8 @@ exports[`Design Tokens/Colors/CometColor Palette 1`] = ` class="css-qe1bk5-BaseCometColor" >
#D0E7FB
@@ -8608,7 +8757,8 @@ exports[`Design Tokens/Colors/DuetColor Overview 1`] = `
#f2f2f2
@@ -11903,7 +12173,8 @@ exports[`Design Tokens/Colors/MorningstarColor Palette 1`] = `
#c9c7c5
@@ -11928,7 +12199,8 @@ exports[`Design Tokens/Colors/MorningstarColor Palette 1`] = `
#ff0000
@@ -11953,7 +12225,8 @@ exports[`Design Tokens/Colors/MorningstarColor Palette 1`] = `
#ffe5e5
@@ -11978,7 +12251,8 @@ exports[`Design Tokens/Colors/MorningstarColor Palette 1`] = `
#f5c400
@@ -12003,7 +12277,8 @@ exports[`Design Tokens/Colors/MorningstarColor Palette 1`] = `
#fef9e5
@@ -12028,7 +12303,8 @@ exports[`Design Tokens/Colors/MorningstarColor Palette 1`] = `
#00af41
@@ -12053,7 +12329,8 @@ exports[`Design Tokens/Colors/MorningstarColor Palette 1`] = `
#e5f7eb
@@ -12078,7 +12355,8 @@ exports[`Design Tokens/Colors/MorningstarColor Palette 1`] = `
#004376
@@ -12100,7 +12378,8 @@ exports[`Design Tokens/Colors/OPatternColor Overview 1`] = ` class="css-1jam8bv-BaseOPatternColor" >
@@ -12186,7 +12465,8 @@ exports[`Design Tokens/Colors/OPatternColor Palette 1`] = ` class="css-1jam8bv-BaseOPatternColor" >
@@ -12215,7 +12495,8 @@ exports[`Design Tokens/Colors/OPatternColor Palette 1`] = ` class="css-1jam8bv-BaseOPatternColor" >
@@ -12236,7 +12517,8 @@ exports[`Design Tokens/Colors/OPatternColor Palette 1`] = ` class="css-1jam8bv-BaseOPatternColor" >
@@ -12265,7 +12547,8 @@ exports[`Design Tokens/Colors/OPatternColor Palette 1`] = ` class="css-1jam8bv-BaseOPatternColor" >
@@ -12286,7 +12569,8 @@ exports[`Design Tokens/Colors/OPatternColor Palette 1`] = ` class="css-1jam8bv-BaseOPatternColor" >
@@ -12324,7 +12608,8 @@ exports[`Design Tokens/Colors/PajamasColor Overview 1`] = ` class="css-1djey04-PajamasColor" >
.fill-red
@@ -14837,7 +15203,8 @@ exports[`Design Tokens/Colors/SolidColor Overview 1`] = `
@@ -14858,7 +15225,8 @@ exports[`Design Tokens/Colors/SolidColor Palette 1`] = ` class="css-1smpc93-SolidColor" >
.fill-red
@@ -14870,7 +15238,8 @@ exports[`Design Tokens/Colors/SolidColor Palette 1`] = `
.fill-red-lighter
@@ -14895,7 +15265,8 @@ exports[`Design Tokens/Colors/SolidColor Palette 1`] = `
.fill-pink
@@ -14920,7 +15292,8 @@ exports[`Design Tokens/Colors/SolidColor Palette 1`] = `
.fill-blue
@@ -14945,7 +15319,8 @@ exports[`Design Tokens/Colors/SolidColor Palette 1`] = `
.fill-purple
@@ -14970,7 +15346,8 @@ exports[`Design Tokens/Colors/SolidColor Palette 1`] = `
.fill-promoted-orange
@@ -14995,7 +15373,8 @@ exports[`Design Tokens/Colors/SolidColor Palette 1`] = `
.fill-twitter
@@ -15020,7 +15400,8 @@ exports[`Design Tokens/Colors/SolidColor Palette 1`] = `
@@ -15168,7 +15549,8 @@ exports[`Design Tokens/Colors/TableColor Overview 1`] = ` class="css-qxabq3-BaseTableColor" >
@@ -16993,7 +17418,8 @@ exports[`Design Tokens/Colors/UniformColor Palette 1`] = ` class="css-dez9lm-BaseUniformColor" >
@@ -17018,7 +17444,8 @@ exports[`Design Tokens/Colors/UniformColor Palette 1`] = ` class="css-dez9lm-BaseUniformColor" >
@@ -17043,7 +17470,8 @@ exports[`Design Tokens/Colors/UniformColor Palette 1`] = ` class="css-dez9lm-BaseUniformColor" >
@@ -17068,7 +17496,8 @@ exports[`Design Tokens/Colors/UniformColor Palette 1`] = ` class="css-dez9lm-BaseUniformColor" >
@@ -17093,7 +17522,8 @@ exports[`Design Tokens/Colors/UniformColor Palette 1`] = ` class="css-dez9lm-BaseUniformColor" >
@@ -17121,7 +17551,8 @@ exports[`Design Tokens/Colors/VanillaColor Overview 1`] = ` class="css-1m19f2s-VanillaColor" >