@componlyco/core

v4.0.6

Published

21 days ago

- A package that contains core utils used for parsing users' source code.

Downloads

2,970

0High
0Medium
0Low

componly-co

@componlyco/core

A package that contains core utils used for parsing users' source code.

Example imports of design system libraries

Ant Design

CSS import in js | jsx | tsx | ts files

import 'antd/dist/reset.css';

Component import

import { Button } from 'antd';

Blueprint

CSS import in css files

@import "~normalize.css";
@import "~@blueprintjs/core/lib/css/blueprint.css";
@import "~@blueprintjs/icons/lib/css/blueprint-icons.css";

Component import

import { Button } from "@blueprintjs/core";

Chakra

Component import

import { Button } from '@chakra-ui/react'

Clarity Design

Component import

import { ClarityModule } from "@clr/angular";

Fluent-UI

Component import

import { PrimaryButton } from '@fluentui/react';

Mantine

Component import

import { Button } from '@mantine/core';

Material-UI

Component import

import Button from '@mui/material/Button';

import {Button} from '@mui/material';

NG_ZORRO

CSS import in css files

@import "~ng-zorro-antd/ng-zorro-antd.min.css";

Less import in less files

@import "~ng-zorro-antd/ng-zorro-antd.less";

Component import

import { NzButtonModule } from 'ng-zorro-antd/button';

Semantic-ui-react

CSS import in js | jsx | tsx | ts files

import 'semantic-ui-css/semantic.min.css'

Component import

import { Button } from 'semantic-ui-react'

Shards-react

CSS import in js | jsx | tsx | ts files

import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css"

Component import

import { Alert } from "shards-react";

Spectre

CSS import in css files

@import "node_modules/spectre.css/src/spectre";

Bootstrap

SCSS import in scss files

@import "node_modules/bootstrap/scss/bootstrap";

Component import

import Alert from 'bootstrap/js/dist/alert'

Bulma

CSS import in css files

@import 'bulma/css/bulma.css'

Foundation Framework

Component import

import { Dropdown } from 'foundation-sites';

Prime-ng

Component import

import { AccordionModule } from 'primeng/accordion';

Tailwindcss

CSS import in css files

@tailwind base;
@tailwind components;
@tailwind utilities;

API

`parse`

Output Interface

interface ParserOutput {
  /**
   * This array contains `id`, `name`, `path`, `library`, `tags`, `description`, `designDocs`, `isOverridden`, `designSystems`, `stories`, `isSelfDeclared`, `filewiseOccurrences `and `totalOccurrences`, of each component which are used in the repo.
   */
  components: ComponentInfo[];
  /**
   * Total count of `thirdPartyComponents`, `selfDeclaredComponents`, `designSystemsComponents`, `nonDesignSystemComponents`, `totalComponents` and `coverage` info in a repo.
   */
  componentStatistics: ComponentStatistics;
}

{
  "components": [
    {
      "id": "App.tsx/App",
      "path": "App.tsx",
      "name": "App",
      "tags": [
        "returns"
      ],
      "description": "\nDummy Non-Design Docs: https://mantine.dev/\nDummy Design Docs: https://www.figma.com/file/xypwDfIBw3dYtGa3j7m1Sa/Componly-Finale-2023?node-id=4%3A19830&t=AbP1MjlxjKSDaFsm-0",
      "isOverridden": true,
      "designSystems": [],
      "designDocs": [
        "https://figma.com/file/xypwDfIBw3dYtGa3j7m1Sa/Componly-Finale-2023?node-id=4%3A19830&t=AbP1MjlxjKSDaFsm-0"
      ],
      "isSelfDeclared": true,
      "filewiseOccurences": {
        "main.tsx": 1
      },
      "totalOccurences": 1,
      "stories": [],
      "line": 13,
      "column": 1,
      "filewiseLocation": {
        "main.tsx": [
          {
            "lineNumber": 10,
            "columnNumber": 7
          }
        ]
      }
    },
    {
      "id": "iframe/iframe.tsx/IFrame",
      "path": "iframe/iframe.tsx",
      "name": "IFrame",
      "tags": [],
      "description": "",
      "isOverridden": false,
      "designSystems": [],
      "designDocs": [],
      "isSelfDeclared": true,
      "filewiseOccurences": {
        "iframe/index.tsx": 1
      },
      "totalOccurences": 1,
      "stories": [],
      "line": 315,
      "column": 1,
      "filewiseLocation": {
        "iframe/index.tsx": [
          {
            "lineNumber": 7,
            "columnNumber": 5
          }
        ]
      }
    },
    {
      "id": "stories/Button.stories.tsx/Template",
      "path": "stories/Button.stories.tsx",
      "name": "Template",
      "tags": [],
      "description": "",
      "isOverridden": false,
      "designSystems": [],
      "designDocs": [],
      "isSelfDeclared": true,
      "filewiseOccurences": {},
      "totalOccurences": 0,
      "stories": [],
      "line": 17,
      "column": 49,
      "filewiseLocation": {}
    },
    {
      "id": "stories/Button.tsx/Button",
      "path": "stories/Button.tsx",
      "name": "Button",
      "tags": [
        "deprecated"
      ],
      "description": "\nPrimary UI component for user interaction",
      "isOverridden": false,
      "designSystems": [],
      "designDocs": [],
      "isSelfDeclared": true,
      "filewiseOccurences": {
        "stories/Button.stories.tsx": 1,
        "stories/Header.tsx": 3
      },
      "totalOccurences": 4,
      "stories": [
        "stories/Button.stories.tsx"
      ],
      "line": 31,
      "column": 23,
      "filewiseLocation": {
        "stories/Button.stories.tsx": [
          {
            "lineNumber": 17,
            "columnNumber": 59
          }
        ],
        "stories/Header.tsx": [
          {
            "lineNumber": 45,
            "columnNumber": 13
          },
          {
            "lineNumber": 49,
            "columnNumber": 13
          },
          {
            "lineNumber": 50,
            "columnNumber": 13
          }
        ]
      }
    },
    {
      "id": "stories/Header.stories.tsx/Template",
      "path": "stories/Header.stories.tsx",
      "name": "Template",
      "tags": [],
      "description": "",
      "isOverridden": false,
      "designSystems": [],
      "designDocs": [],
      "isSelfDeclared": true,
      "filewiseOccurences": {},
      "totalOccurences": 0,
      "stories": [],
      "line": 15,
      "column": 49,
      "filewiseLocation": {}
    },
    {
      "id": "stories/Header.tsx/Header",
      "path": "stories/Header.tsx",
      "name": "Header",
      "tags": [],
      "description": "",
      "isOverridden": false,
      "designSystems": [],
      "designDocs": [],
      "isSelfDeclared": true,
      "filewiseOccurences": {
        "stories/Header.stories.tsx": 1,
        "stories/Page.tsx": 1
      },
      "totalOccurences": 2,
      "stories": [
        "stories/Header.stories.tsx"
      ],
      "line": 17,
      "column": 23,
      "filewiseLocation": {
        "stories/Header.stories.tsx": [
          {
            "lineNumber": 15,
            "columnNumber": 59
          }
        ],
        "stories/Page.tsx": [
          {
            "lineNumber": 15,
            "columnNumber": 7
          }
        ]
      }
    },
    {
      "id": "stories/Page.stories.tsx/Template",
      "path": "stories/Page.stories.tsx",
      "name": "Template",
      "tags": [],
      "description": "",
      "isOverridden": false,
      "designSystems": [],
      "designDocs": [],
      "isSelfDeclared": true,
      "filewiseOccurences": {},
      "totalOccurences": 0,
      "stories": [],
      "line": 15,
      "column": 47,
      "filewiseLocation": {}
    },
    {
      "id": "stories/Page.tsx/Page",
      "path": "stories/Page.tsx",
      "name": "Page",
      "tags": [],
      "description": "",
      "isOverridden": false,
      "designSystems": [],
      "designDocs": [],
      "isSelfDeclared": true,
      "filewiseOccurences": {
        "stories/Page.stories.tsx": 1
      },
      "totalOccurences": 1,
      "stories": [
        "stories/Page.stories.tsx"
      ],
      "line": 10,
      "column": 32,
      "filewiseLocation": {
        "stories/Page.stories.tsx": [
          {
            "lineNumber": 15,
            "columnNumber": 57
          }
        ]
      }
    },
    {
      "id": "@componlyco/berkoukes/ExampleComponent",
      "library": "@componlyco/berkoukes",
      "name": "ExampleComponent",
      "tags": [],
      "designSystems": [],
      "isSelfDeclared": false,
      "filewiseOccurences": {
        "App.tsx": 1
      },
      "totalOccurences": 1,
      "filewiseLocation": {
        "App.tsx": [
          {
            "lineNumber": 27,
            "columnNumber": 7
          }
        ]
      }
    },
    {
      "id": "@mantine/core/Button",
      "library": "@mantine/core",
      "name": "Button",
      "tags": [],
      "designSystems": [
        {
          "alias": "Mantine UI",
          "url": "https://www.npmjs.com/package/@mantine/core",
          "tags": [
            {
              "name": "deprecated",
              "description": "This is deprecated component"
            }
          ]
        }
      ],
      "isSelfDeclared": false,
      "filewiseOccurences": {
        "App.tsx": 1
      },
      "totalOccurences": 1,
      "filewiseLocation": {
        "App.tsx": [
          {
            "lineNumber": 33,
            "columnNumber": 9
          }
        ]
      }
    },
    {
      "id": "@mantine/core/MantineProvider",
      "library": "@mantine/core",
      "name": "MantineProvider",
      "tags": [],
      "designSystems": [
        {
          "alias": "Mantine UI",
          "url": "https://www.npmjs.com/package/@mantine/core",
          "tags": [
            {
              "name": "deprecated",
              "description": "This is deprecated component"
            }
          ]
        }
      ],
      "isSelfDeclared": false,
      "filewiseOccurences": {
        "main.tsx": 1
      },
      "totalOccurences": 1,
      "filewiseLocation": {
        "main.tsx": [
          {
            "lineNumber": 9,
            "columnNumber": 5
          }
        ]
      }
    }
  ],
  "componentStatistics": {
    "thirdPartyComponents": 3,
    "selfDeclaredComponents": 8,
    "designSystemsComponents": 2,
    "nonDesignSystemComponents": 9,
    "totalComponents": 11,
    "coverage": 0.2727272727272727
  }
}

`detect`

Output Interface

export interface DetectorOutput {
  /**
   * A dictionary that provides various storybook-related information about a project
   * such as a bundler and a framework used in the project, the package manager used and its version,and so on.
   */
  storybookMeta: StorybookMetadata;
  /**
   * It is an array of names of the design system packages used in a project.
   */
  designSystems: string[];
  /**
   * This data structure shows various programming languages used in a project on both
   * per-file and aggregated bases for a project.
   */
  languages: Results;
}

{
  "storybookMeta": {
    "generatedAt": 1680944355110,
    "hasCustomBabel": false,
    "hasCustomWebpack": false,
    "hasStaticDirs": false,
    "hasStorybookEslint": false,
    "refCount": 0,
    "monorepo": "Turborepo",
    "packageManager": {
      "type": "yarn",
      "version": "1.22.19"
    },
    "features": {
      "storyStoreV7": true
    },
    "framework": {
      "name": "@storybook/react"
    },
    "renderer": "@storybook/react",
    "storybookVersion": "6.5.16",
    "storybookVersionSpecifier": "^6.5.15",
    "language": "typescript",
    "storybookPackages": {
      "@componlyco/storybook-parser": {
        "version": "1.0.0"
      },
      "@storybook/addon-actions": {
        "version": "6.5.16"
      },
      "@storybook/builder-vite": {
        "version": "0.3.0"
      },
      "@storybook/react": {
        "version": "6.5.16"
      },
      "@storybook/testing-library": {
        "version": "0.0.13"
      }
    },
    "addons": {
      "@storybook/addon-links": {
        "version": "6.5.16"
      },
      "@storybook/addon-essentials": {
        "version": "6.5.16"
      },
      "@storybook/addon-interactions": {
        "version": "6.5.16"
      }
    }
  },
  "designSystems": [],
  "languages": {
    "files": {
      "count": 28,
      "bytes": 53043,
      "results": {
        "App.css": "CSS",
        "App.tsx": "TSX",
        "assets/react.svg": "SVG",
        "design-tokens.ts": "TypeScript",
        "iframe/iframe.tsx": "TSX",
        "iframe/index.html": "HTML",
        "iframe/index.tsx": "TSX",
        "index.css": "CSS",
        "main.tsx": "TSX",
        "stories/assets/code-brackets.svg": "SVG",
        "stories/assets/colors.svg": "SVG",
        "stories/assets/comments.svg": "SVG",
        "stories/assets/direction.svg": "SVG",
        "stories/assets/flow.svg": "SVG",
        "stories/assets/plugin.svg": "SVG",
        "stories/assets/repo.svg": "SVG",
        "stories/assets/stackalt.svg": "SVG",
        "stories/button.css": "CSS",
        "stories/Button.stories.tsx": "TSX",
        "stories/Button.tsx": "TSX",
        "stories/ComponentBook.stories.mdx": "Markdown",
        "stories/header.css": "CSS",
        "stories/Header.stories.tsx": "TSX",
        "stories/Header.tsx": "TSX",
        "stories/Introduction.stories.mdx": "Markdown",
        "stories/page.css": "CSS",
        "stories/Page.stories.tsx": "TSX",
        "stories/Page.tsx": "TSX"
      }
    },
    "languages": {
      "count": 6,
      "bytes": 53043,
      "results": {
        "CSS": {
          "type": "markup",
          "bytes": 4036,
          "color": "#563d7c"
        },
        "TSX": {
          "type": "programming",
          "bytes": 17261,
          "color": "#3178c6"
        },
        "SVG": {
          "type": "data",
          "bytes": 24655,
          "color": "#ff9900"
        },
        "TypeScript": {
          "type": "programming",
          "bytes": 284,
          "color": "#3178c6"
        },
        "HTML": {
          "type": "markup",
          "bytes": 291,
          "color": "#e34c26"
        },
        "Markdown": {
          "type": "prose",
          "bytes": 6516,
          "color": "#083fa1"
        }
      }
    },
    "unknown": {
      "count": 0,
      "bytes": 0,
      "extensions": {},
      "filenames": {}
    }
  }
}

`parseDesignTokensJSON`

Output Interface

type DesignTokens = {
  [key: string]:
    | Record<
        string,
        {
          value?: string | number | null | undefined;
          name?: string | null | undefined;
          comment?: string | null | undefined;
          themeable?: boolean | null | undefined;
          attributes?: Record<string, unknown> | null | undefined;
        }
      >
    | DesignTokens;
};

{
  "designTokens": {
    "design-tokens.ts": [
      {
        "size": {
          "font": {
            "small": {
              "value": "10px"
            },
            "medium": {
              "value": "16px"
            },
            "large": {
              "value": "24px"
            },
            "base": {
              "value": "{size.font.medium.value}"
            }
          }
        }
      }
    ]
  }
}

`scan`

Output Interface

interface ScannerOutput {
  /**
   * This array contains `name` `library` `id` of each component which are not declared in the project
   */
  detect: DetectOutput;
  /**
   * Array of self declared components info in a repo.
   */
  parse: ParserOutput;
  /**
   * Dictionary of component stories and their URLs
   */
  stories: StoryURLOutput;
  /**
   * Dictionary of design tokens filewise
   */
  designTokens: Record<string, DesignTokens[]>;
}

{
  "detect": {
    "storybookMeta": {
      "generatedAt": 1680939277104,
      "hasCustomBabel": false,
      "hasCustomWebpack": false,
      "hasStaticDirs": false,
      "hasStorybookEslint": false,
      "refCount": 0,
      "monorepo": "Turborepo",
      "packageManager": {
        "type": "yarn",
        "version": "1.22.19"
      },
      "features": {
        "storyStoreV7": true
      },
      "framework": {
        "name": "@storybook/react"
      },
      "renderer": "@storybook/react",
      "storybookVersion": "6.5.16",
      "storybookVersionSpecifier": "^6.5.15",
      "language": "typescript",
      "storybookPackages": {
        "@componlyco/storybook-parser": {
          "version": "1.0.0"
        },
        "@storybook/addon-actions": {
          "version": "6.5.16"
        },
        "@storybook/builder-vite": {
          "version": "0.3.0"
        },
        "@storybook/react": {
          "version": "6.5.16"
        },
        "@storybook/testing-library": {
          "version": "0.0.13"
        }
      },
      "addons": {
        "@storybook/addon-links": {
          "version": "6.5.16"
        },
        "@storybook/addon-essentials": {
          "version": "6.5.16"
        },
        "@storybook/addon-interactions": {
          "version": "6.5.16"
        }
      }
    },
    "designSystems": [],
    "languages": {
      "files": {
        "count": 28,
        "bytes": 53043,
        "results": {
          "App.css": "CSS",
          "App.tsx": "TSX",
          "assets/react.svg": "SVG",
          "design-tokens.ts": "TypeScript",
          "iframe/iframe.tsx": "TSX",
          "iframe/index.html": "HTML",
          "iframe/index.tsx": "TSX",
          "index.css": "CSS",
          "main.tsx": "TSX",
          "stories/assets/code-brackets.svg": "SVG",
          "stories/assets/colors.svg": "SVG",
          "stories/assets/comments.svg": "SVG",
          "stories/assets/direction.svg": "SVG",
          "stories/assets/flow.svg": "SVG",
          "stories/assets/plugin.svg": "SVG",
          "stories/assets/repo.svg": "SVG",
          "stories/assets/stackalt.svg": "SVG",
          "stories/button.css": "CSS",
          "stories/Button.stories.tsx": "TSX",
          "stories/Button.tsx": "TSX",
          "stories/ComponentBook.stories.mdx": "Markdown",
          "stories/header.css": "CSS",
          "stories/Header.stories.tsx": "TSX",
          "stories/Header.tsx": "TSX",
          "stories/Introduction.stories.mdx": "Markdown",
          "stories/page.css": "CSS",
          "stories/Page.stories.tsx": "TSX",
          "stories/Page.tsx": "TSX"
        }
      },
      "languages": {
        "count": 6,
        "bytes": 53043,
        "results": {
          "CSS": {
            "type": "markup",
            "bytes": 4036,
            "color": "#563d7c"
          },
          "TSX": {
            "type": "programming",
            "bytes": 17261,
            "color": "#3178c6"
          },
          "SVG": {
            "type": "data",
            "bytes": 24655,
            "color": "#ff9900"
          },
          "TypeScript": {
            "type": "programming",
            "bytes": 284,
            "color": "#3178c6"
          },
          "HTML": {
            "type": "markup",
            "bytes": 291,
            "color": "#e34c26"
          },
          "Markdown": {
            "type": "prose",
            "bytes": 6516,
            "color": "#083fa1"
          }
        }
      },
      "unknown": {
        "count": 0,
        "bytes": 0,
        "extensions": {},
        "filenames": {}
      }
    }
  },
  "designTokens": {
    "design-tokens.ts": [
      {
        "size": {
          "font": {
            "small": {
              "value": "10px"
            },
            "medium": {
              "value": "16px"
            },
            "large": {
              "value": "24px"
            },
            "base": {
              "value": "{size.font.medium.value}"
            }
          }
        }
      }
    ],
    "vite-env.d.ts": []
  },
  "stories": {
    "urls": {
      "example-componentbook": [
        "https://localhost:3000/iframe.html?id=example-componentbook--page&full=1&shortcuts=false&singleStory=true"
      ],
      "example-introduction": [
        "https://localhost:3000/iframe.html?id=example-introduction--page&full=1&shortcuts=false&singleStory=true"
      ],
      "example-button": [
        "https://localhost:3000/iframe.html?id=example-button--primary&full=1&shortcuts=false&singleStory=true",
        "https://localhost:3000/iframe.html?id=example-button--secondary&full=1&shortcuts=false&singleStory=true",
        "https://localhost:3000/iframe.html?id=example-button--large&full=1&shortcuts=false&singleStory=true",
        "https://localhost:3000/iframe.html?id=example-button--small&full=1&shortcuts=false&singleStory=true"
      ],
      "header": [
        "https://localhost:3000/iframe.html?id=header--logged-in&full=1&shortcuts=false&singleStory=true",
        "https://localhost:3000/iframe.html?id=header--logged-out&full=1&shortcuts=false&singleStory=true"
      ],
      "example-page": [
        "https://localhost:3000/iframe.html?id=example-page--logged-out&full=1&shortcuts=false&singleStory=true",
        "https://localhost:3000/iframe.html?id=example-page--logged-in&full=1&shortcuts=false&singleStory=true"
      ]
    },
    "meta": {
      "v": 3,
      "stories": {
        "example-componentbook--page": {
          "id": "example-componentbook--page",
          "title": "Example/ComponentBook",
          "name": "Page",
          "importPath": "./src/stories/ComponentBook.stories.mdx"
        },
        "example-introduction--page": {
          "id": "example-introduction--page",
          "title": "Example/Introduction",
          "name": "Page",
          "importPath": "./src/stories/Introduction.stories.mdx"
        },
        "example-button--primary": {
          "id": "example-button--primary",
          "title": "Example/Button",
          "name": "Primary",
          "importPath": "./src/stories/Button.stories.tsx"
        },
        "example-button--secondary": {
          "id": "example-button--secondary",
          "title": "Example/Button",
          "name": "Secondary",
          "importPath": "./src/stories/Button.stories.tsx"
        },
        "example-button--large": {
          "id": "example-button--large",
          "title": "Example/Button",
          "name": "Large",
          "importPath": "./src/stories/Button.stories.tsx"
        },
        "example-button--small": {
          "id": "example-button--small",
          "title": "Example/Button",
          "name": "Small",
          "importPath": "./src/stories/Button.stories.tsx"
        },
        "header--logged-in": {
          "id": "header--logged-in",
          "title": "Header",
          "name": "Logged In",
          "importPath": "./src/stories/Header.stories.tsx"
        },
        "header--logged-out": {
          "id": "header--logged-out",
          "title": "Header",
          "name": "Logged Out",
          "importPath": "./src/stories/Header.stories.tsx"
        },
        "example-page--logged-out": {
          "id": "example-page--logged-out",
          "title": "Example/Page",
          "name": "Logged Out",
          "importPath": "./src/stories/Page.stories.tsx"
        },
        "example-page--logged-in": {
          "id": "example-page--logged-in",
          "title": "Example/Page",
          "name": "Logged In",
          "importPath": "./src/stories/Page.stories.tsx"
        }
      }
    }
  },
  "parse": {
    "components": [
      {
        "id": "App.tsx/App",
        "path": "App.tsx",
        "name": "App",
        "tags": ["returns"],
        "description": "\nDummy Non-Design Docs: https://mantine.dev/\nDummy Design Docs: https://www.figma.com/file/xypwDfIBw3dYtGa3j7m1Sa/Componly-Finale-2023?node-id=4%3A19830&t=AbP1MjlxjKSDaFsm-0",
        "isOverridden": true,
        "designSystems": [],
        "designDocs": [
          "https://figma.com/file/xypwDfIBw3dYtGa3j7m1Sa/Componly-Finale-2023?node-id=4%3A19830&t=AbP1MjlxjKSDaFsm-0"
        ],
        "isSelfDeclared": true,
        "filewiseOccurences": {
          "main.tsx": 1
        },
        "totalOccurences": 1,
        "stories": [],
        "line": 13,
        "column": 1,
        "filewiseLocation": {
          "main.tsx": [
            {
              "lineNumber": 10,
              "columnNumber": 7
            }
          ]
        },
        "storyURLs": []
      },
      {
        "id": "iframe/iframe.tsx/IFrame",
        "path": "iframe/iframe.tsx",
        "name": "IFrame",
        "tags": [],
        "description": "",
        "isOverridden": false,
        "designSystems": [],
        "designDocs": [],
        "isSelfDeclared": true,
        "filewiseOccurences": {
          "iframe/index.tsx": 1
        },
        "totalOccurences": 1,
        "stories": [],
        "line": 315,
        "column": 1,
        "filewiseLocation": {
          "iframe/index.tsx": [
            {
              "lineNumber": 7,
              "columnNumber": 5
            }
          ]
        },
        "storyURLs": []
      },
      {
        "id": "stories/Button.stories.tsx/Template",
        "path": "stories/Button.stories.tsx",
        "name": "Template",
        "tags": [],
        "description": "",
        "isOverridden": false,
        "designSystems": [],
        "designDocs": [],
        "isSelfDeclared": true,
        "filewiseOccurences": {},
        "totalOccurences": 0,
        "stories": [],
        "line": 17,
        "column": 49,
        "filewiseLocation": {},
        "storyURLs": []
      },
      {
        "id": "stories/Button.tsx/Button",
        "path": "stories/Button.tsx",
        "name": "Button",
        "tags": ["deprecated"],
        "description": "\nPrimary UI component for user interaction",
        "isOverridden": false,
        "designSystems": [],
        "designDocs": [],
        "isSelfDeclared": true,
        "filewiseOccurences": {
          "stories/Button.stories.tsx": 1,
          "stories/Header.tsx": 3
        },
        "totalOccurences": 4,
        "stories": ["stories/Button.stories.tsx"],
        "line": 31,
        "column": 23,
        "filewiseLocation": {
          "stories/Button.stories.tsx": [
            {
              "lineNumber": 17,
              "columnNumber": 59
            }
          ],
          "stories/Header.tsx": [
            {
              "lineNumber": 45,
              "columnNumber": 13
            },
            {
              "lineNumber": 49,
              "columnNumber": 13
            },
            {
              "lineNumber": 50,
              "columnNumber": 13
            }
          ]
        },
        "storyURLs": [
          "https://localhost:3000/iframe.html?id=example-button--primary&full=1&shortcuts=false&singleStory=true",
          "https://localhost:3000/iframe.html?id=example-button--secondary&full=1&shortcuts=false&singleStory=true",
          "https://localhost:3000/iframe.html?id=example-button--large&full=1&shortcuts=false&singleStory=true",
          "https://localhost:3000/iframe.html?id=example-button--small&full=1&shortcuts=false&singleStory=true"
        ]
      },
      {
        "id": "stories/Header.stories.tsx/Template",
        "path": "stories/Header.stories.tsx",
        "name": "Template",
        "tags": [],
        "description": "",
        "isOverridden": false,
        "designSystems": [],
        "designDocs": [],
        "isSelfDeclared": true,
        "filewiseOccurences": {},
        "totalOccurences": 0,
        "stories": [],
        "line": 15,
        "column": 49,
        "filewiseLocation": {},
        "storyURLs": []
      },
      {
        "id": "stories/Header.tsx/Header",
        "path": "stories/Header.tsx",
        "name": "Header",
        "tags": [],
        "description": "",
        "isOverridden": false,
        "designSystems": [],
        "designDocs": [],
        "isSelfDeclared": true,
        "filewiseOccurences": {
          "stories/Header.stories.tsx": 1,
          "stories/Page.tsx": 1
        },
        "totalOccurences": 2,
        "stories": ["stories/Header.stories.tsx"],
        "line": 17,
        "column": 23,
        "filewiseLocation": {
          "stories/Header.stories.tsx": [
            {
              "lineNumber": 15,
              "columnNumber": 59
            }
          ],
          "stories/Page.tsx": [
            {
              "lineNumber": 15,
              "columnNumber": 7
            }
          ]
        },
        "storyURLs": [
          "https://localhost:3000/iframe.html?id=header--logged-in&full=1&shortcuts=false&singleStory=true",
          "https://localhost:3000/iframe.html?id=header--logged-out&full=1&shortcuts=false&singleStory=true"
        ]
      },
      {
        "id": "stories/Page.stories.tsx/Template",
        "path": "stories/Page.stories.tsx",
        "name": "Template",
        "tags": [],
        "description": "",
        "isOverridden": false,
        "designSystems": [],
        "designDocs": [],
        "isSelfDeclared": true,
        "filewiseOccurences": {},
        "totalOccurences": 0,
        "stories": [],
        "line": 15,
        "column": 47,
        "filewiseLocation": {},
        "storyURLs": []
      },
      {
        "id": "stories/Page.tsx/Page",
        "path": "stories/Page.tsx",
        "name": "Page",
        "tags": [],
        "description": "",
        "isOverridden": false,
        "designSystems": [],
        "designDocs": [],
        "isSelfDeclared": true,
        "filewiseOccurences": {
          "stories/Page.stories.tsx": 1
        },
        "totalOccurences": 1,
        "stories": ["stories/Page.stories.tsx"],
        "line": 10,
        "column": 32,
        "filewiseLocation": {
          "stories/Page.stories.tsx": [
            {
              "lineNumber": 15,
              "columnNumber": 57
            }
          ]
        },
        "storyURLs": [
          "https://localhost:3000/iframe.html?id=example-page--logged-out&full=1&shortcuts=false&singleStory=true",
          "https://localhost:3000/iframe.html?id=example-page--logged-in&full=1&shortcuts=false&singleStory=true"
        ]
      },
      {
        "id": "@componlyco/berkoukes/ExampleComponent",
        "library": "@componlyco/berkoukes",
        "name": "ExampleComponent",
        "tags": [],
        "designSystems": [],
        "isSelfDeclared": false,
        "filewiseOccurences": {
          "App.tsx": 1
        },
        "totalOccurences": 1,
        "filewiseLocation": {
          "App.tsx": [
            {
              "lineNumber": 27,
              "columnNumber": 7
            }
          ]
        }
      },
      {
        "id": "@mantine/core/Button",
        "library": "@mantine/core",
        "name": "Button",
        "tags": [],
        "designSystems": [
          {
            "alias": "Mantine UI",
            "url": "https://www.npmjs.com/package/@mantine/core",
            "tags": [
              {
                "name": "deprecated",
                "description": "This is deprecated component"
              }
            ]
          }
        ],
        "isSelfDeclared": false,
        "filewiseOccurences": {
          "App.tsx": 1
        },
        "totalOccurences": 1,
        "filewiseLocation": {
          "App.tsx": [
            {
              "lineNumber": 33,
              "columnNumber": 9
            }
          ]
        }
      },
      {
        "id": "@mantine/core/MantineProvider",
        "library": "@mantine/core",
        "name": "MantineProvider",
        "tags": [],
        "designSystems": [
          {
            "alias": "Mantine UI",
            "url": "https://www.npmjs.com/package/@mantine/core",
            "tags": [
              {
                "name": "deprecated",
                "description": "This is deprecated component"
              }
            ]
          }
        ],
        "isSelfDeclared": false,
        "filewiseOccurences": {
          "main.tsx": 1
        },
        "totalOccurences": 1,
        "filewiseLocation": {
          "main.tsx": [
            {
              "lineNumber": 9,
              "columnNumber": 5
            }
          ]
        }
      }
    ],
    "componentStatistics": {
      "thirdPartyComponents": 3,
      "selfDeclaredComponents": 8,
      "designSystemsComponents": 2,
      "nonDesignSystemComponents": 9,
      "totalComponents": 11,
      "coverage": 0.2727272727272727
    }
  }
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@componlyco/core

Example imports of design system libraries

Ant Design

Blueprint

Chakra

Clarity Design

Fluent-UI

Mantine

Material-UI

NG_ZORRO

Semantic-ui-react

Shards-react

Spectre

Bootstrap

Bulma

Foundation Framework

Prime-ng

Tailwindcss

API

parse

Output Interface

detect

Output Interface

parseDesignTokensJSON

Output Interface

scan

Output Interface

`parse`

`detect`

`parseDesignTokensJSON`

`scan`